/* =========================================================================
   RSS INVENTARIO — Hoja de estilos
   ========================================================================= */
:root{
  --navy:#2151A4; --navy-d:#16376F; --navy-l:#EAF0FA;
  --verde:#0F8A4C; --verde-l:#E6F4ED;
  --ambar:#C98A00; --ambar-l:#FDF3DF;
  --rojo:#C0392B;  --rojo-l:#FBEAE8;
  --tinta:#16202E; --tinta-2:#4A5768; --tinta-3:#7C8797;
  --linea:#E1E6EE; --fondo:#F5F7FB; --papel:#FFFFFF;
  --r:10px; --sombra:0 1px 2px rgba(16,32,54,.06),0 4px 14px rgba(16,32,54,.06);
  /* Tipografía institucional. Aptos es la fuente corporativa de Microsoft 365
     y Helvetica su equivalente en macOS/iOS; ninguna de las dos puede
     redistribuirse por licencia, de modo que se usan desde el sistema del
     usuario con una cadena de reemplazo equivalente en métrica. */
  --texto:Aptos,'Aptos Display','Helvetica Neue',Helvetica,Arial,'Segoe UI',system-ui,sans-serif;
  --mono:'Aptos Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--texto);
  background:var(--fondo); color:var(--tinta); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
input,select,textarea,button{font-family:var(--texto)}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.25;font-weight:650}
h1{font-size:1.45rem} h2{font-size:1.15rem} h3{font-size:1rem}
a{color:var(--navy)}
.oculto{display:none !important}

/* ---------- Estructura ---------- */
.app{display:flex;flex-direction:column;min-height:100vh}
.barra{
  background:var(--navy); color:#fff; padding:.55rem .9rem;
  display:flex;align-items:center;gap:.7rem;position:sticky;top:0;z-index:60;
  box-shadow:0 2px 10px rgba(16,32,54,.18)
}
.logo-barra{height:26px;width:auto;display:block;flex:0 0 auto}
.barra .marca{font-weight:700;letter-spacing:.02em;font-size:.95rem;white-space:nowrap}
.barra .sub{font-size:.72rem;opacity:.82;font-weight:400;display:block;letter-spacing:.04em}
.barra .esp{flex:1}
.chip-user{
  background:rgba(255,255,255,.14);border-radius:100px;padding:.22rem .7rem;
  font-size:.78rem;display:flex;align-items:center;gap:.4rem;white-space:nowrap
}
.chip-rol{background:rgba(255,255,255,.22);border-radius:4px;padding:.05rem .34rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}

.nav{
  display:flex;gap:.15rem;background:var(--papel);border-bottom:1px solid var(--linea);
  padding:0 .5rem;overflow-x:auto;position:sticky;top:47px;z-index:55;scrollbar-width:none
}
.nav::-webkit-scrollbar{display:none}
.nav button{
  background:none;border:none;border-bottom:3px solid transparent;padding:.7rem .8rem;
  font:inherit;font-size:.86rem;color:var(--tinta-2);cursor:pointer;white-space:nowrap;font-weight:550
}
.nav button.on{color:var(--navy);border-bottom-color:var(--navy)}
.nav button:hover:not(.on){background:var(--navy-l)}

main{flex:1;padding:1rem;max-width:1440px;width:100%;margin:0 auto}
.vista{display:none} .vista.on{display:block;animation:ap .18s ease}
@keyframes ap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra);padding:1rem;margin-bottom:1rem}
.tarjeta > h2, .tarjeta > h3{display:flex;align-items:center;gap:.45rem}
.eyebrow{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:.35rem}
.nota{font-size:.8rem;color:var(--tinta-3)}
.divisor{height:1px;background:var(--linea);margin:.9rem 0}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.7rem;margin-bottom:1rem}
.kpi{background:var(--papel);border:1px solid var(--linea);border-left:4px solid var(--navy);border-radius:var(--r);padding:.75rem .85rem;box-shadow:var(--sombra)}
.kpi .r{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-3);font-weight:650}
.kpi .v{font-size:1.65rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;margin-top:.15rem}
.kpi .d{font-size:.75rem;color:var(--tinta-2)}
.kpi.verde{border-left-color:var(--verde)} .kpi.verde .v{color:var(--verde)}
.kpi.ambar{border-left-color:var(--ambar)} .kpi.ambar .v{color:var(--ambar)}
.kpi.rojo{border-left-color:var(--rojo)}   .kpi.rojo .v{color:var(--rojo)}

/* ---------- Semáforo ---------- */
.sem{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:650;padding:.16rem .55rem;border-radius:100px;white-space:nowrap}
.sem::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.sem.verde{background:var(--verde-l);color:var(--verde)}
.sem.ambar{background:var(--ambar-l);color:var(--ambar)}
.sem.rojo{background:var(--rojo-l);color:var(--rojo)}
.sem.gris{background:#EEF1F6;color:var(--tinta-3)}

/* ---------- Barras de avance ---------- */
.barra-p{height:8px;background:#EDF1F7;border-radius:100px;overflow:hidden;min-width:70px}
.barra-p > i{display:block;height:100%;border-radius:100px;background:var(--navy);transition:width .4s}
.barra-p.verde > i{background:var(--verde)} .barra-p.ambar > i{background:var(--ambar)} .barra-p.rojo > i{background:var(--rojo)}

/* ---------- Tablas ---------- */
.tabla-cont{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r);background:var(--papel)}
table{border-collapse:collapse;width:100%;font-size:.84rem}
thead th{
  background:var(--navy);color:#fff;text-align:left;padding:.55rem .6rem;font-weight:600;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0;white-space:nowrap
}
tbody td{padding:.48rem .6rem;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:nth-child(even){background:#FAFBFD}
tbody tr:hover{background:var(--navy-l)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.mono,.mono{font-family:var(--mono);font-size:.8rem}

/* ---------- Formularios ---------- */
label{display:block;font-size:.76rem;font-weight:650;color:var(--tinta-2);margin:.65rem 0 .22rem;letter-spacing:.02em}
input,select,textarea{
  width:100%;padding:.62rem .7rem;border:1px solid #CFD7E3;border-radius:8px;
  font:inherit;font-size:.92rem;background:#fff;color:var(--tinta)
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(33,81,164,.13)}
textarea{min-height:70px;resize:vertical}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 .8rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:8px;
  padding:.62rem 1rem;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:filter .15s; min-height:42px
}
.btn:hover{filter:brightness(1.1)} .btn:active{filter:brightness(.94)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--navy)}
.btn.fant{background:transparent;color:var(--tinta-2);border-color:var(--linea)}
.btn.ok{background:var(--verde);border-color:var(--verde)}
.btn.peligro{background:var(--rojo);border-color:var(--rojo)}
.btn.gr{width:100%;padding:.9rem;font-size:1rem;min-height:52px}
.btn.xs{padding:.3rem .55rem;font-size:.75rem;min-height:0}
.botones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}

/* ---------- Avisos ---------- */
.aviso{padding:.7rem .85rem;border-radius:8px;font-size:.85rem;margin:.6rem 0;border-left:4px solid}
.aviso.info{background:var(--navy-l);border-color:var(--navy);color:var(--navy-d)}
.aviso.ok{background:var(--verde-l);border-color:var(--verde);color:#0B6238}
.aviso.alerta{background:var(--ambar-l);border-color:var(--ambar);color:#8A6000}
.aviso.error{background:var(--rojo-l);border-color:var(--rojo);color:#8E2B20}

/* ---------- Login ---------- */
.login-fondo{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:linear-gradient(150deg,var(--navy-d) 0%,var(--navy) 55%,#3A72CC 100%)
}
.login-caja{background:#fff;border-radius:14px;padding:1.8rem;width:100%;max-width:400px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.login-caja .logo{text-align:center;margin-bottom:1.3rem}
.login-caja .logo-firma{height:52px;width:auto;margin:0 auto .9rem;display:block}
.login-caja .logo b{display:block;font-size:1.42rem;color:var(--navy);letter-spacing:.01em;line-height:1.2}
.login-caja .logo span{font-size:.72rem;color:var(--tinta-3);letter-spacing:.11em;text-transform:uppercase}

/* ---------- Captura ---------- */
#lector{width:100%;border-radius:var(--r);overflow:hidden;background:#000;min-height:230px}
#lector video{width:100% !important;height:auto !important;display:block}
.ficha{background:var(--navy-l);border:1px solid #C6D5EE;border-radius:var(--r);padding:.85rem;margin:.8rem 0}
.ficha .id{font-family:var(--mono);font-size:1.28rem;font-weight:700;color:var(--navy-d);letter-spacing:.01em}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;margin:.6rem 0 0;font-size:.83rem}
.ficha dt{color:var(--tinta-3);font-weight:600} .ficha dd{margin:0}
.estados{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.3rem}
.estados button{
  padding:.75rem .3rem;border:2px solid var(--linea);background:#fff;border-radius:8px;
  font:inherit;font-size:.82rem;font-weight:650;cursor:pointer;color:var(--tinta-2)
}
.estados button.on{border-color:var(--navy);background:var(--navy-l);color:var(--navy-d)}
.estados button[data-e="danado"].on{border-color:var(--rojo);background:var(--rojo-l);color:var(--rojo)}
.estados button[data-e="en_desuso"].on{border-color:var(--ambar);background:var(--ambar-l);color:var(--ambar)}

.fotos{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.fotos figure{margin:0;position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--linea)}
.fotos img{width:100%;height:100%;object-fit:cover;display:block}
.fotos .x{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.62);color:#fff;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:.8rem;line-height:1}
.foto-add{
  width:84px;height:84px;border:2px dashed #C3CCDA;border-radius:8px;background:#FAFBFD;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  cursor:pointer;color:var(--tinta-3);font-size:.68rem;font-weight:600
}
.foto-add span{font-size:1.35rem;line-height:1}

/* ---------- Estado de conexión / cola ---------- */
.estado-red{display:flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:650;padding:.2rem .55rem;border-radius:100px;background:rgba(255,255,255,.16)}
.estado-red::before{content:'';width:8px;height:8px;border-radius:50%;background:#7BE3AE}
.estado-red.off::before{background:#FFC46B}
.cola-flotante{
  position:fixed;bottom:1rem;right:1rem;z-index:70;background:var(--ambar);color:#fff;
  border-radius:100px;padding:.55rem .95rem;font-size:.8rem;font-weight:650;
  box-shadow:0 6px 20px rgba(0,0,0,.25);border:none;cursor:pointer
}

/* ---------- Gráficos ---------- */
.grafico{width:100%;height:auto;display:block;overflow:visible}
.g-grid{stroke:var(--linea);stroke-width:1}
.g-eje{fill:var(--tinta-3);font-size:10px}
.g-barra{fill:var(--navy)} .g-barra.meta{fill:#C6D5EE}

/* ---------- Utilidades ---------- */
.flex{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.entre{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.der{text-align:right} .cen{text-align:center}
.mini{font-size:.76rem} .fuerte{font-weight:700}
.tag{display:inline-block;background:#EEF1F6;color:var(--tinta-2);border-radius:4px;padding:.08rem .4rem;font-size:.7rem;font-weight:600}
.tag.A{background:var(--ambar-l);color:var(--ambar)}
.tag.B{background:var(--navy-l);color:var(--navy)}
.tag.C{background:var(--rojo-l);color:var(--rojo)}
.cargando{text-align:center;padding:2rem;color:var(--tinta-3);font-size:.88rem}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.modal{position:fixed;inset:0;background:rgba(11,22,38,.62);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100}
.modal .caja{background:#fff;border-radius:12px;max-width:640px;width:100%;max-height:88vh;overflow:auto;padding:1.2rem}

@media(max-width:640px){
  main{padding:.7rem}
  .tarjeta{padding:.85rem}
  .barra .marca{font-size:.85rem}
  .kpi .v{font-size:1.4rem}
  h1{font-size:1.2rem}
}
@media print{
  .barra,.nav,.botones,.cola-flotante{display:none !important}
  body{background:#fff}
  .tarjeta{box-shadow:none;break-inside:avoid}
}