/*
 * 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;
}

/* Cambio post-MVP 4: la columna va por encima de todas las demás y su borde
   inferior respeta el área segura del navegador del carro, que dibuja su propia
   barra abajo y se comía el botón de terminar el viaje. */
#bottom-right {
  right: calc(18px * var(--ui-scale));
  bottom: calc(42px * var(--ui-scale) + env(safe-area-inset-bottom, 0px));
  width: calc(260px * var(--ui-scale));
  align-items: center;
  z-index: 6;
}

/* El control de terminar el viaje nunca baja del tamaño mínimo de toque. */
#stop-trip {
  min-height: var(--tap);
}

.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 {
  flex: 1 1 auto;
  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;
}

/* Aviso de recálculo (cambio post-MVP 4): app/nav.js lo enciende antes de pedir
   la ruta nueva y lo apaga cuando llega o falla. */
#rerouting {
  margin: calc(6px * var(--ui-scale)) 0 0;
  color: var(--accent);
  font-size: var(--text-large);
  font-weight: 700;
}

#rerouting[hidden] {
  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;
}

/* Seguimiento suspendido por un arrastre del conductor: el botón se resalta
   hasta que él lo toca (cambio post-MVP 4). */
#recenter.active {
  color: #06121f;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

#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));
}

/* El borde y el fondo pulsan despacio; el número nunca se apaga. */
@keyframes camera-limit-pulse {
  0%, 100% { border-color: #a97c28; background-color: #29251c; }
  50% { border-color: #ffd166; background-color: #55411d; }
}

#camera-card.camera-pulse {
  animation: camera-limit-pulse 2s ease-in-out infinite;
}

#camera-card.camera-limit-known #camera-detail {
  display: flex;
  align-items: center;
  gap: 8px;
}

#camera-card.camera-limit-known #camera-limit {
  color: #fff4cd;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.3;
}

#camera-unit,
#camera-distance {
  white-space: nowrap;
}

#camera-limit-question {
  width: 260px;
  max-width: 100%;
}

#camera-limit-question[hidden] {
  display: none;
}

/* El espacio transparente junto a la pregunta deja pasar los toques al mapa. */
body.camera-question-open #left-column {
  pointer-events: none;
}

body.camera-question-open #left-column > * {
  pointer-events: auto;
}

#camera-limit-question h2 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
}

.camera-limit-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.camera-limit-choices button {
  min-height: 48px;
  min-width: 44px;
  padding: 0 8px;
  font-size: 28px;
  font-weight: 700;
}

.camera-limit-choices button:last-child {
  font-size: 20px;
  white-space: nowrap;
}

body.camera-question-open #report-toast {
  top: 136px;
  right: 12px;
  left: auto;
  bottom: auto;
  width: 168px;
  max-width: 168px;
  transform: none;
  font-size: 18px;
}

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

#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(44px * var(--ui-scale));
  height: calc(48px * var(--ui-scale));
  filter: drop-shadow(0 2px 4px #0b1016);
}

.car-marker::before,
.car-marker::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%);
}

.car-marker::after {
  inset: calc(5px * var(--ui-scale));
  background: var(--accent);
}

/* La punta inferior queda anclada al último punto, sin depender del carro. */
.destination-marker {
  width: calc(40px * var(--ui-scale));
  height: calc(44px * var(--ui-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: 12px 12px 4px 4px;
  background: #166534;
  color: #ffffff;
  font-size: calc(32px * var(--ui-scale));
  line-height: 1;
  box-shadow: 0 2px 8px #0b1016;
  z-index: 3;
}

/* Límite de la cámara sobre el mapa de Google. */
.camera-marker {
  min-width: calc(28px * var(--ui-scale));
  height: calc(28px * var(--ui-scale));
  padding: 0 calc(3px * var(--ui-scale));
  border: calc(2px * var(--ui-scale)) solid #ffffff;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: calc(16px * var(--ui-scale));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 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;
}

/* Confirmación breve de los reportes, sobre el mapa y centrada abajo. */
#report-toast {
  position: absolute;
  bottom: calc(96px * var(--ui-scale));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--gap);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-large);
  z-index: 7;
}

/* 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);
}

/* Pantalla del carro: giro arriba, datos abajo y mapa libre entre ambos.
   Los controles conservan al menos 44 px incluso con escala 0.8. */
@media (max-width: 900px) {
  :root {
    --text-base: max(18px, calc(20px * var(--ui-scale)));
    --text-large: max(22px, calc(24px * var(--ui-scale)));
    --text-huge: max(32px, calc(36px * var(--ui-scale)));
    --tap: 44px;
    --gap: 8px;
  }

  #left-column {
    top: 12px;
    left: 12px;
    width: min(500px, calc(100vw - 204px));
    max-width: none;
  }

  .panel {
    padding: 6px;
  }

  #maneuver-card {
    width: min(420px, 100%);
  }

  #camera-limit-question {
    width: 224px;
  }

  #right-column,
  #bottom-right {
    right: 12px;
    width: 168px;
  }

  #right-column {
    top: 12px;
  }

  #bottom-right {
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  button {
    padding: 0 8px;
    min-width: 44px;
  }

  #bottom-right > button {
    width: 100%;
  }

  #start-trip {
    min-height: var(--tap);
  }

  #results {
    max-height: 28vh;
  }

  .result {
    flex-shrink: 0;
    padding: 8px;
  }

  body[data-state="preview"]:has(#results:not(:empty)) #preview {
    display: none;
  }

  #maneuver-glyph {
    min-width: 44px;
    width: 44px;
  }

  #maneuver-instruction,
  #maneuver-next,
  #rerouting {
    margin-top: 2px;
    line-height: 1.3;
  }

  #maneuver-distance,
  #maneuver-instruction {
    line-height: 1.2;
  }

  #maneuver-distance {
    line-height: 1.35;
  }

  .maneuver-action,
  .maneuver-street,
  #maneuver-next {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .maneuver-action {
    font-weight: 600;
  }

  .maneuver-street,
  #rerouting {
    font-size: var(--text-base);
  }

  #maneuver-card:has(#rerouting:not([hidden])) #maneuver-next {
    display: none;
  }

  #camera-card {
    position: relative;
    width: 400px;
    max-width: 100%;
    min-height: 72px;
    padding-right: 120px;
  }

  #camera-card p {
    font-size: var(--text-base) !important;
    line-height: 1.3;
  }

  #camera-card.camera-limit-known {
    width: 340px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #camera-remove {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 104px;
    margin-top: 0 !important;
    font-size: var(--text-base) !important;
  }

  #vehicle-panel,
  #energy-panel {
    position: fixed;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  #vehicle-panel {
    left: 12px;
    width: 178px;
  }

  #vehicle-detail {
    font-size: var(--text-base);
  }

  #energy-panel {
    left: 198px;
    width: 300px;
  }

  #left-column:has(#vehicle-panel[hidden]) #energy-panel {
    left: 12px;
    right: auto;
    width: 300px;
  }

  #energy-panel:not([hidden]):has(#manual-soc:not([hidden])) {
    display: grid;
    grid-template-columns: 1fr 100px;
    align-items: center;
  }

  #energy-panel > * {
    grid-column: 1 / -1;
  }

  #energy-panel #manual-soc-label {
    grid-column: 1;
  }

  #energy-panel #manual-soc {
    grid-column: 2;
  }

  /* Durante el viaje basta la carga prevista; el detalle queda en la vista previa. */
  body:is([data-state="navigating"], [data-state="arrived"]) :is(#vehicle-detail, #energy-detail, #energy-profile, #elevation-svg) {
    display: none;
  }

  body:is([data-state="navigating"], [data-state="arrived"]) #left-column:has(#vehicle-panel:not([hidden])) #energy-panel {
    width: 240px;
  }

  #elevation-svg {
    height: 56px;
  }

  #eta {
    font-size: var(--text-base);
  }

  #speed-sign {
    width: max(80px, calc(88px * var(--ui-scale)));
    height: max(80px, calc(88px * var(--ui-scale)));
    border-width: 7px;
  }

  #settings-sheet {
    top: 12px;
    right: 12px;
    width: 168px;
    gap: 4px;
  }

  #settings-sheet.open {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  #settings-sheet > * {
    grid-column: 1 / -1;
  }

  #settings-sheet h2 {
    grid-column: 1;
    margin: 0;
    font-size: var(--text-base);
  }

  #ui-scale-value {
    grid-column: 2;
    grid-row: 1;
  }

  body:has(#settings-sheet.open) #right-column {
    display: none;
  }

  #ui-scale {
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
  }

  #map-attribution {
    bottom: 6px;
    left: 12px;
    padding: 2px 8px;
    font-size: 18px;
  }

  #report-toast {
    top: 240px;
    bottom: auto;
    left: 12px;
    max-width: calc(100vw - 204px);
    transform: none;
  }
}
/* Elección sin predicciones de altura; el gesto de inicio las solicita. */
#route-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#route-choices:empty { display: none; }
.route-choice { white-space: pre-line; min-height: 44px; font-size: var(--text-base); padding: 8px; }
.route-choice[aria-pressed="true"] { border: 2px solid var(--accent, #58c6ff); }
body:not([data-state="navigating"]) :is(#refresh-traffic, #traffic-status) { display: none; }
#refresh-traffic { min-height: 44px; }
#traffic-status { margin: 0; padding: 4px; background: #17212b; border-radius: 6px; font-size: 18px; }

/* Voz: el conductor silencia y devuelve la voz con un toque. El botón dice su
   estado, no la acción, para que se lea de un vistazo (post-MVP 7, fila V3). */
#mute-voice {
  min-height: 44px;
  font-size: var(--text-base);
}

#mute-voice[aria-pressed="true"] {
  color: #06121f;
  background: var(--warn, #f59e0b);
  border-color: var(--warn, #f59e0b);
  font-weight: 700;
}

/* Ajustes: devuelve el acercamiento, el ángulo y el rumbo de fábrica
   (post-MVP 7, fila V1 punto 6). */
#reset-view {
  min-height: 44px;
  font-size: var(--text-base);
}