/* =========================================================
   Centurion Auto Collision — portal de taller
   Paleta y tipografías tomadas del estimado y del portal de casos.
   ========================================================= */

:root{
  --navy:#131c2e;
  --navy-deep:#0b1220;
  --naranja:#d9661f;
  --naranja-texto:#b04e17;

  --fondo:#f4f5f7;
  --papel:#ffffff;
  --papel-2:#fafbfc;
  --linea:#dfe3e8;
  --linea-suave:#e8ebef;
  --tinta:#131c2e;
  --tinta-2:#3f4a5c;
  --tinta-3:#79828f;
  --crema:#fdf1e6;
  --verde:#1c6f4a;
  --rojo:#a12a1d;
  --rojo-suave:#fae5e2;
  --verde-suave:#e4f0ea;

  --et-entrada:#79828f;
  --et-reparacion:#d9661f;
  --et-pintura:#131c2e;
  --et-listo:#1c6f4a;

  --disp:Oswald,"Arial Narrow",Arial,sans-serif;
  --ui:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --sombra:0 1px 2px rgba(19,28,46,.06), 0 4px 14px rgba(19,28,46,.05);
  --radio:8px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#0b1220; --navy-deep:#070c15;
    --naranja:#e8863f; --naranja-texto:#e8863f;
    --fondo:#0e131c; --papel:#151b26; --papel-2:#1a212e;
    --linea:#2a3342; --linea-suave:#232b39;
    --tinta:#e7ebf1; --tinta-2:#aeb7c4; --tinta-3:#8b95a4;
    --crema:#2a1b10; --verde:#5fb98d; --rojo:#e08a7f;
    --rojo-suave:#2c1a18; --verde-suave:#132318;
    --et-entrada:#8b95a4; --et-reparacion:#e8863f;
    --et-pintura:#9ab4e0; --et-listo:#5fb98d;
    --sombra:0 1px 2px rgba(0,0,0,.32), 0 4px 14px rgba(0,0,0,.24);
  }
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--ui);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--naranja-texto)}
.env{max-width:1320px;margin:0 auto;padding-inline:16px}
.env.estrecho{max-width:920px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}

/* ---------------- barra superior ---------------- */
.barra{background:var(--navy-deep);border-bottom:3px solid var(--naranja)}
.barra .env{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:12px}
.marca{display:flex;align-items:center;gap:14px;margin-right:auto;text-decoration:none;min-width:0}
.marca img{height:28px;width:auto;filter:invert(1) brightness(2)}
.barra-sep{width:1px;height:20px;background:rgba(255,255,255,.18)}
.rotulo{font-family:var(--disp);font-weight:500;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8e9bb3;white-space:nowrap}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:#c3ccda;text-decoration:none;font-size:13px;font-weight:500}
.nav a:hover{color:#fff}
.quien{font-family:var(--mono);font-size:11.5px;color:#8e9bb3}
.salir{color:#8e9bb3;font-size:12px;text-decoration:none}
.salir:hover{color:#fff}

/* ---------------- cinta de conteos ---------------- */
.cinta{background:var(--navy)}
.cinta .env{display:flex;flex-wrap:wrap;margin:0 auto}
.conteo{padding:10px 18px 10px 0;margin-right:18px;
  border-right:1px solid rgba(255,255,255,.12);display:flex;align-items:baseline;gap:8px}
.conteo:last-child{border-right:0}
.conteo dt{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#93a0b4}
.conteo dd{margin:0;font-family:var(--disp);font-weight:500;font-size:19px;
  color:#fff;font-variant-numeric:tabular-nums}
.conteo dd.rojo{color:#ef9a8d}

/* ---------------- avisos ---------------- */
.aviso{margin:14px 0 0;padding:10px 14px;border-radius:var(--radio);font-size:13px;
  border:1px solid var(--linea);background:var(--crema);color:var(--naranja-texto)}
.aviso.ok{background:var(--verde-suave);color:var(--verde);border-color:var(--verde)}
.aviso.mal{background:var(--rojo-suave);color:var(--rojo);border-color:var(--rojo)}

/* ---------------- tablero ---------------- */
.scroll{overflow-x:auto;padding-block:18px 6px}
.tablero{display:grid;grid-template-columns:repeat(4,minmax(268px,1fr));gap:14px;align-items:start}
.columna{background:var(--papel-2);border:1px solid var(--linea-suave);
  border-radius:var(--radio);display:flex;flex-direction:column;min-height:150px}
.columna.et-entrada{--et:var(--et-entrada)}
.columna.et-reparacion{--et:var(--et-reparacion)}
.columna.et-pintura{--et:var(--et-pintura)}
.columna.et-listo{--et:var(--et-listo)}
.cab{padding:12px 14px;border-bottom:1px solid var(--linea-suave);
  border-top:3px solid var(--et);border-radius:var(--radio) var(--radio) 0 0;
  display:flex;align-items:center;gap:9px}
.cab h3{margin:0;font-family:var(--disp);font-weight:500;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--et)}
.cab .n{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--tinta-3);
  background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:1px 9px}
.pila{display:flex;flex-direction:column;gap:10px;padding:12px}
.vacia{padding:20px 14px;text-align:center;color:var(--tinta-3);font-size:12.5px;margin:0}

.tarjeta{background:var(--papel);border:1px solid var(--linea);border-left:3px solid var(--et);
  border-radius:6px;box-shadow:var(--sombra);padding:11px 12px 10px}
.tarjeta.detenida{border-left-color:var(--rojo);background:var(--rojo-suave)}
.fila-placa{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.placa{font-family:var(--mono);font-weight:600;font-size:13.5px;letter-spacing:.07em;
  color:var(--tinta);text-decoration:none}
.placa:hover{text-decoration:underline}
.dias{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--tinta-3);white-space:nowrap}
.dias.alerta{color:var(--naranja-texto);font-weight:600}
.veh{font-weight:600;font-size:13.5px;line-height:1.3}
.meta{font-size:11.5px;color:var(--tinta-2);margin-top:3px;font-family:var(--mono)}
.trabajo{font-size:12px;color:var(--tinta-2);margin:7px 0 0;padding-top:7px;border-top:1px dashed var(--linea)}

.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:2px 7px;
  border-radius:3px;margin:6px 4px 0 0;border:1px solid}
.chip.alto{background:var(--rojo-suave);color:var(--rojo);border-color:var(--rojo)}
.chip.tarde{background:var(--crema);color:var(--naranja-texto);border-color:var(--naranja)}
.chip.si{background:var(--verde-suave);color:var(--verde);border-color:var(--verde)}
.chip.no{background:transparent;color:var(--tinta-3);border-color:var(--linea)}

.acciones{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.mover{appearance:none;cursor:pointer;font-family:var(--ui);font-size:11.5px;font-weight:600;
  background:transparent;color:var(--tinta-2);border:1px solid var(--linea);
  border-radius:5px;padding:4px 9px}
.mover:hover{background:var(--papel-2);border-color:var(--tinta-3)}
.mover.m-entrada{color:var(--et-entrada)}
.mover.m-reparacion{color:var(--et-reparacion)}
.mover.m-pintura{color:var(--et-pintura)}
.mover.m-listo{color:var(--et-listo)}
.mover.alto{margin-left:auto;color:var(--tinta-3)}
.mover.fin{background:var(--et-listo);border-color:var(--et-listo);color:#fff}
.mover.fin:hover{filter:brightness(.93)}

/* ---------------- entregados ---------------- */
.entregados{margin-block:22px 40px}
.entregados summary{cursor:pointer;font-family:var(--disp);font-weight:500;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);
  padding:10px 0;border-top:1px solid var(--linea)}
.tabla-env{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12.5px;margin-top:6px}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3);padding:7px 10px;
  border-bottom:1px solid var(--linea);font-weight:500;white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--linea-suave)}
tbody tr:hover{background:var(--papel-2)}

/* ---------------- títulos y paneles ---------------- */
.titulo{font-family:var(--disp);font-weight:600;font-size:25px;letter-spacing:.01em;
  margin:22px 0 6px;text-wrap:balance}
.bajada{color:var(--tinta-2);font-size:13.5px;margin:0 0 18px;max-width:70ch}
.panel{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:16px 18px;margin-bottom:16px;box-shadow:var(--sombra)}
.panel.destacado{border-left:3px solid var(--naranja)}
.panel h2{font-family:var(--disp);font-weight:500;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 12px;color:var(--tinta)}
.nota{font-size:12px;color:var(--tinta-3)}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:40px}

.cabecera-ficha{display:flex;justify-content:space-between;align-items:flex-end;
  gap:18px;flex-wrap:wrap;border-bottom:2px solid var(--linea);padding-bottom:12px;margin-bottom:4px}
.folio-ficha{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--naranja-texto);margin:20px 0 0}
.acciones-ficha{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:4px}
.linea-detener{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0}
.datos > div{min-width:0}
.datos > div.ancho{grid-column:1/-1}
.datos dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:2px}
.datos dd{margin:0;font-size:13.5px;overflow-wrap:anywhere}

/* ---------------- formularios ---------------- */
.hoja fieldset{border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);padding:14px 18px 18px;margin:0 0 16px}
.hoja fieldset.destacado{border-left:3px solid var(--naranja)}
.hoja legend{font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:0 8px;color:var(--tinta)}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.campo{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);min-width:0}
.campo.ancho{grid-column:1/-1}
.campo.ancho2{grid-column:span 2}
.campo.casilla{flex-direction:row;align-items:center;gap:8px;font-family:var(--ui);
  font-size:13px;letter-spacing:0;text-transform:none;color:var(--tinta)}
.campo input,.campo select,.campo textarea{
  font-family:var(--ui);font-size:13.5px;letter-spacing:0;text-transform:none;
  color:var(--tinta);background:var(--papel-2);border:1px solid var(--linea);
  border-radius:6px;padding:8px 10px;width:100%}
.campo input.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.campo textarea{resize:vertical}
.campo input[type=checkbox]{width:auto}
.ayuda{text-transform:none;letter-spacing:0;color:var(--tinta-3);font-family:var(--ui);font-size:11px}
.req{color:var(--naranja-texto)}
.con-boton{display:flex;gap:6px}
.btn-mini{white-space:nowrap;font-family:var(--ui);font-size:12px;padding:0 10px;
  border:1px solid var(--linea);background:var(--papel-2);color:var(--tinta-2);
  border-radius:6px;cursor:pointer}
.pie-hoja{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:40px}
.pie-hoja .nota{margin-right:auto}

.btn{appearance:none;border:0;cursor:pointer;background:#d9661f;color:#fff;
  font-family:var(--ui);font-weight:600;font-size:13px;padding:9px 18px;
  border-radius:6px;text-decoration:none;display:inline-block}
.btn:hover{background:#c25a19}
.btn-sec{appearance:none;background:transparent;border:1px solid var(--linea);
  color:var(--tinta-2);font-family:var(--ui);font-size:13px;font-weight:500;
  padding:8px 14px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block}
.btn-sec:hover{border-color:var(--tinta-3);color:var(--tinta)}

/* ---------------- fotos ---------------- */
.protocolo{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:6px;overflow:hidden}
.protocolo li{background:var(--papel);padding:8px 12px;display:flex;gap:10px;align-items:center;font-size:12.5px}
.protocolo li span{width:14px}
.protocolo li.si span{color:var(--verde)}
.protocolo li.no span{color:var(--rojo)}
.protocolo li b{margin-left:auto;font-family:var(--mono);color:var(--tinta-3);font-weight:500}
.subir{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
  padding:12px;border:1px dashed var(--linea);border-radius:6px;margin-bottom:14px;align-items:end}
.subir .btn{grid-column:1/-1}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.galeria figure{margin:0;border:1px solid var(--linea);border-radius:6px;overflow:hidden;background:var(--papel-2)}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.galeria figcaption{font-size:10.5px;color:var(--tinta-3);padding:6px 8px;line-height:1.35}

/* ---------------- bitácora ---------------- */
.bitacora{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bitacora li{display:flex;gap:10px;font-size:12.5px;align-items:baseline;
  border-bottom:1px solid var(--linea-suave);padding-bottom:7px}
.bitacora li span:first-child{color:var(--tinta-3);white-space:nowrap;font-size:11px}
.bitacora li em{margin-left:auto;color:var(--tinta-3);font-style:normal;font-size:11px;white-space:nowrap}

/* ---------------- pantallas sueltas ---------------- */
body.centrado{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px}
.tarjeta-sola{background:var(--papel);border:1px solid var(--linea);border-top:3px solid var(--naranja);
  border-radius:var(--radio);box-shadow:var(--sombra);padding:28px;width:100%;max-width:380px}
.logo-sol{height:30px;width:auto;display:block;margin-bottom:6px}
:root:not([data-theme="light"]) .logo-sol{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-sol{filter:invert(1) brightness(2)}}
.rotulo-sol{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 20px}
.titulo-sol{font-family:var(--disp);font-weight:600;font-size:20px;margin:0 0 16px;text-transform:uppercase;letter-spacing:.04em}
.form-sol{display:flex;flex-direction:column;gap:6px}
.form-sol label{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);margin-top:10px}
.form-sol input{font-family:var(--ui);font-size:14px;padding:9px 11px;border:1px solid var(--linea);
  background:var(--papel-2);color:var(--tinta);border-radius:6px}
.form-sol .btn{margin-top:18px}
.nota-sol{font-size:13px;color:var(--tinta-2)}

/* ---------------- pie ---------------- */
.pie{border-top:1px solid var(--linea);margin-top:20px;padding-block:16px 34px;
  color:var(--tinta-3);font-size:11.5px;background:var(--papel)}

/* ---------------- responsivo ---------------- */
@media (max-width:900px){
  .tablero{grid-template-columns:1fr}
  .scroll{overflow-x:visible}
  .dos-columnas{grid-template-columns:1fr}
  .campo.ancho2{grid-column:1/-1}
  .marca{width:100%}
  .nav{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}