/* Sistema de producción Imasu — hoja de estilo única */

:root{
  --ground:#EFF1ED;
  --surface:#FFFFFF;
  --surface-2:#F5F6F2;
  --ink:#1A2028;
  --ink-2:#535D68;
  --ink-3:#828B95;
  --rule:#D8DBD3;
  --rule-2:#BCC1B7;
  --accent:#2B4A7D;
  --accent-2:#E3E9F3;
  --alert:#A03528;
  --alert-2:#F7E4E0;
  --ok:#356848;
  --ok-2:#DEEADF;
  --warn:#8A6410;
  --warn-2:#F7EDD5;
  --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sombra:0 1px 2px rgba(26,32,40,.07), 0 10px 28px -20px rgba(26,32,40,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--f-ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.015em;line-height:1.2}
h1{font-size:1.5rem;font-weight:700}
h2{font-size:1.1rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------- estructura */
.barra{
  background:var(--ink); color:#fff;
  display:flex; align-items:center; gap:1.5rem;
  padding:0 1.25rem; height:52px; position:sticky; top:0; z-index:40;
}
.barra .marca{
  font-weight:700; letter-spacing:.3em; font-size:.82rem; text-transform:uppercase;
  padding-right:1.25rem; border-right:1px solid #39424C; color:#fff;
}
.barra nav{display:flex; gap:.15rem; flex:1; overflow-x:auto}
.barra nav a{
  color:#C3CAD2; padding:.42rem .7rem; border-radius:3px; font-size:.83rem;
  white-space:nowrap; font-weight:500;
}
.barra nav a:hover{background:#252C34; color:#fff; text-decoration:none}
.barra nav a.on{background:var(--accent); color:#fff}
.barra .yo{font-size:.76rem; color:#98A2AC; white-space:nowrap;
  font-family:var(--f-num); display:flex; align-items:center; gap:.75rem}
.barra .yo a{color:#98A2AC}

main{padding:1.5rem 1.25rem 5rem; max-width:1500px; margin:0 auto}
.encabezado{display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem}
.encabezado .sub{color:var(--ink-2); font-size:.88rem; margin-top:.2rem}

/* ----------------------------------------------------------------- avisos */
.avisos{margin-bottom:1rem; display:flex; flex-direction:column; gap:.5rem}
.aviso{padding:.6rem .85rem; border-radius:3px; font-size:.88rem;
  border-left:3px solid var(--accent); background:var(--accent-2); color:var(--ink)}
.aviso.error{border-left-color:var(--alert); background:var(--alert-2)}
.aviso.ok{border-left-color:var(--ok); background:var(--ok-2)}

/* --------------------------------------------------------------- tarjetas */
.tarjeta{background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  box-shadow:var(--sombra); margin-bottom:1.1rem; overflow:hidden}
.tarjeta > header{padding:.75rem 1rem; border-bottom:1px solid var(--rule);
  background:var(--surface-2); display:flex; align-items:center;
  justify-content:space-between; gap:1rem; flex-wrap:wrap}
.tarjeta > header h2,.tarjeta > header h3{margin:0}
.tarjeta .cuerpo{padding:1rem}
.tarjeta .cuerpo.pegado{padding:0}

.rejilla-tarjetas{display:grid; gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:1.1rem}
.dato{background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  padding:.85rem .95rem; box-shadow:var(--sombra)}
.dato .rotulo{font-family:var(--f-num); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem}
.dato .cifra{font-family:var(--f-num); font-size:1.6rem; font-weight:600;
  letter-spacing:-.02em; line-height:1}
.dato .pie{font-size:.78rem; color:var(--ink-2); margin-top:.3rem}
.dato.alerta .cifra{color:var(--alert)}
.dato.bien .cifra{color:var(--ok)}
.dato.aviso2 .cifra{color:var(--warn)}

/* ---------------------------------------------------------------- tablas */
.tabla-wrap{overflow:auto; max-height:70vh}
table.datos{border-collapse:separate; border-spacing:0; width:100%; font-size:.85rem}
table.datos th{
  position:sticky; top:0; z-index:2; text-align:left; white-space:nowrap;
  font-family:var(--f-num); font-size:.66rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); background:var(--surface-2);
  padding:.55rem .7rem; border-bottom:1px solid var(--rule-2);
}
table.datos td{padding:.5rem .7rem; border-bottom:1px solid var(--rule); vertical-align:middle}
table.datos tbody tr:hover td{background:var(--surface-2)}
table.datos td.n,table.datos th.n{text-align:right; font-family:var(--f-num);
  font-variant-numeric:tabular-nums}
table.datos tr.total td{font-weight:600; background:var(--surface-2)}

/* --------------------------------------------------------------- píldoras */
.pil{display:inline-block; font-family:var(--f-num); font-size:.65rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; padding:.18rem .45rem;
  border-radius:2px; white-space:nowrap}
.pil.acc{background:var(--accent-2); color:var(--accent)}
.pil.ok{background:var(--ok-2); color:var(--ok)}
.pil.alerta{background:var(--alert-2); color:var(--alert)}
.pil.avi{background:var(--warn-2); color:var(--warn)}
.pil.gris{background:var(--surface-2); color:var(--ink-2)}

.barrita{height:5px; background:var(--rule); border-radius:3px; overflow:hidden; min-width:64px}
.barrita i{display:block; height:100%; background:var(--accent)}
.barrita.lleno i{background:var(--ok)}

/* --------------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-ui);
  font-size:.84rem; font-weight:600; padding:.48rem .85rem; border-radius:3px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink);
  cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn.prim{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.prim:hover{background:#233D68}
.btn.peligro{background:var(--alert); border-color:var(--alert); color:#fff}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.chico{font-size:.75rem; padding:.3rem .55rem}
.acciones{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}

/* ---------------------------------------------------------------- campos */
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  font-family:var(--f-ui); font-size:.86rem; padding:.42rem .55rem;
  border:1px solid var(--rule-2); border-radius:3px; background:var(--surface);
  color:var(--ink); width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-2)}
label.campo{display:block; margin-bottom:.7rem}
label.campo span{display:block; font-family:var(--f-num); font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.25rem}
.fila-campos{display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* =========================================================== rejilla Excel */
.rejilla{overflow:auto; border-top:1px solid var(--rule)}
table.rej{border-collapse:separate; border-spacing:0; width:100%; font-size:.85rem}
table.rej th{
  position:sticky; top:0; z-index:3; background:var(--surface-2);
  font-family:var(--f-num); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; text-align:left; white-space:nowrap;
  padding:.5rem .6rem; border-bottom:1px solid var(--rule-2); border-right:1px solid var(--rule);
}
table.rej th.idx{width:34px; text-align:center}
table.rej td{
  padding:0; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
  background:var(--surface); position:relative;
}
table.rej td.idx{background:var(--surface-2); color:var(--ink-3); text-align:center;
  font-family:var(--f-num); font-size:.7rem; padding:.35rem; width:34px}
table.rej td input{
  border:0; border-radius:0; padding:.42rem .6rem; width:100%; background:transparent;
  font-size:.85rem;
}
table.rej td input:focus{box-shadow:inset 0 0 0 2px var(--accent); background:var(--surface)}
table.rej td.calc{padding:.42rem .6rem; text-align:right; font-family:var(--f-num);
  color:var(--ink-2); background:var(--surface-2); font-variant-numeric:tabular-nums}
table.rej td.numero input{text-align:right; font-family:var(--f-num);
  font-variant-numeric:tabular-nums}
table.rej tr.mala td{background:var(--alert-2)}
table.rej tr.lista td.idx{background:var(--ok-2); color:var(--ok); font-weight:700}
table.rej td .ref{
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  font-family:var(--f-num); font-size:.62rem; color:var(--ink-3);
  pointer-events:none; background:var(--surface); padding-left:.3rem; max-width:55%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* sugerencias del buscador */
.sugerencias{
  position:fixed; z-index:60; background:var(--surface); border:1px solid var(--rule-2);
  border-radius:3px; box-shadow:0 10px 30px -8px rgba(26,32,40,.35);
  max-height:270px; overflow:auto; min-width:330px;
}
.sugerencias div{padding:.45rem .65rem; cursor:pointer; font-size:.83rem;
  border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; gap:.75rem}
.sugerencias div:last-child{border-bottom:0}
.sugerencias div:hover,.sugerencias div.sel{background:var(--accent-2)}
.sugerencias .b{font-weight:600}
.sugerencias .g{color:var(--ink-3); font-family:var(--f-num); font-size:.72rem;
  white-space:nowrap}
.sugerencias .vacio{color:var(--ink-3); cursor:default; justify-content:flex-start}

.pie-rejilla{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 1rem; background:var(--surface-2);
  border-top:1px solid var(--rule); flex-wrap:wrap}
.pie-rejilla .totales{font-family:var(--f-num); font-size:.8rem; color:var(--ink-2);
  display:flex; gap:1.25rem; flex-wrap:wrap}
.pie-rejilla .totales b{color:var(--ink)}
.ayuda{font-size:.75rem; color:var(--ink-3); font-family:var(--f-num)}

/* ---------------------------------------------------------------- lector */
.lector{display:grid; gap:1rem; grid-template-columns:minmax(280px,380px) 1fr;
  align-items:start}
@media (max-width:820px){.lector{grid-template-columns:1fr}}
.camara{background:#000; border-radius:4px; overflow:hidden; position:relative;
  aspect-ratio:4/3; display:grid; place-items:center}
.camara video{width:100%; height:100%; object-fit:cover; display:block}
.camara .mira{position:absolute; inset:18%; border:2px solid rgba(255,255,255,.85);
  border-radius:6px; box-shadow:0 0 0 100vmax rgba(0,0,0,.28)}
.camara .apagada{color:#8A939C; font-size:.85rem; text-align:center; padding:1.5rem;
  font-family:var(--f-num)}
.lectura{background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  padding:1rem; min-height:120px}
.lectura .vacia{color:var(--ink-3); font-size:.85rem}
.lectura dl{display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; margin:0 0 .9rem}
.lectura dt{font-family:var(--f-num); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3)}
.lectura dd{margin:0; font-weight:600}

/* ------------------------------------------------------------- etiquetas */
@media print{
  .barra,.no-imprimir{display:none !important}
  body{background:#fff}
  main{padding:0; max-width:none}
  .etiqueta{break-inside:avoid; page-break-inside:avoid}
}
.hoja-etiquetas{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem}
.etiqueta{border:1.5px dashed var(--rule-2); border-radius:4px; padding:.7rem .8rem;
  display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center;
  background:#fff}
.etiqueta .qr{width:112px; height:112px}
.etiqueta .qr svg{width:100%; height:100%; display:block}
.etiqueta .txt{min-width:0}
.etiqueta .codigo{font-family:var(--f-num); font-size:1.05rem; font-weight:700;
  letter-spacing:.04em}
.etiqueta .g{font-size:.75rem; color:#444; line-height:1.45}
.etiqueta .g b{font-weight:600}
.etiqueta .grande{font-family:var(--f-num); font-size:1.5rem; font-weight:700; line-height:1.1}

/* ---------------------------------------------------------------- login */
.pantalla-login{min-height:100vh; display:grid; place-items:center; padding:1.5rem}
.caja-login{background:var(--surface); border:1px solid var(--rule); border-radius:5px;
  box-shadow:var(--sombra); padding:2rem; width:100%; max-width:350px}
.caja-login .marca{font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  font-size:1.05rem; border-top:2px solid var(--accent);
  border-bottom:1px solid var(--rule-2); display:inline-block;
  padding:.3rem 0; margin-bottom:.4rem}
.caja-login .sub{color:var(--ink-3); font-family:var(--f-num); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.5rem}

/* ------------------------------------------------------------- pestañas */
.pestanas{display:flex; gap:.2rem; border-bottom:1px solid var(--rule-2); margin-bottom:1.1rem;
  overflow-x:auto}
.pestanas a,.pestanas button{
  padding:.5rem .85rem; font-size:.85rem; font-weight:600; color:var(--ink-2);
  border:0; background:transparent; cursor:pointer; border-bottom:2px solid transparent;
  white-space:nowrap; font-family:var(--f-ui);
}
.pestanas a.on,.pestanas button.on{color:var(--accent); border-bottom-color:var(--accent)}
.pestanas a:hover,.pestanas button:hover{color:var(--ink); text-decoration:none}

.vacio-msg{padding:2.5rem 1rem; text-align:center; color:var(--ink-3); font-size:.88rem}
.mini{font-size:.75rem; color:var(--ink-3)}