:root {
  --inconfin-navy: #0b234a;
  --inconfin-deep: #061632;
  --inconfin-blue: #163a70;
  --inconfin-red: #df1f3f;
  --inconfin-red-dark: #b71430;
  --inconfin-teal: #118a78;
  --inconfin-cyan: #df1f3f;
  --inconfin-gold: #b99646;
  --inconfin-ivory: #f7f9fc;
  --navy-950: var(--inconfin-navy);
  --navy-900: #061632;
  --navy-800: #0b3e4e;
  --navy-700: #125364;
  --teal-600: var(--inconfin-teal);
  --cyan-500: var(--inconfin-cyan);
  --cyan-300: #ffbdc9;
  --gold-500: var(--inconfin-gold);
  --gold-300: #ead39b;
  --paper-50: #fbfaf7;
  --paper-100: var(--inconfin-ivory);
  --paper-200: #e9e3d5;
  --ink-900: #122d35;
  --ink-700: #3e5860;
  --ink-500: #6d8085;
  --line: rgba(9, 53, 66, .13);
  --white: #fff;
  --danger: #a84444;
  --shadow-sm: 0 8px 24px rgba(4, 35, 46, .08);
  --shadow-md: 0 20px 60px rgba(4, 35, 46, .14);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --politica: #176b87;
  --economia: #a77723;
  --religion: #775b9c;
  --cultura: #c25f52;
  --militar: #943e3e;
  --sociedad: #39836f;
  --ambiente: #4d7893;
  --tecnologia: #586a2f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink-900);
  background: var(--paper-100);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper-100); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a, input, select, textarea { outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(16, 191, 194, .35); }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.noscript { background: #fff4d8; padding: 14px; text-align: center; font-weight: 700; }
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 8px;
  background: white;
  color: var(--navy-950);
  font-weight: 900;
  text-decoration: none;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }
.topbar {
  height: 82px;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 0 26px;
  color: white;
  background:
    radial-gradient(circle at 10% 0%, rgba(17, 191, 194, .17), transparent 34%),
    linear-gradient(105deg, var(--navy-950), var(--navy-900) 55%, #0b3c4b);
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: sticky;
  top: 0;
  z-index: 100;
}
.brand { display: flex; gap: 13px; align-items: center; text-decoration: none; min-width: 0; }
.brand-mark { width: 40px; height: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; transform: skew(-8deg); }
.brand-mark i { display: block; border-radius: 4px 4px 2px 2px; background: var(--cyan-500); }
.brand-mark i:nth-child(1) { height: 46%; align-self: end; opacity: .64; }
.brand-mark i:nth-child(2) { height: 72%; align-self: end; opacity: .82; }
.brand-mark i:nth-child(3) { height: 100%; align-self: end; }
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; letter-spacing: .12em; font-size: 14px; }
.brand-copy strong b { margin-left: 7px; color: var(--cyan-300); font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
.brand-copy small { display: block; margin-top: 3px; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mode-switch { display: flex; gap: 5px; padding: 5px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.mode-button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: rgba(255,255,255,.62); padding: 8px 15px 8px 9px; border-radius: 10px; transition: .2s ease; text-align: left; }
.mode-button:hover { color: white; background: rgba(255,255,255,.06); }
.mode-button.is-active { background: white; color: var(--navy-900); box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.mode-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(16,191,194,.16); color: var(--cyan-500); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.mode-button.is-active .mode-icon { background: var(--navy-900); color: var(--cyan-300); }
.mode-button strong, .mode-button small { display: block; }
.mode-button strong { font-size: 12px; letter-spacing: .04em; }
.mode-button small { margin-top: 1px; font-size: 10px; opacity: .7; }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.kids-entry-link { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(234,211,155,.5); border-radius: 11px; color: var(--navy-950); background: var(--gold-300); font-size: 10px; font-weight: 900; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 22px rgba(210,168,80,.16); }
.kids-entry-link:hover, .kids-entry-link:focus-visible { color: white; border-color: var(--cyan-300); background: var(--teal-600); }
.local-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.72); border: 0; border-right: 1px solid rgba(255,255,255,.16); padding: 5px 13px 5px 0; background: transparent; }
.open-access-badge:hover, .open-access-badge:focus-visible { color: white; }
.local-badge span { width: 7px; height: 7px; border-radius: 50%; background: #6ad88b; box-shadow: 0 0 0 4px rgba(106,216,139,.1); }
.icon-button { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: rgba(255,255,255,.72); padding: 8px; border-radius: 8px; }
.icon-button:hover { background: rgba(255,255,255,.07); color: white; }
.icon-button span { font-size: 17px; color: var(--cyan-300); }
.icon-button em { font-style: normal; font-size: 11px; }
.primary-button, .secondary-button { border-radius: 10px; padding: 10px 15px; font-weight: 800; font-size: 12px; border: 1px solid transparent; transition: .2s ease; }
.primary-button { background: var(--cyan-500); color: var(--navy-950); box-shadow: 0 8px 20px rgba(16,191,194,.18); }
.primary-button:hover { transform: translateY(-1px); background: #34d0cf; }
.secondary-button { background: white; border-color: var(--line); color: var(--navy-800); }
.secondary-button:hover { border-color: rgba(8,125,130,.38); background: #f8fbfa; }

.workspace { display: grid; grid-template-columns: 294px minmax(600px, 1fr) 365px; min-height: calc(100vh - 82px); }
.control-panel, .detail-panel { background: var(--paper-50); }
.control-panel { border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 82px; align-self: start; height: calc(100vh - 82px); overflow-y: auto; }
.detail-panel { border-left: 1px solid var(--line); position: sticky; top: 82px; align-self: start; height: calc(100vh - 82px); overflow-y: auto; }

.control-hero { padding: 24px 22px 17px; background: linear-gradient(160deg, rgba(16,191,194,.08), transparent 72%); border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 7px; color: var(--teal-600); font-size: 9px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.year-display { display: flex; align-items: baseline; gap: 7px; }
.year-display > span, .year-display > small { color: var(--ink-500); font-weight: 800; font-size: 11px; letter-spacing: .08em; }
.year-display strong { font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: .95; color: var(--navy-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.control-hero > p:last-child { margin: 9px 0 0; color: var(--ink-700); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 13px; }
.control-section { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.compact-section { padding-bottom: 14px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 11px; font-size: 11px; font-weight: 900; color: var(--navy-800); letter-spacing: .03em; }
.section-heading label { font-weight: 900; }
.playback-controls { display: flex; align-items: center; gap: 4px; }
.small-icon-button, .play-button { border: 1px solid var(--line); background: white; border-radius: 7px; display: grid; place-items: center; color: var(--navy-800); }
.small-icon-button { width: 25px; height: 25px; }
.play-button { width: 29px; height: 29px; background: var(--navy-900); color: white; border-color: var(--navy-900); }
.play-button .pause-symbol { display: none; font-size: 9px; font-weight: 900; }
.play-button.is-playing .play-symbol { display: none; }
.play-button.is-playing .pause-symbol { display: inline; }

input[type="range"] { width: 100%; accent-color: var(--cyan-500); }
.range-labels { display: flex; justify-content: space-between; margin-top: -3px; font-size: 8px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.year-entry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.year-entry-row label, .field-label { display: grid; gap: 5px; font-size: 9px; color: var(--ink-500); font-weight: 800; }
.year-entry-row input, .year-entry-row select, .wide-select { min-width: 0; width: 100%; background: white; color: var(--ink-900); border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; font-size: 11px; }
.century-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.century-chips button { border: 1px solid var(--line); border-radius: 6px; background: transparent; padding: 5px 2px; color: var(--ink-500); font-size: 9px; }
.century-chips button:hover, .century-chips button.is-active { color: var(--navy-900); border-color: var(--cyan-500); background: rgba(16,191,194,.08); }

.help-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--ink-500); font-size: 10px; font-weight: 900; position: relative; }
.help-dot:hover::after, .help-dot:focus-visible::after { content: attr(data-help); position: absolute; z-index: 50; top: 26px; right: 0; width: 240px; padding: 10px; border-radius: 8px; background: var(--navy-950); color: white; font-weight: 500; line-height: 1.4; box-shadow: var(--shadow-md); }
.segmented { display: flex; padding: 3px; background: var(--paper-100); border-radius: 9px; border: 1px solid var(--line); }
.segmented button { flex: 1; border: 0; background: transparent; border-radius: 6px; padding: 7px 5px; font-size: 9px; font-weight: 800; color: var(--ink-500); }
.segmented button.is-active { background: white; color: var(--navy-900); box-shadow: 0 3px 10px rgba(4,35,46,.09); }
.segmented.compact button { padding-inline: 3px; }
.text-button { border: 0; background: transparent; color: var(--teal-600); font-size: 9px; font-weight: 800; padding: 2px; }
.field-help { margin: 8px 0 0; color: var(--ink-500); font-size: 9px; line-height: 1.45; }
.count-badge { padding: 3px 6px; border-radius: 999px; background: rgba(16,191,194,.1); color: var(--teal-600); font-size: 8px; }
.category-list { display: grid; gap: 5px; }
.category-filter { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 22px 1fr 18px; align-items: center; gap: 7px; border-radius: 8px; padding: 5px; text-align: left; color: var(--ink-700); }
.category-filter:hover { background: var(--paper-100); }
.category-filter .category-symbol { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: white; font-size: 10px; background: var(--cat-color); }
.category-filter .category-name { font-size: 10px; font-weight: 700; }
.category-filter .check { width: 14px; height: 14px; border: 1px solid rgba(9,53,66,.25); border-radius: 4px; position: relative; }
.category-filter.is-active .check { background: var(--cat-color); border-color: var(--cat-color); }
.category-filter.is-active .check::after { content: "✓"; color: white; font-size: 9px; position: absolute; inset: -1px 0 0 2px; }
.category-filter:not(.is-active) { opacity: .48; }
.search-section { margin-top: auto; }
.search-box { display: flex; align-items: center; gap: 7px; background: white; border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px; }
.search-box > span { color: var(--teal-600); font-size: 16px; }
.search-box input { min-width: 0; flex: 1; border: 0; background: transparent; font-size: 10px; color: var(--ink-900); outline: 0; }
.search-box button { border: 0; background: transparent; color: var(--ink-500); padding: 0; font-size: 15px; }
.panel-footer { padding: 14px 20px 17px; color: var(--ink-700); }
.panel-footer div { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.panel-footer small { display: block; margin-top: 4px; color: var(--ink-500); font-size: 8px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-500); }

.atlas-stage { padding: 26px 28px 50px; min-width: 0; background: linear-gradient(180deg, #f8f6f0, var(--paper-100)); }
.stage-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 18px; }
.stage-header h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; color: var(--navy-900); font-size: clamp(25px, 2.2vw, 37px); line-height: 1.08; font-weight: 500; }
.stage-header > div:first-child > p:last-child { max-width: 700px; margin: 8px 0 0; color: var(--ink-500); font-size: 12px; line-height: 1.5; }
.stage-metrics { display: flex; gap: 18px; flex-shrink: 0; }
.stage-metrics div { padding-left: 15px; border-left: 1px solid var(--line); }
.stage-metrics strong, .stage-metrics span { display: block; }
.stage-metrics strong { font-family: Georgia, "Times New Roman", serif; font-size: 24px; color: var(--navy-900); font-weight: 500; }
.stage-metrics span { margin-top: 2px; color: var(--ink-500); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }

.map-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.map-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 15px; border-bottom: 1px solid var(--line); }
.map-legend, .map-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.map-legend span { display: flex; align-items: center; gap: 5px; color: var(--ink-500); font-size: 8px; }
.map-legend i { width: 10px; height: 10px; display: inline-block; }
.legend-land { border-radius: 2px; background: #e7dabe; border: 1px solid #ccb98e; }
.legend-marker { border-radius: 50%; background: var(--cyan-500); border: 2px solid white; box-shadow: 0 0 0 1px var(--cyan-500); }
.legend-focus { border-radius: 50%; border: 1px dashed var(--teal-600); background: rgba(16,191,194,.07); }
.map-action { border: 0; background: transparent; color: var(--ink-500); font-size: 8px; font-weight: 800; padding: 5px 7px; border-radius: 6px; }
.map-action:hover, .map-action.is-active { color: var(--teal-600); background: rgba(16,191,194,.08); }
.map-zoom-controls {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper-50);
}
.globe-mode-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 11px;
  border-radius: 9px;
  color: white;
  background: var(--navy-900);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}
.map-zoom-controls { gap: 2px; }
.map-zoom-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--navy-900);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.map-zoom-button:hover:not(:disabled) { color: white; background: var(--teal-600); }
.map-zoom-button:disabled { cursor: not-allowed; opacity: .35; }
.map-zoom-controls output {
  min-width: 48px;
  padding-inline: 4px;
  color: var(--ink-500);
  font-size: 8px;
  font-weight: 900;
  text-align: center;
}
.boundary-note { padding: 5px 8px; border-radius: 999px; background: #fff7e3; color: #735a23; font-size: 8px; font-weight: 800; white-space: nowrap; }
.map-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1000 / 600;
  min-height: 370px;
  background: #dceceb;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.map-viewport:focus-visible { outline: 4px solid rgba(16,191,194,.42); outline-offset: -4px; }
.map-viewport.is-dragging { cursor: grabbing; }
#historyMap, #globeMap, #globeCanvas { display: block; width: 100%; height: 100%; }
#historyMap { background: #dceceb; }
#mapCameraLayer { transform-origin: center; }
.world-land { fill: url(#landGradient); stroke: #97a797; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.globe-canvas { position: absolute; inset: 0; background: var(--navy-950); pointer-events: none; }
.globe-map { position: absolute; inset: 0; background: transparent; }
.globe-map.uses-canvas .globe-space,
.globe-map.uses-canvas .globe-sphere,
.globe-map.uses-canvas .globe-graticule,
.globe-map.uses-canvas .globe-land,
.globe-map.uses-canvas .globe-borders,
.globe-map.uses-canvas .globe-lighting,
.globe-map.uses-canvas .globe-rim { display: none; }
.globe-space { fill: #041821; }
.globe-sphere { fill: url(#globeOcean); }
.globe-graticule {
  fill: none;
  stroke: rgba(131,222,219,.26);
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
}
.globe-land {
  fill: #eadfbe;
  stroke: rgba(255,255,255,.32);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}
.globe-borders {
  fill: none;
  stroke: rgba(6,31,42,.38);
  stroke-width: .72;
  stroke-dasharray: 2.5 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.globe-map[data-detail="regional"] .globe-borders { stroke: rgba(6,31,42,.56); stroke-width: .82; }
.globe-map[data-detail="maximum"] .globe-borders { stroke: rgba(6,31,42,.72); stroke-width: .92; stroke-dasharray: none; }
.globe-map[data-detail="regional"] .globe-graticule,
.globe-map[data-detail="maximum"] .globe-graticule { opacity: .55; }
.globe-lighting { fill: url(#globeLight); pointer-events: none; }
.globe-rim {
  fill: none;
  stroke: rgba(131,222,219,.56);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.globe-region-label {
  fill: rgba(255,255,255,.76);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-style: italic;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(6,31,42,.82);
  stroke-width: 3px;
  pointer-events: none;
}
.globe-region-focus { fill: rgba(16,191,194,.14); stroke: var(--cyan-300); }
.map-viewport.is-globe .map-axis { color: white; }
.map-viewport.is-globe .map-axis strong { color: white; }
.map-viewport.is-globe .map-axis em,
.map-viewport.is-globe .map-attribution { color: rgba(255,255,255,.62); }
.map-viewport.is-globe .map-axis span { color: var(--cyan-300); }
.context-land { fill: #e5e1d6; stroke: rgba(10,54,66,.1); stroke-width: 1; }
.europe-land { fill: url(#landGradient); stroke: #9ea998; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.map-grid-line { stroke: rgba(9,53,66,.09); stroke-width: .8; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.map-grid-path { fill: none; stroke: rgba(9,53,66,.12); stroke-width: .7; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.map-grid-label { fill: rgba(9,53,66,.33); font-size: 9px; font-weight: 700; }
.region-focus { fill: rgba(16,191,194,.08); stroke: var(--teal-600); stroke-width: 1.6; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; animation: focusPulse 3s ease-in-out infinite; }
@keyframes focusPulse { 50% { fill: rgba(16,191,194,.14); } }
.region-label { fill: rgba(7,43,57,.42); font-size: 11px; font-family: Georgia, "Times New Roman", serif; font-style: italic; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(248,241,223,.75); stroke-width: 3px; }
.marker-group { cursor: pointer; }
.marker-halo { fill: none; stroke: white; stroke-width: 5; opacity: .9; }
.marker-core { fill: var(--marker-color); stroke: white; stroke-width: 2.4; filter: url(#markerShadow); transition: r .16s ease, opacity .16s ease; }
.marker-pulse { fill: none; stroke: var(--marker-color); stroke-width: 2; opacity: 0; }
.marker-group:hover .marker-core { r: 9; }
.marker-group.is-selected .marker-core { r: 10; stroke-width: 3; }
.marker-group.is-selected .marker-pulse { opacity: .7; animation: markerPulse 1.8s ease-out infinite; }
.marker-group.is-process .marker-core { stroke-dasharray: 3 2; }
@keyframes markerPulse { from { r: 10; opacity: .8; } to { r: 25; opacity: 0; } }
.marker-count { fill: white; font-size: 7px; font-weight: 900; text-anchor: middle; pointer-events: none; }
.map-tooltip { position: absolute; z-index: 10; min-width: 210px; max-width: 280px; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 16px)); transition: opacity .12s ease; background: var(--navy-950); color: white; border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-md); }
.map-tooltip.is-visible { opacity: 1; }
.map-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--navy-950); border-bottom: 0; }
.map-tooltip strong { display: block; font-size: 11px; line-height: 1.3; }
.map-tooltip span { display: block; margin-top: 4px; color: rgba(255,255,255,.65); font-size: 9px; }
.map-tooltip em { display: block; margin-top: 5px; color: var(--cyan-300); font-style: normal; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.map-axis { position: absolute; pointer-events: none; color: var(--navy-900); }
.map-axis span, .map-axis strong, .map-axis em { display: block; }
.map-axis span { color: var(--teal-600); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.map-axis strong { font-size: 9px; letter-spacing: .12em; }
.map-axis em { color: var(--ink-500); font-size: 8px; font-style: normal; }
.x-axis { left: 28px; bottom: 18px; }
.y-axis { right: 18px; top: 25px; text-align: right; }
.map-attribution { position: absolute; right: 14px; bottom: 9px; color: rgba(9,53,66,.42); font-size: 7px; }
.map-context-strip { display: grid; grid-template-columns: minmax(180px, .7fr) 1.3fr; gap: 16px; align-items: center; padding: 13px 17px; border-top: 1px solid var(--line); background: #fdfcf9; }
.context-coordinate span { display: block; color: var(--teal-600); font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.context-coordinate strong { display: block; margin-top: 4px; color: var(--navy-900); font-size: 11px; }
.context-principle { display: flex; gap: 9px; align-items: center; padding-left: 16px; border-left: 1px solid var(--line); }
.principle-mark { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(16,191,194,.1); color: var(--teal-600); }
.context-principle p { margin: 0; color: var(--ink-500); font-size: 9px; line-height: 1.45; }
.context-principle strong { color: var(--ink-700); }

.timeline-section { margin-top: 24px; }
.timeline-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.timeline-heading h2, .sync-heading h2 { margin: 0; color: var(--navy-900); font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 20px; }
.timeline-nav { display: flex; gap: 5px; }
.timeline-nav button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--navy-900); }
.timeline-track-wrap { position: relative; }
.timeline-line { position: absolute; top: 19px; left: 0; right: 0; height: 1px; background: rgba(9,53,66,.16); }
.timeline-line span { position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 0 5px rgba(16,191,194,.12); }
.timeline-track { display: flex; gap: 10px; overflow-x: auto; padding: 6px 3px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(9,53,66,.18) transparent; }
.timeline-card { flex: 0 0 205px; scroll-snap-align: start; position: relative; margin-top: 14px; padding: 14px 13px 12px; border-radius: 12px; border: 1px solid var(--line); background: white; text-align: left; box-shadow: 0 4px 16px rgba(4,35,46,.05); transition: .18s ease; }
.timeline-card::before { content: ""; position: absolute; top: -16px; left: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--cat-color); border: 3px solid var(--paper-100); }
.timeline-card:hover, .timeline-card.is-selected { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cat-color), transparent 52%); box-shadow: 0 9px 25px rgba(4,35,46,.1); }
.timeline-card.is-selected { box-shadow: inset 3px 0 0 var(--cat-color), 0 9px 25px rgba(4,35,46,.1); }
.timeline-card .timeline-date { color: var(--cat-color); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.timeline-card strong { display: block; margin-top: 6px; color: var(--navy-900); font-size: 11px; line-height: 1.35; }
.timeline-card span { display: block; margin-top: 7px; color: var(--ink-500); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-empty { width: 100%; padding: 28px; text-align: center; color: var(--ink-500); border: 1px dashed var(--line); border-radius: 12px; font-size: 11px; background: rgba(255,255,255,.5); }

.sync-canvas { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.sync-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; }
.sync-heading > p { max-width: 460px; margin: 0; color: var(--ink-500); font-size: 10px; line-height: 1.5; text-align: right; }
.sync-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
.sync-insight { padding: 13px; border-radius: 12px; background: white; border: 1px solid var(--line); }
.sync-insight span { color: var(--teal-600); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; }
.sync-insight strong { display: block; margin-top: 5px; color: var(--navy-900); font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 500; }
.sync-insight p { margin: 5px 0 0; color: var(--ink-500); font-size: 8px; line-height: 1.45; }
.sync-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 10px; margin-top: 12px; }
.sync-card { border: 1px solid var(--line); border-radius: 13px; background: white; overflow: hidden; }
.sync-card header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(9,53,66,.035); border-bottom: 1px solid var(--line); }
.sync-card header strong { color: var(--navy-900); font-size: 11px; }
.sync-card header span { color: var(--teal-600); font-size: 8px; font-weight: 900; }
.sync-card-events { display: grid; gap: 1px; }
.sync-card-event { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; padding: 10px 12px; }
.sync-card-event:last-child { border-bottom: 0; }
.sync-card-event:hover { background: var(--paper-50); }
.sync-card-event time { color: var(--cat-color); font-size: 8px; font-weight: 900; }
.sync-card-event strong { display: block; margin-top: 3px; color: var(--ink-900); font-size: 10px; line-height: 1.35; }
.sync-card-event p { margin: 4px 0 0; color: var(--ink-500); font-size: 8px; line-height: 1.4; }
.sync-signals { display: flex; gap: 3px; margin-top: 7px; }
.sync-signals i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-color); }

.detail-view { padding: 22px 21px 40px; }
.detail-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-kicker .record-type { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-600); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.detail-kicker .record-type i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-category); }
.review-pill { border-radius: 999px; padding: 4px 7px; background: var(--paper-100); color: var(--ink-500); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.detail-title { margin: 12px 0 0; color: var(--navy-900); font-family: Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.12; font-weight: 500; }
.detail-date { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.detail-date span { border-radius: 6px; padding: 5px 7px; background: rgba(16,191,194,.08); color: var(--teal-600); font-size: 8px; font-weight: 900; }
.detail-lead { margin: 16px 0 0; color: var(--ink-700); font-size: 11px; line-height: 1.65; }
.detail-divider { height: 1px; background: var(--line); margin: 19px 0; }
.detail-section-title { margin: 0 0 10px; color: var(--navy-800); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.coordinate-card { display: grid; gap: 8px; padding: 12px; border-radius: 11px; border: 1px solid var(--line); background: white; }
.coordinate-row { display: grid; grid-template-columns: 80px 1fr; gap: 7px; font-size: 9px; }
.coordinate-row span { color: var(--ink-500); }
.coordinate-row strong { color: var(--ink-900); font-weight: 700; line-height: 1.4; }
.layer-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.layer-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 8px; color: var(--cat-color); background: color-mix(in srgb, var(--cat-color), white 90%); font-size: 8px; font-weight: 800; }
.layer-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cat-color); }
.facet-list { display: grid; gap: 7px; }
.facet-card { padding: 10px; border-left: 3px solid var(--cat-color); border-radius: 4px 9px 9px 4px; background: white; box-shadow: 0 3px 11px rgba(4,35,46,.04); }
.facet-card strong { display: block; color: var(--cat-color); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.facet-card p { margin: 4px 0 0; color: var(--ink-700); font-size: 9px; line-height: 1.5; }
.significance-card { padding: 12px; border-radius: 11px; background: var(--navy-900); color: white; position: relative; overflow: hidden; }
.significance-card::after { content: "“"; position: absolute; right: 8px; top: -18px; color: rgba(255,255,255,.08); font: 90px Georgia, serif; }
.significance-card p { position: relative; z-index: 1; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 12px; line-height: 1.55; }
.evidence-status { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.evidence-status div { padding: 9px; border-radius: 9px; background: white; border: 1px solid var(--line); }
.evidence-status span, .evidence-status strong { display: block; }
.evidence-status span { color: var(--ink-500); font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }
.evidence-status strong { margin-top: 4px; color: var(--navy-900); font-size: 9px; line-height: 1.35; text-transform: capitalize; }
.detail-sources { display: grid; gap: 7px; }
.detail-source { display: block; padding: 10px; border-radius: 9px; border: 1px solid var(--line); background: white; text-decoration: none; transition: .15s ease; }
.detail-source:hover { border-color: rgba(8,125,130,.38); transform: translateY(-1px); }
.detail-source span { color: var(--teal-600); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.detail-source strong { display: block; margin-top: 4px; color: var(--ink-900); font-size: 9px; line-height: 1.4; }
.detail-source em { display: block; margin-top: 4px; color: var(--ink-500); font-size: 7px; font-style: normal; }
.detail-empty { display: grid; place-items: center; text-align: center; min-height: 360px; color: var(--ink-500); }
.detail-empty span { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: rgba(16,191,194,.1); color: var(--teal-600); font-size: 25px; }
.detail-empty h3 { margin: 0; color: var(--navy-900); font-family: Georgia, serif; font-weight: 500; }
.detail-empty p { max-width: 260px; margin: 8px auto 0; font-size: 10px; line-height: 1.5; }
.detail-nav { display: flex; gap: 6px; margin-top: 18px; }
.detail-nav button { flex: 1; border: 1px solid var(--line); background: white; border-radius: 8px; padding: 8px; color: var(--navy-800); font-size: 9px; font-weight: 800; }
.detail-nav button:hover { border-color: var(--cyan-500); }
.sync-panel-hero { padding: 14px; border-radius: 13px; background: linear-gradient(145deg, var(--navy-950), var(--navy-800)); color: white; }
.sync-panel-hero .eyebrow { color: var(--cyan-300); }
.sync-panel-hero h2 { margin: 0; font: 500 24px/1.1 Georgia, serif; }
.sync-panel-hero p { margin: 8px 0 0; color: rgba(255,255,255,.67); font-size: 9px; line-height: 1.5; }
.sync-stat-list { display: grid; gap: 7px; margin-top: 14px; }
.sync-stat-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.sync-stat-row i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--cat-color); font-style: normal; }
.sync-stat-row strong { font-size: 9px; }
.sync-stat-row span { font-size: 11px; font-family: Georgia, serif; color: var(--navy-900); }
.question-list { display: grid; gap: 7px; }
.question-card { padding: 10px 11px; border-radius: 9px; background: rgba(16,191,194,.07); color: var(--ink-700); font-size: 9px; line-height: 1.5; }
.question-card::before { content: "?"; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; border-radius: 50%; color: var(--teal-600); background: white; font-weight: 900; }
.caution-card { padding: 11px; border-radius: 9px; background: #fff7e3; border: 1px solid #eedba8; color: #735a23; font-size: 8px; line-height: 1.5; }


/* Navegación por grandes períodos y dosieres de guerra */
.era-section { background: linear-gradient(150deg, rgba(8,125,130,.045), transparent 70%); }
.era-section .wide-select { margin-top: 5px; }
.war-shortcuts { display: grid; gap: 7px; margin-top: 10px; }
.war-shortcuts button {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 2px 9px;
  width: 100%;
  min-height: 62px;
  padding: 10px 11px;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(148,62,62,.2);
  border-radius: 11px;
  background: linear-gradient(135deg, white, #faf4f1);
  box-shadow: 0 4px 12px rgba(4,35,46,.035);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.war-shortcuts button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--militar);
}
.war-shortcuts button:hover { transform: translateY(-1px); border-color: rgba(148,62,62,.48); box-shadow: 0 8px 18px rgba(4,35,46,.08); }
.war-shortcuts button.is-active { color: white; border-color: var(--navy-900); background: linear-gradient(135deg, var(--navy-950), var(--navy-800)); }
.war-shortcuts button.is-active::after { background: var(--cyan-500); }
.war-shortcuts span { grid-row: 1 / span 2; align-self: center; color: var(--militar); font: 600 16px/1 Georgia, "Times New Roman", serif; }
.war-shortcuts strong { align-self: end; color: var(--navy-900); font-size: 9px; line-height: 1.25; }
.war-shortcuts em { align-self: start; color: var(--ink-500); font-size: 7px; font-style: normal; }
.war-shortcuts button.is-active span, .war-shortcuts button.is-active strong { color: white; }
.war-shortcuts button.is-active em { color: rgba(255,255,255,.62); }
.era-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.era-presets button { flex: 1 1 70px; border: 1px solid var(--line); border-radius: 7px; background: white; padding: 6px 7px; color: var(--ink-500); font-size: 7px; font-weight: 800; line-height: 1.25; }
.era-presets button:hover, .era-presets button.is-active { border-color: var(--cyan-500); background: rgba(16,191,194,.08); color: var(--navy-900); }

/* Lectura ampliada para Primera y Segunda Guerra Mundial */
.detail-kicker { flex-wrap: wrap; justify-content: flex-start; }
.detail-kicker .review-pill { margin-left: auto; }
.collection-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 8px; border-radius: 999px; background: rgba(148,62,62,.09); color: var(--militar); font-size: 7px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.war-dossier-card { overflow: hidden; border: 1px solid rgba(148,62,62,.2); border-radius: 13px; background: linear-gradient(160deg, #fff, #faf5f2); box-shadow: 0 7px 22px rgba(74,28,28,.06); }
.war-dossier-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 13px; color: white; background: linear-gradient(120deg, #3e1f24, var(--militar)); }
.war-dossier-card > header span, .war-dossier-card > header strong { display: block; }
.war-dossier-card > header span { color: rgba(255,255,255,.65); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.war-dossier-card > header strong { margin-top: 3px; font: 500 16px/1.2 Georgia, "Times New Roman", serif; }
.war-dossier-card > header em { max-width: 47%; padding: 5px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); font-size: 7px; font-style: normal; line-height: 1.35; text-align: right; }
.war-dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 11px; }
.war-dossier-grid article { padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.war-dossier-grid article.wide { grid-column: 1 / -1; }
.war-dossier-grid article.strategic { border-left: 3px solid var(--militar); }
.war-dossier-grid span, .war-dossier-lists > div > span { display: block; color: var(--ink-500); font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.war-dossier-grid strong { display: block; margin-top: 4px; color: var(--navy-900); font-size: 10px; line-height: 1.35; }
.war-dossier-grid p { margin: 4px 0 0; color: var(--ink-700); font-size: 9px; line-height: 1.48; }
.war-dossier-lists { display: grid; gap: 9px; padding: 0 11px 11px; }
.war-dossier-lists > div { padding-top: 9px; border-top: 1px dashed var(--line); }
.war-dossier-lists > div > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.war-dossier-lists i { padding: 4px 7px; border-radius: 999px; background: rgba(148,62,62,.07); color: #71383b; font-size: 7px; font-style: normal; line-height: 1.25; }
.context-analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.context-analysis-grid article { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.context-analysis-grid span { color: var(--teal-600); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.context-analysis-grid p { margin: 5px 0 0; color: var(--ink-700); font-size: 9px; line-height: 1.5; }
.marker-group.is-war-dossier .marker-halo { stroke: rgba(148,62,62,.24); stroke-width: 7; }
.marker-group.is-war-dossier .marker-core { stroke-width: 3; }


.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,22,29,.68); backdrop-filter: blur(6px); }
.modal-dialog { position: relative; width: min(1100px, 96vw); max-height: 91vh; overflow: auto; border-radius: 20px; background: var(--paper-50); box-shadow: 0 30px 100px rgba(0,0,0,.32); }
.modal-header { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; gap: 20px; padding: 22px 24px 17px; background: rgba(251,250,247,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; color: var(--navy-900); font: 500 27px/1.1 Georgia, serif; }
.modal-header p:last-child { margin: 7px 0 0; max-width: 700px; color: var(--ink-500); font-size: 10px; line-height: 1.5; }
.close-button { flex: 0 0 auto; width: 35px; height: 35px; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--navy-900); font-size: 21px; }
.modal-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 140px auto auto; gap: 8px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.modal-toolbar select { border: 1px solid var(--line); border-radius: 9px; background: white; padding: 9px; font-size: 10px; }
.modal-search { padding-block: 7px; }
.method-banner { display: flex; align-items: center; gap: 13px; margin: 14px 24px 0; padding: 12px 14px; border-radius: 11px; background: var(--navy-900); color: white; }
.method-banner strong { flex: 0 0 auto; color: var(--cyan-300); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.method-banner span { color: rgba(255,255,255,.72); font-size: 9px; line-height: 1.45; }
.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 24px 25px; }
.source-card { display: flex; flex-direction: column; min-height: 210px; padding: 14px; border-radius: 12px; background: white; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(4,35,46,.035); }
.source-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.source-card .institution { color: var(--teal-600); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.source-card .tier { padding: 3px 6px; border-radius: 999px; color: var(--navy-800); background: var(--paper-100); font-size: 7px; font-weight: 900; }
.source-card h3 { margin: 10px 0 0; color: var(--navy-900); font: 500 16px/1.25 Georgia, serif; }
.source-card .source-type { margin-top: 7px; color: var(--ink-500); font-size: 8px; }
.source-card .source-use { margin: 9px 0 0; color: var(--ink-700); font-size: 9px; line-height: 1.5; }
.source-card blockquote { margin: auto 0 0; padding-top: 11px; color: var(--ink-500); font-size: 8px; line-height: 1.45; border: 0; }
.source-card a { margin-top: 10px; color: var(--teal-600); font-size: 8px; font-weight: 900; text-decoration: none; }
.source-card a:hover { text-decoration: underline; }
.source-links { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.source-links a { margin-top: 0; }
.source-link-missing { margin-top: 9px; color: var(--ink-500); font-size: 8px; font-style: italic; }
.modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--paper-100); color: var(--ink-500); font-size: 9px; }
.danger-text-button { border: 0; background: transparent; color: var(--danger); font-size: 9px; font-weight: 800; }

.add-dialog { width: min(920px, 96vw); }
.event-form { padding: 18px 24px 25px; display: grid; gap: 13px; }
.event-form label { display: grid; gap: 6px; color: var(--ink-700); font-size: 9px; font-weight: 800; }
.event-form input, .event-form select, .event-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 9px 10px; color: var(--ink-900); font-size: 10px; resize: vertical; }
.event-form input:focus, .event-form select:focus, .event-form textarea:focus { border-color: var(--cyan-500); }
.form-grid { display: grid; gap: 10px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-grid.four { grid-template-columns: repeat(4, 1fr); }
.event-form fieldset { margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.event-form legend { padding: 0 7px; color: var(--navy-800); font-size: 9px; font-weight: 900; }
.form-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.form-category { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 6px !important; padding: 7px; border-radius: 7px; background: var(--paper-100); }
.form-category input { width: auto; accent-color: var(--cat-color); }
.form-category i { width: 7px; height: 7px; border-radius: 50%; background: var(--cat-color); }
.facet-details { border: 1px solid var(--line); border-radius: 10px; background: white; }
.facet-details summary { padding: 10px 12px; cursor: pointer; color: var(--navy-800); font-size: 9px; font-weight: 900; }
.facet-details > div { padding: 0 11px 11px; }
.source-form-block { display: grid; gap: 10px; padding: 13px; border-radius: 11px; background: rgba(16,191,194,.06); border: 1px solid rgba(8,125,130,.17); }
.source-form-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.source-form-heading > div strong, .source-form-heading > div span { display: block; }
.source-form-heading > div strong { color: var(--navy-900); font-size: 10px; }
.source-form-heading > div span { margin-top: 3px; color: var(--ink-500); font-size: 8px; }
.source-form-heading label { width: 160px; flex: 0 0 auto; }
.form-message { min-height: 16px; color: var(--danger); font-size: 9px; }
.form-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 3px; }
.form-footer > span { color: var(--ink-500); font-size: 8px; }
.form-footer > div { display: flex; gap: 7px; }
.observation-dialog { max-width: 900px; }
.observation-target {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgba(210,168,80,.34);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(210,168,80,.13), rgba(16,191,194,.06));
}
.observation-target span {
  color: var(--teal-600);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .14em;
}
.observation-target strong { color: var(--navy-900); font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.observation-target em { color: var(--ink-500); font-size: 9px; font-style: normal; }
.observation-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
.human-check { background: rgba(16,191,194,.05); }
.human-challenge-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 110px auto;
  gap: 10px;
  align-items: end;
}
.human-challenge-row > label { align-self: center; }
.consent-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 9px !important;
  line-height: 1.45;
}
.consent-check input { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; }
.observation-consents { display: grid; gap: 9px; padding: 12px; border-radius: 11px; background: var(--paper-100); }
.observation-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(210,168,80,.34);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(210,168,80,.12), rgba(16,191,194,.07));
}
.observation-callout span { color: var(--teal-600); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.observation-callout strong { display: block; margin-top: 4px; color: var(--navy-900); font-size: 12px; }
.observation-callout p { max-width: 540px; margin: 5px 0 0; color: var(--ink-500); font-size: 9px; line-height: 1.5; }
.observation-callout > div:last-child { display: grid; gap: 7px; min-width: 210px; }

.toast { position: fixed; z-index: 500; left: 50%; bottom: 25px; transform: translate(-50%, 25px); opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 10px; background: var(--navy-950); color: white; box-shadow: var(--shadow-md); font-size: 10px; font-weight: 700; transition: .22s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1280px) {
  .workspace { grid-template-columns: 260px minmax(520px, 1fr) 330px; }
  .control-section { padding-inline: 16px; }
  .atlas-stage { padding-inline: 20px; }
  .detail-view { padding-inline: 17px; }
  .topbar { grid-template-columns: minmax(210px, 1fr) auto minmax(200px, 1fr); padding-inline: 17px; }
  .local-badge:not(.open-access-badge), .icon-button em { display: none; }
}

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 1fr auto; height: auto; min-height: 74px; padding-block: 9px; }
  .mode-switch { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .control-panel, .detail-panel { position: static; height: auto; }
  .workspace { grid-template-columns: 250px minmax(0, 1fr); }
  .detail-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .detail-view { max-width: 850px; margin: 0 auto; }
  .source-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topbar { display: flex; flex-wrap: wrap; gap: 9px; }
  .brand { flex: 1; }
  .brand-copy small { display: none; }
  .header-actions .icon-button { display: none; }
  .primary-button { padding-inline: 11px; }
  .mode-switch { order: 3; width: 100%; }
  .mode-button { flex: 1; }
  .workspace { display: block; }
  .control-panel { border-right: 0; }
  .control-panel .control-section:not(.date-control):not(.search-section):not(.era-section), .control-panel .panel-footer { display: none; }
  .control-hero { display: none; }
  .date-control { position: static; top: auto; z-index: auto; background: var(--paper-50); }
  .atlas-stage { padding: 19px 13px 35px; }
  .stage-header { display: block; }
  .stage-metrics { margin-top: 14px; }
  .map-toolbar { align-items: flex-start; }
  .map-legend { display: none; }
  .map-viewport { min-height: 310px; aspect-ratio: auto; }
  .map-context-strip { grid-template-columns: 1fr; }
  .context-principle { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .sync-summary { grid-template-columns: 1fr; }
  .sync-heading { display: block; }
  .sync-heading > p { margin-top: 8px; text-align: left; }
  .detail-panel { position: static; }
  .modal { padding: 0; }
  .modal-dialog { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .modal-toolbar { grid-template-columns: 1fr 110px; }
  .modal-toolbar .secondary-button { grid-column: span 1; }
  .source-grid { grid-template-columns: 1fr; }
  .form-grid.two, .form-grid.four { grid-template-columns: 1fr; }
  .form-categories { grid-template-columns: repeat(2, 1fr); }
  .source-form-heading, .form-footer { align-items: stretch; flex-direction: column; }
  .source-form-heading label { width: auto; }
}


@media (max-width: 760px) {
  .war-dossier-grid, .context-analysis-grid { grid-template-columns: 1fr; }
  .war-dossier-grid article.wide { grid-column: auto; }
  .war-dossier-card > header { display: block; }
  .war-dossier-card > header em { display: inline-block; max-width: none; margin-top: 8px; text-align: left; }
}

/* Ampliación 2001–2026 */
.cutoff-header-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(16,191,194,.10);
  color: var(--cyan-300);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cutoff-pill {
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(16,191,194,.10);
  color: var(--teal-600);
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-kicker .cutoff-pill { margin-left: 0; }

.war-shortcuts .modern-shortcut {
  border-color: rgba(8,125,130,.25);
  background: linear-gradient(135deg, #fff, #edfafa);
}
.war-shortcuts .modern-shortcut::after { background: var(--teal-600); }
.war-shortcuts .modern-shortcut span { color: var(--teal-600); }
.war-shortcuts .modern-shortcut:hover {
  border-color: rgba(8,125,130,.52);
  box-shadow: 0 8px 18px rgba(8,125,130,.10);
}
.war-shortcuts .modern-shortcut.is-active {
  border-color: var(--teal-600);
  background: linear-gradient(135deg, var(--navy-950), var(--teal-600));
}

.contemporary-dossier-card {
  border-color: rgba(8,125,130,.22);
  background: linear-gradient(160deg, #fff, #f1fbfa);
  box-shadow: 0 7px 22px rgba(8,125,130,.07);
}
.contemporary-dossier-card > header {
  background: linear-gradient(120deg, var(--navy-950), var(--teal-600));
}
.contemporary-dossier-card .war-dossier-grid article.strategic {
  border-left-color: var(--cyan-500);
}
.contemporary-dossier-card .war-dossier-lists i {
  background: rgba(8,125,130,.08);
  color: var(--teal-600);
}

@media (max-width: 1280px) {
  .cutoff-header-badge { display: none; }
}

/* Ampliación 9999 a. C.–1 a. C. */
.range-labels { gap: 4px; align-items: flex-start; }
.range-labels span { max-width: 54px; text-align: center; line-height: 1.15; }
.range-labels span:first-child { text-align: left; }
.range-labels span:last-child { text-align: right; }
.year-model-hint {
  margin: 8px 0 0;
  padding: 7px 8px;
  border-left: 3px solid #9b773f;
  border-radius: 0 7px 7px 0;
  background: rgba(155,119,63,.07);
  color: #765a30;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.45;
}
.form-year-hint { margin: 0; font-size: 9px; }
.century-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.century-chips button { min-height: 28px; padding: 5px 3px; font-size: 7px; line-height: 1.15; }
.segmented.compact { flex-wrap: wrap; }
.segmented.compact button { flex: 1 1 13%; min-width: 31px; padding-inline: 2px; font-size: 8px; }

.war-shortcuts .prehistoric-shortcut {
  border-color: rgba(142,103,45,.28);
  background: linear-gradient(135deg, #fff, #fbf4e5);
}
.war-shortcuts .prehistoric-shortcut::after { background: #9b773f; }
.war-shortcuts .prehistoric-shortcut span { color: #8a672e; font-size: 13px; }
.war-shortcuts .prehistoric-shortcut:hover {
  border-color: rgba(142,103,45,.58);
  box-shadow: 0 8px 18px rgba(112,78,27,.10);
}
.war-shortcuts .prehistoric-shortcut.is-active {
  border-color: #9b773f;
  background: linear-gradient(135deg, #2e2619, #8a672e);
}

.archaeology-dossier-card {
  border-color: rgba(142,103,45,.24);
  background: linear-gradient(160deg, #fff, #fcf7eb);
  box-shadow: 0 7px 22px rgba(112,78,27,.07);
}
.archaeology-dossier-card > header {
  background: linear-gradient(120deg, #2e2619, #8a672e);
}
.archaeology-dossier-card .war-dossier-grid article.strategic {
  border-left-color: #9b773f;
}
.archaeology-dossier-card .war-dossier-lists i {
  background: rgba(142,103,45,.09);
  color: #765a30;
}
.marker-group.is-archaeology-dossier .marker-halo {
  stroke: rgba(155,119,63,.25);
  stroke-width: 7;
}
.marker-group.is-archaeology-dossier .marker-core { stroke-width: 3; }

@media (max-width: 760px) {
  .range-labels span:nth-child(2),
  .range-labels span:nth-child(3),
  .range-labels span:nth-child(5) { display: none; }
  .century-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cobertura mundial + conversión multicalendario */
.afroeurasia-land {
  fill: url(#landGradient);
  stroke: #98a493;
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}
.region-label { font-size: 8.5px; }
.region-africa { fill: rgba(124,83,34,.60); }
.region-asia { fill: rgba(102,60,89,.58); }
.region-europa { fill: rgba(7,43,57,.45); }

.continent-control { margin: 7px 0 10px; flex-wrap: wrap; }
.continent-control button { flex: 1 1 29%; min-width: 76px; padding-inline: 3px; font-size: 8px; }
.continent-control button:nth-child(2).is-active { color: #704b1e; }
.continent-control button:nth-child(4).is-active { color: #6a3d60; }

.calendar-control-section {
  background: linear-gradient(155deg, rgba(119,91,156,.055), transparent 70%);
}
.calendar-method-button { display: block; margin: 8px 0 0 auto; }
.calendar-mini-panel { margin-top: 8px; }
.calendar-mini-empty { margin: 0; color: var(--ink-500); font-size: 8px; line-height: 1.4; }
.calendar-mini-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(119,91,156,.20);
  border-radius: 10px;
  background: linear-gradient(145deg, #fff, #f7f3fb);
}
.calendar-mini-card > span {
  color: #775b9c;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.calendar-mini-card strong { color: var(--navy-900); font: 500 13px/1.3 Georgia, serif; }
.calendar-mini-card small { color: var(--ink-500); font-size: 8px; line-height: 1.45; }
.calendar-mini-card.is-na { background: #f4f1e9; border-color: var(--line); }
.calendar-mini-card.is-na > span { color: var(--ink-500); }
.calendar-mini-card.is-limited { border-style: dashed; }
.calendar-top-five-nav { display: block; margin-top: 9px; }
.calendar-top-five-nav > span { display: block; color: #775b9c; font-size: 7.5px; font-weight: 900; letter-spacing: .1em; }
.calendar-top-five-nav > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.calendar-top-five-nav button {
  position: relative;
  min-width: 0;
  min-height: 42px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 5px 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink-500);
}
.calendar-top-five-nav button:hover { border-color: rgba(119,91,156,.42); color: #775b9c; }
.calendar-top-five-nav button.is-selected { border-color: #775b9c; background: #775b9c; color: white; }
.calendar-top-five-nav button b { font-size: 7px; letter-spacing: .08em; }
.calendar-top-five-nav button span { min-width: 0; overflow: hidden; font-size: 6.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.calendar-top-five-nav button i { position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: #55ad70; }
.calendar-top-five-nav button.is-na i { background: #aaa396; }
.calendar-top-five-nav button.is-limited i { background: #d49b3d; }

.calendar-dossier-card {
  overflow: hidden;
  border: 1px solid rgba(119,91,156,.22);
  border-radius: 13px;
  background: linear-gradient(155deg, #fff, #faf8fc);
  box-shadow: 0 7px 22px rgba(74,52,100,.06);
}
.calendar-dossier-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  color: white;
  background: linear-gradient(120deg, var(--navy-950), #775b9c);
}
.calendar-dossier-card > header span,
.calendar-dossier-card > header strong { display: block; }
.calendar-dossier-card > header span { color: #ded1ef; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.calendar-dossier-card > header strong { margin-top: 3px; font-size: 10px; line-height: 1.3; }
.calendar-dossier-card > header em {
  max-width: 120px;
  color: rgba(255,255,255,.70);
  font-size: 7px;
  font-style: normal;
  line-height: 1.35;
  text-align: right;
}
.calendar-integrity-note { margin: 0; padding: 11px 13px 0; color: var(--ink-500); font-size: 8px; line-height: 1.5; }
.calendar-tier-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 11px 12px 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(119,91,156,.07);
}
.calendar-tier-heading span, .calendar-tier-heading strong { display: block; }
.calendar-tier-heading span { color: #775b9c; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.calendar-tier-heading strong { margin-top: 2px; color: var(--navy-900); font-size: 8px; }
.calendar-tier-heading small { color: var(--ink-500); font-size: 7px; text-align: right; }
.calendar-conversion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 11px 12px 13px; }
.calendar-primary-grid .calendar-conversion:last-child:nth-child(odd) { grid-column: 1 / -1; }
.calendar-conversion {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
}
.calendar-conversion.is-selected { border-color: #775b9c; box-shadow: inset 3px 0 0 #775b9c; }
.calendar-conversion.is-na { background: #f5f2eb; opacity: .78; }
.calendar-conversion.is-limited { border-style: dashed; }
.calendar-conversion div span,
.calendar-conversion div strong { display: block; }
.calendar-conversion div span { color: #775b9c; font-size: 6px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.calendar-conversion div strong { margin-top: 2px; color: var(--navy-900); font-size: 8px; }
.calendar-conversion p { margin: 7px 0 0; color: var(--ink-900); font: 500 10px/1.35 Georgia, serif; }
.calendar-conversion small { display: block; margin-top: 5px; color: var(--ink-500); font-size: 6.5px; line-height: 1.45; }
.calendar-complementary { border-top: 1px solid rgba(119,91,156,.13); }
.calendar-complementary summary, .calendar-method-complementary summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  color: #775b9c;
  cursor: pointer;
  list-style: none;
}
.calendar-complementary summary::-webkit-details-marker, .calendar-method-complementary summary::-webkit-details-marker { display: none; }
.calendar-complementary summary span, .calendar-method-complementary summary span { font-size: 8px; font-weight: 900; }
.calendar-complementary summary small, .calendar-method-complementary summary small { color: var(--ink-500); font-size: 7px; }
.calendar-complementary[open] summary, .calendar-method-complementary[open] summary { background: rgba(119,91,156,.045); }

.calendar-dialog { width: min(1050px, 96vw); }
.calendar-methodology-content { padding: 22px 24px 26px; }
.calendar-method-intro { max-width: 820px; }
.calendar-method-intro h3 { margin: 4px 0 0; color: var(--navy-900); font: 500 25px/1.18 Georgia, serif; }
.calendar-method-intro > p:last-child { margin: 10px 0 0; color: var(--ink-700); font-size: 10px; line-height: 1.65; }
.calendar-method-intro .calendar-selection-note { padding: 10px 12px; border-left: 3px solid #775b9c; background: rgba(119,91,156,.06); color: var(--ink-700); }
.methodology-tier-heading { margin: 18px 0 0; }
.calendar-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.calendar-primary-method-grid { margin-top: 10px; }
.calendar-primary-method-grid article:last-child:nth-child(odd) { grid-column: 1 / -1; }
.calendar-method-grid article { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.calendar-method-grid article > span { color: #775b9c; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.calendar-method-grid h4 { margin: 6px 0 0; color: var(--navy-900); font: 500 16px/1.2 Georgia, serif; }
.calendar-method-grid p { margin: 7px 0 0; color: var(--ink-700); font-size: 9px; line-height: 1.5; }
.calendar-method-grid small { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-500); font-size: 8px; line-height: 1.5; }
.calendar-method-complementary { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-50); overflow: hidden; }
.calendar-method-complementary summary { padding: 13px 15px; }
.calendar-method-complementary .calendar-method-grid { margin: 0; padding: 12px; }
.calendar-method-rules { margin-top: 16px; padding: 15px; border-radius: 12px; background: var(--navy-900); color: white; }
.calendar-method-rules h4 { margin: 0; color: var(--cyan-300); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.calendar-method-rules ul { margin: 10px 0 0; padding-left: 18px; columns: 2; column-gap: 28px; }
.calendar-method-rules li { break-inside: avoid; margin-bottom: 7px; color: rgba(255,255,255,.73); font-size: 8.5px; line-height: 1.5; }

.open-knowledge-dialog { width: min(920px, 96vw); }
.open-knowledge-dialog .modal-header p:last-child { font-size: 11px; }
.open-knowledge-content { padding: 20px 24px 24px; }
.open-knowledge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.open-knowledge-grid article { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.open-knowledge-grid article > span { color: var(--cyan-500); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.open-knowledge-grid h3 { margin: 6px 0 0; color: var(--navy-900); font: 500 18px/1.2 Georgia, serif; }
.open-knowledge-grid p { margin: 7px 0 0; color: var(--ink-700); font-size: 10.5px; line-height: 1.55; }
.open-license-band { display: grid; grid-template-columns: minmax(260px, .75fr) 1fr; gap: 20px; align-items: center; margin-top: 13px; padding: 15px; border-radius: 12px; background: var(--navy-900); color: white; }
.open-license-band span, .open-license-band strong { display: block; }
.open-license-band span { color: var(--cyan-300); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.open-license-band strong { margin-top: 4px; font: 500 16px/1.3 Georgia, serif; }
.open-license-band p { margin: 0; color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.55; }
.open-knowledge-note { margin: 12px 0 0; color: var(--ink-500); font-size: 10px; line-height: 1.5; }
.open-knowledge-footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.open-knowledge-footer a.secondary-button { display: inline-flex; align-items: center; text-decoration: none; }

.intercontinental-presets { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(9,53,66,.18); }
.intercontinental-presets > span { color: #775b9c; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.intercontinental-presets .era-presets { margin-top: 7px; }
.intercontinental-presets .era-presets button { border-color: rgba(119,91,156,.20); background: linear-gradient(145deg, #fff, #f8f5fb); }
.intercontinental-presets .era-presets button:hover,
.intercontinental-presets .era-presets button.is-active { border-color: #775b9c; background: rgba(119,91,156,.09); }

@media (max-width: 760px) {
  .control-panel .control-section.calendar-control-section,
  .control-panel .control-section.geography-control-section { display: block; }
  .calendar-conversion-grid, .calendar-method-grid { grid-template-columns: 1fr; }
  .calendar-primary-grid .calendar-conversion:last-child:nth-child(odd),
  .calendar-primary-method-grid article:last-child:nth-child(odd) { grid-column: auto; }
  .calendar-method-rules ul { columns: 1; }
  .calendar-dossier-card > header { display: block; }
  .calendar-dossier-card > header em { display: block; max-width: none; margin-top: 7px; text-align: left; }
  .calendar-tier-heading { align-items: flex-start; }
  .open-knowledge-grid, .open-license-band { grid-template-columns: 1fr; }
  .open-knowledge-content { padding-inline: 16px; }
  .open-knowledge-footer { align-items: stretch; flex-direction: column; }
  .open-knowledge-footer > div { justify-content: flex-start; }
  .brand-copy strong b { display: block; margin: 2px 0 0; }
  .open-access-badge { width: 28px; overflow: hidden; padding-right: 8px; border-right: 0; font-size: 0; }
  .map-actions { width: 100%; gap: 7px; }
  .globe-mode-badge { min-height: 42px; }
  .map-zoom-button { width: 44px; height: 44px; }
  .map-zoom-controls output { min-width: 44px; }
  .no-borders-badge { display: none; }
  .continent-control button { flex-basis: 30%; min-height: 40px; }
  .human-challenge-row, .observation-callout { grid-template-columns: 1fr; }
  .observation-callout > div:last-child { min-width: 0; }
  .observation-callout button { width: 100%; }
}

@media (max-width: 760px) {
  .control-panel .control-section.calendar-control-section,
  .control-panel .control-section.geography-control-section { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Vista prioritaria del mapa · interfaz progresiva */
.topbar {
  height: 70px;
  grid-template-columns: minmax(250px, 1fr) auto minmax(210px, 1fr);
  gap: 16px;
  padding-inline: 20px;
}
.brand-copy small,
.mode-button small,
.cutoff-header-badge { display: none !important; }
.open-access-badge {
  display: inline-flex !important;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 9px;
}
.mode-switch { padding: 3px; border-radius: 11px; }
.mode-button { min-height: 38px; gap: 7px; padding: 6px 11px 6px 7px; }
.mode-button.is-active { color: white; background: rgba(255,255,255,.12); box-shadow: none; }
.mode-button.is-active .mode-icon { color: var(--navy-950); background: var(--cyan-300); }
.header-actions { gap: 7px; }
#openAddEvent {
  color: white;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  box-shadow: none;
}
#openAddEvent:hover { background: rgba(255,255,255,.13); }

.workspace { display: block; min-height: calc(100vh - 70px); }
.atlas-stage {
  display: flex;
  flex-direction: column;
  width: min(100%, 1720px);
  min-height: calc(100vh - 70px);
  margin: 0 auto;
  padding: 16px clamp(14px, 2.4vw, 34px) 42px;
  background: var(--paper-100);
}
.map-card { order: 1; }
.stage-header { order: 2; align-items: center; gap: 18px; margin: 13px 4px 0; }
.timeline-section { order: 3; }
.sync-canvas { order: 4; }
.stage-header h1 { font-size: clamp(24px, 2.2vw, 34px); }
.stage-header > div:first-child > p:last-child { max-width: 820px; margin-top: 5px; font-size: 12px; }
.stage-metrics,
.map-legend,
.context-principle { display: none; }
.map-card { border-radius: 18px; box-shadow: none; }
.map-toolbar { min-height: 54px; padding: 7px 10px; background: rgba(255,255,255,.96); }
.map-actions { width: 100%; justify-content: flex-start; gap: 7px; }
.globe-mode-badge,
.map-panel-action,
#toggleLabels,
#fitMap { min-height: 40px; padding-inline: 12px; font-size: 11px; }
.map-panel-action {
  color: var(--navy-900);
  border: 1px solid var(--line);
  background: var(--paper-50);
}
.map-panel-action:hover,
.map-panel-action[aria-expanded="true"] { color: white; background: var(--teal-600); }
.map-zoom-button { width: 40px; height: 40px; }
.map-zoom-controls output { min-width: 52px; font-size: 10px; }
.map-viewport {
  min-height: clamp(520px, calc(100vh - 185px), 900px);
  aspect-ratio: auto;
}
.map-context-strip {
  display: block;
  min-height: 48px;
  padding: 10px 15px;
}
.context-coordinate {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.context-coordinate span { flex: 0 0 auto; font-size: 9px; }
.context-coordinate strong { margin: 0; font-size: 12px; }
.timeline-section { margin-top: 20px; }

.control-panel,
.detail-panel {
  position: fixed;
  z-index: 250;
  top: 0;
  bottom: 0;
  width: min(370px, 92vw);
  height: 100dvh;
  overflow-y: auto;
  border: 0;
  box-shadow: 0 24px 80px rgba(4,35,46,.28);
  transition: transform .24s ease, visibility .24s ease;
  visibility: hidden;
}
.control-panel { left: 0; transform: translateX(-104%); }
.detail-panel { right: 0; transform: translateX(104%); }
body.filters-open .control-panel,
body.details-open .detail-panel { transform: translateX(0); visibility: visible; }
.drawer-header {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(105deg, var(--navy-950), var(--navy-800));
}
.drawer-header span,
.drawer-header strong { display: block; }
.drawer-header span { color: var(--cyan-300); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.drawer-header strong { margin-top: 3px; font: 500 18px/1.15 Georgia, serif; }
.drawer-header button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: white;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  font-size: 22px;
}
.drawer-header button:hover { background: rgba(255,255,255,.16); }
.panel-backdrop {
  position: fixed;
  z-index: 240;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(4,24,32,.42);
  backdrop-filter: blur(2px);
}
.control-panel .section-heading,
.control-panel .category-filter .category-name { font-size: 12px; }
.control-panel .field-label,
.control-panel .field-help,
.control-panel .year-model-hint,
.control-panel .panel-footer small { font-size: 11px; }
.control-panel .wide-select,
.control-panel .year-entry-row input,
.control-panel .year-entry-row select { min-height: 42px; font-size: 12px; }
.detail-panel .detail-view { padding-top: 18px; }

@media (max-width: 1050px) {
  .topbar { height: auto; min-height: 66px; }
  .workspace { min-height: calc(100vh - 66px); }
  .atlas-stage { min-height: calc(100vh - 66px); }
  .control-panel,
  .detail-panel { position: fixed; height: 100dvh; }
}

@media (max-width: 760px) {
  .topbar {
    display: grid;
    min-height: 98px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 7px 10px;
  }
  .brand-mark { width: 32px; height: 32px; }
  .brand-copy strong { font-size: 11px; }
  .brand-copy strong b { display: none; }
  .header-actions { gap: 4px; }
  .kids-entry-link { width: 42px; min-height: 42px; justify-content: center; padding: 0; font-size: 0; }
  .kids-entry-link span { font-size: 18px; }
  .open-access-badge { width: 34px; min-height: 34px; padding: 0 8px; border-right: 1px solid rgba(255,255,255,.18); font-size: 0; }
  .header-actions .icon-button { display: inline-flex; width: 42px; height: 42px; justify-content: center; }
  .header-actions .icon-button em { display: none; }
  #openAddEvent { width: 42px; height: 42px; padding: 0; font-size: 0; }
  #openAddEvent span { font-size: 19px; }
  .mode-switch { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; }
  .mode-button { flex: 1; justify-content: center; min-height: 36px; }
  .mode-icon { width: 24px; height: 24px; }
  .atlas-stage { padding: 9px 7px 30px; }
  .stage-header { display: block; margin: 11px 5px 0; }
  .stage-header .eyebrow { margin-bottom: 4px; font-size: 8px; }
  .stage-header h1 { font-size: 21px; }
  .stage-header > div:first-child > p:last-child { display: none; }
  .map-card { border-radius: 13px; }
  .map-toolbar { align-items: stretch; padding: 7px; }
  .map-actions { gap: 6px; }
  .globe-mode-badge { flex: 1 1 210px; min-height: 44px; justify-content: center; font-size: 10px; }
  .map-zoom-button { width: 44px; height: 44px; }
  .map-panel-action,
  #toggleLabels,
  #fitMap { min-height: 44px; font-size: 11px; }
  .map-viewport { min-height: max(470px, calc(100svh - 220px)); }
  .boundary-note { flex: 1 1 100%; text-align: center; }
  .map-context-strip { min-height: 44px; padding: 9px 11px; }
  .context-coordinate { display: grid; gap: 2px; }
  .context-coordinate span { font-size: 8px; }
  .context-coordinate strong { font-size: 11px; }
  .timeline-heading h2 { font-size: 18px; }
  .control-panel,
  .detail-panel { width: min(360px, 94vw); }
  .control-panel .control-section,
  .control-panel .panel-footer { display: block !important; }
}

/* Lenguaje visual INCONFIN · observatorio histórico */
.topbar {
  border-bottom-color: rgba(16,191,194,.38);
  box-shadow: 0 12px 34px rgba(3,24,32,.2), inset 0 -1px 0 rgba(210,168,80,.2);
}
.brand-mark {
  filter: drop-shadow(0 0 12px rgba(16,191,194,.34));
}
.brand-mark i:nth-child(3) { box-shadow: 0 0 18px rgba(16,191,194,.34); }
.atlas-stage {
  background:
    radial-gradient(circle at 7% 8%, rgba(16,191,194,.075), transparent 23%),
    radial-gradient(circle at 92% 22%, rgba(210,168,80,.07), transparent 20%),
    var(--paper-100);
}
.map-card {
  position: relative;
  isolation: isolate;
  border-color: rgba(16,191,194,.3);
  background: var(--navy-950);
  box-shadow:
    0 24px 64px rgba(3,28,37,.18),
    0 0 0 1px rgba(16,191,194,.08),
    0 0 40px rgba(16,191,194,.07);
}
.map-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid rgba(131,222,219,.14);
  border-radius: inherit;
  pointer-events: none;
}
.map-toolbar {
  position: relative;
  z-index: 4;
  color: white;
  border-bottom-color: rgba(131,222,219,.16);
  background:
    linear-gradient(90deg, rgba(16,191,194,.08), transparent 38%, rgba(210,168,80,.05)),
    rgba(6,31,42,.94);
  backdrop-filter: blur(16px);
}
.globe-mode-badge {
  color: var(--cyan-300);
  border: 1px solid rgba(16,191,194,.38);
  background: rgba(16,191,194,.1);
  box-shadow: inset 0 0 18px rgba(16,191,194,.06), 0 0 20px rgba(16,191,194,.08);
}
.map-toolbar .map-zoom-controls {
  border-color: rgba(131,222,219,.18);
  background: rgba(255,255,255,.07);
}
.map-toolbar .map-zoom-button,
.map-toolbar .map-action {
  color: rgba(255,255,255,.84);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
}
.map-toolbar .map-zoom-button:hover,
.map-toolbar .map-action:hover,
.map-toolbar .map-action[aria-expanded="true"],
.map-toolbar .map-action[aria-pressed="true"] {
  color: var(--navy-950);
  border-color: var(--cyan-300);
  background: var(--cyan-300);
  box-shadow: 0 0 20px rgba(16,191,194,.2);
}
.map-toolbar .map-zoom-controls output { color: var(--cyan-300); }
.map-toolbar .map-zoom-button:disabled { color: rgba(255,255,255,.28); background: transparent; }
.boundary-note {
  color: var(--gold-300);
  border: 1px solid rgba(210,168,80,.28);
  background: rgba(210,168,80,.09);
}
.map-viewport::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(131,222,219,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131,222,219,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, transparent 42%, rgba(16,191,194,.055) 72%, transparent 78%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  mix-blend-mode: screen;
  animation: inconfinTelemetry 18s linear infinite;
}
.globe-canvas { filter: saturate(1.08) contrast(1.035); }
#globeRegionLayer,
#globeLabelLayer,
#globeMarkerLayer,
.map-axis,
.map-attribution { position: relative; z-index: 3; }
.marker-group.is-selected .marker-core {
  filter: drop-shadow(0 0 7px rgba(131,222,219,.9));
}
.map-context-strip {
  position: relative;
  z-index: 4;
  color: rgba(255,255,255,.76);
  border-top-color: rgba(131,222,219,.14);
  background: linear-gradient(90deg, var(--navy-950), var(--navy-900));
}
.map-context-strip .context-coordinate span { color: var(--cyan-300); }
.map-context-strip .context-coordinate strong { color: white; }

@keyframes inconfinTelemetry {
  from { background-position: 0 0, 0 0, center; }
  to { background-position: 42px 42px, -42px 42px, center; }
}

/* Explorador espacial · Tierra, Sistema Solar y exoplanetas */
.space-launch-button {
  color: var(--gold-300) !important;
  border-color: rgba(210,168,80,.34) !important;
  background: rgba(210,168,80,.08) !important;
}
.space-launch-button:hover,
.space-launch-button[aria-expanded="true"] {
  color: var(--navy-950) !important;
  background: var(--gold-300) !important;
  box-shadow: 0 0 24px rgba(210,168,80,.22) !important;
}
body.space-open { overflow: hidden; }
.space-explorer {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: white;
  background:
    radial-gradient(circle at 14% 14%, rgba(16,191,194,.16), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(210,168,80,.11), transparent 28%),
    #03131b;
}
.space-explorer::before {
  content: none;
}
.space-header {
  position: relative;
  z-index: 3;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) auto minmax(48px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(131,222,219,.18);
  background: rgba(6,31,42,.82);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 38px rgba(0,0,0,.25);
}
.space-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.space-brand > span:last-child { min-width: 0; }
.space-brand strong,
.space-brand small { display: block; }
.space-brand strong { font-size: 12px; letter-spacing: .16em; }
.space-brand small { margin-top: 4px; color: var(--cyan-300); font-size: 8px; letter-spacing: .12em; }
.space-focus {
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}
.space-focus button {
  min-height: 42px;
  padding: 8px 13px;
  color: rgba(255,255,255,.64);
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}
.space-focus button:hover { color: white; background: rgba(255,255,255,.07); }
.space-focus button[aria-pressed="true"] {
  color: var(--navy-950);
  background: var(--cyan-300);
  box-shadow: 0 0 24px rgba(16,191,194,.22);
}
.space-close {
  width: 46px;
  height: 46px;
  justify-self: end;
  color: white;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  font-size: 25px;
}
.space-close:hover { color: var(--navy-950); border-color: var(--gold-300); background: var(--gold-300); }
.space-layout {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: #020d13;
}
.space-viewport {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #020d13;
  cursor: grab;
  touch-action: none;
}
.space-viewport:active { cursor: grabbing; }
.space-viewport:focus-visible { outline: 4px solid rgba(16,191,194,.48); outline-offset: -4px; }
#spaceCanvas { display: block; width: 100%; height: 100%; }
.space-hud {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  gap: 3px;
  padding: 10px 13px;
  border: 1px solid rgba(131,222,219,.18);
  border-radius: 10px;
  background: rgba(3,19,27,.58);
  backdrop-filter: blur(12px);
}
.space-hud span { color: var(--cyan-300); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.space-hud strong { font-size: 12px; letter-spacing: .06em; }
.space-camera-controls {
  position: absolute;
  z-index: 4;
  top: 82px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(131,222,219,.18);
  border-radius: 11px;
  background: rgba(3,19,27,.64);
  backdrop-filter: blur(12px);
}
.space-camera-controls button {
  min-width: 42px;
  min-height: 42px;
  padding: 8px 10px;
  color: white;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  font-size: 11px;
  font-weight: 900;
}
.space-camera-controls button:hover { color: var(--navy-950); border-color: var(--cyan-300); background: var(--cyan-300); }
.space-camera-controls button:disabled { opacity: .35; }
.space-camera-controls output { min-width: 50px; color: var(--cyan-300); text-align: center; font-size: 10px; font-weight: 900; }
.space-inspector {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: min(360px, 35vw);
  min-height: 0;
  overflow-y: auto;
  padding: 22px 20px 28px;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(131,222,219,.2);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(16,191,194,.055), transparent 32%),
    rgba(6,31,42,.9);
  backdrop-filter: blur(20px);
  box-shadow: 0 22px 54px rgba(0,0,0,.34), inset 0 0 32px rgba(16,191,194,.035);
  scrollbar-color: rgba(16,191,194,.65) rgba(255,255,255,.05);
  scrollbar-width: thin;
}
.space-inspector::-webkit-scrollbar { width: 8px; }
.space-inspector::-webkit-scrollbar-track { background: rgba(255,255,255,.045); }
.space-inspector::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(16,191,194,.58); }
.space-eyebrow { margin: 0 0 9px; color: var(--cyan-300); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.space-inspector h2 { margin: 0; color: white; font: 500 clamp(22px, 1.8vw, 30px)/1.08 Georgia, serif; }
.space-inspector > p:not(.space-eyebrow) { margin: 13px 0 0; color: rgba(255,255,255,.64); font-size: 12px; line-height: 1.6; }
.space-layer-panel {
  position: relative;
  margin: 20px 0 0;
  padding: 15px 12px 12px;
  border: 1px solid rgba(131,222,219,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.space-layer-panel legend {
  padding: 0 7px;
  color: var(--cyan-300);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.space-layer-actions { display: flex; gap: 6px; margin-bottom: 9px; }
.space-layer-actions button {
  min-height: 34px;
  padding: 6px 10px;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  font-size: 9px;
  font-weight: 900;
}
.space-layer-actions button:hover { color: var(--navy-950); border-color: var(--gold-300); background: var(--gold-300); }
.space-layer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.space-layer-grid label { position: relative; min-width: 0; cursor: pointer; }
.space-layer-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.space-layer-grid span {
  min-height: 46px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.15;
}
.space-layer-grid i {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: transparent;
}
.space-layer-grid small { color: rgba(255,255,255,.36); font-size: 7px; font-weight: 800; }
.space-layer-grid input:checked + span {
  color: white;
  border-color: rgba(16,191,194,.34);
  background: rgba(16,191,194,.1);
  box-shadow: inset 0 0 18px rgba(16,191,194,.035);
}
.space-layer-grid input:checked + span i { border-color: var(--cyan-300); background: var(--cyan-300); box-shadow: 0 0 10px rgba(16,191,194,.45); }
.space-layer-grid input:focus-visible + span { outline: 3px solid rgba(131,222,219,.5); outline-offset: 2px; }
.space-layer-status { margin: 10px 2px 0; color: rgba(255,255,255,.52); font-size: 9px; line-height: 1.45; }
.space-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 0; }
.space-facts div { min-width: 0; padding: 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.035); }
.space-facts dt { color: rgba(255,255,255,.45); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.space-facts dd { margin: 5px 0 0; color: white; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.space-search { display: grid; gap: 7px; margin-top: 20px; color: var(--cyan-300); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.space-search input {
  min-height: 44px;
  width: 100%;
  color: white;
  border: 1px solid rgba(131,222,219,.22);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  font-size: 12px;
}
.world-picker-label { display: grid; gap: 7px; margin-top: 18px; color: var(--cyan-300); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.world-picker-label select {
  min-height: 44px;
  width: 100%;
  padding: 9px 11px;
  color: white;
  border: 1px solid rgba(131,222,219,.22);
  border-radius: 10px;
  background: #0a3340;
  font-size: 12px;
  font-weight: 800;
}
.space-sources { margin-top: 23px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.09); }
.space-sources summary { color: white; font-size: 11px; font-weight: 900; cursor: pointer; }
.space-sources a { display: block; margin-top: 10px; color: var(--cyan-300); font-size: 10px; line-height: 1.35; }
.space-sources p { color: rgba(255,255,255,.48); font-size: 9px; line-height: 1.5; }
.space-footer {
  position: relative;
  z-index: 3;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 20px;
  color: rgba(255,255,255,.5);
  border-top: 1px solid rgba(131,222,219,.16);
  background: var(--navy-950);
  font-size: 9px;
  letter-spacing: .05em;
}
.space-footer strong { color: var(--gold-300); font-weight: 700; }

@media (max-width: 980px) {
  .space-header { grid-template-columns: 1fr auto; }
  .space-focus { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
  .space-focus button { flex: 1 0 auto; }
  .space-close { grid-column: 2; grid-row: 1; }
  .space-layout { display: grid; grid-template-rows: minmax(440px, 60dvh) auto; overflow-y: auto; }
  .space-viewport { min-height: 420px; touch-action: pan-y; }
  .space-inspector { position: static; width: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
}

@media (max-width: 980px) and (max-height: 650px) {
  .space-layout { grid-template-rows: minmax(300px, 50dvh) auto; }
  .space-viewport { min-height: 300px; }
}

@media (max-width: 620px) {
  .space-header { min-height: 70px; padding: 8px 10px; gap: 8px; }
  .space-brand .brand-mark { width: 30px; height: 30px; }
  .space-brand strong { font-size: 10px; }
  .space-brand small { display: none; }
  .space-focus { gap: 3px; padding: 3px; }
  .space-focus button { min-height: 42px; padding-inline: 10px; font-size: 9px; }
  .space-layout { grid-template-rows: minmax(420px, 58dvh) auto; }
  .space-viewport { min-height: 420px; }
  .space-hud { top: 12px; left: 12px; }
  .space-camera-controls { top: 70px; left: 12px; }
  .space-camera-controls button { min-width: 44px; min-height: 44px; }
  .space-camera-controls button:last-child { display: none; }
  .space-inspector { padding: 22px 17px 30px; }
  .space-facts { grid-template-columns: 1fr 1fr; }
  .space-layer-grid { grid-template-columns: 1fr 1fr; }
  .space-footer { display: grid; gap: 3px; padding-inline: 12px; }
}

@media (max-width: 620px) and (max-height: 650px) {
  .space-layout { grid-template-rows: minmax(300px, 50dvh) auto; }
  .space-viewport { min-height: 300px; }
}

/* 0.13.1 · composición horizontal y puerta Adultos / Niñas y niños */
.audience-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: min(390px, 38vw);
  padding: 4px;
  border: 1px solid rgba(131,222,219,.28);
  border-radius: 15px;
  background: rgba(255,255,255,.065);
  box-shadow: inset 0 0 24px rgba(16,191,194,.045);
}
.audience-switch a {
  min-height: 48px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 5px 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--paper-100);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.audience-switch a small {
  color: rgba(244,241,233,.62);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
}
.audience-switch a:hover,
.audience-switch a:focus-visible {
  color: var(--navy-950);
  background: var(--cyan-300);
}
.audience-switch a:hover small,
.audience-switch a:focus-visible small { color: rgba(6,31,42,.7); }
.audience-switch a[aria-current="page"] {
  color: var(--navy-950);
  border-color: rgba(210,168,80,.58);
  background: var(--paper-100);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 -3px 0 var(--gold-500);
}
.audience-switch a[aria-current="page"] small { color: var(--teal-600); }

.map-mode-switch {
  flex: 0 1 auto;
  grid-column: auto;
  grid-row: auto;
  order: 0;
  width: auto;
  justify-self: auto;
  border-color: rgba(131,222,219,.18);
  background: rgba(255,255,255,.055);
}
.map-mode-switch .mode-button { min-height: 40px; }

.map-card {
  width: min(100%, 1500px);
  margin-inline: auto;
}
.map-viewport {
  width: 100%;
  min-height: 0;
  aspect-ratio: 5 / 3;
}
#globeCanvas {
  object-fit: contain;
  object-position: center;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(330px, auto);
    gap: 8px 14px;
  }
  .topbar > .audience-switch { grid-column: 2; grid-row: 1; }
  .topbar > .header-actions { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
}

@media (max-width: 760px) {
  .topbar > .audience-switch {
    order: 3;
    width: 100%;
    min-width: 0;
  }
  .audience-switch a { min-height: 46px; padding-inline: 8px; }
  .map-mode-switch { order: 0; width: 100%; }
}

@media (max-width: 420px) {
  .audience-switch a small { font-size: 7px; }
}

/* 0.14 · identidad INCONFIN, autoría y control de misión */
.topbar::after,
.atlas-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--inconfin-cyan) 0 38%, var(--inconfin-teal) 38% 74%, var(--inconfin-gold) 74%);
}

.creator-ribbon {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 18px;
  color: var(--inconfin-navy);
  border-bottom: 1px solid rgba(6,31,42,.12);
  background: linear-gradient(90deg, var(--inconfin-cyan), #83dedb 58%, var(--inconfin-gold));
  font-size: 9px;
  letter-spacing: .08em;
  text-align: center;
}
.creator-ribbon span { font-weight: 900; }
.creator-ribbon strong { font-size: 10px; letter-spacing: .025em; }

.map-card { position: relative; }
.mission-dock {
  position: absolute;
  z-index: 18;
  top: 70px;
  left: 16px;
  width: min(350px, calc(100% - 32px));
  padding: 12px;
  color: white;
  border: 1px solid rgba(131,222,219,.5);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(6,31,42,.96), rgba(8,125,130,.92));
  box-shadow: 0 18px 48px rgba(2,18,25,.3), inset 0 0 28px rgba(16,191,194,.1);
  backdrop-filter: blur(15px);
}
.mission-dock > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 9px; }
.mission-dock > header span { color: var(--inconfin-cyan); font-size: 8px; font-weight: 950; letter-spacing: .16em; }
.mission-dock > header strong { color: var(--inconfin-ivory); font: 600 14px/1 Georgia, serif; }
.mission-dock > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mission-destination {
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
  padding: 8px 9px;
  color: white;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.075);
  text-align: left;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mission-destination > span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; color: var(--inconfin-cyan); border-radius: 50%; background: rgba(16,191,194,.16); font-size: 18px; }
.mission-destination strong { align-self: end; font-size: 10px; line-height: 1.05; }
.mission-destination small { align-self: start; color: rgba(255,255,255,.62); font-size: 7px; font-weight: 800; }
.mission-destination:hover,
.mission-destination:focus-visible { transform: translateY(-2px); border-color: var(--inconfin-cyan); background: rgba(16,191,194,.2); }
.mission-destination.is-moon {
  color: var(--inconfin-navy);
  border-color: var(--inconfin-gold);
  background: linear-gradient(135deg, var(--inconfin-gold), #f2dda7);
  box-shadow: 0 0 0 1px rgba(210,168,80,.2), 0 8px 20px rgba(210,168,80,.2);
}
.mission-destination.is-moon > span { color: var(--inconfin-navy); background: rgba(255,255,255,.46); animation: moonDockPulse 2.4s ease-in-out infinite; }
.mission-destination.is-moon small { color: rgba(6,31,42,.68); }
@keyframes moonDockPulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(255,255,255,0); } }

.atlas-footer {
  position: relative;
  min-height: 108px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(340px, auto) minmax(220px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 24px clamp(20px, 4vw, 58px) 28px;
  color: var(--inconfin-ivory);
  border-top: 1px solid rgba(16,191,194,.45);
  background: linear-gradient(110deg, var(--inconfin-navy), #0b4654 58%, var(--inconfin-teal));
}
.atlas-footer::before { top: 0; bottom: auto; }
.atlas-footer-brand { display: flex; align-items: center; gap: 12px; }
.atlas-footer-brand > span:last-child { display: grid; gap: 4px; }
.atlas-footer-brand strong { font-size: 13px; letter-spacing: .12em; }
.atlas-footer-brand small { color: var(--cyan-300); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.atlas-footer p { display: grid; gap: 4px; margin: 0; text-align: center; }
.atlas-footer p strong { color: var(--gold-300); font-size: 12px; }
.atlas-footer p span { color: rgba(255,255,255,.66); font-size: 9px; line-height: 1.45; }
.atlas-footer nav { justify-self: end; display: flex; gap: 8px; }
.atlas-footer nav a { min-height: 40px; display: grid; place-items: center; padding: 0 13px; color: var(--inconfin-navy); border-radius: 10px; background: var(--inconfin-cyan); font-size: 9px; font-weight: 900; text-decoration: none; }
.atlas-footer nav a:last-child { background: var(--inconfin-gold); }

.space-focus button[data-space-focus="moon"] { color: var(--gold-300); border-color: rgba(210,168,80,.42); }
.space-focus button[data-space-focus="moon"][aria-pressed="true"] { color: var(--navy-950); background: var(--gold-300); box-shadow: 0 0 24px rgba(210,168,80,.28); }
.space-moon-feature {
  position: relative;
  margin: 18px 0 0;
  overflow: hidden;
  border: 1px solid rgba(210,168,80,.62);
  border-radius: 16px;
  background: var(--navy-950);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.space-moon-feature img { width: 100%; height: 170px; display: block; object-fit: cover; filter: contrast(1.06); }
.space-moon-feature figcaption { display: grid; gap: 3px; padding: 11px 12px 13px; }
.space-moon-feature figcaption strong { color: white; font-size: 11px; }
.space-moon-feature figcaption span { color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.35; }
.space-moon-feature figcaption a,
.space-world-source { color: var(--gold-300); font-size: 9px; font-weight: 900; text-decoration: none; }
.space-world-source { min-height: 40px; display: flex; align-items: center; justify-content: center; margin-top: 10px; padding: 7px 10px; border: 1px solid rgba(210,168,80,.42); border-radius: 10px; background: rgba(210,168,80,.09); }
.space-creator { color: var(--cyan-300); font-weight: 900; }

@media (max-width: 980px) {
  .mission-dock { width: min(330px, calc(100% - 24px)); left: 12px; }
  .atlas-footer { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .atlas-footer-brand, .atlas-footer nav { justify-self: center; }
  .space-footer { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 760px) {
  .creator-ribbon { display: grid; gap: 2px; padding-block: 7px; }
  .mission-dock { position: relative; inset: auto; width: 100%; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  .mission-dock > header { display: grid; justify-content: start; gap: 3px; }
  .mission-dock > header strong { font-size: 13px; }
  .mission-destination { min-height: 52px; }
  .map-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .map-mode-switch { grid-column: 1 / -1; min-width: 0; }
  .map-mode-switch .mode-button { min-width: 0; gap: 4px; padding-inline: 6px; }
  .map-mode-switch .mode-button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .globe-mode-badge { grid-column: 1; min-width: 0; }
  .map-toolbar .map-zoom-controls { grid-column: 2; }
  #openFilters { grid-column: 1; width: 100%; }
  #openDetails { grid-column: 2; min-width: 92px; }
  .map-viewport { min-height: 470px; aspect-ratio: auto; }
  #openSpaceExplorer,
  #toggleLabels,
  #fitMap,
  .map-toolbar .boundary-note { display: none; }
  .atlas-footer nav { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 420px) {
  .mission-dock { padding: 10px; }
  .mission-destination { grid-template-columns: 24px minmax(0, 1fr); padding-inline: 7px; }
  .mission-destination > span { width: 24px; height: 24px; font-size: 15px; }
  .mission-destination strong { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .mission-destination.is-moon > span { animation: none; }
}