/* Panel de Monitoreo IA. Diseño «Cabina»: el contenido va en claro, la navegación en una columna negra
   (el tablero de la cabina) y el amarillo de la raya de carretera marca dónde estás. El botón principal
   es negro para no competir con los colores de alerta, que son los únicos que significan algo:
   rojo = crítico, ámbar = requiere atención, verde = bien o terminado, azul = informativo.
   Una sola familia tipográfica, Archivo; los rótulos (unidades, horas, títulos) van en su corte angosto. */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; src: url("vendor/fonts/archivo-latin-variable.woff2") format("woff2"); }

:root {
  --fondo: #f2f4f6;          /* fondo de la página */
  --superficie: #ffffff;     /* lateral, bloques, tablas */
  --relleno: #f2f4f6;        /* relleno suave dentro de una superficie */
  --relleno-2: #f7f8fa;      /* formularios y encabezados de tabla */
  --linea: #d9dee5;
  --linea-fuerte: #c3cad4;   /* borde de campos */
  --linea-suave: #e9edf2;    /* divisiones dentro de un bloque */
  --texto: #15191e;
  --texto-2: #5a6472;
  --bien: #0e8a5f;
  --bien-suave: #dff3ea;
  --aviso: #f2b705;          /* ámbar de señal preventiva, como relleno */
  --aviso-texto: #8a5700;    /* el ámbar no se lee como letra sobre blanco */
  --aviso-suave: #fdf3d3;
  --peligro: #cf2e2a;
  --info: #1f5fbf;
  --info-suave: #e6eefb;
  --noche: #15191e;          /* la columna y el botón principal */
  --noche-2: #232a32;
  --noche-linea: #343c46;
  --noche-texto: #aeb6c2;
  --raya: #ffd21f;           /* amarillo de la raya de carretera */
  --radio: 4px;
  --fuente: "Archivo", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(21, 25, 30, .06), 0 4px 14px rgba(21, 25, 30, .06);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 15px/1.5 var(--fuente);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
#app { display: flex; flex-direction: column; min-height: 100vh; height: 100vh; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
[hidden] { display: none !important; }
h1 { margin: 0; font: 750 semi-condensed 24px/1.1 var(--fuente); letter-spacing: -.005em; }
h3 { font: 600 semi-condensed 16px/1.2 var(--fuente); margin: 22px 0 10px; color: var(--texto-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- botones ---------- */
.boton {
  border: 0;
  border-radius: var(--radio);
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 650;
  background: var(--noche);
  color: #fff;
}
.boton:hover { background: #2c343e; }
.boton:disabled { opacity: .55; cursor: default; }
.boton:disabled:hover { background: var(--noche); }
.boton-sec { background: #fff; color: var(--texto); border: 1px solid var(--linea); }
.boton-sec:hover, .boton-sec:disabled:hover { background: var(--relleno); }
.boton-cerrar { background: var(--bien); color: #fff; }
.boton-cerrar:hover { background: #0b7350; }
.boton-chico { padding: 6px 12px; font-size: 14px; }
.boton-grande { padding: 12px 26px; font: 650 semi-condensed 18px/1 var(--fuente); }
a.boton { display: inline-block; text-decoration: none; text-align: center; }
.boton-texto { border: 0; background: none; padding: 4px 2px; cursor: pointer; color: var(--texto-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.boton-texto:hover { color: var(--texto); }
.boton-texto.peligro { color: var(--peligro); font-weight: 600; }

/* ---------- la columna (en celular, barra de arriba) ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 18px;
  background: var(--noche);
  color: #fff;
  flex-wrap: wrap;
}
.barra :focus-visible { outline-color: var(--raya); }
.marca { display: flex; align-items: center; gap: 10px; }
.marca-placa {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--raya); color: var(--noche);
  border-radius: 4px;
  font: 800 semi-condensed 18px/1 var(--fuente);
}
.marca-nombre { font: 700 semi-condensed 19px/1 var(--fuente); }
.secciones { display: flex; gap: 4px; }
.secciones button {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 4px; cursor: pointer;
  color: var(--noche-texto); font: 600 semi-condensed 16px/1 var(--fuente);
}
.secciones button:hover { color: #fff; }
.secciones button[aria-current="page"] { background: var(--noche-2); color: #fff; box-shadow: inset 3px 0 0 var(--raya); }
.resumen { margin: 0; color: var(--noche-texto); font-variant-numeric: tabular-nums; flex: 1; min-width: 230px; }
.resumen strong { color: #fff; font-weight: 600; }
.resumen .alerta { color: var(--raya); font-weight: 600; }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.modo {
  margin: 0;
  white-space: nowrap;
  cursor: help;
  padding: 3px 10px;
  border: 1px solid var(--noche-linea);
  border-radius: 4px;
  color: var(--noche-texto);
  font-size: 13px;
}
#cuenta { background: var(--noche-2); color: #fff; border: 1px solid var(--noche-linea); border-radius: 4px; padding: 6px 8px; }
.usuario { color: var(--noche-texto); font-size: 14px; }
.barra .boton-texto { color: var(--noche-texto); }
.barra .boton-texto:hover { color: #fff; }
.barra .boton-sec { background: transparent; color: #fff; border-color: var(--noche-linea); }
.barra .boton-sec:hover { background: var(--noche-2); }
.reloj { font: 700 semi-condensed 20px/1 var(--fuente); font-variant-numeric: tabular-nums; }

@media (min-width: 901px) {
  #app { display: grid; grid-template-columns: 212px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .dentro { grid-column: 1 / -1; grid-row: 1; }
  .barra {
    grid-column: 1; grid-row: 2; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    padding: 20px 12px 16px; overflow-y: auto;
  }
  #app > main { grid-column: 2; grid-row: 2; min-height: 0; }
  .marca { padding: 0 8px 22px; }
  .marca-placa { width: 34px; height: 34px; font-size: 20px; }
  .secciones { flex-direction: column; gap: 2px; }
  .secciones button { text-align: left; padding: 11px 12px; }
  .resumen { flex: none; min-width: 0; margin: 18px 8px 0; padding-top: 16px; border-top: 1px solid var(--noche-linea); font-size: 14px; line-height: 1.45; }
  .barra-der { margin: auto 0 0; padding: 18px 8px 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .reloj { font-size: 30px; font-weight: 750; order: -1; }
  .modo { white-space: normal; padding: 6px 9px; line-height: 1.3; }
  .barra .boton-sec { white-space: normal; }
  #cuenta { width: 100%; }
  .usuario { font-size: 13px; line-height: 1.35; }
  .barra .boton-texto { text-align: left; padding: 0; }
}

/* ---------- el dueño, dentro de la cuenta de un cliente ---------- */
.dentro { display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; padding: 7px 14px; background: var(--raya); color: var(--noche); }
.dentro p { margin: 0; font-size: 14px; }

/* ---------- tablero de monitoreo ---------- */
.tablero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 400px;
  min-height: 0;
}
.mapa-zona { position: relative; min-height: 300px; }
#mapa { position: absolute; inset: 0; background: #e6e9ed; }
.lateral {
  background: var(--superficie);
  border-left: 1px solid var(--linea);
  overflow-y: auto;
  min-height: 0;
}
/* ---------- elegir el día: hoy es en vivo, un día anterior es solo consulta ---------- */
.dia-barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--linea); background: var(--relleno-2); flex-wrap: wrap; }
.dia-barra label { font: 600 semi-condensed 15px/1 var(--fuente); color: var(--texto-2); margin-right: 2px; }
.dia-barra input { flex: 1 1 140px; min-width: 0; max-width: 190px; height: 34px; padding: 4px 8px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #fff; color: var(--texto); font: inherit; }
.dia-paso { width: 34px; height: 34px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #fff; color: var(--texto); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 0 2px; }
.dia-paso:hover:not(:disabled) { border-color: var(--texto); }
.dia-paso:disabled { opacity: .35; cursor: default; }
.dia-barra .boton { margin-left: auto; }
.dia-aviso { margin: 0; padding: 9px 14px; background: var(--raya); color: var(--noche); font-size: 14px; font-weight: 500; border-bottom: 1px solid #e0b700; }
.mapa-dia { position: absolute; z-index: 500; top: 12px; left: 50%; transform: translateX(-50%); margin: 0; max-width: calc(100% - 120px);
  background: var(--noche); color: #fff; border-left: 4px solid var(--raya); border-radius: var(--radio); padding: 8px 14px; font-size: 14px; box-shadow: var(--sombra); }
.dia-vivo { margin-left: auto; font-size: 13px; font-weight: 600; color: #0b5f41; white-space: nowrap; }
.dia-vivo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bien); margin-right: 6px; }
.dia-subtitulo { font: 600 semi-condensed 16px/1.2 var(--fuente); margin: 0; padding: 14px 12px 0; color: var(--texto-2); }
.dia-subtitulo + .cola { padding-top: 8px; }
.en-pasado .cola-cabeza { position: static; }
@media (max-width: 900px) {
  .mapa-dia { left: 58px; right: 10px; transform: none; max-width: none; font-size: 13px; padding: 7px 10px; }
}
.placa-hora b { font-size: 22px; }
.unidad.u-dia { background: #fff; color: var(--texto); border-color: var(--texto-2); cursor: pointer; }
.pop-dia { padding: 4px 0 0; font-size: 13px; }

.cola-cabeza {
  position: sticky; top: 0; z-index: 2;
  background: var(--superficie);
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.segmentos { display: flex; background: var(--relleno); border-radius: var(--radio); padding: 3px; }
.segmentos button {
  border: 0; background: transparent; padding: 5px 12px; border-radius: 3px; cursor: pointer;
  color: var(--texto-2); font-weight: 500;
}
.segmentos button[aria-selected="true"] { background: #fff; color: var(--texto); box-shadow: 0 0 0 1px var(--linea); }
.acciones-cola { display: flex; gap: 8px; padding: 12px 12px 0; flex-wrap: wrap; }
.acciones-cola .boton { flex: 1; }

/* ---------- cola: cada incidente es una placa con su tiempo ---------- */
.cola { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; }
.placa {
  display: grid;
  grid-template-columns: 82px 1fr;
  border-radius: var(--radio);
  background: #fff;
  cursor: pointer;
  border: 1px solid var(--linea);
  text-align: left;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.placa:hover { border-color: #aab3c0; }
.placa.seleccionada { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); }
.placa-tiempo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 4px;
  background: var(--relleno);
  font-variant-numeric: tabular-nums;
}
.placa-tiempo b { font: 800 semi-condensed 30px/1 var(--fuente); }
.placa-tiempo small { color: var(--texto-2); font-size: 12px; }
.placa-cuerpo { padding: 10px 12px; min-width: 0; }
.placa-titulo { font: 700 semi-condensed 17px/1.2 var(--fuente); margin: 0 0 2px; }
.placa-sub { margin: 0; color: var(--texto-2); font-size: 14px; }
.placa-estado { margin: 6px 0 0; font-size: 13px; font-weight: 500; }
.marca-manual { font: 500 12px/1 var(--fuente); color: var(--texto-2); background: #e9edf2; border-radius: 3px; padding: 2px 7px; vertical-align: 2px; }

/* severidad: el bloque de tiempo toma el color de la señal */
.sev-critical .placa-tiempo { background: var(--peligro); color: #fff; }
.sev-critical .placa-tiempo small { color: #ffe1df; }
.sev-high .placa-tiempo { background: var(--aviso); color: var(--noche); }
.sev-high .placa-tiempo small { color: #4a3b06; }
.sev-medium .placa-tiempo { background: #dbe6f7; color: #173e7a; }
.sev-medium .placa-tiempo small { color: #173e7a; }
.sev-low .placa-tiempo { background: var(--relleno); color: var(--texto-2); }
.est-escalated .placa-estado { color: var(--aviso-texto); }
.est-waiting_response .placa-estado { color: var(--info); }
.est-resolved { opacity: .8; }
.est-resolved .placa-tiempo { background: var(--relleno); color: var(--texto-2); }
.est-resolved .placa-tiempo small { color: var(--texto-2); }
.vacio { margin: 24px 18px; color: var(--texto-2); }
.vacio-g { color: var(--texto-2); margin: 0; font-size: 14px; }

/* ---------- viajes en vivo ---------- */
.viajes-vivo { padding: 12px 12px 0; }
.viajes-vivo h2 { font: 600 semi-condensed 16px/1.2 var(--fuente); margin: 0 0 8px; color: var(--texto-2); }
.viajes-vivo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.viaje { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 10px; }
.viaje-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.viaje-cab b { font: 650 semi-condensed 15px/1.2 var(--fuente); }
.viaje-det { margin: 2px 0 6px; font-size: 13px; color: var(--texto-2); }
.viaje-det.tarde { color: var(--aviso-texto); }
.avance { height: 4px; background: #e3e7ec; border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.avance span { display: block; height: 100%; background: var(--noche); }
.viaje-acc { display: flex; gap: 14px; justify-content: flex-end; }
.viaje-acc .boton-texto { font-size: 13px; }

/* ---------- etiquetas: rectas, con letra que se lee ---------- */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.etq { font-size: 13px; padding: 2px 9px; border-radius: 3px; background: #e9edf2; color: var(--texto); font-weight: 500; }
.etq-critical, .etq-alert { background: var(--peligro); color: #fff; }
.etq-high { background: var(--aviso); color: var(--noche); }
.etq-medium { background: #dbe6f7; color: #173e7a; }
.etq-escalated, .etq-suspendida, .etq-prealert { background: var(--aviso-suave); color: var(--aviso-texto); }
.etq-resolved, .etq-activo, .etq-v-active { background: var(--bien-suave); color: #0b5f41; }
.etq-v-scheduled, .etq-borrador { background: var(--info-suave); color: #174a99; }
.etq-nueva { font: 600 12px/1 var(--fuente); font-style: normal; background: var(--aviso); color: var(--noche); border-radius: 3px; padding: 2px 6px; vertical-align: 2px; white-space: nowrap; }

/* ---------- detalle del incidente y formularios del lateral ---------- */
#vista-detalle, #vista-viaje, #vista-incidencia, #vista-avance, #vista-registro, #vista-bitacora { padding: 14px 18px 28px; }
.volver {
  border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--texto-2);
  font-weight: 500;
}
.volver::before { content: "‹ "; }
.volver:hover { color: var(--texto); }
.det-cabeza { margin: 10px 0 16px; }
.det-cabeza h2, .form-titulo, .av-cabeza h2 { margin: 0; font: 750 semi-condensed 26px/1.1 var(--fuente); letter-spacing: -.01em; }
.form-titulo { margin: 10px 0 4px; }
.av-cabeza h2 { margin: 10px 0 2px; }
.det-cabeza p { margin: 4px 0 0; color: var(--texto-2); }
.form-ayuda { margin: 0 0 6px; color: var(--texto-2); }
.form-ayuda-chica { font-size: 13px; margin: -2px 0 8px; }

.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linea); }
.linea-tiempo li { position: relative; padding: 0 0 12px 12px; }
.linea-tiempo li::before {
  content: ""; position: absolute; left: -21px; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--texto-2);
}
.linea-tiempo li.act-ai::before, .linea-tiempo li.act-auto::before { border-color: var(--info); }
.linea-tiempo li.act-driver::before { border-color: var(--bien); }
.linea-tiempo li.act-human::before { border-color: var(--texto); background: var(--texto); }
.linea-tiempo li.lt-ia .lt-texto { background: var(--info-suave); border-left: 3px solid var(--info); padding: 8px 10px; margin-top: 4px; }
.lt-meta { font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.lt-meta b { color: var(--texto); font-weight: 600; }
.lt-texto { margin: 1px 0 0; }
.lt-sombra { font-size: 12px; color: var(--info); }

.accion { margin-top: 18px; padding: 14px; background: var(--relleno); border-radius: var(--radio); }
.accion label { display: block; font-size: 14px; color: var(--texto-2); margin-bottom: 4px; }
.accion input, .accion textarea, .accion select {
  width: 100%; background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 4px;
  padding: 8px 10px; margin-bottom: 10px; color: var(--texto);
}
.accion textarea { min-height: 64px; resize: vertical; }
.accion input::placeholder, .accion textarea::placeholder { color: #8a94a2; }
.accion .campo-error { color: #b3261e; font-size: 13px; margin: -6px 0 8px; }
.accion fieldset { border: 0; padding: 0; margin: 4px 0 6px; }
.accion fieldset:disabled { opacity: .7; }
.accion legend { font: 650 semi-condensed 15px/1.2 var(--fuente); margin-bottom: 6px; }
.accion input[type=file] { padding: 6px; }
.accion input[type=file]::file-selector-button {
  margin-right: 10px; border: 1px solid var(--linea); background: #fff; color: var(--texto);
  border-radius: 4px; padding: 5px 10px; font: 500 14px/1.2 var(--fuente); cursor: pointer;
}
.accion .casilla { display: flex; gap: 10px; align-items: flex-start; color: var(--texto); font-size: 15px; margin-bottom: 12px; cursor: pointer; }
.accion input[type=checkbox] { width: 17px; height: 17px; margin: 3px 0 0; padding: 0; flex: none; accent-color: var(--noche); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.par input { margin-bottom: 4px; }
.resolucion { padding: 12px 14px; border-left: 3px solid var(--bien); background: var(--relleno); }

/* paradas autorizadas del viaje nuevo, fotos */
.parada { border-left: 3px solid var(--aviso); padding: 4px 0 4px 10px; margin-bottom: 10px; }
.parada-campos { display: grid; grid-template-columns: 1fr 104px; gap: 0 8px; }
.parada-campos .pc-nombre { grid-column: 1 / -1; }
.parada-campos input { margin-bottom: 2px; }
.parada .boton-texto { font-size: 13px; }
.fotos { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.fotos a { display: block; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--relleno); }
.fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos a:hover img { opacity: .85; }
.fotos span { display: block; font-size: 12px; color: var(--texto-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .parada-campos { grid-template-columns: 1fr; } }

/* ---------- mapa ---------- */
.leaflet-container { font: inherit; }
.unidad {
  font: 650 semi-condensed 13px/1 var(--fuente);
  padding: 4px 7px;
  border-radius: 3px;
  background: #fff;
  color: var(--noche);
  border: 2px solid var(--noche);
  box-shadow: 0 1px 3px rgba(21, 25, 30, .25);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  display: inline-block;
}
.unidad.u-high { background: var(--aviso); }
.unidad.u-critical { background: var(--peligro); color: #fff; border-color: #fff; }
.unidad.u-pre { box-shadow: inset 0 -3px 0 var(--aviso), 0 1px 3px rgba(21, 25, 30, .25); }
.unidad.u-sel { box-shadow: 0 0 0 3px var(--raya), 0 1px 3px rgba(21, 25, 30, .25); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: var(--texto); box-shadow: var(--sombra); }
.mapa-google { font: 600 15px/1 Arial, sans-serif; color: #3c4043; text-shadow: 0 0 2px #fff; margin: 0 0 4px 6px; pointer-events: none; }

/* ---------- avisos al monitorista: tarjetas que se quedan hasta cerrarlas ---------- */
.alarmas { position: fixed; left: 228px; bottom: 16px; z-index: 1100; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; }
.alarma { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #fff; color: var(--texto); border: 1px solid var(--texto); border-left: 8px solid var(--aviso); border-radius: var(--radio); box-shadow: 0 6px 24px rgba(21, 25, 30, .28); padding: 10px 10px 10px 12px; }
.alarma.sev-critical { border-left-color: var(--peligro); }
.alarma.sev-medium, .alarma.sev-low { border-left-color: var(--info); }
.alarma-cuerpo { display: grid; gap: 1px; min-width: 0; }
.alarma-cuerpo b { font: 700 semi-condensed 17px/1.2 var(--fuente); }
.alarma-cuerpo span { font-size: 14px; color: var(--texto-2); }
.alarma-cuerpo .alarma-estado { color: var(--aviso-texto); font-weight: 600; font-size: 13px; }
.alarma.sev-critical .alarma-estado { color: var(--peligro); }
.alarma-acc { display: flex; align-items: center; gap: 4px; }
.alarma-cerrar { width: 32px; height: 32px; border: 0; background: none; color: var(--texto-2); font-size: 24px; line-height: 1; cursor: pointer; border-radius: var(--radio); }
.alarma-cerrar:hover { color: var(--texto); background: var(--relleno); }
@media (max-width: 900px) { .alarmas { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 50vh; } }

/* ---------- ajustes ---------- */
.aj-form { margin-top: 10px; max-width: 720px; }
.aj-form select { max-width: 420px; }
.aj-acc { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.aj-texto { margin: 0 0 4px; max-width: 760px; }
.tabla-reglas td { vertical-align: middle; }
.tabla-reglas td:first-child { min-width: 240px; max-width: 360px; }
.tabla-reglas td b { display: block; font: 650 semi-condensed 16px/1.25 var(--fuente); }
.tabla-reglas td small { display: block; color: var(--texto-2); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.tabla-reglas select, .tabla-reglas input[type=number] { height: 36px; padding: 4px 8px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #fff; color: var(--texto); font: inherit; }
.tabla-reglas input[type=number] { width: 86px; }
.tabla-reglas input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--noche); flex: none; }
.aj-casilla { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.aj-num { display: block; white-space: nowrap; font-size: 14px; color: var(--texto-2); }
.aj-num + .aj-num, .aj-num + .aj-casilla { margin-top: 6px; }
.aj-sin { color: var(--texto-2); font-size: 14px; }
.aj-apagada td:first-child, .aj-apagada td:nth-child(3), .aj-apagada td:nth-child(4) { opacity: .5; }
#f-reglas .campo-error { color: #b3261e; font-size: 14px; margin: 10px 0 0; }
#aj-bloque-registro .accion { max-width: 720px; margin-top: 10px; }
.aj-ligas { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-width: 760px; }
.aj-ligas .boton-texto { display: inline; padding: 0; text-align: left; color: var(--texto); }
/* en pantallas angostas cada regla es un bloque, sin recorrer la tabla hacia los lados */
@media (max-width: 760px) {
  .tabla-reglas, .tabla-reglas tbody { display: block; }
  .tabla-reglas thead { display: none; }
  .tabla-reglas tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px; border-bottom: 1px solid var(--linea-suave); }
  .tabla-reglas tr:last-child { border-bottom: 0; }
  .tabla-reglas td { padding: 0; border: 0; }
  .tabla-reglas td:first-child { min-width: 0; max-width: none; }
  .tabla-reglas td:nth-child(3), .tabla-reglas td:nth-child(4) { grid-column: 1 / -1; }
  .tabla-reglas td:nth-child(3)::before { content: "Severidad"; color: var(--texto-2); font-size: 14px; margin-right: 10px; }
  .aj-num { white-space: normal; }
  .aj-sin { display: none; }
}

/* ---------- avisos ---------- */
.avisos { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 1000; }
.aviso { background: var(--noche); color: #fff; padding: 10px 16px; border-radius: var(--radio); box-shadow: var(--sombra); }
.aviso.error { background: var(--peligro); }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--noche); }
.acceso-caja {
  width: min(380px, 100%); background: #fff; color: var(--texto);
  border-radius: 6px; padding: 26px 24px; display: grid; gap: 6px; border-top: 6px solid var(--raya);
}
.acceso-caja .marca-nombre { color: var(--texto); }
.acceso-caja h1 { margin: 18px 0 8px; font-size: 28px; }
.acceso-caja label { font-size: 14px; color: var(--texto-2); }
.acceso-caja input {
  background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 4px; padding: 9px 10px; margin-bottom: 8px;
}
.acceso-caja .boton { margin-top: 6px; padding: 10px 14px; }
.acceso-caja .campo-error { color: #b3261e; }
.acceso-caja + .acceso-caja { margin-top: 16px; }
.acceso-caja .acceso-liga { display: block; margin: 14px auto 0; font-size: 14px; }
.acceso-caja .acceso-nota { margin: 6px 0 4px; padding: 10px 12px; background: var(--relleno); border-left: 3px solid var(--info); font-size: 15px; }
.acceso-caja .form-ayuda { margin: 0 0 12px; }
.acceso-caja > div:not(.marca) { display: grid; gap: 6px; }
/* «Mostrar contraseña», debajo del campo */
.ver-clave { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 14px; color: var(--texto-2); cursor: pointer; width: fit-content; }
.ver-clave input[type=checkbox], .acceso-caja .ver-clave input { width: 16px; height: 16px; margin: 0; padding: 0; flex: none; accent-color: var(--noche); }
.cu-enlace-fila a.boton { text-decoration: none; }

/* ---------- reportes ---------- */
.reportes { flex: 1; overflow-y: auto; padding: 22px clamp(16px, 3vw, 36px) 48px; }
.rep-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rep-cabeza h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid var(--linea); border-top: 3px solid var(--noche); border-radius: var(--radio); padding: 14px 16px; }
.kpi-t { margin: 0; color: var(--texto-2); font-size: 14px; }
.kpi-v { margin: 4px 0 2px; font: 800 semi-condensed 34px/1.05 var(--fuente); font-variant-numeric: tabular-nums; }
.kpi-v-chico { font-size: 20px; }
.kpi-s { margin: 0; color: var(--texto-2); font-size: 13px; }
.kpis-chicos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-alerta { border-top-color: var(--aviso); }
.kpi-alerta .kpi-v { color: var(--aviso-texto); }

.graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-bottom: 28px; }
.grafica { margin: 0; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px 16px; }
.grafica-ancha { grid-column: 1 / -1; padding-bottom: 30px; }
.grafica figcaption { font: 650 semi-condensed 16px/1.2 var(--fuente); margin-bottom: 12px; }
.barra-fila { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 48px; align-items: center; gap: 10px; padding: 3px 0; }
.barra-et { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-pista { height: 16px; display: block; }
.barra-val { display: block; height: 100%; background: var(--noche); border-radius: 0 3px 3px 0; }
.barra-val.c-critica { background: var(--peligro); }
.barra-val.c-alta { background: var(--aviso); }
.barra-val.c-media { background: var(--info); }
.barra-val.c-baja { background: #9aa5b3; }
.barra-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: 14px; }
.barra-fila:hover .barra-val, .col:hover .col-barra { opacity: .8; }
.columnas { display: flex; align-items: flex-end; gap: 2px; height: 160px; border-bottom: 1px solid var(--linea); padding-top: 18px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; min-width: 0; }
.col-barra { width: min(24px, 80%); background: var(--noche); border-radius: 3px 3px 0 0; display: block; }
.col-num { font-size: 12px; color: var(--texto-2); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.col-et { position: absolute; bottom: -20px; font-size: 11px; color: var(--texto-2); white-space: nowrap; }

.viajes-rep h2, .rep-viaje h2 { font: 700 semi-condensed 22px/1.2 var(--fuente); margin: 0 0 10px; }
.tabla-envoltura { overflow-x: auto; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); position: relative; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; color: var(--texto-2); font-weight: 600; font-size: 13px; background: var(--relleno-2); padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.rep-viaje { margin-top: 28px; border-top: 1px solid var(--linea); padding-top: 22px; }
.rv-cabeza { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.rv-cabeza p { margin: 2px 0; color: var(--texto-2); }
.rep-viaje .kpis { margin-top: 16px; }
.narrativa { background: #fff; border: 1px solid var(--linea); border-left: 3px solid var(--info); padding: 12px 16px; margin: 4px 0 8px; }
.narrativa h3 { margin: 0 0 6px; }
.narrativa p { margin: 0; max-width: 75ch; }
.cargando { color: var(--texto-2); }

/* ---------- planeación de rutas (y las páginas de Cuenta y Clientes, que comparten su armazón) ---------- */
.plan { flex: 1; overflow-y: auto; padding: 22px clamp(16px, 3vw, 36px) 48px; }
.plan .rep-cabeza { align-items: flex-start; }
.plan .rep-cabeza h1 { margin-bottom: 4px; }
.plan .rep-cabeza .form-ayuda { max-width: 72ch; }
.plan-nota { background: #fff; border: 1px solid var(--linea); border-left: 3px solid var(--info); padding: 12px 16px; margin: 0 0 18px; }
.plan-bloque { background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: 20px 22px 22px; margin-bottom: 14px; }
.plan-bloque h2, .plan-res-cab h2 { font: 700 semi-condensed 22px/1.2 var(--fuente); margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-bloque h2 small { font: 400 14px/1 var(--fuente); color: var(--texto-2); }
.plan-bloque > h2 { margin-bottom: 4px; }
.paso {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: var(--noche); color: #fff; border-radius: 3px; font: 700 semi-condensed 17px/1 var(--fuente);
}
.plan-bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 6px; }
.plan-acc { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.plan-acc label.boton { display: inline-block; }
#pl-archivo:focus-visible + label { outline: 2px solid var(--info); outline-offset: 2px; }
.plan :where(input:not([type=checkbox]):not([type=file]), select) {
  background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 4px; padding: 7px 9px; width: 100%;
}
.plan input::placeholder { color: #8a94a2; }
.plan-import { border-left: 3px solid var(--bien); background: var(--relleno-2); padding: 10px 14px; margin: 4px 0 12px; font-size: 14px; }
.plan-import.con-error { border-left-color: var(--aviso); }
.plan-import p { margin: 0; }
.plan-import ul { margin: 6px 0 0; padding-left: 18px; color: var(--texto-2); }

.tabla-plan { counter-reset: fila; min-width: 1420px; }
.tabla-plan tbody tr { counter-increment: fila; }
.tabla-plan th { white-space: normal; vertical-align: bottom; line-height: 1.25; padding: 8px 6px; }
.tabla-plan td { padding: 5px 6px; vertical-align: middle; }
.tabla-plan th:first-child, .tabla-plan td:first-child { padding-left: 12px; }
/* el número de fila y su «Quitar» se quedan a la vista aunque la tabla se recorra hacia los lados */
.tabla-plan th:first-child, .tabla-plan td.tp-n { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--linea); }
.tabla-plan td.tp-n { background: #fff; white-space: nowrap; }
.tp-n::before { content: counter(fila); color: var(--texto-2); font-variant-numeric: tabular-nums; display: inline-block; min-width: 20px; }
.tp-n .tp-quitar { font-size: 13px; margin-left: 4px; }
.tp-n .tp-quitar:hover { color: var(--peligro); }
.plan .tabla-plan .tp-ref { min-width: 110px; }
.plan .tabla-plan .tp-rec, .plan .tabla-plan .tp-ent { min-width: 210px; }
.plan .tabla-plan .tp-num { width: 70px; min-width: 70px; }
.plan .tabla-plan .tp-nota { min-width: 170px; }
.tp-horas { white-space: nowrap; }
.plan .tp-horas input { width: 128px; }
.tp-horas span { color: var(--texto-2); padding: 0 4px; }

.plan-unidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.pl-unidad {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 10px;
}
.pl-unidad:has(input[type=checkbox]:checked) { border-color: var(--noche); box-shadow: 0 0 0 1px var(--noche); }
.pl-unidad > label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.pl-unidad b { font: 650 semi-condensed 16px/1.2 var(--fuente); }
.pl-unidad small { color: var(--texto-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cupo { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); flex: none; }
.plan .pl-cupo input { width: 58px; padding: 5px 6px; }
.plan input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--noche); flex: none; }
.plan-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plan-campos .pc-ancho { grid-column: span 2; }
.plan-campos .pc-todo { grid-column: 1 / -1; }
.plan-campos label { display: block; font-size: 14px; color: var(--texto-2); margin-bottom: 4px; }
.plan-opciones { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 16px; }
/* cómo se entrega: debajo de la tabla de recolecciones */
.plan-entregas { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.plan-entregas h3 { font: 700 semi-condensed 17px/1.2 var(--fuente); margin: 0; }
.plan-entregas .plan-opciones { margin-top: 10px; }
.plan-entregas .plan-campos { margin-top: 12px; }
.plan-entregas .plan-campos:not(:has(> div:not([hidden]))) { display: none; }
.plan-entregas .form-ayuda { margin: 10px 0 0; }
.tabla-plan.sin-entrega .tp-ent { background: var(--relleno); border-style: dashed; color: transparent; }
.tabla-plan.sin-entrega .tp-ent::placeholder { color: transparent; }
.plan-pasado { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--linea); border-left: 3px solid var(--texto-2); background: var(--superficie); font-size: 14px; }
.plan-opciones label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.plan-error { color: #b3261e; margin: 0 0 10px; }

/* resultado */
#pl-resultado { margin-bottom: 30px; }
.plan-res-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.plan-res-cab p { margin: 4px 0 0; color: var(--texto-2); }
.plan-avisos { list-style: none; margin: 0 0 16px; padding: 10px 14px; background: #fff; border: 1px solid var(--linea); border-left: 3px solid var(--aviso); display: grid; gap: 4px; font-size: 14px; }
.plan-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 14px; align-items: start; }
.plan-mapa { position: sticky; top: 0; }
#mapa-plan { height: min(640px, 70vh); border-radius: var(--radio); border: 1px solid var(--linea); background: #e6e9ed; }
.plan-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 8px 0 0; color: var(--texto-2); font-size: 13px; }
.plan-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.plan-rutas { display: grid; gap: 10px; }
.ruta { background: #fff; border: 1px solid var(--linea); border-left: 5px solid var(--c); border-radius: var(--radio); }
.ruta.atenuada { opacity: .5; }
.ruta summary { list-style: none; cursor: pointer; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.ruta summary::-webkit-details-marker { display: none; }
.ruta summary b { font: 700 semi-condensed 19px/1.2 var(--fuente); }
.ruta summary .ruta-hora { font: 650 semi-condensed 17px/1.2 var(--fuente); font-variant-numeric: tabular-nums; text-align: right; }
.ruta summary .ruta-sub { grid-column: 1 / -1; color: var(--texto-2); font-size: 14px; }
.ruta summary::after { content: "Ver paradas"; grid-column: 1 / -1; font-size: 13px; color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; }
.ruta[open] summary::after { content: "Ocultar paradas"; }
.ruta-acc { padding: 0 14px 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.ruta-acc .boton-texto { font-size: 13px; }
.ruta-acc .boton-texto[aria-pressed="true"] { color: var(--texto); font-weight: 700; }
.ruta-paradas { list-style: none; margin: 0; padding: 0 14px 12px; }
.rp { display: grid; grid-template-columns: 28px 46px 1fr; gap: 0 8px; padding: 7px 0; border-top: 1px solid var(--linea-suave); align-items: start; }
.rp-hora { font: 650 semi-condensed 15px/1.5 var(--fuente); font-variant-numeric: tabular-nums; }
.rp-txt { min-width: 0; }
.rp-txt b { font-weight: 600; }
.rp-txt span { display: block; color: var(--texto-2); font-size: 14px; overflow-wrap: anywhere; }
.rp-txt small { display: block; color: var(--texto-2); font-size: 13px; }
.rp-txt .rp-nota { color: var(--texto); }
.rp-extremo .rp-hora, .rp-extremo b { color: var(--texto-2); }

/* marcadores de parada: círculo lleno = recoger, cuadro con borde = entregar */
.pm {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
  font: 700 semi-condensed 13px/1 var(--fuente); font-variant-numeric: tabular-nums;
}
.pm-rec { background: var(--c); color: #fff; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c); }
.pm-ent { background: #fff; color: var(--c); border-radius: 3px; border: 2px solid var(--c); }
.pm-base { background: var(--noche); color: #fff; border: 2px solid #fff; border-radius: 3px; width: auto; padding: 0 6px; height: 22px; white-space: nowrap; }
.leaflet-marker-icon .pm { transform: translate(-50%, -50%); }
.plan-sin { margin-top: 16px; background: #fff; border: 1px solid var(--linea); border-left: 5px solid var(--aviso); border-radius: var(--radio); padding: 14px 16px; }
.plan-sin h3 { margin: 0 0 4px; color: var(--aviso-texto); font-size: 18px; }
.plan-sin p { margin: 0 0 10px; color: var(--texto-2); }
.plan-sin .tabla-envoltura { border: 0; }
.plan-libres { color: var(--texto-2); margin: 10px 0 0; font-size: 14px; }
.plan-avisos.con-problema { border-left-color: var(--peligro); }
.etq-candado { background: var(--noche); color: #fff; font: 600 12px/1 var(--fuente); padding: 3px 7px; vertical-align: 2px; }

/* ---------- mover paradas a mano ---------- */
#pl-ed-barra { position: sticky; top: 0; z-index: 1100; }
.ed-barra { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--raya); color: var(--noche); border: 1px solid #e0b700; border-radius: var(--radio); padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--sombra); }
.ed-barra.ed-ocupada { background: #ffe68a; }
.ed-texto { flex: 1 1 380px; min-width: 0; }
.ed-texto p { margin: 4px 0 0; font-size: 15px; }
.ed-texto .ed-incumple { font-weight: 600; }
.ed-botones { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ed-botones .boton-texto { color: var(--noche); }
.ed-botones .boton:disabled { opacity: .45; cursor: default; }
.ruta-ed { overflow: hidden; }
.ruta-ed.ruta-fija { background: var(--relleno-2); }
.ruta-ed-cab { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px 8px; }
.ruta-ed-cab b { font: 700 semi-condensed 19px/1.2 var(--fuente); }
.ruta-ed-cab .ruta-hora { font: 650 semi-condensed 17px/1.2 var(--fuente); font-variant-numeric: tabular-nums; text-align: right; }
.ruta-ed-cab .ruta-sub { color: var(--texto-2); font-size: 14px; }
.ed-candado { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; justify-self: end; white-space: nowrap; }
.ed-candado input { width: 16px; height: 16px; accent-color: var(--noche); }
.ed-problemas { list-style: none; margin: 0 14px 8px; padding: 8px 10px; background: #fdecea; border-left: 3px solid var(--peligro); font-size: 14px; display: grid; gap: 3px; }
.rp-ed { grid-template-columns: 28px 46px 1fr auto; }
.rp-ed[draggable="true"] { cursor: grab; }
.rp-ed.rp-mala { background: #fdecea; box-shadow: -14px 0 0 #fdecea, 14px 0 0 #fdecea; }
.rp-ed.ed-arrastrando { opacity: .35; }
.rp-ed.ed-antes { box-shadow: 0 -3px 0 var(--noche); }
.rp-ed.ed-despues { box-shadow: 0 3px 0 var(--noche); }
.ed-lista { min-height: 44px; }
.ed-lista.ed-recibe { background: var(--aviso-suave); }
.ed-vacia { color: var(--texto-2); font-size: 14px; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
.ed-acc { display: flex; align-items: center; gap: 4px; }
.ed-flecha { width: 30px; height: 30px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #fff; color: var(--texto); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.ed-flecha:hover:not(:disabled) { border-color: var(--texto); }
.ed-flecha:disabled { opacity: .3; cursor: default; }
.ed-acc select, .ed-sin select { height: 30px; max-width: 118px; padding: 2px 6px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #fff; color: var(--texto); font: inherit; font-size: 13px; }
.ed-sin { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-sin li { display: grid; grid-template-columns: minmax(70px, auto) 1fr auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linea-suave); }
.ed-sin li span { color: var(--texto-2); font-size: 14px; }
.ed-sin select { max-width: 180px; }
@media (max-width: 760px) {
  .rp-ed { grid-template-columns: 28px 46px 1fr; }
  .rp-ed .ed-acc { grid-column: 2 / -1; margin-top: 6px; }
  .ed-acc select { max-width: none; flex: 1; }
  .ed-flecha { width: 38px; height: 34px; }
  .ed-acc select, .ed-sin select { height: 34px; }
  .ed-sin li { grid-template-columns: 1fr; }
  .ruta-ed-cab { grid-template-columns: 1fr; }
  .ruta-ed-cab .ruta-hora { text-align: left; }
  .ed-candado { justify-self: start; }
}
.plan-guardados { margin-top: 26px; }

/* cambios del día en un plan enviado */
.plan-cambios { margin-bottom: 16px; border-left: 5px solid var(--aviso); }
.plan-cambios .cargando { margin: 8px 0 0; color: var(--texto-2); }
.cb-camiones { list-style: none; margin: 4px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; }
.cb-camiones li { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid var(--linea-suave); }
.cb-camiones b { font: 650 semi-condensed 17px/1.2 var(--fuente); }
.cb-camiones span { color: var(--texto-2); font-size: 14px; }
.cb-refs { border: 1px solid var(--linea); border-radius: var(--radio); margin: 14px 0 0; padding: 8px 14px 10px; display: grid; gap: 4px; }
.cb-refs legend { padding: 0 6px; color: var(--texto-2); font-size: 14px; }
.cb-refs label { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 5px 0; cursor: pointer; }
.cb-refs input { margin-top: 4px; }
.cb-refs small { display: block; color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.cb-prop { background: var(--relleno-2); border: 1px solid var(--aviso); border-radius: var(--radio); padding: 14px 16px 16px; margin: 8px 0 14px; }
.cb-prop h3 { margin: 0 0 8px; font-size: 18px; color: var(--aviso-texto); }
.cb-resumen { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.cb-rutas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 22px; }
.cb-ruta h4 { margin: 0 0 2px; font: 700 semi-condensed 18px/1.2 var(--fuente); }
.cb-ruta h4 small { font: 400 14px/1.2 var(--fuente); color: var(--texto-2); margin-left: 6px; }
.cb-ruta .av { padding: 7px 0; }
.cb-quita { margin: 8px 0 0; color: var(--texto-2); font-size: 14px; }
.cb-historial { margin-top: 10px; font-size: 14px; }
.cb-historial summary { cursor: pointer; color: var(--texto-2); }
.cb-historial ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cb-historial li { display: grid; gap: 2px; }
.cb-historial li span { color: var(--texto-2); }

@media (max-width: 1000px) {
  .plan-cuerpo { grid-template-columns: 1fr; }
  .plan-mapa { position: static; }
  #mapa-plan { height: 52vh; }
  .plan-campos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .plan-campos { grid-template-columns: 1fr; }
  .plan-campos .pc-ancho { grid-column: auto; }
  .boton-grande { width: 100%; }
}

/* ---------- avance del operador: paradas y fotos ---------- */
.av-cabeza p { margin: 0 0 12px; color: var(--texto-2); }
.av-lista { list-style: none; margin: 0; padding: 0; }
.av { display: grid; grid-template-columns: 28px 1fr; gap: 0 10px; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
.av-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--texto-2); color: var(--texto-2); font: 700 semi-condensed 13px/1 var(--fuente); }
.av-arrived .av-n { border-color: var(--aviso-texto); color: var(--aviso-texto); }
.av-done .av-n { background: var(--bien); border-color: var(--bien); color: #fff; }
.av b { font-weight: 600; }
.av-dir { display: block; color: var(--texto-2); font-size: 14px; overflow-wrap: anywhere; }
.av-est { display: block; font-size: 13px; color: var(--texto-2); }
.av-arrived .av-est { color: var(--aviso-texto); }
.av-done .av-est { color: var(--bien); }
.av-nota { display: block; font-size: 14px; margin-top: 2px; }
.av .fotos { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.rep-viaje .av-lista { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 4px 16px; }
.rep-viaje .av:first-child { border-top: 0; }

/* ---------- cuenta y clientes ---------- */
.cu-form { background: var(--relleno-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px 16px; margin: 8px 0 14px; }
.cu-form h3 { margin: 0 0 12px; color: var(--texto); font-size: 18px; }
.cu-botones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cu-enlace { border-left-color: var(--aviso); }
.cu-enlace b { font: 650 semi-condensed 17px/1.2 var(--fuente); }
.cu-enlace-fila { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; align-items: center; }
.cu-enlace-fila input { flex: 1; min-width: 220px; font-size: 13px; }
.cu-acc { display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; }
.cu-acc .boton-texto { font-size: 13px; white-space: nowrap; }
.cu-entrar { color: var(--texto); font-weight: 650; }
.cu-sub { display: block; color: var(--texto-2); font-size: 13px; }
#cu-unidades td, #cu-lugares td, #cu-cuentas td, #cu-usuarios td { vertical-align: middle; }
.cu-mes { font-size: 14px; color: var(--texto-2); }
.plan .cu-mes-campo { width: auto; padding: 5px 8px; }
.cu-admin { border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px 4px; margin: 16px 0 0; }
.cu-admin legend { font: 650 semi-condensed 15px/1.2 var(--fuente); padding: 0 6px; color: var(--texto-2); }
.cu-admin .plan-opciones { margin-top: 6px; }
.cu-admin .plan-opciones + .form-ayuda { margin-top: 8px; }
.cu-clave { margin-top: 10px; }
#cu-uso { margin: 6px 0 0; }
.cu-google { margin: 0 0 14px; }
#cu-respaldos .plan-avisos { margin: 6px 0 8px; background: var(--relleno-2); }
#cu-respaldos .plan-avisos.con-problema { border-left-color: var(--peligro); }

/* en celular las tablas de Cuenta y Clientes se leen como fichas: nada queda escondido a la derecha */
@media (max-width: 760px) {
  #cu-unidades thead, #cu-lugares thead, #cu-cuentas thead, #cu-usuarios thead { display: none; }
  #cu-unidades tr, #cu-lugares tr, #cu-cuentas tr, #cu-usuarios tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--linea-suave); }
  #cu-unidades tr:last-child, #cu-lugares tr:last-child, #cu-cuentas tr:last-child, #cu-usuarios tr:last-child { border-bottom: 0; }
  #cu-unidades td, #cu-lugares td, #cu-cuentas td, #cu-usuarios td { display: block; padding: 3px 0; border: 0; }
  #cu-unidades td:first-child b, #cu-lugares td:first-child b, #cu-cuentas td:first-child b, #cu-usuarios td:first-child b { font: 700 semi-condensed 19px/1.2 var(--fuente); }
  #cu-unidades td[data-t]::before, #cu-lugares td[data-t]::before, #cu-cuentas td[data-t]::before, #cu-usuarios td[data-t]::before { content: attr(data-t) ": "; color: var(--texto-2); font-size: 13px; }
  #cu-unidades td[data-t] .cu-sub, #cu-lugares td[data-t] .cu-sub, #cu-cuentas td[data-t] .cu-sub, #cu-usuarios td[data-t] .cu-sub { display: inline; margin-left: 6px; }
  .cu-vacia { display: none !important; }
  .cu-acc { justify-content: flex-start; margin-top: 6px; gap: 6px 18px; }
  .cu-acc .boton-texto { font-size: 15px; padding: 6px 0; }
}

/* ---------- sugerencias de dirección ---------- */
.dir-lista { position: fixed; z-index: 3000; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 10px 28px rgba(21, 25, 30, .18); max-height: min(340px, 60vh); overflow-y: auto; padding: 4px; }
.dir-op { display: grid; gap: 1px; padding: 8px 10px; border-radius: 3px; cursor: pointer; }
.dir-op b { font-weight: 600; overflow-wrap: anywhere; }
.dir-op small { color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.dir-op:hover, .dir-op.activa { background: var(--relleno); }
.dir-op.activa { outline: 2px solid var(--info); outline-offset: -2px; }
.dir-pie { margin: 2px 0 0; padding: 6px 10px 4px; border-top: 1px solid var(--linea-suave); color: var(--texto-2); font-size: 12px; text-align: right; }

/* ---------- registro periódico ---------- */
#f-registro .par { align-items: end; }
.rg-estado { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--info); background: var(--relleno); }
.rg-estado.encendido { border-left-color: var(--bien); }
.rg-unidades { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rg-unidad {
  width: 100%; text-align: left; display: grid; gap: 2px; cursor: pointer; padding: 8px 10px;
  background: #fff; border: 1px solid var(--linea); border-left: 3px solid var(--linea-fuerte); border-radius: var(--radio);
}
.rg-unidad:hover { border-color: #aab3c0; border-left-color: var(--texto-2); }
.rg-unidad.niv-prealert, .rg-unidad.niv-prealert:hover { border-left-color: var(--aviso); }
.rg-unidad.niv-alert, .rg-unidad.niv-alert:hover { border-left-color: var(--peligro); }
.rg-u-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rg-u-cab b { font: 650 semi-condensed 15px/1.2 var(--fuente); }
.rg-u-det { font-size: 13px; color: var(--texto-2); }
.rg-hist-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rg-hist-cab .boton-texto { font-size: 13px; }
.linea-tiempo li.rg-n-prealert::before { border-color: var(--aviso); background: var(--aviso); }
.linea-tiempo li.rg-n-alert::before { border-color: var(--peligro); background: var(--peligro); }
.linea-tiempo li.rg-n-gris::before { border-style: dashed; }

/* ---------- bitácora del viaje ---------- */
.bt-cada { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; color: var(--texto-2); font-size: 14px; }
.bt-ir { border: 0; background: none; padding: 0; cursor: pointer; color: var(--texto); font-weight: 600; }
.bt-ir:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-dato { color: var(--texto-2); }
.linea-tiempo li.bt-quieta::before { border-color: var(--aviso); background: var(--aviso); }
.linea-tiempo li.bt-quieta .lt-texto b { color: var(--aviso-texto); font-weight: 600; }
.linea-tiempo li.bt-viaje::before { border-color: var(--noche); background: var(--noche); border-radius: 2px; }
.linea-tiempo li.bt-alerta .lt-texto { background: var(--relleno); border-left: 3px solid var(--aviso); padding: 6px 10px; margin-top: 3px; }
.linea-tiempo li.bt-alerta.bt-critica .lt-texto { border-left-color: var(--peligro); }
.linea-tiempo li.bt-alerta .boton-texto { color: var(--texto); font-weight: 650; padding: 0; }
.bt-de { color: var(--texto-2); }
.bt-nota { margin: 4px 0 0; padding: 5px 10px; background: var(--relleno); border-left: 3px solid var(--linea-fuerte); font-size: 14px; color: var(--texto-2); }
.bt-avisada .bt-nota { border-left-color: var(--aviso); color: var(--texto); }
.bt-nota .boton-texto { color: var(--texto); font-weight: 650; padding: 0; }
.linea-tiempo li.bt-ahora .bt-dato::after { content: ", lo más reciente"; color: var(--bien); font-weight: 600; }
.det-acc { margin: 10px 0 0; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .tablero { grid-template-columns: 1fr; grid-template-rows: 45vh auto; }
  #app { height: auto; }
  .lateral { border-left: 0; border-top: 1px solid var(--linea); }
  .barra { gap: 10px 12px; padding: 10px 14px; }
  .secciones { flex-wrap: wrap; max-width: 100%; }
  .resumen { order: 3; width: 100%; flex: none; }
  .barra-der { gap: 10px; margin-left: 0; width: 100%; order: 4; flex-wrap: wrap; }
  .usuario { display: none; }
  .reloj { margin-left: auto; font-size: 17px; }
  .rep-cabeza h1 { font-size: 28px; }
}
@media (max-width: 520px) { .secciones { gap: 2px; } .secciones button { padding: 6px 8px; font-size: 15px; } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---------- planeación según el perfil de la cuenta ----------
   Las columnas que la operación no usa no se muestran: en reparto la fila no trae dónde se recoge, en
   recolección no trae dónde se entrega, y el peso y el volumen solo salen si la cuenta mide con ellos. */
.tabla-plan.op-reparto .c-rec, .tabla-plan.op-acopio .c-ent,
.tabla-plan.sin-kg .c-kg, .tabla-plan.sin-m3 .c-m3 { display: none; }
.tabla-plan.op-reparto, .tabla-plan.op-acopio { min-width: 960px; }
.tabla-plan.sin-recoleccion .tp-rec { background: var(--relleno); border-style: dashed; color: transparent; }
.tabla-plan.sin-recoleccion .tp-rec::placeholder { color: transparent; }
.plan .tabla-plan .tp-kg, .plan .tabla-plan .tp-m3 { width: 86px; min-width: 86px; }

/* unidades del plan: cuando hay peso o volumen, las medidas bajan a un segundo renglón */
.plan-unidades.con-medidas { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.plan-unidades.con-medidas .pl-unidad { flex-wrap: wrap; }
.pl-medidas { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.plan .pl-cupo input.pl-ancho { width: 88px; }

/* paradas del plan: lo que pesa u ocupa una entrega, y las referencias de una carga en bloque */
.rp-carga { font: 500 13px/1 var(--fuente); font-style: normal; color: var(--texto-2); margin-left: 4px; white-space: nowrap; }
.rp-txt .rp-refs { color: var(--texto); overflow-wrap: anywhere; }
.ed-carga { background: var(--relleno-2); }

/* ajustes: perfil de planeación */
.aj-plan { max-width: 760px; margin-top: 10px; }
.aj-plan fieldset { margin: 0; min-width: 0; }
.aj-sub { font: 650 semi-condensed 15px/1.2 var(--fuente); margin: 18px 0 8px; }
.aj-plan fieldset > .aj-sub:first-child { margin-top: 0; }
.aj-plan .casilla span b { font-weight: 650; }
.aj-plan input[type=radio] { width: 17px; height: 17px; margin: 3px 0 0; padding: 0; flex: none; accent-color: var(--noche); }
.pf-giros { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.pf-giro {
  text-align: left; background: #fff; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  padding: 10px 12px; cursor: pointer; font: inherit; color: var(--texto);
}
.pf-giro b { display: block; font: 650 semi-condensed 16px/1.2 var(--fuente); }
.pf-giro span { display: block; font-size: 13px; line-height: 1.35; color: var(--texto-2); margin-top: 4px; }
.pf-giro:hover { border-color: var(--noche); }
.pf-giro[aria-pressed="true"] { border-color: var(--noche); box-shadow: inset 0 0 0 1px var(--noche), inset 4px 0 0 var(--raya); }
.aj-plan fieldset:disabled .pf-giro { cursor: default; }

/* cuenta espejo: estado del enlace en la tabla de camiones y en su formulario */
.cu-sub-mal { color: var(--aviso-texto); }
.fu-espejo-acc { margin-top: 8px; align-items: center; }
.fu-espejo-acc .form-ayuda { margin: 0; flex: 1 1 260px; }

/* ---------- ficha de monitoreo ---------- */
.ficha { max-width: 1180px; }
.fi-cabeza { display: flex; justify-content: space-between; gap: 14px 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.fi-cabeza h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.fi-cabeza p { margin: 6px 0 0; color: var(--texto-2); max-width: 78ch; }
.fi-acc { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
.fi-kpis { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fi-v { font: 700 semi-condensed 19px/1.25 var(--fuente); margin: 6px 0 2px; }
.fi-bien { border-top-color: var(--bien); }
.fi-falta { border-top-color: var(--linea-fuerte); }
.fi-falta .fi-v { color: var(--texto-2); font-weight: 500; }
.ficha :where(input, select, textarea) {
  background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 4px; padding: 7px 9px; width: 100%;
}
.ficha textarea { resize: vertical; min-height: 38px; display: block; }
.ficha input::placeholder { color: #8a94a2; }
.fi-grupo { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.fi-grupo legend { font: 650 semi-condensed 16px/1.2 var(--fuente); color: var(--texto-2); padding: 0; margin-bottom: 8px; }
.fi-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fi-campos label { display: block; font-size: 14px; color: var(--texto-2); margin-bottom: 4px; }
.fi-campos .fi-largo { grid-column: span 2; }
.fi-nota { display: block; font-size: 12px; color: var(--texto-2); margin-top: 2px; }
.fi-sin { color: var(--texto-2); }
.fi-cuando { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fi-corrige { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
.fi-corrige input { width: auto; flex: 0 1 230px; }
.tabla-momentos td { vertical-align: middle; }
.fi-alertas { margin: 0; padding-left: 20px; }
.fi-alertas li { margin: 2px 0; }
.tabla-obs td { vertical-align: middle; padding-top: 7px; padding-bottom: 7px; }
.tabla-obs .etq { white-space: nowrap; }
.etq-terminal { background: var(--noche); color: #fff; }
.etq-sin { background: none; border: 1px dashed var(--linea-fuerte); color: var(--texto-2); }
.fi-coment { min-width: 260px; }
.fi-auto { display: block; font-size: 12px; font-weight: 600; color: var(--aviso-texto); margin-bottom: 3px; letter-spacing: .01em; }
.tabla-obs .fi-com { padding: 5px 8px; }
.tv-acc { white-space: nowrap; }
.tv-acc .boton-texto + .boton-texto { margin-left: 10px; }
.segmentos button[aria-pressed="true"] { background: #fff; color: var(--texto); box-shadow: 0 0 0 1px var(--linea); }
@media (max-width: 1000px) { .fi-campos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .fi-cabeza h1 { font-size: 24px; }
  .fi-campos { grid-template-columns: 1fr; }
  .fi-campos .fi-largo { grid-column: auto; }
  .ficha .plan-bloque { padding: 16px 14px 18px; }
  /* en el teléfono cada renglón de la bitácora y cada momento se apilan en vez de recorrerse de lado */
  .tabla-obs thead, .tabla-momentos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-obs tr, .tabla-momentos tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--linea-suave); align-items: center; }
  .tabla-obs tr:last-child, .tabla-momentos tr:last-child { border-bottom: 0; }
  .tabla-obs td, .tabla-momentos td { padding: 0; border: 0; }
  .tabla-obs td:nth-child(3), .tabla-obs td:nth-child(4) { grid-column: 1 / -1; }
  .tabla-momentos td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .tabla-momentos td:nth-child(4), .tabla-momentos td[colspan] { grid-column: 1 / -1; }
  .fi-coment { min-width: 0; }
  .fi-corrige input { flex: 1 1 100%; }
}
/* archivos de la ficha */
.fi-rotulo { display: block; font-size: 14px; color: var(--texto-2); margin-bottom: 4px; }
.fi-archivos { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); }
.fi-archivos li { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; padding: 7px 10px; border-bottom: 1px solid var(--linea-suave); }
.fi-archivos li:last-child { border-bottom: 0; }
.fi-archivos a { color: var(--info); font-weight: 600; overflow-wrap: anywhere; }
.fi-archivos small { color: var(--texto-2); font-size: 13px; flex: 1 1 180px; }
.fi-sin-archivos { margin: 0 0 8px; font-size: 14px; }
.fi-archivo label.boton { display: inline-block; cursor: pointer; }
.fi-archivo label.fi-lleno { opacity: .6; cursor: default; }
.fi-archivo input:focus-visible + label { outline: 2px solid var(--info); outline-offset: 2px; }

/* ---------- avisos al cliente ---------- */
.viaje-acc { flex-wrap: wrap; row-gap: 2px; }
.viaje-toca { display: block; width: 100%; margin: 8px 0 4px; padding: 8px 10px; border: 0; border-radius: var(--radio); background: var(--aviso); color: var(--noche); font: 650 semi-condensed 15px/1.25 var(--fuente); text-align: left; cursor: pointer; }
.viaje-toca:hover { background: #e0a900; }
.viaje-aviso { display: block; margin: 4px 0 0; font-size: 13px; color: var(--texto); font-weight: 600; }
.cn-toca { color: var(--aviso-texto); font-weight: 600; }
.cn-gps { margin: 0; padding: 10px 12px; border-left: 3px solid var(--bien); background: var(--bien-suave); border-radius: var(--radio); font-size: 14px; }
.cn-gps.cn-viejo { border-left-color: var(--aviso); background: var(--aviso-suave); color: var(--aviso-texto); }
.cn-gps .boton-texto { padding: 0; font-size: 13px; }
#f-aviso textarea { min-height: 170px; font-size: 14px; line-height: 1.45; margin-bottom: 4px; }
#f-aviso .cn-rehacer { display: block; font-size: 13px; margin-bottom: 10px; padding: 0; }
#f-aviso .boton { width: 100%; margin-bottom: 8px; }
.cn-historial { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.cn-historial li { padding: 8px 0; border-top: 1px solid var(--linea-suave); }
.cn-historial pre, .na-muestra { margin: 4px 0 0; font: inherit; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texto-2); }
.aj-avisos { max-width: 760px; margin-top: 10px; }
.aj-avisos select { max-width: 320px; }
.aj-avisos textarea { min-height: 150px; font-size: 14px; line-height: 1.45; }
.na-datos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.na-dato { border: 1px solid var(--linea-fuerte); background: #fff; border-radius: var(--radio); padding: 4px 8px; cursor: pointer; font-size: 13px; font-weight: 600; text-align: left; }
.na-dato small { display: block; font-weight: 400; color: var(--texto-2); font-size: 12px; }
.na-dato:hover { background: var(--relleno); }
.na-muestra { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 12px; color: var(--texto); font-size: 14px; }

/* ---------- plataformas de GPS por agregar (Clientes) ---------- */
.sec-marca { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px; border-radius: 10px; background: var(--raya); color: var(--noche); font: 700 12px/1.5 var(--fuente); text-align: center; vertical-align: 1px; }
.cl-lector { border: 1px solid var(--linea); border-radius: 6px; padding: 12px 14px; margin-top: 10px; background: var(--relleno-2); }
.cl-lector-cab { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.cl-lector-cab b { font: 650 semi-condensed 17px/1.2 var(--fuente); overflow-wrap: anywhere; }
.cl-lector .cu-sub { margin: 4px 0 8px; }
.cl-lector-lista { list-style: none; margin: 0; padding: 0; }
.cl-lector-lista li { display: flex; gap: 8px 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.cl-lector-lista a.boton { text-decoration: none; }

/* ---------- editor del formato de la ficha (Ajustes) ---------- */
.ff { margin-top: 10px; max-width: 980px; }
.ff fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ff :where(input, select) { background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 4px; padding: 7px 9px; width: 100%; }
.ff input::placeholder { color: #8a94a2; }
.ff select:disabled { background: var(--relleno); color: var(--texto-2); }
.ff-bloque { border: 1px solid var(--linea); border-radius: 6px; padding: 12px 14px 14px; margin-bottom: 12px; background: var(--relleno-2); }
.ff-bloque-cab { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ff-titulo { flex: 1 1 220px; max-width: 360px; font: 650 semi-condensed 17px/1.2 var(--fuente); }
.ff-acc { display: flex; gap: 2px 12px; flex-wrap: wrap; align-items: center; }
.ff-acc .boton-texto { font-size: 13px; white-space: nowrap; }
.ff-acc .boton-texto:disabled { opacity: .35; cursor: default; text-decoration: none; }
.ff-fila { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.3fr) auto; gap: 8px 10px; align-items: center; margin-bottom: 6px; }
.ff-encabezado { font-size: 13px; color: var(--texto-2); font-weight: 600; margin-bottom: 4px; }
.ff-nota { font-size: 13px; color: var(--texto-2); }
.ff-nuevo { margin-top: 6px; }
.ff-partes { margin: 0 0 4px; flex-direction: column; gap: 6px; }
.ff-partes label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ff .ff-partes input { width: 17px; height: 17px; padding: 0; flex: none; accent-color: var(--noche); }
.ff .aj-sub:first-child { margin-top: 0; }
.ff-pendiente { color: var(--aviso-texto); margin: 0; }
.v-e-estado { margin: 6px 0 10px; }
#v-espejo .boton { margin-bottom: 0; }
@media (max-width: 760px) {
  .ff-encabezado { display: none; }
  .ff-fila { grid-template-columns: 1fr 1fr; padding: 10px 0; border-top: 1px solid var(--linea); margin: 0; }
  .ff-fila > :first-child { grid-column: 1 / -1; }
  .ff-detalle:empty { display: none; }
  .ff-fila .ff-acc { grid-column: 1 / -1; }
}

/* la ficha en papel o en PDF: solo la ficha, sin botones ni cuadros vacíos */
@media print {
  body:has(#ficha:not([hidden])) { background: #fff; }
  body:has(#ficha:not([hidden])) :is(.barra, .avisos, .alarmas, #rep-cuerpo, .fi-acc, .fi-no-imp) { display: none !important; }
  body:has(#ficha:not([hidden])) #app { display: block; height: auto; min-height: 0; }
  body:has(#ficha:not([hidden])) .reportes { overflow: visible; padding: 0; }
  .ficha { max-width: none; font-size: 12px; }
  .ficha .plan-bloque { border: 0; padding: 0; margin: 14px 0 0; }
  .ficha .tabla-envoltura { overflow: visible; }
  .ficha .kpi { break-inside: avoid; }
  .ficha tr, .fi-campos > div { break-inside: avoid; }
  .ficha :where(input, select, textarea) { border-color: var(--linea); padding: 3px 6px; }
  .ficha input::placeholder { color: transparent; }
  .ficha .fi-com:placeholder-shown { display: none; }
  .fi-coment { min-width: 0; }
  .fi-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
}