/* Agni — vidrio sobre el mapa.
   Un solo mapa a pantalla completa y, flotando encima, widgets de un mismo
   material (vidrio esmerilado) con una sola familia de radios. El azul es
   para lo que se pulsa; el naranja y el rojo, solo para el fuego. */

:root {
  color-scheme: light;

  --bg: #e9eaec;
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #a1a1a6;
  --separator: rgb(60 60 67 / 0.13);
  --fill: rgb(120 120 128 / 0.12);
  --fill-strong: rgb(120 120 128 / 0.2);
  --tint: #0071e3;
  --tint-hover: #0a7cf0;
  --tint-soft: rgb(0 113 227 / 0.12);
  --ember: #f98a2e;
  --fire: #ff3b30;
  --danger: #c9251b;
  --demo: #ff9500;

  /* Sombras en degradado: muchas capas finas, cada una el doble de difusa que
     la anterior, sin ningún borde duro. La de reposo y la de cursor tienen las
     mismas capas para que el paso de una a otra sea continuo. */
  --shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.25),
    0 1px 1px rgb(0 0 0 / 0.025),
    0 2px 3px rgb(0 0 0 / 0.03),
    0 4px 7px rgb(0 0 0 / 0.035),
    0 8px 14px rgb(0 0 0 / 0.04),
    0 14px 24px rgb(0 0 0 / 0.045),
    0 22px 36px rgb(0 0 0 / 0.045);
  --shadow-hover:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.25),
    0 1px 1px rgb(0 0 0 / 0.03),
    0 2px 4px rgb(0 0 0 / 0.035),
    0 5px 9px rgb(0 0 0 / 0.04),
    0 10px 17px rgb(0 0 0 / 0.045),
    0 17px 28px rgb(0 0 0 / 0.05),
    0 26px 38px rgb(0 0 0 / 0.055);

  --r-card: 28px;
  --r-panel: 24px;
  --r-control: 13px;
  --r-cell: 7px;
  --gap: 16px;

  /* Hueco del mapa que tapan los widgets; lo actualiza main.js. */
  --pad-left: 0px;
  --pad-right: 0px;

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font: 400 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h2, p { margin: 0; }
h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.012em; }

:focus-visible { outline: 3px solid rgb(0 113 227 / 0.45); outline-offset: 2px; }

/* ── El material ──────────────────────────────────────────────────────── */

.glass {
  position: relative;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.76), rgb(255 255 255 / 0.56));
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: var(--shadow);
}
/* Brillo especular: el reflejo de luz que recorre el borde superior. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 12% -10%, rgb(255 255 255 / 0.6), transparent 55%);
  pointer-events: none;
}
.glass > * { position: relative; }

/* Los widgets responden al cursor: se acercan apenas, sin brusquedad. */
.widget { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
@media (hover: hover) {
  .widget:hover { transform: scale(1.008); box-shadow: var(--shadow-hover); }
  .card.widget:hover { transform: scale(1.005); } /* los grandes, menos: el mismo salto en píxeles */
  .topbar.widget:hover, .map-tools.widget:hover { transform: scale(1.012); }
}

/* ── Escenario: el mapa ───────────────────────────────────────────────── */

.stage { position: fixed; inset: 0; background: var(--bg); }
.map { position: absolute; inset: 0; }

/* Pista y herramientas se centran en la parte del mapa que queda a la vista. */
.map-hint, .map-tools {
  position: absolute;
  z-index: 3;
  left: calc(var(--pad-left) + (100% - var(--pad-left) - var(--pad-right)) / 2);
}
.map-hint {
  top: 18px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100% - var(--pad-left) - var(--pad-right) - 32px));
  padding: 8px 16px;
  border-radius: 20px; /* píldora con una línea, tarjeta redonda si el texto parte */
  font-size: 13.5px;
  text-align: center;
  pointer-events: none;
}
.map-tools {
  bottom: 28px;
  translate: -50% 0; /* propiedad aparte, para no pisar el zoom del widget */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
}

.maplibregl-ctrl-group {
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 14px;
  overflow: hidden;
}
.maplibregl-ctrl-group:not(:empty) { box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 10px rgb(0 0 0 / 0.06), 0 10px 22px rgb(0 0 0 / 0.06); }
.maplibregl-ctrl-group button { width: 36px; height: 36px; }
.maplibregl-ctrl-group button + button { border-top-color: var(--separator); }
.maplibregl-ctrl-attrib { border-radius: 999px !important; /* recogidos en ⓘ; se abren al pasar el ratón (js/basemap.js) */ font: 400 11px var(--font); background: rgb(255 255 255 / 0.7) !important; }
.maplibregl-ctrl-bottom-left { left: 8px; bottom: 6px; }

/* ── Menú flotante ────────────────────────────────────────────────────── */

.left-stack {
  position: fixed;
  z-index: 10;
  top: var(--gap);
  left: var(--gap);
  width: 320px;
  max-height: calc(100% - 2 * var(--gap));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 50px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
}
.brand { font-size: 18px; font-weight: 700; letter-spacing: -0.022em; }

.menu { min-height: 0; overflow-y: auto; scrollbar-width: none; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), opacity 0.3s var(--ease); }
.menu::-webkit-scrollbar { display: none; }
.menu[inert] { opacity: 0.55; }

.float-panel { border-radius: var(--r-panel); padding: 16px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.area { color: var(--label-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.section-gap { margin-top: 18px; }
.form-error { margin-top: 10px; color: var(--danger); font-size: 13px; }
.help { margin: 12px 0 2px; color: var(--label-2); font-size: 13.5px; }

/* ── Controles ────────────────────────────────────────────────────────── */

.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fill); }
.segmented button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--label);
  font: 550 13.5px var(--font);
  letter-spacing: -0.006em;
  cursor: pointer;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.segmented button:is([aria-pressed='true'], [aria-selected='true']) {
  background: #fff;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 3px 8px rgb(0 0 0 / 0.12);
}
/* La opción elegida la marca una pastilla blanca que se desliza (js/motion.js). */
.segmented { position: relative; isolation: isolate; }
.segmented-thumb {
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 3px 8px rgb(0 0 0 / 0.12);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
  pointer-events: none;
}
.segmented[data-thumb] button:is([aria-pressed='true'], [aria-selected='true']) { background: transparent; box-shadow: none; }
.segmented-wide { display: flex; margin-top: 12px; }
.segmented-wide button { flex: 1; padding: 0 8px; white-space: nowrap; font-size: 13px; }
.tabs button { height: 36px; padding: 0 15px; font-size: 14px; }

.btn {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--label);
  font: 550 14px var(--font);
  letter-spacing: -0.008em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover:not(:disabled) { background: var(--fill-strong); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn[aria-pressed='true'] { background: var(--tint-soft); color: var(--tint); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--tint); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--tint-hover); }
.btn-block { display: block; width: 100%; margin-top: 12px; }
/* Botón para dibujar la zona: el rojo de los focos, para que sea lo primero que se vea. */
.btn-fire { background: var(--fire); color: #fff; box-shadow: 0 4px 14px rgb(255 59 48 / 0.35); }
.btn-fire:hover:not(:disabled):not([aria-pressed='true']) { background: var(--fire); filter: brightness(1.08); }
.btn-fire[aria-pressed='true'] { background: #fff; color: var(--fire); box-shadow: inset 0 0 0 2px var(--fire); }

label { display: block; color: var(--label-2); font-size: 12px; letter-spacing: -0.003em; }
input[type='number'], input[type='date'] {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 4px;
  padding: 0 10px;
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  color: var(--label);
  font: 500 14px var(--font);
  font-variant-numeric: tabular-nums;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input::placeholder { color: var(--label-3); }
input[type='number'] { appearance: textfield; -moz-appearance: textfield; }
input[type='number']::-webkit-inner-spin-button { appearance: none; }
input:is([type='number'], [type='date']):focus {
  outline: none;
  background: #fff;
  border-color: var(--tint);
  box-shadow: 0 0 0 4px rgb(0 113 227 / 0.16);
}
input[type='range'] { accent-color: var(--tint); }

/* Campo de fecha: un botón con aspecto de campo que abre el calendario propio. */
.date-field {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 4px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--fill);
  color: var(--label);
  font: 500 14px var(--font);
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.date-field:hover { background: var(--fill-strong); }
.date-field[aria-expanded='true'] { background: #fff; border-color: var(--tint); box-shadow: 0 0 0 4px rgb(0 113 227 / 0.16); }

.date-pop {
  position: fixed;
  z-index: 60;
  width: 288px;
  padding: 12px 12px 10px;
  border-radius: 22px;
  transform-origin: top left;
}
.glass.date-pop { position: fixed; background: linear-gradient(180deg, rgb(255 255 255 / 0.94), rgb(255 255 255 / 0.86)); }
.date-head { display: grid; grid-template-columns: 28px 28px 1fr 28px 28px; align-items: center; gap: 2px; margin-bottom: 6px; }
.date-title { font-size: 15px; font-weight: 650; letter-spacing: -0.012em; text-align: center; }
.date-nav {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tint);
  font: 600 17px/1 var(--font);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.date-nav:hover:not(:disabled) { background: var(--tint-soft); }
.date-nav:disabled { color: var(--label-3); cursor: default; }
.date-week, .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; }
.date-week span { padding: 2px 0 4px; color: var(--label-3); font-size: 11.5px; font-weight: 600; }
.date-day {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--label);
  font: 500 14px var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.date-day:hover:not(:disabled) { background: var(--fill); }
.date-day.is-today { color: var(--tint); font-weight: 700; }
.date-day.is-selected { background: var(--tint); color: #fff; font-weight: 650; }
.date-day:disabled { color: var(--label-3); opacity: 0.45; cursor: default; }

.radius { margin-top: 12px; }
.radius-inputs { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.radius-inputs input[type='range'] { flex: 1; min-width: 0; }
.radius-inputs input[type='number'] { width: 74px; margin-top: 0; }
.unit { color: var(--label-2); font-size: 14px; }

.area-readout { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--separator); color: var(--label-2); font-size: 13.5px; }
.area-readout strong { color: var(--label); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.area-readout.is-invalid { color: var(--danger); }

/* Con una predicción en pantalla, el menú solo recuerda la zona. */
#menu-predict.has-results :is(#pred-shape, #pred-polygon-opts, #pred-circle-opts, #pred-status) { display: none; }
#menu-predict.has-results .area-readout { margin-top: 6px; padding-top: 0; border-top: 0; }

/* ── Resultados ───────────────────────────────────────────────────────── */

/* El margen interior es del tamaño de la sombra de los widgets: si fuera menor,
   el borde de la columna la cortaría en seco. */
.results {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(656px, 48vw);
  padding: var(--gap) var(--gap) 48px 40px;
  overflow-y: auto;
  scrollbar-width: none;
}
.results::-webkit-scrollbar { display: none; }
.results[data-mode='predict'] { width: 396px; }

.close {
  position: absolute;
  z-index: 4;
  top: calc(var(--gap) + 12px);
  right: calc(var(--gap) + 12px);
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  color: var(--label-2);
  font: 600 12px var(--font);
  cursor: pointer;
  transition: transform 0.3s var(--ease), color 0.2s var(--ease);
}
.close:hover { transform: scale(1.12); color: var(--label); }

.cards { display: flex; flex-direction: column; gap: var(--gap); }
.card { border-radius: var(--r-card); padding: 24px 26px; }
.card-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; padding-right: 36px; }
.card .help { margin: 4px 0 12px; }

.reading-lead {
  max-width: 19ch;
  font-size: clamp(27px, 2.4vw, 37px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.reading-context { max-width: 58ch; margin-top: 10px; color: var(--label-2); font-size: 16px; letter-spacing: -0.008em; }
.strip { margin-top: 14px; max-width: 620px; }
.strip svg { display: block; width: 100%; height: auto; overflow: visible; }
.strip text { font-family: var(--font); font-size: 12px; fill: var(--label-2); }
.strip .strip-now { fill: var(--label); font-weight: 650; }

.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.block-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.calendar-scroll { margin-top: 14px; overflow-x: auto; }

.calendar {
  width: 100%;
  min-width: 500px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
  font-variant-numeric: tabular-nums;
}
.calendar caption, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.calendar col.col-year { width: 42px; }
.calendar col.col-total { width: 118px; }
.calendar th { color: var(--label-2); font-size: 12px; font-weight: 500; }
.calendar thead th { padding-bottom: 2px; }
.calendar tbody th { padding-right: 6px; text-align: right; }
.calendar td {
  position: relative;
  height: 22px;
  padding: 0;
  border-radius: var(--r-cell);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.calendar td.cell { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.calendar td.cell:hover { transform: scale(1.1); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 4px 10px rgb(0 0 0 / 0.14); z-index: 2; }
.calendar td.is-nodata { background: repeating-linear-gradient(135deg, transparent 0 4px, rgb(60 60 67 / 0.09) 4px 5.5px); }
.calendar td.is-noref { box-shadow: inset 0 0 0 1px rgb(60 60 67 / 0.35); }
.calendar td.is-partial { box-shadow: inset 0 0 0 1.5px var(--label); }
/* Dentro de las fechas elegidas: un punto, como los días con evento de un calendario. */
.calendar td.is-in-range::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1.5px;
  width: 3.5px;
  height: 3.5px;
  margin-left: -1.75px;
  border-radius: 50%;
  background: currentColor;
}
.calendar td.is-in-range { line-height: 19px; }

.calendar td.total { padding-left: 6px; text-align: left; overflow: visible; }
.total-inner { display: flex; align-items: center; gap: 6px; }
.total-bar { flex: none; height: 8px; min-width: 2px; background: var(--ember); border-radius: 999px; }
.total-bar.is-partial { background: repeating-linear-gradient(90deg, var(--ember) 0 3px, transparent 3px 5px); }
.total-num { color: var(--label-2); font-weight: 500; }

.calendar tfoot th { padding-right: 6px; text-align: right; }
.calendar tfoot td { height: 26px; line-height: 26px; color: var(--label-2); font-weight: 500; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; color: var(--label-2); font-size: 12.5px; }
.legend-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.legend-scale span { min-width: 44px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-align: center; white-space: nowrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { position: relative; width: 20px; height: 14px; border-radius: 5px; background: rgb(120 120 128 / 0.1); }
.legend-swatch.is-nodata { background: repeating-linear-gradient(135deg, transparent 0 4px, rgb(60 60 67 / 0.16) 4px 5.5px); box-shadow: inset 0 0 0 0.5px var(--separator); }
.legend-swatch.is-noref { box-shadow: inset 0 0 0 1px rgb(60 60 67 / 0.35); }
.legend-swatch.is-partial { box-shadow: inset 0 0 0 1.5px var(--label); }
.legend-swatch.is-in-range::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--label); }

.downloads { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--separator); }
.downloads p { max-width: 40ch; color: var(--label-2); font-size: 14px; }
.download-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.tooltip {
  position: absolute;
  z-index: 5;
  min-width: 196px;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}
.tooltip strong { display: block; margin-bottom: 2px; font-weight: 650; }
.tooltip span { display: block; color: var(--label-2); }

/* ── Focos previstos ──────────────────────────────────────────────────── */

.foci { margin: 0; padding: 0; list-style: none; }
.foci > li { border-radius: 18px; background: rgb(255 255 255 / 0.55); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 3px 8px rgb(0 0 0 / 0.03); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.4s var(--ease); }
.foci > li + li { margin-top: 6px; }
@media (hover: hover) { .foci > li:hover { transform: scale(1.01); } }
.foci > li.is-open { background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.04), 0 8px 20px rgb(0 0 0 / 0.07); }

.focus-row {
  display: grid;
  grid-template-columns: 20px 58px 1fr 14px;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 18px;
  background: none;
  color: var(--label);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.focus-rank { color: var(--label-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.focus-prob { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.focus-meter { height: 6px; background: var(--fill); border-radius: 999px; overflow: hidden; }
.focus-meter i { display: block; height: 100%; background: var(--fire); border-radius: 999px; }
.focus-chevron { color: var(--label-3); font-size: 16px; line-height: 1; transition: transform 0.35s var(--ease); }
.is-open .focus-chevron { transform: rotate(90deg); }
.focus-coords { grid-column: 2 / -1; margin-top: 2px; color: var(--label-2); font-size: 12px; font-variant-numeric: tabular-nums; }

/* El detalle se despliega con una fila de rejilla que pasa de 0 a 1fr. */
.focus-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.is-open .focus-detail { grid-template-rows: 1fr; }
.focus-detail-inner { min-height: 0; overflow: hidden; }
.focus-detail-body { padding: 4px 14px 14px; }
.detail-title { font-size: 13px; font-weight: 650; }
.factors-info summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; }
.factors-info summary::-webkit-details-marker { display: none; }
.info-i { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  border: 1.3px solid var(--label-2); color: var(--label-2); font: italic 700 11px/1 Georgia, serif; }
.factors-info summary:hover .info-i, .factors-info[open] .info-i { background: var(--label); border-color: var(--label); color: #fff; }
.info-body { margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgb(60 60 67 / 0.06);
  color: var(--label-2); font-size: 12px; line-height: 1.45; }
.info-body ul { margin: 4px 0 0; padding-left: 16px; }
.info-body b { color: var(--label); font-weight: 600; }
#results .factors-info { margin: 6px 0 10px; }
.detail-note { margin-top: 10px; color: var(--label-2); font-size: 12px; }

.factors { margin: 8px 0 0; padding: 0; list-style: none; }
.factors li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 4px; align-items: baseline; }
.factors li + li { margin-top: 9px; }
.factor-name { font-size: 13px; }
.factor-name small { color: var(--label-2); font-size: 12px; margin-left: 4px; }
.factor-share { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.factor-bar { grid-column: 1 / -1; height: 5px; background: var(--fill); border-radius: 999px; overflow: hidden; }
.factor-bar i { display: block; height: 100%; background: var(--ember); border-radius: 999px; }

/* Etiqueta de cada foco sobre el mapa */
.focus-chip {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--fire);
  color: #fff;
  font: 700 12.5px var(--font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 4px 12px rgb(0 0 0 / 0.28);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), scale 0.25s var(--ease);
}
.focus-chip:hover { scale: 1.12; }
.focus-chip.is-current { background: #fff; color: var(--danger); scale: 1.15; }

/* ── Widgets que se amplían ───────────────────────────────────────────── */

.card[id] { cursor: zoom-in; }
.card[id] :is(button, .calendar-scroll, .foci) { cursor: auto; }
.card[id] button { cursor: pointer; }

.expand-btn {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--label-2);
  opacity: 0;
  transition: opacity 0.3s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.glass > .expand-btn { position: absolute; }
.expand-btn svg { width: 14px; height: 14px; }
.card:hover .expand-btn, .expand-btn:focus-visible { opacity: 1; }
.expand-btn:hover { background: var(--fill-strong); color: var(--label); }
/* El primer widget comparte esquina con el botón de cerrar los resultados. */
.cards > .card:first-child .expand-btn { right: 52px; }
@media (hover: none) { .expand-btn { opacity: 1; } }

.expand-backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  background: rgb(245 245 247 / 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
.expand {
  position: fixed;
  z-index: 51;
  inset: 0;
  margin: auto;
  width: min(1120px, 92vw);
  height: min(780px, 88vh);
  border-radius: 34px;
  overflow: hidden;
  transform-origin: center;
}
.glass.expand { position: fixed; background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.84)); } /* más opaco: aquí se lee */
.expand .close { top: 18px; right: 18px; }
.expand-body { height: 100%; padding: 34px 40px 36px; overflow-y: auto; scrollbar-width: none; }
.expand-body::-webkit-scrollbar { display: none; }

.expand-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-right: 44px; }
.expand-title { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.026em; padding-right: 44px; }
.expand-head .expand-title { padding-right: 0; }
.expand-lead { max-width: 74ch; margin-top: 10px; color: var(--label-2); font-size: 17px; letter-spacing: -0.01em; }
.expand-note { max-width: 78ch; margin-top: 14px; color: var(--label-2); font-size: 14px; }
.expand-pane { margin-top: 18px; }

/* Gráfica del mes, año a año */
.chart { margin-top: 20px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--label-2); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: rgb(60 60 67 / 0.1); stroke-width: 1; }
.chart .axis { stroke: rgb(60 60 67 / 0.3); stroke-width: 1; }
.chart .middle { fill: rgb(60 60 67 / 0.07); }
.chart .bar { fill: #c7c7cc; transition: fill 0.2s var(--ease); }
.chart .bar:hover { fill: #a1a1a6; }
.chart .bar.is-current { fill: var(--ember); }
.chart .bar.is-current:hover { fill: #e2700f; }
.chart .bar-raw { fill: rgb(60 60 67 / 0.08); stroke: #8e8e93; stroke-width: 1.2; stroke-dasharray: 3 2; }
.chart .bar-raw:hover { fill: rgb(60 60 67 / 0.18); }
.key-bar.is-raw { background: rgb(60 60 67 / 0.08); border: 1.2px dashed #8e8e93; }
.chart .median { stroke: var(--label); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .median-label, .chart .value, .chart .tick.is-current { fill: var(--label); font-weight: 650; }

.chart-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--label-2); font-size: 13px; }
.chart-key li { display: inline-flex; align-items: center; gap: 7px; }
.key-bar { width: 10px; height: 14px; border-radius: 3px 3px 0 0; background: #c7c7cc; }
.key-bar.is-current { background: var(--ember); }
.key-line { width: 18px; height: 0; border-top: 1.5px dashed var(--label); }
.key-band { width: 18px; height: 12px; border-radius: 3px; background: rgb(60 60 67 / 0.1); }

/* Calendario en grande y mapa de barras */
.calendar-large { border-spacing: 4px; }
.calendar-large td { height: 25px; line-height: 25px; font-size: 12.5px; border-radius: 8px; }
.calendar-large td.is-in-range { line-height: 22px; }
.calendar-large th { font-size: 13px; }
.calendar-large col.col-total { width: 160px; }
.bars-map { position: relative; height: min(520px, 58vh); border-radius: 24px; overflow: hidden; background: var(--bg); }
.bars-popup .maplibregl-popup-content { padding: 6px 12px; border-radius: 999px; font: 600 13px var(--font); box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 8px 20px rgb(0 0 0 / 0.1); }
.bars-popup .maplibregl-popup-tip { display: none; }
.bars-tools { position: absolute; z-index: 3; bottom: 14px; left: 50%; translate: -50% 0; padding: 5px; border-radius: 999px; }

/* Ficha de un foco */
.sheet-layout { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 22px; align-items: start; }
.sheet-list { margin: 0; padding: 0; list-style: none; }
.sheet-list li + li { margin-top: 6px; }
.sheet-row {
  display: grid;
  grid-template-columns: 20px 58px 1fr;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.5);
  color: var(--label);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sheet-row:hover { background: rgb(255 255 255 / 0.8); }
.sheet-row[aria-pressed='true'] { background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.04), 0 8px 20px rgb(0 0 0 / 0.07); }
.sheet { padding: 24px 28px; border-radius: 26px; background: rgb(255 255 255 / 0.72); }
.sheet-kicker { color: var(--label-2); font-size: 14px; }
.sheet-number { display: flex; align-items: center; gap: 14px; font-size: 64px; font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.risk { padding: 5px 12px; border-radius: 999px; background: rgb(255 59 48 / 0.12); color: var(--danger); font-size: 14px; font-weight: 650; letter-spacing: -0.005em; }
.risk-moderate { background: rgb(249 138 46 / 0.16); color: #9a4a00; }
.risk-low { background: var(--fill); color: var(--label-2); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 18px 0 0; }
.facts dt { color: var(--label-2); font-size: 12.5px; }
.facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 550; font-variant-numeric: tabular-nums; }
.sheet-factors { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--separator); }
.sheet-factors .detail-title { font-size: 15px; }
.sheet-factors .factor-name, .sheet-factors .factor-share { font-size: 14.5px; }
.sheet-factors .factor-bar { height: 7px; }
.sheet-factors .factors li + li { margin-top: 12px; }

/* ── Aviso de demostración: un punto en la esquina ────────────────────── */

.demo-dot {
  position: fixed;
  z-index: 40;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--demo);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85), 0 0 8px 1px rgb(255 149 0 / 0.7);
  cursor: help;
}

/* Aviso de arranque fallido (index.html) */
.boot-problem {
  position: fixed;
  z-index: 100;
  inset: 0;
  width: min(440px, calc(100% - 32px));
  height: fit-content;
  margin: auto;
  padding: 20px 22px;
  border-radius: 24px;
  font-size: 15px;
  line-height: 1.5;
}
.glass.boot-problem { position: fixed; }
.boot-problem strong { display: block; margin-bottom: 4px; font-size: 17px; }
.boot-problem code { padding: 1px 6px; border-radius: 6px; background: var(--fill); font: 500 13.5px ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Pantallas estrechas ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  html, body { height: auto; }
  body { overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px; }
  .left-stack { display: contents; }
  .topbar { order: 0; }
  .stage { order: 1; position: relative; height: 56vh; min-height: 320px; border-radius: var(--r-card); overflow: hidden; }
  .menu { order: 2; overflow: visible; }
  .results { order: 3; position: relative; width: auto; padding: 0; overflow: visible; }
  .expand { width: calc(100vw - 24px); height: calc(100dvh - 24px); }
  .expand-body { padding: 22px 18px; }
  .sheet-layout { grid-template-columns: 1fr; }
  .results[data-mode='predict'] { width: auto; }
  .close { top: 12px; right: 12px; }
  .card { padding: 20px 18px; }
  .legend-scale span { min-width: 38px; }
}

/* Dibujando un rectángulo (sobre todo en el móvil): la página no se desplaza con el dedo. */
html.is-drawing, html.is-drawing body { overflow: hidden; overscroll-behavior: none; }
html.is-drawing .map, html.is-drawing .map canvas { touch-action: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .widget:hover, .card.widget:hover, .topbar.widget:hover, .map-tools.widget:hover, .foci > li:hover, .calendar td.cell:hover { transform: none; }
}

/* ── Accesibilidad (js/a11y.js) ───────────────────────────────────────── */

.a11y-btn {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: var(--fill); color: var(--label); cursor: pointer;
}
.bar-tools { display: flex; gap: 4px; margin-right: auto; }
.a11y-btn svg { width: 20px; height: 20px; }
.a11y-btn:hover, .a11y-btn[aria-expanded='true'] { background: var(--tint); color: #fff; }
.a11y-panel { margin: 0; min-inline-size: 0; display: grid; gap: 10px; }
.a11y-panel legend { float: left; width: 100%; margin-bottom: 2px; padding: 0; }
.a11y-option { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.a11y-option input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--tint); flex-shrink: 0; }
.a11y-option b { display: block; font-size: 14px; font-weight: 600; }
.a11y-option small { display: block; color: var(--label-2); font-size: 12px; }

/* Daltonismo: los acentos de fuego pasan a Okabe-Ito (el mapa lo cambia js/a11y.js). */
html.a11y-colorblind { --fire: #d55e00; --ember: #e69f00; }

/* Alto contraste: texto negro, paneles opacos con borde y foco del teclado bien visible. */
html.a11y-contrast {
  --label: #000; --label-2: #1c1c1e; --label-3: #3a3a3c;
  --separator: rgb(0 0 0 / 0.55); --fill: rgb(0 0 0 / 0.1); --fill-strong: rgb(0 0 0 / 0.2);
  --tint: #0040a8; --tint-hover: #00338a; --tint-soft: rgb(0 64 168 / 0.15); --fire: #b80000;
}
html.a11y-contrast .glass, html.a11y-contrast .maplibregl-ctrl-group {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 2px solid #000;
}
html.a11y-contrast .glass::before { display: none; }
html.a11y-contrast .btn, html.a11y-contrast .segmented, html.a11y-contrast input:not([type='checkbox']) { box-shadow: inset 0 0 0 1.5px #000; }
html.a11y-contrast :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }

/* Letra grande: los paneles crecen un 20 % (el mapa no). */
html.a11y-large .left-stack, html.a11y-large .results, html.a11y-large .expand,
html.a11y-large .map-tools, html.a11y-large .map-hint { zoom: 1.2; }

/* ── Noticias de un foco del histórico (popup del mapa) ───────────────── */
.maplibregl-popup-content { border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); font: 13px/1.4 var(--font); color: var(--label); }
.news-head { font-weight: 650; font-size: 14px; }
.news-place { color: var(--label-2); margin-top: 2px; }
.news-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.news-list a { color: var(--tint); font-weight: 600; text-decoration: none; }
.news-list a:hover { text-decoration: underline; }
.news-list small { display: block; color: var(--label-2); font-size: 11.5px; margin-top: 1px; }
.news-note { margin-top: 10px; color: var(--label-2); font-size: 12px; }
.news-note a { color: var(--tint); }