/* Acceso — login.html, portal_reset.html y portal_activar.html (10-nov-2026), con el lenguaje «Boutique» del sistema (sistema.html →
   Superficies): la foto es la isla esmeralda pegada a la orilla, como el menú; el formulario
   va directo sobre el lienzo piedra, sin caja ni sombra (la sombra es solo de lo que flota),
   con el encabezado de página de siempre. El cargador se encoge hasta la isla
   (js/cargador.js, data-cargador-destino) y el lema viaja a su lugar. Solo tokens. */
body { background: var(--lienzo); }
.acceso { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, 46%); }

/* ---------- Isla esmeralda con la foto ---------- */
.acceso__foto { position: relative; overflow: hidden; background: var(--cargador-fondo); color: var(--cargador-texto); }
.shot { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: grayscale(.6) contrast(1.08); opacity: 0; animation: shot-turno 27s infinite; }
/* Delays negativos: la 1ª foto arranca ya visible (sin 1.6 s de isla vacía) y el turno de 9 s se mantiene. */
.shot--1 { background-image: url('../img/login-churumbela.jpg'); animation-delay: -1.62s; opacity: 1; }
.shot--2 { background-image: url('../img/login-brillante.jpg');  animation-delay: 7.38s; }
.shot--3 { background-image: url('../img/login-fancy.jpg');      animation-delay: 16.38s; }
@keyframes shot-turno { 0% { opacity: 0; transform: scale(1); } 6% { opacity: 1; } 33% { opacity: 1; } 39% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.05); } }
.acceso__velo { position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cargador-fondo) 70%, transparent) 0%, transparent 22%),
              linear-gradient(to top, color-mix(in srgb, var(--cargador-fondo) 92%, transparent) 0%, color-mix(in srgb, var(--cargador-fondo) 50%, transparent) 30%, transparent 60%),
              linear-gradient(color-mix(in srgb, var(--cargador-fondo) 38%, transparent), color-mix(in srgb, var(--cargador-fondo) 38%, transparent)); }
.acceso__foto-marca { position: absolute; top: var(--space-8); left: clamp(28px, 4vw, 56px); font: 600 22px/1 var(--md-font-brand); letter-spacing: 0.04em; white-space: nowrap; }
.acceso__lema { position: absolute; left: clamp(28px, 4vw, 56px); right: clamp(28px, 4vw, 56px); bottom: clamp(28px, 5vh, 56px); }
.acceso__cifras { max-width: 22ch; margin-bottom: var(--space-5); font: 500 clamp(22px, 2.2vw, 32px)/1.25 var(--md-font-brand); color: var(--cargador-texto); }
.acceso__frase { max-width: 30ch; font: 500 clamp(14px, 1.3vw, 18px)/1.6 var(--md-font-plain); letter-spacing: 0.06em; text-transform: uppercase; }
.acceso__lugar { margin-top: var(--space-3); font: var(--type-label-sm); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cargador-oro); }

/* ---------- Formulario sobre el lienzo ---------- */
.acceso__form { display: flex; flex-direction: column; padding: var(--space-8) clamp(28px, 5vw, 80px); }
.acceso__top { display: flex; justify-content: flex-end; }
.acceso__pide { font: var(--type-body-md); color: var(--md-on-surface-variant); }
.acceso__pide a { color: var(--md-on-surface); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.acceso__mid { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 420px; padding: var(--space-10) 0; }
.acceso .page-header { margin-bottom: var(--space-8); }
.acceso .page-header__sub { font: var(--type-body-lg); margin-top: var(--space-2); max-width: 34ch; }
.acceso form { display: flex; flex-direction: column; gap: var(--space-5); }
.acceso .input { width: 100%; height: 52px; font: var(--type-body-lg); }
/* El autollenado del navegador pintaba los campos de azul (captura de Dylan, 10-nov). */
.acceso .input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--md-surface) inset; -webkit-text-fill-color: var(--md-on-surface); caret-color: var(--md-on-surface); }
.acceso__pw { position: relative; }
.acceso__pw .input { padding-right: 52px; }
.acceso__ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.acceso__olvide { align-self: flex-end; margin: calc(var(--space-2) * -1) -12px 0 0; }
.acceso .btn--lg { width: 100%; margin-top: var(--space-2); }
.acceso__err { min-height: 20px; font: var(--type-body-md); color: var(--md-error); }
.acceso__pie { font: var(--type-body-sm); color: var(--md-on-surface-variant); }
.acceso__pie a { color: inherit; text-underline-offset: 2px; }

/* Celular y tablet vertical: la isla es una franja arriba pegada a la orilla (como la barra
   del portal) y el formulario va centrado debajo. Una sola foto. */
@media (max-width: 839px) {
  .acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acceso__foto { height: 30svh; min-height: 200px; }
  .shot { animation: none; } .shot--2, .shot--3 { display: none; }
  .acceso__foto-marca { top: var(--space-5); left: var(--space-5); font-size: 20px; }
  .acceso__lema { left: var(--space-5); right: var(--space-5); bottom: var(--space-5); }
  .acceso__frase { font-size: 13px; }
  .acceso__cifras { max-width: none; margin-bottom: var(--space-2); font-size: 17px; }
  .acceso__form { padding: var(--space-6) var(--space-5); }
  .acceso__top { order: 2; justify-content: center; }
  .acceso__mid { align-self: center; padding: var(--space-4) 0 var(--space-6); }
  .acceso__pie { order: 3; text-align: center; margin-top: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .shot { animation: none; } .shot--1 { opacity: 1; } }

/* Avisos dentro del formulario (no en toast: se van antes de leerlos). */
.acceso__aviso { min-height: 20px; font: var(--type-body-md); color: var(--md-on-surface-variant); }
.acceso__aviso.is-ok { color: var(--md-success); }
.acceso__aviso.is-err { color: var(--md-error); }
.acceso__volver { align-self: flex-start; margin-left: -12px; }
.acceso [hidden] { display: none !important; }