/* ============================================================================
   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__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.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); }

/* 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; }
.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; }