/* eta.css — estilos propios del Monitor de Entregas (tarjetas, filas por estado, mapa). */

/* Estados del monitor: tokens del tema, nunca colores fijos (V9) */
.fila-pendiente > td { background: var(--ln-warning-soft); }
.fila-entregado > td { background: var(--ln-positive-soft); }
.fila-problema  > td { background: var(--ln-accent-soft); }
.fila-atrasado  > td { background: var(--ln-negative-soft); }
.fila-rezagado  > td { background: var(--ln-surface-3); }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-md); font-size: .85rem; cursor: pointer; min-height: 44px; }
.chip-pendiente { background: var(--ln-warning-soft); } .chip-entregado { background: var(--ln-positive-soft); }
.chip-problema { background: var(--ln-accent-soft); } .chip-atrasado { background: var(--ln-negative-soft); } .chip-rezagado { background: var(--ln-surface-3); }
.tarjeta-operador .estado { color: var(--ln-fg-muted); }
/* --ln-positive-fg/--ln-negative-fg son blanco (tinta PARA botones sobre el color fuerte, ver
   theme-base.css línea 30); usarlos como color de texto sobre la superficie normal de la tarjeta
   deja el texto invisible. El color de texto va con el tono, no con el token "-fg". */
.op-terminado .estado, span.op-terminado { color: var(--ln-accent); }
.op-a-tiempo .estado, span.op-a-tiempo { color: var(--ln-positive); }
.op-atrasado .estado, span.op-atrasado { color: var(--ln-negative); }
.op-en-reparto .estado { color: var(--ln-warning-fg); }
.grid-sticky thead th { position: sticky; top: 0; z-index: 1; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Adiciones V9 (Task 7): honestidad sobre ausencia de datos, no solo color.
   - ETA sin coordenadas: texto propio en vez de una celda vacía (nunca solo color). */
.text-eta-sin-datos { color: var(--ln-fg-muted); font-style: italic; }
/* - Tarjeta de operador "A Tiempo" sin ningún pedido evaluado: no es un "A Tiempo" genuino.
   Borde punteado + icono + texto propio; op-a-tiempo sigue pintando .estado en verde salvo
   que esta regla, declarada después, gane por orden de cascada (misma especificidad). */
.tarjeta-sin-datos { border: 1px dashed var(--ln-border-strong); }
.tarjeta-sin-datos .estado { color: var(--ln-fg-muted) !important; font-style: italic; }
.tarjeta-sin-datos-chip:empty { display: none; }
.tarjeta-sin-datos-chip { color: var(--ln-fg-muted); font-style: italic; }

/* Task 8: pantalla de Relación de Embarque (mapa, orden propuesto, reorden manual). */
.mapa-embarque { width: 100%; height: clamp(320px, 60vh, 720px); border-radius: var(--ln-radius-md); background: var(--ln-surface-2); }
.lista-paradas .parada { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; border: 1px solid var(--ln-border); border-radius: var(--ln-radius-md); margin-bottom: .4rem; background: var(--ln-surface); }
/* Mismos tokens que .fila-XXX > td del monitor (arriba), pero para <li>: embarque-mapa.js pinta
   la lista de paradas como <li class="parada fila-${clase}">, no como filas de tabla, así que la
   regla `.fila-pendiente > td` no aplicaba nunca aquí — el mapa quedaba coloreado por estado y la
   lista no, aunque ambos leen la misma `clase`. */
.lista-paradas .parada.fila-pendiente { background: var(--ln-warning-soft); }
.lista-paradas .parada.fila-entregado { background: var(--ln-positive-soft); }
.lista-paradas .parada.fila-problema  { background: var(--ln-accent-soft); }
.lista-paradas .parada.fila-atrasado  { background: var(--ln-negative-soft); }
.lista-paradas .parada.fila-rezagado  { background: var(--ln-surface-3); }
.lista-paradas .parada[draggable] { cursor: grab; }
.lista-paradas .parada.arrastrando { opacity: .5; }
.lista-paradas .num { min-width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ln-accent); color: var(--ln-accent-fg); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.lista-paradas .cuerpo { flex: 1; min-width: 0; }
.lista-paradas .acciones { display: flex; flex-direction: column; gap: .2rem; }

/* [S2.9] Barra de progreso + overlay de navegación entre pantallas (monitor/embarque/
   configuración son navegaciones de página completa, no una SPA). Tokens de tema, no colores
   fijos: la barra debe leerse igual en los 11 temas curados, incluido Terminal (oscuro). */
#page-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--ln-accent); z-index: 10000;
  transition: width .5s cubic-bezier(.4,0,.2,1), opacity .4s ease; opacity: 1;
  pointer-events: none;
}
#page-bar.bar-go   { width: 75%; }
#page-bar.bar-done { width: 100%; opacity: 0; }
#nav-overlay {
  display: none; position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ln-surface) 72%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  z-index: 9998; align-items: center; justify-content: center; flex-direction: column; gap: .85rem;
}
#nav-overlay.active { display: flex; animation: eta-overlay-fadein .18s ease; }
@keyframes eta-overlay-fadein { from { opacity: 0 } to { opacity: 1 } }
.nav-spinner-ring {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3.5px solid var(--ln-accent-soft); border-top-color: var(--ln-accent);
  animation: eta-nav-spin .72s linear infinite;
}
@keyframes eta-nav-spin { to { transform: rotate(360deg); } }
.nav-spinner-label { color: var(--ln-accent); font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

/* Popup de corrección de ubicación (mapa-edicion.js) */
.mapa-popup { min-width: 220px; max-width: 290px; font-size: .8125rem; line-height: 1.35; }
.mapa-popup-titulo { font-weight: 600; }
.mapa-popup-dir { color: var(--ln-fg-muted); font-size: .75rem; }
.mapa-nota { font-size: .6875rem; color: var(--ln-fg-muted); margin-top: .5rem; text-align: center; }
.mapa-acciones { display: flex; gap: .375rem; margin-top: .5rem; }
.mapa-acciones .btn { flex: 1; }
.mapa-aviso { margin-top: .5rem; padding: .375rem .5rem; border-radius: .375rem; font-size: .75rem; }
/* Tokens reales del tema (theme-base.css líneas 41/44): -positive-bg/-negative-bg NO existen y el
   fallback transparent del plan original dejaba el fondo sin pintar en silencio, en los 11 temas. */
.mapa-aviso.aviso-ok { background: var(--ln-positive-soft); color: var(--ln-positive); }
.mapa-aviso.aviso-error { background: var(--ln-negative-soft); color: var(--ln-negative); }
/* La propuesta de Google no es error ni éxito: hay que mirarla. --ln-warning-fg (no
   --ln-warning) es el que cumple contraste AA sobre -warning-soft en los temas claros. */
.mapa-aviso.aviso-propuesta { background: var(--ln-warning-soft); color: var(--ln-warning-fg); }