/* Pantallas de Cuentas: entrar y mi cuenta. Solo tokens de atalaya-design, ningún color suelto. */

.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface-muted);
}

.acceso__tarjeta {
  width: min(400px, 100%);
  display: grid;
  gap: var(--space-6);
}

.acceso__isotipo { width: 48px; height: auto; justify-self: center; }

.acceso__cabecera { display: grid; gap: var(--space-2); }

/* Entrada: logo completo y eslogan, centrados (pieza breve y simétrica). */
.acceso__cabecera--centrada { justify-items: center; text-align: center; gap: var(--space-4); }
.acceso__logo { width: min(200px, 100%); height: auto; }

.acceso__formulario { display: grid; gap: var(--space-4); }

.acceso__formulario .at-btn--primary { width: 100%; min-height: var(--touch-target); }

/* Mensaje de error del formulario o aviso tras salir: color + texto, nunca solo color. */
.acceso__mensaje {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  font-size: var(--text-small);
}
.acceso__mensaje--error { color: var(--color-danger); background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); }
.acceso__mensaje--ok { color: var(--color-success); background: var(--color-success-bg); border: 1px solid var(--color-success-border); }

.enlace { color: var(--color-link); font-size: var(--text-small); }

/* Inicio provisional, dentro del armazón (CTA-15). */
.inicio { display: grid; gap: var(--space-2); max-width: var(--measure); }
.inicio h1, .inicio p { margin: 0; }

/* Ajustes, dentro del armazón (CTA-16): tus datos, tu correo y tu contraseña de solo lectura; cada edición, en
   una ventana (.at-dialog de componentes.css). */
.ajustes { display: grid; gap: var(--space-6); max-width: 640px; }
.ajustes h1, .ajustes h2 { margin: 0; }
.ajustes .app__mensaje { margin: 0; } /* el hueco ya lo da la rejilla */
.ajustes__lista { margin: 0; padding: 0; list-style: none; border: var(--border-default); border-radius: var(--radius-card); }
.ajustes__bloque { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); }
.ajustes__bloque + .ajustes__bloque { border-top: var(--border-default); }
.ajustes__dato { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.ajustes__bloque .at-btn { flex: none; }
.ajustes__cancelar { justify-self: start; padding-inline: 0; }
.ajustes__campos { display: grid; gap: var(--space-4); }
.ajustes__nota { margin: 0 0 var(--space-4); font-size: var(--text-small); }
@media (pointer: coarse) { .ajustes__bloque .at-btn { min-height: var(--touch-target); } }
.enlace:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }

.clave { position: relative; }
.clave .at-input { padding-right: 88px; }
.clave__mostrar {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
}

/* ---------- Paisaje de las pantallas de acceso (CTA-14) ----------
   El lienzo, a pantalla completa detrás de la tarjeta (blanca sólida, para leer bien sobre el movimiento). */
.paisaje {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.paisaje.listo { opacity: 1; }
.paisaje.reajustando { opacity: 0; transition-duration: 0.2s; }
.acceso__tarjeta { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .paisaje,
  .paisaje.reajustando { transition: none; }
}