/*
 * Tema oscuro del carro. Todo el tamaño depende de --ui-scale, que el conductor
 * ajusta desde el panel de ajustes. Los estilos viven aparte de la lógica para
 * que el rediseño posterior no toque los módulos de public/app.
 */

:root {
  --ui-scale: 1;

  --bg: #0b1016;
  --surface: rgba(17, 24, 33, 0.92);
  --surface-strong: #111821;
  --border: rgba(255, 255, 255, 0.12);
  --text: #e8edf3;
  --text-dim: #9fb0c2;
  --accent: #3b82f6;
  --danger: #ef4444;
  --sign-bg: #f5f7fa;
  --sign-border: #d92b2b;
  --sign-text: #10161d;

  --text-base: calc(20px * var(--ui-scale));
  --text-large: calc(28px * var(--ui-scale));
  --text-huge: calc(40px * var(--ui-scale));
  --tap: calc(64px * var(--ui-scale));
  --gap: calc(12px * var(--ui-scale));
  --radius: calc(14px * var(--ui-scale));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
  font-size: var(--text-base);
  overflow: hidden;
}

#map {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

/* Capa de paneles sobre el mapa; solo los paneles reciben los toques. */
#hud {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

#left-column,
#right-column,
#bottom-right {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  pointer-events: auto;
}

#left-column {
  top: calc(18px * var(--ui-scale));
  left: calc(18px * var(--ui-scale));
  width: calc(440px * var(--ui-scale));
  max-width: 42vw;
}

#right-column {
  top: calc(18px * var(--ui-scale));
  right: calc(18px * var(--ui-scale));
  width: calc(260px * var(--ui-scale));
  align-items: stretch;
}

#bottom-right {
  right: calc(18px * var(--ui-scale));
  bottom: calc(42px * var(--ui-scale));
  width: calc(260px * var(--ui-scale));
  align-items: center;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap);
  backdrop-filter: blur(6px);
}

button {
  min-height: var(--tap);
  padding: 0 calc(20px * var(--ui-scale));
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

button:active {
  background: #1a2430;
}

#start-trip {
  width: 100%;
  min-height: calc(76px * var(--ui-scale));
  font-size: var(--text-large);
  font-weight: 700;
  color: #06121f;
  background: var(--accent);
  border-color: var(--accent);
}

#search {
  width: 100%;
  min-height: var(--tap);
  padding: 0 calc(16px * var(--ui-scale));
  font-size: var(--text-large);
  font-family: inherit;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#search::placeholder {
  color: var(--text-dim);
}

#search-message {
  margin: calc(6px * var(--ui-scale)) 0 0;
  color: var(--text-dim);
  font-size: var(--text-base);
}

#search-message:empty {
  display: none;
}

#results {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-scale));
  margin-top: calc(8px * var(--ui-scale));
  max-height: calc(340px * var(--ui-scale));
  overflow-y: auto;
}

#results:empty {
  display: none;
}

.result {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-scale));
  align-items: flex-start;
  padding: calc(10px * var(--ui-scale)) calc(16px * var(--ui-scale));
  text-align: left;
}

.result-title {
  font-size: var(--text-base);
  font-weight: 700;
}

.result-detail {
  color: var(--text-dim);
  font-size: var(--text-base);
}

#preview-summary {
  margin: 0 0 var(--gap);
  font-size: var(--text-large);
  font-weight: 700;
}

#maneuver-card {
  display: flex;
  gap: var(--gap);
  align-items: center;
}

#maneuver-glyph {
  flex: 0 0 auto;
  min-width: calc(84px * var(--ui-scale));
  font-size: var(--text-huge);
  line-height: 1.1;
  text-align: center;
  color: var(--accent);
}

.maneuver-text {
  min-width: 0;
}

#maneuver-distance {
  margin: 0;
  font-size: var(--text-huge);
  font-weight: 700;
  line-height: 1.1;
}

#maneuver-instruction {
  margin: calc(4px * var(--ui-scale)) 0 0;
  font-size: var(--text-large);
}

#maneuver-next {
  margin: calc(6px * var(--ui-scale)) 0 0;
  color: var(--text-dim);
  font-size: var(--text-base);
}

#maneuver-next:empty {
  display: none;
}

/* Panel del vehículo (lote 3.4): carga, energía y temperatura de la última
   muestra de telemetría. Va al final de la columna izquierda, que es una caja
   flexible en columna, así que nunca se monta sobre la tarjeta de maniobra ni
   sobre la de cámaras, ni sobre el letrero de velocidad de la esquina opuesta. */
#vehicle-panel {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-scale));
}

#vehicle-panel[hidden] {
  display: none;
}

/* Muestra vieja: el panel se apaga para que nadie confíe en el número. */
#vehicle-panel.stale {
  opacity: 0.55;
}

#vehicle-soc {
  margin: 0;
  font-size: var(--text-large);
  font-weight: 700;
}

#vehicle-detail {
  margin: 0;
  font-size: var(--text-large);
}

#vehicle-message {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-base);
}

#vehicle-message:empty {
  display: none;
}

/* Panel de energía (lote 4.2): carga de llegada, consumo medio, perfil del
   vehículo y perfil de elevación de la ruta. Va al final de la columna
   izquierda, debajo del panel del vehículo: la columna es una caja flexible en
   columna, así que a 1200x774 no se monta sobre la tarjeta de maniobra, sobre
   la de cámaras ni sobre el letrero de velocidad de la esquina opuesta. */
#energy-panel {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-scale));
}

#energy-panel[hidden] {
  display: none;
}

#energy-arrival {
  margin: 0;
  font-size: var(--text-large);
  font-weight: 700;
}

#energy-detail {
  margin: 0;
  font-size: var(--text-base);
}

#energy-profile {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-base);
}

#energy-profile:empty {
  display: none;
}

#energy-message {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-base);
}

#energy-message:empty {
  display: none;
}

/* El perfil conserva su proporción (300x80), así que el punto del carro sigue
   siendo redondo por ancha que sea la columna. */
#elevation-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(4px * var(--ui-scale));
}

#elevation-svg polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

#elevation-svg circle {
  fill: var(--sign-bg);
  stroke: var(--accent);
  stroke-width: 2;
}

/* Carga escrita a mano: solo aparece cuando no hay carro enlazado. */
#manual-soc-label {
  color: var(--text-dim);
  font-size: var(--text-base);
}

#manual-soc {
  width: 100%;
  min-height: var(--tap);
  padding: 0 calc(16px * var(--ui-scale));
  font-size: var(--text-large);
  font-family: inherit;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Tarjeta de cierre del viaje (lote 4.3): carga prevista contra la real. Va al
   final de la columna izquierda, se ve 30 s y después se esconde sola. */
#trip-end-card {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-scale));
}

#trip-end-card[hidden] {
  display: none;
}

#trip-end-figures {
  margin: 0;
  font-size: var(--text-large);
  font-weight: 700;
}

#trip-end-reason {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-base);
}

#trip-end-reason:empty {
  display: none;
}

#eta {
  font-size: var(--text-large);
  font-weight: 700;
  text-align: center;
}

#speed-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4px * var(--ui-scale));
}

#speed-sign {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(112px * var(--ui-scale));
  height: calc(112px * var(--ui-scale));
  border: calc(9px * var(--ui-scale)) solid var(--sign-border);
  border-radius: 50%;
  background: var(--sign-bg);
  color: var(--sign-text);
  font-size: var(--text-huge);
  font-weight: 800;
}

#speed-sign.defaulted {
  border-style: dashed;
}

#speed-sign.blink {
  animation: blink 0.8s steps(2, start) infinite;
}

@keyframes blink {
  to {
    background: #ffd9d9;
    border-color: #ff6b6b;
  }
}

.speed-unit {
  color: var(--text-dim);
  font-size: var(--text-base);
}

#settings-sheet {
  position: absolute;
  right: calc(18px * var(--ui-scale));
  top: calc(18px * var(--ui-scale));
  width: calc(360px * var(--ui-scale));
  display: none;
  flex-direction: column;
  gap: var(--gap);
  pointer-events: auto;
  z-index: 5;
}

#settings-sheet.open {
  display: flex;
}

#settings-sheet h2 {
  margin: 0;
  font-size: var(--text-large);
}

#settings-sheet label {
  color: var(--text-dim);
}

#ui-scale {
  width: 100%;
  height: calc(40px * var(--ui-scale));
}

#ui-scale-value {
  font-size: var(--text-base);
  font-weight: 700;
}

/* Marcador del carro sobre el mapa. */
.car-marker {
  width: calc(30px * var(--ui-scale));
  height: calc(30px * var(--ui-scale));
  border: calc(4px * var(--ui-scale)) solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 calc(6px * var(--ui-scale)) rgba(59, 130, 246, 0.28);
}

/* Visibilidad por estado: idle → buscar; preview → buscar + vista previa;
   navigating/arrived → maniobra, letrero, ETA y recentrar. */
#preview,
#maneuver-card,
#bottom-right,
#right-column {
  display: none;
}

body[data-state="preview"] #preview {
  display: block;
}

body[data-state="navigating"] #maneuver-card,
body[data-state="arrived"] #maneuver-card {
  display: flex;
}

body[data-state="navigating"] #bottom-right,
body[data-state="arrived"] #bottom-right,
body[data-state="navigating"] #right-column,
body[data-state="arrived"] #right-column {
  display: flex;
}

body[data-state="navigating"] #search-panel,
body[data-state="arrived"] #search-panel {
  display: none;
}

/* Atribución del mapa: la escribe app/map.js en su propio elemento, abajo a la
   izquierda, donde ningún panel la tapa. El texto cumple el mínimo de 20 px. */
#map-attribution {
  position: absolute;
  left: calc(18px * var(--ui-scale));
  bottom: calc(10px * var(--ui-scale));
  padding: calc(4px * var(--ui-scale)) calc(10px * var(--ui-scale));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(8px * var(--ui-scale));
  color: var(--text-dim);
  font-size: var(--text-base);
  pointer-events: none;
}

#map-attribution:empty {
  display: none;
}

/* Ningún control de MapLibre debe bajar del mínimo de texto del proyecto. */
.maplibregl-ctrl,
.maplibregl-ctrl a,
.maplibregl-ctrl button {
  font-size: var(--text-base);
}