/* explore.css — The pages under /es/explorar/: the hub (the three views as cards with a thumbnail) and what every
   view shares — the bar of views above the map, the immersive stage (the approved prototype's full-screen canvas,
   not a framed box), the overlay panel, the card («ficha»), the bottom skip strip and the index of areas and topics
   under the map. Each view adds its own sheet (explore-<view>.css); without JavaScript explore-nojs.css hides the
   map. Tokens only (tokens.css: colours, and the --map-* sizes with their measurements); no colour literals, no
   inline styles (CSP). Markup contract: docs/EXPLORE.md §2.6, §5.1, §6.2 and §7.2. Ported from the map lab
   (prototypes/map/lib/lab-base.css, commit 8c53b21), with the lab's own index and metrics left out. */

/* ---------- Bar of views: in the page flow, between the site header and the map (it covers nothing) ----------
   One row of 44 px links (--map-switch-h counts it with its padding and border): «Todas las vistas» (the hub) and
   the three views, the current one marked. Up to 480 px the current view is left out (the map's title names it)
   and «las vistas» is read only by screen readers: measured with Instrument Sans 600 at 13 px, the longest row at
   320 px («Todas» + «Constelación» + «Cronología») is 283 px of the 288 px there, hub hairline included (2026-09-30).
   Bigger text scrolls inside the bar, never the page. */
.view-switch { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.view-switch__list {
  display: flex; align-items: center; gap: var(--space-1); width: min(100% - 2 * var(--space-4), var(--max-width));
  margin: 0 auto; padding: var(--space-1) 0; list-style: none; overflow-x: auto; scrollbar-width: none;
}
.view-switch__list::-webkit-scrollbar { display: none; }
.view-switch__item { flex: none; }
/* The hub is not a view: a hairline keeps it apart from the three (+5 px: the 320 px row becomes 283 of 288). */
.view-switch__item--all { padding-right: var(--space-1); border-right: 1px solid var(--color-border); }
/* Inline text, not a flex row: «Todas» and « las vistas» are two pieces of one label, and a flex gap between them
   doubled the space. One 44 px line box centres the text; the icon sits on it. */
.view-switch__link {
  display: inline-block; min-height: var(--touch-target); padding: 0 10px; border-radius: var(--radius-pill);
  color: var(--color-text-primary); font-size: var(--fs-xsmall); font-weight: 600; line-height: var(--touch-target);
  text-decoration: none; white-space: nowrap;
}
.view-switch__link .icon { display: inline-block; margin-right: 6px; vertical-align: middle; }
.view-switch__link:hover { background: var(--color-surface-sunken); }
.view-switch__link[aria-current="page"] { background: var(--color-text-primary); color: var(--color-text-inverse); }
.view-switch__link:focus-visible { outline-offset: -3px; }
@media (max-width: 480px) {
  .view-switch__item:has(> .view-switch__link[aria-current="page"]) { display: none; }
  .view-switch__more {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* ---------- Stage: full width, the rest of the first screen ---------- */
.explore-map {
  position: relative; display: flex; flex-direction: column;
  height: calc(100svh - var(--map-header-h) - var(--map-switch-h)); min-height: var(--map-min-h);
  background: var(--map-bg); border-bottom: 1px solid var(--color-border);
}
.explore-map__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.explore-map__stage canvas, .explore-map__stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.explore-map__stage canvas { touch-action: none; cursor: grab; }
.explore-map__stage canvas.is-pointing { cursor: pointer; }
.explore-map__stage canvas.is-dragging { cursor: grabbing; }
/* The canvas is navigable with the arrows (C8): its focus ring goes inside, where nothing clips it. */
.explore-map__stage canvas:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }

/* First in the DOM (first tab stop: it jumps over the map), last on screen: a strip that stays visible under the
   map, so a phone has somewhere to swipe the page (a swipe on the map pans the map: audit 7/11). */
.explore-map__skip {
  order: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-target); padding: 0 var(--space-4); background: var(--color-surface);
  border-top: 1px solid var(--color-border); font-size: var(--fs-small); font-weight: 600;
}
.explore-map__skip .icon { width: 16px; height: 16px; }

/* ---------- Overlay panel: a title bar with a folding «Filtrar y resaltar» ---------- */
.explore-map__overlay {
  position: absolute; top: var(--space-3); left: var(--space-3); right: var(--space-3); z-index: var(--z-overlay);
  display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none;
}
.explore-map__overlay > * { pointer-events: auto; }
@media (min-width: 900px) {
  .explore-map__overlay { top: var(--space-4); left: var(--space-4); right: auto; width: var(--map-panel-w); }
}
.explore-map__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-float);
}
.explore-map__title {
  flex: 1 1 auto; margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading);
  font-size: var(--fs-h3); line-height: var(--lh-tight);
}
.explore-map__panel { flex: 0 0 auto; }
.explore-map__panel[open] { flex-basis: 100%; }
/* Wide screens: initShell() opens the panel AFTER the first paint, and an open panel takes a row of its own: laid
   out that way from the start, opening it only adds the panel body below and nothing moves (the lab measured
   CLS 0.018-0.019 without this rule in each of its three views, 2026-09-29). */
@media (min-width: 900px) { .explore-map__panel { flex-basis: 100%; } }
.explore-map__summary {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-3);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); background: var(--color-surface);
  cursor: pointer; list-style: none; font-size: var(--fs-small); font-weight: 600;
}
.explore-map__summary::-webkit-details-marker { display: none; }
.explore-map__summary .icon { width: 16px; height: 16px; }
.explore-map__panel[open] .explore-map__summary .icon:last-child { transform: rotate(180deg); }
.explore-map__panel-body {
  display: flex; flex-direction: column; gap: var(--space-3); max-height: min(var(--map-panel-max-h), var(--map-panel-room)); overflow-y: auto;
  padding: var(--space-3) var(--space-2) var(--space-2) 0;
}
.explore-map__lede { margin: 0; font-size: var(--fs-small); color: var(--color-text-secondary); }
.explore-map__status { margin: 0; font-size: var(--fs-small); font-weight: 600; }
.explore-map__results { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); font-size: var(--fs-small); }
/* The results are the accessible form of a highlight: each one a ≥ 44 px target (C8; 30 px tall in the lab). */
.explore-map__results a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.explore-map__status:empty, .explore-map__results:empty { display: none; }

/* ---------- Card («ficha»): bottom sheet on phones, corner card on wide screens ---------- */
.explore-map__card {
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: var(--z-overlay);
  max-width: var(--map-card-w); margin-left: auto; padding: var(--space-3) var(--space-7) var(--space-2) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}
.explore-map__card p { margin: 0; }
.explore-map__card-kicker { font-size: var(--fs-xsmall); font-weight: 600; color: var(--pc); }
.explore-map__card-title {
  margin: var(--space-1) 0; font-family: var(--font-display); font-weight: var(--weight-heading);
  font-size: var(--fs-card); line-height: 1.25;
}
.explore-map__card-meta { font-size: var(--fs-xsmall); color: var(--color-text-secondary); }
.explore-map__card-kicker:empty, .explore-map__card-meta:empty { display: none; }
.explore-map__card-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); font-weight: 600; }
.explore-map__card-close {
  position: absolute; top: var(--space-1); right: var(--space-1); display: grid; place-items: center;
  width: var(--touch-target); height: var(--touch-target); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-text-secondary); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.explore-map__card-close:hover { color: var(--color-text-primary); background: var(--color-surface-sunken); }

/* ---------- The index under the map (the same content without JavaScript, and for assistive technology) ---------- */
.explore-map__index { padding-top: var(--space-2); }
/* Short topics of the index («VIH», 27 px wide) get a 44 px wide target too (C8). */
.explore-map__index .index-list__link { min-width: var(--touch-target); }

/* ---------- Hub: the three views as cards ----------
   The whole card is one link (the title's, stretched over it like the site's article cards), so the keyboard
   meets one stop per view; «Abrir» only looks like a button. «Tu última vista» (hub.js) sits over the thumbnail
   in absolute position: showing it moves nothing. */
.view-cards {
  display: grid; gap: var(--gap); list-style: none; margin: var(--space-5) 0 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.view-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.view-card:hover { border-color: var(--color-border-strong); }
.view-card:has(.view-card__title a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.view-card__shot { position: relative; }
.view-card__shot img {
  width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--map-bg);
}
.view-card__last {
  position: absolute; top: var(--space-2); left: var(--space-2); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary);
  box-shadow: var(--shadow-float); font-size: var(--fs-xsmall); font-weight: 600;
}
.view-card__title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--fs-h3); line-height: var(--lh-tight); }
.view-card__title a { color: inherit; text-decoration: none; }
.view-card__title a::after { content: ""; position: absolute; inset: 0; }
.view-card__title a:focus-visible { outline: none; }
.view-card:hover .view-card__title a { text-decoration: underline; text-decoration-thickness: 1px; }
.view-card__tagline { margin: 0; font-weight: 600; }
.view-card__desc, .view-card__when { margin: 0; font-size: var(--fs-small); color: var(--color-text-secondary); }
.view-card__open { align-self: flex-start; margin-top: auto; }