/* ═══════════════════════════════════════════════════════════
   style.css — Estilos del mapa de Cercanías Madrid
   Tema oscuro tipo "dashboard de operaciones"
═══════════════════════════════════════════════════════════ */

/* ─── Reset y base ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  background: #0d1117;
  color: #c9d1d9;
}


/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */

#sidebar {
  width: 270px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  background: #161b22;
  border-right: 1px solid #30363d;
  overflow-y: auto;
  z-index: 1000;
}

/* ─── Cabecera ──────────────────────────────────────────── */
#header {
  padding: 16px;
  background: #0f3460;
  border-bottom: 1px solid #1a4a8a;
  flex-shrink: 0;
}

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

.logo {
  font-size: 30px;
  line-height: 1;
}

#header h1 {
  font-size: 15px;
  font-weight: 700;
  color: #e6edf3;
  letter-spacing: 0.2px;
}

#header p {
  font-size: 11px;
  color: #8ab4f8;
  margin-top: 3px;
}

/* ─── Panel de actualización ────────────────────────────── */
#refresh-panel {
  padding: 12px 14px;
  background: #1c2333;
  border-bottom: 1px solid #30363d;
  flex-shrink: 0;
}

.refresh-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 9px;
}

#status-text {
  flex: 1;
  font-size: 11px;
  color: #8b949e;
  line-height: 1.4;
}

#btn-refresh {
  flex-shrink: 0;
  background: #21262d;
  color: #8ab4f8;
  border: 1px solid #30363d;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

#btn-refresh:hover {
  background: #30363d;
  border-color: #58a6ff;
}

/* Barra de progreso de 60 segundos */
.progress-track {
  height: 3px;
  background: #21262d;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 7px;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1f6feb, #3fb950);
  /* La transición "linear 1s" hace que la barra avance suavemente cada segundo */
  transition: width 1s linear;
  border-radius: 2px;
}

.countdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #6e7681;
}

.countdown-row strong {
  color: #8ab4f8;
  font-variant-numeric: tabular-nums;
}

/* ─── Controles ─────────────────────────────────────────── */
#controls {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-bottom: 1px solid #30363d;
  flex-shrink: 0;
}

#controls button {
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#controls button:hover {
  background: #30363d;
  color: #c9d1d9;
}

#controls button.active {
  background: #1f3a5f;
  color: #58a6ff;
  border-color: #1f6feb;
}

/* ─── Leyenda ───────────────────────────────────────────── */
#legend {
  padding: 14px;
  flex: 1;
  min-height: 0;
}

#legend h2 {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

.legend-hint {
  font-size: 10px;
  color: #484f58;
  margin-bottom: 10px;
}

#legend-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.loading-msg {
  font-size: 11px;
  color: #484f58;
  padding: 8px 0;
}

/* Cada fila de la leyenda (pastilla de color + contador) */
.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}

.legend-item:hover {
  background: #21262d;
}

/* Cuando la línea NO está en el filtro activo */
.legend-item.dimmed {
  opacity: 0.3;
}

/* Pastilla cuadrada con el nombre de la línea */
.legend-color {
  width: 40px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

.legend-label {
  font-size: 12px;
  color: #8b949e;
}

/* ─── Footer ────────────────────────────────────────────── */
#footer {
  padding: 10px 14px;
  font-size: 10px;
  color: #484f58;
  border-top: 1px solid #30363d;
  flex-shrink: 0;
}

#footer a {
  color: #58a6ff;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════
   MAPA
═══════════════════════════════════════════════════════════ */

#map {
  flex: 1;
  z-index: 1;
  background: #1a1a2e;
}


/* ═══════════════════════════════════════════════════════════
   MARCADORES DE TRENES
   (son divs HTML inyectados por Leaflet como DivIcon)
═══════════════════════════════════════════════════════════ */

/* Contenedor que Leaflet crea: reseteamos su estilo para que no interfiera */
.train-marker {
  background: transparent !important;
  border: none !important;
}

/* El círculo visible del marcador */
.train-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

/* Al pasar el ratón, el marcador crece ligeramente */
.train-icon:hover {
  transform: scale(1.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* Texto del nombre de línea dentro del círculo */
.train-line {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}


/* ═══════════════════════════════════════════════════════════
   MARCADORES DE ESTACIONES
═══════════════════════════════════════════════════════════ */

.station-marker {
  background: transparent !important;
  border: none !important;
  /* Necesario para que la etiqueta no quede recortada */
  overflow: visible !important;
}

/* Rombo blanco con borde oscuro — reconocible y diferente a los trenes */
.station-dot {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 2px solid #1a1a2e;
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
}

.station-dot:hover {
  transform: rotate(45deg) scale(1.4);
}

/* Etiqueta de texto que aparece junto al rombo */
.station-label {
  /* Deshace la rotación del padre para que el texto quede horizontal */
  display: block;
  transform: rotate(-45deg);
  position: absolute;
  /* Desplaza la etiqueta a la derecha del rombo */
  left: 16px;
  top: -5px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: #e6edf3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
  pointer-events: none;
  /* Oculta por defecto; se muestra al hacer hover sobre el mapa */
  opacity: 0;
  transition: opacity 0.15s;
}

/* Muestra la etiqueta al pasar el ratón */
.station-dot:hover .station-label {
  opacity: 1;
}

/* ─── Popup de estación ──────────────────────────────────── */
.station-popup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px;
}

.station-popup strong {
  font-size: 13px;
  color: #e6edf3;
}

.station-popup span {
  font-size: 11px;
  color: #8b949e;
}


/* ═══════════════════════════════════════════════════════════
   POPUP DE TREN
   Leaflet crea .leaflet-popup-content-wrapper; lo sobreescribimos.
═══════════════════════════════════════════════════════════ */

.leaflet-popup-content-wrapper {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  padding: 0 !important;
  overflow: hidden;
}

/* El Leaflet añade padding por defecto; lo quitamos */
.leaflet-popup-content {
  margin: 0 !important;
  width: 240px !important;
}

/* El triángulo apuntador del popup */
.leaflet-popup-tip {
  background: #161b22 !important;
}

/* Botón de cerrar el popup */
.leaflet-popup-close-button {
  color: #8b949e !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}

/* Contenedor interno del popup */
.train-popup {
  overflow: hidden;
  border-radius: 10px;
}

/* Franja superior con color de línea */
.popup-header {
  padding: 10px 36px 10px 14px; /* derecha: 36px para dejar espacio a la X */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.popup-header strong {
  font-size: 14px;
  font-weight: 700;
}

.popup-header span {
  font-size: 11px;
  opacity: 0.85;
}

/* Cuerpo del popup */
.popup-body {
  padding: 8px 14px 12px;
}

/* Cada fila de información: etiqueta + valor */
.popup-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #21262d;
  font-size: 12px;
  line-height: 1.4;
  color: #e6edf3;
}

.popup-row:last-child {
  border-bottom: none;
}

.popup-label {
  color: #8b949e;
  flex-shrink: 0;
  font-size: 11px;
}

/* IDs largos los mostramos en fuente más pequeña */
.trip-id {
  font-size: 10px;
  color: #c9d1d9;
  word-break: break-all;
  text-align: right;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL (≤ 640 px)

   Estrategia: layout en columna.
   • El mapa ocupa todo el espacio libre (flex: 1).
   • El sidebar se convierte en un "bottom sheet": panel fijo
     en la parte inferior con scroll propio.
   • La leyenda de líneas pasa a carrusel horizontal para
     mostrar todas las líneas sin scroll vertical.
═══════════════════════════════════════════════════════════ */

/* Muesca — oculta en escritorio */
.sidebar-handle { display: none; }

@media (max-width: 640px) {

  /* ── Layout base ─────────────────────────────────────── */
  body {
    flex-direction: column;
    /* dvh evita el salto de la barra de dirección en Safari/Chrome móvil */
    height: 100dvh;
    height: 100vh; /* fallback para navegadores que no soporten dvh */
  }

  #map {
    flex: 1;
    min-height: 0; /* permite que flex recalcule correctamente */
  }

  /* ── Sidebar → bottom sheet ──────────────────────────── */
  #sidebar {
    width: 100%;
    min-width: unset;
    height: auto;
    max-height: 46vh;
    border-right: none;
    border-top: 1px solid #30363d;
    border-radius: 14px 14px 0 0;
    flex-shrink: 0;
  }

  /* Muesca de arrastre visual */
  .sidebar-handle {
    display: block;
    width: 34px;
    height: 4px;
    background: #2d333b;
    border-radius: 2px;
    margin: 10px auto 2px;
    flex-shrink: 0;
  }

  /* ── Cabecera ─────────────────────────────────────────── */
  #header {
    padding: 8px 14px 10px;
  }

  .logo { font-size: 22px; }

  #header h1 { font-size: 13px; }

  /* El subtítulo ocupa espacio valioso — lo ocultamos */
  #header p { display: none; }

  /* ── Panel de actualización ──────────────────────────── */
  #refresh-panel {
    padding: 6px 12px 8px;
  }

  .refresh-row { margin-bottom: 5px; }

  /* ── Controles ───────────────────────────────────────── */
  #controls {
    flex-direction: row;
    padding: 6px 12px;
    gap: 8px;
  }

  /* Botones: área de toque mínima 44 px recomendada por Apple/Google */
  #controls button {
    flex: 1;
    min-height: 44px;
    font-size: 11px;
    padding: 8px 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Leyenda ──────────────────────────────────────────── */
  #legend {
    padding: 8px 12px 10px;
  }

  #legend h2    { margin-bottom: 2px; }
  .legend-hint  { margin-bottom: 6px; }

  /* Carrusel horizontal: todas las líneas en una sola fila */
  #legend-lines {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    padding-bottom: 4px;
    gap: 8px;
  }

  #legend-lines::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  /* Cada ítem: columna pequeña (pastilla + número) */
  .legend-item {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 52px;
    padding: 6px 4px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .legend-color {
    width: 42px;
    height: 26px;
    font-size: 10px;
  }

  .legend-label {
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
  }

  /* ── Footer ──────────────────────────────────────────── */
  #footer { padding: 6px 12px; }

  /* ── Popup del tren ───────────────────────────────────── */
  /* En móvil el popup ocupa casi todo el ancho disponible */
  .leaflet-popup-content {
    width: min(300px, 85vw) !important;
  }

  .popup-row {
    font-size: 13px;
    padding: 7px 0;
  }

  /* Zoom Leaflet: lo movemos para que no quede tapado por la sidebar */
  .leaflet-control-zoom {
    margin-bottom: 8px !important;
  }
}