/**
 * acceso.css — La puerta del constructor y el usuario en la barra.
 *
 * Dos piezas, las dos de la misma orden (28-oct-2026): sin sesión no se entra y
 * cada modelo es de su dueño.
 *
 *   1. `.acceso` — la pantalla de entrada. Tapa TODO (z-index 200, por encima
 *      del manual y de las hojas) y se pinta antes de que exista el editor, así
 *      que tiene que valerse sola: fondo, tarjeta y formulario, sin depender de
 *      nada del lienzo.
 *   2. `.barra__sesion` — quién está dentro y el botón de salir, al final de la
 *      barra superior.
 *
 * Todos los colores y medidas salen de los tokens de Alma (design/tokens.css):
 * nada de valores inventados. La puerta es SIEMPRE clara: no hay tema oscuro.
 */

/* ------------------------------------------------------------ la puerta --- */

.acceso {
  position: fixed;
  inset: 0;
  /* Por encima de todo lo del constructor: el manual llega a 92 y la barra a 30. */
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  overflow: auto;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--primary-soft) 0%, transparent 60%),
    var(--bg);
  /* Sin `hidden` de por medio la puerta está abierta: es su estado natural,
     porque el HTML la pinta visible antes de que corra ningún script. */
}

/* La tarjeta y sus campos se miden con el relleno dentro. Sin esto, a 390 px de
   ancho la tarjeta mide 400 (380 + relleno + borde) y su lado derecho se sale
   de la pantalla: medido en un marco de 390×844, 22 px fuera. */
.acceso,
.acceso * {
  box-sizing: border-box;
}

.acceso__caja {
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: auto;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  text-align: center;
}

.acceso__marca {
  display: block;
  line-height: 0;
  margin: 0 auto var(--space-1);
}

/* El sello es el logo de Villacampa (escudo + nombre, PNG transparente para
   fondo claro) sobre la tarjeta blanca: 525x134, a 160 px de ancho mide 41 de alto. */
.acceso__marca img {
  display: inline-block;
  width: 160px;
  height: auto;
}

.acceso__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  letter-spacing: var(--tracking-2xl);
  color: var(--text);
}

.acceso__ayuda {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--text-muted);
}

/* Los dos modos de entrar (código, o usuario y contraseña) son bloques que se
   turnan. `[hidden]` se declara a mano porque `display: flex` gana a la regla
   del navegador y, sin esto, se verían los dos formularios a la vez. */
.acceso__campos {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
}

.acceso__campos[hidden] {
  display: none;
}

/* La etiqueta de un campo: en minúscula y sin espaciar, como en cualquier
   app de cuentas (el dueño, 06-nov-2026: nada de rótulos espaciados). */
.acceso__etiqueta {
  margin-top: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  text-align: left;
}

/* Usuario y contraseña: un campo normal, alineado a la izquierda y legible.
   No llevan el mono ni el espaciado del código, que es para cifras. */
.acceso__texto {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, inherit);
  font-size: var(--text-base);
  text-align: left;
}

.acceso__texto::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.acceso__texto:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--primary);
}

.acceso__texto:disabled {
  opacity: 0.6;
  cursor: progress;
}

.acceso__texto[aria-invalid="true"] {
  border-color: var(--danger);
}

/* El cambio de modo es una salida, no una acción principal: se lee como un
   enlace y no compite con «Entrar». Pero su caja mide 44 px de alto a
   cualquier ancho —el objetivo táctil de la casa, el del riel y la barra—: a
   1280 medía 23 y quedaba por debajo del mínimo de 24. */
.acceso__cambio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-1);
  border: 0;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acceso__cambio:hover {
  color: var(--primary-strong, var(--primary));
}

.acceso__cambio:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.acceso__cambio:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* El código se lee de un vistazo y se teclea con el pulgar: mono, grande y
   centrado, con el espaciado de una clave de un solo uso. */
.acceso__codigo {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  letter-spacing: 0.3em;
  text-align: center;
  text-indent: 0.3em; /* compensa el espaciado de la última cifra */
}

.acceso__codigo::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
  letter-spacing: 0.3em;
}

.acceso__codigo:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--primary);
}

.acceso__codigo:disabled {
  opacity: 0.6;
  cursor: progress;
}

.acceso__codigo[aria-invalid="true"] {
  border-color: var(--danger);
}

/* La altura se reserva siempre: si el aviso aparece y empuja el botón hacia
   abajo, el dedo que iba a pulsar «Entrar» pulsa otra cosa. */
.acceso__error {
  min-height: 1.55em;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--danger);
  text-align: left;
}

.acceso__entrar {
  width: 100%;
  height: 48px;
  font-size: var(--text-base);
}

.acceso__pie {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--text-muted);
}

/* Mientras se comprueba la sesión guardada no se enseña el formulario entero:
   sería un parpadeo de campos que se cierran solos. */
.acceso[data-estado="comprobando"] .acceso__campos,
.acceso[data-estado="comprobando"] .acceso__cambio,
.acceso[data-estado="comprobando"] .acceso__error {
  visibility: hidden;
}

/* --------------------------------------------- cuentas (app/cuenta.js) --- */

/* Los controles de la puerta: radio de 8 px como todo control de la app, nunca
   pastillas. Los campos ya miden 48 px; aqui se iguala el radio. */
.acceso__texto,
.acceso__codigo,
.acceso__entrar {
  border-radius: var(--radius-control, 8px);
}

/* Lo de siempre (código o usuario del club) solo se ve en su modo. Lo pinta
   acceso.js con `hidden`; el modo lo decide cuenta.js, y sin esta regla
   acceso.js lo volvería a enseñar al abrir la puerta. */
.acceso__caja[data-modo]:not([data-modo="club"]) #acceso-campos-codigo,
.acceso__caja[data-modo]:not([data-modo="club"]) #acceso-campos-usuario,
.acceso__caja[data-modo]:not([data-modo="club"]) #acceso-cambio {
  display: none;
}

/* «Entrar» | «Crear cuenta»: un control segmentado, no dos pastillas. */
.acceso__pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control, 8px);
  background: var(--surface-2, var(--bg));
}

.acceso__pestanas[hidden] { display: none; }

.acceso__pestana {
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.acceso__pestana[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.08), 0 0 0 1px var(--border);
}

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

.acceso__fila {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.acceso__fila[hidden],
.acceso__pista[hidden],
.acceso__enlace[hidden],
.acceso__nota[hidden],
.acceso__google[hidden],
.acceso__cambio[hidden] {
  display: none;
}

.acceso__pista,
.acceso__nota {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--text-muted);
  text-align: left;
}

.acceso__nota { text-align: center; }

/* «¿Olvidaste tu contraseña?»: un enlace a la derecha, con 44 px de objetivo. */
.acceso__enlace {
  align-self: flex-end;
  min-height: 44px;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.acceso__enlace:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.acceso__separador {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.acceso__separador::before,
.acceso__separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.acceso__google {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

/* El botón de Google lo pinta Google (un iframe); su caja se centra. */
.acceso__google-boton {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.acceso__google-boton:empty { display: none; }

/* Sin client id: el mismo aspecto que el de Google, apagado y explicado. */
.acceso__google-apagado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control, 8px);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  opacity: 0.55;
  cursor: not-allowed;
}

.acceso__google-apagado[hidden] { display: none; }

/* En modo aviso (comprobando la sesión) la tarjeta solo lleva título y ayuda. */
.acceso__caja[data-modo="aviso"] .acceso__google,
.acceso__caja[data-modo="aviso"] .acceso__pestanas {
  display: none;
}

/* ------------------------------------------------ teléfono: app nativa --- */
/* Hasta 900 px la puerta es la pantalla de entrada de una app: la tarjeta
   ocupa el ancho, sin sombra ni borde, campos a todo lo ancho con letra de
   16 px (iOS no hace zoom al enfocarlos) y botones grandes para el pulgar. */
@media (max-width: 900px) {
  .acceso {
    padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
    place-items: start stretch;
    background: var(--surface);
  }

  .acceso__caja {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-5) 0 var(--space-4);
    border: 0;
    box-shadow: none;
    background: transparent;
    gap: var(--space-3);
  }

  .acceso__marca { margin-bottom: var(--space-3); }

  .acceso__texto,
  .acceso__codigo {
    height: 52px;
    font-size: 16px;
  }

  .acceso__codigo { font-size: 22px; }

  .acceso__entrar,
  .acceso__google-apagado {
    height: 54px;
    font-size: 17px;
  }

  .acceso__pestana { min-height: 44px; font-size: 15px; }

  .acceso__etiqueta { font-size: 15px; }
}

/* ------------------------------------------------- sesión en la barra --- */

.barra__sesion {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  min-width: 0;
}

.barra__usuario {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

/* ----------------------------------------------------------- teléfono --- */

@media (max-width: 520px) {
  /* La puerta a pantalla completa vive en el bloque de 900 px (app nativa). */

  /* Cambiar de método —«Entrar con usuario», «Entrar con código»— se decide con
     el pulgar, no es una nota al pie: su caja mide 44 px de alto, el mismo
     objetivo táctil que el riel y la barra. Medido a 390 antes del arreglo:
     332×28. */
  .acceso__cambio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* En la barra de dos filas no cabe el nombre: el botón de salir sí, que es lo
     que se busca con el pulgar. */
  .barra__usuario { display: none; }

  /* El perfil va en la SEGUNDA fila, junto al nombre del modelo (order 6 en
     constructor.css): asi la barra tiene dos filas y no tres. Su columna son
     52 px —44 del objetivo tactil del boton mas el hueco— y se fija aqui, en
     la hoja que manda sobre `.barra__sesion`. */
  .barra__sesion {
    order: 6;
    flex: 0 0 52px;
    justify-content: flex-end;
  }
}

@media (max-width: 380px) {
  .acceso__titulo { font-size: var(--text-xl); }
  .acceso__codigo { height: 52px; font-size: var(--text-xl); }
}

/* Quien pide menos movimiento no ve animaciones: aquí no hay ninguna, pero si
   algún día se añade una entrada a la tarjeta, esta regla la apaga. */
@media (prefers-reduced-motion: reduce) {
  .acceso__caja { transition: none; }
}

@media print {
  .acceso,
  .barra__sesion { display: none !important; }
}