/* Brinco · Pedidos (El General). Operate surface, used all day on desk monitors and on phones in the warehouse.
   Brand: navy #072835 + red #C4301C, logo top-left, condensed type only for client names.
   Readability first: 17px base, 18px data, nothing under 13px, AA contrast in both themes. */
:root{
  --navy:#072835; --red:#C4301C; --red-hover:#A62815; --on-red:#FFFFFF;
  --bg:#EEF2F4; --surface:#FFFFFF; --surface-2:#F4F7F8; --ink:#072835; --ink-2:#2C4954; --line:#D6DFE3; --line-strong:#AFC0C7;
  --focus:rgba(196,48,28,.28); --select:rgba(196,48,28,.16);
  --ok:#0B7A4E; --ok-bg:#E3F4EC; --warn:#8A5A00; --warn-bg:#FDF1D6; --bad:#B42A17; --bad-bg:#FCE6E2; --info:#195C83; --info-bg:#E2EEF6; --new:#3E5862; --new-bg:#E8EEF0;
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --t-meta:.9375rem; --t-body:1.0625rem; --t-data:1.125rem; --t-title:1.375rem; --t-client:2.5rem;
  --r-sm:8px; --ease:cubic-bezier(.23,1,.32,1);
  --shadow:0 1px 2px rgba(10,20,25,.06),0 8px 24px -16px rgba(10,20,25,.3);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#04161E; --surface:#0A2532; --surface-2:#0F2F3E; --ink:#EAF2F5; --ink-2:#B9CBD2; --line:#1B4253; --line-strong:#2E5F73;
  --red:#C4301C; --red-hover:#A82713; --focus:rgba(228,71,47,.4); --select:rgba(228,71,47,.22);
  --ok:#4CD39A; --ok-bg:#0E3527; --warn:#F2BE55; --warn-bg:#382B0E; --bad:#FF8A75; --bad-bg:#3E1C16; --info:#7CC2EC; --info-bg:#0F3045; --new:#B9CBD2; --new-bg:#163A49;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#04161E; --surface:#0A2532; --surface-2:#0F2F3E; --ink:#EAF2F5; --ink-2:#B9CBD2; --line:#1B4253; --line-strong:#2E5F73;
  --red:#C4301C; --red-hover:#A82713; --focus:rgba(228,71,47,.4); --select:rgba(228,71,47,.22);
  --ok:#4CD39A; --ok-bg:#0E3527; --warn:#F2BE55; --warn-bg:#382B0E; --bad:#FF8A75; --bad-bg:#3E1C16; --info:#7CC2EC; --info-bg:#0F3045; --new:#B9CBD2; --new-bg:#163A49;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.8); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.5 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;min-height:100dvh}
::selection{background:var(--select)}
img{max-width:100%}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ph,.ph-bold{font-size:1.25em;line-height:1;vertical-align:-.18em}

/* top bar */
.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px)}
.topbar-in{max-width:1500px;margin:0 auto;height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;min-width:0}
.marca img{height:30px;width:auto}
.marca-app{font:700 1.25rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding-left:14px;border-left:1px solid rgba(255,255,255,.28)}
.topbar-der{display:flex;align-items:center;gap:6px}
.icono{all:unset;cursor:pointer;width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;color:#fff;font-size:1.05rem;transition:background-color .15s ease,transform .16s var(--ease)}
.icono:active{transform:scale(.94)}
.icono:focus-visible{outline:3px solid rgba(255,255,255,.6)}
@media (hover:hover){.icono:hover{background:rgba(255,255,255,.1)}}
.yo{font-size:var(--t-meta);font-weight:600;color:rgba(255,255,255,.88);padding:0 6px}
.guardado{font-size:var(--t-meta);color:rgba(255,255,255,.78);margin-right:6px}
.guardado.err{color:#FFC2B6}
@media (max-width:720px){.marca-app,.yo,.guardado{display:none}.topbar-in{padding:0 12px}.marca img{height:26px}}

/* buttons & fields */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-sm);font:600 var(--t-body)/1 var(--font);white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,transform .16s var(--ease);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn-rojo{background:var(--red);color:var(--on-red)}
@media (hover:hover){.btn-rojo:hover{background:var(--red-hover)}}
.btn-borde{border:1.5px solid var(--line-strong);color:var(--ink);background:var(--surface)}
@media (hover:hover){.btn-borde:hover{border-color:var(--ink-2);background:var(--surface-2)}}
.btn-ancho{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.texto{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border-radius:var(--r-sm);font-weight:600;font-size:var(--t-meta);color:var(--ink-2);transition:background-color .15s ease,color .15s ease,transform .16s var(--ease)}
.texto:active{transform:scale(.97)}
.texto:focus-visible{outline:3px solid var(--focus)}
@media (hover:hover){.texto:hover{background:var(--surface-2);color:var(--ink)}.texto.peligro:hover{background:var(--bad-bg);color:var(--bad)}}

.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>span{font-size:var(--t-meta);font-weight:600;color:var(--ink-2)}
.in{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:var(--t-data);transition:border-color .15s ease,box-shadow .15s ease}
.in::placeholder{color:var(--ink-2);opacity:.55}
.in:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px var(--focus)}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}

/* app layout */
.app{max-width:1500px;margin:0 auto;padding:20px 20px 40px;display:grid;grid-template-columns:380px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1060px){.app{grid-template-columns:1fr;padding:0 0 110px;gap:0}}

/* queue */
.cola{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);position:sticky;top:84px;max-height:calc(100dvh - 104px);display:flex;flex-direction:column;min-width:0;overflow:hidden}
@media (max-width:1060px){.cola{position:static;max-height:none;border-radius:0;box-shadow:none;background:transparent;overflow:visible}.app.viendo .cola{display:none}}
.cola-cab{padding:16px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line)}
@media (max-width:1060px){.cola-cab{background:var(--surface);position:sticky;top:64px;z-index:5;padding:14px 16px}}
.buscar{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2)}
.buscar input{all:unset;flex:1;min-width:0;color:var(--ink);font-size:var(--t-data)}
.buscar input::placeholder{color:var(--ink-2);opacity:.6}
.buscar:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--focus)}
.filtros{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:1060px){.filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}}
.filtros::-webkit-scrollbar{display:none}
.filtro{all:unset;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;font-weight:600;font-size:var(--t-meta);color:var(--ink-2);background:var(--surface-2);transition:background-color .15s ease,color .15s ease}
.filtro b{font-weight:700;min-width:1.2em;text-align:center}
.filtro[aria-selected="true"]{background:var(--navy);color:#fff}
:root[data-theme="dark"] .filtro[aria-selected="true"]{background:var(--ink);color:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .filtro[aria-selected="true"]{background:var(--ink);color:var(--bg)}}
.filtro:focus-visible{outline:3px solid var(--focus)}
.cola-lista{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
@media (max-width:1060px){.cola-lista{padding:12px;gap:8px}}
.fila{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:14px;border-radius:12px;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--ease)}
.fila:active{transform:scale(.99)}
@media (hover:hover){.fila:hover{background:var(--surface-2)}}
.fila[aria-current="true"]{background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.fila:focus-visible{outline:3px solid var(--focus)}
@media (max-width:1060px){.fila{background:var(--surface);box-shadow:var(--shadow)}}
.fila-cli{font-weight:700;font-size:var(--t-data);line-height:1.25;overflow-wrap:anywhere}
.fila-sub{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-meta);color:var(--ink-2)}
.cola-vacia{padding:32px 16px;text-align:center;color:var(--ink-2)}

/* status chips: tinted text, no dots */
.estado{font-weight:700;font-size:.875rem;line-height:1;padding:7px 10px;border-radius:999px;white-space:nowrap;align-self:start}
.e-new{background:var(--new-bg);color:var(--new)} .e-pend{background:var(--warn-bg);color:var(--warn)} .e-resp{background:var(--info-bg);color:var(--info)} .e-cot{background:var(--ok-bg);color:var(--ok)}

/* detail */
.detalle{min-width:0;display:flex;flex-direction:column;gap:16px}
@media (max-width:1060px){.app:not(.viendo) #detalle{display:none}.detalle{gap:0}}
.hoja{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);min-width:0}
@media (max-width:1060px){.hoja{border-radius:0;box-shadow:none}}
.cab{padding:22px 24px 18px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-start;justify-content:space-between}
@media (max-width:720px){.cab{padding:14px 16px}}
.cab-tit{min-width:0;flex:1 1 320px}
.volver{display:none}
@media (max-width:1060px){.volver{display:inline-flex;margin:0 0 6px -10px}}
.cab h1{font:700 var(--t-client)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
@media (max-width:720px){.cab h1{font-size:2rem}}
.cab-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;font-size:var(--t-meta);color:var(--ink-2)}
.cab-meta strong{color:var(--ink);font-weight:700}
.cab-acc{display:flex;flex-wrap:wrap;gap:2px;align-items:center}

/* steps: connected track */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 24px}
@media (max-width:720px){.pasos{padding:0 12px;gap:4px}}
.paso{all:unset;box-sizing:border-box;cursor:pointer;padding:12px 14px 14px;border-radius:12px 12px 0 0;display:flex;flex-direction:column;gap:4px;position:relative;transition:background-color .15s ease}
.paso::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:4px;background:var(--line)}
.paso.hecho::after{background:var(--ok)}
.paso[aria-selected="true"]{background:var(--surface-2)}
.paso[aria-selected="true"]::after{background:var(--red)}
@media (hover:hover){.paso:hover{background:var(--surface-2)}}
.paso:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.paso .t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-data)}
.paso .t i{color:var(--ink-2)}
.paso.hecho .t i{color:var(--ok)}
.paso .s{font-size:var(--t-meta);color:var(--ink-2)}
@media (max-width:720px){.paso{padding:10px 8px 12px}.paso .t{font-size:var(--t-body)}.paso .t i{display:none}.paso .s{font-size:.875rem}}

.cuerpo{padding:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:20px;container-type:inline-size}
@media (max-width:720px){.cuerpo{padding:16px;gap:16px}}
.nota{margin:0;font-size:var(--t-body);color:var(--ink-2);max-width:70ch}
.nota strong{color:var(--ink)}
.rejilla{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr);gap:14px}
@container (max-width:640px){.rejilla{grid-template-columns:1fr 1fr}.rejilla .campo:first-child{grid-column:1/-1}}

/* lines: table on desktop, cards on phones */
.lineas{width:100%;border-collapse:collapse}
.lineas th{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);text-align:left;padding:0 6px 8px;white-space:nowrap}
.lineas td{padding:6px;vertical-align:middle;border-top:1px solid var(--line)}
.lineas tbody tr:first-child td{border-top:0}
.lineas .c-code .in{min-width:110px;font-weight:700;text-transform:uppercase}
.lineas .c-mod .in{min-width:170px}
.lineas .c-num .in{width:80px;text-align:center}
.lineas .c-com .in{min-width:150px}
.lineas .acc{white-space:nowrap;text-align:right}
@container (max-width:940px){
  .lineas thead{display:none}
  .lineas,.lineas tbody{display:block}
  .lineas tr{display:grid;grid-template-columns:56px minmax(96px,130px) minmax(0,1fr) 80px 80px;grid-template-areas:"foto code mod talla pares" "foto com com acc acc";gap:8px 10px;padding:12px;margin-bottom:10px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
  .lineas td{display:block;padding:0;border:0}
  .lineas td[data-l]::before{content:attr(data-l);display:block;font-size:var(--t-meta);font-weight:600;color:var(--ink-2);margin-bottom:4px}
  .lineas .c-foto{grid-area:foto}.lineas .c-code{grid-area:code}.lineas .c-mod{grid-area:mod}.lineas .c-t{grid-area:talla}.lineas .c-p{grid-area:pares}.lineas .c-com{grid-area:com}.lineas .acc{grid-area:acc;display:flex;justify-content:flex-end;align-items:flex-end;gap:4px}
  .lineas .c-code .in,.lineas .c-mod .in,.lineas .c-com .in{min-width:0}
  .lineas .c-num .in{width:100%}
}
@container (max-width:560px){
  .lineas tr{grid-template-columns:64px 1fr 1fr;grid-template-areas:"foto code code" "foto mod mod" "talla talla pares" "com com com" "acc acc acc";padding:14px}
  .lineas .acc{justify-content:space-between}
}
.pie{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.suma{font-size:var(--t-body);color:var(--ink-2)}
.suma strong{font-size:var(--t-title);color:var(--ink)}
.botones{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:1060px){.solo-escritorio{display:none!important}}

/* photos */
.foto{width:56px;height:72px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;display:block}
.foto.g{width:96px;height:124px}
.sinfoto{all:unset;box-sizing:border-box;cursor:pointer;width:56px;height:72px;border:1.5px dashed var(--line-strong);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.8125rem;font-weight:600;color:var(--ink-2);text-align:center;position:relative}
.sinfoto.g{width:96px;height:124px;font-size:.875rem}
.sinfoto.off{cursor:default;opacity:.75}
.sinfoto input,.cambiar input{position:absolute;width:1px;height:1px;opacity:0}
@media (hover:hover){.sinfoto:not(.off):hover{border-color:var(--red);color:var(--red)}}
.sinfoto:focus-within{border-color:var(--red);color:var(--red)}
.cambiar{cursor:pointer;display:block;position:relative}
.cambiar:focus-within .foto{outline:3px solid var(--focus)}

/* bodega */
.avance{display:flex;align-items:center;gap:14px;font-size:var(--t-body);color:var(--ink-2)}
.avance strong{color:var(--ink);font-size:var(--t-title)}
.medidor{flex:1;max-width:320px;height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.medidor i{display:block;height:100%;width:100%;border-radius:8px;background:var(--ok);transform-origin:left center;transition:transform .25s var(--ease)}
.respuestas{display:flex;flex-direction:column;gap:12px}
.resp{border:1.5px solid var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:center;background:var(--surface);transition:border-color .15s ease,background-color .15s ease}
.resp.s-HAY{border-color:var(--ok);background:color-mix(in srgb,var(--ok-bg) 55%,var(--surface))}
.resp.s-PARCIAL{border-color:var(--warn);background:color-mix(in srgb,var(--warn-bg) 55%,var(--surface))}
.resp.s-NOHAY{border-color:var(--bad);background:color-mix(in srgb,var(--bad-bg) 55%,var(--surface))}
@container (max-width:720px){.resp{grid-template-columns:1fr}}
.prod{display:flex;gap:14px;align-items:center;min-width:0}
.prod-cod{font-weight:700;font-size:var(--t-title)}
.prod-cod span{font-weight:500;color:var(--ink-2)}
.prod-mod{font-size:var(--t-body);color:var(--ink-2)}
.prod-pide{font-size:var(--t-body);margin-top:4px}
.prod-pide strong{font-size:var(--t-title)}
.coment{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--t-meta);font-weight:600;background:var(--warn-bg);color:var(--warn);padding:4px 10px;border-radius:999px}
.resp-der{display:grid;grid-template-columns:1fr 104px;gap:10px;align-items:end}
.resp-der .ancho{grid-column:1/-1}
.tres{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;min-height:50px}
.tres button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--t-body);border-right:1.5px solid var(--line-strong);transition:background-color .15s ease,color .15s ease}
.tres button:last-child{border-right:0}
@media (hover:hover){.tres button:hover{background:var(--surface-2)}}
.tres button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.tres button[aria-pressed="true"][data-v="HAY"]{background:var(--ok);color:#fff}
.tres button[aria-pressed="true"][data-v="PARCIAL"]{background:var(--warn);color:#fff}
.tres button[aria-pressed="true"][data-v="NO HAY"]{background:var(--bad);color:#fff}
:root[data-theme="dark"] .tres button[aria-pressed="true"]{color:#04161E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tres button[aria-pressed="true"]{color:#04161E}}

/* quote */
.cot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 28px;align-items:start}
@container (max-width:760px){.cot{grid-template-columns:1fr}}
.precios{display:flex;flex-direction:column;gap:10px}
.precio{display:grid;grid-template-columns:minmax(0,1fr) 116px 116px;gap:8px;align-items:center}
.precio .cod{font-weight:700;font-size:var(--t-data);overflow-wrap:anywhere}
.precio .in{text-align:right}
.precio.cab-p span{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);text-align:right}
@media (max-width:480px){.precio{grid-template-columns:minmax(0,1fr) 1fr 1fr}}
.lado{display:flex;flex-direction:column;gap:14px}
.opciones{display:flex;flex-direction:column;gap:4px}
.opciones label{display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer;font-size:var(--t-body)}
.opciones input{width:22px;height:22px;accent-color:var(--red)}
.totales{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.tot{padding:14px 16px;border-radius:12px;background:var(--surface-2)}
.tot span{display:block;font-size:var(--t-meta);font-weight:600;color:var(--ink-2)}
.tot strong{display:block;font-size:1.625rem;line-height:1.2;margin-top:2px}
.tot.falta strong{font-size:var(--t-body);color:var(--bad)}
.aclara{margin:0;font-size:var(--t-meta);color:var(--ink-2)}

/* paper preview, same look as the PDF */
.papel{background:#fff;color:#072835;border-radius:10px;border:1px solid var(--line);padding:28px;font-size:.9375rem;min-width:0;overflow-x:auto}
.papel-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:14px;border-bottom:2px solid #C4301C}
.papel-cab img{height:36px;width:auto}
.papel-folio{text-align:right;color:#3E5862;font-size:.9375rem}
.papel-folio strong{display:block;font:700 1.5rem/1 var(--display);letter-spacing:.04em;color:#072835;margin-bottom:4px}
.papel-meta{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;padding:14px 0;color:#3E5862;font-size:.875rem}
.papel-meta strong{display:block;color:#072835;font-size:1.0625rem}
.papel table{width:100%;min-width:620px;border-collapse:collapse}
.papel th{font-size:.8125rem;font-weight:700;color:#fff;background:#072835;text-align:left;padding:8px}
.papel td{padding:8px;border-bottom:1px solid #E1E8EB}
.papel .num{text-align:right}
.papel .foto{width:40px;height:52px;border-color:#E1E8EB}
.papel .sf{font-size:.8125rem;color:#5B727A}
.papel tfoot td{border:0;font-weight:700;font-size:1.0625rem;padding-top:12px}
.papel h4{margin:18px 0 6px;font:700 1.125rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#C4301C}
.papel ul{margin:0;padding-left:20px}
.falta{color:#B42A17;font-weight:600}

/* phone action bar: the step's main action stays under the thumb */
.accion-movil{display:none}
@media (max-width:1060px){
  .accion-movil{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(0,0,0,.35)}
  .accion-movil .btn{flex:1}
}

/* report */
.app>.detalle[id="vista-informe"],.app>.detalle[id="vista-usuarios"],.app>.detalle[id="vista-config"]{grid-column:1/-1}
.cfg-grupo{display:flex;flex-direction:column;gap:12px}
.cfg-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cfg-ancho{grid-column:1/-1}
@container (max-width:640px){.cfg-campos{grid-template-columns:1fr}}
textarea.in{min-height:96px;resize:vertical;line-height:1.45}
.usuarios td .in{min-height:42px;font-size:var(--t-body);width:100%}
.usuarios td:nth-child(1){min-width:170px}.usuarios td:nth-child(2){min-width:250px}.usuarios td:nth-child(3){min-width:220px}.usuarios td:nth-child(4){min-width:205px}
.papel-emp{display:flex;flex-direction:column;gap:8px}
.papel-datos{display:flex;flex-direction:column;font-size:.8125rem;color:#3E5862;line-height:1.4}
.papel-datos strong{color:#072835;font-size:.9375rem}
.papel-cond{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:0}
.papel-cond dt{font-weight:700}
.papel-cond dd{margin:0;white-space:pre-line}
.inf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
@container (max-width:720px){.inf-grid{grid-template-columns:1fr}}
.inf-h{font:700 1.375rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.inf-t{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.inf-t th{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);text-align:left;padding:8px 6px;border-bottom:1.5px solid var(--line-strong)}
.inf-t td{padding:10px 6px;border-bottom:1px solid var(--line)}
.inf-t .num{text-align:right}
.inf-ped{min-width:760px}
.inf-tot{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.inf-fechas{grid-template-columns:1fr 1fr auto}

/* empty, auth, users */
.vacio{padding:56px 24px;text-align:center;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;gap:10px}
.vacio i{font-size:2.5rem;color:var(--line-strong)}
.vacio h2{font:700 1.75rem/1.1 var(--display);text-transform:uppercase;color:var(--ink)}
.auth{min-height:calc(100dvh - 64px);display:grid;place-items:center;padding:24px 16px}
.caja{width:100%;max-width:440px;padding:32px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.caja h1{font:700 2.25rem/1 var(--display);text-transform:uppercase}
.caja p{margin:0;color:var(--ink-2)}
.err{color:var(--bad);font-weight:600;min-height:1.5em;margin:0}
.usuarios table{width:100%;border-collapse:collapse;min-width:1100px}
.usuarios th{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);text-align:left;padding:10px 8px;border-bottom:1.5px solid var(--line-strong)}
.usuarios td{padding:12px 8px;border-bottom:1px solid var(--line)}
.desliza{overflow-x:auto;min-width:0}
.nuevo-u{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end}
.clave-temp{font:700 1.25rem/1 var(--font);letter-spacing:.04em;background:var(--warn-bg);color:var(--ink);padding:14px 16px;border-radius:var(--r-sm);user-select:all;display:inline-block}
.confirmar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--bad-bg);color:var(--bad);padding:8px 12px;border-radius:var(--r-sm);font-weight:600}

/* toast: rises from below, leaves fast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:#fff;padding:14px 20px;border-radius:12px;font-weight:600;font-size:var(--t-body);z-index:50;box-shadow:0 16px 40px -16px rgba(0,0,0,.55);max-width:calc(100vw - 32px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
@starting-style{.toast{opacity:0;transform:translate(-50%,12px)}}
@media (max-width:1060px){.toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important}}