/* Mockup styles. Values come from DESIGN.md §10; only the tokens used here. */
:root {
  color-scheme: dark;
  font-synthesis: none;
  --bc-abismo: #04070b;
  --bc-cosmos: #080c14;
  --bc-noche: #0d1625;
  --bc-horizonte: #1a2840;
  --bc-blanco: #f0f6ff;
  --bc-texto: #c8d8ec;
  --bc-estrella: #b8d4f0;
  --bc-muted: #96a6ba;
  --bc-acento: #7ba8d4;
  --bc-border: #2a4060;
  --bc-border-soft: #1a2840;
  --bc-ok: #4ade80;
  --bc-aviso: #d4a870;
  --bc-error: #f87171;
  --viz-predicha: #6dd5c0;
  --viz-medida: #d4a870;
  --viz-trayectoria: #b4a0f0;
  --viz-halo: #04070b;
  /* Space Grotesk is not self-hosted yet in the mockup: system-ui fallback. */
  --bc-font: "Space Grotesk", system-ui, sans-serif;
  --bc-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --bc-fs-2xl: clamp(31px, 3.25vw, 49px);
  --bc-fs-lg: 24px;
  --bc-fs-md: 19px;
  --bc-fs-body: 17px;
  --bc-fs-base: 16px;
  --bc-fs-ui: 15px;
  --bc-fs-sm: 14px;
  --bc-fs-xs: 13px;
  --bc-fs-micro: 12px;
  --bc-sp-xs: 8px;
  --bc-sp-s: 16px;
  --bc-sp-m: 32px;
  --bc-sp-l: 60px;
  --bc-radius-sm: 4px;
  --bc-radius: 10px;
  --bc-radius-pill: 20px;
  --bc-transition: 0.15s ease;
  --bc-header-h: 64px;
}
@media (max-width: 760px) {
  :root { --bc-fs-lg: 22px; --bc-fs-md: 18px; --bc-fs-body: 16px; --bc-fs-base: 15px; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bc-cosmos);
  color: var(--bc-texto);
  font-family: var(--bc-font);
  font-size: var(--bc-fs-body);
  line-height: 1.7;
}
:focus-visible { outline: 2px solid var(--bc-estrella); outline-offset: 5px; }
::selection { background: rgba(123, 168, 212, 0.25); color: var(--bc-blanco); }
a { color: var(--bc-acento); }
.mono { font-family: var(--bc-font-mono); font-size: var(--bc-fs-xs); color: var(--bc-texto); margin: 0; }

.container { width: min(1360px, 100%); margin-inline: auto; padding-inline: 64px; }
@media (max-width: 1100px) { .container { padding-inline: 36px; } }
@media (max-width: 760px) { .container { padding-inline: 16px; } }

.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--bc-estrella);
  color: var(--bc-cosmos); padding: 12px 16px; border-radius: var(--bc-radius-sm); }
.skip:focus { top: 8px; }

/* Header (DESIGN §7.9) */
.site-header { position: sticky; top: 0; z-index: 5; height: var(--bc-header-h);
  background: rgba(8, 12, 20, 0.94); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bc-border-soft); }
.header-row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-name { font-size: 14px; font-weight: 500; letter-spacing: 0.12em; color: var(--bc-blanco); }
.brand-sep { width: 1px; height: 18px; background: var(--bc-border); }
.brand-project { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bc-acento); white-space: nowrap; }
nav { display: flex; gap: 4px; }
nav a { color: var(--bc-texto); text-decoration: none; font-size: var(--bc-fs-ui); font-weight: 500;
  padding: 10px 12px; border-radius: var(--bc-radius-sm); transition: color var(--bc-transition); }
nav a:hover, nav a[aria-current="page"] { color: var(--bc-blanco); }
@media (max-width: 760px) { nav { display: none; } .brand-project { letter-spacing: 0.12em; } }

.mock-banner { background: rgba(212, 168, 112, 0.1); border-bottom: 1px solid rgba(212, 168, 112, 0.25);
  color: var(--bc-texto); font-size: var(--bc-fs-sm); padding: 8px 0; line-height: 1.5; }
.mock-banner strong { color: var(--bc-aviso); font-weight: 500; }

.eyebrow { font-size: var(--bc-fs-micro); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bc-acento); margin: 0 0 8px; line-height: 1.4; }

[hidden] { display: none !important; }

/* Sky sphere (DESIGN §7.11) */
.sky { padding: var(--bc-sp-s) 0; }
.sky-stage { position: relative; display: grid; justify-items: center; background: var(--bc-abismo); overflow: hidden; }
/* Square at rest: the orthographic view tops out at 180° across, so a square shows the whole globe.
   Aladin Lite sets position: relative on its container, so it is sized here, not with inset. */
.sky-view { width: min(100%, 62vh, 620px); min-width: min(100%, 300px); aspect-ratio: 1; }
.sky.is-arrived .sky-view { width: 100%; aspect-ratio: auto; height: 220px; }
.sky-loading { position: absolute; inset: 0; margin: 0; padding: var(--bc-sp-s); display: grid; place-content: center;
  text-align: center; color: var(--bc-texto); font-size: var(--bc-fs-sm); line-height: 1.5; pointer-events: none; }
.sky-stage .hud { z-index: 2; }
.sky-caption { margin: 8px 0 var(--bc-sp-m); min-height: 1.5em; font-size: var(--bc-fs-sm); color: var(--bc-muted); line-height: 1.5; }
.sky-spin { position: absolute; right: 10px; top: 10px; z-index: 2; background: rgba(4, 7, 11, 0.7); }
.chips-label { align-self: center; margin-right: 4px; font-size: var(--bc-fs-xs); color: var(--bc-muted);
  text-transform: uppercase; letter-spacing: 0.14em; }
.btn-secondary { margin-top: var(--bc-sp-s); background: transparent; border-color: #40516a; color: var(--bc-estrella); }
.btn-secondary:hover { background: var(--bc-noche); border-color: var(--bc-acento); }

/* Search (DESIGN §7.5) */
.search-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--bc-sp-s); align-items: end; }
@media (max-width: 760px) { .search-row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: var(--bc-fs-xs); color: var(--bc-muted); text-transform: uppercase;
  letter-spacing: 0.14em; margin-bottom: 4px; }
.field input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--bc-radius-sm);
  background: var(--bc-noche); border: 1px solid var(--bc-border); color: var(--bc-blanco);
  font-family: var(--bc-font-mono); font-size: var(--bc-fs-base); }
.field input:hover { border-color: var(--bc-acento); }
.field input[aria-invalid="true"] { border-color: var(--bc-error); }
.field-error { margin: 6px 0 0; color: var(--bc-error); font-size: var(--bc-fs-sm); line-height: 1.4; }
.search-msg { margin: 12px 0 0; font-size: var(--bc-fs-sm); color: var(--bc-aviso); line-height: 1.5; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 14px 22px; border-radius: var(--bc-radius-sm); border: 1px solid transparent;
  font: 500 var(--bc-fs-ui)/1 var(--bc-font); cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-primary { background: var(--bc-estrella); color: var(--bc-cosmos); }
.btn-primary:hover { background: #d8eafe; box-shadow: 0 6px 20px rgba(123, 168, 212, 0.25); transform: translateY(-2px); }

.chips { display: flex; flex-wrap: wrap; gap: var(--bc-sp-xs); margin-top: var(--bc-sp-s); }
.chip { min-height: 44px; padding: 0 16px; border-radius: var(--bc-radius-pill); cursor: pointer;
  background: transparent; border: 1px solid var(--bc-border); color: var(--bc-texto);
  font: 500 var(--bc-fs-sm)/1 var(--bc-font); transition: border-color var(--bc-transition), color var(--bc-transition); }
.chip:hover { border-color: var(--bc-acento); color: var(--bc-blanco); }
.chip.is-active { border-color: var(--bc-estrella); color: var(--bc-blanco); background: var(--bc-noche); }

/* Select (DESIGN §7.12): the native control, so phones open their own picker */
.select { position: relative; display: block; min-width: 0; }
.select select { display: block; width: 100%; min-height: 48px; padding: 0 44px 0 14px; appearance: none;
  border-radius: var(--bc-radius-sm); background: var(--bc-noche); border: 1px solid var(--bc-border);
  color: var(--bc-blanco); font: 500 var(--bc-fs-ui)/1.2 var(--bc-font); text-overflow: ellipsis; cursor: pointer;
  transition: border-color var(--bc-transition); }
.select select:hover { border-color: var(--bc-acento); }
.select select[aria-invalid="true"] { border-color: var(--bc-error); }
.select option { background: var(--bc-noche); color: var(--bc-blanco); }
/* The arrow: 16 px from the edge, and the text stops 44 px short so it never runs under it */
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -7px;
  border-right: 2px solid var(--bc-estrella); border-bottom: 2px solid var(--bc-estrella);
  transform: rotate(45deg); pointer-events: none; }
.select-inline { flex: none; font-size: var(--bc-fs-xs); color: var(--bc-muted); text-transform: uppercase;
  letter-spacing: 0.14em; line-height: 1.4; }

/* Viewer (DESIGN §7.1). Three pieces: the image with its controls, the panel, and the notes.
   Wide: the notes go under the timeline and the panel spans both rows. Narrow: one column, notes last. */
.viewer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); grid-template-rows: auto auto;
  gap: var(--bc-sp-m); padding: var(--bc-sp-s) 0 var(--bc-sp-l); outline: none; }
.viewer-main { grid-column: 1; grid-row: 1; }
.viewer .panel { grid-column: 2; grid-row: 1 / span 2; }
.viewer-notes { grid-column: 1; grid-row: 2; }
@media (max-width: 1100px) {
  .viewer { grid-template-columns: 1fr; grid-template-rows: none; }
  .viewer-main, .viewer .panel, .viewer-notes { grid-column: auto; grid-row: auto; }
}

/* Detail level (DESIGN §7.13): what carries the class "adv" shows only in the advanced level */
.modal[data-mode="basic"] .adv { display: none !important; }

/* Tooltips (DESIGN §7.7): the button's name, on hover and on keyboard focus; none on touch screens */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translate(-50%, 4px); padding: 4px 10px; white-space: nowrap; pointer-events: none; z-index: 6;
  background: rgba(4, 7, 11, 0.94); border: 1px solid var(--bc-border); border-radius: var(--bc-radius-sm);
  color: var(--bc-blanco); font: 500 var(--bc-fs-xs)/1.4 var(--bc-font); letter-spacing: 0;
  opacity: 0; transition: opacity var(--bc-transition), transform var(--bc-transition); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { [data-tip]::after { display: none; } }

.stage { position: relative; aspect-ratio: 1; width: min(100%, calc(100vh - 200px), 720px);
  min-width: min(100%, 320px); margin-inline: auto; background: var(--bc-abismo); overflow: hidden; cursor: grab;
  touch-action: none; user-select: none; }
.stage:active { cursor: grabbing; }
.stage:focus-visible { outline-offset: 3px; }
.plate { position: absolute; left: 0; top: 0; }
.plate img, .plate svg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.plate .flags { opacity: 0.35; }
.overlay { overflow: visible; pointer-events: none; }

.hud { position: absolute; display: flex; gap: 10px; align-items: center; padding: 4px 8px;
  background: rgba(4, 7, 11, 0.7); color: var(--bc-texto); font-size: var(--bc-fs-xs); line-height: 1.4;
  font-variant-numeric: tabular-nums; border-radius: var(--bc-radius-sm); pointer-events: none; }
.hud-tl { left: 10px; top: 10px; }
.hud-tr { right: 10px; top: 10px; }
.hud-br { right: 10px; bottom: 10px; }
.scalebar { display: inline-block; height: 2px; background: var(--bc-texto); }

.loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center;
  background: var(--bc-abismo); color: var(--bc-texto); font-size: var(--bc-fs-sm); }
.loading[hidden] { display: none; }
.progress { width: 220px; height: 4px; background: var(--bc-horizonte); border-radius: 2px; overflow: hidden; }
/* The journey of the data (DESIGN §7.6): a star, the telescope, the archive and your screen,
   drawn with the icon stroke; only transforms and opacity move, so a phone keeps up */
.modal-loading { max-width: 760px; margin: 0 auto; padding: 0 0 var(--bc-sp-m); }
.ld-scene { display: block; width: 100%; max-width: 640px; margin: 0 auto; overflow: visible; }
.ld-line { fill: none; stroke: var(--viz-trayectoria); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0.7; }
.ld-shape { fill: none; stroke: var(--bc-estrella); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ld-label { font: 500 12px var(--bc-font); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--bc-muted); text-anchor: middle; }
.ld-node { opacity: 0.55; transition: opacity 0.3s ease; }
.ld-node .ld-label { transition: fill 0.3s ease; }
.modal-loading[data-step="1"] .ld-archive, .modal-loading[data-step="2"] .ld-screen, .modal-loading[data-step="3"] .ld-screen { opacity: 1; }
.modal-loading[data-step="1"] .ld-archive .ld-label, .modal-loading[data-step="2"] .ld-screen .ld-label,
.modal-loading[data-step="3"] .ld-screen .ld-label { fill: var(--bc-estrella); }
.ld-star-shape { stroke: var(--bc-blanco); }
.ld-star { transform-box: fill-box; transform-origin: center; animation: ld-twinkle 2.2s ease-in-out infinite; }
.ld-photon { fill: var(--bc-blanco); offset-path: path("M70 52 L150 142"); offset-rotate: 0deg; opacity: 0;
  animation: ld-travel 2.4s linear infinite; animation-delay: var(--d, 0s); }
.ld-bob { animation: ld-bob 5s ease-in-out infinite; }
.ld-tile { fill: var(--bc-acento); opacity: 0.18; animation: ld-scan 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.12s); }
.ld-tile.is-hit { fill: var(--bc-estrella); animation-name: ld-hit; }
.ld-packet { fill: var(--bc-estrella); offset-path: path("M376 160 L492 160"); offset-rotate: 0deg; opacity: 0;
  animation: ld-travel 2.4s linear infinite; animation-delay: var(--d, 0s); }
.ld-packet-flipped { fill: var(--bc-aviso); }
.ld-frame { fill: var(--bc-noche); stroke: var(--bc-acento); stroke-width: 1.2; }
.ld-frame-top { fill: var(--bc-horizonte); stroke: var(--bc-estrella); }
.ld-flip { transform-box: fill-box; transform-origin: center; animation: ld-flip 4.8s ease-in-out infinite; }
.ld-ring { fill: none; stroke: var(--viz-predicha); stroke-width: 2; stroke-dasharray: 4 3; transform-box: fill-box;
  transform-origin: center; animation: ld-land 4.8s ease-out infinite; }
@keyframes ld-twinkle { 0%, 100% { opacity: 0.6; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ld-travel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ld-bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes ld-scan { 0%, 100% { opacity: 0.18; } 8% { opacity: 0.9; } 30% { opacity: 0.18; } }
@keyframes ld-hit { 0% { opacity: 0.18; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0.18; } }
@keyframes ld-flip { 0% { transform: rotate(180deg); opacity: 0; } 15% { opacity: 1; transform: rotate(180deg); } 40% { transform: rotate(0deg); } 100% { transform: rotate(0deg); opacity: 1; } }
@keyframes ld-land { 0%, 45% { transform: scale(2.4); opacity: 0; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* The three stations: the one the server is on is lit */
.ld-steps { list-style: none; margin: var(--bc-sp-s) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ld-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted);
  transition: color 0.3s ease; }
.ld-steps li[aria-current="step"] { color: var(--bc-texto); }
.ld-num { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--bc-border); display: inline-grid; place-items: center;
  font-size: var(--bc-fs-micro); font-weight: 500; color: var(--bc-muted); margin-top: 2px; transition: background 0.3s ease, color 0.3s ease; }
.ld-steps li[aria-current="step"] .ld-num { background: var(--bc-estrella); border-color: var(--bc-estrella); color: var(--bc-cosmos); }
.ld-note { margin: var(--bc-sp-s) 0 0; font-size: var(--bc-fs-sm); color: var(--bc-muted); line-height: 1.5;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.ld-elapsed { white-space: nowrap; }
.ld-elapsed output { color: var(--bc-blanco); font-size: var(--bc-fs-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ld-steps { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 520px) { .ld-label { display: none; } }

.progress span { display: block; height: 100%; width: 60%;
  background: linear-gradient(90deg, #060a16 0%, #122a52 30%, #2f5e9e 55%, #5b93cf 78%, #bfe0ff 100%);
  box-shadow: 0 0 14px rgba(123, 168, 212, 0.6); }

/* Markers (DESIGN §2.5) */
.mk-pred, .mk-pred-halo, .mk-meas, .mk-meas-halo, .mk-traj, .mk-dot { fill: none; vector-effect: non-scaling-stroke; }
.mk-pred-halo, .mk-meas-halo { stroke: var(--viz-halo); stroke-width: 4; }
.mk-pred { stroke: var(--viz-predicha); stroke-width: 2; stroke-dasharray: 4 3; }
.mk-meas { stroke: var(--viz-medida); stroke-width: 2; }
.mk-traj { stroke: var(--viz-trayectoria); stroke-width: 1.5; stroke-dasharray: 2 3; }
.mk-dot { fill: var(--viz-trayectoria); stroke: var(--viz-halo); stroke-width: 1; }
.overlay rect { shape-rendering: crispEdges; }

/* Controls (DESIGN §7.2) */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-sp-xs) 12px; margin-top: var(--bc-sp-s); }
.transport, .zoom-group { flex: none; display: flex; align-items: center; }
.transport { gap: var(--bc-sp-xs); }
/* The zoom buttons and their reset travel as one piece: if the row is full, they wrap together */
.zoom-group { gap: 4px; margin-left: auto; }
.icon-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bc-border);
  background: transparent; color: var(--bc-estrella); font-size: 16px; cursor: pointer;
  display: inline-grid; place-items: center; transition: border-color var(--bc-transition), background var(--bc-transition); }
/* Icons are drawn as 1.6 px lines on a 16 px grid, so every round button carries the same weight */
.icon-btn svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.icon-btn .ico-fill { fill: currentColor; stroke-width: 1.2; }
.icon-btn:hover { border-color: var(--bc-acento); background: var(--bc-noche); }
.icon-btn[aria-pressed="true"] { background: var(--bc-noche); border-color: var(--bc-estrella); }
/* A button that would do nothing right now (zoom at its limit, reset at 1×) says so */
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.icon-btn:disabled:hover { border-color: var(--bc-border); background: transparent; }
/* Speed sits on the transport row and takes what is left of it, like the bar of an audio player */
.speed { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--bc-fs-sm);
  color: var(--bc-muted); }
.speed input { flex: 1; min-width: 60px; max-width: 200px; min-height: 44px; margin: 0; accent-color: var(--bc-estrella); }
.speed output, .zoom-label { color: var(--bc-blanco); font-variant-numeric: tabular-nums; font-size: var(--bc-fs-sm); }
.speed output { flex: none; min-width: 3.4em; text-align: right; }
.zoom-label { text-align: center; min-width: 2.2em; }
@media (max-width: 760px) {
  /* The slider says what it is next to the transport buttons; its name stays for screen readers */
  .speed-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .speed { flex-basis: 110px; }
  .speed input { max-width: none; }
  /* Tighter, so the difference map and the zoom group share the second row on a 390 px phone */
  .controls { column-gap: var(--bc-sp-xs); }
  .diff-toggle { padding: 0 12px; }
  .zoom-label { min-width: 2em; }
}
@media (max-width: 379px) {
  /* Very narrow phones: transport centred on its own row, the speed bar stretched under it */
  .controls { justify-content: center; }
  .transport { flex: 1 0 100%; justify-content: center; }
  .speed { flex: 1 0 100%; }
  .zoom-group { margin-left: 0; }
}

.diff-toggle { min-height: 38px; padding: 0 14px; font-size: var(--bc-fs-xs); border-radius: var(--bc-radius-pill);
  cursor: pointer; border: 1px solid var(--bc-border); background: transparent; color: var(--bc-texto);
  transition: border-color var(--bc-transition), color var(--bc-transition), background var(--bc-transition); }
.diff-toggle:hover { border-color: var(--bc-acento); color: var(--bc-blanco); }
.diff-toggle[aria-pressed="true"] { border-color: var(--bc-aviso); background: rgba(212, 168, 112, 0.15); color: var(--bc-aviso); font-weight: 600; }
.diff-toggle:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--bc-border-soft); }

.band-row { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: var(--bc-sp-s) auto 0; }
.band-row .select { flex: 1; max-width: 320px; }

/* Notes: cards (§7.8) side by side when there is room, under the timeline on a wide screen */
.viewer-notes { max-width: 720px; margin-inline: auto; width: 100%; }
.warnings-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--bc-fs-xs);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Warnings quote frame names and URLs with no spaces: let them break instead of widening the dialog */
.warnings-list li { padding: 10px 14px; background: var(--bc-noche); border: 1px solid var(--bc-border-soft);
  border-radius: var(--bc-radius); color: var(--bc-texto); line-height: 1.5; overflow-wrap: anywhere; }

.citations-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--bc-fs-micro); color: var(--bc-muted); }
.citations-list li { line-height: 1.4; border-bottom: 1px solid var(--bc-border-soft); padding-bottom: 6px; overflow-wrap: anywhere; }
.citations-list li:last-child { border-bottom: none; }

.timeline { position: relative; height: 68px; margin: var(--bc-sp-s) 22px 0; }
.controls, .timeline-wrap { max-width: 720px; margin-inline: auto; }
.timeline-track { position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: var(--bc-border); }
/* mockup.js sets each dot's left, width and --tl-mark: a dot owns the space up to halfway to its neighbours */
.tl-dot { position: absolute; top: 0; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.tl-dot::before { content: ""; position: absolute; left: var(--tl-mark, 50%); top: 50%; width: 10px; height: 10px;
  margin: -5px 0 0 -5px; border-radius: 50%; background: var(--bc-noche); border: 1px solid var(--bc-acento);
  transition: transform var(--bc-transition); }
.tl-dot[aria-current="true"] { z-index: 1; }
.tl-dot[aria-current="true"]::before { background: var(--bc-estrella); border-color: var(--bc-estrella); transform: scale(1.5); }
/* Long series on a narrow screen: smaller marks, so neighbours stay apart */
.is-dense .tl-dot::before { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.is-dense .tl-dot[aria-current="true"]::before { transform: scale(2); }
.tl-labels { position: absolute; left: 0; right: 0; top: 44px; height: 20px; font-size: var(--bc-fs-xs);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.4; }
.tl-end, .tl-current { position: absolute; left: 0; top: 0; }
.tl-end { color: var(--bc-muted); }
.tl-end-right { left: auto; right: 0; }
.tl-end.is-hidden { visibility: hidden; }
.tl-current { color: var(--bc-blanco); }

/* Panel (DESIGN §7.3, 7.4, 7.8) */
.panel { background: var(--bc-noche); border: 1px solid var(--bc-border); border-radius: var(--bc-radius);
  padding: 24px; display: flex; flex-direction: column; gap: 20px; align-self: start; }
.panel-block + .panel-block { border-top: 1px solid var(--bc-border-soft); padding-top: 20px; }
.obj-name { font-size: var(--bc-fs-lg); font-weight: 500; color: var(--bc-blanco); margin: 0 0 4px; line-height: 1.3; letter-spacing: -0.01em; }
.meta { margin: 0; display: grid; gap: 10px; }
.meta div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.meta dt { font-size: var(--bc-fs-xs); color: var(--bc-muted); text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.4; }
.meta dd { margin: 0; font-size: var(--bc-fs-base); color: var(--bc-blanco); font-variant-numeric: tabular-nums; text-align: right; line-height: 1.4;
  white-space: nowrap; }
.meta dd .adv { color: var(--bc-muted); }

/* Frame checks (DESIGN §7.4): four cells that are always there, so nothing below them jumps while playing */
.status { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.status li { min-width: 0; padding: 8px 10px; border: 1px solid var(--bc-border-soft); border-radius: var(--bc-radius-sm);
  background: rgba(4, 7, 11, 0.35); display: grid; gap: 2px; }
.status-k { font-size: var(--bc-fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bc-muted); line-height: 1.4; }
.status-v { font-size: var(--bc-fs-xs); font-weight: 500; line-height: 1.4; color: var(--bc-texto); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-v.is-ok { color: var(--bc-ok); }
.status-v.is-aviso { color: var(--bc-aviso); }
.status-v.is-acento { color: var(--bc-acento); }
.status-v.is-off { color: var(--bc-muted); font-weight: 400; }
@media (max-width: 400px) {
  /* Narrow phones: tighter cells, so the longest check still fits on one line */
  .status { gap: 6px; }
  .status li { padding: 6px 8px; }
  .status-v { font-size: var(--bc-fs-micro); }
}
.result p:last-child { margin: 0; font-size: var(--bc-fs-base); color: var(--bc-texto); line-height: 1.6; }
.result strong { color: var(--bc-blanco); font-weight: 500; }

/* Legend (DESIGN §7.1): each line is a switch for the marks it names; All and None flip the four */
.legend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.legend-all { margin: 0 0 8px; font-size: var(--bc-fs-xs); color: var(--bc-muted); display: flex; gap: 6px; align-items: center; }
.text-btn { min-height: 32px; padding: 0 6px; margin: 0 -2px; background: none; border: 0; cursor: pointer; color: var(--bc-estrella);
  font: 500 var(--bc-fs-xs)/1 var(--bc-font); border-radius: var(--bc-radius-sm); }
.text-btn:hover { color: var(--bc-blanco); text-decoration: underline; text-underline-offset: 3px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--bc-fs-sm); }
.legend svg { width: 24px; height: 24px; flex: none; transition: opacity var(--bc-transition); }
.lg { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; color: var(--bc-texto);
  transition: color var(--bc-transition); }
.lg:hover { color: var(--bc-blanco); }
.lg input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
/* The box takes the colour of the mark it switches on; ticked, it fills and shows a check in the page's dark */
.lg-box { position: relative; flex: none; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--bc-border);
  background: var(--bc-abismo); transition: background var(--bc-transition), border-color var(--bc-transition); }
.lg-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border-right: 2px solid var(--bc-cosmos);
  border-bottom: 2px solid var(--bc-cosmos); transform: rotate(45deg) scale(0); transition: transform var(--bc-transition); }
.lg:hover .lg-box { border-color: var(--lg, var(--bc-acento)); }
.lg input:checked + .lg-box { background: var(--lg, var(--bc-estrella)); border-color: var(--lg, var(--bc-estrella)); }
.lg input:checked + .lg-box::after { transform: rotate(45deg) scale(1); }
.lg input:focus-visible + .lg-box { outline: 2px solid var(--bc-estrella); outline-offset: 3px; }
.lg:has(input:not(:checked)) { color: var(--bc-muted); }
.lg:has(input:not(:checked)) svg { opacity: 0.4; }
/* Plain checkbox of the plan B page (aladin.html) */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--bc-estrella); margin: 0; }
.swatch-flag { width: 14px; height: 14px; background: rgba(248, 113, 113, 0.35); border: 1px solid var(--bc-error); }
.mk-flag-bad { fill: rgba(150, 166, 186, 0.45); stroke: none; }
.mk-flag-sat { fill: rgba(248, 113, 113, 0.5); stroke: none; }

/* How it works + footer */
.how { max-width: 820px; padding-bottom: var(--bc-sp-l); }
.h2 { font-size: var(--bc-fs-2xl); font-weight: 300; color: var(--bc-blanco); line-height: 1.2; margin: 0 0 var(--bc-sp-s); }
.how ol { padding-left: 1.2em; margin: 0; }
.how li { margin-bottom: 8px; }
.site-footer { border-top: 1px solid var(--bc-border-soft); padding: var(--bc-sp-m) 0; font-size: var(--bc-fs-sm); color: var(--bc-muted); }
.site-footer p { margin: 0 0 6px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Interactive Tour & Spotlight Guide (DESIGN.md / Noir Cósmico v2) */
.tour-help-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--bc-border);
  background: rgba(13, 22, 37, 0.6);
  color: var(--bc-estrella);
  font-family: var(--bc-font);
  font-size: 16px;
  font-weight: 600;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--bc-transition), background var(--bc-transition), color var(--bc-transition), box-shadow var(--bc-transition);
}
.tour-help-btn:hover {
  border-color: var(--bc-acento);
  background: var(--bc-noche);
  color: var(--bc-blanco);
  box-shadow: 0 0 12px rgba(123, 168, 212, 0.3);
}

.tour-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  overflow: hidden;
  z-index: 10000;
}
.tour-dialog::backdrop {
  background: transparent;
}

.tour-spotlight {
  position: fixed;
  border-radius: 16px;
  border: 1.5px solid rgba(184, 212, 240, 0.75);
  box-shadow: 0 0 0 9999px rgba(4, 7, 11, 0.78),
              0 0 24px rgba(123, 168, 212, 0.35);
  pointer-events: none;
  transition: top 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
              left 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
              width 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
              height 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
              border-radius 0.28s ease;
}

.tour-card {
  position: fixed;
  z-index: 10002;
  width: min(380px, calc(100vw - 32px));
  padding: 20px 24px 18px;
  background: rgba(13, 22, 37, 0.95);
  border: 1px solid var(--bc-border);
  border-radius: 16px;
  box-shadow: 0 18px 40px #03060acc;
  backdrop-filter: blur(16px);
  color: var(--bc-texto);
  transition: top 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
              left 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
              opacity 0.2s ease;
}

.tour-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.tour-counter {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--bc-acento);
}

.tour-skip-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: var(--bc-font);
  font-size: 13px;
  color: var(--bc-muted);
  cursor: pointer;
  transition: color var(--bc-transition);
}
.tour-skip-btn:hover {
  color: var(--bc-blanco);
}

.tour-title {
  margin: 6px 0 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bc-blanco);
  letter-spacing: -0.01em;
}

.tour-desc {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bc-texto);
}

.tour-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tour-btn-prev {
  background: none;
  border: none;
  padding: 8px 12px;
  font-family: var(--bc-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--bc-muted);
  cursor: pointer;
  border-radius: var(--bc-radius-sm);
  transition: color var(--bc-transition), background var(--bc-transition);
}
.tour-btn-prev:hover:not(:disabled) {
  color: var(--bc-blanco);
  background: rgba(255, 255, 255, 0.05);
}
.tour-btn-prev:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.tour-btn-next {
  min-height: 38px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--bc-estrella);
  color: var(--bc-cosmos);
  font-family: var(--bc-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bc-transition), box-shadow var(--bc-transition), transform var(--bc-transition);
}
.tour-btn-next:hover {
  background: var(--bc-blanco);
  box-shadow: 0 4px 16px rgba(184, 212, 240, 0.35);
  transform: translateY(-1px);
}
.tour-btn-next:active {
  transform: translateY(0);
}