:root {
  --bg: #0a0f0a;
  --panel-bg: #0f1a10;
  --grid: #1a2e1c;
  --accent: #3ef27a;
  --text: #d6ffe0;
  --text-dim: #6b9a78;
  --green: #3ef27a;
  --orange: #ffb347;
  --red: #ff5d5d;
  /* En Madrid los buses de EMT son azules y los interurbanos verdes — se usa ese mismo
     código de color para distinguir red en badges de línea, toggle y favoritos. El verde
     de interurbanos ya es --accent (el acento base de toda la app), así que solo hace
     falta un azul nuevo para EMT. */
  --blue: #3ea6f2;
  --font: 'IBM Plex Mono', monospace;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* 100dvh se recalcula a propósito cuando cambia el viewport visible (p. ej. al
     esconderse/mostrarse la barra del navegador), lo que en una PWA instalada se notaba
     como el footer subiendo y bajando de golpe justo al lanzarla. 100svh (viewport
     "pequeño") arregló el salto pero se quedaba corto: asume que hay una barra de navegador
     desplegada reservando espacio, y en modo standalone no existe tal barra — nunca hay nada
     que ocultar, así que el 100% real disponible es mayor y el footer quedaba flotando por
     encima del borde de verdad. 100lvh (viewport "grande") sí representa ese máximo
     disponible y, al no depender de una barra que aparece/desaparece, es igual de estable. */
  min-height: 100lvh;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  /* max() con env(safe-area-inset-top): en un navegador normal no cambia nada (el inset
     vale 0), pero en la PWA instalada evita que el notch/isla dinámica tape el título. */
  padding: max(22px, env(safe-area-inset-top)) 24px 22px;
  background: rgba(10, 15, 10, 0.92);
  border-bottom: 1px solid var(--grid);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.brand h1 {
  font-size: 19px;
  letter-spacing: 3px;
  margin: 0;
  font-weight: 600;
  color: var(--accent);
}

.subtitle {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* Agrupa los botones de acción en un solo item flex: al envolver en móvil, o se van
   juntos a la siguiente línea o se quedan juntos en la actual, nunca se separan entre sí
   (como pasaba con margin-left:auto puesto directamente en un botón suelto). */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Un poco más grandes que el .help-btn de base (22px): solo en la topbar, no en los
   iconos del panel de resultados ni de las tarjetas de favoritos. */
.topbar-actions .help-btn {
  width: 27px;
  height: 27px;
  font-size: 15px;
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

.stop-form {
  margin: 20px 0;
}

.network-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.network-toggle__btn {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--grid);
  border-radius: 4px;
  background: var(--panel-bg);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
}

.network-toggle__btn.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.network-toggle__btn[data-network="emt"].active {
  border-color: var(--blue);
  color: var(--blue);
}

.stop-form label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.stop-form__row {
  display: flex;
  gap: 8px;
}

.stop-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--grid);
  border-radius: 4px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: var(--font);
  /* Por debajo de 16px, iOS/Android hacen zoom automático al enfocar el input, lo que
     descoloca el layout (p.ej. el botón Buscar se va fuera de la pantalla). */
  font-size: 16px;
}

.stop-form input::placeholder {
  color: var(--text-dim);
}

.stop-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.stop-form__row button {
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  /* Verde por defecto (Interurbano, ya es el acento base de la app); #search-btn.network-emt
     de abajo lo pasa a azul cuando la red activa es EMT, a juego con los badges de línea. */
  background: var(--accent);
  color: #06170a;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#search-btn.network-emt {
  background: var(--blue);
  border-color: var(--blue);
  color: #001830;
}

.favorites-open-btn {
  color: var(--red);
}

#favorite-btn {
  color: var(--text-dim);
  font-size: 15px;
}

#favorite-btn.active {
  border-color: var(--red);
  color: var(--red);
  text-shadow: 0 0 6px currentColor;
}

.status {
  padding: 10px 14px;
  border-radius: 4px;
  border: 1px solid var(--grid);
  background: var(--panel-bg);
  margin: 12px 0;
  font-size: 13px;
  color: var(--text-dim);
}

.status--error {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 93, 93, 0.1);
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--grid);
  border-radius: 6px;
  padding: 16px;
  margin-top: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.results__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.results__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.help-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--text-dim);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.arrivals-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.arrival-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--grid);
  font-size: 13px;
}

.arrival-item:last-child {
  border-bottom: none;
}

.arrival-item__line {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  padding: 4px 8px;
  border-radius: 10px;
  /* Verde por defecto: coincide con el color real de los buses interurbanos en Madrid, y
     es el mismo --accent que ya usa toda la app — solo EMT necesita su propio azul. */
  background: var(--accent);
  color: #06170a;
  font-weight: 700;
  font-size: 14px;
}

.arrival-item__line--emt {
  /* Azul: color real de los buses urbanos de EMT en Madrid. */
  background: var(--blue);
  color: #001830;
}

.arrival-item__destination {
  grid-column: 2;
  grid-row: 1;
  color: var(--text);
  font-size: 14px;
}

.arrival-item__distance {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: var(--text-dim);
}

.arrival-item__eta {
  grid-column: 3;
  grid-row: 1 / 3;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  color: var(--green);
}

.arrival-item__eta.eta-soon {
  color: var(--orange);
}

.arrival-item__eta.eta-now {
  color: var(--red);
  text-shadow: 0 0 8px currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}

.arrival-item__eta.eta-unknown {
  color: var(--text-dim);
  font-weight: 400;
  font-style: italic;
}

.arrivals-list__empty {
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 0;
  font-size: 13px;
}

.app-footer {
  width: 100%;
  max-width: 720px;
  margin: 24px auto 0;
  /* max() en vez de un valor fijo: en un navegador normal deja solo un margen mínimo (10px),
     pero en la PWA instalada en un iPhone con indicador de inicio crece lo justo para no
     quedar tapado por él, en vez de sumar los dos valores (por eso max(), no simplemente
     10px + env(...)). Requiere viewport-fit=cover en el <meta name="viewport"> del head;
     sin él, env(safe-area-inset-bottom) siempre vale 0. */
  padding: 0 20px max(10px, env(safe-area-inset-bottom));
  color: var(--text-dim);
  font-size: 10px;
  text-align: center;
}

.app-footer a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 15, 10, 0.8);
}

/* [hidden] y .help-overlay{display:flex} tienen la misma especificidad; sin este :not(),
   la regla de abajo gana por venir después en la cascada y el overlay bloquea clics en
   toda la página incluso con el atributo hidden puesto. */
.help-overlay:not([hidden]) {
  display: flex;
}

.help-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  margin-top: 0;
}

.favorites-modal {
  width: 100%;
  max-width: 460px;
  max-height: 82vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Da aire para el scrollbar y para que la última tarjeta no quede pegada al borde. */
  padding: 2px 2px 4px;
}

.favorites-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.favorites-empty {
  color: var(--text-dim);
  font-style: italic;
  font-size: 13px;
  margin: 0;
}

.favorites-manage-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* .favorite-card reutiliza .panel (fondo, borde, radio, sombra) — cada favorito es su
   propia tarjeta apilada, no una fila dentro de un único panel grande. */
.favorite-card {
  margin-top: 0;
}

.favorite-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.favorite-card__name {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px dashed transparent;
  background: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  padding: 2px 0;
}

.favorite-card__name:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.favorite-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.favorite-card__actions button:disabled {
  opacity: 0.3;
  cursor: default;
}

.favorite-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--grid);
  font-size: 12px;
  color: var(--text-dim);
}

.favorite-card__meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.favorite-card__network {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 8px;
  /* Relleno, no solo borde — mismo estilo que los badges de línea de la lista de llegadas. */
  background: var(--accent);
  color: #06170a;
}

.favorite-card__network[data-network="emt"] {
  background: var(--blue);
  color: #001830;
}

.favorite-card__view {
  border: none;
  background: none;
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}


.help-content h3 {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 18px 0 8px;
}

.help-content h3:first-of-type {
  margin-top: 14px;
}

.help-content p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 8px;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 2px;
}

.legend-dot.eta-soon {
  background: var(--orange);
}

.legend-dot.eta-now {
  background: var(--red);
}

/* Todos los estados :hover van aquí, detrás de (hover: hover), en vez de sueltos junto a
   cada regla. En táctil no hay "ratón que se va" tras el tap, así que un :hover normal se
   queda encendido hasta el siguiente toque en cualquier otro sitio (p.ej. el botón ↻
   "pegado" iluminado en móvil). Esta media query solo entra en dispositivos con hover de
   verdad (ratón/trackpad). */
@media (hover: hover) {
  .stop-form__row button:hover {
    opacity: 0.85;
  }

  .network-toggle__btn:not(.active):hover {
    border-color: var(--text-dim);
    color: var(--text);
  }

  .favorites-open-btn:hover {
    border-color: var(--red);
    color: var(--red);
  }

  .help-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .favorite-card__name:hover {
    border-bottom-color: var(--grid);
  }

  .favorite-card__actions button:disabled:hover {
    border-color: var(--text-dim);
    color: var(--text-dim);
  }

  .favorite-card__view:hover {
    text-decoration: underline;
  }

  .panel-close:hover {
    color: var(--text);
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: max(16px, env(safe-area-inset-top)) 16px 16px;
  }
  .brand h1 {
    font-size: 16px;
    letter-spacing: 2px;
  }
  .topbar-actions .help-btn {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }
  main {
    padding: 0 16px;
  }
  .app-footer {
    padding: 0 16px max(8px, env(safe-area-inset-bottom));
    font-size: 7px;
    line-height: 1.5;
  }
}