/* Estilos tomados del prototipo aprobado (referencia/pedidos-ferreteria.html).
   Las fuentes se sirven desde public/vendor/fonts, sin CDN. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../vendor/fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-500.woff2) format("woff2")}

/* base */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: mostrador de ferretería. Barra fija arriba con franja de seguridad, pestañas por perfil,
   y una sola columna de paradas numeradas en el orden en que se entregan. */
:root{
  --bg:#e9edf0; --surface:#ffffff; --surface-2:#f2f5f7; --ink:#17212b; --ink-2:#52616e; --line:#cfd8de;
  --bar:#17212b; --bar-ink:#f3f6f8; --bar-ink-2:#aebbc6;
  --accent:#f5b800; --accent-ink:#1c1600; --steel:#1b5e8c; --focus:#1b5e8c;
  --red:#b83227; --red-bg:#fbe7e3; --green:#1c7a4c; --green-bg:#e0f3e8;
  --amber:#8a5a00; --amber-bg:#fff0c9; --blue:#1b5e8c; --blue-bg:#e0edf6;
  --paper:#fffdf6; --paper-line:#d9d2bd; --scrim:rgba(12,18,24,.6);
  --font-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --font-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#10161b; --surface:#19222a; --surface-2:#212c35; --ink:#e7ecf0; --ink-2:#9db0be; --line:#33434f;
  --bar:#0a0f13; --bar-ink:#f3f6f8; --bar-ink-2:#93a4b1;
  --accent:#f5b800; --accent-ink:#1c1600; --steel:#7fbde6; --focus:#f5b800;
  --red:#ff8f80; --red-bg:#40201c; --green:#72d6a3; --green-bg:#15362a;
  --amber:#f3c456; --amber-bg:#3b2e0d; --blue:#7fbde6; --blue-bg:#18303f;
  --paper:#202a32; --paper-line:#3a4954; --scrim:rgba(0,0,0,.7); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#10161b; --surface:#19222a; --surface-2:#212c35; --ink:#e7ecf0; --ink-2:#9db0be; --line:#33434f;
  --bar:#0a0f13; --bar-ink:#f3f6f8; --bar-ink-2:#93a4b1;
  --accent:#f5b800; --accent-ink:#1c1600; --steel:#7fbde6; --focus:#f5b800;
  --red:#ff8f80; --red-bg:#40201c; --green:#72d6a3; --green-bg:#15362a;
  --amber:#f3c456; --amber-bg:#3b2e0d; --blue:#7fbde6; --blue-bg:#18303f;
  --paper:#202a32; --paper-line:#3a4954; --scrim:rgba(0,0,0,.7); color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--font-body)}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:1.9rem} h2{font-size:1.5rem} h3{font-size:1.2rem}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:16px}
.sp{flex:1 1 auto}
.muted{color:var(--ink-2)}
.num{font-family:var(--font-mono);font-weight:500;color:var(--red);font-size:.9rem;white-space:nowrap}
.money{font-variant-numeric:tabular-nums;white-space:nowrap}

/* barra superior */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bar);color:var(--bar-ink)}
.top-in{display:flex;align-items:center;gap:12px;padding-block:10px;flex-wrap:wrap}
.brand{min-width:0;display:flex;flex-direction:column}
.brand b{font-family:var(--font-display);font-size:1.45rem;font-weight:700;line-height:1;letter-spacing:.02em;overflow-wrap:anywhere}
.brand span{font-size:.78rem;color:var(--bar-ink-2);text-transform:uppercase;letter-spacing:.09em}
.who{display:flex;align-items:center;gap:8px;font-size:.9rem}
.who b{font-weight:600}
.who button{background:transparent;border:1px solid var(--bar-ink-2);color:var(--bar-ink);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:.85rem}
.who button:hover{border-color:var(--accent);color:var(--accent)}
.stripe{height:6px;background:repeating-linear-gradient(-45deg,var(--accent) 0 12px,var(--bar) 12px 24px)}

/* pestañas */
.tabs-scroll{overflow-x:auto;border-bottom:1px solid var(--line);background:var(--surface)}
.tabs{display:flex;gap:4px;min-width:max-content}
.tab{background:none;border:0;border-bottom:4px solid transparent;padding:12px 14px 9px;cursor:pointer;font-family:var(--font-display);font-size:1.15rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tab .cnt{font-family:var(--font-body);font-size:.78rem;font-weight:600;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:2px;letter-spacing:0}

main{padding-block:18px 56px;display:flex;flex-direction:column;gap:18px}
.avisos{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.aviso{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--amber-bg);color:var(--ink);font-size:.92rem}
.aviso.err{background:var(--red-bg)}
.aviso p{flex:1 1 240px;min-width:0}

/* botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--red);border-color:var(--red)}
.btn.big{min-height:50px;font-size:1.05rem;padding-inline:18px}
.btn.sq{min-height:36px;width:36px;padding:0;font-size:1.05rem}
.btn:disabled{opacity:.4;cursor:default}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field>span,.mini>span{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
input[type=text],input[type=search],input:not([type]),select,textarea{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);min-width:0}
textarea{min-height:64px;resize:vertical}
input[type=checkbox]{width:24px;height:24px;accent-color:var(--steel);flex:none;margin:0}
.mini{display:flex;flex-direction:column;gap:2px;min-width:0}
.mini select{min-height:36px;padding:5px 8px;font-size:.92rem}

/* resumen */
.bar-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stat{background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat span{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.stat b{font-family:var(--font-display);font-size:1.7rem;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}

/* rutas y paradas */
.ruta{display:flex;flex-direction:column;gap:8px}
.ruta-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ruta-h .muted{font-size:.9rem}
.ruta-h .link{background:none;border:0;padding:4px 0;color:var(--steel);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:.9rem}
.vacio{border:1px dashed var(--line);border-radius:8px;padding:14px;color:var(--ink-2);font-size:.95rem}
.ped{display:grid;grid-template-columns:52px minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ped-n{display:flex;align-items:flex-start;justify-content:center;padding-top:10px;font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1;background:var(--surface-2);color:var(--ink-2);border-right:1px solid var(--line)}
.ped.prio-urgente .ped-n{background:var(--red-bg);color:var(--red)}
.ped-b{padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ped-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cli{font-size:1.08rem;font-weight:600;overflow-wrap:anywhere}
.ped-d,.ped-m{font-size:.93rem;color:var(--ink-2);overflow-wrap:anywhere}
.ped-m b{color:var(--ink)}
.nota{font-size:.92rem;background:var(--surface-2);border-radius:6px;padding:6px 8px;overflow-wrap:anywhere}
.nov{font-size:.92rem;background:var(--red-bg);color:var(--red);border-radius:6px;padding:6px 8px;font-weight:600;overflow-wrap:anywhere}
.ped-a{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;padding-top:4px}
.mv{display:flex;gap:4px}
.pill,.chip,.tag{display:inline-flex;align-items:center;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:2px 9px;white-space:nowrap}
.pill.alistar{background:var(--amber-bg);color:var(--amber)}
.pill.listo,.pill.ruta{background:var(--blue-bg);color:var(--blue)}
.pill.ok{background:var(--green-bg);color:var(--green)}
.pill.mal{background:var(--red-bg);color:var(--red)}
.chip.urgente{background:var(--red);color:var(--surface)}
.chip.baja{border:1px solid var(--line);color:var(--ink-2)}
.tag{border:1px dashed var(--ink-2);color:var(--ink-2);border-radius:4px}

/* vista del domiciliario */
.stop{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stop-h{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.stop-h .par{font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.stop.prio-urgente .stop-h{background:var(--red-bg)}
.stop-b{padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.stop-b h3{font-size:1.5rem;overflow-wrap:anywhere}
.linea{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.linea .dato{font-size:1.05rem;flex:1 1 180px;min-width:0;overflow-wrap:anywhere;user-select:all}
.sacar{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sacar-h{padding:7px 12px;background:var(--surface-2);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.chk{display:flex;gap:12px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);cursor:pointer;min-width:0}
.chk span{min-width:0;overflow-wrap:anywhere}
.chk b{font-variant-numeric:tabular-nums}
.chk:has(input:checked) span{color:var(--ink-2);text-decoration:line-through}
.cobro{padding:10px 12px;border-radius:8px;font-weight:600;font-size:1.08rem}
.cobro.si{background:var(--amber-bg);color:var(--ink)}
.cobro.no{background:var(--green-bg);color:var(--green)}
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.acciones .btn{flex:1 1 150px}
.grupo{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.grupo-h{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;font-weight:600;font-size:1.05rem}
.grupo-h b{font-family:var(--font-display);font-size:1.4rem;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}

/* tareas */
.tarea-form{display:grid;grid-template-columns:minmax(0,1fr) 170px 150px auto;gap:8px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px}
.lista{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fila{display:flex;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);min-width:0;flex-wrap:wrap}
.fila:first-child{border-top:0}
.fila .txt{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.fila.hecha .txt{color:var(--ink-2);text-decoration:line-through}
.fila .ord{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--ink-2);width:24px;text-align:center}
.fila small{color:var(--ink-2)}

/* facturas */
.tbl-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);text-align:left;font-weight:600}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.form-grid.impar>:first-child{grid-column:1/-1}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}

/* elegir perfil */
.picker{display:flex;flex-direction:column;gap:14px;padding-top:10px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.pick{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;min-width:0}
.pick:hover{border-color:var(--ink-2)}
.pick b{font-family:var(--font-display);font-size:1.6rem;line-height:1.05;overflow-wrap:anywhere}
.pick span{color:var(--ink-2);font-size:.93rem}
.pick.jefe{background:var(--bar);border-color:var(--bar)}
.pick.jefe b{color:var(--accent)} .pick.jefe span{color:var(--bar-ink-2)}

/* diálogos */
dialog.dlg{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0;width:min(760px,calc(100vw - 20px));max-height:calc(100dvh - 20px)}
dialog.dlg.chico{width:min(440px,calc(100vw - 20px))}
dialog::backdrop{background:var(--scrim)}
.dlg-in{display:flex;flex-direction:column;gap:14px;padding:16px}
.dlg-h{display:flex;align-items:center;gap:10px}
.dlg-f{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.item-row{display:grid;grid-template-columns:minmax(0,1fr) 72px 92px 118px 100px 36px;gap:8px;align-items:center;padding-block:6px;border-top:1px solid var(--line)}
.item-row:first-child{border-top:0}
.it-sub{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:.95rem;white-space:nowrap}
.total-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:2px solid var(--ink);padding-top:8px}
.total-row b{font-family:var(--font-display);font-size:1.9rem;font-variant-numeric:tabular-nums}
.error{color:var(--red);font-weight:600}

/* la factura, como hoja de talonario */
.fac{background:var(--paper);border:1px solid var(--paper-line);border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:12px}
.fac-top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.fac-neg{font-family:var(--font-display);font-size:1.7rem;font-weight:700;line-height:1;overflow-wrap:anywhere}
.fac-sub{font-size:.85rem;color:var(--ink-2);overflow-wrap:anywhere}
.fac-no{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.fac-no b{font-family:var(--font-mono);font-size:1.35rem;color:var(--red);letter-spacing:0;font-weight:500}
.fac-cli{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0;border-block:1px solid var(--paper-line);padding-block:10px}
.fac-cli div{min-width:0}
.fac-cli dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);font-weight:600}
.fac-cli dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.fac .tbl-scroll{background:transparent;border:0;border-radius:0}
.fac th,.fac td{border-color:var(--paper-line);padding:7px 8px}
.fac td{font-variant-numeric:tabular-nums}
.fac-tot{display:flex;justify-content:flex-end;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:8px}
.fac-tot span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.fac-tot b{font-family:var(--font-display);font-size:2rem;font-variant-numeric:tabular-nums}
.fac-foot{font-size:.9rem;color:var(--ink-2);display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}

#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--bar);color:var(--bar-ink);padding:10px 16px;border-radius:8px;font-weight:500;max-width:calc(100vw - 32px);z-index:50;border:1px solid var(--accent)}

.stats.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .tarea-form{grid-template-columns:1fr 1fr}
  .tarea-form .field:first-child{grid-column:1/-1}
  .tarea-form .btn{grid-column:1/-1}
  .item-row{grid-template-columns:1fr 1fr 1.3fr 36px}
  .item-row .it-nombre,.item-row .it-sub{grid-column:1/-1}
  .ped{grid-template-columns:40px minmax(0,1fr)}
  .ped-n{font-size:1.6rem}
  .ped-a .mini{flex:1 1 120px}
}
@media (prefers-reduced-motion:no-preference){ .btn,.pick,.tab{transition:border-color .12s,filter .12s,color .12s} }

/* ---------- agregado para el sistema propio ---------- */

/* entrada con usuario y clave (mismo estilo que el selector de perfil del prototipo) */
.login{max-width:440px}
.login .panel{gap:14px}
.login .btn.big{width:100%}
input[type=password]{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);min-width:0}
.fila .usr{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-2)}
.fila.inactivo .txt b{color:var(--ink-2);text-decoration:line-through}
.mas{font-size:.9rem;color:var(--ink-2)}

/* impresión de la factura: solo se imprime la hoja, en claro */
#print-area{display:none}
@media print{
  :root{--paper:#fff;--paper-line:#bbb;--ink:#000;--ink-2:#444;--red:#b83227;color-scheme:light}
  @page{margin:12mm}
  body{background:#fff!important;color:#000}
  body>*:not(#print-area){display:none!important}
  #print-area{display:block}
  #print-area .fac{border:0;padding:0;background:#fff}
  #print-area .firmas{display:flex!important}
}
.firmas{display:none;justify-content:space-between;gap:24px;margin-top:40px;font-size:.8rem;color:var(--ink-2)}
.firmas span{flex:1;border-top:1px solid var(--ink-2);padding-top:4px}