/* ================= temas: PRO (oscuro) y Clásico (claro) ================= */
:root, :root[data-tema="clasico"] {
  --fondo: #eef0ec; --panel: #ffffff; --panel-2: #f5f7f4; --borde: #d6dbd3; --borde-fuerte: #b9beb4;
  --texto: #1d211c; --texto-fuerte: #12171a; --texto-2: #59645e; --texto-3: #6e7871;
  --acento: #0d6e78; --acento-2: #0a5960; --acento-suave: #e3eff0; --sobre-acento: #ffffff;
  --ok: #1f7a3a; --ok-suave: #e5f2e5; --aviso: #9a5800; --aviso-suave: #fbf0dc;
  --alerta: #b8302a; --alerta-suave: #fbe6e4; --neutro: #6b7368; --neutro-suave: #eceee9;
  --azul: #1f5fa8; --violeta: #6247a8; --rosa: #a3306f;
  --barra: #ffffff; --barra-texto: #12171a; --barra-texto-2: #59645e;
  --input: #ffffff; --mapa: #e6edf0; --grilla: rgba(13, 110, 120, .07);
  --sombra: 0 1px 2px rgba(20, 24, 18, .06), 0 2px 8px rgba(20, 24, 18, .05);
  --filtro-mapa: none;
  color-scheme: light;
}
:root[data-tema="pro"] {
  --fondo: #05090e; --panel: #0a131d; --panel-2: #0c1824; --borde: #182635; --borde-fuerte: #2a3d52;
  --texto: #d5e2ee; --texto-fuerte: #eef6fb; --texto-2: #8fa5b8; --texto-3: #7890a5;
  --acento: #4fd8e8; --acento-2: #9cecf5; --acento-suave: rgba(79, 216, 232, .14); --sobre-acento: #05090e;
  --ok: #3ddc84; --ok-suave: rgba(61, 220, 132, .14); --aviso: #f5b041; --aviso-suave: rgba(245, 176, 65, .14);
  --alerta: #ff6b6b; --alerta-suave: rgba(255, 107, 107, .14); --neutro: #7890a5; --neutro-suave: #13212e;
  --azul: #8fb6ff; --violeta: #cbb3ff; --rosa: #ff9ecf;
  --barra: #070e16; --barra-texto: #eef6fb; --barra-texto-2: #8fa5b8;
  --input: #071019; --mapa: #071019; --grilla: rgba(79, 216, 232, .06);
  --sombra: 0 2px 10px rgba(0, 0, 0, .4);
  --filtro-mapa: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55);
  color-scheme: dark;
}
:root {
  --radio: 4px;
  --fuente: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 14px; color: var(--texto); background: var(--fondo); line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); }
.oculto { display: none !important; }
.mono { font-family: var(--mono); }

/* paneles con esquinas marcadas */
.panel { position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.panel::before, .panel::after { content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--acento); border-style: solid; opacity: .8; pointer-events: none; z-index: 3; }
.panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.titulo-panel { font-family: var(--titulo); font-weight: 600; letter-spacing: .14em; font-size: 12px; color: var(--texto-fuerte); text-transform: uppercase; }

/* ---------- encabezado ---------- */
.barra { min-height: 56px; display: flex; align-items: center; gap: 8px 24px; padding: 0 20px; background: var(--barra); color: var(--barra-texto); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 1000; }
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--titulo); font-weight: 700; font-size: 15px; letter-spacing: .12em; white-space: nowrap; text-transform: uppercase; }
.marca svg { flex: none; color: var(--acento); }
.marca small { font-family: var(--fuente); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--barra-texto-2); font-size: 12px; }
.pestanas { display: flex; gap: 2px; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.pestanas button { background: none; border: 0; color: var(--barra-texto-2); padding: 0 12px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas button:hover { color: var(--barra-texto); }
.pestanas button.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 16px; white-space: nowrap; font-size: 13px; color: var(--barra-texto-2); }
.usuario button { background: transparent; border: 1px solid var(--borde-fuerte); color: var(--barra-texto); border-radius: 2px; padding: 4px 10px; cursor: pointer; }
.usuario button:hover { border-color: var(--acento); color: var(--acento); }
.reloj { font-family: var(--titulo); font-size: 19px; font-weight: 600; color: var(--barra-texto); letter-spacing: .06em; }
.reloj small { font-size: 11px; color: var(--barra-texto-2); margin-left: 3px; }
.estado-gps { font-family: var(--mono); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.estado-gps i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.estado-gps.con-error i { background: var(--alerta); box-shadow: 0 0 8px var(--alerta); }
.selector-tema { display: flex; gap: 4px; }
.selector-tema button { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; min-height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 6px; }
.selector-tema button span:first-child { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--borde-fuerte); flex: none; }
.selector-tema button { white-space: nowrap; }
.selector-tema button[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }

.aviso-gps { position: sticky; top: 56px; z-index: 999; background: var(--alerta-suave); color: var(--alerta); border-bottom: 1px solid var(--alerta); padding: 8px 20px; font-size: 13px; font-weight: 600; }
.aviso-gps::before { content: "⚠ "; }

/* ---------- login (IntegraTruck · operador en la torre) ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(380px, 1fr); background: var(--fondo); }
.login-escena { position: relative; overflow: hidden; background: #061423; min-height: 340px; }
.login-escena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-lema { position: absolute; left: clamp(24px, 7%, 96px); right: 24px; top: clamp(24px, 7%, 64px); display: flex; flex-direction: column; gap: 6px; }
.login-lema span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: #c9d6e2; }
.login-lema b { font-family: var(--titulo); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; color: #eef6fb; max-width: 520px; }
.login-lado { display: flex; align-items: center; justify-content: center; padding: 48px 32px; border-left: 1px solid var(--borde); }
.login form { width: 100%; max-width: 360px; display: flex; flex-direction: column; }
.login-logo { width: 250px; height: auto; margin-bottom: 18px; }
.login h1 { font-family: var(--titulo); font-size: 24px; margin: 0 0 4px; letter-spacing: .02em; color: var(--texto-fuerte); }
.login p { margin: 0 0 20px; color: var(--texto-2); }
.login .selector-tema { justify-content: flex-start; margin-top: 14px; }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login-escena { min-height: 300px; } .login-lado { border-left: 0; padding: 28px 16px 40px; } }
/* logo según estilo */
[data-tema="pro"] .solo-clasico, [data-tema="clasico"] .solo-pro { display: none !important; }
.marca-icono { height: 30px; width: auto; flex: none; }
.marca-texto { font-family: var(--titulo); font-weight: 700; font-size: 18px; letter-spacing: .01em; text-transform: none; }
.marca-texto b { color: var(--barra-texto); font-weight: 700; } .marca-texto i { font-style: normal; color: #14a8ad; }
.demo-usuarios { margin-top: 18px; font-size: 12px; color: var(--texto-2); border-top: 1px solid var(--borde); padding-top: 12px; }
.demo-usuarios button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 3px 0; cursor: pointer; color: var(--acento); font-family: var(--mono); font-size: 12px; }
.login .selector-tema { justify-content: center; margin-top: 14px; }

/* ---------- formularios ---------- */
label.campo { display: block; margin-bottom: 12px; }
label.campo > span { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); margin-bottom: 4px; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: 2px; background: var(--input); color: var(--texto); min-height: 36px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
input:disabled { opacity: .7; }
input.invalido { border-color: var(--alerta); background: var(--alerta-suave); }
.ayuda { font-size: 12px; color: var(--texto-3); margin-top: 3px; }
.ayuda.error { color: var(--alerta); }
.ayuda.bien { color: var(--ok); }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; min-height: 36px; border-radius: 2px; border: 1px solid var(--borde-fuerte); background: var(--panel); color: var(--texto); cursor: pointer; font-weight: 550; text-decoration: none; }
.btn:hover { border-color: var(--acento); color: var(--acento); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-family: var(--titulo); letter-spacing: .06em; font-weight: 600; }
.btn.primario:hover { background: var(--acento-2); border-color: var(--acento-2); color: var(--sobre-acento); }
.btn.peligro { color: var(--alerta); border-color: var(--alerta); }
.btn.chico { padding: 4px 10px; min-height: 30px; font-size: 13px; }
.btn.ancho { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.mensaje { padding: 10px 12px; border-radius: 2px; margin-bottom: 12px; font-size: 13px; border-left: 3px solid currentColor; }
.mensaje.error { background: var(--alerta-suave); color: var(--alerta); }
.mensaje.ok { background: var(--ok-suave); color: var(--ok); }
.mensaje.info { background: var(--acento-suave); color: var(--acento); }

/* ---------- distribución con mapa ---------- */
.vista-mapa { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; height: calc(100vh - 56px); }
.lateral { background: var(--panel); border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; }
.lateral-cab { padding: 14px 16px 10px; border-bottom: 1px solid var(--borde); }
.lateral-cab h2 { font-family: var(--titulo); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; color: var(--texto-fuerte); }
.lateral-cuerpo { overflow-y: auto; flex: 1; min-height: 0; }
.mapa-contenedor { position: relative; min-height: 0; }
.mapa { position: absolute; inset: 0; background-color: var(--mapa);
  background-image: linear-gradient(var(--grilla) 1px, transparent 1px), linear-gradient(90deg, var(--grilla) 1px, transparent 1px); background-size: 40px 40px; }
.mapa .capa-calles { filter: var(--filtro-mapa); }
.mapa.leaflet-container { background-color: var(--mapa); font-family: var(--fuente); }
.leaflet-bar a { background: var(--panel) !important; color: var(--texto) !important; border-color: var(--borde) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--texto); }
.leaflet-control-attribution { background: var(--panel) !important; color: var(--texto-3) !important; }
.leaflet-control-attribution a { color: var(--acento) !important; }
.mapa-leyenda { position: absolute; left: 12px; bottom: 22px; z-index: 500; background: var(--panel); border: 1px solid var(--borde); padding: 6px 10px; font-family: var(--mono); font-size: 11px; color: var(--texto-2); display: flex; gap: 12px; flex-wrap: wrap; text-transform: uppercase; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros button { border: 1px solid var(--borde); background: transparent; color: var(--texto-2); border-radius: 2px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.filtros button.activa { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }

/* ---------- tarjetas de servicio ---------- */
.tarjeta { padding: 12px 16px; border-bottom: 1px solid var(--borde); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.tarjeta:hover { background: var(--panel-2); }
.tarjeta.sel { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.tarjeta .t1 { font-weight: 600; font-family: var(--mono); font-size: 13px; color: var(--texto-fuerte); }
.tarjeta .t2 { grid-column: 1 / -1; color: var(--texto-2); font-size: 12.5px; }
.tarjeta .t3 { grid-column: 1 / -1; color: var(--texto-3); font-size: 12px; }
.vacio { padding: 32px 16px; text-align: center; color: var(--texto-3); }

.chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 2px; white-space: nowrap; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .03em; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.creado, .chip.asignado { color: var(--texto-2); }
.chip.patente { color: var(--aviso); background: var(--aviso-suave); }
.chip.en_ruta { color: var(--acento); background: var(--acento-suave); }
.chip.entregado, .chip.en-linea { color: var(--ok); background: var(--ok-suave); }
.chip.anulado, .chip.sin-senal { color: var(--alerta); background: var(--alerta-suave); }

/* ---------- detalle ---------- */
.detalle { padding: 16px; }
.detalle-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.detalle-cab h3 { margin: 0; font-size: 22px; font-family: var(--titulo); letter-spacing: .06em; color: var(--texto-fuerte); }
.detalle-cab .sub { color: var(--texto-2); font-size: 13px; font-family: var(--mono); }
.volver { background: none; border: 0; color: var(--acento); cursor: pointer; padding: 0; margin-bottom: 10px; font-size: 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.seccion { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; margin-bottom: 12px; background: var(--panel); }
.seccion h4 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-3); font-family: var(--titulo); }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.datos dt { color: var(--texto-3); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.destacado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.destacado div { border: 1px solid var(--borde); padding: 8px 10px; background: var(--panel); min-width: 0; }
.destacado b { display: block; font-family: var(--titulo); font-size: 17px; line-height: 1.2; color: var(--acento); }
.destacado div + div b { color: var(--texto-fuerte); }
.destacado span { font-size: 11px; color: var(--texto-2); }
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { position: relative; padding: 0 0 12px 20px; font-size: 13px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 9px; height: 9px; background: var(--ok); }
.linea-tiempo li::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--borde-fuerte); }
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo small { display: block; color: var(--texto-3); font-family: var(--mono); font-size: 11.5px; }
.lista-camiones { display: grid; gap: 6px; margin-bottom: 10px; }
.camion { display: flex; align-items: center; gap: 10px; border: 1px solid var(--borde); border-radius: 2px; padding: 8px 10px; cursor: pointer; background: var(--panel); }
.camion:hover { border-color: var(--acento); }
.camion input { margin: 0; accent-color: var(--acento); }
.camion .pat { font-family: var(--mono); font-weight: 600; color: var(--texto-fuerte); }
.camion .info { margin-left: auto; text-align: right; font-size: 12px; color: var(--texto-3); }
.camion.ocupado { opacity: .5; cursor: not-allowed; }
.link-box { display: flex; gap: 6px; }
.link-box input { font-family: var(--mono); font-size: 12px; }

/* ---------- alertas ---------- */
.alerta-item { padding: 10px 14px; border-bottom: 1px solid var(--borde); border-left: 3px solid var(--aviso); cursor: pointer; }
.alerta-item:hover { background: var(--panel-2); }
.alerta-item.alta { border-left-color: var(--alerta); }
.alerta-item .nivel { font-size: 11px; letter-spacing: .12em; font-weight: 600; color: var(--aviso); text-transform: uppercase; }
.alerta-item.alta .nivel { color: var(--alerta); }
.alerta-item b { display: block; font-family: var(--mono); font-size: 13.5px; color: var(--texto-fuerte); margin-top: 2px; font-weight: 500; }
.alerta-item span { font-size: 12px; color: var(--texto-2); }
.subtitulo { padding: 10px 14px; font-family: var(--titulo); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-fuerte); font-weight: 600; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; }
.contador { background: var(--alerta); color: var(--sobre-acento); border-radius: 2px; font-family: var(--mono); font-size: 11px; padding: 1px 8px; font-weight: 600; letter-spacing: 0; }
.contador.ok { background: var(--ok); }

/* ---------- torre de control ---------- */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; }
.barra-filtros input, .barra-filtros select { width: auto; min-width: 190px; flex: 0 1 240px; min-height: 32px; padding: 5px 8px; font-size: 13px; }
.barra-filtros .ayuda { margin: 0 0 0 auto; font-family: var(--mono); }
.alertas-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-height: 220px; overflow-y: auto; }
.alertas-fila .alerta-item { border-right: 1px solid var(--borde); }
.marcador.destacado { box-shadow: 0 0 0 4px var(--acento-suave), 0 0 14px var(--acento); }
.torre { display: flex; flex-direction: column; gap: 12px; padding: 12px; min-height: calc(100vh - 56px); }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi { padding: 10px 14px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.kpi:hover { border-color: var(--acento); }
.kpi div { font-size: 11px; letter-spacing: .14em; color: var(--texto-2); text-transform: uppercase; }
.kpi b { display: block; font-family: var(--titulo); font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--texto-fuerte); }
.kpi.acento b { color: var(--acento); } .kpi.aviso b { color: var(--aviso); } .kpi.alerta b { color: var(--alerta); } .kpi.ok b { color: var(--ok); }
.torre-centro { display: grid; grid-template-columns: 290px minmax(0, 1fr) 360px; gap: 12px; height: 560px; }
.torre-col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.torre-col .scroll { overflow-y: auto; flex: 1; min-height: 0; }
.torre-mapa { position: relative; min-height: 0; overflow: hidden; }
.torre-mapa .titulo-panel { position: absolute; top: 12px; left: 50px; z-index: 600; background: var(--panel); padding: 3px 8px; border: 1px solid var(--borde); }
.proveedor-fila { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.proveedor-fila span:last-child { font-family: var(--mono); font-size: 12px; }
.sin-seleccion { padding: 28px 18px; color: var(--texto-3); text-align: center; }
.sin-seleccion b { display: block; font-family: var(--titulo); letter-spacing: .1em; color: var(--texto-2); margin-bottom: 6px; }
.tablero { overflow-x: auto; }
.tablero table { min-width: 960px; font-family: var(--mono); }
.tablero td { padding: 8px 14px; border-bottom: 0; white-space: nowrap; }
.tablero td.envuelve { white-space: normal; min-width: 160px; }
.tablero tbody tr:nth-child(even) { background: var(--panel-2); }
.tablero .fuerte { color: var(--texto-fuerte); font-weight: 600; }
.tablero .tenue { color: var(--texto-3); }
.estado-tablero { font-weight: 600; white-space: nowrap; }
.estado-tablero::before { content: "● "; }
.estado-tablero.en_ruta { color: var(--acento); } .estado-tablero.en_planta { color: var(--ok); }
.estado-tablero.patente, .estado-tablero.asignado { color: var(--aviso); } .estado-tablero.creado { color: var(--alerta); }
.estado-tablero.entregado { color: var(--ok); } .estado-tablero.entregado::before { content: "✓ "; }

/* ---------- páginas con tabla ---------- */
.pagina { max-width: 1320px; margin: 0 auto; padding: 20px 16px 40px; }
.pagina-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pagina-cab h2 { margin: 0; font-family: var(--titulo); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fuerte); }
.pagina-cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabla-env { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; position: relative; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-2); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borde); background: var(--panel-2); white-space: nowrap; font-family: var(--mono); }
td { padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr.clic { cursor: pointer; }
tbody tr.clic:hover, tbody tr.sel { background: var(--acento-suave) !important; }
td.mono { font-family: var(--mono); }
.subpestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; overflow-x: auto; }
.subpestanas button { background: none; border: 0; padding: 8px 12px; cursor: pointer; color: var(--texto-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.subpestanas button.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

/* ---------- modal y avisos ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(2, 6, 10, .6); z-index: 2000; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 16px 50px rgba(0,0,0,.35); }
.modal-cab { padding: 14px 20px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.modal-cab h3 { margin: 0; font-family: var(--titulo); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fuerte); }
.modal-cab button { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--texto-3); line-height: 1; }
.modal-cuerpo { padding: 16px 20px 20px; }
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 3000; background: var(--texto-fuerte); color: var(--fondo); padding: 10px 14px; border-radius: 2px; box-shadow: var(--sombra); max-width: 360px; }

/* ---------- marcadores ---------- */
.marcador { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--panel); display: grid; place-items: center; color: #fff; }
.marcador svg { width: 15px; height: 15px; }
.etiqueta-mapa { background: var(--panel) !important; color: var(--texto-fuerte) !important; border: 1px solid var(--acento) !important; border-radius: 0 !important; font-family: var(--mono); font-size: 11px !important; font-weight: 600; padding: 1px 6px !important; box-shadow: none !important; }
.etiqueta-mapa::before { display: none; }

/* ---------- pantallas medianas y celular ---------- */
@media (max-width: 1560px) { .usuario > span.nombre, .marca small { display: none; } }
@media (max-width: 1600px) { .usuario .estado-gps { display: none; } .pestanas button { padding: 0 10px; } }
@media (max-width: 1180px) { .marca-texto { display: none; } }
@media (max-width: 1280px) {
  .torre-centro { grid-template-columns: 260px minmax(0, 1fr) 320px; }
  .usuario .estado-gps, .usuario > span.nombre { display: none; }
}
@media (max-width: 1100px) {
  .torre-centro { grid-template-columns: 1fr; height: auto; }
  .torre-mapa { height: 55vh; }
  .torre-col { max-height: none; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .barra { gap: 8px 12px; padding: 0 12px; }
  .marca small, .marca-texto, .usuario [data-a=clave], .reloj { display: none; }
  .selector-tema button { padding: 0 8px; }
  .selector-tema .nombre-tema { display: none; }
  .vista-mapa { grid-template-columns: 1fr; grid-template-rows: 55vh auto; height: auto; }
  .lateral { border-right: 0; order: 1; }
  .mapa-contenedor { order: 0; height: 55vh; position: sticky; top: 56px; z-index: 1; }
  .lateral-cuerpo { overflow: visible; }
  .fila2 { grid-template-columns: 1fr; }
}

/* ================= geocercas en el mapa ================= */
.geo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; height: calc(100vh - 230px); min-height: 480px; }
.geo-mapa { position: relative; border: 1px solid var(--borde); border-radius: var(--radio); min-height: 420px; }
.mapa.satelite .leaflet-tile-pane { filter: none; }
.geo-panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; overflow-y: auto; }
.geo-panel h3 { margin: 4px 0 10px; font-family: var(--titulo); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fuerte); }
.geo-ayuda { margin: 0 0 16px; padding-left: 18px; color: var(--texto-2); font-size: 13px; display: grid; gap: 4px; }
.geo-sin { display: grid; gap: 4px; }
.geo-sin button { text-align: left; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 2px; padding: 6px 8px; cursor: pointer; display: grid; gap: 1px; }
.geo-sin button:hover { border-color: var(--acento); }
.geo-sin span { font-size: 12px; color: var(--texto-2); }
.geo-coord { padding: 6px 0; color: var(--texto-fuerte); }
.geo-botones { display: flex; gap: 8px; justify-content: flex-end; margin: 6px 0 10px; }
.geo-centro { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid; box-sizing: border-box; box-shadow: 0 0 0 2px rgba(0,0,0,.35); cursor: grab; }
.punto-geo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.geo-panel input[type=range] { width: 100%; accent-color: var(--acento); }
@media (max-width: 900px) { .geo-layout { grid-template-columns: 1fr; height: auto; } .geo-mapa { height: 60vh; } }

/* ================= torre de control compacta ================= */
.torre2 { display: grid; grid-template-columns: minmax(420px, 600px) minmax(0, 1fr); gap: 12px; padding: 12px; height: calc(100vh - 60px); min-height: 560px; }
.flota-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.flota-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.flota-cab .titulo, .cajon-cab .titulo { font-family: var(--titulo); font-weight: 600; letter-spacing: .14em; font-size: 12px; color: var(--texto-fuerte); text-transform: uppercase; }
.flota-cab .cuenta { font-size: 12px; color: var(--acento); }
.flota-cab input[type=search] { flex: 1; min-width: 100px; padding: 5px 9px; font-size: 13px; }
.flota-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--borde); }
.flota-filtros select { padding: 4px 8px; font-size: 12.5px; max-width: 190px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); cursor: pointer; }
.alternar { display: flex; border: 1px solid var(--borde); border-radius: 2px; overflow: hidden; }
.alternar button { border: 0; background: transparent; color: var(--texto-2); padding: 4px 10px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; cursor: pointer; }
.alternar button.activa { background: var(--acento-suave); color: var(--acento); }
.flota-cuerpo { overflow-y: auto; flex: 1; min-height: 0; }
.grupo-cab { display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 12px; background: var(--panel-2); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--texto-2); position: sticky; top: 0; z-index: 1; }
.fila-flota { width: 100%; display: grid; grid-template-columns: 10px 76px minmax(0, .9fr) minmax(0, 1.1fr) 132px 36px; gap: 8px; align-items: center; height: 30px; padding: 0 12px;
  border: 0; border-left: 2px solid transparent; background: transparent; color: var(--texto); text-align: left; font-size: 13px; cursor: pointer; }
.fila-flota:nth-of-type(even) { background: var(--panel-2); }
.fila-flota:hover { background: var(--acento-suave); }
.fila-flota.sel { background: var(--acento-suave); border-left-color: var(--acento); }
.fila-flota.cab { cursor: default; height: 26px; font-size: 10.5px; letter-spacing: .1em; color: var(--texto-2); text-transform: uppercase; background: var(--panel); border-bottom: 1px solid var(--borde); }
.fila-flota i { width: 8px; height: 8px; border-radius: 50%; }
.fila-flota > span, .fila-flota > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-flota b { color: var(--texto-fuerte); }
.fila-flota .fuerte { color: var(--texto-fuerte); font-weight: 500; }
.fila-flota .etapa { font-size: 10.5px; }
.fila-flota > span:last-child { text-align: right; font-size: 11px; color: var(--texto-2); }
.malo { color: var(--alerta) !important; }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; padding: 6px 8px 10px; }
.baldosa { text-align: left; padding: 6px 8px; background: var(--panel); border: 1px solid var(--borde); border-top: 3px solid; border-radius: 2px; cursor: pointer; color: var(--texto); display: grid; gap: 1px; min-width: 0; }
.baldosa:hover, .baldosa.sel { border-color: var(--acento); }
.baldosa .l1 { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; } .baldosa .l1 b { color: var(--texto-fuerte); }
.baldosa .l1 span { font-size: 10px; color: var(--texto-2); }
.baldosa .l2 { font-size: 11px; color: var(--texto-fuerte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baldosa .l3 { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.torre-mapa2 { position: relative; overflow: hidden; min-height: 0; }
.torre-mapa2 > .mapa { position: absolute; inset: 0; }
.torre-mapa2 .titulo-panel { position: absolute; top: 12px; left: 50px; z-index: 600; background: var(--panel); padding: 3px 8px; border: 1px solid var(--borde);
  font-family: var(--titulo); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fuerte); }
.btn-alertas { position: absolute; top: 10px; right: 12px; z-index: 650; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--panel);
  border: 1px solid var(--borde-fuerte); color: var(--texto); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; border-radius: 2px; cursor: pointer; }
.btn-alertas b { background: var(--neutro); color: var(--sobre-acento); padding: 0 6px; border-radius: 2px; }
.btn-alertas.hay { border-color: var(--alerta); color: var(--alerta); } .btn-alertas.hay b { background: var(--alerta); }
.ficha-camion { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 640; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; box-shadow: var(--sombra); }
.ficha-camion .pat { font-family: var(--titulo); font-size: 22px; letter-spacing: .06em; color: var(--texto-fuerte); }
.ficha-camion small { color: var(--texto-2); }
.ficha-camion .acciones { margin-left: auto; display: flex; gap: 6px; }
.cajon-alertas { position: absolute; top: 0; right: 0; bottom: 0; width: 410px; max-width: 100%; z-index: 700; background: var(--panel); border-left: 1px solid var(--alerta);
  display: flex; flex-direction: column; box-shadow: -16px 0 32px rgba(0, 0, 0, .25); }
.cajon-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.cajon-cab .cerrar { margin-left: auto; width: 32px; height: 32px; background: transparent; border: 1px solid var(--borde); color: var(--texto-2); border-radius: 2px; cursor: pointer; font-size: 18px; }
.cajon-cuerpo { overflow-y: auto; flex: 1; }
.alerta-item.aviso { border-left-color: var(--acento); } .alerta-item.aviso .nivel { color: var(--acento); }
.regla { padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.regla.apagada { opacity: .55; }
.regla .r1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.regla .r1 b { color: var(--texto-fuerte); }
.regla .r2 { margin: 6px 0 0 24px; color: var(--texto-2); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.regla .r2 input { width: 56px; padding: 3px 6px; font-family: var(--mono); text-align: right; }
.regla .r3 { margin: 6px 0 0 24px; display: flex; gap: 14px; }
.regla select { padding: 2px 6px; font-family: var(--mono); font-size: 11px; }
.regla select.nivel-alta { color: var(--alerta); border-color: var(--alerta); } .regla select.nivel-media { color: var(--aviso); border-color: var(--aviso); }
.regla select.nivel-aviso { color: var(--acento); border-color: var(--acento); }
.cajon-pie { display: flex; justify-content: space-between; gap: 8px; padding: 12px; position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--borde); }
@media (max-width: 1000px) {
  .torre2 { grid-template-columns: 1fr; height: auto; }
  .flota-panel { max-height: 60vh; }
  .torre-mapa2 { height: 70vh; }
  .fila-flota { grid-template-columns: 10px 70px minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .fila-flota .etapa, .fila-flota.cab > span:nth-child(5) { display: none; }
}

/* ================= Mis servicios ================= */
.pagina.ancha { max-width: 1600px; }
.kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.mis-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.mis-lado { display: flex; flex-direction: column; gap: 12px; }
.acciones-cab { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; letter-spacing: 0; text-transform: none; font-family: var(--fuente); font-weight: 400; }
.acciones-cab input { padding: 4px 8px; font-size: 13px; width: 220px; }
.tabla-env.sin-borde { border: 0; border-radius: 0; }
.tabla-mis td { font-size: 13px; }
.tabla-mis tr.falta td:first-child { box-shadow: inset 2px 0 0 var(--aviso); }
.etapa-txt { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.asignar-inline { display: flex; gap: 4px; }
.asignar-inline select { padding: 3px 6px; font-family: var(--mono); font-size: 12px; border-color: var(--aviso); max-width: 150px; }
.celda-patente { white-space: nowrap; }
.pool-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--borde); }
.pool-item > div { flex: 1; min-width: 0; } .pool-item small { display: block; color: var(--texto-2); font-size: 12px; }
.ayuda-lista { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; font-size: 13px; color: var(--texto); }
@media (max-width: 1100px) { .mis-grid { grid-template-columns: 1fr; } .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= detalle: estructura, horas libres, confirmación ================= */
.estructura { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.estructura .etapa { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--borde); border-left: 3px solid var(--borde-fuerte); border-radius: 2px; }
.estructura .etapa.hecho { border-left-color: var(--ok); } .estructura .etapa.curso { border-left-color: var(--acento); background: var(--acento-suave); }
.estructura .n { font-family: var(--titulo); font-weight: 700; color: var(--texto-3); }
.estructura .hecho .n { color: var(--ok); } .estructura .curso .n { color: var(--acento); }
.estructura b { font-size: 13px; color: var(--texto-fuerte); } .estructura small { display: block; color: var(--texto-2); font-size: 12px; }
.estructura .t { font-family: var(--mono); font-size: 11.5px; color: var(--texto-2); text-align: right; }
.reloj-libre { margin-bottom: 10px; } .reloj-libre small { color: var(--texto-2); font-size: 12px; }
.fila-reloj { display: flex; justify-content: space-between; align-items: baseline; }
.fila-reloj span { font-family: var(--titulo); font-size: 18px; font-weight: 700; } .fila-reloj span small { font-size: 12px; }
.barra-libre { height: 7px; background: var(--neutro-suave); margin: 4px 0; } .barra-libre i { display: block; height: 100%; }
.aviso-confirmar { border: 1px solid var(--aviso); background: var(--aviso-suave); border-radius: var(--radio); padding: 12px; margin-bottom: 12px; display: grid; gap: 6px; }
.aviso-confirmar span { color: var(--texto-2); font-size: 13px; }
.chip.etapa-por_confirmar { color: var(--aviso); background: var(--aviso-suave); }
.chip.etapa-finalizado { color: var(--ok); background: var(--ok-suave); }
.chip.etapa-standby { color: var(--texto-2); }
details.seccion summary { cursor: pointer; list-style: revert; }
.modal.modal-detalle { max-width: 1280px; height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.detalle-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; flex: 1; min-height: 0; }
.detalle-grid > .mapa { position: relative; min-height: 300px; }
.detalle-panel { overflow-y: auto; border-left: 1px solid var(--borde); }
@media (max-width: 900px) { .detalle-grid { grid-template-columns: 1fr; grid-template-rows: 40vh auto; } .modal.modal-detalle { height: auto; overflow-y: auto; } }

/* ================= formularios anchos: servicio manual y planilla ================= */
.modal.modal-ancho { max-width: 1040px; }
.form-servicio section { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 12px; }
.form-servicio h4 { margin: 0 0 12px; display: flex; gap: 10px; align-items: center; font-family: var(--titulo); letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: var(--texto-fuerte); }
.form-servicio h4 span { color: var(--acento); font-size: 17px; }
.g2, .g3, .g4 { display: grid; gap: 0 12px; } .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)); }
.g3 .doble { grid-column: span 2; }
.con-boton { display: flex; gap: 6px; align-items: center; } .con-boton > select, .con-boton > input { flex: 1; min-width: 0; }
.lista-plantas { display: grid; gap: 4px; margin: 4px 0 8px; }
.planta-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 2px; background: var(--panel-2); }
.planta-item b { flex: 1; font-weight: 500; }
.planta-item .n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--acento-suave); color: var(--acento); font-family: var(--mono); font-size: 12px; }
.chk-grande { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
.bloque-gas { margin-bottom: 10px; }
.zona-archivo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border: 1px dashed var(--acento); border-radius: var(--radio); cursor: pointer; background: var(--acento-suave); }
.zona-archivo.encima { background: var(--acento); color: var(--sobre-acento); }
.zona-archivo span { color: var(--texto-2); font-size: 13px; }
.resumen-planilla { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 14px 0 10px; font-family: var(--mono); font-size: 12px; }
.resumen-planilla b { font-family: var(--fuente); font-size: 14px; }
.resumen-planilla .ok, .txt-ok { color: var(--ok); } .resumen-planilla .acento, .txt-acento { color: var(--acento); }
.resumen-planilla .alerta, .txt-alerta { color: var(--alerta); } .resumen-planilla .aviso { color: var(--aviso); } .resumen-planilla .tenue, .txt-tenue { color: var(--texto-2); }
.dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
pre.codigo { white-space: pre-wrap; word-break: break-all; background: var(--panel-2); border: 1px solid var(--borde); padding: 10px; font-family: var(--mono); font-size: 12px; border-radius: 2px; }
@media (max-width: 760px) { .g2, .g3, .g4, .dos-col { grid-template-columns: 1fr; } .g3 .doble { grid-column: auto; } }

/* ajustes finos */
.regla select { width: auto; min-width: 86px; }
.acciones-cab input[type=search] { width: 220px; flex: 0 0 220px; }
.tabla-mis td { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; padding-top: 7px; padding-bottom: 7px; }
.tabla-mis td.celda-patente { max-width: none; overflow: visible; }
.mis-grid .subtitulo { flex-wrap: wrap; gap: 8px; }
details.seccion > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary .btn { pointer-events: none; }

/* ===================== 2026.10.31a: listas desplegables, bitácora, polígonos, prueba ===================== */
/* Lista desplegable con búsqueda */
.combo { position: relative; display: flex; align-items: stretch; width: 100%; }
.combo .combo-txt { flex: 1; min-width: 0; padding-right: 30px !important; cursor: pointer; text-overflow: ellipsis; }
.combo .combo-txt:focus { cursor: text; }
.combo .combo-flecha { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 28px; border: 0; background: transparent;
  color: var(--texto-2); cursor: pointer; font-size: 12px; transition: transform .15s; }
.combo.abierto .combo-flecha { transform: rotate(180deg); color: var(--acento); }
.combo.deshabilitado { opacity: .6; pointer-events: none; }
.combo.chico .combo-txt { padding: 4px 26px 4px 8px !important; font-family: var(--mono); font-size: 12px; min-width: 150px; border-color: var(--aviso); }
.combo.chico.con-valor .combo-txt { border-color: var(--acento); }
.combo-lista { position: fixed; z-index: 3000; background: var(--panel); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28); overflow-y: auto; max-width: min(520px, calc(100vw - 16px)); padding: 4px 0; }
.combo-op { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 12px; cursor: pointer; font-size: 13.5px; color: var(--texto); }
.combo-op small { color: var(--texto-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.combo-op.activa { background: var(--acento-suave); }
.combo-op.sel span { font-weight: 600; color: var(--acento); }
.combo-op.sel span::before { content: "✓ "; }
.combo-op.vacio { color: var(--texto-2); font-style: italic; }
.combo-op.apagado { opacity: .55; }
.combo-grupo { padding: 8px 12px 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3);
  border-top: 1px solid var(--borde); margin-top: 2px; }
.combo-grupo:first-child { border-top: 0; margin-top: 0; }
.combo-nada { padding: 9px 12px; color: var(--texto-2); font-size: 13px; }
.combo-accion { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--borde); background: var(--panel-2);
  color: var(--acento); padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.combo-accion:hover { background: var(--acento-suave); }
.form-servicio .campo > .combo, .campo > .combo { margin-top: 0; }
.asignar-inline { align-items: center; }
.asignar-inline .combo { width: auto; }
.tabla-mis .sub { font-size: 11.5px; color: var(--texto-2); font-weight: 400; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* Asignación de camión según transporte */
.filtro-camiones { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.filtro-camiones input[type=search] { flex: 1; }
.filtro-camiones .chk { white-space: nowrap; font-size: 12.5px; color: var(--texto-2); }
.camion.ajeno { border-style: dashed; }
.camion.ajeno .pat { color: var(--texto-2); }

/* Botón y ventana de bitácora */
.btn-bitacora { margin: 0 0 12px; justify-content: center; border-color: var(--acento); color: var(--acento); font-weight: 600; }
.btn-bitacora:hover { background: var(--acento-suave); }
.modal.modal-bitacora { max-width: 1180px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal-bitacora .modal-cuerpo { overflow-y: auto; }
.bitacora .subtitulo { padding-left: 0; padding-right: 0; }
.bit-cab { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto; gap: 18px; align-items: center;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel-2); padding: 12px 16px; margin-bottom: 14px; }
.bit-cab > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bit-cab small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.bit-cab b { color: var(--texto-fuerte); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bit-cab a { font-size: 12px; }
.bit-pat b { font-family: var(--titulo); font-size: 24px; letter-spacing: .02em; }
.bit-pat span { color: var(--texto-2); font-size: 12px; }
.bit-estado { border: 1px solid; background: transparent; font-weight: 600; white-space: nowrap; }
.pasos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 6px; overflow-x: auto; }
.paso { position: relative; border: 1px solid var(--borde); border-top: 3px solid var(--borde-fuerte); border-radius: 2px; padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paso .n { font-family: var(--titulo); font-weight: 700; color: var(--texto-3); font-size: 13px; }
.paso small { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); }
.paso b { font-size: 13px; color: var(--texto-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paso .t { font-size: 11.5px; color: var(--texto-2); }
.paso.hecho { border-top-color: var(--ok); } .paso.hecho .n { color: var(--ok); }
.paso.curso { border-top-color: var(--acento); background: var(--acento-suave); } .paso.curso .n { color: var(--acento); }
.aviso-final { border: 1px solid var(--ok); background: var(--ok-suave); border-radius: var(--radio); padding: 12px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.aviso-final span { color: var(--texto-2); font-size: 13px; } .aviso-final .acciones { margin-left: auto; }
.bit-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.tabla-bitacora td { vertical-align: top; font-size: 13px; }
.tabla-bitacora td:first-child { white-space: nowrap; color: var(--texto-2); }
.reglas-servicio { margin: 0; padding-left: 18px; color: var(--texto-2); font-size: 12.5px; display: grid; gap: 6px; }
.chip.neutro { background: var(--neutro-suave); color: var(--texto-2); }
@media (max-width: 900px) {
  .bit-cab { grid-template-columns: 1fr 1fr; }
  .bit-pat { grid-column: 1 / -1; }
  .bit-grid { grid-template-columns: 1fr; }
}

/* Paneles plegables (stand-by) */
details.plegable > summary { cursor: pointer; list-style: none; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: "▾"; margin-left: 8px; color: var(--texto-3); }
details.plegable[open] > summary::after { content: "▴"; }
details.plegable .contador { background: var(--aviso); }
button.pool-item { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--borde); color: inherit; font: inherit; cursor: pointer; }
button.pool-item:hover { background: var(--panel-2); }

/* Geocercas: polígono */
.geo-vertice { width: 14px; height: 14px; background: #fff; border: 3px solid; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(0,0,0,.4); cursor: grab; }
.geo-medio { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.75); border: 2px solid; box-sizing: border-box; cursor: copy; opacity: .8; }
.geo-mapa.dibujando { cursor: crosshair; }
.geo-mapa.dibujando .leaflet-interactive { cursor: crosshair; }
.alternar.ancho { width: 100%; } .alternar.ancho button { flex: 1; padding: 7px 10px; }

/* Ambiente de prueba */
.banner-prueba { background: repeating-linear-gradient(45deg, var(--aviso), var(--aviso) 12px, #c97a00 12px, #c97a00 24px); color: #1d1300;
  text-align: center; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; padding: 4px 8px; }
.tabla-mis td { vertical-align: top; }
.tabla-mis .sub { max-width: 230px; }
.mis-grid > section.panel { min-width: 0; }
.mis-grid .tabla-env { overflow-x: auto; }
.tabla-mis td.celda-bit { padding-left: 0; padding-right: 10px; width: 1%; }
.btn.icono { padding: 3px 8px; font-size: 14px; line-height: 1; }
.tabla-mis td:nth-child(2), .tabla-mis td:nth-child(3) { max-width: 170px; }
.tabla-mis .celda-patente .chip { font-size: 10px; padding: 1px 5px; }
.barra-masiva { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; border: 1px solid var(--acento); background: var(--acento-suave);
  border-radius: var(--radio); padding: 8px 12px; margin-bottom: 10px; font-size: 13.5px; }
.barra-masiva .combo { width: 260px; }
.pagina-cab .der .combo { width: 230px; }

/* ===================== 2026.11.01a: recorrido del camión ===================== */
.bit-tabs { margin-bottom: 14px; width: max-content; max-width: 100%; }
.bit-tabs button { padding: 7px 14px; }
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.rec-mapa { position: relative; min-height: 430px; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.rec-mapa .mapa { position: absolute; inset: 0; }
.rec-leyenda { position: absolute; left: 8px; bottom: 8px; z-index: 500; display: flex; flex-wrap: wrap; gap: 4px 10px; background: var(--panel);
  border: 1px solid var(--borde); padding: 5px 8px; font-size: 11.5px; color: var(--texto-2); max-width: calc(100% - 16px); }
.rec-leyenda i { display: inline-block; width: 14px; height: 4px; margin-right: 5px; vertical-align: middle; }
.rec-leyenda i.parada-ley { width: 14px; height: 14px; border-radius: 50%; background: var(--aviso); color: #1d1300; font-size: 8px; font-style: normal; text-align: center; line-height: 14px; font-weight: 700; }
.rec-lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rec-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rec-kpis > div { border: 1px solid var(--borde); border-radius: 2px; padding: 7px 9px; background: var(--panel-2); }
.rec-kpis small { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.rec-kpis b { font-size: 16px; color: var(--texto-fuerte); }
.rec-play { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; border: 1px solid var(--acento); border-radius: var(--radio); padding: 10px; background: var(--acento-suave); }
.rec-play select { padding: 4px 6px; font-size: 12px; }
.rec-play input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--acento); }
.rec-lectura { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.rec-lectura span { color: var(--texto-2); }
.rec-paradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.rec-paradas li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 2px; cursor: pointer; }
.rec-paradas li:hover { background: var(--panel-2); }
.rec-paradas .n { font-family: var(--titulo); font-weight: 700; color: var(--aviso); }
.rec-paradas b { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rec-paradas small { color: var(--texto-2); font-size: 11.5px; }
.rec-paradas .t { font-size: 12px; }
.rec-graf { margin-top: 12px; }
.graf-vel { width: 100%; height: 130px; display: block; border: 1px solid var(--borde); border-radius: 2px; background: var(--panel-2); cursor: crosshair; }
.graf-vel .ref80 { stroke: var(--alerta); stroke-dasharray: 6 5; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.graf-vel .ref-txt { fill: var(--alerta); font-size: 11px; font-family: var(--mono); }
.graf-vel .franja-parada { fill: var(--aviso); opacity: .18; }
.graf-vel .cursor { stroke: var(--texto-fuerte); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.graf-ejes { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-3); margin-top: 3px; }
.rec-ini, .rec-fin, .rec-parada { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 9px var(--mono);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.5); }
.rec-ini { background: var(--ok); color: #fff; } .rec-fin { background: var(--azul); color: #fff; } .rec-parada { background: var(--aviso); color: #1d1300; }
.bloque-chofer { border-left: 3px solid var(--acento); padding-left: 10px; }
@media (max-width: 900px) { .rec-grid { grid-template-columns: 1fr; } .rec-mapa { min-height: 320px; } }

/* ===================== 2026.11.03a: torre con mapa principal, capas, mosaico compacto ===================== */
.torre3 { padding: 12px; height: calc(100vh - 60px); min-height: 560px; box-sizing: border-box; }
.torre-mapa3 { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); --ancho-flota: 0px; }
.torre-mapa3 > .mapa { position: absolute; inset: 0; }
.torre-mapa3 .leaflet-top.leaflet-left { left: calc(var(--ancho-flota) + 16px); transition: left .15s; }
.panel-flota { position: absolute; left: 10px; top: 10px; bottom: 10px; z-index: 660; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 14px 36px rgba(0, 0, 0, .35); }
.panel-flota .flota-cab { flex-wrap: wrap; }
.panel-flota .alternar button[data-ancho] { min-width: 28px; font-size: 13px; padding: 2px 8px; }
.tirador { position: absolute; right: -7px; top: 50%; width: 12px; height: 64px; margin-top: -32px; background: var(--panel-2); border: 1px solid var(--acento);
  border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: ew-resize; touch-action: none; z-index: 2; }
.tirador i { width: 2px; height: 2px; background: var(--acento); }
.pestana-flota { position: absolute; left: 10px; top: 10px; z-index: 660; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  background: var(--panel); border: 1px solid var(--acento); border-radius: var(--radio); color: var(--texto-fuerte); cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  font-family: var(--titulo); letter-spacing: .1em; }
.pestana-flota .acento { color: var(--acento); } .pestana-flota .ico { color: var(--acento); font-size: 16px; }
.pestana-flota .resumen { display: flex; gap: 8px; font-size: 11px; letter-spacing: 0; }
button.grupo-cab { width: 100%; border-left: 0; border-right: 0; cursor: pointer; text-align: left; }
.botones-mapa { position: absolute; top: 10px; right: 12px; z-index: 650; display: flex; gap: 8px; }
.botones-mapa .btn-alertas { position: static; }
#btn-capas { border-color: var(--acento); color: var(--acento); }
.torre-mapa3 .ficha-camion { left: calc(var(--ancho-flota) + 22px); }
.mosaico2 { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; padding: 8px 10px 10px; }
.baldosa2 { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; background: var(--panel-2); border: 1px solid var(--borde);
  border-left: 3px solid; border-radius: 3px; color: var(--texto); font: inherit; cursor: pointer; min-width: 0; }
.baldosa2:hover, .baldosa2.sel { border-color: var(--acento); }
.baldosa2 .b1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.baldosa2 .b1 b { font-family: var(--titulo); font-size: 14.5px; color: var(--texto-fuerte); letter-spacing: .02em; }
.baldosa2 .b1 svg { width: 54px; height: 18px; flex: none; }
.baldosa2 .b2, .baldosa2 .b3 { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; min-width: 0; }
.baldosa2 .b2 > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baldosa2 .b2 i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.baldosa2 .b2 b { font-size: 11.5px; color: var(--texto-fuerte); }
.baldosa2 .b2 .malo { color: var(--alerta); }
.baldosa2 .b3 > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baldosa2 .fuerte { color: var(--texto-fuerte); font-weight: 600; } .baldosa2 .tenue { color: var(--texto-2); }
.baldosa2 .chip-etapa { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; padding: 1px 5px; background: var(--panel); border-radius: 2px; white-space: nowrap; flex: none; }
.baldosa2 .b4 { font-family: var(--mono); font-size: 9.5px; }
/* cajón de capas */
.cajon-capas { position: absolute; top: 52px; right: 12px; width: 310px; max-height: calc(100% - 64px); z-index: 700; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.capas-cuerpo { padding: 4px 12px 12px; }
.capas-tit { margin: 12px 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--texto-2); text-transform: uppercase; }
.fondos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fondos button { display: flex; flex-direction: column; gap: 4px; padding: 4px; background: transparent; border: 1px solid var(--borde); border-radius: 3px; cursor: pointer; color: var(--texto); font: inherit; font-size: 11.5px; }
.fondos button.activa { border-color: var(--acento); color: var(--acento); }
.fondos button span { display: block; height: 38px; border-radius: 2px; background-size: cover; }
.fondo-calles span { background: linear-gradient(135deg, #e8e4da 0 40%, #f6d9a8 40% 44%, #e8e4da 44% 70%, #b9dba5 70%); }
.fondo-satelite span { background: radial-gradient(circle at 30% 40%, #6b7d4a, #3d4a2c 60%, #2a3322); }
.fondo-hibrido span { background: linear-gradient(120deg, transparent 45%, #ffd27a 45% 48%, transparent 48%), radial-gradient(circle at 30% 40%, #6b7d4a, #3d4a2c 60%, #2a3322); }
.fondo-oscuro span { background: linear-gradient(135deg, #1b2028 0 40%, #3a4250 40% 44%, #1b2028 44%); }
.fondo-terreno span { background: repeating-radial-gradient(circle at 60% 60%, #e8dcc0 0 6px, #d8c8a2 6px 8px); }
.interruptor { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; background: transparent; border: 0; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.interruptor small { display: block; font-size: 11px; color: var(--texto-2); }
.interruptor i { position: relative; flex: none; width: 34px; height: 18px; border-radius: 9px; background: var(--borde-fuerte); }
.interruptor i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.interruptor i.on { background: var(--acento); } .interruptor i.on::after { left: 18px; }
.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--borde); border-radius: 3px; overflow: hidden; }
.segmento button { min-height: 32px; background: transparent; border: 0; border-right: 1px solid var(--borde); color: var(--texto-2); font: inherit; font-size: 12px; cursor: pointer; }
.segmento button:last-child { border-right: 0; } .segmento button.activa { background: var(--acento-suave); color: var(--acento); }
/* marcadores vectoriales */
.marcador-vector { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); transform-origin: 50% 50%; }
.marcador-vector svg { width: 100%; height: 100%; display: block; }
.marcador-vector.destacado { filter: drop-shadow(0 0 6px var(--acento)) drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.marcador-grupo { width: 34px; height: 34px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); border: 3px solid var(--panel);
  display: grid; place-items: center; font: 700 13px var(--mono); box-shadow: 0 0 0 4px var(--acento-suave); }
.leaflet-tooltip.etiqueta-geo { background: rgba(10, 19, 29, .82); color: #eef6fb; border: 0; box-shadow: none; font: 600 10.5px var(--mono); padding: 1px 5px; }
.leaflet-tooltip.etiqueta-geo::before { display: none; }
@media (max-width: 860px) {
  .torre3 { height: auto; padding: 8px; } .torre-mapa3 { height: 78vh; }
  .panel-flota { right: 10px; width: auto !important; bottom: 40%; }
  .tirador { display: none; }
}

/* ===================== Clásico · Acero (barra gris acero azulado, acentos turquesa) ===================== */
:root[data-tema="clasico"] {
  --fondo: #e9edf1; --panel-2: #f1f4f8; --borde: #c5cfda; --borde-fuerte: #9fb2c6;
  --barra: linear-gradient(180deg, #3b5470 0%, #26394f 100%); --barra-texto: #ffffff; --barra-texto-2: #c4d0dd;
  --grilla: rgba(38, 57, 79, .06);
}
[data-tema="clasico"] .barra { background: var(--barra); border-bottom-color: #1b2a3a; }
[data-tema="clasico"] .barra .pestanas button { color: #d6e0ea; }
[data-tema="clasico"] .barra .pestanas button.activa { color: #5fe0e6; box-shadow: inset 0 -3px 0 #5fe0e6; }
[data-tema="clasico"] .barra .pestanas button:hover { color: #ffffff; }
[data-tema="clasico"] .barra .usuario > button, [data-tema="clasico"] .barra .selector-tema button { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .4); }
[data-tema="clasico"] .barra .selector-tema button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #5fe0e6; border-color: #5fe0e6; }
[data-tema="clasico"] .barra .reloj, [data-tema="clasico"] .barra .nombre { color: #ffffff; }
[data-tema="clasico"] .barra .reloj small, [data-tema="clasico"] .barra .estado-gps { color: #c4d0dd; }
[data-tema="clasico"] .barra .chip { background: rgba(255, 255, 255, .1); color: #5fe0e6; border-color: #5fe0e6; }
[data-tema="clasico"] .barra .marca-texto i { color: #5fe0e6; }
[data-tema="clasico"] .barra .marca .solo-clasico { display: none !important; }
[data-tema="clasico"] .barra .marca .solo-pro { display: inline !important; }
[data-tema="clasico"] .flota-cab, [data-tema="clasico"] .cajon-cab, [data-tema="clasico"] .lateral-cab, [data-tema="clasico"] .subtitulo { background: #d9e2ec; }
[data-tema="clasico"] .grupo-cab { background: #eef2f6; }
[data-tema="clasico"] .kpi { border-top: 3px solid #3b5470; }
[data-tema="clasico"] .tabla-env thead th, [data-tema="clasico"] table th { background: #d9e2ec; color: #26394f; }
/* Mis servicios: barra de fechas y grupos por día */
.barra-fechas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; margin-bottom: 12px; }
.barra-fechas > .btn { min-width: 38px; min-height: 36px; font-size: 16px; padding: 0 10px; }
.barra-fechas input[type=date] { width: auto; flex: 0 0 auto; min-height: 36px; padding: 0 10px; font-family: var(--mono); font-size: 13.5px; }
.barra-fechas > .btn[data-a] { font-size: 13px; }
.barra-fechas .dia-texto { font-size: 12px; letter-spacing: .1em; color: var(--texto-2); min-width: 58px; }
.barra-fechas .semana { padding: 6px 12px; border: 1px solid var(--borde-fuerte); background: var(--panel-2); font-family: var(--titulo); font-weight: 700; letter-spacing: .08em; color: var(--texto-fuerte); }
.barra-fechas .seg-periodo button { padding: 0 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; min-height: 36px; }
.barra-fechas .sep { width: 1px; height: 26px; background: var(--borde); }
.barra-fechas .filtrar { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; color: var(--texto-2); }
.barra-fechas .combo { width: 180px; }
.barra-fechas #f-bk { width: 130px; min-height: 32px; padding: 0 8px; }
.barra-fechas .cuenta-periodo { margin-left: auto; color: var(--acento); }
.tabla-mis tr.dia-cab td { background: var(--panel-2); padding: 6px 12px; font-family: var(--titulo); font-weight: 700; letter-spacing: .08em; color: var(--texto-fuerte); max-width: none; }
.tabla-mis tr.dia-cab td span:last-child { float: right; font-family: var(--mono); font-weight: 500; color: var(--texto-2); }
.tabla-mis tr.cerrado td { color: var(--texto-2); }
.tabla-mis td.celda-bit { width: auto; white-space: nowrap; }
.acciones-fila { display: inline-flex; align-items: center; gap: 6px; }
.acciones-fila .enviado { font-size: 10.5px; color: var(--ok); }
.btn.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-suave); }
/* Geocercas: buscador con lista, repetidas */
.buscador-geo { position: relative; }
.buscador-geo input { width: 260px; min-height: 36px; padding: 0 10px; }
.lista-geo { position: absolute; right: 0; top: calc(100% + 4px); width: 480px; max-height: 70vh; overflow-y: auto; z-index: 1200; background: var(--panel);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.lb-tit { padding: 8px 12px 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--texto-2); text-transform: uppercase; border-top: 1px solid var(--borde); }
.lb-tit:first-child { border-top: 0; }
.lb-item { width: 100%; display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 7px 12px; background: transparent; border: 0;
  text-align: left; font: inherit; color: var(--texto); cursor: pointer; }
.lb-item:hover { background: var(--acento-suave); }
.lb-item i { width: 10px; height: 10px; border-radius: 50%; }
.lb-item .pin { color: #ff8a1f; font-size: 15px; }
.lb-item b { display: block; font-size: 13.5px; color: var(--texto-fuerte); } .lb-item small { display: block; font-size: 11.5px; color: var(--texto-2); }
.lb-item mark { background: rgba(255, 210, 90, .45); color: inherit; }
.lb-item em, .rep-g em { font-style: normal; font-family: var(--mono); font-size: 10px; padding: 2px 6px; border: 1px solid; }
em.si { color: var(--ok); } em.no { color: var(--aviso); }
.lb-nota { padding: 7px 12px; font-size: 12px; color: var(--texto-2); }
.aviso-btn { border-color: var(--aviso); color: var(--aviso); }
.rep-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.rep-g { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 3px; }
.rep-g.queda { border-color: var(--ok); background: var(--ok-suave); }
.rep-g small { color: var(--texto-2); font-size: 12px; } .rep-g > span { margin-top: 4px; }
@media (max-width: 700px) { .lista-geo { width: calc(100vw - 32px); } .rep-grupo { grid-template-columns: 1fr; } }
/* Mis servicios: más compacta para que la columna de acciones (reporte, bitácora) quede siempre a la vista */
.tabla-mis td { max-width: 150px; padding-left: 7px; padding-right: 7px; }
.tabla-mis td:nth-child(2), .tabla-mis td:nth-child(3) { max-width: 140px; }
.tabla-mis .sub { max-width: 150px; }
.tabla-mis th { padding-left: 7px; padding-right: 7px; }
.tabla-mis .celda-patente .combo { width: 118px; flex: 0 0 118px; min-width: 0; }
.tabla-mis .celda-patente .combo input { min-width: 0; width: 100%; }
.tabla-mis .acciones-fila .btn { white-space: nowrap; }
.tabla-mis td:nth-child(4) { max-width: 130px; } .tabla-mis td:nth-child(5) { max-width: 125px; }
.tabla-mis td:nth-child(2) { max-width: 132px; }
.torre-mapa3:not(.con-flota) .leaflet-top.leaflet-left { top: 56px; }
/* ===================== Alertas preventivas (2026.11.04a) ===================== */
.kpi .kpi-sub { display: block; font-size: 11.5px; color: var(--texto-2); }
.chk-portomar { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto); cursor: pointer; }
.chk-portomar input { width: auto; min-height: 0; margin: 0; }
.panel-prev > summary { cursor: pointer; }
.prev-cuenta { display: inline-flex; gap: 5px; margin-left: auto; margin-right: 8px; }
.contador.urgente { background: var(--alerta); }
.panel-prev .contador:not(.urgente) { background: var(--neutro); }
.seg-nivel { display: flex; margin: 10px 12px 4px; }
.seg-nivel button { flex: 1; min-height: 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.prev-lista { max-height: 560px; overflow-y: auto; }
.prev-item { display: flex; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--borde); }
.prev-item.marcado { box-shadow: inset 4px 0 0 var(--acento); background: var(--acento-suave); }
.prev-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.prev-item.urgente .prev-ico { background: var(--alerta-suave); color: var(--alerta); }
.prev-item.aviso .prev-ico { background: var(--aviso-suave); color: var(--aviso); }
.prev-txt { flex: 1; min-width: 0; }
.prev-tit { display: flex; justify-content: space-between; gap: 8px; }
.prev-tit b { font-size: 13px; color: var(--texto-fuerte); }
.prev-tit .mono { flex: none; font-size: 10.5px; color: var(--texto-2); }
.prev-item.urgente .prev-tit .mono { color: var(--alerta); }
.prev-det { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-2); line-height: 1.4; }
.prev-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prev-ok { padding: 14px 12px; color: var(--ok); font-weight: 600; }
.prev-pie { margin: 0; padding: 8px 12px 10px; border-top: 1px solid var(--borde); font-size: 11.5px; }
.chip-prev { display: inline-block; margin-top: 3px; padding: 1px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip-prev.urgente { background: var(--alerta-suave); color: var(--alerta); }
.chip-prev.aviso { background: var(--aviso-suave); color: var(--aviso); }
.tabla-mis td:nth-child(5) .etapa-txt { display: block; }
.tabla-mis tr.por-tomar td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.tabla-mis tr.por-tomar { background: var(--acento-suave); }
.tabla-mis tr.marcado td { background: var(--acento-suave); }
.tabla-mis tr.marcado td:first-child { box-shadow: inset 4px 0 0 var(--acento); }
.tomar-inline { display: inline-flex; align-items: center; gap: 6px; }
.tomar-inline .tag-pt { font-size: 10px; letter-spacing: .06em; color: var(--acento); }
.campana { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 32px; padding: 0 8px; background: transparent; border: 1px solid var(--borde); color: var(--barra-texto, var(--texto)); cursor: pointer; }
.campana .n { position: absolute; top: -7px; right: -7px; min-width: 18px; padding: 0 4px; background: var(--alerta); color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center; border-radius: 2px; }
.campana .n.solo-aviso { background: var(--aviso); }
[data-tema="clasico"] .barra .campana { color: #fff; border-color: rgba(255, 255, 255, .4); }
.badge-tab { margin-left: 6px; min-width: 18px; padding: 0 5px; display: inline-block; background: var(--alerta); color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center; border-radius: 2px; vertical-align: 1px; }
.popup-prev { position: fixed; right: 18px; bottom: 18px; z-index: 3000; width: 320px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--alerta); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 10px 12px 12px; display: grid; gap: 8px; }
.popup-prev .pp-cab { display: flex; justify-content: space-between; align-items: center; color: var(--alerta); }
.popup-prev .pp-x { background: transparent; border: 0; color: var(--texto-2); font-size: 20px; cursor: pointer; min-width: 32px; min-height: 32px; }
.popup-prev .pp-item b { display: block; font-size: 13px; color: var(--texto-fuerte); }
.popup-prev .pp-item span { font-size: 12px; color: var(--texto-2); font-family: var(--mono); }
.tabla-prev td { vertical-align: middle; }
.tabla-prev select { width: auto; min-height: 32px; }
.con-unidad { display: inline-flex; align-items: center; gap: 6px; }
.con-unidad input { width: 80px; min-height: 32px; }
.chk-grande { width: 18px; height: 18px; min-height: 0; }
label.check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
label.check input { width: auto; min-height: 0; }
/* Híbrido claro: fotos más luminosas y nombres legibles encima */
.mapa .capa-hibrido-claro { filter: brightness(1.16) contrast(1.06) saturate(1.12); }
.fondo-hibrido_claro span { background: linear-gradient(120deg, transparent 45%, #b07ad0 45% 48%, transparent 48%), radial-gradient(circle at 30% 40%, #9bb06f, #6c7e4c 60%, #55643c); }
.tabla-prev .con-unidad input { width: 80px !important; flex: none; }