/* SIPA — home tipo Tesla · marca AMS · temas claro/oscuro */
:root {
  --rosa: #A2007C; --rosa-claro: #d13ba8; --azul: #2C2D85;
  --azul-claro: #268ECD; --dorado: #F9B233;
  --fondo: #0d0e14; --panel: #16181f; --panel-2: #1d2029;
  --borde: #2a2d3a; --texto: #e8e9ee; --texto-2: #9a9eb0;
  --ok: #2ecc71; --alerta: #d8a104; --peligro: #e74c3c;
  --graf-1: #3987e5; --graf-2: #c98500;        /* validados fondo oscuro */
  --carro-a: #3a3d4d; --carro-b: #1d2029; --carro-l: #4a4e63;
  --sombra: #00000066;
}
[data-theme="light"] {
  --fondo: #f2f3f7; --panel: #ffffff; --panel-2: #eef0f5;
  --borde: #d8dbe4; --texto: #1c1e26; --texto-2: #5d6170;
  --ok: #1d9e54; --alerta: #a87a00; --peligro: #cc3a2b;
  --graf-1: #1E6FA8; --graf-2: #A86A00;        /* validados fondo claro */
  --carro-a: #c6cad6; --carro-b: #9aa0b2; --carro-l: #7d8396;
  --sombra: #00000022;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--fondo); color: var(--texto);
  font-family: Inter, Verdana, sans-serif; min-height: 100vh; transition: background .2s; }
h1, h2, h3, .logo { font-family: Comfortaa, Inter, sans-serif; }
a { color: var(--azul-claro); text-decoration: none; }
button { font: inherit; cursor: pointer; border: 1px solid var(--borde);
  background: var(--panel-2); color: var(--texto);
  padding: .5rem 1rem; border-radius: 10px; transition: .15s; }
button:hover { border-color: var(--rosa); }
button.primario { background: var(--rosa); border-color: var(--rosa); color: #fff; font-weight: 600; }
button.primario:hover { background: var(--rosa-claro); }
input, select, textarea { font: inherit; background: var(--panel-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 10px; padding: .55rem .8rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rosa); }

/* ---------- login ---------- */
.login-fondo { min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 70% -10%, #2c2d8533, transparent),
              radial-gradient(900px 500px at 10% 110%, #a2007c22, transparent), var(--fondo); }
.login-caja { width: min(380px, 92vw); background: var(--panel); border: 1px solid var(--borde);
  border-radius: 20px; padding: 2.2rem; display: grid; gap: .9rem; }
.login-caja .logo { text-align: center; margin-bottom: .6rem; }
.error { color: var(--peligro); font-size: .85rem; min-height: 1.2em; }
.exito { color: var(--ok); font-size: .9rem; }

/* ---------- layout ---------- */
.logo { font-weight: 700; font-size: 1.4rem; letter-spacing: .06em; }
.logo b { color: var(--rosa); }
header.barra { display: flex; align-items: center; gap: 1.1rem; padding: .8rem 1.6rem;
  border-bottom: 1px solid var(--borde); position: sticky; top: 0;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px); z-index: 10; flex-wrap: wrap; }
header .crece { flex: 1; }
header nav { display: flex; gap: 1rem; }
header nav a { color: var(--texto-2); font-size: .9rem; }
header nav a.activa, header nav a:hover { color: var(--texto); }
.usuario { color: var(--texto-2); font-size: .8rem; text-align: right; line-height: 1.25; }
.badge-alertas { background: var(--peligro); color: #fff; border-radius: 999px;
  font-size: .72rem; font-weight: 600; padding: .1rem .5rem; margin-left: .3rem; }
main { padding: 1.4rem 1.6rem 3rem; max-width: 1320px; margin: 0 auto; }
.fila { display: flex; align-items: center; gap: .5rem; }
.fila .crece { flex: 1; }

/* ---------- resumen / grid flota ---------- */
.tarjetas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: .9rem; margin-bottom: 1.4rem; }
.resumen { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px;
  padding: 1rem 1.2rem; cursor: pointer; }
.resumen .cifra { font-size: 1.9rem; font-weight: 700; font-family: Comfortaa; }
.resumen .nota { color: var(--texto-2); font-size: .8rem; }
.resumen.rosa .cifra { color: var(--rosa-claro); }
.resumen.rojo .cifra { color: var(--peligro); }
.resumen.amarillo .cifra { color: var(--alerta); }
.resumen.azul .cifra { color: var(--azul-claro); }
.filtros { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.filtros input { flex: 1; min-width: 180px; }
.grid-flota { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.tarjeta-vehiculo { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px;
  padding: 1.1rem 1.2rem; cursor: pointer; transition: .15s; }
.tarjeta-vehiculo:hover { border-color: var(--rosa); transform: translateY(-2px); }
.tarjeta-vehiculo .placa { font-family: Comfortaa; font-weight: 700; font-size: 1.25rem; }
.tarjeta-vehiculo .ref { color: var(--texto-2); font-size: .85rem; margin-bottom: .55rem; }
.chip { font-size: .7rem; padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--texto-2); }
.chip.propia { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 40%, transparent); }
.chip.baja { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 40%, transparent); }
.semaforo { display: flex; gap: .45rem; margin-top: .7rem; }
.punto { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--texto-2); }
.punto i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #777; }
.punto.Vigente i { background: var(--ok); }
.punto.porvencer i { background: var(--alerta); }
.punto.Vencido i { background: var(--peligro); }
.conductor { color: var(--texto-2); font-size: .78rem; margin-top: .6rem; }
.cargando { color: var(--texto-2); padding: 2rem; text-align: center; }
.volver { margin-bottom: 1rem; }

/* ---------- ficha + escena 3D ---------- */
.ficha-cabecera { display: grid; grid-template-columns: minmax(300px, 1.2fr) 1fr; gap: 1.4rem;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 22px; padding: 1.4rem; margin-bottom: 1.2rem; }
.escena { position: relative; min-height: 300px; display: grid; place-items: center;
  cursor: grab; user-select: none; touch-action: none; overflow: hidden; border-radius: 16px; }
.escena:active { cursor: grabbing; }
.escena .ayuda { position: absolute; bottom: .3rem; left: 0; right: 0; text-align: center;
  color: var(--texto-2); font-size: .72rem; pointer-events: none; }
.vista3d { width: min(340px, 100%); height: 240px; perspective: 900px; }
.camion { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.camion div { position: absolute; transform-style: preserve-3d; }
.cara { backface-visibility: hidden; border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--carro-l); }
.zona3d { cursor: pointer; }
.zona3d:hover .cara { box-shadow: inset 0 0 0 2px var(--rosa-claro); }
.rueda { border-radius: 50%; background: #14161d;
  box-shadow: inset 0 0 0 7px #555a72, inset 0 0 0 20px #262a36; }
[data-theme="light"] .rueda { background: #2c2f3a;
  box-shadow: inset 0 0 0 7px #6a7084, inset 0 0 0 20px #3c404e; }
.hotspot { width: 16px; height: 16px; border-radius: 50%;
  background: var(--rosa); border: 2.5px solid #fff; box-shadow: 0 0 0 4px #a2007c55;
  animation: pulso 2s infinite; cursor: pointer; pointer-events: auto; }
.hotspot.alerta-h { background: var(--peligro); box-shadow: 0 0 0 4px #e74c3c55; }
@keyframes pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.piso { border-radius: 50%; background: radial-gradient(ellipse, var(--sombra), transparent 70%); }

.panel-sistema { background: var(--panel-2); border: 1px solid var(--borde); border-radius: 14px;
  padding: .9rem 1.1rem; font-size: .85rem; min-height: 96px; margin-top: .6rem; }
.panel-sistema b { color: var(--rosa-claro); }
.panel-sistema .malo { color: var(--peligro); font-weight: 600; }
.panel-sistema .bien { color: var(--ok); }

.ficha-datos h1 { font-size: 2rem; }
.ficha-datos .sub { color: var(--texto-2); margin-bottom: 1rem; }
.datos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.4rem; font-size: .9rem; }
.datos-grid dt { color: var(--texto-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.datos-grid dd { margin-bottom: .45rem; }

.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.1rem; }
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; padding: 1.2rem; }
.panel h3 { margin-bottom: .8rem; font-size: 1rem; color: var(--texto-2); }
.panel .fuente { color: var(--texto-2); font-size: .72rem; margin-top: .6rem; }
.ancho { grid-column: 1 / -1; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { text-align: left; color: var(--texto-2); font-weight: 500; font-size: .72rem;
     text-transform: uppercase; letter-spacing: .04em; padding: .35rem .5rem; }
td { padding: .45rem .5rem; border-top: 1px solid var(--borde); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.estado { font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; font-weight: 600; }
.estado.Vigente { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.estado.Vencido { background: color-mix(in srgb, var(--peligro) 16%, transparent); color: var(--peligro); }
.estado.porvencer { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }
.estado.sinregistrar { background: color-mix(in srgb, var(--texto-2) 16%, transparent); color: var(--texto-2); }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.cifras .dato .v { font-size: 1.2rem; font-weight: 700; font-family: Comfortaa; }
.cifras .dato .k { color: var(--texto-2); font-size: .74rem; }

/* barras horizontales de desglose */
.desglose .filab { display: grid; grid-template-columns: 150px 1fr 90px; gap: .6rem;
  align-items: center; font-size: .8rem; padding: .28rem 0; }
.desglose .barra-h { height: 10px; border-radius: 4px; background: var(--graf-1); min-width: 2px; }
.desglose .num { color: var(--texto-2); }

/* proyección */
.proyeccion .grande { font-size: 1.6rem; font-weight: 700; font-family: Comfortaa; }
.proyeccion .ok { color: var(--ok); } .proyeccion .mal { color: var(--peligro); }
.lista-pendientes { max-height: 180px; overflow: auto; font-size: .8rem; }
.lista-pendientes li { margin: .25rem 0 .25rem 1.1rem; color: var(--texto-2); }

/* gráficas SVG */
.grafica { width: 100%; height: auto; }
.grafica text { fill: var(--texto-2); font-size: 10px; font-family: Inter, sans-serif; }
.grafica .valor { fill: var(--texto); font-weight: 600; }
.grafica .eje { stroke: var(--borde); stroke-width: 1; }
.delta { font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; }
.delta.sube { background: color-mix(in srgb, var(--peligro) 15%, transparent); color: var(--peligro); }
.delta.baja { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.delta.igual { background: var(--panel-2); color: var(--texto-2); }

/* matriz P/E */
.matriz { overflow-x: auto; }
.matriz table { font-size: .72rem; }
.matriz td, .matriz th { padding: .25rem .3rem; text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: left; white-space: nowrap; }
.pe { width: 15px; height: 15px; border-radius: 4px; display: inline-block; background: var(--panel-2); }
.pe.p { background: var(--graf-1); }
.pe.e { background: var(--ok); }
.pe.pe2 { background: linear-gradient(135deg, var(--graf-1) 50%, var(--ok) 50%); }

/* cuadrillas */
.grid-cuadrillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.tarjeta-cuadrilla { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px;
  padding: 1rem 1.1rem; cursor: pointer; transition: .15s; }
.tarjeta-cuadrilla:hover { border-color: var(--rosa); }
.tarjeta-cuadrilla .kit { font-family: Comfortaa; font-weight: 700; font-size: 1.1rem; }
.tarjeta-cuadrilla .datos { color: var(--texto-2); font-size: .8rem; margin-top: .4rem; line-height: 1.5; }

/* alertas */
.alerta-item { display: flex; gap: .9rem; align-items: center; padding: .7rem .4rem;
  border-top: 1px solid var(--borde); }
.sev { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sev.ALTA { background: var(--peligro); } .sev.MEDIA { background: var(--alerta); }
.sev.BAJA { background: var(--azul-claro); }
.alerta-item .tipo { font-size: .72rem; color: var(--texto-2); }

/* formulario preoperacional */
.form-preop { display: grid; gap: 1rem; max-width: 760px; }
.form-preop .categoria { display: grid; grid-template-columns: auto 190px 1fr; gap: .7rem;
  align-items: center; padding: .4rem 0; border-top: 1px solid var(--borde); font-size: .88rem; }
.form-preop .categoria input[type="text"] { width: 100%; }
.form-preop .categoria input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--rosa); }

@media (max-width: 760px) {
  .ficha-cabecera { grid-template-columns: 1fr; }
  .form-preop .categoria { grid-template-columns: auto 1fr; }
  .form-preop .categoria input[type="text"] { grid-column: 1 / -1; }
}

/* ---------- home cockpit ---------- */
.cockpit { display: grid; grid-template-columns: minmax(320px, 1.6fr) minmax(220px, .8fr); gap: 1.1rem; }
.selector-placas { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px;
  padding: 1rem; display: flex; flex-direction: column; gap: .6rem; max-height: 560px; }
.selector-placas .lista { overflow-y: auto; display: grid; gap: .4rem; }
.boton-placa { display: flex; align-items: center; gap: .5rem; width: 100%;
  text-align: left; padding: .5rem .7rem; border-radius: 10px; font-size: .85rem; }
.boton-placa .p { font-family: Comfortaa; font-weight: 700; }
.boton-placa small { color: var(--texto-2); }
.boton-placa.activo { border-color: var(--rosa); background: color-mix(in srgb, var(--rosa) 12%, var(--panel-2)); }
.boton-placa .mini { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: none; }
.mini.ok { background: var(--ok); } .mini.mal { background: var(--peligro); } .mini.medio { background: var(--alerta); }
.info-vehiculo { margin-top: .8rem; }
.chip.enlace { cursor: pointer; }
.chip.enlace:hover { border-color: var(--rosa); color: var(--texto); }

/* modal */
.modal-fondo { position: fixed; inset: 0; background: #000a; display: grid;
  place-items: center; z-index: 50; padding: 1rem; }
.modal { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px;
  padding: 1.3rem; width: min(640px, 96vw); max-height: 86vh; overflow: auto; }

/* costos por mes (expandible) */
details.mes { border-top: 1px solid var(--borde); }
details.mes summary { display: grid; grid-template-columns: 70px 1fr 1fr 90px; gap: .5rem;
  padding: .5rem .2rem; cursor: pointer; font-size: .85rem; align-items: center; list-style: none; }
details.mes summary::-webkit-details-marker { display: none; }
details.mes summary:hover { background: var(--panel-2); }
details.mes .prev { color: var(--graf-1); } details.mes .corr { color: var(--peligro); }
details.mes table { margin: .3rem 0 .8rem; }

/* vida útil */
.vida .filav { display: grid; grid-template-columns: 130px 1fr 58px; gap: .6rem;
  align-items: center; font-size: .8rem; padding: .3rem 0; }
.vida .pista { height: 12px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.vida .uso { height: 100%; border-radius: 6px; background: var(--ok); transition: width .3s; }
.vida .uso.medio { background: var(--alerta); } .vida .uso.alto { background: var(--peligro); }
.vida .pct { text-align: right; font-weight: 600; }

/* rango de gráficas */
.rango { display: flex; gap: .3rem; }
.rango button { padding: .25rem .6rem; font-size: .75rem; border-radius: 8px; }
.rango button.activo { background: var(--rosa); border-color: var(--rosa); color: #fff; }

/* matriz pestañas */
.pestanas { display: flex; gap: .4rem; margin-bottom: 1rem; }
.pestanas button.activo { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.tabla-plan select, .tabla-plan input { padding: .25rem .4rem; font-size: .78rem; border-radius: 7px; }
.tabla-plan input { width: 84px; }
@media (max-width: 860px) { .cockpit { grid-template-columns: 1fr; } .selector-placas { max-height: 260px; } }

/* centrar el camión en su escena */
.camion > .pieza { left: 50%; top: 50%; }
.escena { min-height: 320px; }

/* tooltip de gráficas */
.tooltip-graf { position: fixed; z-index: 60; background: var(--panel-2);
  border: 1px solid var(--borde); border-radius: 10px; padding: .5rem .7rem;
  font-size: .78rem; pointer-events: none; box-shadow: 0 8px 22px #0006;
  display: none; min-width: 150px; }
.tooltip-graf b { font-family: Comfortaa; }
.leyenda-graf { display: flex; gap: 1rem; font-size: .75rem; color: var(--texto-2);
  margin: .3rem 0 .1rem; align-items: center; }
.leyenda-graf .lg { display: flex; align-items: center; gap: .3rem; }
.leyenda-graf .cuadro { width: 11px; height: 11px; border-radius: 3px; background: var(--graf-1); }
.leyenda-graf .linea { width: 18px; height: 0; border-top: 2.5px solid var(--graf-2); position: relative; }
.leyenda-graf .linea::after { content: ""; position: absolute; left: 6px; top: -4.5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--graf-2); }
.grafica .clicable { cursor: pointer; }

/* pestaña datos */
.form-datos { display: grid; gap: .6rem; }
.form-datos .fila-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.form-datos input, .form-datos select { flex: 1; min-width: 130px; }
pre.salida-etl { background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: 10px; padding: .8rem; font-size: .74rem; max-height: 300px;
  overflow: auto; white-space: pre-wrap; }

/* píldoras de consulta de sistemas (todas las secciones de la matriz) */
.pills-sistemas { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.pills-sistemas .pill { padding: .2rem .55rem; font-size: .7rem; border-radius: 999px; }
.pills-sistemas .pill:hover { border-color: var(--rosa); }
.pills-sistemas .pill.con-novedad { border-color: color-mix(in srgb, var(--peligro) 55%, transparent);
  color: var(--peligro); }
.hotspot { width: 13px; height: 13px; border-width: 2px; }

/* pestaña línea base */
.tabla-base input[type="date"] { width: 140px; }
.tabla-base input[type="number"] { width: 90px; }

/* ---------- control inteligente de flota (zona -> placas) ---------- */
.control-flota { margin-bottom: 1.1rem; }
.zonas-control, .placas-control { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.placas-control { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--borde); }
.boton-zona { padding: .45rem .9rem; border-radius: 12px; font-weight: 600; font-size: .85rem; }
.boton-zona small { color: var(--texto-2); font-weight: 400; }
.boton-zona.activo { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.boton-zona.activo small { color: #ffffffcc; }
.boton-placa2 { display: flex; align-items: center; gap: .4rem; padding: .4rem .7rem;
  border-radius: 10px; font-size: .84rem; }
.boton-placa2 b { font-family: Comfortaa; }
.boton-placa2.activo { border-color: var(--rosa); background: color-mix(in srgb, var(--rosa) 14%, var(--panel-2)); }
.contadores-mini { display: flex; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
.contador-mini { font-size: .74rem; padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--texto-2); cursor: pointer; }
.contador-mini b { font-family: Comfortaa; }
.contador-mini.rojo { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 45%, transparent); }
.contador-mini.ambar { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 45%, transparent); }

/* ---------- columna de indicadores del vehículo ---------- */
.indicadores-v { display: grid; gap: .7rem; align-content: start; }
.indicadores-v .grande { font-family: Comfortaa; font-weight: 700; font-size: 1.7rem; }
.indicadores-v .bloque { background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: 12px; padding: .7rem .9rem; }
.indicadores-v .bloque .k { font-size: .72rem; color: var(--texto-2); }

/* ---------- centro de tareas ---------- */
.tarea-item { border-top: 1px solid var(--borde); padding: .55rem .2rem; font-size: .85rem; }
.tarea-item .meta { color: var(--texto-2); font-size: .74rem; }
.chip-estado { font-size: .68rem; padding: .1rem .5rem; border-radius: 999px; font-weight: 600; }
.chip-estado.PENDIENTE { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }
.chip-estado.EN_CURSO { background: color-mix(in srgb, var(--azul-claro) 16%, transparent); color: var(--azul-claro); }
.chip-estado.HECHA { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.tarea-item button.mini-b { padding: .15rem .5rem; font-size: .72rem; border-radius: 7px; }
.comentarios-tarea { background: var(--panel-2); border-radius: 10px; padding: .5rem .7rem; margin-top: .4rem; }
.comentarios-tarea .com { font-size: .8rem; padding: .25rem 0; border-top: 1px dashed var(--borde); }
.comentarios-tarea .com:first-child { border-top: none; }
.comentarios-tarea .quien { color: var(--texto-2); font-size: .7rem; }

/* ---------- identificación de unidad estilo Tesla ---------- */
.estado-strip { position: absolute; left: 8px; top: 8%; bottom: 8%; width: 7px;
  border-radius: 4px; z-index: 3; }
.estado-strip.verde { background: var(--ok); box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 60%, transparent); }
.estado-strip.naranja { background: #e67e22; box-shadow: 0 0 14px #e67e2299; }
.estado-strip.rojo { background: var(--peligro); box-shadow: 0 0 14px color-mix(in srgb, var(--peligro) 60%, transparent); }
.unidad-datos { position: absolute; left: 26px; top: 12px; z-index: 3; display: grid;
  gap: .35rem; font-size: .78rem; pointer-events: none; }
.unidad-datos .etiqueta-estado { display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .72rem; letter-spacing: .06em; padding: .2rem .6rem;
  border-radius: 999px; border: 1px solid var(--borde); background: color-mix(in srgb, var(--panel) 80%, transparent); }
.unidad-datos .etiqueta-estado i { width: 8px; height: 8px; border-radius: 50%; }
.unidad-datos .dato-u b { font-family: Comfortaa; font-size: 1.02rem; }
.unidad-datos .dato-u small { color: var(--texto-2); display: block; margin-top: -2px; }
.cinta-retirada { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; place-items: center; overflow: hidden; }
.cinta-retirada span { background: var(--peligro); color: #fff; font-weight: 700;
  letter-spacing: .25em; padding: .3rem 4rem; transform: rotate(-12deg); opacity: .85;
  font-size: .85rem; box-shadow: 0 4px 18px #0007; }

/* ---------- bloques volteables (indicadores) ---------- */
.bloque.volteable { position: relative; cursor: pointer; transition: border-color .2s; }
.bloque.volteable:hover { border-color: var(--rosa); }
.bloque.volteable .cara-a { transition: opacity .2s; }
/* la capa de detalle SALE del bloque y tapa lo de abajo: nada de scroll interno */
.bloque.volteable .cara-b { position: absolute; top: -1px; left: -1px; right: -1px;
  min-height: calc(100% + 2px); height: auto; z-index: 7; padding: .75rem .95rem;
  border-radius: 12px; border: 1px solid var(--rosa);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: blur(7px);
  box-shadow: 0 16px 34px var(--sombra);
  opacity: 0; pointer-events: none; transition: opacity .18s; font-size: .78rem; }
.bloque.volteable.volteado { z-index: 6; }
.bloque.volteable.volteado .cara-a { opacity: .06; }
.bloque.volteable.volteado .cara-b { opacity: 1; pointer-events: auto; }
.bloque.volteable .pista-pe { height: 12px; border-radius: 6px; background: var(--panel-2);
  overflow: hidden; margin: .25rem 0; }
.bloque.volteable .pista-pe > div { height: 100%; border-radius: 6px; }
.detalle-doc { padding: .25rem 0; border-top: 1px dashed var(--borde); }
.detalle-doc:first-child { border-top: none; }

/* gestor en columna angosta (misma fila que presupuestador y tareas) */
#panel-gestor .pestanas { flex-wrap: wrap; }
#panel-gestor .pestanas button { font-size: .74rem; padding: .3rem .6rem; }
#panel-gestor .fila-form { gap: .45rem; }
#panel-gestor .fila-form > * { min-width: 0; flex: 1 1 130px; }
#panel-gestor .gi-desc { flex: 1 1 100% !important; min-width: 0 !important; }
#panel-gestor .gi-costo { max-width: none !important; }
#panel-gestor input[type="file"] { font-size: .74rem; }
#panel-gestor .pills-sistemas .pill { font-size: .66rem; }
#panel-gestor { overflow-x: hidden; }
#panel-gestor input, #panel-gestor select { max-width: 100%; min-width: 0; }
#panel-gestor input[type="date"], #panel-gestor input[type="file"] { min-width: 0; }
#panel-gestor .form-datos, #panel-gestor .form-datos > *, #panel-gestor .fila-form { min-width: 0; }

/* panel de sistema como tarjeta flotante dentro de la escena (arriba-derecha) */
.escena { min-height: 400px; }
.escena .panel-sistema { position: absolute; top: 12px; right: 12px; z-index: 4;
  width: min(48%, 330px); max-height: calc(100% - 24px); overflow: auto;
  margin: 0; cursor: default; font-size: .8rem;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(7px); box-shadow: 0 10px 26px var(--sombra); }
@media (max-width: 760px) {
  .escena .panel-sistema { position: static; width: 100%; max-height: none; margin-top: .5rem; }
  .escena { min-height: 340px; }
}

/* tanque de nivel (5 rayas) por sistema */
.fila-tanque { display: grid; grid-template-columns: 1fr auto 34px; gap: .5rem;
  align-items: center; padding: .22rem 0; border-top: 1px dashed var(--borde); font-size: .78rem; }
.fila-tanque:first-child { border-top: none; }
.tanque { display: inline-flex; gap: 2.5px; }
.tanque i { width: 15px; height: 10px; border-radius: 2.5px;
  background: var(--panel-2); border: 1px solid var(--borde); }
.tanque i.lleno.ok { background: var(--ok); border-color: var(--ok); }
.tanque i.lleno.medio { background: var(--alerta); border-color: var(--alerta); }
.tanque i.lleno.bajo { background: var(--peligro); border-color: var(--peligro); }
.fila-tanque .nivel { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* scroll interno de la tarjeta flotante: la página se queda quieta */
.bloque.volteable .cara-b { max-height: 430px; overflow-y: auto; overscroll-behavior: contain; }
.pe.clicable { cursor: pointer; }
.pe.clicable:hover { outline: 2px solid var(--rosa); outline-offset: 1px; }

/* preoperacional rápido: Buena / Regular / Mala con chulo */
.preop-cat { grid-template-columns: minmax(140px, 1fr) auto !important; row-gap: .3rem; }
.preop-cat .nombre-cat { font-size: .85rem; font-weight: 600; }
.preop-cat .detalle-cat { grid-column: 1 / -1; }
.tri-estado { display: flex; gap: .3rem; }
.tri-estado button { padding: .3rem .7rem; font-size: .76rem; border-radius: 999px; }
.tri-estado .sel-buena { background: color-mix(in srgb, var(--ok) 18%, transparent);
  border-color: var(--ok); color: var(--ok); font-weight: 700; }
.tri-estado .sel-regular { background: color-mix(in srgb, var(--alerta) 18%, transparent);
  border-color: var(--alerta); color: var(--alerta); font-weight: 700; }
.tri-estado .sel-mala { background: color-mix(in srgb, var(--peligro) 18%, transparent);
  border-color: var(--peligro); color: var(--peligro); font-weight: 700; }

/* estado vacío con la acción que lo llena */
.estado-vacio { margin: .5rem 0; padding: 1.1rem .8rem; text-align: center; font-size: .88rem;
  color: var(--texto-2); border: 1px dashed var(--borde); border-radius: 12px; }
.estado-vacio b { color: var(--texto); }
.estado-vacio small { display: block; margin-top: .35rem; font-size: .8rem; }

/* preoperacional en celular (conductores): una columna y botones de 44 px */
@media (max-width: 600px) {
  .form-preop { gap: .7rem; }
  .form-preop > .fila { flex-direction: column; align-items: stretch; }
  .form-preop > .fila > label { width: 100%; }
  .form-preop select, .form-preop input[type="date"], .form-preop input[type="text"] {
    width: 100%; min-height: 44px; font-size: 16px; }   /* 16px: iOS no hace zoom */
  .preop-cat { grid-template-columns: 1fr !important; }
  .tri-estado { width: 100%; }
  .tri-estado button { flex: 1; min-height: 44px; font-size: .9rem; }
  #btn-preop { width: 100%; min-height: 48px; font-size: 1rem; }
  #contador-nov { align-self: flex-start !important; }
  .mini-b, .tarea-item button.mini-b { min-height: 40px; min-width: 40px; }
}

/* logo oficial SIPA (SVG inline; colores del texto según tema) */
:root { --logo-si: #FFFFFF; --logo-pa: #C21A91; }
[data-theme="light"] { --logo-si: #1C1C3A; --logo-pa: #A2007C; }
.logo-svg { display: block; }
header .logo-svg { height: 40px; width: auto; }
.login-caja .logo-svg { height: 96px; width: auto; margin: 0 auto; }
.eslogan { text-align: center; color: var(--texto-2); font-size: .85rem;
  letter-spacing: .02em; margin-top: -2px; }

/* ------------------------------------------------ set de alertas (tablero) */
.alertas-tablero { display: grid; grid-template-columns: 185px 225px 1fr;
  gap: 1.2rem; align-items: start; margin-top: .9rem; }
@media (max-width: 980px) { .alertas-tablero { grid-template-columns: 1fr; } }
.donut-al { width: 150px; display: block; margin: 0 auto; }
.leyenda-al { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem;
  color: var(--texto-2); align-items: center; margin-top: .3rem; }
.leyenda-al i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: .35rem; vertical-align: -1px; }
.al-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tarj-al { border: 1px solid var(--borde); border-radius: 12px;
  padding: .55rem .7rem; text-align: center; }
.tarj-al b { font-size: 1.25rem; display: block; }
.tarj-al small { color: var(--texto-2); font-size: .66rem; }
.titulo-mini { font-size: .68rem; color: var(--texto-2); margin-bottom: .4rem;
  text-transform: uppercase; letter-spacing: .05em; }
.ubarras { max-height: 235px; overflow: auto; overscroll-behavior: contain;
  padding-right: .3rem; }
.ubarra { display: flex; align-items: center; gap: .5rem; padding: .18rem .3rem;
  border-radius: 8px; cursor: pointer; font-size: .74rem; }
.ubarra:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.ubarra.sel { background: color-mix(in srgb, var(--rosa) 13%, transparent); }
.uplaca { width: 66px; flex: none; font-weight: 600; display: flex;
  align-items: center; gap: .25rem; }
.punto-alta { width: 7px; height: 7px; border-radius: 50%; background: var(--peligro);
  display: inline-block; flex: none; }
.upista { flex: 1; display: flex; height: 11px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--texto) 7%, transparent); }
.upista span { height: 100%; }
.ucifra { width: 54px; flex: none; text-align: right; font-weight: 600; }
.ucifra small { color: var(--texto-2); font-weight: 400; }
.tab-estado { display: flex; border: 1px solid var(--borde); border-radius: 999px;
  overflow: hidden; }
.tab-estado button { border: 0; border-radius: 0; padding: .3rem .85rem;
  font-size: .75rem; background: transparent; }
.tab-estado button.sel { background: color-mix(in srgb, var(--rosa) 16%, transparent);
  color: var(--texto); font-weight: 600; }
.sel-chip { border-color: var(--rosa); color: var(--texto); font-weight: 600; }

/* tarjetas del set de alertas como botones de filtro */
.tarj-al.clic { cursor: pointer; transition: border-color .15s, background .15s; }
.tarj-al.clic:hover { border-color: var(--rosa); }
.tarj-al.sel { border-color: var(--rosa);
  background: color-mix(in srgb, var(--rosa) 10%, transparent); }

/* grupos desplegables del set de alertas */
.grupo-al { border-top: 1px solid var(--borde); }
.grupo-al-cab { display: flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .6rem .4rem; font-size: .85rem; user-select: none; }
.grupo-al-cab:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); }
.grupo-al-cab .flecha { color: var(--rosa); width: 14px; flex: none; }
.grupo-al-cab .cnt { font-weight: 700; }
.grupo-al-items { padding-left: .9rem; }
.alerta-item.esfumar { opacity: 0; transform: translateX(40px);
  transition: opacity .4s ease, transform .4s ease; }

/* ----------------------------------------- la historia de los costos */
.heroes-costos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem; }
.heroes-costos .tarj-al b { font-size: 1.15rem; }
.zona-costos { border-top: 1px solid var(--borde); padding: .65rem .4rem; cursor: pointer;
  border-radius: 10px; }
.zona-costos:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); }
.zc-fila { display: flex; align-items: center; gap: .6rem; margin-top: .25rem; }
.zc-pista { flex: 1; height: 12px; border-radius: 5px; overflow: hidden; display: flex;
  background: color-mix(in srgb, var(--texto) 6%, transparent); }
.zc-pista.mini { display: inline-flex; width: 90px; height: 7px; vertical-align: 2px;
  margin-left: .4rem; }
.zc-pista span { height: 100%; border-radius: 0 4px 4px 0; }
.zc-cifra { width: 90px; flex: none; text-align: right; font-size: .82rem; }
.zc-datos { color: var(--texto-2); font-size: .74rem; margin-top: .3rem; }
.tabla-costos { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.tabla-costos th { text-align: left; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-2); padding: .35rem .5rem;
  border-bottom: 1px solid var(--borde); }
.tabla-costos td { padding: .45rem .5rem; border-bottom: 1px solid var(--borde);
  font-size: .82rem; }
.tabla-costos th.num, .tabla-costos td.num { text-align: right; }
.fila-unidad { cursor: pointer; }
.fila-unidad:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); }
.graf-costos { width: 100%; height: auto; display: block; }
#tt-graf { position: absolute; z-index: 90; display: none; pointer-events: none;
  background: var(--panel, #222); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 8px; padding: .3rem .55rem; font-size: .76rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); }

/* costos v2: barras que se llenan + columnas ordenables + leyenda visible */
.zc-pista span { transition: width 1.1s cubic-bezier(.22,.8,.25,1); }
.leyenda-graf .cuadro { display: inline-block; vertical-align: -1px; }
.tabla-costos th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
.tabla-costos th.ordenable:hover { color: var(--texto); }
.tabla-costos th.ordenable.activo { color: var(--rosa); }

/* cuadrilla v2: función del integrante */
.mini-funcion button { padding: .15rem .55rem; font-size: .68rem; }

/* ---------- avisos (toast) y confirmación (2026-10-21) ---------- */
#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: .5rem; z-index: 1000;
  width: min(420px, calc(100vw - 32px)); }
.toast { position: relative; background: var(--panel); border: 1px solid var(--borde);
  border-left: 4px solid var(--azul-claro); border-radius: 12px; padding: .7rem 2.2rem .7rem .9rem;
  font-size: .88rem; line-height: 1.35; box-shadow: 0 8px 24px var(--sombra); animation: toast-in .2s ease-out; }
.toast.error { border-left-color: var(--peligro); }
.toast.alerta { border-left-color: var(--alerta); }
.toast.ok { border-left-color: var(--ok); }
.toast.fuera { opacity: 0; transition: opacity .3s; }
.toast-cerrar { position: absolute; right: .3rem; top: .3rem; border: none; background: none;
  padding: .2rem .5rem; font-size: 1.1rem; line-height: 1; color: var(--texto-2); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.confirmar-fondo { z-index: 900; }
.modal-confirmar { width: min(440px, 92vw); }
.modal-confirmar p { font-size: .95rem; line-height: 1.45; }
button.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; font-weight: 600; }
button.peligro:hover { filter: brightness(1.1); }

/* ---------- login, recuperación y cambio de clave ---------- */
.campo { display: grid; gap: .25rem; font-size: .8rem; color: var(--texto-2); }
.campo input { width: 100%; }
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 3rem; }
.ver-clave { position: absolute; right: .25rem; top: .2rem; border: none; background: none;
  padding: .3rem .5rem; font-size: 1rem; min-width: 44px; min-height: 36px; line-height: 1; }
.ver-clave:hover { border: none; background: var(--panel); }
.enlace-suave { font-size: .82rem; text-align: center; color: var(--texto-2); }
.enlace-suave:hover { color: var(--rosa); }
.pista { font-size: .76rem; color: var(--alerta); min-height: 1em; }
.texto-suave { font-size: .85rem; color: var(--texto-2); line-height: 1.4; }
button.usuario { background: none; border: 1px solid transparent; padding: .25rem .5rem; border-radius: 8px;
  color: var(--texto-2); font-size: .8rem; text-align: right; line-height: 1.25; }
button.usuario:hover { background: var(--panel-2); border-color: var(--borde); }

/* ---------- accesibilidad: foco visible con teclado ---------- */
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }