/* Tema oscuro de motoforall.cl (Tailwind zinc + azul + naranjo de marca) */
:root {
  --bg: #0A0A0B;
  --surface: #18181B;
  --surface-2: #27272A;
  --ink: #FAFAFA;
  --muted: #A1A1AA;
  --line: #27272A;
  --primary: #155DFC;
  --primary-ink: #FFFFFF;
  --primary-soft: rgba(21, 93, 252, .16);
  --link: #54A2FF;
  --brand-orange: #F05100;
  --accent: #EA580C;
  --plate: #EA580C;
  --plate-ink: #FFFFFF;
  --danger: #EF4444;
  --danger-soft: rgba(220, 38, 38, .15);
  --ok: #00C758;
  --warn: #F59E0B;
  --footer: #09090B;
  --shadow: 0 8px 32px rgba(0, 0, 0, .5);
  --s-recibida: #94A3B8; --s-diagnostico: #A78BFA; --s-aprobacion: #F59E0B; --s-repuestos: #F97316;
  --s-reparacion: #54A2FF; --s-lista: #00C758; --s-entregada: #71717A; --s-cancelada: #EF4444;
  --radius: 14px;
  --f-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--f-body); -webkit-text-size-adjust: 100%; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: 2.1rem; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.03em; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
a { color: var(--link); }
.wordmark { font-weight: 900; font-style: italic; letter-spacing: -.05em; text-transform: uppercase; color: #fff; }
.promo { background: var(--brand-orange); color: #fff; text-align: center; font: 700 .72rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 10px 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); }
[hidden] { display: none !important; }

/* ---------- Estructura ---------- */
.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }
.side { background: var(--footer); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); display: grid; place-items: center; flex: none; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.brand-mark span { color: #fff; font: 900 italic 13px/1 var(--f-body); letter-spacing: -.04em; }
.brand b { font: 900 italic 1.05rem/1.05 var(--f-body); white-space: nowrap; letter-spacing: -.05em; text-transform: uppercase; display: block; color: #fff; }
.brand small { color: var(--muted); font-size: .8rem; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: #9F9FA9; text-decoration: none; font: 900 .75rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; border-left: 2px solid transparent; }
.nav a:hover { color: #fff; }
.nav a svg { width: 20px; height: 20px; flex: none; }
.nav a:hover { background: var(--surface-2); }
.nav a.on { background: var(--primary-soft); color: #fff; border-left-color: var(--primary); border-radius: 0 10px 10px 0; }
.side .me { margin-top: auto; border-top: 1px solid var(--line); padding: 12px 8px 0; font-size: .9rem; }
.main { min-width: 0; padding: 24px clamp(16px, 3vw, 36px) 110px; max-width: 1180px; width: 100%; }
.topbar { display: none; }
.tabbar { display: none; }

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .side { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: rgba(10,10,11,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); color: #fff; position: sticky; top: 0; z-index: 20; }
  .topbar b { font: 900 italic 1.2rem/1 var(--f-body); letter-spacing: -.05em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
  .topbar b img { height: 30px; width: auto; }
  .topbar button { background: transparent; border: 0; color: inherit; padding: 6px; }
  .main { padding: 16px 16px 120px; }
  .tabbar { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; color: var(--muted); text-decoration: none; padding: 4px 0; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.on { color: #fff; font-weight: 700; box-shadow: inset 0 2px 0 var(--primary); }
  h1 { font-size: 1.6rem; }
}

/* ---------- Componentes ---------- */
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.head p { margin: 4px 0 0; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 500; font-size: .92rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 40px; height: 40px; border-radius: 8px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface); cursor: pointer; flex: none; }
.icon-btn svg { width: 18px; height: 18px; }

.card { background: var(--surface); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); box-shadow: var(--shadow); }
.section { padding: 18px; display: grid; gap: 14px; }
.section > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1.2rem; }
.section > h2 small { font: 500 .8rem var(--f-body); color: var(--muted); letter-spacing: 0; }
.stack { display: grid; gap: 16px; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.field { display: grid; gap: 5px; min-width: 0; }
.field > span { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.field.full { grid-column: 1 / -1; }
input, select, textarea { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #0F0F11; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--surface); }
input[readonly] { background: var(--surface-2); }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--primary); }
input[type="range"] { padding: 0; accent-color: var(--primary); background: transparent; border: 0; box-shadow: none; }

/* Placa chilena de moto: blanca, letras negras */
.plate { display: inline-flex; flex-direction: column; align-items: center; background: #FFFFFF; color: #111; border: 2px solid #111; border-radius: 5px; padding: 2px 8px 1px; font: 600 1rem/1.05 var(--f-mono); letter-spacing: .06em; min-width: 76px; }
.plate small { font: 600 .5rem/1 var(--f-body); letter-spacing: .12em; }
.plate.lg { font-size: 1.5rem; padding: 4px 14px 2px; }
.plate.lg small { font-size: .62rem; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.prio-alta { color: var(--danger); font-weight: 600; }

/* Tablero */
.status-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: thin; }
.chip { flex: none; display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 500; font-size: .9rem; border-left: 4px solid var(--c, var(--line)); }
.chip b { font: 700 1.3rem/1 var(--f-display); }
.chip.on { background: var(--primary-soft); border-color: var(--primary); border-left-color: var(--c, var(--primary)); }
.filters { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; margin-bottom: 14px; }
@media (max-width: 620px) { .filters { grid-template-columns: 1fr 1fr; } .filters .search { grid-column: 1 / -1; } }
.orders { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.ot { display: grid; gap: 10px; padding: 14px; text-decoration: none; color: inherit; border-top: 4px solid var(--c); }
.ot:hover { border-color: rgba(59,130,246,.5); border-top-color: var(--c); }
.ot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ot-num { font: 600 .95rem var(--f-mono); color: var(--muted); }
.ot-main { display: flex; align-items: center; gap: 12px; }
.ot-main div { min-width: 0; }
.ot-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-main span { color: var(--muted); font-size: .9rem; }
.ot-req { font-size: .92rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.ot-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; flex-wrap: wrap; }
.ot-foot .late { color: var(--danger); font-weight: 600; }
.ot-foot b { color: var(--ink); }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }

/* Orden */
.order-head { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; padding: 16px 18px; }
.order-head .meta { display: grid; gap: 2px; }
.order-head .meta .mono { font-size: 1.05rem; }
.order-head .status-ctl { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.order-head select { width: auto; min-width: 210px; }
.progress { display: flex; gap: 3px; width: 100%; }
.progress i { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-2); }
.progress i.done { background: var(--c); }
.sel-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 12px; border-radius: 8px; background: var(--surface-2); }
.sel-summary .who { flex: 1; min-width: 180px; }
.results { display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.result { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; text-align: left; width: 100%; }
.result:hover { border-color: var(--primary); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer; user-select: none; }
.fuel { display: grid; gap: 4px; }
.fuel-scale { display: flex; justify-content: space-between; font: 600 .75rem var(--f-mono); color: var(--muted); }
.lines { display: grid; gap: 8px; }
.line { display: grid; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.line.trabajo { grid-template-columns: 1fr 140px 40px; }
.line.repuesto { grid-template-columns: 110px 1fr 80px 130px 40px; }
.line.insumo { grid-template-columns: 1fr 90px 130px 130px 40px; }
.cat-search { display: grid; gap: 6px; }
.cat-search .results:empty { display: none; }
.line .sub { font-size: .8rem; color: var(--muted); grid-column: 1 / -1; text-align: right; margin-top: -4px; }
@media (max-width: 700px) {
  .line.trabajo { grid-template-columns: 1fr 40px; } .line.trabajo .f-desc { grid-column: 1 / -1; }
  .line.repuesto { grid-template-columns: 1fr 1fr 40px; } .line.repuesto .f-desc { grid-column: 1 / -1; }
  .line.insumo { grid-template-columns: 1fr 1fr 1fr 40px; } .line.insumo .f-desc { grid-column: 1 / -1; }
}
.totals { display: grid; gap: 6px; max-width: 420px; margin-left: auto; width: 100%; }
.totals div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.totals .grand { font: 700 1.5rem var(--f-display); border-top: 2px solid var(--ink); padding-top: 6px; }
.totals .saldo { font-weight: 700; color: var(--primary); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.photo { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photo button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.add-photo { aspect-ratio: 1; border: 2px dashed var(--line); border-radius: 8px; display: grid; place-items: center; text-align: center; color: var(--muted); cursor: pointer; font-size: .85rem; padding: 6px; }
.add-photo input { display: none; }
.sig { display: grid; gap: 8px; }
.sig canvas { width: 100%; height: 170px; border: 1px dashed var(--muted); border-radius: 8px; background: #fff; touch-action: none; display: block; }
.sig .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.sig img { width: 100%; max-height: 170px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.history li { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.history li time { color: var(--muted); font-variant-numeric: tabular-nums; }
.savebar { position: fixed; align-items: center; left: 232px; right: 0; bottom: 0; z-index: 25; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 12px clamp(16px, 3vw, 36px) calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
.savebar .dirty { margin-right: auto; align-self: center; color: var(--warn); font-weight: 600; font-size: .9rem; }
@media (max-width: 820px) {
  .savebar { left: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); padding: 8px 16px; flex-wrap: nowrap; align-items: center; }
  .savebar .dirty { position: absolute; top: -26px; left: 16px; background: var(--surface); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: .8rem; }
  .savebar #guardar { flex: 1; }
}
@media (max-width: 560px) { .savebar .lbl { display: none; } .savebar .btn:not(#guardar) { padding: 0 12px; } }

/* Tablas */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--line); }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr.link { cursor: pointer; } tr.link:hover td { background: var(--surface-2); }
.role { font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: var(--surface-2); }
.role.admin { background: var(--primary-soft); color: var(--primary); }

/* Acceso */
.auth { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.auth .card { width: 100%; max-width: 400px; padding: 28px 24px; display: grid; gap: 16px; }
.auth .brand { padding: 0; }
.auth .err { color: var(--danger); font-weight: 600; font-size: .9rem; margin: 0; }
.demo-note { background: var(--primary-soft); color: var(--ink); border-radius: 8px; padding: 10px 12px; font-size: .9rem; }
.banner { background: var(--brand-orange); color: #fff; padding: 8px 16px; font-size: .88rem; font-weight: 500; text-align: center; }

/* Modales y avisos */
.modal-bg { position: fixed; inset: 0; background: rgba(8, 14, 20, .55); display: grid; place-items: center; z-index: 60; padding: 16px; }
.modal { width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; padding: 20px; display: grid; gap: 14px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.viewer img { width: 100%; border-radius: 8px; }
#toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 8px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 80; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translateX(-50%); }
@media (max-width: 820px) { #toast { bottom: auto; top: calc(64px + env(safe-area-inset-top, 0px)); } }
#toast.err { background: var(--danger); color: #fff; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Impresión ---------- */
#print-area { display: none; }
@media print {
  @page { size: letter; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 11px; }
  #app, #toast { display: none !important; }
  #print-area { display: block; }
  .pr { color: #000; }
  .pr header { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 10px; }
  .pr h1 { font-size: 20px; } .pr h2 { font-size: 13px; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #999; }
  .pr .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
  .pr .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 12px; }
  .pr table { font-size: 11px; } .pr th, .pr td { padding: 3px 5px; border-bottom: 1px solid #ccc; }
  .pr .right { text-align: right; }
  .pr .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
  .pr .firmas div { border-top: 1px solid #000; padding-top: 4px; text-align: center; min-height: 20px; }
  .pr .firmas img { height: 60px; display: block; margin: 0 auto; }
  .pr .legal { font-size: 9px; color: #333; margin-top: 10px; white-space: pre-wrap; }
  .pr .fotos { display: flex; gap: 6px; flex-wrap: wrap; } .pr .fotos img { height: 90px; }
  .pr .plate { border: 2px solid #000; background: #fff; }
}

/* Buscadores redondos como en la web */
input[type="search"] { border-radius: 999px; padding-left: 18px; }
.tabbar { background: var(--footer) !important; }
.savebar { background: rgba(9, 9, 11, .92) !important; }
.modal-bg { background: rgba(0, 0, 0, .7); }

/* Productos e insumos */
.tag { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .72rem; padding: 2px 8px; border-radius: 99px; margin-left: 6px; white-space: nowrap; }
.tag.venta { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.tag.gasto { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.picker { display: grid; gap: 6px; }
.picker .results:empty { display: none; }
.line.insumo { grid-template-columns: 1fr 80px 150px 120px 40px; }
.line.trabajo { grid-template-columns: 1fr 130px 120px 40px; }
.line.repuesto { grid-template-columns: 110px 1fr 70px 120px 110px 40px; }
.line > * { min-width: 0; }
/* En pantallas medianas y celulares la descripción va en su propia fila */
@media (max-width: 1180px) {
  .line.repuesto { grid-template-columns: 110px 70px 1fr 1fr 40px; } .line.repuesto .f-desc { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 980px) {
  .line.trabajo { grid-template-columns: 1fr 1fr 40px; } .line.trabajo .f-desc { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .line.repuesto { grid-template-columns: 1fr 1fr 40px; }
  .line.insumo { grid-template-columns: 1fr 1fr 40px; } .line.insumo .f-desc { grid-column: 1 / -1; }
}
.line input[readonly] { opacity: .75; cursor: not-allowed; }
.dcto { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 600; padding: 1px 8px; border-radius: 99px; }
.dcto.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.dcto.pend { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.aviso-dcto { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: .9rem; }
.aviso-dcto div { display: grid; gap: 2px; }
.totals .pend-txt { color: var(--warn); font-size: .88rem; }
.sync-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.check.destacado { border-color: var(--primary); align-items: flex-start; }
@media (max-width: 700px) { .line.insumo { grid-template-columns: 1fr 1fr 40px; } .line.insumo .f-desc { grid-column: 1 / -1; } }
.totals .interno { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 4px; color: var(--warn); font-size: .9rem; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs a { padding: 10px 16px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; display: flex; gap: 8px; align-items: center; }
.tabs a b { font-size: .78rem; background: var(--surface-2); color: var(--ink); border-radius: 99px; padding: 1px 8px; }
.tabs a.on { color: var(--primary); border-bottom-color: var(--primary); }
.filters.cat { grid-template-columns: 1fr minmax(160px, 260px); }
@media (max-width: 620px) { .filters.cat { grid-template-columns: 1fr; } }
.row-in { display: flex; gap: 8px; }
.row-in input { flex: 1; min-width: 0; }
.modal.ancho { max-width: 780px; }
.im-hoja { padding: 12px; display: grid; gap: 10px; box-shadow: none; }
.im-hoja-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.im-hoja-top b { margin-right: auto; }
.im-hoja-top select { width: auto; min-height: 36px; padding: 4px 8px; }
.im-det { font-size: .88rem; }
.modal hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.err-txt { color: var(--danger); font-weight: 600; margin: 0; }
.ok-txt { color: var(--ok); font-weight: 600; margin: 0; }
.sin-stock { color: var(--danger); font-weight: 600; }
.con-stock { color: var(--ok); font-weight: 600; }
.aviso-stock { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--primary-soft); font-size: .88rem; }
details.pasos { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: var(--bg); }
details.pasos summary { cursor: pointer; font-weight: 600; }
details.pasos ol { margin: 10px 0; padding-left: 20px; display: grid; gap: 8px; }
.lista-hojas { margin: 4px 0; padding-left: 20px; }
.right { text-align: right; }
table.mini { font-size: .85rem; } table.mini td, table.mini th { padding: 6px 8px; }


.serv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.serv-row select { flex: 1 1 260px; width: auto; }
.serv-row #cat-rango { flex: 0 1 200px; }

/* ---------- Adaptación a cualquier pantalla ---------- */
/* Ningún bloque puede empujar la página más allá del ancho de la pantalla */
.main, .section, .stack, .field, .card, .grid > *, .lines, .line > * { min-width: 0; }
.section, .stack { grid-template-columns: minmax(0, 1fr); }
select { max-width: 100%; text-overflow: ellipsis; }
input, textarea { max-width: 100%; }
img, canvas { max-width: 100%; }
.sel-summary .who, .ot-main div, .result div { overflow-wrap: anywhere; }
/* Tablas: si no caben, se deslizan hacia los lados (con una sombra azul en el borde que indica que hay más) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(24, 24, 27, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(24, 24, 27, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(84, 162, 255, .45), rgba(84, 162, 255, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(84, 162, 255, .45), rgba(84, 162, 255, 0)) right center / 12px 100% no-repeat scroll,
    var(--surface); }
.table-wrap > table { min-width: 620px; }
.table-wrap > table.mini { min-width: 560px; }
.table-wrap td, .table-wrap th { white-space: nowrap; }
.table-wrap td:nth-child(2), .table-wrap td:first-child b { white-space: normal; min-width: 180px; }
/* Pestañas también se deslizan si no caben */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs a { flex: none; }
@media (max-width: 820px) {
  .head { align-items: stretch; }
  .head > .btn, .head-actions { width: 100%; }
  .head-actions .btn { flex: 1 1 auto; }
  .modal { padding: 16px; max-height: 92vh; }
  .order-head .status-ctl { margin-left: 0; width: 100%; }
  .order-head select { min-width: 0; flex: 1; }
  .sync-bar .btn { width: 100%; }
  .history li { grid-template-columns: 1fr; gap: 2px; }
}

.field { grid-template-columns: minmax(0, 1fr); }
.serv-row > * { min-width: 0; }
.table-wrap td.mono { white-space: normal; min-width: 110px; max-width: 200px; overflow-wrap: anywhere; font-size: .82rem; }
@media (max-width: 820px) { .col-cod { display: none; } .table-wrap > table { min-width: 480px; } }
@media (max-width: 820px) { .table-wrap td:nth-child(2), .table-wrap th:nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--surface); max-width: 52vw; min-width: 150px; box-shadow: 6px 0 8px -6px rgba(0,0,0,.8); } }
.sin-cod .col-cod { display: none; }
@media (max-width: 820px) { .table-wrap > table.sin-cod td:first-child, .table-wrap > table.sin-cod th:first-child { position: static; } }

/* ---------- Etapas de la orden e informes ---------- */
.etapas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.etapa { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); min-width: 0; }
.etapa b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-weight: 900; }
.etapa strong { display: block; font-size: .95rem; }
.etapa small { color: var(--muted); font-size: .78rem; display: block; }
.etapa.actual { border-color: var(--primary); background: var(--primary-soft); }
.etapa.actual b { background: var(--primary); color: #fff; }
.etapa.ok b { background: var(--ok); color: #0A0A0B; }
.etapa.ok b::after { content: ""; }
.inf-etapa { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.inf-etapa > div:first-child { display: grid; gap: 3px; flex: 1 1 260px; min-width: 0; }
.inf-etapa.bloqueada { opacity: .6; }
.inf-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.inf-log { margin: 4px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--ok); }
p.inf-log { color: var(--muted); }
.aviso-inf .inf-botones .btn { flex: 1 1 140px; min-height: 48px; }
@media (max-width: 560px) {
  .etapas { grid-template-columns: 1fr; }
  .inf-botones { width: 100%; } .inf-botones .btn { flex: 1 1 auto; }
}
input[type="checkbox"], input[type="radio"] { flex: none; }
.photo-item { display: grid; gap: 4px; min-width: 0; }
.photo-nota { min-height: 32px; padding: 4px 8px; font-size: .78rem; border-radius: 8px; }
/* Orden rápida */
.head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tag.rapida { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.line.rapida { grid-template-columns: 1fr 130px 40px; }
.serv-row #q-rango { flex: 0 1 200px; }
.serv-row #q-desc { flex: 1 1 220px; width: auto; }
@media (max-width: 560px) { .head-btns { width: 100%; } .head-btns .btn { flex: 1 1 auto; } .line.rapida { grid-template-columns: 1fr 110px 40px; } }
.otras-motos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.otras-motos > span { flex: 1 1 100%; font-size: .85rem; }
.photo-meta { font-size: .72rem; color: var(--muted); }
ol.pasos-wa { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.serv-row { align-items: flex-start; }
/* Órdenes en 3 etapas: apartados del tablero y submenú dentro de la orden */
.apartados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.apartado, .etapa-ot { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.apartado b.num { font-size: 1.7rem; min-width: 1.6em; text-align: center; }
.apartado strong, .etapa-ot strong { display: block; }
.apartado small, .etapa-ot small { display: block; color: var(--muted); font-size: .8rem; }
.apartado.on, .etapa-ot.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.status-strip .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.etapas-ot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.etapa-ot b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line); }
.etapa-ot.actual b { background: var(--primary); border-color: var(--primary); color: #fff; }
.etapa-ot.hecho b { background: var(--ok); border-color: var(--ok); color: #fff; }
.etapa-ot:disabled { opacity: .45; cursor: not-allowed; }
#stack-orden[data-vista="i"] [data-v]:not([data-v*="i"]),
#stack-orden[data-vista="t"] [data-v]:not([data-v*="t"]),
#stack-orden[data-vista="e"] [data-v]:not([data-v*="e"]) { display: none !important; }
.acciones-etapa { border-color: var(--primary); }
.accion-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sub-estados { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-estado { flex: 1 1 180px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.sub-estado.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 0 1px var(--c); }
.recordatorio { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.recordatorio.late { color: var(--danger); background: var(--danger-soft); }
.btn.entregar { background: var(--ok); border-color: var(--ok); color: #fff; font-size: 1.05rem; padding: 12px 24px; }
.lista-trabajo { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.lista-trabajo.precios { list-style: none; padding: 0; gap: 0; }
.lista-trabajo.precios li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.obs-moto { display: grid; gap: 10px; } .obs-moto p { margin: 2px 0 0; }
.ficha { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .ficha b { display: block; }
.photos.mini .photo { width: 88px; height: 88px; }
.aviso-final { border-color: var(--ok); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.solo-lectura { opacity: .85; }
@media (max-width: 620px) {
  .apartado, .etapa-ot { flex-direction: column; text-align: center; padding: 10px 6px; gap: 4px; }
  .apartado small, .etapa-ot small { display: none; }
  .apartado b.num { font-size: 1.3rem; }
}
.nav a.sub { padding-left: 48px; font-size: .8rem; min-height: 32px; opacity: .85; }
.nav a.sub.on { opacity: 1; }
/* En la entrega: cliente, trabajo realizado, fotos, ficha de ingreso y total */
#stack-orden[data-vista="e"] > .orden-e1 { order: 1; }
#stack-orden[data-vista="e"] > .orden-e2 { order: 2; }
.acciones-etapa[hidden] { display: none !important; }
/* ===== Celular y tablet: nada más ancho que la pantalla ===== */
html, body { max-width: 100%; overflow-x: clip; }
.card, .section, .field, .grid > *, .stack > * { min-width: 0; }
.section p, .section li, .section small, .section summary, .modal p, .modal li { overflow-wrap: anywhere; }
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: .72rem; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.on { color: #fff; font-weight: 700; box-shadow: inset 0 2px 0 var(--primary); }
.tabbar a span, .tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-mas { display: grid; gap: 6px; }
.menu-mas > span { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.menu-mas a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; background: var(--surface-2); }
.menu-mas a.on { border-color: var(--primary); background: var(--primary-soft); }
.menu-mas a svg { width: 20px; height: 20px; flex: none; }
.modal-bg.hoja { align-items: end; padding: 0; }
.modal-bg.hoja .modal { max-width: 560px; border-radius: 16px 16px 0 0; max-height: 85vh; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 820px) {
  /* Botones con texto largo: el texto baja a otra línea en vez de salirse */
  .btn { white-space: normal; height: auto; min-height: 44px; padding: 8px 14px; text-align: center; line-height: 1.25; max-width: 100%; }
  .head-btns .btn, .accion-fila .btn { flex: 1 1 auto; }
  /* Letra de 16 px en los campos: el teléfono no hace zoom al escribir */
  input, select, textarea { font-size: 16px; }
  .order-head .status-ctl { flex-wrap: wrap; } .order-head .status-ctl select { min-width: 0; flex: 1 1 160px; }
}
.ot-top { flex-wrap: wrap; } .ot-main > div { min-width: 0; } .card.ot { min-width: 0; }
@media (max-width: 360px) { .section { padding-left: 14px; padding-right: 14px; } }
@media (max-width: 820px) { .status-strip { flex-wrap: wrap; overflow-x: visible; } }
/* Fotos: en el celular, "Tomar foto" (cámara) y "Galería"; en el computador, solo "Subir foto" */
.add-photo .txt-subir { display: none; }
@media (hover: hover) and (pointer: fine) { .add-photo.camara { display: none; } .add-photo .txt-galeria { display: none; } .add-photo .txt-subir { display: inline; } }