/* ==========================================================================
   IRON ROUTE — LAS SEIS PANTALLAS QUE NO EXISTÍAN

   CONTEXTO, PORQUE EXPLICA POR QUÉ ESTA HOJA ES NUEVA Y NO UN PARCHE:

   `fuel.js` (912 líneas), `hos.js` (636), `ifta.js` (848), `tolls.js` (548) y
   `tracking.js` (705) llevaban meses cargados en la página, escritos, con sus
   pruebas, y **muertos**: cada uno terminaba llamando a `Sheets.open('sheet-…')`
   sobre un `<aside>` que no estaba en el HTML. 3.649 líneas de lógica de
   negocio que para quien usaba la app sencillamente no existían.

   Ya están los cinco paneles, más «Ayuda», que abría un aviso de
   «próximamente» desde el primer día. Esta hoja les da forma.

   LA REGLA QUE SIGUE TODO LO DE AQUÍ:
   Un panel vacío tiene que decir qué hacer para llenarlo. Un hueco mudo se
   lee como una función rota — y quien lo ve decide que la app está a medias,
   que es exactamente lo que era.
   ========================================================================== */

/* ── El cuerpo de cualquiera de los paneles nuevos ──────────────────────── */
.panel-body {
  padding: 4px 0 8px;
  color: var(--text, #F5F7FA);
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* ── El estado vacío: nunca mudo ────────────────────────────────────────── */
.empty-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #9FB0C3);
  /* 13px es el mínimo que se permite aquí — el suelo del sistema son 12px y
     este texto se lee parado, no conduciendo. */
}

/* ══════════════════════════════════════════════════════════════════════════
   HORAS DE SERVICIO — EL NÚMERO GRANDE

   De esta pantalla solo se mira una cosa con el camión andando: cuánto queda.
   Va arriba, en mono, y del tamaño que se lee de un vistazo desde el asiento.
   Todo lo demás de la pantalla es secundario y se ve como secundario.
   ══════════════════════════════════════════════════════════════════════════ */
.hos-remain {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #F5F7FA);
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--line, #1E3A5F);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
  /* Tabular: sin esto, el reloj «baila» un pixel a cada segundo porque el 1
     es más estrecho que el 8. En un número que cambia solo, eso se nota. */
}
/* El color cambia ANTES de que sea tarde, no cuando ya lo es. Un aviso que
   llega al minuto cero no es un aviso, es un parte.

   Los nombres `hos-warn` y `hos-critical` NO son inventados aquí: son los que
   `hos.js` ya escribía —«hosEl.className = 'hos-remain' + …»— sobre un
   elemento que no existía y contra unas clases que nadie había estilado.
   Se respetan sus nombres en vez de imponer otros: dos vocabularios para el
   mismo estado es la forma de que mañana uno de los dos deje de pintarse. */
.hos-remain.hos-warn,
.hos-remain.hos-poco     { color: var(--warning, #F5A623); }   /* < 2 h */
.hos-remain.hos-critical,
.hos-remain.hos-fuera    { color: var(--error, #EF4444); }     /* < 1 h */

/* ── Las gráficas: alto propio, nunca colapsadas ────────────────────────── */
#fuel-mpg-chart,
#fuel-gauge-canvas,
#ifta-map-canvas,
#toll-history-chart {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 14px;
  border-radius: 10px;
  background: var(--surface-2, #10294A);
}
/* Un `<canvas>` sin datos pintados es un rectángulo de color, que es peor que
   nada: parece un fallo de carga. Se esconde hasta que el módulo dibuje algo.
   `paneles-nuevos.js` pone `data-pintado` cuando comprueba que hay píxeles.

   La regla va por ID, uno a uno, y NO como `canvas:not([data-pintado])`:
   Leaflet dibuja el mapa en un `<canvas>` cuando usa su renderizador de
   lienzo, y una regla global lo habría hecho desaparecer. Un selector
   demasiado ancho es la forma más silenciosa de romper otra cosa. */
#fuel-mpg-chart:not([data-pintado]),
#fuel-gauge-canvas:not([data-pintado]),
#ifta-map-canvas:not([data-pintado]),
#toll-history-chart:not([data-pintado]) {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   AYUDA

   No es un manual. Es lo mínimo que hace falta en la carretera y el aviso
   legal que este producto está obligado a dar. En letra pequeña, pero
   completo y legible — nunca por debajo de 12px, que es el suelo del sistema.
   ══════════════════════════════════════════════════════════════════════════ */
.ayuda-h3 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent, #F58220);
  margin: 20px 0 8px;
  letter-spacing: 0.01em;
}
.ayuda-h3:first-child { margin-top: 4px; }

.ayuda-p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #F5F7FA);
}
.ayuda-p strong { color: var(--gold, #D4A84B); font-weight: 600; }

.ayuda-dl { margin: 0 0 4px; }
.ayuda-dl dt {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #F5F7FA);
  margin-top: 12px;
}
.ayuda-dl dd {
  margin: 3px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #9FB0C3);
}
.ayuda-dl dd strong { color: var(--warning, #F5A623); font-weight: 600; }

.ayuda-acciones { margin: 22px 0 18px; }
.ayuda-btn {
  width: 100%;
  min-height: var(--touch, 48px);
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line, #1E3A5F);
  background: var(--surface-2, #10294A);
  color: var(--text, #F5F7FA);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.ayuda-btn:focus-visible { outline: 2px solid var(--accent, #F58220); outline-offset: 2px; }
/* SE RETIRA. Decía «con ratón el objetivo puede bajar a 40; con el dedo,
   nunca» — y `ir-escritorio` no significa «sin dedo». `device-detect.js` la
   pone en el portátil del dueño, que tiene ratón Y pantalla táctil (es el
   caso que prueba `tests/escritorio.mjs` con nombre propio). Así que esta
   regla le daba 40 px justo a la máquina desde la que se usa esto.

   Y `ecosystem-core` fija `--touch: 48px` como suelo del ecosistema sin
   excepción por dispositivo. Cuando la hoja de un producto contradice la
   fundación, manda la fundación. Ver la nota larga en
   `css/contraste-y-dedo.css`, donde se retiró la misma excepción para otros
   nueve controles. */

/* ── El aviso legal ─────────────────────────────────────────────────────────
   Va en letra pequeña porque no es lo que la gente viene a leer, y va
   COMPLETO porque es la diferencia entre una ayuda a la navegación y una
   responsabilidad. Lo que no puede es ir en gris sobre gris: un aviso que no
   se lee es un aviso que no se dio. */
.ayuda-legal {
  margin: 18px 0 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--warning, #F5A623);
  border-radius: 0 8px 8px 0;
  background: rgba(245, 166, 35, 0.08);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text, #F5F7FA);
}
.ayuda-legal strong { color: var(--warning, #F5A623); font-weight: 700; }

.ayuda-pie {
  margin: 0 0 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted, #9FB0C3);
  word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════════════════
   EL MICRÓFONO CUANDO ESTÁ ESCUCHANDO

   Un micrófono que escucha sin decirlo es una app que parece estar grabando
   a escondidas. El estado se ve en el propio botón, en el color de aviso y
   con un latido — no con un texto, que ahí no cabe.
   ══════════════════════════════════════════════════════════════════════════ */
.search-voice-btn.escuchando {
  color: var(--error, #EF4444);
  animation: ir-voz-latido 1.1s ease-in-out infinite;
}
@keyframes ir-voz-latido {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .search-voice-btn.escuchando { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA CLARO

   El dueño lo dijo del TMS y vale igual aquí: «se ve demasiado blanca, como
   que no se diferencia». Sobre blanco, `--accent` (#F58220) da 2,6:1 y el
   dorado 2,1:1 — medidos. Ninguno de los dos es legible como texto (hace
   falta 4,5:1). Se usan sus versiones oscuras, que son el mismo color con
   el contraste que la ley pide.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .panel-body,
html[data-theme="light"] .ayuda-p,
html[data-theme="light"] .ayuda-legal,
html[data-theme="light"] .hos-remain,
html[data-theme="light"] .ayuda-dl dt { color: #16233A; }

html[data-theme="light"] .empty-hint,
html[data-theme="light"] .ayuda-dl dd,
html[data-theme="light"] .ayuda-pie { color: #52627A; }

html[data-theme="light"] .ayuda-h3        { color: #A15200; }   /* 4,6:1 sobre blanco */
html[data-theme="light"] .ayuda-p strong  { color: #7A5E10; }   /* 5,1:1 sobre blanco */
html[data-theme="light"] .ayuda-legal     { background: #FDF6E7; border-left-color: #B77400; }
html[data-theme="light"] .ayuda-legal strong,
html[data-theme="light"] .ayuda-dl dd strong { color: #8A5300; }

html[data-theme="light"] .hos-remain      { border-bottom-color: #C4CDDA; }
html[data-theme="light"] .ayuda-btn       { background: #F4F6FA; border-color: #C4CDDA; color: #16233A; }
html[data-theme="light"] #fuel-mpg-chart,
html[data-theme="light"] #fuel-gauge-canvas,
html[data-theme="light"] #ifta-map-canvas,
html[data-theme="light"] #toll-history-chart { background: #EEF1F6; }

/* ── La X de cerrar (la pone `paneles-nuevos.js`) ────────────────────────
   Va SIEMPRE, no solo en escritorio: deslizar para cerrar una hoja no lo
   descubre todo el mundo, y quedarse atrapado en un panel es de las cosas
   que hacen que alguien cierre la app y no vuelva. */
.pn-cerrar {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 5;
  width: var(--touch, 48px);
  height: var(--touch, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted, #9FB0C3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pn-cerrar:hover { color: var(--text, #F5F7FA); background: var(--surface-2, #10294A); }
.pn-cerrar:focus-visible { outline: 2px solid var(--accent, #F58220); outline-offset: 2px; }
.ir-escritorio .pn-cerrar { width: 40px; height: 40px; }

/* El contenido necesita ser el bloque de referencia de esa X, y hay que
   dejarle sitio al título para que no quede debajo del botón. */
#sheet-fuel .sheet-content,
#sheet-hos .sheet-content,
#sheet-ifta .sheet-content,
#sheet-tolls .sheet-content,
#sheet-tracking .sheet-content,
#sheet-help .sheet-content { position: relative; }

#sheet-fuel .sheet-title,
#sheet-hos .sheet-title,
#sheet-ifta .sheet-title,
#sheet-tolls .sheet-title,
#sheet-tracking .sheet-title,
#sheet-help .sheet-title { padding-right: 56px; }

html[data-theme="light"] .pn-cerrar { color: #52627A; }
html[data-theme="light"] .pn-cerrar:hover { color: #16233A; background: #EEF1F6; }

/* ══════════════════════════════════════════════════════════════════════════
   LA ALTURA DE LAS HOJAS NUEVAS EN EL TELÉFONO

   MEDIDO a 375x812: «Combustible» abría a 626 px de alto y «Peajes» a 187.
   Las dos son hojas del mismo menú, abiertas del mismo modo, y una ocupaba
   tres veces más que la otra — porque `.bottom-sheet` no tiene alto propio y
   se ajusta a su contenido. Como los paneles recién estrenados están vacíos
   (todavía no hay peajes que enseñar), quedaban en una tira de 187 px pegada
   al borde inferior.

   Eso no se lee como «no hay datos». Se lee como «esto se abrió a medias».
   Un estado vacío tiene que ocupar el sitio que ocupará cuando tenga datos:
   así la primera vez y la centésima se parecen, y la diferencia entre las dos
   es la información, no el tamaño de la ventana.

   45vh es el suelo, 85vh sigue siendo el techo que ya estaba puesto.
   ══════════════════════════════════════════════════════════════════════════ */
#sheet-fuel,
#sheet-hos,
#sheet-ifta,
#sheet-tolls,
#sheet-tracking,
#sheet-help {
  min-height: 45vh;
  min-height: 45dvh;
}

/* En escritorio no aplica: ahí `escritorio.css` las acopla a la derecha con
   `top: 0; bottom: 0`, o sea alto completo, y un `min-height` en vh sobraría. */
.ir-escritorio #sheet-fuel,
.ir-escritorio #sheet-hos,
.ir-escritorio #sheet-ifta,
.ir-escritorio #sheet-tolls,
.ir-escritorio #sheet-tracking,
.ir-escritorio #sheet-help { min-height: 0; }

/* El estado vacío se centra en ese hueco en vez de quedar arrimado arriba,
   que es lo que hace que un panel vacío parezca cortado. */
#sheet-fuel .empty-state,
#sheet-hos .empty-state,
#sheet-ifta .empty-state,
#sheet-tolls .empty-state,
#sheet-tracking .empty-state {
  padding: 24px 4px 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOS ACCESOS RÁPIDOS DEL MAPA (`amenidades.js`)

   Nueve de los diez botones de la barra del mapa abrían una promesa
   («próximamente», «full integration en F6»). Ahora buscan de verdad. Esta es
   su hoja: una lista donde lo primero que se lee es el NOMBRE, lo segundo la
   DISTANCIA, y el botón de ir cae donde cae el pulgar.
   ══════════════════════════════════════════════════════════════════════════ */
#sheet-amenidades { min-height: 45vh; min-height: 45dvh; }
.ir-escritorio #sheet-amenidades { min-height: 0; }
#sheet-amenidades .sheet-content { position: relative; }
#sheet-amenidades .sheet-title { padding-right: 56px; margin-bottom: 2px; }

/* La advertencia de la categoría. No es letra pequeña decorativa: dice que
   «básculas» puede traer un control fronterizo, o que en Diésel no hay
   precios. Prometer precisión que no se tiene es como se pierde la confianza
   en TODO el mapa, no solo en ese botón. */
.am-sub {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--warning, #F5A623);
  border-left: 2px solid var(--warning, #F5A623);
  padding-left: 9px;
}

.am-lista { list-style: none; margin: 0; padding: 0; }

.am-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "izq km" "ir ir";
  gap: 4px 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #1E3A5F);
}
@media (min-width: 560px) {
  .am-item {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "izq km ir";
    align-items: center;
  }
}
.am-item:last-child { border-bottom: 0; }

.am-izq { grid-area: izq; min-width: 0; }
.am-n {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #F5F7FA);
  line-height: 1.3;
}
.am-dir {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted, #9FB0C3);
  margin-top: 2px;
}

/* La distancia en mono y tabular: en una lista ordenada por cercanía, si las
   cifras no se alinean hay que leerlas una a una en vez de barrerlas. */
.am-km {
  grid-area: km;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold, #D4A84B);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.am-ir {
  grid-area: ir;
  min-height: var(--touch, 48px);
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--accent, #F58220);
  background: rgba(245, 130, 32, 0.12);
  color: var(--accent, #F58220);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.am-ir:hover { background: rgba(245, 130, 32, 0.22); }
.am-ir:focus-visible { outline: 2px solid var(--accent, #F58220); outline-offset: 2px; }
.ir-escritorio .am-ir { min-height: 40px; }

/* De dónde salió la búsqueda. Sin esto, una lista calculada desde el centro
   del mapa cuando el mapa está en otro estado es correcta e inútil, y no hay
   manera de notarlo. */
.am-pie {
  margin: 14px 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #9FB0C3);
}

html[data-theme="light"] .am-n      { color: #16233A; }
html[data-theme="light"] .am-dir,
html[data-theme="light"] .am-pie    { color: #52627A; }
html[data-theme="light"] .am-km     { color: #7A5E10; }   /* 5,1:1 sobre blanco */
html[data-theme="light"] .am-sub    { color: #8A5300; border-left-color: #B77400; }
html[data-theme="light"] .am-ir     { color: #A15200; border-color: #A15200; background: #FDF3E8; }
html[data-theme="light"] .am-item   { border-bottom-color: #C4CDDA; }

/* La flota cerrada: no es un estado vacío, es un estado con llave. */
.trk-fleet-cerrada .trk-cerrada-p {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: inherit;
  opacity: .78;
}