/**
 * Estilos del consent-gate y de los mapas (T6.1/T6.2 · §7.5, R16, R25-G).
 *
 * Handle compartido `eje-social-map`: se encola SOLO en páginas con un gate
 * `[data-eje-map]` (enqueue condicional en Blocks.php). Cero hex de marca:
 * alias locales --eje-* sobre los tokens de Vulcano/Andromeda (patrón H4);
 * los rgba de sombra son neutros derivados del patrón ya aprobado.
 */

.eje-map,
.eje-map-block {
  /* Colores */
  --eje-canvas: var(--vulcano-color-canvas, var(--wp--preset--color--canvas));
  --eje-surface: var(--vulcano-color-surface, var(--wp--preset--color--surface));
  --eje-text: var(--vulcano-color-text, var(--wp--preset--color--text));
  --eje-text-soft: var(--vulcano-color-text-soft, var(--wp--preset--color--text-soft));
  --eje-brand: var(--vulcano-color-brand, var(--wp--preset--color--brand));
  --eje-brand-strong: var(--vulcano-color-brand-strong, var(--wp--preset--color--brand-strong));
  --eje-accent: var(--vulcano-color-accent, var(--wp--preset--color--accent));
  --eje-accent-2: var(--vulcano-color-accent-2, var(--wp--preset--color--accent-2));
  --eje-inverse: var(--vulcano-color-inverse, var(--wp--preset--color--inverse));
  --eje-border: var(--vulcano-color-border, var(--wp--preset--color--border));

  /* Espaciado y radios */
  --eje-sp-2xs: var(--vulcano-space-2xs, 0.25rem);
  --eje-sp-xs: var(--vulcano-space-xs, 0.5rem);
  --eje-sp-s: var(--vulcano-space-s, 0.75rem);
  --eje-sp-m: var(--vulcano-space-m, 1rem);
  --eje-sp-l: var(--vulcano-space-l, 1.5rem);
  --eje-sp-xl: var(--vulcano-space-xl, 2rem);
  --eje-r-sm: var(--vulcano-radius-sm, 0.25rem);
  --eje-r-md: var(--vulcano-radius-md, 0.375rem);
  --eje-r-lg: var(--vulcano-radius-lg, 0.75rem);

  --eje-focus: var(--vulcano-focus-color, var(--wp--preset--color--accent, var(--eje-accent)));
}

/* Lienzo del mapa cargado (el gate se vacía y lo aloja). */
.eje-map__canvas {
  width: 100%;
  min-height: var(--eje-map-h, 24rem);
  border: 1px solid var(--eje-border);
  border-radius: var(--eje-r-lg);
  overflow: hidden;
}

.eje-map__canvas:focus-visible {
  outline: 3px solid var(--eje-focus);
  outline-offset: 2px;
}

/* Anuncios de estado (role=status): visibles además de anunciados. */
.eje-map__status {
  color: var(--eje-text-soft);
  margin: var(--eje-sp-s) 0 0;
}

.eje-map__status:empty {
  margin: 0;
}

/* Nota informativa dentro del gate (sin key / sin ubicación configurada). */
.eje-map__note {
  color: var(--eje-text);
  font-weight: 600;
  max-width: 34rem;
  margin: 0 auto;
}

/* Error de carga (role=alert): degradación grácil, la lista sigue (R16.7). */
.eje-map__error {
  margin: var(--eje-sp-s) auto 0;
  max-width: 34rem;
  padding: var(--eje-sp-s) var(--eje-sp-m);
  border: 1px solid var(--eje-accent);
  border-left-width: 4px;
  border-radius: var(--eje-r-md);
  background: var(--eje-surface);
  color: var(--eje-text);
}

/* Revocación visible (R28): target cómodo >=44px y foco de 3px. */
.eje-map__revoke {
  display: inline-block;
  margin-top: var(--eje-sp-s);
  min-height: 44px;
  padding: var(--eje-sp-xs) var(--eje-sp-m);
  border: 1px solid var(--eje-border);
  border-radius: var(--eje-r-md);
  background: var(--eje-surface);
  color: var(--eje-text-soft);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.eje-map__revoke:hover {
  color: var(--eje-text);
  border-color: var(--eje-text-soft);
}

.eje-map__revoke:focus-visible {
  outline: 3px solid var(--eje-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Bloque eje/mapa-locales (T6.2 · R16): sección + gate §7.5.
   Anatomía del gate calcada del patrón ya aprobado de la ficha (H5).
   ------------------------------------------------------------------ */

.eje-map-block__gate {
  border: 1px solid var(--eje-border);
  border-radius: var(--eje-r-lg);
  background: repeating-linear-gradient(45deg, var(--eje-canvas) 0 22px, var(--eje-surface) 22px 44px);
  padding: var(--eje-sp-xl);
  text-align: center;
  /* Proporción del mapa (§7.5): el gate ocupa el hueco que ocupará el mapa. */
  min-height: var(--eje-map-h, 28rem);
  display: grid;
  place-content: center;
}

/* Con el mapa cargado (BUG-001 iter2, criterio clienta 2026-08-02 que SUSTITUYE al
   marco fino aprobado en T6.2) el gate deja de ser el placeholder: SIN fondo rayado,
   SIN padding ni marco propio, el lienzo a sangre ocupando el 100% del ancho del gate.
   El título «Mapa» queda sobre fondo limpio, alineado a la izquierda como el resto de
   títulos de sección; el botón de revocar, limpio bajo el mapa. Los estados
   pending/loading/error/unavailable NO cambian (el placeholder rayado ahí es correcto). */
.eje-map-block__gate[data-eje-map='loaded'] {
  display: block;
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  text-align: left;
}

/* El aviso «Mapa cargado.» (role=status) SIGUE en el DOM y anunciándose a lectores
   (el announce() no se toca), pero se retira visualmente en el estado cargado: el
   propio mapa es ya la señal visible. Misma técnica visually-hidden del proyecto. */
.eje-map-block__gate[data-eje-map='loaded'] .eje-map__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eje-map-block__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--eje-sp-s);
  border-radius: var(--eje-r-md);
  background: linear-gradient(135deg, var(--eje-accent-2), var(--eje-brand));
  display: grid;
  place-items: center;
  color: var(--eje-inverse);
  font-size: 1.4rem;
}

.eje-map-block__title {
  margin: 0 0 var(--eje-sp-s);
  font-size: 1.25rem;
}

.eje-map-block__gate p {
  color: var(--eje-text-soft);
  max-width: 34rem;
  margin: 0 auto var(--eje-sp-m);
}

.eje-map-block__btn {
  justify-self: center;
  min-height: 44px;
  padding: var(--eje-sp-xs) var(--eje-sp-l);
  border: 1px solid var(--eje-brand);
  border-radius: var(--eje-r-md);
  background: var(--eje-brand);
  color: var(--eje-inverse);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.eje-map-block__btn:hover {
  background: var(--eje-brand-strong);
  border-color: var(--eje-brand-strong);
}

.eje-map-block__btn:focus-visible {
  outline: 3px solid var(--eje-focus);
  outline-offset: 2px;
}

.eje-map-block__policy {
  margin-top: var(--eje-sp-s);
  font-size: 0.875rem;
}

.eje-map-block__policy a {
  color: var(--eje-brand-strong);
}

/* Resalte de la card al activar su marcador (sincronía mapa → lista, R16.1). */
.eje-map-active {
  outline: 3px solid var(--vulcano-color-accent, var(--wp--preset--color--accent));
  outline-offset: 2px;
  border-radius: var(--vulcano-radius-lg, 0.75rem);
}

/* Los movimientos del mapa son respuesta a acciones del usuario; el resalte de
   sincronización no anima nada por sí mismo (§9, prefers-reduced-motion se
   respeta en el JS para scroll/pan). */