/* ==========================================================================
   Gestion de Taller - Electronica Automotriz
   ========================================================================== */

:root{
  --azul:#3b82f6; --azul-h:#2563eb; --azul-suave:rgba(59,130,246,.14);
  --verde:#22c55e; --ambar:#f59e0b; --rojo:#ef4444; --violeta:#8b5cf6;
  --cyan:#06b6d4; --naranja:#f97316; --rosa:#ec4899;

  --fondo:#0b1220; --fondo-2:#111a2b; --panel:#152136; --panel-2:#1b2942;
  --borde:#243352; --borde-suave:#1c2942;
  --texto:#e8eef8; --texto-2:#a6b4cc; --texto-3:#6e809e;
  --sombra:0 4px 20px rgba(0,0,0,.35);
  --sombra-alta:0 20px 60px rgba(0,0,0,.55);
  --radio:10px; --radio-chico:7px;
  --lateral-ancho:236px;
  --fuente:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',sans-serif;
  --mono:'Cascadia Mono','Consolas','SF Mono',Menlo,monospace;
}

html[data-tema="claro"]{
  --fondo:#f1f5f9; --fondo-2:#e8eef6; --panel:#ffffff; --panel-2:#f6f9fc;
  --borde:#d5dfec; --borde-suave:#e6edf5;
  --texto:#101c30; --texto-2:#4a5b76; --texto-3:#7d8da6;
  --sombra:0 2px 12px rgba(16,28,48,.10);
  --sombra-alta:0 20px 50px rgba(16,28,48,.18);
  --azul-suave:rgba(59,130,246,.10);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:14px/1.5 var(--fuente); -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{color:var(--azul); text-decoration:none}
a:hover{text-decoration:underline}
.oculto{display:none !important}
::selection{background:var(--azul);color:#fff}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--borde);border-radius:6px;border:2px solid var(--fondo)}
::-webkit-scrollbar-thumb:hover{background:var(--texto-3)}

/* ------------------------------------------------------------- carga --- */
.pantalla-carga{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;background:var(--fondo);z-index:900;color:var(--texto-2)
}
.chispa{
  width:48px;height:48px;border-radius:50%;
  border:3px solid var(--borde);border-top-color:var(--azul);
  animation:girar .8s linear infinite
}
@keyframes girar{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------- login --- */
/* Terminal sobre un volcado de memoria de ECU. Todo lo de aca esta acotado a
   .pantalla-login: .campo y .btn son clases que usa el sistema entero, y sin
   acotarlas se pisarian todos los formularios.
   El login queda siempre oscuro, tambien con el tema claro: una terminal de
   fosforo verde sobre fondo blanco no se lee. */
.pantalla-login{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:800;overflow:hidden;
  background:#050a07;color:#c9ffe2;
  font-family:var(--mono);
  --lg-verde:#39ff8a;
  --lg-dim:#279059;
  --lg-txt3:#4f8f6d;
  --lg-rojo:#ff3b3b;
}
.pantalla-login::after{
  content:"";position:absolute;left:50%;top:50%;
  width:760px;height:760px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(57,255,138,.13),transparent 62%);
  pointer-events:none;
}

/* Cuatro columnas: las lineas de un volcado tienen ancho fijo (unos 76
   caracteres) y con menos quedaban los costados cubiertos y el medio vacio.
   El hueco del centro es chico, solo lo justo para que el panel respire. */
.pantalla-login .volcado-wrap{
  position:absolute;inset:-6% -1%;display:flex;gap:14px;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 34% 40% at 50% 50%,
      transparent 0%,transparent 10%,#000 62%);
  mask-image:radial-gradient(ellipse 34% 40% at 50% 50%,
      transparent 0%,transparent 10%,#000 62%);
}
.pantalla-login .volcado{
  flex:1 1 0;margin:0;overflow:hidden;white-space:pre;
  font:11px/1.5 var(--mono);color:var(--lg-dim);opacity:.68;
  animation:lg-desplazar 100s linear infinite;
}
.pantalla-login .volcado.dos{animation-duration:145s;opacity:.5}
.pantalla-login .volcado.tres{animation-duration:118s;opacity:.6}
.pantalla-login .volcado.cuatro{animation-duration:162s;opacity:.44}
@keyframes lg-desplazar{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* La firma escondida: el ASCII de esa fila dice ZSPORT ECU TOOLS */
.pantalla-login .firma{
  color:var(--lg-verde);opacity:.95;text-shadow:0 0 8px rgba(57,255,138,.7);
}
.pantalla-login .vivo{animation:lg-latir 3.4s steps(1,end) infinite}
@keyframes lg-latir{0%,92%{color:var(--lg-dim)}93%,100%{color:var(--lg-verde)}}

.pantalla-login .crt{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.20) 2px 4px);
}
.pantalla-login .vineta{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 72% 72% at 50% 50%,
    transparent 38%,rgba(0,0,0,.78) 100%);
}

.pantalla-login .login-centro{
  position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:center;width:100%;max-width:400px;
}
/* Pozo oscuro detras del terminal y el panel. Con el volcado cubriendo toda
   la pantalla, las lineas del terminal quedaban ilegibles encima del
   hexadecimal; esto les devuelve el contraste sin achicar la cobertura. */
.pantalla-login .login-centro::before{
  content:"";position:absolute;inset:-46px -70px -30px;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(5,10,7,.95) 38%,rgba(5,10,7,.75) 62%,rgba(5,10,7,0) 82%);
  pointer-events:none;z-index:-1;
}
.pantalla-login .consola{
  width:100%;margin:0 0 14px;font-size:11.5px;color:var(--lg-dim);min-height:78px;
}
.pantalla-login .consola div{
  white-space:nowrap;overflow:hidden;width:0;
  animation:lg-tipear .5s steps(40,end) forwards;
}
.pantalla-login .consola div:nth-child(1){animation-delay:.15s}
.pantalla-login .consola div:nth-child(2){animation-delay:.7s}
.pantalla-login .consola div:nth-child(3){animation-delay:1.25s}
.pantalla-login .consola div:nth-child(4){animation-delay:1.8s;color:var(--lg-verde)}
@keyframes lg-tipear{to{width:100%}}
.pantalla-login .consola b{color:var(--lg-verde);font-weight:400}

.caja-login{
  position:relative;width:100%;max-width:400px;
  background:linear-gradient(180deg,rgba(10,20,16,.96),rgba(5,10,7,.98));
  border:1px solid var(--lg-dim);border-radius:4px;
  padding:26px 24px 22px;display:flex;flex-direction:column;gap:13px;
  box-shadow:0 0 0 1px rgba(57,255,138,.10),
             0 0 44px -6px rgba(57,255,138,.32),
             inset 0 0 60px rgba(57,255,138,.04);
  animation:lg-aparecer .45s ease-out 2.25s both;
}
@keyframes lg-aparecer{from{opacity:0;transform:translateY(8px)}}

/* esquinas de mira, como una consola de diagnostico */
.caja-login::before,.caja-login::after{
  content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--lg-verde);opacity:.65;
}
.caja-login::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.caja-login::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.login-marca{margin-bottom:4px;text-align:left}
.login-marca h1{
  margin:0;font-size:19px;letter-spacing:2px;font-weight:600;
  color:var(--lg-verde);text-shadow:0 0 12px rgba(57,255,138,.55);
}
.login-marca p{
  margin:3px 0 0;color:var(--lg-txt3);font-size:10.5px;
  text-transform:uppercase;letter-spacing:2.6px;
}
.pantalla-login .cursor{
  display:inline-block;width:9px;height:15px;background:var(--lg-verde);
  vertical-align:-2px;margin-left:3px;
  animation:lg-parpadear 1.1s steps(1,end) infinite;
}
@keyframes lg-parpadear{0%,50%{opacity:1}51%,100%{opacity:0}}

.pantalla-login .campo{display:flex;flex-direction:column;gap:5px}
.pantalla-login .campo>span{
  font-size:10.5px;color:var(--lg-txt3);letter-spacing:1.4px;
  text-transform:uppercase;
}
.pantalla-login .campo>span::before{content:"> ";color:var(--lg-dim)}
.pantalla-login .campo input{
  width:100%;background:#040a06;border:1px solid #163d28;border-radius:3px;
  color:var(--lg-verde);padding:10px 11px;
  font:13.5px var(--mono);letter-spacing:.5px;
}
.pantalla-login .campo input:focus{
  outline:none;border-color:var(--lg-verde);
  box-shadow:0 0 0 3px rgba(57,255,138,.13),0 0 18px -4px rgba(57,255,138,.6);
}
.pantalla-login .campo-clave{position:relative;display:flex}
.pantalla-login .btn-ojo{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--lg-txt3);cursor:pointer;font-size:14px;
}
.pantalla-login .btn{
  background:transparent;color:var(--lg-verde);
  border:1px solid var(--lg-verde);border-radius:3px;padding:11px;
  font:600 12.5px var(--mono);letter-spacing:2.5px;text-transform:uppercase;
  cursor:pointer;width:100%;margin-top:2px;
  transition:background .15s,box-shadow .15s;
}
.pantalla-login .btn:hover{
  background:rgba(57,255,138,.10);box-shadow:0 0 22px -4px rgba(57,255,138,.65);
}
.login-pie{
  margin:4px 0 0;text-align:left;color:var(--lg-txt3);
  font-size:10px;letter-spacing:.4px;
}

/* ------------------------------------------------------ acceso denegado --- */
/* Tres pulsos rojos y una sacudida corta, y se corta solo: un panel que queda
   parpadeando no deja escribir de nuevo la contrasena. */
.caja-login.denegado{
  border-color:var(--lg-rojo);
  animation:lg-sacudir .42s cubic-bezier(.36,.07,.19,.97),
            lg-alarma 1.5s ease-out;
}
@keyframes lg-sacudir{
  0%,100%{transform:translateX(0)}
  15%,45%,75%{transform:translateX(-7px)}
  30%,60%,90%{transform:translateX(7px)}
}
@keyframes lg-alarma{
  0%,22%,52%{box-shadow:0 0 0 1px rgba(255,59,59,.55),
             0 0 58px -4px rgba(255,59,59,.85),
             inset 0 0 70px rgba(255,59,59,.14)}
  12%,38%,70%{box-shadow:0 0 0 1px rgba(255,59,59,.12),
              0 0 18px -8px rgba(255,59,59,.3),
              inset 0 0 30px rgba(255,59,59,.03)}
  100%{box-shadow:0 0 0 1px rgba(57,255,138,.10),
       0 0 44px -6px rgba(57,255,138,.32),
       inset 0 0 60px rgba(57,255,138,.04)}
}
.caja-login.denegado .campo input{border-color:#5c1d1d}
.caja-login.denegado .login-marca h1{
  color:var(--lg-rojo);text-shadow:0 0 14px rgba(255,59,59,.7);
}
.caja-login.denegado .cursor{background:var(--lg-rojo)}

.login-error{
  margin:0;padding:9px 10px;border:1px solid rgba(255,59,59,.45);
  border-left-width:3px;border-radius:3px;background:rgba(255,59,59,.08);
  color:var(--lg-rojo);font-size:11px;line-height:1.5;letter-spacing:.3px;
}
.login-error b{
  display:block;font-weight:600;letter-spacing:2px;margin-bottom:2px;
  text-shadow:0 0 10px rgba(255,59,59,.6);
}

@media (prefers-reduced-motion:reduce){
  .pantalla-login .volcado,.pantalla-login .consola div,
  .caja-login,.pantalla-login .cursor,.pantalla-login .vivo,
  .caja-login.denegado{animation:none}
  .pantalla-login .consola div{width:100%}
}

/* -------------------------------------------------------------- shell --- */
#app{display:flex;height:100vh;overflow:hidden}
.lateral{
  width:var(--lateral-ancho);flex:0 0 var(--lateral-ancho);background:var(--fondo-2);
  border-right:1px solid var(--borde);display:flex;flex-direction:column;z-index:60
}
.lateral-marca{
  display:flex;align-items:center;gap:10px;padding:15px 14px;
  border-bottom:1px solid var(--borde-suave)
}
.marca-icono{font-size:22px}
.marca-texto{min-width:0;flex:1}
.marca-texto strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.marca-texto small{color:var(--texto-3);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.7px}

.menu{flex:1;overflow-y:auto;padding:10px 8px}
.menu-grupo{
  padding:13px 10px 5px;font-size:10px;text-transform:uppercase;letter-spacing:1.1px;
  color:var(--texto-3);font-weight:700
}
/* El encabezado de grupo se pliega, asi que es un boton: tiene que responder
   al teclado. Estas reglas le devuelven el aspecto que tenia como texto.
   Sin `display` propio en .menu-seccion, para que `hidden` siga funcionando. */
button.menu-grupo{
  display:flex;align-items:center;gap:6px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;
  font-size:10px;text-transform:uppercase;letter-spacing:1.1px;font-weight:700
}
button.menu-grupo:hover{color:var(--texto-2)}
button.menu-grupo:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
.menu-flecha{margin-left:auto;font-size:9px;opacity:.6;letter-spacing:0}
.menu a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radio-chico);
  color:var(--texto-2);font-size:13.5px;font-weight:500;text-decoration:none;
  margin-bottom:1px;transition:background .12s,color .12s
}
.menu a:hover{background:var(--panel);color:var(--texto);text-decoration:none}
.menu a.activo{background:var(--azul-suave);color:var(--azul);font-weight:600}
.menu a .ico{width:18px;text-align:center;font-size:14px;opacity:.9}
.menu a .pill{
  margin-left:auto;background:var(--panel-2);color:var(--texto-2);border-radius:20px;
  padding:1px 7px;font-size:10.5px;font-weight:700
}
.menu a.activo .pill{background:var(--azul);color:#fff}

.lateral-pie{
  padding:10px;border-top:1px solid var(--borde-suave);display:flex;
  align-items:center;gap:8px
}
.usuario-chip{flex:1;min-width:0;font-size:12px;line-height:1.3}
.usuario-chip strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario-chip small{color:var(--texto-3);text-transform:capitalize}

.principal{flex:1;display:flex;flex-direction:column;min-width:0}
.barra{
  height:54px;flex:0 0 54px;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--fondo-2);border-bottom:1px solid var(--borde);z-index:50
}
.buscador{position:relative;flex:1;max-width:560px}
.buscador input{
  width:100%;height:34px;padding:0 12px;border-radius:var(--radio-chico);
  border:1px solid var(--borde);background:var(--panel);color:var(--texto);font-size:13px
}
.buscador input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-suave)}
.barra-acciones{display:flex;align-items:center;gap:8px;margin-left:auto}

.resultados{
  position:absolute;top:40px;left:0;right:0;background:var(--panel);
  border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra-alta);
  max-height:65vh;overflow-y:auto;z-index:70
}
.resultado{
  display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--borde-suave)
}
.resultado:last-child{border-bottom:none}
.resultado:hover,.resultado.sel{background:var(--panel-2)}
.resultado .r-tipo{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;padding:2px 6px;
  border-radius:5px;background:var(--panel-2);color:var(--texto-3);font-weight:700;
  flex:0 0 auto;min-width:64px;text-align:center
}
.resultado .r-txt{min-width:0;flex:1}
.resultado .r-txt strong{display:block;font-size:13px}
.resultado .r-txt small{color:var(--texto-3);font-size:11.5px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vista{flex:1;overflow-y:auto;padding:18px;scroll-behavior:smooth}

/* ------------------------------------------------------------ titulos --- */
.encabezado{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px
}
.encabezado h1{margin:0;font-size:21px;letter-spacing:-.3px}
.encabezado .sub{margin:2px 0 0;color:var(--texto-3);font-size:12.5px}
.encabezado .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

h2.seccion{
  font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:var(--texto-3);
  margin:22px 0 10px;font-weight:700
}
h2.seccion:first-child{margin-top:0}

/* ------------------------------------------------------------ botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 14px;border-radius:var(--radio-chico);border:1px solid var(--borde);
  background:var(--panel);color:var(--texto);font:600 13px var(--fuente);cursor:pointer;
  transition:background .12s,border-color .12s,transform .05s;white-space:nowrap
}
.btn:hover{background:var(--panel-2);border-color:var(--texto-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primario{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-primario:hover{background:var(--azul-h);border-color:var(--azul-h)}
.btn-verde{background:var(--verde);border-color:var(--verde);color:#06280f}
.btn-verde:hover{filter:brightness(1.08)}
.btn-rojo{background:transparent;border-color:var(--rojo);color:var(--rojo)}
.btn-rojo:hover{background:var(--rojo);color:#fff}
.btn-sutil{background:transparent;border-color:transparent;color:var(--texto-2)}
.btn-sutil:hover{background:var(--panel);color:var(--texto)}
.btn-chico{height:28px;padding:0 10px;font-size:12px}
.btn-ancho{width:100%}
.btn-icono{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radio-chico);border:1px solid transparent;background:transparent;
  color:var(--texto-2);cursor:pointer;font-size:16px
}
.btn-icono:hover{background:var(--panel);color:var(--texto)}
.btn-grupo{display:inline-flex;border:1px solid var(--borde);border-radius:var(--radio-chico);
  overflow:hidden}
.btn-grupo button{
  height:30px;padding:0 12px;border:none;background:var(--panel);color:var(--texto-2);
  font:600 12px var(--fuente);cursor:pointer;border-right:1px solid var(--borde)
}
.btn-grupo button:last-child{border-right:none}
.btn-grupo button.activo{background:var(--azul);color:#fff}

/* ------------------------------------------------------------- panels --- */
.panel{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden
}
.panel-cab{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--borde-suave);background:var(--panel-2)
}
.panel-cab h3{margin:0;font-size:13.5px;font-weight:700}
/* Un <summary> con display:flex pierde la flechita que avisa que se despliega,
   asi que el panel parece un titulo comun y nadie lo abre. Se le pone una. */
summary.panel-cab{list-style:none}
summary.panel-cab::-webkit-details-marker{display:none}
summary.panel-cab::after{
  content:'\25BE';margin-left:auto;color:var(--texto-3);font-size:11px;
  transition:transform .15s
}
details[open] > summary.panel-cab::after{transform:rotate(180deg)}
summary.panel-cab:hover{background:var(--panel-3,var(--panel-2))}
.panel-cab .acciones{margin-left:auto;display:flex;gap:6px}
.panel-cuerpo{padding:14px}
.panel-vacio{padding:34px 16px;text-align:center;color:var(--texto-3);font-size:13px}
.panel-vacio .grande{font-size:32px;display:block;margin-bottom:8px;opacity:.5}

/* Sin esto los items de flex/grid no bajan del ancho de su contenido (min-width:auto)
   y una tabla ancha empuja toda la pagina en lugar de scrollear dentro del panel. */
.grid>*,.pila>*,.panel{min-width:0}

.grid{display:grid;gap:14px}
.g1{grid-template-columns:minmax(0,1fr)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}

/* --------------------------------------------------------------- KPIs --- */
.kpi{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:13px 15px;position:relative;overflow:hidden
}
.kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--azul)}
.kpi.verde::after{background:var(--verde)}
.kpi.ambar::after{background:var(--ambar)}
.kpi.rojo::after{background:var(--rojo)}
.kpi.violeta::after{background:var(--violeta)}
.kpi .k-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--texto-3);
  font-weight:700}
.kpi .k-val{font-size:22px;font-weight:700;margin-top:3px;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:11.5px;color:var(--texto-3);margin-top:2px}
.k-sube{color:var(--verde)} .k-baja{color:var(--rojo)}

/* ------------------------------------------------------------- tablas --- */
.tabla-wrap{overflow-x:auto}
table.tabla{width:100%;border-collapse:collapse;font-size:13px}
table.tabla th{
  text-align:left;padding:9px 12px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.7px;color:var(--texto-3);font-weight:700;background:var(--panel-2);
  border-bottom:1px solid var(--borde);white-space:nowrap;position:sticky;top:0;z-index:2
}
table.tabla td{padding:9px 12px;border-bottom:1px solid var(--borde-suave);
  vertical-align:middle}
table.tabla tbody tr:hover{background:var(--panel-2)}
table.tabla tbody tr.clickeable{cursor:pointer}
table.tabla tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* piezas atomicas: antes de partirse en varias lineas, que la tabla scrollee */
table.tabla td .patente,table.tabla td .mono,table.tabla td .badge,
table.tabla td .dtc,table.tabla td .chip{white-space:nowrap}
.mono{font-family:var(--mono);font-size:12.5px}
.apretado td,.apretado th{padding:6px 10px}
.col-acc{width:1%;white-space:nowrap;text-align:right}

/* ------------------------------------------------------------ badges ---- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:11px;font-weight:700;white-space:nowrap;
  background:var(--panel-2);color:var(--texto-2);border:1px solid var(--borde)
}
.badge .punto{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-verde{background:rgba(34,197,94,.14);color:#4ade80;border-color:rgba(34,197,94,.3)}
.badge-ambar{background:rgba(245,158,11,.14);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.badge-rojo{background:rgba(239,68,68,.14);color:#f87171;border-color:rgba(239,68,68,.3)}
.badge-azul{background:rgba(59,130,246,.14);color:#60a5fa;border-color:rgba(59,130,246,.3)}
.badge-gris{background:var(--panel-2);color:var(--texto-3)}
html[data-tema="claro"] .badge-verde{color:#15803d}
html[data-tema="claro"] .badge-ambar{color:#b45309}
html[data-tema="claro"] .badge-rojo{color:#b91c1c}
html[data-tema="claro"] .badge-azul{color:#1d4ed8}

.patente{
  display:inline-block;font-family:var(--mono);font-weight:700;letter-spacing:1.2px;
  background:var(--panel-2);border:1px solid var(--borde);border-radius:5px;
  padding:2px 8px;font-size:12.5px
}
.dtc{
  display:inline-block;font-family:var(--mono);font-weight:700;padding:1px 7px;
  border-radius:5px;font-size:12px;background:rgba(239,68,68,.14);color:#f87171;
  border:1px solid rgba(239,68,68,.28)
}
html[data-tema="claro"] .dtc{color:#b91c1c}

/* ------------------------------------------------------------ kanban ---- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.kb-col{
  flex:0 0 268px;background:var(--fondo-2);border:1px solid var(--borde);
  border-radius:var(--radio);display:flex;flex-direction:column;max-height:calc(100vh - 170px)
}
.kb-col.sobre{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-suave)}
.kb-cab{
  padding:10px 12px;border-bottom:1px solid var(--borde-suave);
  display:flex;align-items:center;gap:8px;position:sticky;top:0;background:var(--fondo-2);
  border-radius:var(--radio) var(--radio) 0 0;z-index:2
}
.kb-cab .barra-color{width:3px;height:16px;border-radius:2px}
.kb-cab strong{font-size:12.5px;flex:1}
.kb-cab .cant{background:var(--panel-2);border-radius:20px;padding:1px 8px;font-size:11px;
  font-weight:700;color:var(--texto-2)}
.kb-lista{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;flex:1;
  min-height:60px}
.kb-tarjeta{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio-chico);
  padding:10px;cursor:grab;transition:border-color .12s,transform .08s;position:relative
}
.kb-tarjeta:hover{border-color:var(--azul)}
.kb-tarjeta:active{cursor:grabbing}
.kb-tarjeta.arrastrando{opacity:.4;transform:scale(.97)}
.kb-tarjeta .t-sup{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.kb-tarjeta .t-num{font-family:var(--mono);font-size:11.5px;color:var(--texto-3);font-weight:700}
.kb-tarjeta .t-prio{margin-left:auto;width:7px;height:7px;border-radius:50%}
.kb-tarjeta .t-veh{font-size:13px;font-weight:600;margin-bottom:2px}
.kb-tarjeta .t-cli{font-size:11.5px;color:var(--texto-3);display:flex;
  align-items:center;gap:6px;min-width:0}
/* Si el nombre es largo se recorta el nombre, nunca el telefono: el telefono
   es justamente el dato que se vino a buscar a la tarjeta. */
.kb-tarjeta .t-cli-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0}
.kb-tarjeta .t-cli-tel{flex:none;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.kb-tarjeta .t-pie{display:flex;align-items:center;gap:6px;margin-top:7px;
  padding-top:7px;border-top:1px solid var(--borde-suave);font-size:11px;color:var(--texto-3)}
.kb-tarjeta .t-total{margin-left:auto;font-weight:700;color:var(--texto-2);
  font-variant-numeric:tabular-nums}
.kb-tarjeta .cintas{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.cinta{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:1px 5px;border-radius:4px;background:var(--panel-2);color:var(--texto-3)}
.cinta.gar{background:rgba(239,68,68,.16);color:#f87171}
.cinta.mod{background:rgba(139,92,246,.16);color:#a78bfa}
.cinta.banco{background:rgba(6,182,212,.16);color:#22d3ee}

/* ---------------------------------------------------------- formularios -- */
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>span{font-size:11.5px;font-weight:600;color:var(--texto-2)}
.campo>span .req{color:var(--rojo)}
.campo .pista{font-size:10.5px;color:var(--texto-3);font-weight:400}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],
input[type=date],input[type=time],input[type=search],input[type=color],select,textarea{
  width:100%;height:34px;padding:0 10px;border-radius:var(--radio-chico);
  border:1px solid var(--borde);background:var(--fondo-2);color:var(--texto);
  font:14px var(--fuente);transition:border-color .12s,box-shadow .12s
}
textarea{height:auto;min-height:72px;padding:8px 10px;resize:vertical;line-height:1.5}
select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236e809e' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:28px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px var(--azul-suave)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
input[type=color]{padding:2px;height:34px;cursor:pointer}
input.invalido{border-color:var(--rojo)}
input::placeholder,textarea::placeholder{color:var(--texto-3)}

.check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;
  padding:6px 0;user-select:none}
.check input[type=checkbox]{width:16px;height:16px;accent-color:var(--azul);cursor:pointer;
  flex:0 0 auto}

.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.form-grid .w2{grid-column:span 2}
.form-grid .w3{grid-column:span 3}
.form-grupo{margin-bottom:6px}
.form-grupo>legend,.form-grupo>.titulo{
  font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--texto-3);
  font-weight:700;padding:0;margin:0 0 10px
}
fieldset{border:none;padding:0;margin:0 0 18px}

/* buscador de referencia */
.ref{position:relative}
.ref-lista{
  position:absolute;top:37px;left:0;right:0;background:var(--panel);
  border:1px solid var(--borde);border-radius:var(--radio-chico);
  box-shadow:var(--sombra-alta);max-height:250px;overflow-y:auto;z-index:120
}
.ref-item{padding:7px 10px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--borde-suave)}
.ref-item:last-child{border-bottom:none}
.ref-item:hover,.ref-item.sel{background:var(--azul-suave)}
.ref-item small{display:block;color:var(--texto-3);font-size:11px}

/* ------------------------------------------------------------- modal ---- */
.modal-fondo{
  position:fixed;inset:0;background:rgba(3,7,18,.72);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;
  z-index:200;overflow-y:auto;animation:aparecer .14s ease
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  box-shadow:var(--sombra-alta);width:100%;max-width:720px;margin:auto;
  animation:subir .18s cubic-bezier(.2,.8,.3,1)
}
@keyframes subir{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal-xl{max-width:1080px}
.modal-lg{max-width:900px}
.modal-sm{max-width:440px}
.modal-cab{
  display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--borde-suave)
}
.modal-cab h3{margin:0;font-size:16px;flex:1}
.modal-cab .sub{font-size:12px;color:var(--texto-3);font-weight:400;margin-top:2px}
.modal-cuerpo{padding:18px;max-height:calc(100vh - 220px);overflow-y:auto}
.modal-pie{
  display:flex;gap:9px;justify-content:flex-end;padding:13px 18px;
  border-top:1px solid var(--borde-suave);background:var(--panel-2);
  border-radius:0 0 14px 14px;flex-wrap:wrap
}
.modal-pie .izq{margin-right:auto}

/* ------------------------------------------------------------ avisos ---- */
.avisos{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;
  gap:9px;z-index:400;max-width:380px}
.aviso{
  background:var(--panel);border:1px solid var(--borde);border-left:3px solid var(--azul);
  border-radius:var(--radio-chico);padding:11px 14px;box-shadow:var(--sombra-alta);
  font-size:13px;animation:entrar .2s cubic-bezier(.2,.8,.3,1);display:flex;gap:10px;
  align-items:flex-start
}
@keyframes entrar{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.aviso.ok{border-left-color:var(--verde)}
.aviso.error{border-left-color:var(--rojo)}
.aviso.alerta{border-left-color:var(--ambar)}
.aviso .a-txt{flex:1;min-width:0}
.aviso .a-txt strong{display:block;margin-bottom:2px}
.aviso .cerrar{background:none;border:none;color:var(--texto-3);cursor:pointer;
  font-size:16px;line-height:1;padding:0}

.alerta{
  padding:10px 13px;border-radius:var(--radio-chico);font-size:13px;
  border:1px solid var(--borde);background:var(--panel-2)
}
.alerta-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:#fca5a5}
.alerta-ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.35);color:#86efac}
.alerta-info{background:var(--azul-suave);border-color:rgba(59,130,246,.35)}
.alerta-alerta{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);color:#fcd34d}
html[data-tema="claro"] .alerta-error{color:#991b1b}
html[data-tema="claro"] .alerta-ok{color:#166534}
html[data-tema="claro"] .alerta-alerta{color:#92400e}

/* -------------------------------------------------------------- varios -- */
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filtros .campo{min-width:140px}
.filtros input,.filtros select{height:32px}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--borde);margin-bottom:16px;
  overflow-x:auto}
.tabs button{
  background:none;border:none;border-bottom:2px solid transparent;padding:9px 14px;
  color:var(--texto-3);font:600 13px var(--fuente);cursor:pointer;white-space:nowrap
}
.tabs button:hover{color:var(--texto)}
.tabs button.activo{color:var(--azul);border-bottom-color:var(--azul)}

.paginador{display:flex;align-items:center;gap:10px;justify-content:center;
  padding:12px;color:var(--texto-3);font-size:12.5px}

.lista-datos{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px}
.lista-datos dt{color:var(--texto-3);font-size:12px}
.lista-datos dd{margin:0;word-break:break-word}

.linea-tiempo{position:relative;padding-left:20px}
.linea-tiempo::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:var(--borde)}
.lt-item{position:relative;padding-bottom:14px}
.lt-item::before{content:'';position:absolute;left:-18px;top:5px;width:9px;height:9px;
  border-radius:50%;background:var(--azul);border:2px solid var(--panel)}
.lt-item .lt-meta{font-size:11px;color:var(--texto-3);margin-bottom:2px}
.lt-item .lt-txt{font-size:13px}

.barra-prog{height:6px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.barra-prog i{display:block;height:100%;background:var(--azul);border-radius:6px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;
  background:var(--panel-2);border:1px solid var(--borde);font-size:12px}
.chip button{background:none;border:none;color:var(--texto-3);cursor:pointer;
  padding:0;font-size:13px;line-height:1}

.grafico-barras{display:flex;flex-direction:column;gap:8px}
.gb-fila{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:center;
  font-size:12.5px}
.gb-fila .gb-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--texto-2)}
.gb-fila .gb-barra{height:16px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.gb-fila .gb-barra i{display:block;height:100%;background:var(--azul);border-radius:4px;
  transition:width .3s}
.gb-fila .gb-val{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

.pila{display:flex;flex-direction:column;gap:12px}
.fila{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fila-sep{justify-content:space-between}
.der{margin-left:auto}
.t3{color:var(--texto-3)}
.t2{color:var(--texto-2)}
.chico{font-size:11.5px}
.b{font-weight:700}
.verde{color:var(--verde)} .rojo{color:var(--rojo)} .ambar{color:var(--ambar)}
.azul{color:var(--azul)}
.nowrap{white-space:nowrap}
.solo-movil{display:none}
.centrado{text-align:center}

/* items editables de la OT / presupuesto */
.items-tabla input,.items-tabla select{height:30px;font-size:13px;background:transparent;
  border-color:transparent}
.items-tabla input:hover,.items-tabla select:hover{border-color:var(--borde)}
.items-tabla input:focus,.items-tabla select:focus{background:var(--fondo-2)}
.items-tabla td{padding:3px 6px}
.items-tabla .col-cant{width:78px}
.items-tabla .col-precio{width:130px}
.items-tabla .col-pct{width:70px}
.items-tabla .col-sub{width:130px}
.totales{display:grid;grid-template-columns:auto auto;gap:5px 18px;justify-content:end;
  font-size:13.5px;padding:12px 14px}
.totales .tt-lbl{color:var(--texto-3);text-align:right}
.totales .tt-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.totales .grande{font-size:19px;font-weight:700;padding-top:6px;border-top:1px solid var(--borde)}
.totales .grande.tt-lbl{border-top:1px solid var(--borde)}

/* ------------------------------------------------------------ responsive */
@media (max-width:1200px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2-1,.g-1-2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .g3,.g2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid .w3{grid-column:span 2}
}
@media (max-width:760px){
  .solo-movil{display:inline-flex}
  .lateral{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:var(--sombra-alta)}
  .lateral.abierto{transform:none}
  .vista{padding:12px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .w2,.form-grid .w3{grid-column:span 1}
  .encabezado h1{font-size:18px}
  .barra{padding:0 10px;gap:8px}
  .barra-acciones .btn{padding:0 10px}
  .avisos{left:12px;right:12px;bottom:12px;max-width:none}
  .modal-cuerpo{max-height:calc(100vh - 180px)}
  .kb-col{flex-basis:82vw;max-height:none}
  /* en el celular la grilla scrollea de costado en vez de apretar las columnas */
  table.tabla{min-width:600px}
  .filtros .campo{min-width:calc(50% - 5px);flex:1}
  .encabezado .acciones{width:100%}
  .encabezado .acciones .btn{flex:1}
  /* los filtros a lo ancho: con dos por fila el texto no entra */
  .filtros .campo{min-width:100%;flex:1 1 100%}
  .filtros .campo input,.filtros .campo select{width:100%;min-width:0}
  /* nada puede empujar la pagina de costado */
  .panel-cab{flex-wrap:wrap;gap:6px;padding:10px 12px}
  .panel-cab h3{min-width:0;overflow-wrap:anywhere}
  /* la agenda: los dias uno abajo del otro en vez de 7 columnas apretadas */
  .agenda-semana{grid-template-columns:1fr!important}
  .agenda-dia{min-width:0}
  .panel-cab .acciones{margin-left:auto;flex-wrap:wrap}
  .panel-cab .acciones .btn{font-size:11px;padding:0 8px}
  .totales{grid-template-columns:1fr auto}
  .lista-datos{grid-template-columns:1fr}
  .lista-datos dt{margin-top:8px}
}

/* --------------------------- lineas de service / reposicion / listas ----
   En la PC van en columnas; en el celular se apilan, porque con 375px de
   ancho las columnas fijas se aplastan y el texto queda ilegible. */
.srv-linea{display:flex;gap:12px;padding:9px 14px;align-items:baseline;
  border-top:1px solid var(--borde-suave);border-left:3px solid transparent}
.srv-linea.vencido{border-left-color:var(--rojo)}
.srv-linea.proximo{border-left-color:var(--ambar)}
.srv-que{flex:0 0 155px;min-width:0}
.srv-espec{flex:1;min-width:0;overflow-wrap:anywhere}
.srv-codigo{flex:0 0 210px;min-width:0;overflow-wrap:anywhere}
.srv-estado{flex:0 0 118px;text-align:right}

@media (max-width:820px){
  .srv-linea{flex-wrap:wrap;gap:4px 10px;padding:11px 12px}
  .srv-que{flex:1 1 100%;font-weight:600}
  .srv-espec{flex:1 1 100%}
  .srv-codigo{flex:1 1 auto;text-align:left}
  .srv-estado{flex:0 0 auto;text-align:left;margin-left:auto}
  .srv-estado .chico{display:inline}
}

/* ------------------------------------------------------------ impresion - */
.hoja{display:none}
@media print{
  /* la etiqueta va sola, chica, para cortarla y pegarla en el parabrisas */
  .hoja.etiqueta-service{padding:4mm!important;width:auto}
  .hoja.etiqueta-service table{page-break-inside:avoid}

  @page{size:A4;margin:12mm}
  body{overflow:visible;background:#fff;color:#000}
  #app,#modales,#avisos,.pantalla-login,.pantalla-carga{display:none !important}
  .hoja{display:block !important;font:11.5pt/1.45 'Segoe UI',sans-serif;color:#000}
  .hoja *{color:#000 !important;background:transparent !important;
    box-shadow:none !important}
  .hoja h1{font-size:18pt;margin:0 0 2mm}
  .hoja h2{font-size:12pt;margin:5mm 0 2mm;border-bottom:1px solid #999;padding-bottom:1mm}
  .hoja table{width:100%;border-collapse:collapse;font-size:10pt}
  .hoja th{background:#eee !important;-webkit-print-color-adjust:exact;
    print-color-adjust:exact;text-align:left;padding:2mm;border:1px solid #999;
    font-size:9pt;text-transform:uppercase}
  .hoja td{padding:2mm;border:1px solid #bbb;vertical-align:top}
  .hoja .doc-cab{display:flex;justify-content:space-between;gap:8mm;
    border-bottom:2px solid #000;padding-bottom:3mm;margin-bottom:4mm}
  .hoja .doc-caja{border:1px solid #999;padding:3mm;margin-bottom:3mm}
  .hoja .doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2mm 6mm;font-size:10pt}
  .hoja .doc-tot{margin-left:auto;width:70mm;font-size:11pt}
  .hoja .doc-tot td{border:none;padding:1mm 2mm}
  .hoja .doc-tot .fin{border-top:1.5px solid #000;font-weight:700;font-size:13pt}
  .hoja .doc-pie{margin-top:6mm;font-size:8.5pt;color:#444 !important;
    border-top:1px solid #ccc;padding-top:2mm}
  .hoja .firmas{display:flex;gap:14mm;margin-top:14mm}
  .hoja .firma{flex:1;border-top:1px solid #000;padding-top:1.5mm;font-size:9pt;
    text-align:center}
  .hoja .num{text-align:right}
  .hoja .salto{page-break-before:always}
  .hoja .letra{border:2px solid #000;width:16mm;height:16mm;display:flex;
    align-items:center;justify-content:center;font-size:24pt;font-weight:700;margin:0 auto}
  .hoja .etiqueta{width:62mm;border:1px solid #000;padding:3mm;font-size:9pt}
}

.k-nota{margin-top:3px;font-size:11px;color:var(--texto-3);letter-spacing:.2px}


/* Telefonos que se tocan para abrir WhatsApp */
.tel-wa a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--borde); }
.tel-wa a:hover { color: var(--verde, #22c55e); border-bottom-color: currentColor; }
.tel-wa .tel-llamar { margin-left: 6px; border: 0; font-size: 13px; }


/* Ver la contrasena al escribirla: en el celular se escribe a ciegas */
.campo-clave { position: relative; display: flex; align-items: center; }
.campo-clave input { flex: 1; padding-right: 40px; }
.btn-ojo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 16px;
  color: var(--t3); padding: 6px 8px; line-height: 1; border-radius: 6px;
}
.btn-ojo:hover { color: var(--texto); background: var(--panel-2); }
.btn-ojo.viendo { color: var(--azul, #3b82f6); }


/* Arrastrar un archivo sobre un recuadro */
.zona-soltar {
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  transition: background .12s, border-color .12s;
}
.zona-soltar:hover { border-color: var(--texto-3); }
.zona-soltar.soltando {
  border-color: var(--azul);
  border-style: solid;
  background: var(--azul-suave);
}
/* Sin esto, pasar por encima de un hijo dispara dragleave y titila */
.zona-soltar.soltando * { pointer-events: none; }
.zona-soltar.zona-lista { border-color: var(--verde); border-style: solid; }
.pista-soltar { font-size: 12px; color: var(--texto-3); font-weight: 400; }


/* Puntito rojo del boton de novedades */
#btn-novedades { position: relative; }
.punto-nuevo {
  position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 0 2px var(--fondo);
}
.punto-nuevo.oculto { display: none; }


/* ------------------------------------------ Configuracion: submenu ------
   Las 19 secciones en una barra horizontal ocupaban 1988 px en 1266
   disponibles: un tercio quedaba afuera. En columna entran todas y ademas
   se pueden agrupar, como el menu principal. */
.cfg-cuerpo {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.cfg-nav {
  position: sticky;
  top: 12px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 6px;
}
.cfg-grupo + .cfg-grupo { margin-top: 12px; }
.cfg-grupo-tit {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 9px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--texto-3);
}
.cfg-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 1px;
  border: 0; border-radius: var(--radio-chico);
  background: transparent; color: var(--texto-2);
  font: inherit; font-size: 13.5px; cursor: pointer;
  position: relative;
}
.cfg-item:hover { background: var(--panel-2); color: var(--texto); }
.cfg-item.activo {
  background: var(--azul-suave); color: var(--texto); font-weight: 600;
}
.cfg-item.activo::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--azul);
}
.cfg-item .punto-nuevo { position: static; margin-left: auto; }

/* En pantalla angosta las dos columnas no entran: la lista pasa arriba, en
   dos por fila para que no quede una tira larguisima, y el contenido debajo. */
@media (max-width: 820px) {
  .cfg-cuerpo { grid-template-columns: 1fr; }
  .cfg-nav { position: static; }
  .cfg-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .cfg-grupo-tit { grid-column: 1 / -1; }
  .cfg-item { padding: 11px 10px; font-size: 14px; }
}
@media (max-width: 460px) {
  .cfg-grupo { grid-template-columns: 1fr; }
}

/* --- Ordenar tablas por columna ------------------------------------- */
table.tabla th.ordenable{cursor:pointer;user-select:none}
table.tabla th.ordenable:hover{background:var(--borde-suave);color:var(--azul)}
table.tabla th.ordenado{color:var(--azul)}
table.tabla th .orden-flecha{font-size:10px;opacity:.85}

/* =====================================================================
   IDENTIDAD: INSTRUMENTO DE DIAGNOSTICO
   =====================================================================
   Esto no es un panel de administracion generico: es la herramienta que
   se mira ocho horas por dia para leer numeros de parte, DTC, versiones
   de software y VIN. El lenguaje visual sale de ahi.

   Tres decisiones, todas con motivo funcional:

   1. Fondo grafito neutro en vez de azul marino. El azul saturado cansa
      la vista en jornadas largas, y ademas apaga los colores de estado
      justo cuando son lo que hay que ver rapido.

   2. Cifras tabulares y monoespaciada en todo dato tecnico. En una
      tipografia proporcional el 0 y la O se confunden, y en un numero de
      parte eso es un error caro. Ademas las columnas de importes quedan
      alineadas por posicion, que es como se comparan de un vistazo.

   3. Radios de 5px en vez de 10. Un instrumento de medicion no tiene
      esquinas de aplicacion. Es coherente con lo que el taller vende.

   Los nombres de las variables no cambian: hay 66 usos de --borde y 55
   de --panel-2 repartidos en 53 archivos. Solo cambian los valores.
   ===================================================================== */

:root{
  /* --- Interaccion. Un azul de lectura de instrumento, menos saturado
         que el anterior para poder mirarlo todo el dia. --- */
  --azul:#4d9fd6; --azul-h:#68b3e4; --azul-suave:rgba(77,159,214,.15);

  /* --- Estado. Vocabulario de testigo de tablero: listo, atencion,
         falla. Se usan SOLO para significar estado, nunca para adornar. --- */
  --verde:#4ea766;      /* listo, aprobado, cobrado */
  --ambar:#d99a2b;      /* en proceso, pendiente, atencion */
  --rojo:#d95757;       /* falla, vencido, rechazado */

  /* Quedan definidos porque alguna vista los referencia, pero fuera del
     sistema de estado: si todo es un color, ningun color avisa nada. */
  --violeta:#8f7ad6; --cyan:#4fb3c4; --naranja:#d4823f; --rosa:#c96f9e;

  /* --- Superficies. Grafito neutro con una pizca de calido. --- */
  --fondo:#12141a; --fondo-2:#171a21;
  --panel:#1c1f27; --panel-2:#232733;
  --borde:#333a48; --borde-suave:#262b36;

  --texto:#e6e8ee; --texto-2:#a4abb9; --texto-3:#6e7687;

  --sombra:0 2px 12px rgba(0,0,0,.4);
  --sombra-alta:0 16px 48px rgba(0,0,0,.6);

  --radio:5px; --radio-chico:3px;

  --mono:'Cascadia Mono','JetBrains Mono','SF Mono',Consolas,Menlo,monospace;
}

/* --- Dato tecnico -----------------------------------------------------
   Todo lo que se lee caracter por caracter va en monoespaciada con
   cifras de ancho fijo. Es la firma de la interfaz y a la vez lo que
   menos errores de lectura produce. */
.mono,
.patente,
table.tabla td.num,
table.tabla th.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1,'zero' 1;   /* cero barrado: 0 no es O */
  letter-spacing:.2px;
}

/* Los importes y cantidades se comparan por posicion, asi que las
   columnas numericas se alinean a la derecha con ancho de digito fijo. */
table.tabla td.num,
table.tabla th.num{ text-align:right; }

/* La patente es el identificador que mas se busca de un vistazo:
   merece leerse como una chapa, no como texto corrido. */
.patente{
  display:inline-block;
  padding:1px 6px;
  border:1px solid var(--borde);
  border-radius:var(--radio-chico);
  background:var(--fondo-2);
  font-weight:600;
  letter-spacing:1.2px;
}

/* --- Estado -----------------------------------------------------------
   Un testigo, no una pastilla. Barra de color a la izquierda: se
   distingue por posicion y forma ademas de por color, asi que tambien
   funciona para quien no distingue bien el rojo del verde. */
.badge{
  border-radius:var(--radio-chico);
  border-left-width:3px;
  border-left-style:solid;
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
}
.badge-verde{ border-left-color:var(--verde); }
.badge-ambar{ border-left-color:var(--ambar); }
.badge-rojo { border-left-color:var(--rojo);  }
.badge-azul { border-left-color:var(--azul);  }
.badge-gris { border-left-color:var(--texto-3); }

/* --- Tablas -----------------------------------------------------------
   Encabezado mas tranquilo: el que grita tiene que ser el dato, no la
   etiqueta que lo rotula. */
table.tabla th{
  letter-spacing:.9px;
  color:var(--texto-3);
  font-weight:600;
}
table.tabla tbody tr:hover{ background:var(--panel-2); }

/* Fila activa del ordenamiento: se marca la columna, no toda la tabla. */
table.tabla th.ordenado{ color:var(--azul); }

/* --- Foco visible -----------------------------------------------------
   Se navega mucho con teclado cuando se carga una OT con el auto
   adelante. El foco tiene que verse sin buscarlo. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
  border-radius:var(--radio-chico);
}

/* --- Movimiento reducido --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --- Estado, correccion -----------------------------------------------
   Las clases .badge-* tenian los colores escritos a mano, asi que se
   salteaban las variables y quedaban fuera del sistema. Ademas rellenas
   y saturadas le competian al dato: en una tabla el que tiene que gritar
   es el numero de parte, no la etiqueta que lo acompana.

   Quedan como testigo: barra de color a la izquierda y texto teñido,
   sobre el mismo fondo del panel. Se distinguen por posicion y forma
   ademas de por color, asi que tambien sirven a quien confunde rojo y
   verde. */
.badge{
  background:transparent;
  border:1px solid var(--borde-suave);
  border-left:4px solid var(--texto-3);
  border-radius:var(--radio-chico);
  color:var(--texto-2);
  font-weight:600;
  padding:2px 8px;
}
.badge-verde{ border-left-color:var(--verde); color:var(--verde);
              background:color-mix(in srgb, var(--verde) 14%, transparent); }
.badge-ambar{ border-left-color:var(--ambar); color:var(--ambar);
              background:color-mix(in srgb, var(--ambar) 15%, transparent); }
.badge-rojo { border-left-color:var(--rojo);  color:var(--rojo);
              background:color-mix(in srgb, var(--rojo) 16%, transparent); }
.badge-azul { border-left-color:var(--azul);  color:var(--azul);
              background:color-mix(in srgb, var(--azul) 14%, transparent); }
.badge-gris { border-left-color:var(--texto-3); color:var(--texto-3); }

/* Confirmacion de guardado en el propio campo. Corta y sin modal: son 46
   opciones y un cartel por cada una seria insoportable. */
input.guardado{
  outline:2px solid #25d366;outline-offset:1px;
  transition:outline-color .3s;
}

/* Zona para soltar el archivo. Grande y con borde punteado: tiene que
   invitar a arrastrar, que es como se trabaja con un archivo recien hecho. */
.zona-soltar{
  margin-top:6px;padding:22px 16px;border-radius:10px;text-align:center;
  border:2px dashed rgba(255,255,255,.22);cursor:pointer;
  transition:border-color .15s,background .15s;
}
.zona-soltar:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03)}
.zona-soltar.encima{
  border-color:#25d366;background:rgba(37,211,102,.09);
}
.zona-icono{font-size:26px;margin-bottom:4px;opacity:.75}

/* Zona de arrastre automática. Discreta: se agrega sola en pantallas que ya
   estaban diseñadas, así que no puede imponerse sobre lo que ya hay. */
.zona-soltar-auto{
  margin:6px 0;padding:16px 14px;border-radius:9px;text-align:center;
  border:2px dashed rgba(128,128,128,.32);cursor:pointer;
  transition:border-color .15s,background .15s;
}
.zona-soltar-auto:hover{border-color:rgba(128,128,128,.55)}
.zona-soltar-auto.encima{
  border-color:#25d366;background:rgba(37,211,102,.10);
}
.zona-soltar-auto .zona-icono{font-size:22px;margin-bottom:3px;opacity:.65}
.zona-elegido{margin-top:6px;font-size:12px;opacity:.8;word-break:break-all}

/* ------------------------------------ opciones de reprogramación (compacto) --- */
/* Antes cada opción ocupaba 95px en tres líneas apiladas. Ahora una fila:
   se ofrece, se llama así, sale tanto. Son tres caras del mismo dato. */
.op-cuerpo{padding:12px 14px}
.op-grupo{margin-bottom:16px}
.op-grupo-cab{
  display:flex;align-items:baseline;gap:9px;margin-bottom:5px;
  padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.07);
}
.op-grupo-nom{font-weight:700;font-size:12px;letter-spacing:1.1px;text-transform:uppercase}
.op-pista{font-size:11px;opacity:.45}
.op-cuenta{margin-left:auto;font-size:11px;opacity:.45;white-space:nowrap}

/* Dos columnas: con 47 opciones en una sola hay que scrollear de más. */
.op-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px 18px}

.op-fila{
  display:flex;align-items:center;gap:9px;
  padding:4px 7px;border-radius:6px;min-height:30px;
}
.op-fila:hover{background:rgba(255,255,255,.045)}
/* Prendida y con precio: se distingue de un vistazo cuáles se ofrecen. */
.op-fila.op-on .op-nombre{opacity:1;font-weight:600}
.op-nombre{flex:1 1 auto;min-width:0;font-size:13px;opacity:.62;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-check{display:flex;align-items:center;margin:0;cursor:pointer}
.op-check input{margin:0;cursor:pointer}

/* Angosto: son tres o cuatro dígitos, no hace falta un campo de 300px. */
.op-precio{
  width:74px;flex:0 0 auto;padding:4px 7px;border-radius:5px;
  text-align:right;font-size:13px;
  font-variant-numeric:tabular-nums;
}
.op-precio.guardado{outline:2px solid #25d366;outline-offset:1px}

/* El campo del precio tiene que ganarle a la regla general de inputs del
   panel, que los estira al 100%. Con una sola clase perdía por especificidad
   y el nombre de la opción quedaba aplastado a cero de ancho. */
.op-fila input.op-precio{
  width:74px;min-width:74px;max-width:74px;flex:0 0 74px;
  padding:4px 7px;border-radius:5px;text-align:right;font-size:13px;
  font-variant-numeric:tabular-nums;
}
.op-fila .op-nombre{
  flex:1 1 auto;min-width:40px;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.op-fila .op-check{flex:0 0 auto}