/* Mapa a pantalla completa; paneles de vidrio oscuro flotando encima */
:root {
  --glass: rgba(14, 20, 22, 0.78);
  --glass-strong: rgba(14, 20, 22, 0.9);
  --ink: #eef3f1;
  --muted: #9fb0aa;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #ff6a2b;       /* incendio */
  --schist: #7fa2b0;       /* esquisto del cabo */
  --f-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: #0b1012; color: var(--ink); font: 14px/1.45 var(--f-body); overflow: hidden }
#map { position: fixed; inset: 0 }

.brand { position: fixed; left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 22px rgba(0, 0, 0, .6) }
.brand h1 { margin: 2px 0 0; font: 700 clamp(26px, 3.6vw, 46px)/1 var(--f-display); letter-spacing: -0.015em; text-wrap: balance; max-width: 14ch }
.eyebrow { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.6) }

.panel { position: fixed; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); width: 300px;
  max-height: calc(100% - 120px); display: flex; flex-direction: column; background: var(--glass); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; z-index: 3 }
.panel-toggle { display: none }
.panel-body { overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 16px }
.panel h2 { margin: 0 0 8px; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }

.seg { display: inline-flex; background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 3px; gap: 2px }
.seg button, .ghost, .places button, .panel-toggle { font: 500 13px var(--f-body); color: var(--ink); background: transparent; border: 0;
  border-radius: 4px; padding: 6px 11px; cursor: pointer }
.seg button[aria-pressed="true"] { background: var(--ink); color: #0e1416 }
.ghost { border: 1px solid var(--line) }
.ghost[aria-pressed="true"] { border-color: var(--accent); color: var(--accent) }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.layers { display: flex; flex-direction: column; gap: 2px }
.layer { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 6px }
.layer:hover { background: rgba(255, 255, 255, .05) }
.layer input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0 }
.layer label { cursor: pointer }
.layer small { display: block; color: var(--muted); font-size: 12px }
.layer input[type=range] { grid-column: 2 / 4; width: 100%; accent-color: var(--accent); height: 14px }
.layer input[type=range][hidden] { display: none }
.sw { width: 26px; height: 10px; border-radius: 2px }

.slider { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; color: var(--muted); font-size: 13px }
.slider output { font-family: var(--f-mono); color: var(--ink); margin-left: 6px }
.slider input { accent-color: var(--accent) }

.places { display: flex; flex-wrap: wrap; gap: 6px }
.places button { border: 1px solid var(--line); padding: 5px 9px; font-size: 12.5px }
.places button:hover { border-color: var(--schist) }

.legend { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px }
.legend h3 { margin: 0; font: 600 13px var(--f-body) }
.legend .grad { height: 10px; border-radius: 2px }
.legend .ticks { display: flex; justify-content: space-between; font: 11px var(--f-mono); color: var(--muted) }
.legend .cls { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px }
.legend .cls div { display: flex; gap: 8px; align-items: center }
.legend p { margin: 0; color: var(--muted); font-size: 12px }

.readout { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 74px);
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 6px; padding: 7px 11px; font: 12.5px var(--f-mono);
  font-variant-numeric: tabular-nums; z-index: 2 }
.facts { background: var(--glass); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; backdrop-filter: blur(10px); position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 18px);
  display: flex; gap: 22px; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); pointer-events: none }
.facts div { display: flex; flex-direction: column }
.facts b { font: 700 19px var(--f-display); font-variant-numeric: tabular-nums }
.facts span { font: 11px var(--f-mono); color: #d0dbd7 }
.credits { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom)); font-size: 10.5px;
  color: #c3cfcb; text-shadow: 0 1px 6px rgba(0, 0, 0, .9) }
.credits a { color: inherit }

.maplibregl-ctrl-group { background: var(--glass-strong) !important; border: 1px solid var(--line) }
.maplibregl-ctrl-group button + button { border-top-color: var(--line) !important }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) }
.maplibregl-ctrl-attrib { display: none }
.maplibregl-ctrl-scale { background: rgba(14, 20, 22, .7); color: var(--ink); border-color: var(--ink); font-family: var(--f-mono) }
.maplibregl-popup-content { background: var(--glass-strong); color: var(--ink); font: 13px var(--f-body); border-radius: 8px; padding: 10px 12px }
.maplibregl-popup-tip { border-top-color: var(--glass-strong) !important; border-bottom-color: var(--glass-strong) !important }

@media (max-width: 760px) {
  .brand h1 { font-size: 24px }
  .panel { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    width: auto; max-height: 62% }
  .panel-toggle { display: block; width: 100%; text-align: left; padding: 12px 16px; font-weight: 600 }
  .panel[data-collapsed="true"] .panel-body { display: none }
  .facts, .credits { display: none }
  .readout { bottom: auto; top: calc(max(16px, env(safe-area-inset-top)) + 70px) }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* Simulacro */
.sim { border: 1px solid rgba(255, 106, 43, .35); background: rgba(255, 106, 43, .07); border-radius: 8px; padding: 12px }
.fire { width: 100%; font: 600 14px var(--f-body); color: #1b0b03; background: var(--accent); border: 0; border-radius: 6px; padding: 9px 12px; cursor: pointer }
.fire[aria-pressed="true"] { background: #ffd0b8 }
.sim-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted) }
.sim-grid select { font: 13px var(--f-body); color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: 4px; padding: 5px 6px; min-width: 0 }
.sim-grid select option { background: #172022 }
.sim-status { margin: 10px 0 0; font-size: 12.5px; color: var(--muted) }
.picking .maplibregl-canvas { cursor: crosshair !important }

.timeline { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); width: min(720px, calc(100% - 32px));
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px 14px; align-items: center; background: var(--glass-strong);
  border: 1px solid rgba(255, 106, 43, .45); border-radius: 10px; padding: 10px 14px; z-index: 4; backdrop-filter: blur(14px) }
.timeline[hidden] { display: none }
.timeline #tlPlay { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--accent); color: #1b0b03; font-size: 13px; cursor: pointer }
.timeline input { accent-color: var(--accent); width: 100%; min-width: 0 }
.tl-stats { display: flex; gap: 14px; font: 13px var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.tl-stats b { font-family: var(--f-display); font-size: 16px }
.tl-note { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--muted) }
.ignition { width: 18px; height: 18px; border-radius: 50%; background: #ffdd57; box-shadow: 0 0 0 3px rgba(255, 106, 43, .9), 0 0 18px 6px rgba(255, 120, 40, .8);
  animation: pulse 1.4s ease-in-out infinite }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 106, 43, .6), 0 0 28px 10px rgba(255, 120, 40, .55) } }
@media (max-width: 760px) {
  .timeline { grid-template-columns: auto 1fr; bottom: auto; top: calc(max(16px, env(safe-area-inset-top)) + 110px) }
  .tl-stats { grid-column: 1 / -1 }
}

/* Línea de tiempo v2: pista con horas, cifras, velocidad y barras por hora */
.timeline { width: min(860px, calc(100% - 32px)); grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas:
  "play track stats side" "bars bars bars bars" "note note note note"; gap: 8px 16px; padding: 12px 16px 10px; left: calc(50% - 160px) }
.timeline #tlPlay { grid-area: play }
.tl-track { grid-area: track; position: relative; padding-bottom: 16px; min-width: 0 }
.tl-ticks { position: absolute; left: 8px; right: 8px; bottom: 0; height: 14px }
.tl-ticks span { position: absolute; transform: translateX(-50%); font: 10.5px var(--f-mono); color: var(--muted); white-space: nowrap }
.tl-ticks span::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 5px; background: var(--muted) }
.tl-stats { grid-area: stats; flex-direction: column; gap: 0; line-height: 1.3 }
.tl-stats b { font-size: 22px }
.tl-side { grid-area: side; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted) }
.tl-side select { font: 12.5px var(--f-body); color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: 4px; padding: 4px }
.tl-side select option { background: #172022 }
.tl-bars { grid-area: bars; display: flex; gap: 6px; align-items: flex-end; height: 64px }
.tl-bars .bar { flex: 1; display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; opacity: .35; transition: opacity .3s }
.tl-bars .bar.on { opacity: 1 }
.tl-bars .bar i { align-self: end; display: block; border-radius: 3px 3px 0 0 }
.tl-bars .bar b { font: 600 11px var(--f-mono); font-variant-numeric: tabular-nums }
.tl-bars .bar span { font: 10px var(--f-mono); color: var(--muted) }
.timeline .tl-note { grid-area: note }
@media (max-width: 760px) {
  .timeline { left: 50%; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play track" "stats stats" "side side" "bars bars" "note note" }
  .tl-stats { flex-direction: row; gap: 12px }
  .tl-side { flex-direction: row; align-items: center }
}

#humo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1 }

/* Condiciones del simulacro */
.sim-grid input { font: 13px var(--f-mono); color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid var(--line);
  border-radius: 4px; padding: 4px 6px; width: 100%; min-width: 0 }
.sim-grid input[type=number] { width: 64px }
.sim-grid .unit { display: flex; align-items: center; gap: 6px; font-size: 12px }
.meteo-btn { width: 100%; margin-top: 8px; font-size: 12.5px }
.cond { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px }
.cond summary { cursor: pointer; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.risk { margin-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px }
.risk:empty { display: none }
.risk dt { color: var(--muted) }
.risk dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums }
.risk .pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font: 600 11.5px var(--f-body); color: #1b0b03 }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap }
.lang button { padding: 4px 9px; font-size: 12px }
.doc-link { color: var(--ink); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent) }

.pop { margin-top: 6px; border-collapse: collapse; font-size: 12.5px }
.pop td { padding: 2px 10px 2px 0 } .pop td:last-child { font-family: var(--f-mono); padding-right: 0 }
.pop td:first-child { color: var(--muted) }
.sim-grid .chk input { width: 16px; height: 16px; accent-color: var(--accent) }

/* Laboratorio, mapa de peligro y accesos */
.lab, .riskmap { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px }
.lab .row { flex-wrap: nowrap } .lab .ghost { flex: 1; font-size: 12.5px }
.lab select { font: 12.5px var(--f-body); color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 4px; padding: 4px }
.lab select option { background: #172022 }
.lab .ghost[aria-pressed="true"] { border-color: #7cfc9a; color: #7cfc9a }
.hint2 { margin: 0; font-size: 12px; color: var(--muted) }
.risk-top { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px }
.risk-top button { width: 100%; display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; text-align: left; background: rgba(255,255,255,.04);
  border: 1px solid var(--line); color: var(--ink); border-radius: 4px; padding: 5px 8px; cursor: pointer; font: inherit }
.risk-top button:hover { border-color: var(--accent) }
.risk-top b { font-family: var(--f-mono); color: var(--accent) }
.risk-top span:last-child { font-family: var(--f-mono); color: var(--muted) }
.progress { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; margin-top: 6px }
.progress i { display: block; height: 100%; background: var(--accent); width: 0 }
.roads { position: fixed; left: max(16px, env(safe-area-inset-left)); top: calc(max(16px, env(safe-area-inset-top)) + 120px); width: 300px; z-index: 3;
  background: var(--glass-strong); border: 1px solid rgba(255, 90, 60, .45); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; backdrop-filter: blur(12px) }
.roads[hidden] { display: none }
.roads h3 { margin: 0 0 6px; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.roads ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px }
.roads #townList { margin-bottom: 8px }
.roads li { display: flex; justify-content: space-between; gap: 10px }
.roads li .t { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.roads li.cut { color: #ff8a70 } .roads li.iso { color: #fff; font-weight: 600 } .roads li.iso .t { color: #ff5a3c }
.roads li.future { color: var(--muted) }
.roads li.ok { color: #9ed9a8 }
@media (max-width: 760px) { .roads { top: auto; bottom: 200px; width: auto; right: max(12px, env(safe-area-inset-right)) } }

/* Rosa de los vientos */
.windbox { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px }
.windhead { display: flex; flex-direction: column; gap: 2px }
.wlabel { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.wread { font: 600 14px var(--f-body); color: var(--ink) }
#rose { width: 100%; max-width: 220px; align-self: center; cursor: crosshair; touch-action: none; user-select: none }
#rose:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50% }
.center { text-align: center }
.beaufort { font: 12px var(--f-mono); color: var(--muted); text-align: right }
.rotate { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px }
.rotate .ghost { font-size: 12.5px; padding: 6px 8px }
.rotate #north { grid-column: 1 / -1 }

/* Barra de incendio sobre el mapa */
.firebar { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 700px);
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 10px; padding: 6px; backdrop-filter: blur(14px) }
.firebar button { font: 500 13px var(--f-body); color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 11px; cursor: pointer; white-space: nowrap }
.firebar button:hover:not(:disabled) { border-color: var(--accent) }
.firebar button:disabled { opacity: .4; cursor: default }
.firebar button[aria-pressed="true"] { background: #ffd0b8; color: #1b0b03; border-color: #ffd0b8 }
.firebar .fb-main { background: var(--accent); color: #1b0b03; border-color: var(--accent); font-weight: 600 }
.fb-hint { flex-basis: 100%; text-align: center; font-size: 12px; color: #ffd9c7 }
.fb-hint:empty { display: none }
/* Control de vista en el mapa */
.viewctl button { width: 30px; height: 30px; font: 600 14px var(--f-body); color: #eef3f1 !important; display: grid; place-items: center }
.viewctl button[aria-pressed="true"] { color: var(--accent) !important }
.wchanges { display: flex; flex-direction: column; gap: 4px; font-size: 12px }
.wchanges:empty { display: none }
.wchanges div { display: flex; justify-content: space-between; align-items: center; gap: 6px; background: rgba(255,255,255,.05); border-radius: 4px; padding: 3px 6px }
.wchanges button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px }
.tl-ticks .wmark { position: absolute; top: -22px; transform: translateX(-50%); font-size: 12px; color: #9fd6ff }
.ignition .num { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 700 11px var(--f-mono); color: #fff;
  text-shadow: 0 0 3px #000, 0 0 6px #000; white-space: nowrap }
@media (max-width: 1180px) { .firebar { max-width: calc(100% - 360px); left: calc(50% - 150px) } }
@media (max-width: 760px) { .firebar { top: auto; bottom: 74px; left: 50%; max-width: calc(100% - 24px) } .fb-hint { display: none } }

/* Controles del mapa: columna a la izquierda, a media altura (no los tapa el panel) */
.maplibregl-ctrl-bottom-left { top: 50%; bottom: auto; transform: translateY(-50%); left: max(4px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 0 }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 6px 0 0 12px }
@media (max-width: 760px) { .maplibregl-ctrl-bottom-left { top: 38% } }

.prob-legend { display: flex; flex-direction: column; gap: 3px; font-size: 12px; margin-top: 6px }
.prob-legend div { display: flex; gap: 8px; align-items: center }
.prob-legend i { width: 22px; height: 10px; border-radius: 2px; display: inline-block }
.ens-stats { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; margin-top: 8px }
.ens-stats dt { color: var(--muted) } .ens-stats dd { margin: 0; font-family: var(--f-mono) }

.brand .subtitle { margin-top: 6px; font: 700 clamp(15px, 1.6vw, 21px)/1.1 var(--f-display); color: var(--accent); letter-spacing: .02em;
  text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 16px rgba(0,0,0,.5) }
/* Leyenda flotante sobre el mapa, encima de la cota */
.maplegend { position: fixed; left: max(70px, calc(env(safe-area-inset-left) + 70px)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 124px);
  width: 270px; z-index: 3; background: var(--glass-strong); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  backdrop-filter: blur(12px); border-top: 1px solid var(--line) }
.maplegend[hidden] { display: none }
@media (max-width: 760px) { .maplegend { left: 12px; right: 12px; width: auto; bottom: auto; top: 140px } }

/* ===== Reordenación del visor ===== */
/* Título: tarjeta compacta y legible */
.brand { background: linear-gradient(180deg, rgba(10,14,16,.82), rgba(10,14,16,.62)); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px 11px; backdrop-filter: blur(10px); text-shadow: none; max-width: 330px }
.brand .eyebrow { font-size: 9.5px; color: var(--muted); text-shadow: none }
.brand h1 { font-size: clamp(22px, 2.1vw, 28px); max-width: none; white-space: nowrap; margin-top: 3px }
.brand .subtitle { font-size: 12.5px; margin-top: 5px; text-shadow: none; letter-spacing: .12em }
.roads { top: calc(max(16px, env(safe-area-inset-top)) + 104px); width: 330px }

/* Línea de tiempo compacta, entre la leyenda y el panel */
.timeline { left: 380px; right: 336px; transform: none; width: auto; bottom: max(12px, env(safe-area-inset-bottom));
  grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "play track stats side info" "bars bars bars bars bars";
  gap: 4px 12px; padding: 8px 12px 6px }
.timeline #tlPlay { width: 30px; height: 30px; font-size: 11px }
.tl-track { padding-bottom: 13px }
.tl-ticks span { font-size: 9.5px }
.tl-stats { font-size: 11.5px; line-height: 1.25 }
.tl-stats b { font-size: 17px }
.tl-side { flex-direction: row; align-items: center; gap: 6px; font-size: 0 }
.tl-side label { display: none }
.tl-side select, .tl-side .ghost { font-size: 11.5px; padding: 4px 7px }
.tl-info { grid-area: info; align-self: center; cursor: help; color: var(--muted); font-size: 16px }
.tl-info:focus-visible { outline: 2px solid var(--accent); border-radius: 50% }
.tl-bars { height: 34px; gap: 4px }
.tl-bars .bar { grid-template-rows: 1fr auto; }
.tl-bars .bar b { font-size: 9.5px } .tl-bars .bar span { display: none }
.timeline .tl-note { display: none }
/* Con incendio: fuera las cifras del parque, la cota sube */
body.sim-on .facts { display: none }
body.sim-on .readout { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 18px) }
body.sim-on .maplegend { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px) }
@media (max-width: 1180px) { .timeline { left: 16px; right: 336px } }
@media (max-width: 760px) { .timeline { left: 12px; right: 12px; top: auto; bottom: 120px; grid-template-columns: auto minmax(0,1fr); grid-template-areas: "play track" "stats stats" "side side" "bars bars" } .brand h1 { white-space: normal } }
.brand { max-width: none; width: max-content }
.timeline { grid-template-columns: auto minmax(240px, 1fr) auto auto auto }
.tl-stats { max-width: 230px } .tl-stats span { white-space: normal }
body.sim-on .credits { display: none }

/* Panel de capas flotante, junto a los controles del mapa */
.layerpop { position: fixed; left: 62px; top: 50%; transform: translateY(-50%); width: 290px; max-height: 70vh; overflow-y: auto; z-index: 5;
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 14px; backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 12px }
.layerpop[hidden] { display: none }
.layerpop section { display: flex; flex-direction: column; gap: 4px }
.layerpop h2 { margin: 0 0 4px; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.lp-head { display: flex; justify-content: space-between; align-items: center }
.lp-close { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1 }
.windhint { color: #ffd9c7 } .windhint:empty { display: none }
@media (max-width: 760px) { .layerpop { left: 12px; right: 12px; width: auto; top: 120px; transform: none } }

/* Recalculando: aviso sobre la línea de tiempo */
.tl-busy { display: none }
.timeline.busy .tl-busy { display: flex; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; gap: 10px;
  background: rgba(10,14,16,.72); border-radius: 10px; font: 600 14px var(--f-body); color: #ffd9c7 }
.timeline.busy .tl-busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffd9c7; border-top-color: transparent;
  animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* Botón de capas destacado */
.layersbtn { position: fixed; left: max(16px, env(safe-area-inset-left)); top: calc(50% - 232px); z-index: 4;
  font: 600 13px var(--f-body); color: var(--ink); background: var(--glass-strong); border: 1px solid var(--accent); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; backdrop-filter: blur(10px) }
.layersbtn[aria-pressed="true"] { background: var(--accent); color: #1b0b03 }
.layerpop { top: calc(50% - 190px); transform: none }
@media (max-width: 760px) { .layersbtn { top: 120px } .layerpop { top: 165px } }
/* Leyenda de colores de la línea de tiempo */
.tl-legend { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted); flex-wrap: wrap }
.tl-grad { width: 90px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, #3a0d12, #6e1424, #a8202a, #d8461e, #f6861f, #ffc93d) }
.tl-bars .bar span { display: block; font-size: 9px }
.tl-bars { height: 40px }

.firebar .layersbtn { position: static; backdrop-filter: none; padding: 7px 11px; border-color: var(--line); margin-right: 6px;
  border-right: 1px solid var(--line) }
.firebar .layersbtn[aria-pressed="true"] { background: #ffd0b8; color: #1b0b03; border-color: #ffd0b8 }
.layerpop { top: 76px; left: 62px; max-height: calc(100vh - 240px) }
/* Barra superior en una línea, a la derecha del título */
.firebar { left: 412px; right: auto; transform: none; max-width: calc(100% - 412px - 330px); flex-wrap: nowrap; gap: 4px; padding: 5px }
.firebar button { font-size: 12.5px; padding: 6px 9px }
.layerpop { top: 116px }
@media (max-width: 1180px) { .firebar { left: 16px; top: 118px; max-width: calc(100% - 360px); flex-wrap: wrap } .layerpop { top: 170px } }
@media (max-width: 760px) { .firebar { left: 12px; right: 12px; top: auto; bottom: 74px; max-width: none } }

/* Las marcas de horas y de cambios de viento no deben robar el ratón al deslizador */
.tl-ticks, .tl-ticks * { pointer-events: none; user-select: none }
.timeline { user-select: none }
.tl-track input { position: relative; z-index: 1 }

/* Usuario y ventana de acceso */
.userbox { display: flex; align-items: center; gap: 8px; font-size: 12.5px }
.userbox[hidden] { display: none }
.userbox img { width: 24px; height: 24px; border-radius: 50% }
.userbox .un { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.userbox .ghost { font-size: 12px; padding: 4px 9px }
.loginmodal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5,8,10,.6); backdrop-filter: blur(3px);
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)) }
.loginmodal[hidden] { display: none }
.lm-card { width: min(400px, 100%); background: var(--glass-strong); border: 1px solid var(--line); border-radius: 12px; padding: 22px;
  display: flex; flex-direction: column; gap: 12px }
.lm-card h2 { margin: 0; font: 700 20px var(--f-display) }
.lm-card p { margin: 0; color: var(--muted); font-size: 13.5px }
.lm-google { display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 14px var(--f-body); color: #1f1f1f; background: #fff;
  border: 0; border-radius: 6px; padding: 10px 14px; cursor: pointer }
.lm-google .g { font: 700 16px Arial, sans-serif; color: #4285f4 }
.lm-err { color: #ff8a70 !important; min-height: 1em }