/* ============ Bodega VF · tema oscuro celeste GEP ============ */
:root{
  --fondo:#0a111c;          /* plano de pagina */
  --superficie:#101a2a;     /* superficie de graficos/tarjetas */
  --tarjeta:#121e31;
  --tarjeta-hover:#16253c;
  --borde:rgba(148,197,255,.10);
  --tinta:#f2f6fb;
  --tinta-2:#9db1c7;
  --tinta-suave:#64748b;
  --grilla:#1d2b40;
  --acento:#38bdf8;
  --acento-2:#3987e5;
  --degrade:linear-gradient(135deg,#38bdf8,#3987e5 60%,#9085e9);
  /* series validadas (modo oscuro) */
  --s1:#3987e5; --s2:#199e70; --s3:#c98500; --s4:#008300;
  --s5:#9085e9; --s6:#e66767; --s7:#d55181; --s8:#d95926;
  /* estados */
  --bien:#0ca30c; --alerta:#fab219; --serio:#ec835a; --critico:#d03b3b;
  --radio:14px;
  --sombra:0 8px 24px rgba(2,8,20,.45);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(1200px 500px at 85% -10%,rgba(57,135,229,.14),transparent 60%),
    radial-gradient(900px 420px at -10% 110%,rgba(56,189,248,.08),transparent 55%),
    var(--fondo);
  color:var(--tinta);
  display:flex;min-height:100vh;
}

/* ---------------- barra lateral ---------------- */
.lateral{
  width:240px;flex-shrink:0;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:rgba(13,21,35,.85);backdrop-filter:blur(8px);
  border-right:1px solid var(--borde);padding:22px 14px;
}
.marca{display:flex;gap:12px;align-items:center;padding:4px 8px 22px}
.marca-logo{
  font-size:26px;width:46px;height:46px;display:grid;place-items:center;
  background:var(--degrade);border-radius:13px;
  box-shadow:0 6px 18px rgba(56,189,248,.35);
}
.marca-nombre{font-weight:800;font-size:19px;letter-spacing:.2px}
.marca-sub{font-size:11.5px;color:var(--tinta-2)}
nav{display:flex;flex-direction:column;gap:4px;margin-top:6px}
nav a{
  display:flex;align-items:center;gap:11px;
  color:var(--tinta-2);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:10px 12px;border-radius:10px;
  transition:background .18s,color .18s,transform .12s;
}
nav a:hover{background:rgba(56,189,248,.08);color:var(--tinta);transform:translateX(2px)}
nav a.activo{
  background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(57,135,229,.08));
  color:#bfe4ff;box-shadow:inset 2px 0 0 var(--acento);
}
nav .ico{width:20px;text-align:center;opacity:.9}
.lateral-pie{margin-top:auto;font-size:11px;color:var(--tinta-suave);padding:8px}

/* ---------------- marca GEP desarrollo/innovación ---------------- */
.gep-marca{
  font-weight:900;letter-spacing:1px;
  background:linear-gradient(100deg,#7dd3fc,#38bdf8 40%,#2563eb);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(56,189,248,.45));
}
.gep-sello{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:12px 8px;margin-bottom:8px;border-radius:12px;
  background:linear-gradient(160deg,rgba(56,189,248,.10),rgba(37,99,235,.06));
  border:1px solid rgba(56,189,248,.22);
}
.gep-sello .gep-marca{font-size:24px;line-height:1}
.gep-sello small{
  font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:#7dd3fc;font-weight:700;
}

/* ---------------- contenido ---------------- */
.contenido{flex:1;padding:26px 30px;max-width:1500px}
.cabecera{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cabecera h1{font-size:24px;font-weight:800;letter-spacing:.2px}
.cabecera .sub{color:var(--tinta-2);font-size:13.5px;margin-top:3px}

/* ---------------- tarjetas / kpi ---------------- */
.fila-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.kpi{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:16px 18px;position:relative;overflow:hidden;
  animation:aparecer .45s ease both;
}
.kpi::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--degrade);opacity:.85;
}
.kpi .kpi-nombre{font-size:12.5px;color:var(--tinta-2);font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.kpi .kpi-valor{font-size:27px;font-weight:800;margin-top:6px}
.kpi .kpi-extra{font-size:12px;color:var(--tinta-suave);margin-top:4px}
.kpi.critico::after{background:var(--critico)}
.kpi.alerta::after{background:var(--alerta)}

.tarjeta{
  background:var(--tarjeta);border:1px solid var(--borde);
  border-radius:var(--radio);padding:18px 20px;box-shadow:var(--sombra);
  animation:aparecer .5s ease both;
}
.tarjeta h2{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--tinta);display:flex;gap:8px;align-items:center}
.tarjeta h2 .puntito{width:8px;height:8px;border-radius:50%;background:var(--acento)}
.grilla-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.grilla-3{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}
.grilla-consulta{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-bottom:16px}
.grilla-2>*,.grilla-3>*,.grilla-consulta>*{min-width:0}
@media(max-width:1100px){.grilla-2,.grilla-3,.grilla-consulta{grid-template-columns:1fr}}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------- graficos ---------------- */
.barra-h{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.barra-h .nombre{color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.barra-h .pista{background:var(--grilla);border-radius:5px;height:14px;position:relative;overflow:hidden}
.barra-h .relleno{
  position:absolute;inset:0 auto 0 0;border-radius:4px 5px 5px 4px;
  background:var(--s1);min-width:2px;
  transform-origin:left;animation:crecer .7s cubic-bezier(.2,.7,.3,1) both;
  transition:filter .15s;
}
.barra-h:hover .relleno{filter:brightness(1.25)}
.barra-h .cifra{font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:600;font-size:12.5px}
@keyframes crecer{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.leyenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12.5px;color:var(--tinta-2)}
.leyenda span{display:flex;align-items:center;gap:6px}
.leyenda i{width:10px;height:10px;border-radius:3px;display:inline-block}

svg text{font-family:inherit}

/* ---------------- tablas ---------------- */
.tabla-env{overflow-x:auto;border-radius:var(--radio)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;color:var(--tinta-2);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.6px;font-weight:700;padding:9px 12px;border-bottom:1px solid var(--grilla);
  position:sticky;top:0;background:var(--tarjeta);
}
td{padding:9px 12px;border-bottom:1px solid rgba(148,197,255,.05)}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(56,189,248,.05)}
tr.clic{cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------- chips / insignias ---------------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;
  background:rgba(56,189,248,.12);color:#9fdcff;
}
.chip.t-MC{background:rgba(57,135,229,.16);color:#9ec5f4}
.chip.t-EPP{background:rgba(25,158,112,.16);color:#7ce0b8}
.chip.t-HE{background:rgba(201,133,0,.16);color:#ffc966}
.chip.t-HM{background:rgba(144,133,233,.18);color:#c9c2ff}
.chip.t-AF{background:rgba(213,81,129,.16);color:#ff9fc2}
.chip.t-MAQ{background:rgba(217,89,38,.16);color:#ffab85}
.chip.t-VENTA,.chip.t-REV,.chip.t-TALLER,.chip.t-MOB,.chip.t-IDF,.chip.t-OTRO{background:rgba(148,163,184,.14);color:#b9c6d6}
.estado{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bien)}
.estado.sin::before{background:var(--critico)}
.estado.bajo::before{background:var(--alerta)}

/* ---------------- formularios ---------------- */
label{display:block;font-size:12px;font-weight:700;color:var(--tinta-2);margin:0 0 5px;text-transform:uppercase;letter-spacing:.5px}
input,select,textarea{
  width:100%;background:#0d1626;color:var(--tinta);
  border:1px solid var(--borde);border-radius:10px;
  padding:10px 12px;font-size:14px;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(56,189,248,.15);
}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.boton{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--degrade);color:#06121f;border:none;border-radius:11px;
  font-size:14.5px;font-weight:800;padding:11px 20px;font-family:inherit;
  box-shadow:0 6px 16px rgba(56,189,248,.30);
  transition:transform .12s,box-shadow .15s,filter .15s;
}
.boton:hover{transform:translateY(-1px);filter:brightness(1.08)}
.boton:active{transform:none}
.boton.secundario{background:var(--tarjeta-hover);color:var(--tinta);box-shadow:none;border:1px solid var(--borde)}
.boton.peligro{background:var(--critico);color:#fff;box-shadow:none}
.boton:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* autocompletar */
.auto-env{position:relative}
.auto-lista{
  position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow:auto;
  background:#0f1b2e;border:1px solid var(--borde);border-radius:10px;box-shadow:var(--sombra);
}
.auto-lista div{padding:9px 12px;font-size:13.5px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.auto-lista div:hover,.auto-lista div.marcado{background:rgba(56,189,248,.12)}
.auto-lista .cod{color:var(--tinta-suave);font-size:12px;flex-shrink:0}
.auto-lista .st{font-variant-numeric:tabular-nums;font-size:12px;color:var(--tinta-2)}

/* ---------------- tooltip / avisos / modal ---------------- */
.tooltip{
  position:fixed;z-index:90;pointer-events:none;
  background:#0f1b2e;border:1px solid var(--borde);border-radius:9px;
  padding:8px 11px;font-size:12.5px;box-shadow:var(--sombra);max-width:280px;
}
.tooltip b{display:block;margin-bottom:2px}
#avisos{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;gap:10px}
.aviso{
  background:#0f1b2e;border:1px solid var(--borde);border-left:4px solid var(--bien);
  border-radius:10px;padding:12px 16px;font-size:13.5px;box-shadow:var(--sombra);
  animation:aparecer .3s ease;max-width:380px;
}
.aviso.error{border-left-color:var(--critico)}
.modal-fondo{position:fixed;inset:0;background:rgba(4,10,20,.7);backdrop-filter:blur(3px);z-index:60;display:grid;place-items:center;padding:20px}
.modal{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:16px;
  max-width:860px;width:100%;max-height:88vh;overflow:auto;padding:22px 24px;
  animation:aparecer .25s ease;
}
.modal .cerrar{float:right;cursor:pointer;background:none;border:none;color:var(--tinta-2);font-size:20px}

/* ---------------- utilidades ---------------- */
.silencio{color:var(--tinta-suave);font-size:12.5px}
.derecha{text-align:right}
.mt{margin-top:16px}
.fila-flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.vacio{padding:34px;text-align:center;color:var(--tinta-suave)}
.contador{font-variant-numeric:tabular-nums}

/* ---------------- impresion (guias) ---------------- */
@media print{
  body{background:#fff;color:#111;display:block}
  .lateral,.no-imprimir,#avisos{display:none!important}
  .contenido{padding:0;max-width:none}
  .contenido::before{
    content:"GEP  ·  DESARROLLO / INNOVACIÓN  —  Bodega VF";
    display:block;font-weight:800;font-size:13px;letter-spacing:1px;
    color:#0369a1;border-bottom:2.5px solid #0369a1;
    padding-bottom:6px;margin-bottom:14px;
  }
  .tarjeta{border:1px solid #ccc;box-shadow:none;background:#fff;color:#111}
  th{background:#fff;color:#333;border-bottom:2px solid #333}
  td{border-bottom:1px solid #ddd;color:#111}
  .chip{border:1px solid #888;background:#fff;color:#111}
  h1,h2{color:#111}
  .kpi,.cabecera .sub{color:#333}
}
@media(max-width:900px){
  body{flex-direction:column}
  .lateral{width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto;padding:10px}
  .marca{padding:0 10px 0 4px}
  nav{flex-direction:row;margin:0}
  .lateral-pie{display:none}
  .contenido{padding:16px}
}