/* KIDUL's phone board. Tamiz brand rule for client pages (05-marca/plantilla-informe-cliente): dark background
   ALWAYS, whatever the phone's setting; amber #F19434 is the only signal; Fraunces for titles, monospace for figures;
   no shadows, no gradients. States (sold out, unknown) are marked with a dotted line, not with color. */
@font-face{font-family:"Fraunces";src:url(/static/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  color-scheme:dark;
  --senal:#F19434;
  --superficie:#14181C; --superficie-2:#1F1A15; --superficie-3:#0B0D0F;
  --texto:#E8E6E1; --texto-2:#B4BCC6; --texto-3:#8A929C;
  --borde:rgba(232,230,225,.13); --borde-3:rgba(232,230,225,.30);
  --tarjeta:rgba(232,230,225,.045);
  --fuente-titulo:"Fraunces",Georgia,serif;
  --fuente-texto:"Segoe UI",system-ui,-apple-system,sans-serif;
  --fuente-dato:ui-monospace,"SFMono-Regular","Consolas","Menlo",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--superficie);color:var(--texto);font:16px/1.45 var(--fuente-texto);
  padding:0 16px calc(24px + env(safe-area-inset-bottom))}
main,header.top,nav.tabs,footer{max-width:640px;margin:0 auto}
header.top{display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px}
.marca{font-family:var(--fuente-titulo);font-weight:900;font-size:22px;letter-spacing:.02em}
.salir,form.login button{font:inherit;color:var(--texto-2);background:transparent;border:1px solid var(--borde-3);
  border-radius:99px;padding:6px 14px;min-height:44px}
nav.tabs{display:flex;gap:4px;border-bottom:1px solid var(--borde);position:sticky;top:0;background:var(--superficie);
  z-index:1;overflow-x:auto}
nav.tabs a{flex:1 0 auto;text-align:center;color:var(--texto-2);text-decoration:none;padding:12px 8px;min-height:44px;
  border-bottom:2px solid transparent;font-size:15px;white-space:nowrap}
nav.tabs a[aria-current=page]{color:var(--texto);border-bottom-color:var(--senal)}
h1,h2{font-family:var(--fuente-titulo);font-weight:900;letter-spacing:-.01em;margin:0}
h1{font-size:28px;line-height:1.15;margin:18px 0 10px}
h2{font-size:20px;margin:0 0 8px}
section{margin:18px 0;padding:16px 0 0;border-top:1px solid var(--borde)}
p{margin:6px 0}
.n{font-family:var(--fuente-dato);font-variant-numeric:tabular-nums}
.sd{font-family:var(--fuente-dato);font-size:.9em;color:var(--texto-3);border-bottom:1px dotted var(--texto-3)}
.dato{display:block;font-family:var(--fuente-dato);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3)}
.nota{font-size:13px;color:var(--texto-3)}
.aviso{border-left:2px solid var(--senal);padding:6px 0 6px 12px;color:var(--texto)}
.pastilla{font-family:var(--fuente-dato);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;
  border:1px solid var(--borde-3);border-radius:99px;color:var(--texto-2);white-space:nowrap}
ul{list-style:none;margin:0;padding:0}
ul.frescura{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--texto-3)}
ul.frescura b{font-weight:600;color:var(--texto-2)}
ul.frescura li.viejo{border-bottom:1px dotted var(--texto-3)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:var(--tarjeta);border:1px solid var(--borde);border-radius:6px;padding:10px 12px;min-width:0}
.kpi .n,.kpi .sd{display:block;font-size:22px;margin-top:4px;overflow-wrap:anywhere}
.kpi .sd{font-size:16px;border-bottom:0}
ul.ventas li.venta{background:var(--superficie-2);border:1px solid var(--borde);border-radius:6px;padding:10px 12px;
  margin-bottom:8px}
ul.ventas li.venta ul li{padding:2px 0}
.trajo{font-size:14px;color:var(--texto-2)}
ul.lista li,ul.piezas li.pieza,ul.productos li.producto{display:flex;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--borde)}
ul.piezas li.pieza p{margin:2px 0;font-size:14px;color:var(--texto-2)}
.cifras{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:nowrap;font-size:14px}
.sinpieza{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font-size:14px;color:var(--texto-2)}
ul.productos li.producto{display:block}
ul.productos li.producto.agotado{border:1px dotted var(--texto-2);border-radius:6px;padding:10px}
.nombre{font-weight:600}
.dias .grande{font-size:24px}
.motivo{display:block;font-size:13px;color:var(--texto-3)}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
th,td{padding:8px 4px;border-bottom:1px solid var(--borde);text-align:right;vertical-align:top}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--fuente-dato);font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;
  color:var(--texto-3)}
tfoot th,tfoot td{border-bottom:0;font-weight:600}
td .sd{border-bottom:0}
form.login{display:flex;flex-direction:column;gap:14px;margin-top:12px}
form.login label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--texto-2)}
form.login input{font:inherit;font-size:16px;color:var(--texto);background:var(--superficie-3);
  border:1px solid var(--borde-3);border-radius:6px;padding:10px 12px;min-height:44px}
form.login input:focus,a:focus-visible,button:focus-visible{outline:2px solid var(--senal);outline-offset:2px}
form.login button{color:#121518;background:var(--senal);border-color:var(--senal);font-weight:700}
footer{padding:28px 0 8px;opacity:.8}
footer img{display:block;height:auto}