/* ══════════════════════════════════════════════════════════════════
   MGL institucional · acceso con el mapa de la portada girando detrás (T-053b; T-049 §c).
   La noche y el velo de la portada; la columna a --acceso-margen con la marca, el título en
   Alegreya, «Acceso institucional», la hoja de día con el formulario y el pie. El mapa es
   decorativo (aria-hidden). Solo tokens de T-049 (--acceso-*, --portada-mapa-*, --mapa-giro-*).
   ══════════════════════════════════════════════════════════════════ */
body.acceso:has(.acceso-escena) { background: var(--acceso-fondo); }
body.acceso:has(.acceso-escena) .cabecera-acceso { display: none; }  /* la marca va en la columna */
body.acceso:has(.acceso-escena) .acceso-contenido { position: relative; display: grid; align-content: center; min-height: calc(100vh - var(--cromo-alto) + var(--linea-alto)); min-height: calc(100svh - var(--cromo-alto) + var(--linea-alto)); padding: var(--e-6) var(--acceso-margen); }
.acceso-escena { position: fixed; inset: 0; z-index: 0; background: var(--acceso-fondo); opacity: 0; transition: opacity var(--mapa-fundido) ease-out; }
.acceso-escena[data-estado="listo"] { opacity: 1; }
.acceso-escena .maplibregl-canvas { outline: none; }
.acceso-velo { position: fixed; inset: 0; z-index: 1; background: var(--acceso-velo); pointer-events: none; }

.acceso-columna--escena { position: relative; z-index: 2; display: grid; gap: var(--e-2); width: min(var(--acceso-tarjeta-ancho), calc(36vw - var(--acceso-margen))); min-width: min(100%, 20rem); }
.acceso-marca { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--acceso-texto-2); font-size: var(--t-nota); font-weight: 700; }
.acceso-glifo { height: calc(var(--carril-glifo) * 1.25); width: auto; flex: none; }
.acceso-titulo { margin: var(--e-2) 0 0; color: var(--acceso-texto); font: 500 var(--acceso-titulo)/var(--i-h1) var(--fuente-titulo); }
.acceso-subtitulo { margin: 0 0 var(--e-3); color: var(--acceso-texto-2); font-size: var(--t-entradilla); }
.acceso-panel.acceso-panel--escena { max-width: none; padding: var(--e-5) var(--e-6) var(--e-6); background: var(--acceso-tarjeta); border-radius: var(--acceso-tarjeta-radio); box-shadow: var(--acceso-tarjeta-sombra); }
.acceso-panel--escena .panel > h1 { margin-top: 0; font-size: var(--inst-t-vista); }
.acceso-pie { margin: var(--e-2) 0 0; color: var(--acceso-texto-2); font-size: var(--t-nota); line-height: var(--i-nota); }
.acceso-pie strong { color: var(--acceso-texto); }

/* «Detener / Reanudar el giro» (WCAG 2.2.2): abajo a la derecha, como un control del mapa */
.acceso-giro[hidden] { display: none; }
.acceso-giro { position: fixed; z-index: 2; right: var(--e-5); bottom: var(--e-5); }
.acceso-giro-boton {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--mapa-control-alto); padding: 0 var(--e-3);
  border: 1px solid var(--mapa-control-borde); border-radius: var(--radio-control); background: var(--mapa-control-fondo); color: var(--mapa-control-texto);
  box-shadow: var(--sombra-flotante); font: 700 var(--t-nota)/1 var(--fuente-ui); cursor: pointer;
}
.acceso-giro-boton:hover { background: var(--mapa-control-hover); }
.acceso-giro-boton:focus-visible { outline: var(--foco-anillo); outline-offset: 0; box-shadow: var(--foco-halo-noche); }
.acceso-giro-icono { fill: currentColor; }
.acceso-giro-boton[data-giro="girando"] .acceso-giro-icono--seguir,
.acceso-giro-boton[data-giro="detenido"] .acceso-giro-icono--pausa { display: none; }

/* teléfono y tabletas estrechas: la noche, el mapa quieto arriba y la hoja a todo el ancho */
@media (max-width: 859px) {
  .acceso-velo { background: var(--acceso-velo-movil); }
  body.acceso:has(.acceso-escena) .acceso-contenido { align-content: start; padding: 30svh var(--e-4) var(--e-5); }
  .acceso-columna--escena { width: auto; min-width: 0; }
  .acceso-panel.acceso-panel--escena { padding: var(--e-5) var(--e-4); }
}
@media print {
  .acceso-escena, .acceso-velo, .acceso-giro { display: none; }
}