/* Observatorio del Clima · Oen Systems
   Disposición en zonas fijas (CSS Grid): ningún bloque puede montarse encima de otro.
   ┌ cabecera ───────────────────────────┐
   │ filtros                             │
   │ ficha │ globo                       │
   │ tarjetas                            │
   └ pie ────────────────────────────────┘ */

:root {
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, .72);
  --ink-3: rgba(255, 255, 255, .5);
  --line: rgba(255, 255, 255, .14);
  --line-2: rgba(255, 255, 255, .28);
  --surface: #14161A;
  --surface-2: #1C1F24;
  --bg: #111316;
  --coral: #FF837A;
  --red: #FF3B3B;
  --orange: #E8590C;
  --ok: #3BA776;
  --radius: 14px;
  --pad: 18px;
  --ficha-w: 380px;
  --card-w: 200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 400 14px/1.45 Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(circle farthest-corner at 0% 50%, #ff010122, #0000 47%),
    radial-gradient(circle farthest-corner at 40% 130%, #7aa7ff55, #0000 58%);
  overflow: hidden;
  height: 100dvh;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "top top"
    "ficha globe"
    "ficha filters"
    "ficha cards"
    "foot foot";
  transition: grid-template-columns .3s ease;
}
body.ficha-open { grid-template-columns: var(--ficha-w) minmax(0, 1fr); }

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
svg { display: block; }

/* ---------- Botones base ---------- */
.icon {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.icon:hover { background: var(--surface-2); border-color: var(--line-2); }
.icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ghost {
  border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.ghost:hover { color: var(--ink); border-color: var(--line-2); }

.scroller { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.scroller::-webkit-scrollbar { display: none; }

/* ---------- Cabecera ---------- */
.top {
  grid-area: top; display: flex; align-items: center; gap: 16px;
  padding: 14px var(--pad) 10px;
}
.logo { color: var(--ink); flex: none; }
.logo svg { height: 26px; width: auto; }
.title {
  margin: 0 auto 0 8px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.title #count { font-weight: 500; letter-spacing: 0; color: var(--ink-2); text-transform: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse-red 1.6s infinite; }
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, .6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

/* ---------- Filtros ---------- */
.filters { grid-area: filters; padding: 10px var(--pad) 4px; min-width: 0; border-top: 1px solid var(--line); }
.chip {
  flex: none; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; white-space: nowrap;
}
.chip b { font-weight: 600; color: var(--ink-3); }
.chip:hover { border-color: var(--line-2); }
.chip.on { background: #fff; color: #111; border-color: #fff; }
.chip.on b { color: #555; }

/* ---------- Globo ---------- */
.globe { grid-area: globe; position: relative; min-width: 0; min-height: 0; }
#globe-view { position: absolute; inset: 0; }
#globe-view .cesium-viewer, #globe-view .cesium-widget, #globe-view canvas { width: 100%; height: 100%; }
.cesium-viewer-bottom, .cesium-widget-credits { display: none; } /* créditos de Cesium: van en «Fuentes y créditos» */
.globe-ctl { position: absolute; right: var(--pad); bottom: 12px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Ficha ---------- */
.ficha {
  grid-area: ficha; position: relative; min-height: 0; overflow: auto; overflow-x: hidden;
  background: var(--surface); border-right: 1px solid var(--line);
  visibility: hidden;
}
body.ficha-open .ficha { visibility: visible; }
.ficha .close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0, 0, 0, .55); border-color: transparent; }
.f-hero { margin: 0; position: relative; aspect-ratio: 16 / 10; background: #0c0d10; }
.f-hero img { width: 100%; height: 100%; object-fit: cover; }
.f-hero figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 11px; line-height: 1.35;
  padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff;
}
.f-content { padding: 16px 18px 22px; }
.f-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.f-tags span { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.f-tags i { width: 8px; height: 8px; border-radius: 50%; }
.f-tags .f-alert { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }
.f-tags .f-alert.red { background: var(--red); border-color: var(--red); }
.ficha h2 { margin: 12px 0 2px; font-size: 20px; line-height: 1.25; font-weight: 600; }
.f-place { margin: 0; color: var(--ink-3); font-size: 13px; }
.f-why { margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--coral); color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.ficha h3 { margin: 20px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.f-sat { margin: 0; }
.f-sat img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #0c0d10; }
.f-sat figcaption { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.f-src { margin: 16px 0 0; font-size: 13px; }
.skel { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #1a1d22, #23272d, #1a1d22); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---------- Tarjetas ---------- */
.cards { grid-area: cards; padding: 6px 0 10px; min-width: 0; }
.cards .scroller { list-style: none; margin: 0; padding: 0 var(--pad); scroll-snap-type: x proximity; }
.cards li { flex: none; scroll-snap-align: start; }
.cards .empty { color: var(--ink-3); padding: 24px 0; }
.card {
  position: relative; display: flex; flex-direction: column; width: var(--card-w); height: 100%; padding: 0; text-align: left;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden;
}
.card:hover { border-color: var(--line-2); }
.card.feat { width: calc(var(--card-w) + 30px); border-color: rgba(255, 255, 255, .5); }
.card.hot { border-color: rgba(255, 59, 59, .7); }
.card-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0c0d10; }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.card-img img[src] { opacity: 1; }
.card-tag, .card-alert {
  position: absolute; top: 8px; display: flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(10, 11, 14, .82);
}
.card-tag { left: 8px; }
.card-tag i { width: 7px; height: 7px; border-radius: 50%; }
.card-alert { right: 8px; border-radius: 6px; background: var(--orange); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.card-alert.red { background: var(--red); animation: pulse-red 1.6s infinite; }
.card-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; }
.card-kicker { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); }
.card-body strong { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-body small { font-size: 11.5px; color: var(--ink-3); }

/* ---------- Pie ---------- */
.foot {
  grid-area: foot; display: flex; align-items: center; gap: 14px; padding: 8px var(--pad);
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.foot .label { color: var(--ink-3); }
.foot a { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot i, .mnav-src i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.foot a.off { color: var(--ink-3); }
.foot a.off i, .mnav-src a.off i { background: var(--red); }
.foot .foot-credits { display: none; margin-left: auto; padding: 3px 10px; font-size: 11px; }

/* ---------- Créditos ---------- */
.credits {
  width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 40px); padding: 26px 28px 22px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink);
}
.credits::backdrop { background: rgba(0, 0, 0, .6); }
.credits .close { position: absolute; top: 12px; right: 12px; }
.credits h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.credits h3 { margin: 22px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.credits p { margin: 0 0 8px; color: var(--ink-2); line-height: 1.55; }
.credits .lead { color: var(--ink); font-size: 15px; }
.credits dl { margin: 0; }
.credits dt { margin-top: 12px; font-weight: 600; }
.credits dt.off::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 1px; }
.credits dd { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; }
.credits dd span { color: var(--ink-3); }
.credits .foot-note { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }

/* ---------- Signos vitales ---------- */
.vitals { flex: 1; min-width: 0; display: flex; justify-content: center; }
.vitals .scroller { max-width: 100%; }
.vtile {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-align: left;
}
.vtile:hover { border-color: var(--line-2); }
.vtile.on { border-color: #fff; background: var(--surface-2); }
.v-name { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.v-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-val em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.v-val.up { color: #FF9C94; } .v-val.down { color: #9EBEFF; }
.v-val.v-map { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.v-spark { width: 60px; height: 16px; }

/* Panel de la capa activa: dentro de la zona del globo */
.layer-panel {
  position: absolute; top: 0; left: var(--pad); width: min(300px, calc(100% - 2 * var(--pad) - 50px)); border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0;
  max-height: calc(100% - 20px); overflow: auto; padding: 14px 16px; border-radius: var(--radius);
  background: rgba(20, 22, 26, .92); border: 1px solid var(--line); z-index: 2;
}
.layer-panel[hidden] { display: none; }
.layer-panel h2 { margin: 0 28px 4px 0; font-size: 16px; font-weight: 600; }
.lp-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; font-size: 18px; line-height: 1; }
.lp-what { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.lp-big { margin: 10px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.lp-big em { font-style: normal; font-size: 14px; color: var(--ink-3); font-weight: 500; }
.lp-big.up { color: #FF9C94; } .lp-big.down { color: #9EBEFF; }
.lp-sent { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.lp-sent b { color: var(--ink); }
.lp-legend { margin-top: 12px; }
.lg-bar { height: 9px; border-radius: 5px; }
.lg-words, .lg-nums { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; }
.lg-words { font-weight: 500; }
.lg-nums { color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.lp-time { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.lp-time button { height: 30px; min-width: 30px; border-radius: 9px; border: 1px solid var(--line); background: transparent; font-size: 13px; }
.lp-time button:hover { background: var(--surface-2); }
.lp-date { flex: 1; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.lp-play { padding: 0 10px; }
.lp-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }

/* Continente */
.filters { display: flex; gap: 8px; align-items: center; }
.filters .scroller { min-width: 0; }
.region-wrap { flex: none; }
#region {
  height: 32px; padding: 0 30px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--ink); font: 500 13px Inter, system-ui, sans-serif; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* El botón activo y su panel forman una sola pieza */
.top { padding-bottom: 8px; }
.vtile.on { border-color: rgba(255, 255, 255, .5); border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  background: rgba(20, 22, 26, .92); padding-bottom: 14px; margin-bottom: -8px; position: relative; z-index: 3; }
.layer-panel { border: 1px solid rgba(255, 255, 255, .5); border-top: 0; }

/* Título de catástrofes en la franja de abajo */
.filters .title { margin: 0 4px 0 0; flex: none; font-size: 12px; }

/* Opciones del mapa en el pie */
.map-ctl { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.map-ctl select, .map-ctl .toggle {
  height: 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 12px Inter, system-ui, sans-serif;
}
.map-ctl select { padding: 0 24px 0 10px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
.map-ctl .toggle { padding: 0 10px; }
.map-ctl .toggle.on { background: rgba(255, 255, 255, .16); color: var(--ink); border-color: var(--line-2); }

/* ---------- Pantallas bajas ---------- */
@media (max-height: 760px) {
  :root { --card-w: 180px; }
  .card-img { aspect-ratio: 16 / 7; }
  .top { padding-top: 10px; padding-bottom: 6px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 720px) {
  :root { --pad: 12px; --card-w: 72vw; }
  body, body.ficha-open { grid-template-columns: 0 minmax(0, 1fr); }
  .logo svg { height: 22px; }
  .title { margin-left: auto; font-size: 11.5px; gap: 7px; }
  .top .ghost { display: none; }
  .top { flex-wrap: wrap; row-gap: 8px; }
  .vitals { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .filters .title { display: none; }
  .map-ctl { margin-left: 0; }
  .card.feat { width: calc(var(--card-w) + 20px); }
  .card-img { aspect-ratio: 16 / 8; }
  .globe-ctl { display: none; }
  .vtile { padding: 6px 10px; }
  .v-spark { display: none; }
  .layer-panel { top: auto; bottom: 8px; left: var(--pad); right: var(--pad); width: auto; max-height: 55%; }
  /* La ficha se abre como hoja a pantalla completa */
  .ficha { position: fixed; inset: 0; z-index: 20; border: 0; transform: translateY(100%); transition: transform .3s ease, visibility 0s .3s; }
  body.ficha-open .ficha { transform: none; transition: transform .3s ease; }
  .foot { gap: 10px; font-size: 11px; }
  .foot .label { display: none; }
  .foot .foot-credits { display: inline-block; }
}

/* Signos vitales compactos para que quepan en la línea del logo */
.vitals .scroller { gap: 6px; }
.vtile { padding: 5px 9px; }
.v-name { font-size: 10.5px; }
.v-val { font-size: 13px; }
.v-val.v-map { font-size: 12px; }
@media (max-width: 1100px) { .top .ghost { display: none; } }

/* Icono de despliegue en los signos vitales */
.vtile { justify-content: center; min-height: 44px; }
.v-name { display: flex; align-items: center; gap: 4px; }
.v-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .2s; }
.vtile.on .v-chev { transform: rotate(180deg); opacity: 1; }
.vtile:not(:has(.v-val)) .v-name { font-size: 12px; color: var(--ink); }
.vitals .scroller { gap: 5px; }
.vtile { padding: 5px 8px; }
.vtile:not(:has(.v-val)) .v-name { font-size: 11px; }
.v-chev { width: 11px; height: 11px; }

/* Franja de catástrofes compacta: tipos a la izquierda, continentes a la derecha */
.filters { gap: 10px; }
.filters .scroller { gap: 5px; }
.filters .chip { height: 26px; padding: 0 9px; font-size: 11.5px; gap: 4px; }
.filters .chip b { font-weight: 600; }
#filters-list { flex: 1 1 auto; }
.regions { flex: 0 1 auto; padding-left: 10px; border-left: 1px solid var(--line); }
.chip.region.on { background: var(--surface-2); color: var(--ink); border-color: #fff; }
.filters .title { font-size: 11px; letter-spacing: .05em; }

.filters .chip { padding: 0 8px; font-size: 11px; }
.filters .title { gap: 7px; }
@media (max-width: 1500px) { .filters .chip .lbl { display: none; } }

/* ===== Signos vitales: píldoras alargadas que ocupan la cabecera ===== */
.top .ghost#credits-open { display: none; }          /* «Créditos» pasa al pie para dar sitio */
.foot .foot-credits { display: inline-block; margin-left: 10px; }
.vitals { flex: 1; justify-content: stretch; }
.vitals .scroller { flex: 1; gap: 8px; }
.vtile {
  flex: 1 0 auto; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  min-height: 0; height: 38px; padding: 0 16px; border-radius: 999px;
}
.v-name { font-size: 12.5px; color: var(--ink-2); gap: 6px; }
.v-val { font-size: 14px; order: 0; }
.vtile .v-name { order: 0; }
.vtile .v-chev { order: 2; }
.vtile:not(:has(.v-val)) .v-name { font-size: 12.5px; }
.vtile.on { border-radius: 19px 19px 0 0; height: 46px; padding-bottom: 8px; margin-bottom: -8px; }
@media (max-width: 720px) {
  .vtile { flex: none; height: 34px; padding: 0 13px; }
}

/* Signos vitales más contenidos y centrados; zoom y mundo arriba a la derecha */
.vitals { justify-content: center; }
.vitals .scroller { flex: 0 1 auto; gap: 6px; }
.vtile { flex: none; height: 32px; padding: 0 12px; gap: 6px; }
.v-name, .vtile:not(:has(.v-val)) .v-name { font-size: 11.5px; }
.v-val { font-size: 12.5px; }
.vtile.on { height: 40px; border-radius: 16px 16px 0 0; }
.top-ctl { position: static; flex-direction: row; gap: 6px; flex: none; }
.top-ctl .icon { width: 32px; height: 32px; }
.top-ctl .icon svg { width: 16px; height: 16px; }
@media (max-width: 720px) { .top-ctl { display: flex; margin-left: auto; } .top-ctl #zoom-in, .top-ctl #zoom-out { display: none; } }

/* Marca del producto: Anomalía */
.logo svg { height: 20px; }
.brand { display: flex; flex-direction: column; line-height: 1.1; padding-left: 12px; border-left: 1px solid var(--line); text-decoration: none; flex: none; }
.brand b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.brand span { font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em; }
@media (max-width: 720px) { .logo svg { height: 18px; } .brand b { font-size: 14px; } }
.lp-sent .nn { display: block; margin-top: 6px; color: #FF9C94; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.vitals .scroller { gap: 5px; }
.vtile { padding: 0 11px; }
.brand span { max-width: 128px; line-height: 1.2; }
.brand span { max-width: 150px; }
.vtile { padding: 0 10px; }
.vitals .scroller { gap: 4px; }
.logo svg { height: 18px; }

/* Logo de producto: Geonomaly, by Oen Systems */
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo .logo-star { width: 24px; height: 24px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text b { font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.logo-text small { font-size: 10px; color: var(--ink-3); letter-spacing: .02em; margin-top: 2px; }
.brand span { font-size: 11px; color: var(--ink-2); }
@media (max-width: 720px) { .logo .logo-star { width: 20px; height: 20px; } .logo-text b { font-size: 18px; } .brand { display: none; } }
.logo-text b { font-size: 19px; }
.logo .logo-star { width: 21px; height: 21px; }
.brand { padding-left: 10px; }
.brand span { max-width: 112px; font-size: 10.5px; }
.top { gap: 12px; }
/* Wordmark a la altura de la estrella de Oen */
.logo { gap: 8px; }
.logo .logo-star { width: 24px; height: 24px; }
.logo-text b { font-size: 15px; line-height: 1; }
.logo-text small { font-size: 9px; margin-top: 2px; line-height: 1; }

/* Latido de bienvenida (dos pulsaciones) */
@keyframes heartbeat {
  0% { transform: scale(1); } 14% { transform: scale(1.06); } 28% { transform: scale(1); }
  42% { transform: scale(1.08); } 70% { transform: scale(1); } 100% { transform: scale(1); }
}
@keyframes beat-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  12% { opacity: .55; } 30% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
  40% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 50% { opacity: .7; }
  80% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: 0; }
}
body.beat #globe-view { animation: heartbeat 1.6s ease-out; transform-origin: 50% 50%; }
.pulse-ring { position: absolute; left: 50%; top: 50%; width: min(60vh, 70%); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255, 131, 122, .8); box-shadow: 0 0 40px rgba(255, 59, 59, .45); opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.6); }
body.beat .pulse-ring { animation: beat-ring 1.6s ease-out; }

/* ===== Cielo de estrellas en toda la página: sin franjas detrás de la cabecera ni de las tarjetas ===== */
html, body { background-color: #04060A; }
body {
  background-image:
    radial-gradient(1px 1px at 82px 38px, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 101px 166px, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 210px 137px, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 24px 93px, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 149px 14px, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 232px 129px, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.2px 1.2px at 109px 19px, rgba(255,255,255,0.75), transparent), radial-gradient(1.2px 1.2px at 44px 222px, rgba(255,255,255,0.75), transparent), radial-gradient(1.2px 1.2px at 214px 35px, rgba(255,255,255,0.75), transparent), radial-gradient(1.2px 1.2px at 123px 46px, rgba(255,255,255,0.75), transparent), radial-gradient(1.2px 1.2px at 282px 217px, rgba(255,255,255,0.75), transparent), radial-gradient(1.2px 1.2px at 30px 289px, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.6px 1.6px at 126px 228px, rgba(255,255,255,0.9), transparent), radial-gradient(1.6px 1.6px at 63px 406px, rgba(255,255,255,0.9), transparent), radial-gradient(1.6px 1.6px at 50px 226px, rgba(255,255,255,0.9), transparent), radial-gradient(1.6px 1.6px at 47px 136px, rgba(255,255,255,0.9), transparent), radial-gradient(1.6px 1.6px at 296px 429px, rgba(255,255,255,0.9), transparent);
  background-size: 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px,
    380px 380px, 380px 380px, 380px 380px, 380px 380px, 380px 380px, 380px 380px,
    560px 560px, 560px 560px, 560px 560px, 560px 560px, 560px 560px;
}
.top, .filters, .cards, .foot { background: transparent; }
.foot { border-top: 0; }
.filters { border-top: 0; }

/* Noticias y vídeos en la ficha */
.f-news { display: flex; flex-direction: column; gap: 8px; }
.news { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.news:hover { border-color: var(--line-2); }
.news img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; background: #0c0d10; }
.news span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.news b { font-size: 13px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news small { font-size: 11.5px; color: var(--ink-3); }
.f-empty { margin: 0; font-size: 13px; color: var(--ink-3); }
.f-links { display: flex; gap: 8px; margin-top: 10px; }
.f-btn { flex: 1; text-align: center; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line-2); text-decoration: none; font-size: 13px; font-weight: 500; }
.f-btn:hover { background: var(--surface-2); }
.f-btn.video { background: #FF3B3B; border-color: #FF3B3B; color: #fff; }
.f-btn.video:hover { background: #e23232; }

/* Botón largo de noticias en la ficha */
.f-news-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 13px 16px; border-radius: 12px;
  background: #FF3B3B; color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; }
.f-news-btn:hover { background: #e23232; }
.f-news-btn span { transition: transform .2s; }
.f-news-btn:hover span { transform: translateX(3px); }

/* ===== Ficha sin scroll: la foto se adapta al hueco, el resto es compacto ===== */
.ficha { display: flex; flex-direction: column; overflow: hidden; }
#ficha-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.f-hero { aspect-ratio: auto; flex: 1 1 0; min-height: 90px; max-height: 320px; }
.f-content { flex: none; padding: 12px 16px 14px; }
.ficha h2 { margin: 8px 0 2px; font-size: 17px; }
.f-place { font-size: 12px; }
.f-why { margin-top: 10px; font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.f-sat { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; margin-top: 12px; }
.f-sat img { width: 112px; aspect-ratio: 16 / 10; border-radius: 8px; }
.f-sat figcaption { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.f-sat figcaption b { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.f-sat figcaption span { font-size: 11px; color: var(--ink-3); }
.f-news-btn { margin-top: 12px; padding: 11px 14px; font-size: 14px; }
.f-src { margin-top: 8px; font-size: 11.5px; text-align: center; color: var(--ink-3); }
.f-tags span { font-size: 11px; padding: 2px 8px; }
@media (max-width: 720px) { .f-hero { max-height: 52vh; } }

/* Ficha: foto superior contenida; la imagen de satélite crece y ocupa el espacio libre */
.f-hero { flex: none; height: clamp(100px, 20vh, 180px); max-height: none; }
.f-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.f-sat { flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.f-sat img { width: 100%; flex: 1; min-height: 0; aspect-ratio: auto; object-fit: cover; border-radius: 10px; }
.f-sat figcaption { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; }
.f-news-btn, .f-src { flex: none; }
@media (max-width: 720px) { .f-hero { height: clamp(120px, 24vh, 220px); max-height: none; } }

/* La imagen real desde el espacio ocupa la mitad de la ficha */
.f-hero { height: clamp(80px, 13vh, 130px); }
.f-why { -webkit-line-clamp: 3; margin-top: 8px; }
.f-sat { flex: 1 1 50%; min-height: 160px; margin-top: 10px; }
@media (max-width: 720px) { .f-hero { height: clamp(100px, 18vh, 170px); } }
@media (min-width: 721px) { .f-hero { height: clamp(70px, 11vh, 120px); } }

/* La foto catastrófica manda; el satélite es secundario: mitad del ancho + «Verlo ahora» */
.f-hero { flex: 1 1 auto; height: auto; min-height: 130px; max-height: none; }
.f-content { flex: none; display: block; }
.f-why { -webkit-line-clamp: 4; }
.f-sat { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; min-height: 0; margin-top: 12px; }
.f-sat img { width: 100%; height: auto; flex: none; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.f-sat figcaption { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; }
.f-goto { margin-top: 6px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.f-goto:hover { border-color: #fff; }
@media (min-width: 721px) { .f-hero { height: auto; } }
@media (max-width: 720px) { .f-hero { height: auto; } }

/* ===== Móvil: sin scroll en signos ni filtros, tarjetas pequeñas y menú hamburguesa ===== */
.menu-btn, .mnav { display: none; }
@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: 8px; padding: 10px var(--pad) 6px; }
  .top-ctl { margin-left: auto; }
  .menu-btn { display: grid; order: 2; width: 32px; height: 32px; }
  .menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .top-ctl { order: 1; }
  /* Signos vitales: rejilla 4 × 2, todo a la vista */
  .vitals { order: 3; flex-basis: 100%; }
  .vitals .scroller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; width: 100%; }
  .vtile, .vtile.on { height: 40px; padding: 0 4px; border-radius: 10px; margin: 0; flex-direction: column; gap: 0; min-width: 0; }
  .vtile .v-name, .vtile:not(:has(.v-val)) .v-name { font-size: 10px; gap: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .vtile:not(:has(.v-val)) .v-name { color: var(--ink); }
  .vtile .v-val { font-size: 12px; order: 1; white-space: nowrap; }
  .vtile .v-chev { display: none; }
  .vtile.on { border-color: #fff; background: var(--surface-2); }
  /* Tipos de emergencia: 8 casillas iguales, icono sobre número */
  .filters { padding: 6px var(--pad) 2px; }
  #filters-list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; overflow: visible; width: 100%; }
  #filters-list .chip { height: 40px; padding: 0; flex-direction: column; justify-content: center; gap: 0; font-size: 15px; line-height: 1.1; border-radius: 10px; min-width: 0; }
  #filters-list .chip b { font-size: 10.5px; }
  #filters-list .chip:first-child { font-size: 10px; }
  #filters-list .chip:first-child b { font-size: 10.5px; }
  /* Tarjetas: 3 y media a la vista para que se entienda que hay más */
  :root { --card-w: calc((100vw - 2 * var(--pad) - 3 * 6px) / 3.5); }
  .cards { padding: 4px 0 8px; }
  .cards .scroller { gap: 6px; }
  .card, .card.feat { width: var(--card-w); border-radius: 10px; }
  .card-img { aspect-ratio: 1 / 1; }
  .card-tag { left: 4px; top: 4px; padding: 2px 4px; font-size: 0; gap: 0; }
  .card-tag span { font-size: 12px; }
  .card-alert { right: 4px; top: 4px; font-size: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%; }
  .card-body { padding: 5px 6px 7px; gap: 1px; }
  .card-kicker { display: none; }
  .card-body strong { font-size: 10.5px; line-height: 1.25; -webkit-line-clamp: 3; }
  .card-body small { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* El pie pasa al menú */
  .foot { display: none; }
  /* Menú */
  .mnav:not([hidden]) { display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55); }
  .mnav-sheet { width: 100%; max-height: 88dvh; overflow: auto; background: var(--surface); border-top: 1px solid var(--line-2); border-radius: 18px 18px 0 0; padding: 14px var(--pad) calc(18px + env(safe-area-inset-bottom)); }
  .mnav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .mnav-head b { font-size: 15px; font-weight: 600; }
  .mnav h2 { margin: 14px 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .mnav #regions-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; border: 0; overflow: visible; }
  .mnav #regions-list .chip { height: 38px; justify-content: center; font-size: 13px; }
  .mnav .map-ctl { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  .mnav .map-ctl label, .mnav .map-ctl select { width: 100%; }
  .mnav .map-ctl select, .mnav .map-ctl .toggle { height: 38px; font-size: 13px; }
  .mnav .map-ctl .toggle { flex: 1 1 0; }
  .mnav-src { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
  .mnav-src a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-2); }
  .mnav-credits { margin-top: 16px; width: 100%; height: 40px; }
}
@media (max-width: 720px) {
  .mnav .vitals { display: block; }
  .mnav .vitals .scroller { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mnav .vtile, .mnav .vtile.on { height: 46px; flex-direction: row; justify-content: space-between; padding: 0 12px; }
  .mnav .vtile .v-name, .mnav .vtile:not(:has(.v-val)) .v-name { font-size: 12.5px; }
  .mnav .vtile .v-val { font-size: 14px; }
}

/* Mini globo de la ficha (móvil): dónde está el evento; al tocarlo, el globo vuela hasta ahí */
.f-locator { display: none; }
@media (max-width: 720px) {
  .f-locator { display: block; position: absolute; top: 10px; left: 10px; z-index: 2; width: 64px; height: 64px; padding: 0; border-radius: 50%;
    border: 1.5px solid rgba(122, 167, 255, .9); background: #0c1a2c; box-shadow: 0 0 12px rgba(122, 167, 255, .45), 0 2px 10px rgba(0, 0, 0, .6); overflow: visible; }
  .f-locator canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
  .f-locator i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }
  .f-locator i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--red); animation: loc-ping 1.6s ease-out infinite; }
  @keyframes loc-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
}