/* HexAstra — hoja compartida (cabecera, controles, modo avanzado).
 * Identidad: docs/marca.md y css/brand.css (cargado antes en index.html). Ningún color ni familia
 * fuera de esos tokens. De Hallmark se tomó solo la estructura y el piso de accesibilidad (base.css). */
@import url("./tokens.css");
@import url("./base.css");

/* Semántica de datos del manual: cuerpos, calidad del dato y escala de puntaje. */
:root {
  --color-mars: var(--hx-cuerpo-marte);
  --color-earth: var(--hx-cuerpo-tierra);
  --color-moon: var(--hx-cuerpo-luna);
  --color-menos: var(--hx-menos-estudiado);
  --color-ok-ink: var(--hx-dato-medido);
  --color-model-ink: var(--hx-dato-modelado);
  --color-warn-ink: var(--hx-dato-a-completar);
  --color-warn-bg: transparent;
  --color-map: var(--hx-noche);
  --color-scrim: color-mix(in srgb, var(--hx-noche) 78%, transparent);
  --color-hover: color-mix(in srgb, var(--hx-texto) 7%, transparent);
  --color-selected: color-mix(in srgb, var(--hx-cian) 12%, var(--hx-noche-2));
  --score-low: var(--hx-puntaje-bajo);
  --score-high: var(--hx-puntaje-alto);
  --header-h: 0px;
  --control-h: 40px;
}

/* Color del puntaje: de violeta (poco parecido) a óxido (muy parecido), según --s entre 0 y 1.
   El violeta solo se usa en cifras grandes (24 px o más), como pide el manual. */
.score-color { color: color-mix(in oklab, var(--score-high) calc(var(--s, 0.5) * 100%), var(--score-low)); }
.score-bar {
  display: block;
  height: 4px;
  border-radius: var(--radius-chip);
  background: var(--hx-linea);
  overflow: hidden;
}
.score-bar > span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--s, 0));
  background: linear-gradient(90deg, var(--score-low), var(--score-high));
}

/* ---------- Shell ---------- */
html, body { min-height: 100%; }
body { color: var(--color-ink-2); }
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.header {
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-sm) var(--gutter);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-2xl);
  align-items: start;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-lg) var(--gutter) var(--space-lg);
}
.brand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.brand-logo { width: 112px; height: 112px; border-radius: 50%; }
.brand-text { min-width: 0; }
.brand-tag {
  margin-bottom: var(--space-xs);
  font: 600 var(--text-xs)/1.3 var(--hx-font-titulo);
  letter-spacing: var(--hx-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--hx-cian);
}
.brand h1 {
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: var(--color-ink);
  max-width: 24ch;
}
.subtitle {
  margin-top: var(--space-sm);
  max-width: 58ch;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-muted);
}

/* The limits sheet: what Earth cannot imitate, shown as a gap, outside the score. */
.limits {
  background: var(--color-sheet);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md) var(--space-sm);
  min-width: 0;
}
.limits h2 { font-size: var(--text-lg); color: var(--hx-sol); max-width: none; }
.limits-lead { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.limits-table { width: 100%; border-collapse: collapse; margin-top: var(--space-xs); font-size: var(--text-sm); }
.limits-table thead th { border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.limits-table th, .limits-table td { padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; text-align: left; vertical-align: baseline; }
.limits-table th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); }
.limits-table tbody th { color: var(--color-ink-2); }
.limits-table tbody tr + tr > * { border-top: var(--rule-hair) solid var(--color-rule); }
.limits-table .num { text-align: right; font-family: var(--font-outlier); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.limits-table sup a { color: var(--hx-cian); text-decoration: none; padding-inline: 2px; }
.limits-note { display: inline-block; min-width: 1.2em; font-weight: 600; color: var(--hx-cian); }
.limits-table thead .num { font-weight: 400; color: var(--color-muted); }
.limits-pending { text-align: right; }
.limits-source { margin-top: var(--space-xs); font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.limits-dialog {
  width: min(52rem, calc(100% - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--space-lg));
  margin: auto;
  padding: var(--space-md);
  overflow: auto;
  color: var(--color-ink);
  background: var(--color-sheet);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.limits-dialog::backdrop { background: var(--color-scrim); }
.limits-dialog form { display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); }
.limits-dialog .limits { padding: 0; border: 0; background: transparent; }

/* ---------- Controls ---------- */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 var(--space-md);
  font: 500 var(--text-sm)/1 var(--font-display);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
button:hover, .btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
button:active, .btn:active { background: var(--color-paper-3); }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  transition: none;
}
button:disabled {
  cursor: not-allowed;
  color: var(--color-muted);
  border-color: var(--color-rule);
  background: var(--color-paper-2);
}
button.active { background: var(--color-selected); color: var(--color-ink); border-color: var(--color-accent); }

a { color: var(--color-accent); text-decoration-color: currentColor; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--color-accent-2); }
.btn { color: var(--color-ink); }

select, input[type="date"] {
  min-height: var(--control-h);
  padding: 0 var(--space-xs);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: var(--radius-pill);
}
select:disabled { cursor: not-allowed; color: var(--color-muted); background: var(--color-paper-2); border-color: var(--color-rule); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--color-accent); }

.chip, .badge, .tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  font: 600 var(--text-xs)/1.3 var(--font-body);
  color: var(--color-muted);
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-chip);
  white-space: nowrap;
}
/* Calidad del dato (manual §2): medido en cian, modelado en celeste, a completar en dorado del sol. */
.chip-warn, .tag.warn { color: var(--color-warn-ink); border-color: var(--color-warn-ink); }
.tag.ok { color: var(--color-ok-ink); border-color: var(--color-ok-ink); }
.tag.model { color: var(--color-model-ink); border-color: var(--color-model-ink); }
.badge.menos { color: var(--color-menos); border-color: var(--color-menos); }
.tag { margin-left: var(--space-2xs); }

/* ---------- Modo avanzado: barra compacta, menús plegables y comparativa ---------- */
.adv { padding: var(--space-md) var(--gutter) var(--space-xl); max-width: var(--container); margin-inline: auto; }
.adv-bar {
  position: relative;
  z-index: 1100; /* los menús plegables quedan por encima de los paneles de Leaflet */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm) var(--space-md);
  padding-bottom: var(--space-md);
}
.adv-field { display: grid; gap: var(--space-3xs); min-width: 0; }
.adv-field > span { font: 600 var(--text-xs)/1.3 var(--font-display); color: var(--color-muted); }
.adv-field select { min-width: 12rem; max-width: 100%; }
.adv-menu { position: relative; }
.adv-menu > summary, .layers-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-h);
  padding: 0 var(--space-md);
  font: 500 var(--text-sm)/1 var(--font-display);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.adv-menu > summary::-webkit-details-marker, .layers-menu > summary::-webkit-details-marker { display: none; }
.adv-menu > summary::after, .layers-menu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.adv-menu[open] > summary::after, .layers-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.adv-menu > summary:hover, .layers-menu > summary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.adv-menu[open] > summary, .layers-menu[open] > summary { border-color: var(--color-accent); }
.adv-menu-panel, .layers-panel {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--space-2xs));
  left: 0;
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-sheet);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.adv-menu-note, .layers-note { font-size: var(--text-xs); color: var(--color-muted); }
#finder-features { display: grid; gap: var(--space-xs); }
.feat-row { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 8.5rem; gap: var(--space-sm); align-items: center; }
.feat-row label { font-size: var(--text-sm); color: var(--color-ink); }
.feat-row [data-wv] { white-space: nowrap; font-weight: 600; font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: right; color: var(--color-ink); }
.feat-row.is-off label, .feat-row.is-off [data-wv] { color: var(--color-muted); font-weight: 400; }
.feat-row input[type="range"]:disabled { opacity: 0.35; cursor: not-allowed; }
.adv-option { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink); }
.adv-check { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink); }
.adv-check input { margin-top: 3px; }
#finder-gamma-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hx-cian); }
.adv-bar .api-status { flex-basis: 100%; font-size: var(--text-xs); }
.api-status { color: var(--color-muted); }
.api-status.ok { color: var(--color-muted); }
.api-status.down { color: var(--color-warn-ink); }
.adv-results { padding-top: var(--space-sm); font-size: var(--text-sm); }

/* Menú «Capas» sobre cada mapa, arriba a la derecha (los controles de zoom quedan a la izquierda). */
.layers-menu { position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 1000; }
.layers-menu > summary { min-height: 34px; padding: 0 var(--space-sm); background: var(--color-sheet); }
.layers-panel { left: auto; right: 0; width: min(18rem, 80vw); gap: var(--space-xs); }
.layers-panel label { display: flex; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); color: var(--color-ink); cursor: pointer; }
.layers-panel input:disabled + * , .layers-panel label:has(input:disabled) { color: var(--color-muted); cursor: not-allowed; }
.layers-date { flex-wrap: wrap; }

.rank-list { list-style: none; margin: var(--space-sm) 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.rank-list li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.rank-item {
  display: block;
  width: 100%;
  min-height: 0;
  padding: var(--space-xs) var(--space-xs);
  font: 400 var(--text-sm)/1.45 var(--font-body);
  color: var(--color-ink-2);
  text-align: left;
  white-space: normal;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.rank-item strong { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); }
.rank-item:hover { background: var(--color-hover); }
.rank-item.active { background: var(--color-selected); }
.rank-item .score { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.rank-item .score-bar { width: 6rem; margin: var(--space-2xs) 0; }
.rank-flags { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-warn-ink); }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--space-xs);
  /* Alto fijo: los dos mapas mandan; la lista de sitios y la ficha scrollean adentro. */
  grid-template-rows: minmax(0, 1fr);
  height: clamp(560px, 86dvh, 920px);
}
.sitelist, .panel {
  min-height: 0;
  overflow: auto;
  color: var(--color-ink-2);
  background: var(--color-sheet);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.panel { display: flex; flex-direction: column; }
.sitelist-head, .panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-sheet);
}
.sitelist h2, .panel h2 { font-size: var(--text-md); color: var(--color-ink); }
#site-buttons { display: grid; }
.site-btn {
  display: block;
  width: 100%;
  min-height: 0;
  padding: var(--space-sm) var(--space-md);
  font: 400 var(--text-sm)/1.4 var(--font-body);
  color: var(--color-ink-2);
  text-align: left;
  white-space: normal;
  background: transparent;
  border: 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  border-radius: 0;
}
.site-btn:hover { background: var(--color-hover); }
.site-btn.active { background: var(--color-selected); }
.site-btn.active .name { color: var(--hx-cian); }
.site-btn .name { display: block; font: 600 var(--text-md)/1.25 var(--font-display); color: var(--color-ink); }
.site-btn .meta { display: block; margin-top: var(--space-3xs); color: var(--color-muted); }
.site-btn .badge { margin-left: var(--space-2xs); vertical-align: 1px; }

.map-frame { position: relative; min-height: 320px; overflow: hidden; background: var(--color-map); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.map-frame .map { position: absolute; inset: 0; background: var(--color-map); }
.map-label {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-2xl);
  z-index: 500;
  pointer-events: none;
}
.map-label h2 {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-sheet);
  border-radius: var(--radius-pill);
  max-width: none;
}

.leaflet-container { background: var(--color-map); font-family: var(--font-body); }
.leaflet-control-attribution { font-size: var(--text-xs); }
.leaflet-container .leaflet-control-attribution { background: var(--color-sheet); color: var(--color-ink-2); }
.leaflet-container .leaflet-control-attribution a { color: var(--color-accent); }
.leaflet-bar a { color: var(--color-ink); background: var(--color-sheet); border-bottom-color: var(--color-rule); border-radius: 0; }
.leaflet-bar a:hover { background: var(--color-paper-2); }
.leaflet-bar { border-radius: var(--radius-pill); }
.leaflet-tooltip { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink); background: var(--color-sheet); border-color: var(--color-rule-2); border-radius: var(--radius-pill); box-shadow: none; }

.pin { width: 16px; height: 16px; border: 2px solid var(--hx-noche); border-radius: 50%; }
.pin.earth { background: var(--color-earth); }
.pin.menos { background: var(--color-menos); }
.pin.mars { background: var(--color-mars); }
.pin.active { outline: 3px solid var(--hx-cian); outline-offset: 1px; }
.pin.moon { background: var(--color-moon); }
.pin.target { width: 24px; height: 24px; background: var(--color-mars); border: 3px solid var(--hx-noche); outline: 3px solid var(--hx-cian); }
.pin.target.moon { background: var(--color-moon); }
.pair-missing { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.pair-missing .tag { margin-left: 0; }
.pin.rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font: 600 var(--text-xs)/1 var(--font-body);
  color: var(--hx-noche);
  background: var(--color-earth);
  border: 2px solid var(--hx-noche);
  border-radius: var(--radius-pill);
}
.pin.rank.active { outline: 3px solid var(--hx-cian); outline-offset: 1px; }

.panel-body { padding: var(--space-sm) var(--space-md) var(--space-xl); }
.placeholder-msg, .muted { color: var(--color-muted); }
.placeholder-msg { padding: var(--space-md); font-size: var(--text-sm); }
.panel h3 { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-lg); color: var(--color-ink); }
.panel p + p, .panel ul { margin-top: var(--space-xs); }
.panel ul { padding-left: var(--space-md); }
.kicker { font-size: var(--text-sm); color: var(--color-muted); }
.lead { margin: var(--space-xs) 0 var(--space-sm); font-size: var(--text-md); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-md); margin: var(--space-sm) 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.fact { padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.fact dt { font-size: var(--text-xs); color: var(--color-muted); }
.fact dd { margin: var(--space-3xs) 0 0; font-weight: 600; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.score-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); background: var(--color-sheet); border-radius: var(--radius-card); }
.score-hero .score-bar { flex-basis: 100%; }
.score-hero .num { font: 700 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.score-hero p { font-size: var(--text-xs); color: var(--color-muted); }
.charts { display: grid; gap: var(--space-md); }
.chart-box { height: 250px; padding: var(--space-xs); background: var(--color-sheet); border-radius: var(--radius-card); }
.caution { margin: var(--space-xs) 0; padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-warn-ink); border: var(--rule-hair) solid var(--color-warn-ink); border-radius: var(--radius-pill); }
.sources { font-size: var(--text-sm); }
.sources ul { margin: var(--space-2xs) 0; padding-left: var(--space-md); }

/* ---------- Method dialog (both modes) ---------- */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--color-scrim);
}
.modal-bg.open { display: flex; }
.modal {
  max-width: 760px;
  max-height: min(86dvh, 900px);
  overflow: auto;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  background: var(--color-sheet);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.modal h2 { font-size: var(--text-2xl); color: var(--color-ink); margin-bottom: var(--space-sm); max-width: 24ch; }
.modal h3 { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-lg); color: var(--color-ink); }
.modal p + p { margin-top: var(--space-xs); }
.modal ul { padding-left: var(--space-md); }
.modal li + li { margin-top: var(--space-2xs); }
.modal pre, .formula {
  overflow: auto;
  margin: var(--space-xs) 0;
  padding: var(--space-sm);
  font: 400 var(--text-sm)/1.5 var(--font-outlier);
  white-space: pre-wrap;
  color: var(--color-ink);
  background: var(--color-paper);
  border-radius: var(--radius-pill);
}
.panel .formula { white-space: normal; }
.modal .close { float: right; margin: 0 0 var(--space-sm) var(--space-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 46dvh auto; height: auto; }
  .panel { max-height: none; }
  .sitelist { grid-column: 1 / -1; max-height: 260px; }
  #site-buttons { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .panel { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .brand { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .brand-logo { width: 96px; height: 96px; }
  .workspace { grid-template-rows: auto 300px auto; }
  .map-label h2 { font-size: var(--text-xs); }
  .brand h1 { font-size: var(--text-2xl); }
  .feat-row { grid-template-columns: minmax(0, 1fr) 2.6rem; }
  .feat-row label { grid-column: 1 / -1; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .header-actions { width: 100%; }
}
@media (max-width: 400px) {
  .limits { padding-inline: var(--space-sm); }
  .limits-table th, .limits-table td { padding-right: var(--space-2xs); }
  .limits-table tbody th { font-size: var(--text-xs); }
}

/* Flechas de los tooltips de Leaflet con el color del panel. */
.leaflet-tooltip-top::before { border-top-color: var(--color-sheet); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--color-sheet); }
.leaflet-tooltip-left::before { border-left-color: var(--color-sheet); }
.leaflet-tooltip-right::before { border-right-color: var(--color-sheet); }

/* Fuentes de la tabla de límites, plegadas para que los mapas suban. */
.limits-sources { margin-top: var(--space-xs); }
.limits-sources summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font: 600 var(--text-xs)/1.3 var(--font-body);
  color: var(--color-accent);
  cursor: pointer;
}
.limits-sources summary:hover { color: var(--color-accent-2); }
.limits-sources[open] summary { margin-bottom: var(--space-2xs); }

/* En el celular la tabla de límites pasa a bloques: cada fila con el nombre del cuerpo al lado del valor. */
@media (max-width: 560px) {
  /* Por debajo de 560 px los dos mapas del avanzado se apilan, más anchos, y siguen visibles a la vez. */
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 240px 240px auto; }
  .workspace .map-frame { min-height: 0; }
  .limits-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .limits-table, .limits-table tbody, .limits-table tr, .limits-table th, .limits-table td { display: block; }
  .limits-table tbody tr { padding: var(--space-xs) 0; }
  .limits-table tbody tr + tr > * { border-top: 0; }
  .limits-table tbody tr + tr { border-top: var(--rule-hair) solid var(--color-rule); }
  .limits-table tbody th { padding: 0 0 var(--space-2xs); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); }
  .limits-table td.num { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-3xs) 0; white-space: normal; }
  .limits-table td.num::before { content: attr(data-label); font-weight: 400; color: var(--color-muted); }
}

/* Componentes TASI de la ficha (de POST /tasi): nombre, puntaje y barra violeta → óxido. */
.comp-list { display: grid; gap: var(--space-xs); margin: var(--space-xs) 0; padding: 0; list-style: none; }
.comp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-sm); align-items: baseline; }
.comp-row .score-bar { grid-column: 1 / -1; }
.comp-name { font-size: var(--text-sm); color: var(--color-ink); }
.comp-score { font-weight: 600; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.comp-reason { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-muted); }
.site-title { margin-top: var(--space-2xs); font-size: var(--text-xl); }
.panel h3.site-title { margin-top: var(--space-2xs); }

/* Notas de la tabla de límites y pasos del método, que llegan de la API. */
.limits-list { margin: var(--space-2xs) 0 var(--space-xs); padding-left: var(--space-md); font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.limits-list li + li { margin-top: var(--space-2xs); }
.method-steps { padding-left: var(--space-lg); }
.method-steps li + li { margin-top: var(--space-xs); }

/* Lista del avanzado: grupos (pares documentados y catálogo) y el destino de cada par. */
.sitelist-group { grid-column: 1 / -1; padding: var(--space-sm) var(--space-md) var(--space-2xs); font: 600 var(--text-xs)/1.3 var(--font-display); color: var(--hx-cian); }
.site-btn .pair-line { display: block; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-mars); }

/* Tabla lado a lado sitio | destino con los valores de la API. */
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cmp-table thead th { font-weight: 600; color: var(--color-muted); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cmp-table th, .cmp-table td { padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; text-align: left; vertical-align: top; }
.cmp-table tbody tr + tr > * { border-top: var(--rule-hair) solid var(--color-rule); }
.cmp-table tbody th { font-weight: 400; color: var(--color-muted); }
.cmp-value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.cmp-table .tag { margin-left: 0; margin-top: var(--space-3xs); }

/* Texto de literatura: separado y rotulado, nunca mezclado con el puntaje. */
.literature { margin-top: var(--space-lg); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) dashed var(--hx-celeste); border-radius: var(--radius-card); }
.literature h3 { margin-top: 0; color: var(--hx-celeste); }
.literature p + p { margin-top: var(--space-xs); }
.literature-sources { margin: var(--space-2xs) 0 0; padding-left: var(--space-md); font-size: var(--text-sm); }
.literature-sources li + li { margin-top: var(--space-2xs); }

/* Ficha del par: título, lugar y coordenadas en una línea; avisos discretos; detalle plegado. */
.site-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.site-coords { font-variant-numeric: tabular-nums; }
.quiet-note { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.panel-more { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
.panel-more > summary { cursor: pointer; font: 600 var(--text-sm)/1.3 var(--font-display); color: var(--color-ink); }
.panel-more > summary:hover { color: var(--color-accent); }
.panel-more[open] > summary { margin-bottom: var(--space-xs); }
.panel-body { padding: var(--space-md) var(--space-lg) var(--space-xl); }
.panel h3.site-title { margin: 0; font-size: var(--text-xl); }
.pair-missing { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }

/* Escritorio: el espacio de trabajo usa el alto disponible; los paneles largos tienen su propio scroll.
   Al ampliar el texto o en ventanas pequeñas volvemos al flujo de documento para no recortar contenido. */
@media (min-width: 60rem) and (min-height: 40rem) {
  html, body { height: 100%; overflow: hidden; }
  .app { height: 100dvh; min-height: 0; }
  .header { flex: none; }
  .topbar { padding-block: var(--space-xs); }
  .masthead { display: block; padding-block: var(--space-xs); }
  .brand { gap: var(--space-sm); align-items: center; }
  .brand-logo { width: 48px; height: 48px; }
  .brand-tag { margin-bottom: var(--space-2xs); font-size: var(--text-xs); }
  .brand h1 { max-width: none; font-size: var(--text-lg); line-height: 1.2; }
  .subtitle { max-width: none; margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.3; }
  .adv {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    padding-block: var(--space-sm);
  }
  .adv-bar { flex: none; gap: var(--space-xs); padding-bottom: var(--space-xs); }
  .adv-field { flex: 1; }
  .adv-field select { min-width: 0; width: 100%; }
  .adv-menu > summary { padding-inline: var(--space-xs); }
  .workspace {
    flex: 1;
    min-height: 0;
    height: auto;
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 1.1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .workspace .sitelist, .workspace .panel { grid-column: auto; max-height: none; }
  #site-buttons { grid-template-columns: minmax(0, 1fr); }
  .map-frame { min-height: 0; }
  .adv-results { flex: 0 0 auto; max-height: 4rem; overflow: auto; }
  .adv-results:empty { display: none; }
  .sitelist, .panel, .adv-results { overscroll-behavior: contain; scrollbar-gutter: stable; }
  .adv-menu-panel { max-height: min(26rem, 60dvh); overflow: auto; }
}

@media (max-width: 720px) {
  .adv-field { flex: 1 1 100%; }
  .adv-field select { width: 100%; min-width: 0; }
  .adv-menu { flex: 1 1 auto; }
  .adv-menu-panel { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; width: auto; max-height: 70dvh; overflow: auto; }
  .feat-row { grid-template-columns: minmax(0, 1fr) 8.5rem; }
  .feat-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
}