/* ============================================================================
   Lumina CRM · acceso.css — L1 Entrar, L2 Crear mi negocio, P1 Mi perfil y ST9 Usuarios
   Solo añade a components.css y screens.css; todo sale de tokens.css, así que
   sirve igual en claro y oscuro. Objetivos táctiles de 44 px y sin desbordes a 390 px.
   ========================================================================== */

/* ---------------------------------------------------------------- L1 · L2 */
.acceso { display: flex; flex-direction: column; }
.acceso__marca { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) 0 var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.acceso__logo { height: 30px; width: auto; }
.acceso__antes { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--text-3); }
.acceso__encabezado { margin: var(--space-4) 0 var(--space-5); }
.acceso__encabezado h1 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; letter-spacing: -0.02em; }
.acceso__encabezado p { margin-top: var(--space-1); }
/* El texto va en --text (el rojo sobre su fondo suave no llega a AA en texto pequeño); el color lo lleva el icono y el fondo. */
.acceso__error { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-m); background: var(--danger-soft); color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; }
.acceso__error .ico-sm { color: var(--danger); margin-top: 1px; }
.acceso__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-2); margin-top: var(--space-4); }
.acceso__enlace { min-height: var(--tap); display: inline-flex; align-items: center; font-weight: 600; }
.acceso__demo { display: flex; align-items: flex-start; gap: var(--space-3); }
.acceso__demo .ico { color: var(--primary); margin-top: 1px; }
.acceso__demo p { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); }

/* M-078 · L4 y L5: «¿Olvidaste tu contraseña?», el correo enviado y el enlace del ensayo; la casilla de los términos (L2 y la hoja) */
.acceso__pie--olvide { margin-top: var(--space-2); }
.acceso__pie--olvide + .acceso__pie { margin-top: 0; }
.acceso__enviado, .acceso__ensayo { display: flex; align-items: flex-start; gap: var(--space-3); }
.acceso__enviado > .ico { color: var(--primary); margin-top: 2px; flex: none; }
.acceso__ensayo > .ico { color: var(--primary); margin-top: 2px; flex: none; }
.acceso__enviado p, .acceso__ensayo p { line-height: var(--lh-sm); overflow-wrap: anywhere; }
.casilla { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--tap); padding: var(--space-2) 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); cursor: pointer; }
.casilla input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--primary); }
.casilla a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.campo--casilla.campo--error .casilla input { outline: 2px solid var(--danger); outline-offset: 2px; }

/* Contraseña con "Mostrar / Ocultar" dentro del campo */
.campo__clave { position: relative; display: flex; align-items: center; }
.campo__clave input { padding-right: 112px; }
.campo__ver { position: absolute; right: 2px; top: 2px; bottom: 2px; min-width: var(--tap); padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-s); color: var(--primary); font-size: var(--fs-sm); font-weight: 700; }
@media (hover: hover) { .campo__ver:hover { background: var(--primary-soft); } }

/* ---------------------------------------------------------------- P1 · Mi perfil */
.perfil__cab { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0 var(--space-4); }
.perfil__nombre { font-size: var(--fs-xl); line-height: var(--lh-xl); overflow-wrap: anywhere; }
.perfil__datos { margin-top: var(--space-2); }
.perfil__datos .fila-dato b { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- ST9 · Usuarios y acceso */
.u9 .chip { height: var(--tap); }
.u9-quien { gap: var(--space-3); }
.u9-otra { min-height: var(--tap); align-self: flex-start; gap: 6px; }
.u9-linea { display: block; white-space: normal; }
.u9-correo { overflow-wrap: anywhere; }
/* Contraseña inicial: en monoespaciada y seleccionable de un toque, para copiarla o dictarla sin confundir letras */
.clave { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); background: var(--surface); border: 1px dashed var(--primary); border-radius: var(--radius-m); }
.clave__valor { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; letter-spacing: 0.04em; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }

/* ---------------------------------------------------------------- M-078 B · L6 Crea tu cuenta, L7 Pago aprobado, L8 Activa tu cuenta (la maqueta del 2026-11-12) */
.alta__cab { display: flex; align-items: center; gap: var(--space-2); }
.alta__cab .acceso__marca { padding-bottom: var(--space-2); }
.alta__cab--centro { justify-content: center; }
.alta__pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: var(--space-2) 0 var(--space-2); }
.alta__pasos span { height: 4px; border-radius: 2px; background: var(--border); }
.alta__pasos span.hecho { background: var(--primary); }
.alta__dos { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-3); }
.alta__dos .campo { min-width: 0; }
.alta__opciones { display: flex; flex-direction: column; gap: var(--space-3); }
.alta__opcion { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--border); border-radius: var(--radius-m); background: var(--surface); text-align: left; color: var(--text); }
.alta__opcion b { display: block; font-size: var(--fs-lg); }
.alta__opcion .sm { display: block; }
.alta__opcion[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.alta__radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text-3); }
.alta__opcion[aria-pressed="true"] .alta__radio { border: 7px solid var(--primary); }
.alta__ahorro { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--primary); }
.alta__resumen .fila-dato { align-items: center; }
.alta__resumen .fila-dato b { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.alta__total { font-size: var(--fs-lg); }
.alta__turnstile { margin: var(--space-2) 0; min-height: 65px; }
.alta__medios { text-align: center; margin-top: var(--space-3); }
.alta__ok { width: 64px; height: 64px; margin: var(--space-6) auto var(--space-3); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); }
.alta__titulo { text-align: center; font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
.alta__centro { text-align: center; margin-top: var(--space-2); }