/* explore-constellation.css — «Constelación» (/es/explorar/constelacion/): what css/explore.css does not already
   give the immersive map — the zoom and «Ver todo» buttons, the first-visit hint and the legend in the panel. Tokens
   only (tokens.css). Ported from the map lab (variants/a/public/map.css).
   Controls: a row at the bottom right on phones and at the top right from 900 px, where the card takes the bottom
   right and the panel the left. On phones the card (a bottom sheet there) and the open panel (a sheet over the top)
   both take the controls' place, so the controls step aside while either is open. */

.constellation__controls {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: var(--z-overlay);
  display: flex; gap: var(--space-2);
}
.explore-map__card:not([hidden]) ~ .constellation__controls { display: none; }
/* Open panel on a phone: the controls were drawn over its chips, its search field and «Resaltar» (lab verification,
   2026-09-29: 7,805 px² at 320 × 568, «Resaltar» covered at 844 × 390). Hidden, not removed: map.js still measures
   their row to frame the map as it is seen once the panel folds. */
@media (max-width: 899px) {
  .explore-map__stage:has(.explore-map__panel[open]) .constellation__controls { visibility: hidden; }
}
@media (min-width: 900px) {
  .constellation__controls { top: var(--space-4); right: var(--space-4); bottom: auto; }
  .explore-map__card:not([hidden]) ~ .constellation__controls { display: flex; }
}
.constellation__control {
  display: inline-grid; place-items: center; min-width: var(--touch-target); 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); color: var(--color-text-primary); box-shadow: var(--shadow-float);
  font-family: var(--font-ui); font-size: 1.25rem; font-weight: 600; line-height: 1; cursor: pointer;
}
.constellation__control--wide { font-size: var(--fs-small); }
.constellation__control:hover { border-color: var(--color-text-primary); }
.constellation__control:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.constellation__hint {
  position: absolute; left: 50%; bottom: calc(var(--space-3) + var(--touch-target) + var(--space-3)); translate: -50% 0;
  z-index: var(--z-overlay); width: max-content; max-width: calc(100% - 2 * var(--space-4)); margin: 0;
  padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-secondary); box-shadow: var(--shadow-float);
  font-size: var(--fs-small); text-align: center; pointer-events: none;
  transition: opacity 0.35s ease; /* ui.js removes the hint after TUNING.hintFadeMs (motion.js): keep it longer */
}
.constellation__hint.is-gone { opacity: 0; }
/* Phones: the hint hangs right under the overlay (top: 100%), out of its flow, so the overlay's measured height
   (overlayInsets(), the free area for the camera) never includes it; the overlay gives its children pointer events
   back and the hint never takes them. */
.explore-map__overlay > .constellation__hint { top: calc(100% + var(--space-2)); bottom: auto; pointer-events: none; }
@media (min-width: 900px) { .constellation__hint { bottom: var(--space-5); } }
@media (prefers-reduced-motion: reduce) { .constellation__hint { transition: none; } }

/* Legend (panel): what each mark of the map is. */
.constellation__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-xsmall); color: var(--color-text-secondary);
}
.constellation__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.constellation__key { flex: none; border-radius: 50%; background: var(--color-primary); }
.constellation__key--area { width: 14px; height: 14px; }
.constellation__key--tag { width: 9px; height: 9px; background: var(--map-tag); }
.constellation__key--article { width: 6px; height: 6px; }
.constellation__key--recent {
  width: 6px; height: 6px; margin: 0 4px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 24%, transparent);
}