:root {
  --qalen: #c3161c;
  --qalen-oscuro: #8f0f14;
  --qalen-suave: #fdecec;
  --fondo: #f5f5f6;
  --panel: #ffffff;
  --texto: #1f2328;
  --suave: #5d646e;
  --borde: #dcdfe3;
  --ruta: #1f3b63;
  --ok: #1e8e3e;
  --justo: #d98a00;
  --tarde: #d11a1a;
  --espera: #2f7fc1;
  --hecha: #8a939e;
  --enpunto: #7b3fb5;
  --base: #222;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; color: var(--texto); background: var(--fondo); font-size: 15px; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 1px solid var(--borde); background: #fff; border-radius: 7px; padding: 6px 11px; font-weight: 600; font-size: 13.5px; }
button:hover { border-color: var(--qalen); }
button.primario { background: var(--qalen); color: #fff; border-color: var(--qalen); }
button.primario:hover { background: var(--qalen-oscuro); }
button.peligro { color: var(--qalen); border-color: #efb9bb; }
button.chico { font-size: 12px; color: var(--suave); margin-top: 16px; font-weight: 500; }
button.ancho { width: 100%; margin: 8px 0; padding: 11px; font-size: 15px; }
button:disabled { opacity: .45; cursor: default; }
input, select { border: 1px solid var(--borde); border-radius: 7px; padding: 5px 8px; background: #fff; }

/* Encabezado con la marca */
header { height: 60px; display: flex; align-items: center; gap: 18px; padding: 0 18px; background: #fff; border-bottom: 4px solid var(--qalen); box-shadow: 0 2px 6px rgba(0,0,0,.06); position: relative; z-index: 1100; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { height: 36px; }
.marca span { font-weight: 700; color: var(--qalen); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-left: 2px solid var(--qalen); padding-left: 10px; }
header label.fecha { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--suave); }
nav { display: flex; gap: 4px; }
.tab { background: transparent; border: 1px solid transparent; color: var(--suave); }
.tab.activa { background: var(--qalen); color: #fff; }
.espacio { flex: 1; }
.practica { background: #f7c948; color: #3a2c00; padding: 5px 10px; border-radius: 7px; font-weight: 700; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.reloj { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; }
.gps { font-size: 12.5px; font-weight: 600; color: var(--ok); }
.gps.mal { color: var(--tarde); }

main { display: flex; height: calc(100% - 60px); }
aside { width: 480px; min-width: 390px; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--borde); padding: 12px 14px 40px; }
aside.ancho { width: 760px; }
#mapa-contenedor { flex: 1; position: relative; }
#mapa { position: absolute; inset: 0; }

.fila { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 6px 0; }
.fila label { display: flex; flex-direction: column; font-size: 12.5px; color: var(--suave); gap: 2px; font-weight: 600; }
.caja { border: 1px solid var(--borde); border-radius: 9px; padding: 10px; margin: 10px 0; }
.practica-caja { background: #fff8dd; border-color: #f0d98a; }
.nota { color: var(--suave); font-size: 12.5px; font-weight: 500; }
.error { color: var(--tarde); font-weight: 700; }
.botonera { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.botonera.fin { justify-content: flex-end; }
h3 { margin: 16px 0 6px; font-size: 15px; color: var(--qalen-oscuro); }
details summary { cursor: pointer; font-weight: 700; margin: 12px 0 6px; }

.bienvenida { text-align: center; color: var(--suave); padding: 10px 0; }
.bienvenida img { width: 100%; height: 170px; object-fit: cover; border-radius: 10px; }
.bienvenida img.foto-camion { object-position: 30% 70%; height: 240px; }
.bienvenida p { font-weight: 600; }

/* Lista de OC */
.oc { display: grid; grid-template-columns: 22px 1fr auto; gap: 3px 8px; padding: 8px 4px; border-bottom: 1px solid #eef0f2; align-items: start; }
.oc .nombre { font-weight: 700; font-size: 14.5px; }
.oc .detalle { grid-column: 2 / 4; font-size: 12.5px; color: var(--suave); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.oc input.hora { width: 160px; font-size: 12.5px; padding: 2px 5px; }
.oc input.listo { width: 105px; font-size: 12.5px; padding: 2px 4px; }
.ok-txt { color: var(--ok); font-weight: 600; }
.mal-txt { color: var(--tarde); font-weight: 700; }

/* Opciones */
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion { border: 2px solid var(--borde); border-radius: 9px; padding: 9px; cursor: pointer; font-size: 13px; }
.opcion.elegida { border-color: var(--qalen); background: var(--qalen-suave); }
.opcion .titulo { font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; gap: 4px; }
.insignia { background: var(--ok); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; white-space: nowrap; }

/* Paradas */
.parada { display: grid; grid-template-columns: 38px 1fr auto; gap: 2px 10px; padding: 9px 4px; border-bottom: 1px solid #eef0f2; align-items: center; }
.parada .num { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.parada .nombre { font-weight: 800; font-size: 16.5px; }
.parada .nombre .nota { font-weight: 500; font-size: 12px; }
.parada .hora-grande { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.parada .limite { font-size: 13.5px; font-weight: 700; color: #1f2328; margin-left: 6px; }
.parada .sub { font-size: 12.5px; color: var(--suave); grid-column: 2 / 4; }
.parada .acciones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.parada .acciones button { padding: 4px 8px; font-size: 12.5px; }
.parada.hecha, .parada.cancelada, .parada.rechazada { opacity: .6; }
.parada.cancelada .nombre { text-decoration: line-through; }
.parada.en_punto { background: #f4ecfb; }
.aviso { font-size: 12px; color: var(--justo); grid-column: 2 / 4; font-weight: 600; }
.c-ok { background: var(--ok); } .c-justo { background: var(--justo); } .c-tarde { background: var(--tarde); }
.c-espera { background: var(--espera); } .c-hecha, .c-cancelada, .c-rechazada { background: var(--hecha); } .c-en_punto { background: var(--enpunto); }
.c-base { background: var(--base); }
.estado { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; color: #fff; white-space: nowrap; }

.resumen { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; background: #f5f6f8; border-radius: 9px; padding: 8px 10px; font-weight: 500; }
.resumen b { font-size: 15px; }

/* Alertas */
.alerta-item { font-size: 13px; padding: 6px 8px; border-left: 4px solid var(--justo); background: #fff8e8; margin: 4px 0; border-radius: 3px; }
.alerta-item.mal { border-color: var(--tarde); background: #fdecec; }
.hist { font-size: 12.5px; color: var(--suave); padding: 2px 0; }

/* Cartel grande sobre el mapa */
#cartel { position: absolute; z-index: 1000; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(31, 35, 40, .94); color: #fff; padding: 12px 28px; border-radius: 12px; text-align: center; box-shadow: 0 4px 18px rgba(0,0,0,.25); max-width: 80%; border-bottom: 5px solid var(--qalen); }
#cartel .cartel-texto { font-size: 26px; font-weight: 800; line-height: 1.2; }
#cartel .cartel-detalle { font-size: 21px; margin-top: 3px; font-weight: 600; }
#cartel.ok { background: rgba(22, 105, 48, .95); border-color: #0f4d21; }
#cartel.alerta { background: rgba(190, 120, 0, .96); border-color: #7a4d00; }
#cartel.mal { background: rgba(195, 22, 28, .96); border-color: #7a0b0f; animation: latido 1.6s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 9px rgba(195, 22, 28, .25); } }

/* Marcadores del mapa */
.marcador { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.marcador .bola { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); font-size: 15px; flex: none; }
.marcador .etiqueta { background: #fff; border-radius: 6px; padding: 2px 7px; box-shadow: 0 1px 4px rgba(0,0,0,.3); line-height: 1.15; }
.marcador .etiqueta .alias { font-size: 13.5px; font-weight: 800; }
.marcador .etiqueta .hora { font-size: 15px; font-weight: 800; margin-left: 5px; }
.marcador .etiqueta .lim { display: block; font-size: 11.5px; font-weight: 700; color: #1f2328; }
.marcador.nuevo .bola { outline: 3px dashed var(--enpunto); }
.base-marca { display: flex; align-items: center; gap: 4px; }
.base-marca .logo { background: #fff; border: 2px solid var(--qalen); border-radius: 8px; padding: 3px 5px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.base-marca .logo img { width: 74px; display: block; }
.base-marca .viaje { width: 28px; height: 28px; border-radius: 50%; background: var(--base); color: #fff; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); font-size: 14px; }
.vehiculo { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--qalen); overflow: hidden; box-shadow: 0 0 0 4px rgba(195,22,28,.25), 0 3px 8px rgba(0,0,0,.45); background: #fff; }
.vehiculo img { width: 100%; height: 100%; object-fit: cover; object-position: 4% 62%; transform: scale(1.3); }

/* Ventanas */
dialog { border: none; border-radius: 12px; padding: 18px 20px; width: min(780px, 94vw); box-shadow: 0 10px 40px rgba(0,0,0,.3); border-top: 5px solid var(--qalen); }
#dlg-pregunta { width: min(480px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h2 { margin: 0 0 6px; font-size: 19px; }
dialog form > label, dialog fieldset { display: block; margin: 8px 0; }
dialog fieldset { border: 1px solid var(--borde); border-radius: 8px; }
dialog fieldset input { width: 100%; margin: 3px 0; }
dialog select { width: 100%; }
.hora-evento { display: flex; gap: 6px; flex-wrap: wrap; align-items: end; }
.hora-evento label { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.hora-evento input { font-size: 20px; font-weight: 700; }
.check { display: flex !important; align-items: center; gap: 6px; font-size: 13.5px; }
.check input { width: auto !important; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
th, td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #eef0f2; vertical-align: top; }
th { color: var(--suave); font-weight: 700; font-size: 12px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.nuevo td { background: #f4ecfb; font-weight: 700; }
.peor { color: var(--tarde); font-weight: 700; }
.mejor { color: var(--ok); font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.kpi { background: #f5f6f8; border-radius: 9px; padding: 9px; }
.kpi b { display: block; font-size: 22px; color: var(--qalen-oscuro); }
.kpi span { font-size: 12px; color: var(--suave); font-weight: 600; }
.barra { height: 10px; background: var(--qalen); border-radius: 3px; display: inline-block; vertical-align: middle; }

#avisos { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast { background: #1f2328; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.3); font-size: 14px; font-weight: 600; }
.toast.mal { background: var(--tarde); }
.toast.alerta { background: #b87400; }

/* Pantallas más angostas */
.tab, .reloj, .practica, .gps, header label.fecha { white-space: nowrap; }
@media (max-width: 1200px) {
  header { gap: 10px; padding: 0 10px; }
  .marca span { display: none; }
  aside { width: 400px; min-width: 330px; }
  aside.ancho { width: 560px; }
  #cartel { max-width: 92%; padding: 8px 16px; }
  #cartel .cartel-texto { font-size: 20px; }
  #cartel .cartel-detalle { font-size: 17px; }
}
@media (max-width: 900px) {
  header { height: auto; flex-wrap: wrap; padding: 6px 10px; }
  main { height: auto; flex-direction: column; }
  aside, aside.ancho { width: 100%; min-width: 0; border-right: none; }
  #mapa-contenedor { height: 70vh; }
}

/* Flechas del tramo actual */
.flecha { width: 20px; height: 20px; display: block; filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); }

/* Camión en forma de pin */
.pin-vehiculo { width: 56px; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.pin-vehiculo .vehiculo { box-shadow: 0 0 0 4px rgba(195,22,28,.25); }
.pin-punta { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid var(--qalen); margin-top: -2px; }

/* Puntos adicionales en Planificar */
.extras-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.extras-cab button { margin-left: auto; }
.extra { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid #eef0f2; font-size: 13.5px; font-weight: 600; }
.extra button { padding: 2px 7px; }