/* 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;
  /* El titulo se centra con position:absolute (ver .app-header h1) --
     relative aca es lo que fija el punto de referencia para ese centrado. */
  position: relative;
}

/* Centrado real en la fila completa (no en el espacio libre entre logo y
   lupa): si el logo y el boton no miden exactamente lo mismo, centrar por
   flexbox normal descuadra el titulo hacia un lado. Sacandolo del flujo y
   centrandolo contra .app-header entero queda perfecto sin importar el
   ancho de los elementos de los costados. */
.app-header h1 {
  margin: 0;
  font-size: 1.525rem; /* 24,4 px (antes 22,4: +2 px, a pedido) */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* 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. margin-left:auto la deja a la derecha aunque
   sea el unico elemento en flujo (el titulo esta fuera del flujo, ver arriba). */
.search-toggle {
  margin-left: auto;
  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;
}

/* Aviso de "estas viendo las publicaciones de un sismo pasado" (trazabilidad,
   ver showTrace en js/app.js). Queda afuera del area con scroll, igual que el
   titulo del panel. Sin "display" propio para no pelear con .hidden. */
.trace-banner {
  flex-shrink: 0;
  margin: 0.5rem 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text);
  background: #eef3f7;
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
}

.trace-banner strong {
  display: block;
  margin-bottom: 0.15rem;
}

.trace-banner .trace-note {
  color: var(--color-text-muted);
}

.trace-banner button {
  margin-top: 0.4rem;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-header-bg);
  background: #fff;
  border: 1px solid var(--color-header-bg);
  border-radius: 4px;
  cursor: pointer;
}

.trace-banner button:hover {
  background: var(--color-header-bg);
  color: #fff;
}

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

/* Instruccion para quien entra por primera vez y no sabe como funciona el
   panel: centrada y con un recuadro ambar muy tenue -- se nota sin gritar
   (una primera version, en negrita y con borde grueso, se veia
   "demasiado alumbrada" a criterio del usuario). Sin "display" propio a
   proposito, para no pelear con .hidden (que la saca al elegir un sismo). */
.event-detail-placeholder {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  background: #fffaf0;
  border: 1px dashed var(--color-accent);
  border-radius: 6px;
}

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

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

  /* La leyenda de colores esta calibrada para el alto del mapa de
     escritorio (top:83px + ~248px de caja completa, ver .map-legend-overlay/
     .legend-scale mas arriba) -- con el mapa fijo a 320px de alto en mobile
     (menos la barra de titulo, quedan ~280px para el mapa mismo) esa caja
     se pasaba casi 50px por debajo del mapa y tapaba el titulo de "Detalle
     del evento" que viene justo despues (.map-canvas no recorta su
     contenido, un position:absolute que se pasa de alto queda pintado
     encima de lo que sigue en la pagina). Se achica la franja de colores
     para que la caja completa entre en el alto disponible.
  */
  .legend-scale {
    height: 130px;
  }

  .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;
  }
}

/*
 * Celular (mas angosto que una tablet, que ya entra bien en el breakpoint
 * de arriba): el titulo del header se centra con position:absolute +
 * white-space:nowrap (ver .app-header h1) para no descuadrarse segun el
 * ancho real del logo/boton de los costados -- pero eso ignora el ancho
 * del propio viewport, asi que a este ancho el titulo entero (~469px de
 * texto, mas largo que la pantalla) se sale por los dos bordes y queda
 * cortado/ilegible en vez de simplemente achicarse. Se pasa a flujo normal
 * en una segunda fila propia (el header pasa a flex-wrap), permitiendo
 * salto de linea y con una tipografia mas chica -- logo y lupa quedan en
 * la primera fila.
 */
@media (max-width: 600px) {
  .app-header {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    row-gap: 0.5rem;
  }

  .app-header h1 {
    position: static;
    transform: none;
    order: 3;
    width: 100%;
    text-align: center;
    font-size: 1.175rem; /* 18,8 px (antes 16,8: +2 px) */
    white-space: normal;
    line-height: 1.25;
  }
}

/* --- "¿Lo sentiste?" (prototipo) --- */
.report-box {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.report-box h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--color-header-bg);
}

.report-demo,
.report-closed,
.report-empty,
.report-message,
.report-comunas {
  margin: 0.3rem 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.report-privacy {
  margin: 0.3rem 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.report-demo {
  padding: 0.3rem 0.5rem;
  background: #fff3d6;
  border-radius: 4px;
}

.report-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.4rem 0;
}

.report-choice {
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-header-bg);
  background: #fff;
  border: 1px solid var(--color-header-bg);
  border-radius: 999px;
  cursor: pointer;
}

.report-choice:hover { background: #eef3f7; }

.report-choice.is-selected {
  color: #fff;
  background: var(--color-header-bg);
}

.report-comuna {
  display: block;
  margin: 0.4rem 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.report-comuna select {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.3rem;
  font: inherit;
  font-size: 0.82rem;
}

.report-total {
  margin: 0.5rem 0 0.3rem;
  font-size: 0.82rem;
}

.report-row {
  /* etiqueta + numero arriba, barra completa debajo: se ve bien aunque la
     columna sea angosta (celular o ventana chica) */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.4rem;
  margin: 0.3rem 0;
  font-size: 0.75rem;
}

.report-row-bar { grid-column: 1 / -1; order: 3; }

.report-row-bar {
  height: 0.5rem;
  background: #eef3f7;
  border-radius: 3px;
  overflow: hidden;
}

.report-row-bar span {
  display: block;
  height: 100%;
  background: var(--color-accent);
}

.report-row-n { text-align: right; }