/* ============================================================
   Sistema de concesionario — hoja de estilos
   Identidad: Voltaje (Grafito / Hueso / Amarillo senal)
   Regla de marca: el amarillo es SENAL, no fondo. Se usa como
   filete de 3px, borde o texto de estado; nunca como relleno de
   una superficie grande. Objetivo: <= ~5% de la superficie.
   ============================================================ */

/* ---------- Tipografia auto-hospedada (funciona sin internet) ---------- */
@font-face{font-family:"Archivo";src:url("/estatico/fuentes/archivo-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/estatico/fuentes/archivo-latin-800-normal.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/estatico/fuentes/archivo-latin-900-normal.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/estatico/fuentes/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/estatico/fuentes/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/estatico/fuentes/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/estatico/fuentes/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* --- Superficies --- */
  --fondo:#0A0A0B; --panel:#151517; --panel2:#1B1C1F; --borde:#2B2C30;
  /* --- Texto --- */
  --texto:#F4F4F2; --suave:#B9B9B6; --tenue:#7C7C79;
  /* --- Acento de marca --- */
  --acento:#F5C21E;          /* amarillo senal: filetes, bordes, indicadores */
  --acento2:#D9A500;         /* variante de presion/hover */
  --acento-txt:#F5C21E;      /* acento cuando hace de TEXTO */
  --sobre-acento:#0A0A0B;    /* texto sobre relleno amarillo */
  --acento-tenue:rgba(245,194,30,.12);
  /* --- Semanticos (no son de marca) --- */
  --ok:#34D399; --alerta:#FB923C; --error:#F87171; --info:#38BDF8; --morado:#A78BFA;
  /* --- Forma --- */
  --radio:10px; --sombra:0 6px 24px rgba(0,0,0,.55);
  --lateral:230px;
  --tipo-titular:"Archivo","Arial Black","Segoe UI",Impact,sans-serif;
  --tipo-cuerpo:"IBM Plex Sans",Calibri,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
/* Ya no hay modo oscuro/claro para elegir: la barra lateral y la superior son siempre
   oscuras (arriba, tokens de :root); todo lo demas -contenido, modales, avisos y el
   login- es siempre claro, con este segundo juego de tokens. */
#contenido, .velo, #avisos, #login{
  --fondo:#F4F4F2; --panel:#FFFFFF; --panel2:#F7F7F5; --borde:#E1E0DA;
  --texto:#0A0A0B; --suave:#54544F; --tenue:#84847E;
  --acento:#F5C21E; --acento2:#D9A500;
  --acento-txt:#8A6A00;      /* el amarillo puro NUNCA se usa como texto sobre claro */
  --sobre-acento:#0A0A0B;
  --acento-tenue:rgba(245,194,30,.18);
  --ok:#059669; --alerta:#C2410C; --error:#DC2626; --info:#0369A1; --morado:#6D28D9;
  --sombra:0 2px 12px rgba(10,10,11,.10);
}
#contenido, #login{background:var(--fondo);color:var(--texto)}
/* La cabecera de cada ventana emergente (modal) tambien es siempre oscura, igual que
   la barra lateral y la barra superior del sistema; el resto del modal sigue claro. */
.modal-cab{
  --fondo:#0A0A0B; --panel:#151517; --panel2:#1B1C1F; --borde:#2B2C30;
  --texto:#F4F4F2; --suave:#B9B9B6; --tenue:#7C7C79;
  --acento:#F5C21E; --acento2:#D9A500; --acento-txt:#F5C21E; --sobre-acento:#0A0A0B;
  --acento-tenue:rgba(245,194,30,.12);
  --ok:#34D399; --alerta:#FB923C; --error:#F87171; --info:#38BDF8; --morado:#A78BFA;
  background:var(--panel);color:var(--texto);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--tipo-cuerpo);
  background:var(--fondo); color:var(--texto); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--tipo-titular);font-weight:800;letter-spacing:-.02em;line-height:1.15}
a{color:var(--acento-txt);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font-family:inherit;font-size:14px}

/* ---------- Filete de cabecera (firma de marca 64:18:9) ---------- */
.filete{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.filete i{display:block;height:3px;background:var(--acento)}
.filete i:nth-child(1){width:64px}
.filete i:nth-child(2){width:18px}
.filete i:nth-child(3){width:9px}
.filete.horizontal{flex-direction:row;align-items:center;gap:5px;margin:0}
.filete.horizontal i{height:3px}

/* Marca de seccion: barra corta + texto en mayusculas trackeado, antes del titulo */
.marca-seccion{display:inline-flex;align-items:center;gap:8px;font-family:var(--tipo-cuerpo);
  font-size:10px;text-transform:uppercase;letter-spacing:1.6px;font-weight:700;color:var(--acento-txt)}
.marca-seccion::before{content:"";width:18px;height:3px;background:var(--acento);flex-shrink:0}

/* ---------- Estructura ---------- */
#app{display:flex;min-height:100vh}
#lateral{
  width:var(--lateral); flex-shrink:0; background:var(--panel); border-right:1px solid var(--borde);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
#lateral .marca{padding:18px 16px 14px;border-bottom:1px solid var(--borde)}
#lateral .marca h1{font-family:var(--tipo-titular);font-size:16px;font-weight:900;
  letter-spacing:-.03em;text-transform:uppercase;line-height:1.05}
#lateral .marca-logo{display:block;max-width:100%;max-height:52px;width:auto;
  height:auto;margin-bottom:6px;object-fit:contain}
#lateral .marca small{color:var(--tenue);font-size:11px;letter-spacing:.3px}
#menu{flex:1;padding:8px}
.menu-grupo{margin-top:12px}
.menu-grupo>span{
  display:block;padding:6px 10px;font-size:10px;text-transform:uppercase;
  letter-spacing:1.3px;color:var(--tenue);font-weight:700
}
.menu-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--suave);cursor:pointer;font-size:13.5px;transition:.12s;
  border-left:3px solid transparent
}
.menu-item:hover{background:var(--panel2);color:var(--texto)}
/* El activo se marca con FILETE + texto, no con relleno amarillo */
.menu-item.activo{
  background:var(--panel2);color:var(--texto);font-weight:600;
  border-left-color:var(--acento);border-radius:0 8px 8px 0
}
.menu-item.activo .ic{color:var(--acento)}
.menu-item .ic{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.menu-item .ic svg{width:18px;height:18px;display:block}
.menu-item .glob{margin-left:auto;background:var(--error);color:#fff;border-radius:9px;
  padding:0 6px;font-size:10.5px;font-weight:700}
#pie-lateral{padding:10px;border-top:1px solid var(--borde);font-size:12px;color:var(--tenue)}

#principal{flex:1;display:flex;flex-direction:column;min-width:0}
#barra{
  height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;
  background:var(--panel);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:30
}
#barra .titulo-env{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
#barra h2{font-family:var(--tipo-titular);font-size:19px;font-weight:800;letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#contenido{padding:18px;flex:1}

/* ---------- Componentes ---------- */
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:16px;margin-bottom:16px}
.tarjeta>h3{font-size:14.5px;font-weight:800;letter-spacing:-.015em;margin-bottom:12px;
  display:flex;align-items:center;gap:8px}
.rejilla{display:grid;gap:14px}
.r2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fila.fin{justify-content:flex-end}
.crece{flex:1}

.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:14px 16px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--borde)}
.kpi .et{font-family:var(--tipo-cuerpo);font-size:10.5px;color:var(--tenue);text-transform:uppercase;
  letter-spacing:1.1px;font-weight:600;background:none;border:0;padding:0;display:block}
.kpi .val{font-family:var(--tipo-titular);font-size:27px;font-weight:900;margin-top:4px;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .sub{font-size:12px;color:var(--suave);margin-top:2px}
.kpi.ok::before{background:var(--ok)} .kpi.ok .val{color:var(--ok)}
.kpi.alerta::before{background:var(--alerta)} .kpi.alerta .val{color:var(--alerta)}
.kpi.error::before{background:var(--error)} .kpi.error .val{color:var(--error)}
.kpi.info::before{background:var(--info)} .kpi.info .val{color:var(--info)}
.kpi.acento::before{background:var(--acento)} .kpi.acento .val{color:var(--acento-txt)}

.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;
  border:1px solid var(--borde);background:var(--panel2);color:var(--texto);
  cursor:pointer;font-weight:600;font-size:13.5px;transition:.12s;white-space:nowrap
}
.btn:hover{border-color:var(--acento)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* Unico relleno amarillo permitido: la accion primaria, una por pantalla */
.btn.pri{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);font-weight:700}
.btn.pri:hover{background:var(--acento2);border-color:var(--acento2)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.peligro{background:var(--error);border-color:var(--error);color:#fff}
.btn.chico{padding:4px 9px;font-size:12.5px}
.btn.plano{background:transparent;border-color:transparent;color:var(--suave)}
.btn.plano:hover{background:var(--panel2);color:var(--texto);border-color:transparent}

.campo{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.campo label{font-size:11.5px;color:var(--suave);font-weight:600;letter-spacing:.2px}
.campo .pista{font-size:11px;color:var(--tenue)}
/* Titulo de seccion dentro de un formulario largo (ver formulario() en nucleo.js). */
.campo-titulo{grid-column:1/-1;margin:4px 0 0}
.campo-titulo:first-child{margin-top:-4px}
.campo-titulo h4{font-size:11px;text-transform:uppercase;letter-spacing:1.1px;font-weight:800;
  color:var(--tenue);border-bottom:1px solid var(--borde);padding-bottom:8px;margin-bottom:10px}
/* Medidor de combustible: una linea con un circulo que se arrastra, como el tablero de
   un carro, en vez de una lista desplegable con fracciones. */
.combustible-lectura{font-weight:800;font-size:15px;margin-bottom:8px}
.combustible-pista{position:relative;height:28px;display:flex;align-items:center}
.combustible-base{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:6px;border-radius:3px;background:var(--borde)}
.combustible-relleno{position:absolute;left:0;top:50%;transform:translateY(-50%);height:6px;
  border-radius:3px;background:var(--acento);pointer-events:none;transition:width .08s linear}
.combustible-marcas{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;justify-content:space-between;pointer-events:none}
.combustible-marcas span{width:2px;height:10px;border-radius:1px;background:var(--borde)}
.combustible-pista input[type="range"]{position:relative;width:100%;height:28px;margin:0;
  background:transparent;-webkit-appearance:none;appearance:none;cursor:grab;z-index:1}
.combustible-pista input[type="range"]:active{cursor:grabbing}
.combustible-pista input[type="range"]::-webkit-slider-runnable-track{
  -webkit-appearance:none;background:transparent;height:28px}
.combustible-pista input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:3px;
  background:var(--acento);border:3px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.combustible-pista input[type="range"]::-moz-range-track{background:transparent;height:28px;border:0}
.combustible-pista input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--acento);border:3px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.combustible-extremos{display:flex;justify-content:space-between;font-size:11px;font-weight:700;
  color:var(--tenue);margin-top:3px}
input,select,textarea{
  background:var(--panel2);border:1px solid var(--borde);border-radius:7px;
  padding:8px 10px;color:var(--texto);width:100%;outline:none;transition:.12s
}
input:focus,select:focus,textarea:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-tenue)}
input[readonly]{opacity:.65}
input[type=checkbox]{width:auto;accent-color:var(--acento)}
.check{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;padding:5px 0}
textarea{min-height:70px;resize:vertical}

table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;padding:9px 10px;border-bottom:2px solid var(--borde);color:var(--tenue);
  font-size:10.5px;text-transform:uppercase;letter-spacing:1px;font-weight:700;white-space:nowrap
}
td{padding:9px 10px;border-bottom:1px solid var(--borde);vertical-align:middle}
tbody tr:hover{background:var(--panel2)}
tbody tr.clic{cursor:pointer}
/* Fila destacada: filete lateral amarillo, no fondo amarillo */
tbody tr.destaca td:first-child{box-shadow:inset 3px 0 0 var(--acento)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-env{overflow-x:auto;border-radius:var(--radio)}
.vacio{padding:36px;text-align:center;color:var(--tenue)}

.et{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:650;
  background:var(--panel2);border:1px solid var(--borde);white-space:nowrap}
.et.ok{background:rgba(52,211,153,.14);color:var(--ok);border-color:rgba(52,211,153,.32)}
.et.alerta{background:rgba(251,146,60,.14);color:var(--alerta);border-color:rgba(251,146,60,.32)}
.et.error{background:rgba(248,113,113,.14);color:var(--error);border-color:rgba(248,113,113,.32)}
.et.info{background:rgba(56,189,248,.14);color:var(--info);border-color:rgba(56,189,248,.32)}
.et.morado{background:rgba(167,139,250,.14);color:var(--morado);border-color:rgba(167,139,250,.32)}
.et.acento{background:var(--acento-tenue);color:var(--acento-txt);border-color:rgba(245,194,30,.4)}
.et.gris{color:var(--tenue)}

/* ---------- Modal ---------- */
.velo{position:fixed;inset:0;background:rgba(10,10,11,.76);display:flex;align-items:flex-start;
  justify-content:center;z-index:100;padding:24px;overflow-y:auto}
.modal{background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:14px;
  width:100%;max-width:720px;box-shadow:var(--sombra);margin:auto;overflow:hidden}
.modal.ancho{max-width:1100px}
.modal.angosto{max-width:440px}
.modal-cab{padding:15px 18px;border-bottom:1px solid var(--borde);display:flex;align-items:center;gap:10px;
  position:relative}
.modal-cab::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--acento)}
.modal-cab h3{font-size:16px;font-weight:800;letter-spacing:-.02em;flex:1}
.modal-cuerpo{padding:18px;max-height:calc(100vh - 200px);overflow-y:auto}
.modal-pie{padding:13px 18px;border-top:1px solid var(--borde);display:flex;gap:9px;justify-content:flex-end}

/* ---------- Avisos ---------- */
#avisos{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:9px;
  color:var(--texto)}
.aviso{background:var(--panel);border:1px solid var(--borde);border-left:3px solid var(--acento);
  border-radius:9px;padding:11px 15px;min-width:260px;max-width:420px;box-shadow:var(--sombra);
  animation:entra .2s}
.aviso.ok{border-left-color:var(--ok)} .aviso.error{border-left-color:var(--error)}
.aviso.alerta{border-left-color:var(--alerta)}
.aviso b{display:block;font-size:13px;margin-bottom:2px;font-weight:700}
.aviso span{font-size:12.5px;color:var(--suave)}
@keyframes entra{from{opacity:0;transform:translateX(20px)}}

/* ---------- Login ---------- */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(900px 460px at 22% -12%,rgba(245,194,30,.10),transparent 70%),
    var(--fondo)}
#login .caja{background:var(--panel);border:1px solid var(--borde);border-radius:16px;
  padding:32px;width:100%;max-width:390px;box-shadow:var(--sombra);position:relative;overflow:hidden}
#login .caja::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--acento)}
#login h1{font-family:var(--tipo-titular);font-size:23px;font-weight:900;letter-spacing:-.035em;
  text-transform:uppercase;margin-bottom:6px;line-height:1.05}
#login p.sub{color:var(--tenue);font-size:13px;margin-bottom:22px}
#login .filete{margin:0 0 20px}

/* ---------- Pestanas ---------- */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--borde);margin-bottom:16px;overflow-x:auto}
.pestana{padding:9px 15px;cursor:pointer;color:var(--suave);border-bottom:3px solid transparent;
  font-size:13.5px;font-weight:600;white-space:nowrap}
.pestana:hover{color:var(--texto)}
.pestana.activa{color:var(--acento-txt);border-bottom-color:var(--acento)}

/* ---------- Pastillas tactiles (checklist de recepcion) ---------- */
.pastillas{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--panel2);
  border:1px solid var(--borde);border-radius:9px;padding:3px;flex-shrink:0}
.pastilla{padding:7px 13px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;
  color:var(--suave);border:0;background:transparent;white-space:nowrap;transition:.12s;
  min-height:34px;display:inline-flex;align-items:center;justify-content:center}
.pastilla:hover{color:var(--texto);background:var(--panel)}
.pastilla.sel{background:var(--panel);color:var(--texto);box-shadow:inset 0 -3px 0 var(--acento)}
.pastilla.sel.v-ok{box-shadow:inset 0 -3px 0 var(--ok);color:var(--ok)}
.pastilla.sel.v-alerta{box-shadow:inset 0 -3px 0 var(--alerta);color:var(--alerta)}
.pastilla.sel.v-error{box-shadow:inset 0 -3px 0 var(--error);color:var(--error)}
/* Una columna por punto de revision; dos columnas solo si de verdad caben. */
.rejilla-check{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
  gap:0 26px;align-items:start}
.item-check{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--borde);min-width:0}
.item-check>span.nom{flex:1;font-size:13px;min-width:0}
@media(max-width:700px){
  .rejilla-check{grid-template-columns:1fr}
  .item-check{flex-direction:column;align-items:stretch;gap:7px}
  .pastillas{width:100%}
  .pastilla{flex:1}
}

/* ---------- Diagrama de danos ---------- */
.diagrama{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.vista-veh{background:var(--panel2);border:1px solid var(--borde);border-radius:10px;padding:8px;
  position:relative}
.vista-veh h4{font-family:var(--tipo-cuerpo);font-size:10.5px;color:var(--tenue);text-align:center;
  margin-bottom:4px;text-transform:uppercase;letter-spacing:1.1px;font-weight:700}
.lienzo-veh{position:relative;cursor:crosshair;width:100%}
.lienzo-veh svg{width:100%;height:auto;display:block}
.marca-dano{position:absolute;width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;
  border:2px solid #fff;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.paleta-dano{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip-dano{padding:5px 11px;border-radius:16px;font-size:12px;cursor:pointer;border:2px solid transparent;
  color:#fff;font-weight:600;opacity:.55}
.chip-dano.sel{opacity:1;border-color:var(--texto)}

/* ---------- Selector de severidad al marcar un dano ---------- */
.popover-sev{position:fixed;z-index:900;background:var(--panel);border:1px solid var(--borde);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:12px;display:flex;
  flex-direction:column;gap:6px;min-width:190px;color:var(--texto)}
.popover-sev-titulo{font-size:12px;font-weight:700;color:var(--tenue);margin:0 20px 4px 0}
.popover-sev-cerrar{position:absolute;top:6px;right:6px;background:none;border:none;cursor:pointer;
  color:var(--tenue);font-size:13px;line-height:1;padding:4px}
.popover-sev-atras{align-self:flex-start;background:none;border:none;cursor:pointer;color:var(--tenue);
  font-size:11px;padding:0 0 2px;margin:-2px 0 0}
.popover-sev-atras:hover{color:var(--texto)}
.popover-sev .btn{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left}
.popover-sev .btn .mini{color:inherit;opacity:.75;margin-left:8px}
.popover-sev .paleta-dano{max-width:260px}
.popover-sev .chip-dano{opacity:1}

/* ---------- Firma ---------- */
.firma-caja{border:2px dashed var(--borde);border-radius:10px;background:#fff;position:relative}
.firma-caja canvas{width:100%;height:170px;display:block;border-radius:8px;touch-action:none}
.firma-caja .pista-firma{position:absolute;bottom:8px;left:0;right:0;text-align:center;
  color:#9c9c96;font-size:12px;pointer-events:none}

/* ---------- Barras y graficos ---------- */
.barra-prog{height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
.barra-prog>div{height:100%;background:var(--acento);border-radius:3px}
.grafico-barras{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.gb-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:5px;min-width:0;height:100%}
/* La barra es grafito; el amarillo es solo el remate superior de 3px */
/* Tinte del 18% + remate solido: la barra se lee, el amarillo sigue siendo senal */
.gb-barra{width:100%;background:linear-gradient(180deg,rgba(245,194,30,.20),rgba(245,194,30,.03));
  border-top:3px solid var(--acento);border-radius:2px 2px 0 0;min-height:3px;transition:.3s}
.gb-col:hover .gb-barra{background:linear-gradient(180deg,rgba(245,194,30,.34),rgba(245,194,30,.06))}
.gb-et{font-size:10px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%}

/* ---------- Linea de tiempo ---------- */
.tiempo{position:relative;padding-left:22px}
.tiempo::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:2px;background:var(--borde)}
.tiempo-item{position:relative;padding-bottom:14px}
.tiempo-item::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--acento);border:2px solid var(--panel)}
.tiempo-item.pausa::before{background:var(--alerta)}
.tiempo-item.estado::before{background:var(--ok)}
.tiempo-item .cab{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700}
.tiempo-item .fec{font-size:11.5px;color:var(--tenue)}
.tiempo-item .txt{font-size:12.5px;color:var(--suave);margin-top:2px}

/* ---------- Impresion ---------- */
.doc-imp{background:#fff;color:#111;padding:26px;border-radius:8px;font-size:12.5px}
.doc-imp table{color:#111}
.doc-imp th{color:#555;border-bottom-color:#ccc}
.doc-imp td{border-bottom-color:#eee}
@media print{
  #lateral,#barra,.no-imp,#avisos{display:none!important}
  #contenido{padding:0}
  body,.doc-imp{background:#fff;color:#000}
  .velo{position:static;background:#fff;padding:0;display:block}
  .modal{max-width:100%;border:0;box-shadow:none}
  .modal-cab,.modal-pie{display:none}
  .modal-cuerpo{max-height:none;overflow:visible;padding:0}
}

/* ---------- Utilidades ---------- */
.mini{font-size:11.5px;color:var(--tenue)}
.suave{color:var(--suave)}
.cifra{font-family:var(--tipo-titular);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ok-txt{color:var(--ok)} .error-txt{color:var(--error)} .alerta-txt{color:var(--alerta)}
.acento-txt{color:var(--acento-txt)}
.mb0{margin-bottom:0} .mt10{margin-top:10px} .mt16{margin-top:16px}
.centro{text-align:center}
.negrita{font-weight:700}
.cargando{display:inline-block;width:15px;height:15px;border:2px solid var(--borde);
  border-top-color:var(--acento);border-radius:50%;animation:giro .7s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.buscador{position:relative}
.sugerencias{position:absolute;top:100%;left:0;right:0;background:var(--panel);
  border:1px solid var(--acento);border-radius:0 0 8px 8px;max-height:270px;overflow-y:auto;z-index:50}
.sugerencia{padding:8px 11px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--borde)}
.sugerencia:hover,.sugerencia.sel{background:var(--panel2);box-shadow:inset 3px 0 0 var(--acento)}
.sugerencia small{display:block;color:var(--tenue);font-size:11.5px}

@media(max-width:860px){
  #lateral{position:fixed;left:-100%;z-index:80;transition:.2s;box-shadow:var(--sombra)}
  #lateral.abierto{left:0}
  #menu-btn{display:inline-flex!important}
  #contenido{padding:12px}
  #barra h2{font-size:16px}
}
#menu-btn{display:none}

/* ---------- Despiece ---------- */
.despiece-tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:16px;cursor:pointer;transition:.12s;text-align:left}
.despiece-tarjeta:hover{border-color:var(--acento);transform:translateY(-1px)}
.despiece-tarjeta .tit{font-weight:700;font-size:14px;margin-top:2px}
.despiece-tarjeta .cant{color:var(--tenue);font-size:11.5px;margin-top:2px}
.despiece-tarjeta .ic{color:var(--acento-txt)}
.despiece-miniatura{width:100%;aspect-ratio:4/3;border-radius:8px;background:var(--panel2);
  border:1px solid var(--borde);overflow:hidden;margin-bottom:10px;display:flex;
  align-items:center;justify-content:center}
.despiece-miniatura img{width:100%;height:100%;object-fit:contain}
.despiece-viewer{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:16px;align-items:start}
.despiece-lienzo{position:relative;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;width:100%}
.despiece-lienzo img{display:block;width:100%;height:100%;object-fit:contain}
.despiece-punto{position:absolute;transform:translate(-50%,-50%);min-width:20px;height:20px;
  padding:0 4px;border-radius:10px;background:var(--acento);color:var(--sobre-acento);
  font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);border:2px solid var(--panel);
  transition:.12s;line-height:1}
.despiece-punto:hover{transform:translate(-50%,-50%) scale(1.18)}
.despiece-punto.activo{background:var(--info);color:#fff;transform:translate(-50%,-50%) scale(1.3);
  z-index:5;animation:despiece-pulso 1.1s ease-out 2}
.despiece-punto.sin-repuesto{background:var(--tenue)}
@keyframes despiece-pulso{0%{box-shadow:0 0 0 0 rgba(59,130,246,.55)}100%{box-shadow:0 0 0 12px rgba(59,130,246,0)}}
.despiece-lista .tabla-env{max-height:640px;overflow-y:auto}
.despiece-lista tbody tr.activo{box-shadow:inset 3px 0 0 var(--info);background:var(--panel2)}
.despiece-info{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:14px;margin-bottom:14px}
@media(max-width:900px){
  .despiece-viewer{grid-template-columns:1fr}
}