/* Paleta basada en shoa.cl: azul marino oscuro + dorado/naranja de acento. */
:root {
  --color-bg: #eef3f7;
  --color-header-bg: #0a2e4d;
  --color-header-bg-2: #123a5e;
  --color-accent: #f2a71b;
  --color-panel: #ffffff;
  --color-text: #1b2733;
  --color-text-muted: #5c6b78;
  --color-alert: #e74c3c;
  --color-border: #d8e0e7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

.app-header {
  background: linear-gradient(135deg, var(--color-header-bg), var(--color-header-bg-2));
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-header h1 {
  margin: 0;
  font-size: 1.4rem;
}

/* Lupa que abre/cierra el desplegable de "Sismos por dia" (#search-panel,
   mas abajo) -- vive en el header para no ocupar espacio permanente en
   ningun panel del dashboard. */
.search-toggle {
  font: inherit;
  font-size: 1.1rem;
  width: 2.3rem;
  height: 2.3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

.search-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
}

.search-toggle.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Desplegable de "Sismos por dia" -- flota sobre el resto del dashboard
   en vez de ocupar un panel fijo. Se abre/cierra con .search-toggle (ver
   js/app.js); .hidden (global) lo saca del flujo cuando esta cerrado. */
.search-panel {
  position: absolute;
  top: 68px;
  right: 1.5rem;
  z-index: 1000;
  width: 320px;
  max-width: calc(100vw - 3rem);
  max-height: 70vh;
  box-shadow: 0 4px 16px rgba(10, 46, 77, 0.3);
}

/*
 * Layout de columnas de alto completo: el mapa a la izquierda, despues
 * redes en vivo y menciones en medios (cada una de alto completo, de
 * arriba abajo), y por ultimo ".stack-column" -- una columna angosta con
 * Detalle del evento arriba a la derecha, Sismos por dia al medio y
 * Proximamente al final.
 */
.app-main {
  display: flex;
  height: calc(100vh - 68px);
}

.side-content {
  display: flex;
  /* Fila, no columna: redes-en-vivo y menciones-en-medios necesitan ser
     columnas de alto completo (ver .live-feed.panel/.social-feed.panel),
     no una fila mas apilada arriba de otra. */
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

/* Columna angosta apilada -- Detalle del evento, resumen semanal y
   Proximamente, uno debajo del otro en el espacio que le queda a la
   derecha de los dos feeds de alto completo. "Sismos por dia" se saco de
   aca (ver .search-panel, ahora vive en un desplegable del header).
   padding-top:0 (no 1rem parejo como el resto de los lados): asi el
   primer panel (Detalle del evento) arranca a la misma altura que Mapa
   de Calor/Redes en vivo/Menciones en medios en vez de quedar 16px mas
   abajo -- ver el mismo criterio ya aplicado en h2.live-feed-title. */
.stack-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 220px;
  height: 100%;
  gap: 1rem;
  padding: 0 1rem 1rem 1rem;
  background: var(--color-bg);
}

.stack-column .event-detail {
  /* flex:0 0 auto (no flex:1 1 0 como antes) para que nunca se achique
     por debajo de lo que su contenido necesita -- con los 5 campos
     (referencia, magnitud, hora UTC, hora Chile, fuente) completos, antes
     quedaba mas bajo de lo que hacia falta y "Fuente" se veia recien
     haciendo scroll adentro del cuadro. min-height calculado para que
     entren los 5 sin scroll; si el contenido llegara a necesitar mas
     (ej. la fuente ocupa dos lineas), el "auto" del flex-basis igual deja
     crecer el cuadro en vez de cortarlo. */
  flex: 0 0 auto;
  min-height: 280px;
}

/* Alinea el texto de "Detalle del evento" con el de Mapa de Calor /
   Redes en vivo / Menciones en medios -- mismo criterio y mismos numeros
   que h2.live-feed-title/h2.social-feed-title (buscar ese comentario).
   Selector por id (no ".event-detail h2"): misma especificidad que
   ".panel h2" mas abajo en la hoja de estilos ganaba por orden y pisaba
   este padding-bottom a 0.25rem. */
#event-detail h2 {
  margin-top: -8px;
  padding-bottom: 8px;
}

.stack-column .week-chart-panel {
  /* Pegado a Detalle del evento (gap normal, sin space-between) -- el
     espacio libre de mas abajo lo ocupa .placeholder-panel. */
  flex: 0 0 auto;
  min-height: 140px;
}

.stack-column .placeholder-panel {
  /* Se lleva todo el espacio que sobra despues de los otros dos, que
     tienen alto fijo/segun contenido. */
  flex: 1 1 auto;
  min-height: 90px;
}

.map-wrap {
  /* Angosto y de altura completa (ver .app-main) en vez de ancho y de
     media altura -- eso solo, al pasar de un aspecto horizontal a uno
     vertical, ya reduce mucho el oceano visible de entrada porque Chile
     es una franja angosta y larga de norte a sur. Bajado de 460px a
     380px de nuevo para hacerle espacio a que redes-en-vivo y
     menciones-en-medios sean columnas de alto completo (ver .side-content
     arriba) -- ver tambien js/map.js, el centro se corrio un poco mas al
     este para compensar mostrando todavia menos oceano con este ancho. */
  flex: 0 0 380px;
  min-width: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-title {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: center;
  color: var(--color-header-bg);
  background: var(--color-panel);
  border-bottom: 2px solid var(--color-accent);
  flex-shrink: 0;
}

/* El "position:relative" que antes tenia .map-wrap se mueve aca: el mapa
   y la leyenda superpuesta (position:absolute) necesitan un contenedor
   propio que no incluya el titulo, para que la leyenda siga midiendo su
   "top" desde la esquina del mapa y no se corra hacia abajo. */
.map-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

#map {
  width: 100%;
  height: 100%;
}

/* Caja de la paleta, pegada justo debajo del control de zoom (+/-) de
   Leaflet y con su mismo ancho/borde/radio -- es HTML/CSS comun, no un
   control de Leaflet, asi que no interfiere con el arrastre del mapa: al
   ser un hermano de #map (no un hijo), un click aca nunca llega a los
   manejadores de eventos de Leaflet. Los toggles de capas (heatmap/redes)
   siguen en el DOM pero ocultos (ver .hidden en index.html) -- ya no hay
   espacio ni necesidad de mostrarlos, la caja ahora es solo la paleta. */
.map-legend-overlay {
  position: absolute;
  /* El control de zoom mide ~33px de ancho y ~63px de alto, con 10px de
     margen desde el borde del mapa -- este cuadro repite ese mismo ancho
     y ese mismo margen izquierdo, y arranca 10px debajo de donde termina
     el zoom (63 + 10 + 10 = 83). */
  top: 83px;
  left: 10px;
  z-index: 500;
  width: 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 0.4rem 0.2rem;
}

.live-feed.panel,
.social-feed.panel {
  flex: 0 0 300px;
  height: 100%;
}

.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-y: auto;
  min-height: 0;
}

.live-feed.panel,
.social-feed.panel {
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  /* El titulo de estos dos paneles queda afuera del area con scroll (ver
     #live-feed-body/#social-feed-body) en vez de "sticky" flotando sobre
     el contenido -- position:sticky tenia casos borde de renderizado (un
     resto del texto de una tarjeta se veia pasar por encima del titulo en
     Chrome) que costaba reproducir y corregir de forma confiable. Con el
     titulo realmente afuera del scroll, no hay contenido que pueda
     quedar "detras" de el en ningun momento -- es la solucion mas simple
     y sin casos borde. */
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.social-feed.panel {
  border-right: none;
}

#live-feed-body,
#social-feed-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.panel h2 {
  /* Sin margin-bottom: un margen es transparente, y en un titulo sticky
     (ver .live-feed-title / .social-feed-title) eso deja un hueco por
     donde se ve pasar el fondo de las tarjetas al scrollear -- el espacio
     de respiro ahi va como padding en vez de margin, que si queda pintado
     con el fondo solido del titulo. */
  margin: 0;
  font-size: 1rem;
  color: var(--color-header-bg);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.25rem;
}

.event-detail-placeholder {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Espacio reservado -- sin uso todavia (a futuro, posible espacio de
   publicidad u otra funcion), por ahora solo un cuadro vacio marcado como
   tal para que no se lea como un panel roto. */
.placeholder-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
}

.placeholder-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- Resumen semanal (mini grafico de barras, "Sismos por dia") --- */
.week-chart-panel {
  display: flex;
  flex-direction: column;
}

.week-chart-subtitle {
  margin: 0.3rem 0 0.75rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.week-chart {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  flex: 1 1 auto;
}

.week-chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
}

.week-chart-count {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-header-bg);
  margin-bottom: 0.25rem;
}

/* Alto fijo a proposito: el "height:X%" de .week-chart-fill necesita un
   contenedor con una altura real de la cual ser porcentaje -- .week-chart
   solo se estira segun su contenido (el numero y la letra tienen su
   propio alto variable), asi que una barra a "100%" de eso no crecia casi
   nada. Con el riel a un alto fijo, el porcentaje si funciona siempre. */
.week-chart-track {
  width: 100%;
  max-width: 22px;
  height: 52px;
  display: flex;
  align-items: flex-end;
}

.week-chart-fill {
  width: 100%;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  background: var(--color-header-bg);
}

/* Hoy se destaca con el mismo color de acento que usa el resto del
   dashboard para marcar "seleccionado/actual" (linea del titulo, anillo
   de seleccion en el mapa, etc.) -- mantiene la misma logica de color en
   vez de inventar una nueva. */
.week-chart-bar--today .week-chart-fill {
  background: var(--color-accent);
}

.week-chart-bar--today .week-chart-count {
  color: var(--color-accent);
}

.week-chart-bar--empty .week-chart-fill {
  background: var(--color-border);
}

.week-chart-label {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* --- Tabla "Sismos por dia" --- */
.day-table-controls {
  margin: 0.5rem 0;
}

#day-picker {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
}

.day-table-wrap {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

#day-table {
  width: 100%;
  /* table-layout:fixed para poder repartir el ancho a mano (ver los
     nth-child de mas abajo): la referencia geografica necesita la mayor
     parte para poder leerse, hora y magnitud son siempre cortas. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.78rem;
}

#day-table th:nth-child(1),
#day-table td:nth-child(1) { width: 22%; }

#day-table th:nth-child(2),
#day-table td:nth-child(2) { width: 58%; }

#day-table th:nth-child(3),
#day-table td:nth-child(3) { width: 20%; }

#day-table th {
  position: sticky;
  top: 0;
  background: var(--color-panel);
  text-align: left;
  padding: 0.4rem 0.3rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

#day-table td {
  padding: 0.35rem 0.3rem;
  border-bottom: 1px solid var(--color-border);
  /* Se permite que el texto haga wrap (en vez de cortarse con "...") para
     poder leer la referencia geografica completa -- las filas simplemente
     crecen en alto cuando el lugar es largo. */
  white-space: normal;
  overflow-wrap: break-word;
}

#day-table tr[data-idx] {
  cursor: pointer;
}

#day-table tr[data-idx]:hover {
  background: var(--color-bg);
}

/* --- Menciones en medios --- */
h2.social-feed-title {
  text-align: center;
  /* Queda afuera del area con scroll (ver #social-feed-body y el comentario
     en .live-feed.panel/.social-feed.panel) -- flex-shrink:0 para que no
     se achique cuando el contenido de abajo necesite mas espacio.
     margin-top negativo compensa el padding-top de ".panel" (1rem) para
     que el texto arranque a la misma altura que el de "Mapa de Calor" al
     lado (que solo tiene 0.5rem de padding-top) -- y padding-bottom
     compensa exactamente esos mismos 8px para que la linea naranja de
     abajo no se mueva y siga a la misma altura que la de "Mapa de Calor". */
  flex-shrink: 0;
  margin-top: -8px;
  padding-bottom: 8px;
}

.social-feed-empty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.social-card {
  display: block;
  padding: 0.5rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid #8e44ad;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}

.social-card:hover {
  background: var(--color-bg);
}

.social-card-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
}

.social-card-meta {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.social-card-place {
  color: #8e44ad;
  font-weight: 600;
}

/* --- Redes en vivo (Bluesky + Mastodon) --- */
h2.live-feed-title {
  text-align: center;
  /* Ver el comentario en h2.social-feed-title, mismo criterio. */
  flex-shrink: 0;
  margin-top: -8px;
  padding-bottom: 8px;
}

.live-feed-empty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.live-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.live-card {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 12px;
  background: #eaf4ff;
  border: 1px solid #cfe6fd;
}

.live-card-link:hover .live-card {
  background: #dcecff;
}

.live-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #cfe6fd;
  object-fit: cover;
}

.live-card-body {
  min-width: 0;
}

.live-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: baseline;
  font-size: 0.72rem;
}

.live-card-platform {
  font-size: 0.85rem;
  line-height: 1;
}

.live-card-name {
  font-weight: 600;
  color: var(--color-text);
}

.live-card-handle,
.live-card-time {
  color: var(--color-text-muted);
}

.live-card-text {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.layer-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.layer-toggle--disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Escala vertical: la intensidad crece hacia arriba (Leve abajo, Fuerte
   arriba), como un termometro. column-reverse deja el HTML en el mismo
   orden de siempre (I..X, azul a rosado) y solo invierte el sentido
   visual. El numero romano de cada grado va dentro de su propio cuadro
   de color (no hay ancho para una columna aparte) -- texto blanco con
   sombra oscura para que se lea igual sobre cualquiera de los 10 colores. */
.legend-label-strong,
.legend-label-weak {
  /* Horizontal (no vertical-rl como antes). "Fuerte" (la palabra mas
     larga) se encoge lo justo para entrar en los ~23px de ancho
     disponible dentro de la caja, sin desbordar el borde. */
  font-size: 0.52rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.legend-scale {
  display: flex;
  flex-direction: column-reverse;
  width: 22px;
  /* 200px / 12 grados (antes 170px / 10) mantiene mas o menos la misma
     altura por franja al sumar XI y XII. */
  height: 200px;
  border-radius: 3px;
  overflow: hidden;
}

.legend-scale span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}

.event-detail dl {
  margin: 0;
  font-size: 0.85rem;
}

.event-detail dt {
  font-weight: 600;
  color: var(--color-header-bg);
  margin-top: 0.5rem;
}

.event-detail dd { margin: 0; }

.hidden { display: none; }

.status {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.quake-marker--relevant {
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0% { filter: drop-shadow(0 0 0 rgba(231, 76, 60, 0.7)); }
  70% { filter: drop-shadow(0 0 8px rgba(231, 76, 60, 0)); }
  100% { filter: drop-shadow(0 0 0 rgba(231, 76, 60, 0)); }
}

/* Anillo amarillo del sismo seleccionado (tabla o click en el mapa). */
.selection-ring {
  animation: selection-pulse 1.2s ease-in-out infinite;
}

@keyframes selection-pulse {
  0% { filter: drop-shadow(0 0 0 rgba(255, 212, 0, 0.9)); }
  70% { filter: drop-shadow(0 0 10px rgba(255, 212, 0, 0)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 212, 0, 0)); }
}

/*
 * Mobile: el layout de escritorio es un tablero fijo pensado para una
 * pantalla ancha (mapa de alto completo + redes-en-vivo/menciones de alto
 * completo + la columna angosta apilada) -- en un celular ese ancho
 * minimo no entra ni cerca, y todo quedaba amontonado o cortado. Abajo de
 * 900px se apila todo en una sola columna que scrollea normal como pagina.
 *
 * .side-content y .stack-column pasan a "display:contents": la caja en
 * si desaparece (flex/gap/padding ya no aplican) pero sus hijos quedan
 * como hijos directos de .app-main, que es el que ahora ordena todo con
 * flexbox + la propiedad "order" -- asi no hace falta reordenar el HTML
 * para lograr el orden pedido (mapa, detalle del evento, sismos por dia,
 * proximamente, redes en vivo, menciones en medios -- el mismo orden de
 * arriba a abajo que en escritorio).
 */
@media (max-width: 900px) {
  .app-main {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 1rem;
    padding: 1rem;
  }

  .side-content,
  .stack-column {
    display: contents;
  }

  .map-wrap {
    order: 1;
    flex: none;
    width: 100%;
    min-width: 0;
    height: 320px;
  }

  .event-detail { order: 2; }
  .week-chart-panel { order: 3; }
  .placeholder-panel { order: 4; }
  .live-feed.panel { order: 5; }
  .social-feed.panel { order: 6; }

  /* En el layout de escritorio estos dos van pegados al mapa y entre si,
     de alto completo (sin borde ni esquinas redondeadas de ese lado) --
     apilados en mobile son tarjetas sueltas, necesitan los cuatro bordes,
     las esquinas y una altura propia en vez de "100%" de un padre que en
     mobile ya no tiene una altura fija de la cual heredar. */
  .live-feed.panel,
  .social-feed.panel {
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }

  /* Sin una altura de panel fija (era 50% de .app-main en escritorio),
     "flex:1" en el body de estos dos feeds no tiene contra que crecer --
     necesitan un tope explicito para que seguir mostrando "lo ultimo"
     como una lista con scroll propio, en vez de una pagina kilometrica. */
  #live-feed-body,
  #social-feed-body {
    max-height: 340px;
  }
}