/* Inicio de sesión (entrar.html) y alta con enlace (alta.html). Referencia: el prototipo aprobado
   (VOCAI/Academia-IA/estructura-bn/proto/_acceso.html). Una sola escena: la foto de la academia ocupa la izquierda
   y se funde en el fondo; el formulario flota a la derecha. Es una pantalla fotográfica: siempre en oscuro
   (un script en línea en entrar.html y alta.html quita el fondo claro guardado, antes de pintar). */

body.acceso { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; }

.escena { position: relative; flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; isolation: isolate; overflow: hidden; }

/* Foto de fondo, fundida hacia la derecha y arriba/abajo en el fondo de la página */
.arte { position: absolute; top: 0; bottom: 0; left: 0; width: 64%; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, .45) 72%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, .45) 72%, transparent 96%); }
.arte .cuadro { position: absolute; inset: 0; transform-origin: 24% 52%; animation: acceso-acercar 22s ease-in-out infinite alternate; }
.arte img { width: 100%; height: 100%; object-fit: cover; object-position: 32% 58%; }
.arte::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 72%, var(--bg) 100%); }
/* Un velo navy en "screen" a media fuerza lleva el negro de la foto al navy del fondo sin apagar sus luces:
   así la foto se funde en la página sin una banda más oscura */
.arte .cuadro::after { content: ""; position: absolute; inset: 0; background: var(--bg); mix-blend-mode: screen; opacity: .5; pointer-events: none; }
.polvo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes acceso-acercar { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Alta: el aula vacía, con el logo sobre el pizarrón, entre los dos dibujos. La foto escala con el ancho de la escena,
   así que las medidas van en cqw (% del ancho de .escena, que es contenedor), con vw de respaldo para navegadores viejos.
   Solo en ventanas apaisadas o casi cuadradas: en una vertical (tableta parada) va la versión de una columna. */
.escena { container-type: inline-size; }
@media (min-width: 861px) and (min-aspect-ratio: 801/1000) {
  /* La foto (1792x2240) escala siempre por el ancho, en cualquier alto de ventana: así el logo cae en el pizarrón.
     Si la ventana es más alta que la foto, el pie de la foto se funde en el fondo. */
  .acceso-alta .arte .cuadro { bottom: auto; aspect-ratio: 1792 / 2240; transform-origin: 50% 28%;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
  .acceso-alta .arte img { object-position: 50% 0; }
  .acceso-alta .visual { align-items: flex-start; padding-top: 24vw; padding-top: 24cqw; }
  .acceso-alta .sello { font-size: clamp(64px, 6.8vw, 118px); font-size: clamp(64px, 6.8cqw, 118px); margin-left: 10vw; margin-left: 10cqw; }
  /* El lema: su borde de abajo va a 44px del pie de la ventana, pero nunca más abajo que el pie de la foto
     (mide 80cqw de alto: 64 % del ancho x 2240/1792) ni más arriba que 36cqw + 124px, para no pisar la etiqueta
     del logo (que termina en unos 35cqw) en ventanas bajas. Se mide desde arriba (top + translateY(-100%)) y no
     desde el pie de .visual: así no salta cuando el formulario aparece y estira la columna.
     La columna mide al menos lo que ocupa el lema en su punto más bajo posible. */
  .acceso-alta .visual { min-height: max(560px, calc(36vw + 148px)); min-height: max(560px, calc(36cqw + 148px)); }
  .acceso-alta .lema { left: calc(32px + 10vw); left: calc(32px + 10cqw); bottom: auto; transform: translateY(-100%);
    top: max(516px, calc(36vw + 124px), min(calc(80vw - 24px), calc(100vh - 44px)));
    top: max(516px, calc(36cqw + 124px), min(calc(80cqw - 24px), calc(100dvh - 44px))); }
}

/* Columna de la foto: logo al centro, lema abajo */
.visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 48px 32px; }
.sello { position: relative; display: inline-block; margin: 0 .3em 4% 0; font-size: 118px; line-height: .86; color: #fff; }
.sello .wm { display: block; font-weight: 900; letter-spacing: -.045em; text-shadow: 0 2px 30px rgba(9, 17, 28, .55); }
.sello .st { position: absolute; right: -.3em; bottom: -.44em; transform: rotate(-8deg); }
.sello .st span { display: inline-block; padding: .38em .75em; border: .16em solid var(--bg); border-radius: .32em;
  background: #fff; color: var(--bg); font-size: .2em; font-weight: 800; letter-spacing: .1em; line-height: 1;
  text-transform: uppercase; white-space: nowrap; }
.lema { position: absolute; left: 32px; right: 32px; bottom: 44px; text-align: center; color: #fff; }
.lema p { max-width: 30ch; margin: 0 auto; font-size: 19px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.lema small { display: block; margin-top: 8px; font-size: 13px; color: var(--text-2); text-wrap: balance; }

/* Columna del formulario */
.acceso-form { display: flex; align-items: center; padding: 48px 64px 48px 24px; }
.caja { width: 100%; max-width: 380px; }
.caja h1 { margin-bottom: 8px; font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--text); }
.caja .intro { margin-bottom: 28px; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.caja .intro b { color: var(--text); font-weight: 600; }
.caja .form { gap: 16px; }
.caja .campo { gap: 7px; }
.caja .form input:not([type=checkbox]):not([type=radio]) { min-height: 48px; padding: 12px 14px; border-radius: 10px; }
.caja .campo small { margin-top: -1px; }

/* Contraseña con "Mostrar" */
.campo > .clave { position: relative; display: block; font: inherit; color: inherit; }
.caja .form .clave input:not([type=checkbox]):not([type=radio]) { padding-right: 84px; }
.ver { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center;
  justify-content: center; min-width: 64px; min-height: 40px; padding: 0 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: var(--muted); }
.ver:hover { color: var(--text); }

.olvido { margin-top: -4px; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.olvido b, .olvido a { color: var(--text); font-weight: 600; }
.olvido a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Aviso que no es un error (por ejemplo, «Tu acceso está listo»): verde de estado */
.listo { padding: 11px 14px; border: 1px solid rgba(0, 214, 143, .35); border-radius: 10px; background: rgba(0, 214, 143, .08);
  border-color: color-mix(in srgb, var(--verde) 35%, transparent); background: color-mix(in srgb, var(--verde) 8%, transparent);
  font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--verde); }
.listo:empty { display: none; }

.caja .btn-p { width: 100%; height: 50px; margin-top: 8px; border-radius: 10px; font-size: 15px; }
.caja .btn-p:disabled { opacity: .75; }

.sep { height: 1px; margin: 28px 0 18px; background: var(--line); }
.pie { font-size: 14px; line-height: 1.5; color: var(--muted); }
.pie + .pie { margin-top: 8px; }
.pie a { color: var(--text); font-weight: 700; border-bottom: 1.5px solid var(--acento); }
.pie a:hover { color: var(--acento-txt); }
.pie b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

/* Tableta (también parada, aunque sea ancha) y celular: la foto pasa arriba como banda y el formulario debajo */
@media (max-width: 860px), (max-aspect-ratio: 4/5) {
  .escena { grid-template-columns: 1fr; align-content: start; }
  .arte { width: 100%; height: 420px; bottom: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
  .arte img { object-position: 28% 60%; }
  .acceso-alta .arte img { object-position: 30% 30%; }
  .arte::after { background: linear-gradient(180deg, var(--bg) 0%, transparent 14%); }
  .visual { min-height: 360px; padding: 28px 20px 96px; }
  .sello { font-size: 72px; margin-bottom: 0; }
  .lema { left: 20px; right: 20px; bottom: 18px; }
  .lema p { font-size: 16px; }
  .acceso-form { justify-content: center; padding: 8px 20px 48px; }
  .caja h1 { font-size: 28px; }
  .caja .intro { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .arte .cuadro { animation: none; }
  .polvo { display: none; }
}