/* explore-territories.css — «Territorios» (/es/explorar/territorios/): what css/explore.css does not already give
   the immersive map — the server-rendered sketch of the first layer, the bottom dock (first-visit hint, notice of a
   layer that failed, zoom controls ≥ 44 px, and the card stacked under them so they never cover each other) and
   room for the panel above the dock. Tokens only; the sizes these rules share with the sketch and with map.js
   (--map-territories-*, --map-sketch-*) are in tokens.css with their derivation. Ported from the map lab
   (variants/b/public/map.css). */

/* ---------- Room for the open panel: it ends above the zoom controls, whatever the height ---------- */
.explore-map__panel-body { max-height: min(var(--map-panel-max-h), var(--map-territories-panel-room)); }

/* ---------- Sketch: the first layer in the served HTML, shown from the page's first paint ----------
   Its box is the canvas's fit area less the fit's padding (tokens.css --map-sketch-*). map.js takes over from
   wherever the sketch is, so what is left of an approximation never shows as a jump. It lands like the canvas:
   from 0.85 × to the fit in 1 s, ease-out (ENTRY_ZOOM_FROM and ENTRY_MS of config.js; a unit test keeps them
   equal). Its viewBox is the land: the water lines overflow it. */
.explore-map__stage > .territories__sketch {
  top: var(--map-sketch-top); left: var(--map-sketch-left);
  width: calc(100% - var(--map-sketch-left) - var(--map-sketch-side)); height: calc(100% - var(--map-sketch-top) - var(--map-sketch-bottom));
  overflow: visible; transform-origin: 50% 50%; pointer-events: none;
  animation: territories-land 1000ms cubic-bezier(0.33, 1, 0.68, 1) both;
}
.explore-map__stage > .territories__sketch.is-replaced { visibility: hidden; animation: none; }
@keyframes territories-land { from { transform: scale(0.85); } to { transform: none; } }
.territories__sketch-frame { fill: none; stroke: none; }
.territories__sketch-sea { fill: none; stroke: var(--map-link); stroke-opacity: 0.5; stroke-width: 0.9px; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.territories__sketch-sea + .territories__sketch-sea { stroke-opacity: 0.3; }
.territories__sketch-area { fill: var(--pc); fill-opacity: 0.14; stroke: var(--pc); stroke-opacity: 0.72; stroke-width: 1.1px; vector-effect: non-scaling-stroke; }

/* ---------- Dock (map.js moves the card into it) ----------
   Phones: a strip at the bottom, the controls row over the card, so they never cover each other.
   Wide screens: the zoom controls go to the bottom of the panel's column (the interface side, never over the map),
   and the card to the bottom right, where it only shows once something is selected: the map keeps the whole
   height (with the controls under the map, the fit lost 60 px and two area names on 1440 × 900). The hint is for
   phones: on a wide screen the open panel already says how the map works. */
@media (max-width: 899px) {
  .territories__dock {
    position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: var(--z-overlay);
    display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none;
  }
  .territories__dock > .explore-map__card { position: relative; left: auto; right: auto; bottom: auto; max-width: none; margin: 0; }
  .explore-map__stage:has(.explore-map__panel[open]) .territories__dock > .explore-map__card,
  .explore-map__stage:has(.explore-map__panel[open]) .territories__hint { display: none; }
}
@media (min-width: 900px) {
  .territories__dock { display: contents; }
  .territories__dock-row { position: absolute; left: var(--space-4); bottom: var(--space-4); width: var(--map-panel-w); z-index: var(--z-overlay); }
  .territories__dock > .explore-map__card { position: absolute; left: auto; right: var(--space-4); bottom: var(--space-4); width: var(--map-card-w); max-width: none; margin: 0; }
  .territories__hint { display: none; }
}
/* Short screens (landscape phones): the title bar keeps to its content and the zoom controls go beside it, in the
   same top strip, so the map gets the whole height below it (with the controls row at the bottom the continent was
   143 px tall at 812 × 375: 2026-09-29); the hint, a notice and the card overlay the bottom only while they are
   there. The bar leaves --map-territories-zoom-w for the controls. map.js reads the same height (SHORT_PX). */
@media (max-width: 899px) and (max-height: 480px) {
  .explore-map__overlay { right: auto; max-width: calc(100% - 2 * var(--space-3) - var(--map-territories-zoom-w) - var(--space-2)); }
  .territories__dock, .territories__dock-row { display: contents; }
  .territories__zoom { position: absolute; top: var(--space-3); right: var(--space-3); z-index: var(--z-overlay); }
  .territories__hint, .territories__notice {
    position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: var(--z-overlay);
    max-width: min(18rem, calc(100% - 2 * var(--space-3)));
  }
  .territories__dock > .explore-map__card {
    position: absolute; left: auto; right: var(--space-3); bottom: var(--space-3);
    width: min(var(--map-card-w), calc(100% - 2 * var(--space-3))); max-width: none; margin: 0;
  }
}
/* The hint needs ~12rem to stay at two lines: on the narrowest phones it takes its own row above the controls. */
.territories__dock-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
.territories__dock-row .territories__hint { flex: 1 1 12rem; }
.territories__dock-row > *, .territories__dock > .explore-map__card { pointer-events: auto; }

.territories__hint {
  margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-float); font-size: var(--fs-xsmall); line-height: 1.35;
  color: var(--color-text-secondary); transition: opacity 0.4s ease;
}
.territories__hint.is-gone { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }

/* A deferred layer that could not be loaded: said here, over the controls, where a phone sees it (the panel's
   status is folded away there), with «Reintentar». Warning trio of tokens.css (text and border AA on its bg). */
.territories__notice {
  flex: 1 0 100%; 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-3); border: 1px solid var(--status-warn-border);
  border-radius: var(--radius-card); background: var(--status-warn-bg); box-shadow: var(--shadow-float);
}
.territories__notice-text { flex: 1 1 12rem; margin: 0; font-size: var(--fs-xsmall); line-height: 1.35; color: var(--color-text-primary); }
.territories__notice-retry {
  min-height: var(--touch-target); padding: 0 var(--space-4); border: 1px solid var(--color-control-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; cursor: pointer;
}
.territories__notice-retry:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* The notice takes the hint's place (a gone hint still holds its box: the notice sat over an empty gap). */
.territories__dock-row:has(.territories__notice:not([hidden])) .territories__hint { display: none; }

.territories__zoom {
  display: flex; flex: none; margin-left: auto; overflow: hidden; background: var(--color-surface);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-float);
}
.territories__zoom-btn {
  min-width: var(--touch-target); min-height: var(--touch-target); padding: 0 var(--space-3); border: 0;
  background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-ui); font-size: 1.3rem;
  line-height: 1; cursor: pointer;
}
.territories__zoom-btn + .territories__zoom-btn { border-left: 1px solid var(--color-border); }
.territories__zoom-btn--wide { font-size: var(--fs-small); font-weight: 600; }
.territories__zoom-btn:active { background: var(--color-surface-sunken); }
/* Hover only where there is a real hover: on touch screens :hover sticks after a tap. */
@media (hover: hover) { .territories__zoom-btn:hover, .territories__notice-retry:hover { background: var(--color-surface-sunken); } }
.territories__zoom-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .territories__hint, .territories__hint.is-gone { transition: none; }
  .explore-map__stage > .territories__sketch { animation: none; }
}