/* ================= 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;
  --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;
  --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 ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background-color: var(--fondo);
  background-image: linear-gradient(var(--grilla) 1px, transparent 1px), linear-gradient(90deg, var(--grilla) 1px, transparent 1px); background-size: 40px 40px; }
.login form { width: 100%; max-width: 380px; padding: 28px; box-shadow: var(--sombra); }
.login h1 { font-family: var(--titulo); font-size: 20px; margin: 0 0 4px; letter-spacing: .04em; color: var(--texto-fuerte); }
.login p { margin: 0 0 20px; color: var(--texto-2); }
.login .marca { color: var(--texto-fuerte); margin-bottom: 14px; }
.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 .leaflet-tile-pane { 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: 1480px) { .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; }
}