/* Carga y balanceo · marca Motocity */
:root {
  --azul: #0265BC;
  --azul-oscuro: #024d91;
  --azul-claro: #eaf3fc;
  --tinta: #142b43;
  --gris: #566a7d;
  --tenue: #8696a6;
  --borde: #dce5ee;
  --grilla: #e9eef3;
  --fondo: #f4f7fa;
  --blanco: #fff;
  --radio: 10px;

  /* Estados del servicio (paleta validada para daltonismo; siempre acompañada de ícono y nombre) */
  --e-waiting: #eda100;
  --e-assigned: #2a78d6;
  --e-in_progress: #eb6834;
  --e-returning: #6250d6;
  --e-done: #1baf7a;
  --e-aborted: #e34948;

  /* Niveles de alerta */
  --critica: #d03b3b;
  --advertencia: #fab219;
  --oportunidad: #0ca30c;
  --info: #8696a6;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  font-size: 15px; color: var(--tinta); background: var(--fondo);
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
h2 { font-size: 16px; font-weight: 700; margin: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Marca y botones */
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.marca__logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--azul); color: #fff; font-size: 15px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px;
  border-radius: 8px; border: 1px solid transparent; background: var(--azul); color: #fff; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--azul-oscuro); }
.btn--sec { background: var(--blanco); border-color: #c9ddec; color: var(--azul-oscuro); }
.btn--sec:hover { background: var(--azul-claro); }
.btn--texto { background: none; color: var(--gris); padding: 6px 10px; }
.btn--texto:hover { background: var(--fondo); color: var(--tinta); }
:focus-visible { outline: 3px solid #9cc7ee; outline-offset: 1px; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login__caja { width: min(380px, 100%); background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px; padding: 28px; }
.login__ayuda { color: var(--gris); margin: 8px 0 0; }
.login label { display: block; font-weight: 600; margin: 18px 0 6px; }
.login input { width: 100%; padding: 9px 11px; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 16px; }
.login .btn { width: 100%; }
.login__error { color: var(--critica); min-height: 1.2em; margin: 10px 0 0; }

/* Barra superior */
.barra {
  position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--blanco); border-bottom: 1px solid var(--borde);
}
.barra__fecha { color: var(--gris); }
.barra__espacio { flex: 1; }
.conexion { display: inline-flex; align-items: center; gap: 7px; color: var(--gris); font-size: 14px; }
.conexion i { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); }
.conexion.en-vivo i { background: var(--oportunidad); box-shadow: 0 0 0 3px #0ca30c26; }
.conexion.error i { background: var(--critica); }

.contenido { padding: 20px 24px 32px; max-width: 1500px; margin: 0 auto; }
.error-datos { background: #fdeeee; border: 1px solid #f0c4c4; color: #8e1d1d; padding: 10px 14px; border-radius: var(--radio); margin: 0 0 16px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.kpi__etiqueta { margin: 0; font-size: 13px; color: var(--gris); }
.kpi__valor { margin: 4px 0 0; font-size: 28px; font-weight: 700; line-height: 1.1; }
.kpi__detalle { margin: 4px 0 0; font-size: 13px; color: var(--gris); }
.kpi--alerta { border-color: #f0c4c4; background: #fff8f8; }
.kpi--alerta .kpi__valor { color: var(--critica); }

/* Tarjetas */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 16px; min-width: 0; }
.tarjeta__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.tarjeta__nota { margin: 0; color: var(--gris); font-size: 13px; }
.grilla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; }
.grilla > .tarjeta { margin-bottom: 16px; }
.grilla--mitad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .grilla, .grilla--mitad { grid-template-columns: minmax(0, 1fr); }
  .tarjeta--alertas { order: -1; }
}

/* Franja de estados (barra apilada) */
.franja { display: flex; gap: 2px; height: 28px; }
.franja__seg { min-width: 4px; border-radius: 4px; cursor: default; }
.franja__seg:hover { filter: brightness(0.92); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--gris); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda b { color: var(--tinta); }
.punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

/* Carga por motorista: una tarjeta por persona, con semáforo */
.carga { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.motorista { border: 1px solid var(--borde); border-left: 8px solid var(--oportunidad); border-radius: 10px; padding: 12px 14px; background: var(--blanco); cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.motorista:hover { background: var(--fondo); }
.motorista--amarillo { border-left-color: var(--advertencia); background: #fffaf0; }
.motorista--rojo { border-left-color: var(--critica); background: #fdf1f1; }
.motorista__cab h3 { margin: 0; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.motorista__etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.motorista__etiquetas:empty { display: none; }
.motorista__centro { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.motorista__numero { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--gris); font-size: 13px; line-height: 1.25; }
.motorista__numero b { font-size: 46px; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.semaforo { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff; background: var(--oportunidad); }
.motorista__numero--hechos b { font-size: 34px; color: var(--e-done); }
.semaforo i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ffffff40; font-style: normal; font-size: 12px; }
.semaforo--amarillo { background: #b97c00; }
.semaforo--rojo { background: var(--critica); }
.semaforo--extremo { background: #a31d1d; }
.semaforo--suicida { background: #1b1b1f; border: 1px solid #ef6a6a; animation: latido 1.4s ease-in-out infinite; }
.motorista--extremo { border-left-color: #a31d1d; background: #fbe4e4; }
.motorista--suicida { border-left-color: #1b1b1f; background: #f3d0d0; }
.semaforo--gris { background: var(--tenue); }
.motorista--gris { border-left-color: var(--tenue); opacity: .8; }
.motorista__datos { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }
.motorista__datos:first-of-type { color: var(--tinta); font-weight: 600; }

/* Alertas */
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alerta { display: grid; grid-template-columns: 24px 1fr; gap: 2px 8px; padding: 10px 12px; border-radius: 8px; border-left: 4px solid var(--info); background: var(--fondo); }
.alerta__icono { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; background: var(--info); }
.alerta__titulo { font-weight: 700; }
.alerta__detalle { color: var(--gris); font-size: 14px; }
.alerta--critica { border-color: var(--critica); background: #fdf1f1; }
.alerta--critica .alerta__icono { background: var(--critica); }
.alerta--advertencia { border-color: var(--advertencia); background: #fef8ea; }
.alerta--advertencia .alerta__icono { background: var(--advertencia); color: var(--tinta); }
.alerta--oportunidad { border-color: var(--oportunidad); background: #effaef; }
.alerta--oportunidad .alerta__icono { background: var(--oportunidad); }
.alertas__vacio { color: var(--gris); }

/* Ruta del día */
.selector-motorista { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.selector-motorista button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--blanco); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 14px; color: var(--gris); }
.selector-motorista button { font-size: 16px; padding: 6px 14px; border-width: 2px; }
.selector-motorista button[aria-selected="true"] { border-color: var(--c, var(--azul)); background: var(--c, var(--azul)); color: #fff; font-weight: 700; }
.selector-motorista button[aria-selected="true"] .color-motorista { background: #fff; }
.selector-motorista button.critica:not([aria-selected="true"]) { border-color: #f0c4c4; color: var(--critica); }
.selector-motorista small { opacity: .8; }
.ruta { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
@media (max-width: 1000px) { .ruta { grid-template-columns: minmax(0, 1fr); } }
.mapa { height: clamp(560px, 78vh, 960px); border-radius: 8px; border: 1px solid var(--borde); z-index: 0; background: #e9eef3; }
.ruta__lado { max-height: clamp(560px, 78vh, 960px); overflow-y: auto; }
.ruta__zonas { margin: 0 0 10px; font-size: 14px; color: var(--gris); }
.ruta__zonas b { color: var(--tinta); }
.ruta__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.parada { display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--grilla); cursor: pointer; }
.parada:hover, .parada.activa { border-color: var(--azul); background: var(--azul-claro); }
.parada--hecha { opacity: .7; }
.parada__num { grid-row: span 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.parada__cab { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.parada__cab b { font-variant-numeric: tabular-nums; }
.parada__zonas { font-weight: 600; }
.parada__detalle { font-size: 13px; color: var(--gris); }
.aprox { font-size: 11px; color: var(--tenue); border: 1px dashed var(--tenue); border-radius: 4px; padding: 0 4px; margin-left: 4px; white-space: nowrap; }
.marcador { min-width: 26px; height: 26px; padding: 0 5px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px #142b4366; white-space: nowrap; }
.marcador--aprox { border-style: dashed; opacity: .8; }
.marcador--dudosa { border: 2px dashed #d92d20; }
.mapa-aviso-gps { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; max-width: 90%; padding: 5px 12px; border-radius: 999px; background: #fff3f1; color: #b42318; border: 1px solid #d92d20; font-size: 13px; font-weight: 600; box-shadow: 0 1px 4px #0003; }
[data-tema="oscuro"] .mapa-aviso-gps { background: #3b1613; color: #ffb4a8; }
.alerta-gps { color: #b42318; font-weight: 600; }
.marcador--posicion { background: var(--tinta); font-size: 11px; }
.punto-mapa { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid; box-shadow: 0 1px 3px #142b4366; }
.linea-leyenda { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; }
.linea-leyenda--traslado { border-top: 2px dashed var(--tenue); }

/* Servicios por hora */
.por-hora { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr auto; height: 240px; }
.por-hora__eje-y { position: relative; font-size: 12px; color: var(--tenue); }
.por-hora__eje-y span { position: absolute; right: 6px; transform: translateY(50%); font-variant-numeric: tabular-nums; }
.por-hora__area { position: relative; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid #c3cfdb; }
.por-hora__linea { position: absolute; left: 0; right: 0; height: 1px; background: var(--grilla); }
.por-hora__col { position: relative; flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; height: 100%; justify-content: flex-start; }
.por-hora__col:hover { background: #0265bc0d; }
.por-hora__seg { width: 100%; max-width: 28px; margin: 0 auto; }
.por-hora__seg:last-child { border-radius: 4px 4px 0 0; }
.por-hora__ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--azul); }
.por-hora__ahora span { position: absolute; top: -2px; left: 4px; font-size: 12px; color: var(--azul); font-weight: 600; white-space: nowrap; }
.por-hora__ahora--fin span { left: auto; right: 4px; }
.por-hora__eje-x { grid-column: 2; display: flex; gap: 4px; font-size: 12px; color: var(--tenue); padding-top: 4px; }
.por-hora__eje-x span { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }

/* Tabla de servicios */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--blanco); border-radius: 999px; padding: 3px 11px; cursor: pointer; font-size: 14px; color: var(--gris); }
.filtros button[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-claro); color: var(--azul-oscuro); font-weight: 600; }
.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tenue); padding: 6px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 8px; border-bottom: 1px solid var(--grilla); vertical-align: top; }
.tabla td.num { white-space: nowrap; }
.tabla .recorrido { max-width: 380px; }
.tabla .recorrido small { display: block; color: var(--gris); }
.estado { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tabla tr.atrasado td:first-child { color: var(--critica); font-weight: 700; }

.tooltip { position: fixed; z-index: 2000; pointer-events: none; background: var(--tinta); color: #fff; font-size: 13px; line-height: 1.4; padding: 7px 10px; border-radius: 6px; max-width: 280px; box-shadow: 0 2px 8px #142b4340; }
.tooltip b { font-weight: 700; }
.pie { color: var(--tenue); font-size: 13px; text-align: center; margin: 8px 0 0; }

@media (max-width: 640px) {
  .barra { padding: 10px 16px; }
  .contenido { padding: 16px; }
  .kpi__valor { font-size: 24px; }
}

/* Turno según GeoVictoria */
.turno { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; white-space: nowrap; flex: none; margin-left: 4px; }
.turno--en_turno { background: #e6f6e6; color: #0b6b0b; }
.turno--colacion { background: #fef3d9; color: #8a5b00; }
.turno--salio { background: var(--grilla); color: var(--gris); }
.turno--fijo { background: #ece9fb; color: #4a3aa7; }
.turno--esporadico { background: #fdeef4; color: #9b2c5a; }
.marcador--turno { background: #fff; color: var(--tinta); border: 2px solid var(--tinta); }
.marcador--mini { display: inline-grid; min-width: 18px; height: 18px; font-size: 10px; padding: 0 3px; box-shadow: none; vertical-align: middle; }

/* Fijos y esporádicos que se suman al on demand */

/* Color de cada motorista y controles del mapa */
.color-motorista { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; flex: none; background: var(--c, currentColor); }
.selector-motorista button .color-motorista { background: var(--c); }
.motorista__cab h3 { display: flex; align-items: center; }
.ruta__controles { display: flex; gap: 8px; flex-wrap: wrap; }
.ruta__controles .btn[aria-pressed="true"] { background: var(--azul); color: #fff; border-color: var(--azul); }
.resumen { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--grilla); border-left: 8px solid var(--c); cursor: pointer; }
.resumen:hover { background: var(--fondo); }
.resumen__nombre { display: flex; align-items: center; font-weight: 700; font-size: 16px; }
.resumen__nombre .color-motorista { background: var(--c); }
.resumen__n { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.resumen__prox { grid-column: 1 / -1; font-size: 14px; color: var(--gris); }
.parada--proxima { border-color: var(--azul); background: var(--azul-claro); }
.parada__cab em { font-style: normal; font-weight: 700; color: var(--azul-oscuro); }
.marcador--grande { min-width: 34px; height: 34px; font-size: 15px; border-width: 3px; }

/* ---------- Lo importante ahora: indicadores grandes ---------- */
.kpis--grandes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis--grandes .kpi { padding: 16px 20px; }
.kpis--grandes .kpi__etiqueta { font-size: 16px; font-weight: 600; }
.kpis--grandes .kpi__valor { font-size: 52px; margin-top: 2px; }
.kpis--grandes .kpi__detalle { font-size: 15px; }
.kpi--ok .kpi__valor { color: var(--oportunidad); }
.kpi--aviso { border-color: #f1d7a1; background: #fffaf0; }
.kpi--aviso .kpi__valor { color: #b97c00; }
@media (max-width: 800px) { .kpis--grandes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis--grandes .kpi__valor { font-size: 40px; } }
.kpis-chicos { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px; padding: 10px 14px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--gris); font-size: 14px; }
.kpis-chicos b { color: var(--tinta); font-size: 16px; }

/* ---------- Servicios sin asignar ---------- */
.sin-asignar { border-left: 8px solid var(--critica); }
.sin-asignar--ok { border-left-color: var(--oportunidad); padding-top: 10px; padding-bottom: 10px; }
.sin-asignar__ok { margin: 0; font-weight: 700; font-size: 18px; color: var(--oportunidad); }
.sin-asignar__n { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px; background: var(--critica); color: #fff; font-size: 17px; vertical-align: middle; margin-left: 6px; }
.sin-asignar__lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sin-asignar__item { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(220px, 330px); align-items: center; gap: 4px 14px; padding: 8px 12px; border: 1px solid var(--grilla); border-radius: 8px; }
.sin-asignar__item--atrasado { border-color: #f0c4c4; background: #fdf1f1; }
.sin-asignar__hora { display: flex; flex-direction: column; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sin-asignar__atraso { font-size: 13px; font-weight: 700; color: var(--critica); }
.sin-asignar__faltan { font-size: 13px; font-weight: 600; color: var(--gris); }
.sin-asignar__ruta { display: flex; flex-direction: column; min-width: 0; font-size: 18px; }
.sin-asignar__ruta small { font-size: 13px; color: var(--gris); }
.sin-asignar__sug { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 17px; }
.sin-asignar__sug small { color: var(--gris); font-size: 13px; }
.sin-asignar__sug .color-motorista { width: 14px; height: 14px; }
@media (max-width: 800px) { .sin-asignar__item { grid-template-columns: 1fr; } }

/* ---------- Alertas cortas ---------- */
.alerta { grid-template-columns: 28px 1fr; align-items: start; }
.alerta__icono { grid-row: auto; width: 26px; height: 26px; font-size: 15px; }
.alerta__cuerpo summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; line-height: 1.3; }
.alerta__cuerpo summary::-webkit-details-marker { display: none; }
.alerta__cuerpo summary::after { content: " ▾"; color: var(--tenue); font-weight: 400; font-size: 13px; }
.alerta__cuerpo[open] summary::after { content: " ▴"; }
.alerta__cuerpo p { margin: 4px 0 0; color: var(--gris); font-size: 14px; }
.alertas__mas { margin-top: 8px; width: 100%; }

/* ---------- Avisos ---------- */
.aviso { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3000; max-width: min(640px, 92vw); background: var(--tinta); color: var(--blanco); border-left: 8px solid var(--advertencia); border-radius: 10px; padding: 12px 18px; box-shadow: 0 6px 24px #0006; font-size: 17px; font-weight: 600; }
.aviso p { margin: 2px 0; }
@keyframes parpadeo { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25%, 75% { box-shadow: 0 0 0 6px #fab21966; } }
.parpadeo { animation: parpadeo 1.4s ease-in-out 3; }

/* ---------- Modo pantalla (?pantalla=1): todo en una vista, sin scroll, letra grande, sin botones ---------- */
.modo-pantalla, .modo-pantalla body { height: 100vh; overflow: hidden; }
.modo-pantalla .no-pantalla, .modo-pantalla #actualizar, .modo-pantalla #salir, .modo-pantalla #btn-tema,
.modo-pantalla .pie, .modo-pantalla .ruta__controles, .modo-pantalla #alertas-mas, .modo-pantalla .ruta__lado,
.modo-pantalla .btn--ayuda { display: none; }
.modo-pantalla #leyenda-ruta, .modo-pantalla .tarjeta__nota, .modo-pantalla .motorista__datos, .modo-pantalla .motorista__etiquetas { display: none !important; }
.modo-pantalla .barra { padding: 6px 16px; }
.modo-pantalla .contenido { max-width: none; padding: 10px 14px; height: calc(100vh - 52px); display: grid; gap: 10px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.modo-pantalla .contenido > .error-datos { display: none; }
.modo-pantalla .grilla { display: contents; }
.modo-pantalla .tarjeta { margin: 0; padding: 12px 14px; min-height: 0; }
.modo-pantalla .kpis { grid-column: 1 / -1; grid-row: 1; margin: 0; gap: 10px; }
.modo-pantalla .kpis--grandes .kpi { padding: 8px 16px; }
.modo-pantalla .kpis--grandes .kpi__valor { font-size: clamp(36px, 5vh, 56px); }
.modo-pantalla #seccion-ruta { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; }
.modo-pantalla #seccion-ruta .ruta { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); }
.modo-pantalla #seccion-ruta .ruta > div:first-child { display: flex; flex-direction: column; height: 100%; }
.modo-pantalla .mapa { flex: 1; height: auto; min-height: 0; }
.modo-pantalla .selector-motorista { margin: 0 0 8px; pointer-events: none; }
.modo-pantalla .sin-asignar { grid-column: 2; grid-row: 2; overflow: hidden; }
.modo-pantalla .sin-asignar__item { grid-template-columns: 100px minmax(0, 1fr); }
.modo-pantalla .sin-asignar__sug { grid-column: 1 / -1; }
.modo-pantalla .sin-asignar__item:nth-child(n+4) { display: none; }
.modo-pantalla .grilla > .tarjeta:first-child { grid-column: 1; grid-row: 3; }
.modo-pantalla .tarjeta--alertas { grid-column: 2; grid-row: 3; }
.modo-pantalla .carga { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: hidden; }
.modo-pantalla .motorista { padding: 8px 10px; gap: 4px; }
.modo-pantalla .motorista__cab h3 { font-size: 16px; }
.modo-pantalla .motorista__numero b { font-size: 36px; }
.modo-pantalla .motorista__numero--hechos b { font-size: 26px; }
.modo-pantalla .semaforo { font-size: 12px; padding: 3px 8px; }
.modo-pantalla .alertas { gap: 6px; }
.modo-pantalla .alerta { padding: 6px 10px; }
.modo-pantalla .alerta__cuerpo summary { font-size: 16px; }
.modo-pantalla .alerta__cuerpo summary::after { content: ""; }
.modo-pantalla .alerta__cuerpo p { display: none; }
.modo-pantalla .aviso { font-size: 20px; }

/* ---------- Modo oscuro ---------- */
[data-tema="oscuro"] {
  --fondo: #0d1824; --blanco: #162a3d; --tinta: #e9f0f7; --gris: #aebdcc; --tenue: #7e92a6;
  --borde: #2a4259; --grilla: #223a50; --azul: #3d9bf2; --azul-oscuro: #9fcdff; --azul-claro: #17385a;
  --critica: #ef6a6a; --advertencia: #f2b52b; --oportunidad: #2fbf6a;
  color-scheme: dark;
}
[data-tema="oscuro"] .btn { color: #fff; }
[data-tema="oscuro"] .btn--sec { border-color: #3a5873; color: var(--azul-oscuro); }
[data-tema="oscuro"] .btn--texto { color: var(--gris); }
[data-tema="oscuro"] .error-datos { background: #3a1c1f; border-color: #6b2e33; color: #ffb9b9; }
[data-tema="oscuro"] .kpi--alerta { background: #3a1c1f; border-color: #6b2e33; }
[data-tema="oscuro"] .kpi--aviso { background: #382c12; border-color: #6a5420; }
[data-tema="oscuro"] .kpi--aviso .kpi__valor { color: #f2b52b; }
[data-tema="oscuro"] .motorista--amarillo { background: #332a14; }
[data-tema="oscuro"] .motorista--extremo { background: #4a1618; border-color: #ef6a6a; }
[data-tema="oscuro"] .motorista--suicida { background: #2a0b0e; border-color: #ef6a6a; }
[data-tema="oscuro"] .semaforo--suicida { background: #000; border-color: #ef6a6a; }
[data-tema="oscuro"] .motorista--rojo, [data-tema="oscuro"] .alerta--critica, [data-tema="oscuro"] .sin-asignar__item--atrasado { background: #3a1c1f; border-color: var(--critica); }
[data-tema="oscuro"] .alerta--advertencia { background: #332a14; }
[data-tema="oscuro"] .alerta--oportunidad { background: #14301f; }
[data-tema="oscuro"] .sin-asignar__item--atrasado { border-color: #6b2e33; }
[data-tema="oscuro"] .motorista:hover, [data-tema="oscuro"] .resumen:hover { background: #1c3349; }
[data-tema="oscuro"] .mapa { background: #0f1b2a; border-color: var(--borde); }
[data-tema="oscuro"] .mapa--oscuro .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
[data-tema="oscuro"] .turno--en_turno { background: #14301f; color: #7fe0a2; }
[data-tema="oscuro"] .turno--colacion { background: #382c12; color: #f2c768; }
[data-tema="oscuro"] .turno--fijo { background: #2a2552; color: #bdb2ff; }
[data-tema="oscuro"] .turno--esporadico { background: #4a1f33; color: #ffb3d1; }
[data-tema="oscuro"] .aviso { background: #f3f7fb; color: #142b43; }
[data-tema="oscuro"] .por-hora__area { border-bottom-color: #3a5873; }
[data-tema="oscuro"] input, [data-tema="oscuro"] .login__caja { background: var(--blanco); }

/* Nombres de los motoristas en una esquina del mapa (así no tapan las rutas) */
.mapa-envoltura { position: relative; }
.mapa-nombres { position: absolute; left: 10px; bottom: 34px; z-index: 5; list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 4px; max-height: 60%; overflow: hidden; pointer-events: none;
  background: #ffffffe6; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 2px 8px #142b4333; }
.mapa-nombres li { display: flex; align-items: center; gap: 4px; font-size: 16px; color: var(--tinta); white-space: nowrap; }
.mapa-nombres .color-motorista { width: 14px; height: 14px; background: var(--c); }
.mapa-nombres span { margin-left: auto; padding-left: 10px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gris); }
[data-tema="oscuro"] .mapa-nombres { background: #162a3de6; }
.modo-pantalla .mapa-envoltura { flex: 1; min-height: 0; display: flex; }
.modo-pantalla .mapa-envoltura .mapa { flex: 1; }
.modo-pantalla .mapa-nombres li { font-size: 19px; }

/* Modo pantalla: si no hay sin asignar, ese espacio lo usan las alertas (más grandes) */
.modo-pantalla .contenido:has(.sin-asignar--ok) .sin-asignar { display: none; }
.modo-pantalla .contenido:has(.sin-asignar--ok) .tarjeta--alertas { grid-row: 2 / 4; align-self: stretch; }
.modo-pantalla .contenido:has(.sin-asignar--ok) .alerta { padding: 12px 14px; }
.modo-pantalla .contenido:has(.sin-asignar--ok) .alerta__cuerpo summary { font-size: 22px; }
.modo-pantalla .contenido:has(.sin-asignar--ok) .alerta__icono { width: 32px; height: 32px; font-size: 18px; }

/* Mapa grande: sin la lista lateral, todo el ancho y casi todo el alto de la pantalla */
.ruta--ancha .ruta { grid-template-columns: minmax(0, 1fr); }
.ruta--ancha .ruta__lado { display: none; }
.ruta--ancha .mapa { height: clamp(640px, 86vh, 1100px); }
.ruta__controles .btn[aria-pressed="true"] { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Pantalla de la oficina: más espacio para el mapa */
.modo-pantalla .contenido { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: 8px; }
.modo-pantalla .kpis--grandes .kpi { padding: 4px 14px; }
.modo-pantalla .kpis--grandes .kpi__detalle { display: none; }
.modo-pantalla .kpis--grandes .kpi__valor { font-size: clamp(30px, 4.4vh, 48px); margin-top: 0; }
.modo-pantalla .kpis--grandes .kpi__etiqueta { font-size: 14px; }
.modo-pantalla .tarjeta { padding: 8px 12px; }

/* Sin asignar: cuenta regresiva por nivel de urgencia */
.sin-asignar__ok small { font-weight: 400; color: var(--gris); font-size: 14px; }
.sin-asignar[data-peor="alto"] { border-left-color: #e8750a; }
.sin-asignar[data-peor="atencion"] { border-left-color: var(--advertencia); }
.sin-asignar[data-peor="futuro"] { border-left-color: var(--tenue); }
.sin-asignar[data-peor="alto"] .sin-asignar__n { background: #e8750a; }
.sin-asignar[data-peor="atencion"] .sin-asignar__n { background: #b97c00; }
.sin-asignar[data-peor="futuro"] .sin-asignar__n { background: var(--tenue); }
.cuenta { font-size: 13px; font-weight: 700; color: var(--gris); }
.cuenta--vencido, .cuenta--critico { color: var(--critica); }
.cuenta--alto { color: #c2570c; }
.cuenta--atencion { color: #a06a00; }
.sin-asignar__item--vencido, .sin-asignar__item--critico { border-color: #f0c4c4; background: #fdf1f1; }
.sin-asignar__item--alto { border-color: #f6c58b; background: #fff4e8; }
.sin-asignar__item--atencion { border-color: #f1d7a1; background: #fffaf0; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px #d03b3b55; } }
.sin-asignar__item--critico { animation: latido 1.2s ease-in-out infinite; }
[data-tema="oscuro"] .sin-asignar__item--vencido, [data-tema="oscuro"] .sin-asignar__item--critico { background: #3a1c1f; border-color: #6b2e33; }
[data-tema="oscuro"] .sin-asignar__item--alto { background: #3a2410; border-color: #7a4a1a; }
[data-tema="oscuro"] .sin-asignar__item--atencion { background: #332a14; border-color: #6a5420; }
[data-tema="oscuro"] .cuenta--alto { color: #ffb066; }
[data-tema="oscuro"] .cuenta--atencion { color: #f2c768; }

/* Sin asignar: horizonte y leyenda de colores */
.sin-asignar__horizonte { font-weight: 400; color: var(--gris); font-size: 15px; }
.sin-asignar__leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 2px; padding: 0; font-size: 14px; color: var(--gris); }
.sin-asignar__leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.sin-asignar__inmediatos { margin: 2px 0 8px; font-size: 13px; color: var(--tenue); }
.cuenta-punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--tenue); }
.cuenta-punto--atencion { background: var(--advertencia); }
.cuenta-punto--alto { background: #e8750a; }
.cuenta-punto--critico { background: var(--critica); animation: latido 1.2s ease-in-out infinite; }
.cuenta-punto--vencido { background: #8e1d1d; }
.sin-asignar__item { border-left: 6px solid var(--tenue); }
.sin-asignar__item--atencion { border-left-color: var(--advertencia); }
.sin-asignar__item--alto { border-left-color: #e8750a; }
.sin-asignar__item--critico { border-left-color: var(--critica); }
.sin-asignar__item--vencido { border-left-color: #8e1d1d; }
[data-tema="oscuro"] .cuenta-punto--vencido, [data-tema="oscuro"] .sin-asignar__item--vencido { background-color: initial; }
[data-tema="oscuro"] .cuenta-punto--vencido { background: #c44040; }
[data-tema="oscuro"] .sin-asignar__item--vencido { border-left-color: #c44040; }
.modo-pantalla .sin-asignar__leyenda { font-size: 12px; gap: 2px 10px; margin: 0 0 6px; }
.modo-pantalla .sin-asignar__inmediatos, .modo-pantalla .sin-asignar__horizonte { display: none; }

.kpi--hecho .kpi__valor { color: var(--e-done); }
@media (max-width: 1100px) { .kpis--grandes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.linea-leyenda--colores { height: 5px; border-top: 0; border-radius: 3px; vertical-align: middle; }

/* Sugerencia por ruta */
.sin-asignar__sug { flex-direction: column; align-items: flex-start; gap: 2px; }
.sug__principal { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 17px; }
.sug__etiqueta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e7ecf1; color: var(--gris); }
.sug__etiqueta--ruta { background: #d9f2e3; color: #0b6b3a; }
.sug__etiqueta--paso { background: #e1f0d8; color: #3d6b12; }
.sug__etiqueta--zona { background: #fdf0c9; color: #8a5b00; }
.sug__detalle, .sug__alt { font-size: 12.5px; color: var(--gris); }
.sug__alt { display: flex; align-items: center; gap: 4px; color: var(--tenue); }
.sug__alt .color-motorista { width: 9px; height: 9px; margin: 0; }
[data-tema="oscuro"] .sug__etiqueta { background: #29405a; color: #c4d2e0; }
[data-tema="oscuro"] .sug__etiqueta--ruta { background: #14452c; color: #8de6b3; }
[data-tema="oscuro"] .sug__etiqueta--paso { background: #2c4416; color: #b9e58a; }
[data-tema="oscuro"] .sug__etiqueta--zona { background: #4a3a0e; color: #f2c768; }
.modo-pantalla .sug__alt, .modo-pantalla .sug__detalle { display: none; }

/* Tema oscuro: botones, hover y detalles que quedaban claros o sin contraste */
.selector-motorista button:not([aria-selected="true"]):hover, .filtros button:not([aria-pressed="true"]):hover { border-color: var(--azul); color: var(--tinta); }
[data-tema="oscuro"] {
  --boton: #2272c8; --boton-hover: #2f86e0;
}
[data-tema="oscuro"] .btn { background: var(--boton); color: #fff; }
[data-tema="oscuro"] .btn:hover { background: var(--boton-hover); }
[data-tema="oscuro"] .btn--sec { background: var(--blanco); color: var(--azul-oscuro); border-color: #3a5873; }
[data-tema="oscuro"] .btn--sec:hover { background: #1c3349; border-color: var(--azul); color: #fff; }
[data-tema="oscuro"] .btn--texto { background: none; }
[data-tema="oscuro"] .btn--texto:hover { background: #1c3349; color: var(--tinta); }
[data-tema="oscuro"] .ruta__controles .btn[aria-pressed="true"] { background: var(--boton); border-color: var(--azul); color: #fff; }
[data-tema="oscuro"] .ruta__controles .btn[aria-pressed="true"]:hover { background: var(--boton-hover); }
[data-tema="oscuro"] .selector-motorista button:not([aria-selected="true"]):hover, [data-tema="oscuro"] .filtros button:not([aria-pressed="true"]):hover { background: #1c3349; color: #fff; }
[data-tema="oscuro"] .selector-motorista button.critica:not([aria-selected="true"]) { border-color: #6b2e33; }
[data-tema="oscuro"] .filtros button[aria-pressed="true"]:hover { background: #1f4a75; }
[data-tema="oscuro"] .franja__seg:hover { filter: brightness(1.2); }
[data-tema="oscuro"] .por-hora__col:hover { background: #3d9bf21f; }
[data-tema="oscuro"] .parada:hover, [data-tema="oscuro"] .parada.activa { background: #1f4a75; border-color: var(--azul); }
[data-tema="oscuro"] .tooltip { background: #07111c; color: #e9f0f7; border: 1px solid #3a5873; box-shadow: 0 4px 14px #000a; }
[data-tema="oscuro"] .marcador--turno { background: #fff; color: #142b43; border-color: #142b43; }
[data-tema="oscuro"] .mapa-aviso-gps { border-color: #ef6a6a; }
[data-tema="oscuro"] .alerta-gps { color: #ffb4a8; }
[data-tema="oscuro"] .leaflet-popup-content-wrapper, [data-tema="oscuro"] .leaflet-popup-tip { background: #162a3d; color: #e9f0f7; }
[data-tema="oscuro"] .leaflet-popup-content a { color: var(--azul-oscuro); }
[data-tema="oscuro"] .leaflet-container a.leaflet-popup-close-button { color: #aebdcc; }
[data-tema="oscuro"] tbody tr:hover { background: #1c3349; }

/* Ventana "Cómo se mide la carga" */
.ayuda { border: 1px solid var(--borde); border-radius: 12px; padding: 0 20px 18px; max-width: min(640px, 94vw); background: var(--blanco); color: var(--tinta); box-shadow: 0 10px 40px #0005; }
.ayuda::backdrop { background: #0008; }
.ayuda__cab { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--blanco); padding: 14px 0 6px; }
.ayuda__cab h2 { margin: 0; font-size: 18px; }
.ayuda h3 { font-size: 15px; margin: 16px 0 6px; }
.ayuda p, .ayuda li { font-size: 14px; line-height: 1.5; }
.ayuda ul { margin: 0; padding-left: 20px; }
.ayuda__tabla { width: 100%; border-collapse: collapse; margin: 10px 0; }
.ayuda__tabla td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--grilla); vertical-align: middle; font-size: 14px; }
.ayuda__tabla td:first-child { white-space: nowrap; width: 1%; }

/* Logo de Admin Motocity (el SVG trae fondo blanco: se recorta con esquinas redondeadas) */
.marca__img { display: block; height: 40px; width: auto; border-radius: 6px; }
.marca__nombre { padding-left: 4px; }
.login__caja .marca { flex-direction: column; align-items: flex-start; gap: 8px; }
.login__caja .marca__img { height: 64px; }
.modo-pantalla .marca__img { height: 30px; }
@media (max-width: 560px) { .marca__nombre { font-size: 15px; } .marca__img { height: 32px; } }

/* Móvil: dos indicadores por fila, para que los títulos quepan completos */
@media (max-width: 560px) { .kpis--grandes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis--grandes .kpi { padding: 12px 14px; } .kpis--grandes .kpi__valor { font-size: 34px; } }