/* ════════════════════════════════════════════════════════════════ acceso.css — pantallas de acceso de Motivo ID Login / signup / confirma-email (auth.html, 3 modos) + cards auxiliares (forgot / reset / verify). Marca: conmotivo.css. Desktop: panel de marca navy que SE DESLIZA horizontalmente. - mode-login/verify → panel cubre la mitad derecha, form a la izda. - mode-signup → panel se desliza a la izda y aparece el form de registro a la derecha. Móvil: se apila (banda de marca arriba + form debajo, sin slide). ════════════════════════════════════════════════════════════════ */ /* ── SHELL ── */ /* El fondo NO es blanco: es el papel cálido de la marca, un pelín más presente que el --paper por defecto. Sigue leyéndose como blanco, pero da el contraste justo para que la card (esa sí, blanco puro) se despegue del fondo en vez de fundirse con él. Sin esto la sombra de la card no tiene sobre qué caer. */ .auth { position: relative; min-height: 100vh; overflow: hidden; background: var(--paper-warm); } /* Cada form-pane ocupa una mitad, en posición absoluta. */ .auth-form-pane { position: absolute; top: 0; height: 100%; width: 50%; display: flex; align-items: center; justify-content: center; padding: 48px 40px; } #login-pane, #verify-pane { left: 0; } #signup-pane { left: 50%; } /* Mitad izquierda: login por defecto, verify cuando toca. */ #verify-pane { display: none; } .auth.mode-verify #verify-pane { display: flex; } .auth.mode-verify #login-pane { display: none; } /* #signup-pane está siempre presente; el panel de marca lo tapa salvo en modo signup (cuando el panel se desliza a la izda). */ /* El contenido del pane entra con un fade + subida corta. En desktop no se ve "aparecer" de la nada: el panel navy tarda .65s en descubrir la mitad, y el retardo de .12s hace que la card aterrice justo mientras se destapa. En móvil (donde los panes se intercambian de verdad) es lo que convierte el corte seco en un cambio fluido. La visibilidad se transiciona con retardo para que el formulario oculto no sea tabulable — con opacity: 0 a secas sí lo era, y en desktop el signup vive detrás del panel navy todo el rato. */ .auth-form-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; visibility: visible; transition: opacity .5s var(--ease-out) .12s, transform .5s var(--ease-out) .12s, visibility 0s; } .auth-form-pane[aria-hidden="true"] .auth-form-inner { opacity: 0; transform: translateY(14px) scale(.985); visibility: hidden; pointer-events: none; transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), visibility 0s linear .26s; } /* ── LA CARD ── Referencia Holded: cuerpo blanco + una franja inferior separada por línea que lleva SOLO el cambio de modo. Separar el switch del cuerpo es lo que hace que la card se lea como "una tarea" en vez de como un formulario con apéndices. El wordmark "Con Motivo." NO va encima de la card: ya está en el panel navy (a la derecha en login, a la izquierda en registro, y en la barra superior en móvil), así que ponerlo también aquí lo repetía dos veces en pantalla. La sombra va en tres capas a propósito: una amplia y difusa que separa la card del fondo, una media que le da el peso, y uno de contacto pegado al borde. Una sola capa grande se ve como una mancha gris; el escalonado es lo que hace que parezca que la card está levantada de verdad. */ .acc-card { background: var(--canvas); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 44px 90px -36px rgba(11, 16, 32, 0.40), 0 14px 32px -14px rgba(11, 16, 32, 0.18), 0 2px 6px -2px rgba(11, 16, 32, 0.10); } .acc-card-body { padding: 30px 30px 28px; } .acc-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 15px 30px; border-top: 1px solid var(--line); background: var(--paper); font-size: 13.5px; color: var(--ink-soft); } .acc-switch { font-family: var(--f-sans); font-size: 13.5px; font-weight: 700; color: var(--signal); transition: color .15s; } .acc-switch:hover { color: var(--signal-ink); text-decoration: underline; } .auth-form-inner h1 { font-family: var(--f-sans); font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); } .auth-form-inner h1 em { font-style: italic; color: var(--signal); } .acc-sub { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin: 6px 0 22px; } /* El enlace de contraseña olvidada vive DENTRO del formulario, pegado al campo al que se refiere (patrón Holded), no en una fila de links al final. */ .acc-forgot { align-self: flex-end; margin-top: -6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: color .15s; } .acc-forgot:hover { color: var(--signal); } .verify-sub { font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin: 8px 0 20px; } .verify-sub strong { color: var(--ink); font-weight: 700; } .verify-actions { margin-top: 4px; } /* Aviso de spam (bloque + texto + ilustración). motivo-id tiene CSP `style-src 'self'`, que BLOQUEA los estilos inline → todo por clases. */ .spam-hint { margin: 0 0 4px; } .spam-hint-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 14px; } .spam-hint-img { display: block; width: 100%; max-width: 230px; height: auto; } /* ── PANEL DE MARCA DESLIZANTE (navy + halos cobalt) ── */ .auth-brand { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 10; transform: translateX(0); transition: transform .65s cubic-bezier(.76, 0, .24, 1); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 52px; color: #fff; background: radial-gradient(900px 540px at 18% 92%, rgba(0,97,255,0.26), transparent 60%), radial-gradient(720px 440px at 88% 6%, rgba(45,124,255,0.16), transparent 60%), linear-gradient(150deg, #0b1020 0%, #0a1a3d 55%, #061230 100%); } .auth.mode-signup .auth-brand { transform: translateX(-100%); } .auth-brand .logo-wordmark, .auth-brand .mark { color: #fff; } .auth-brand .lw-motivo { color: var(--signal-mid); } .auth-brand .lw-dot { color: var(--gold-light); } .auth-brand > .mark, .auth-brand > .logo-wordmark { font-size: 26px; position: relative; z-index: 1; } .brand-slide { display: none; position: relative; z-index: 1; } .auth.mode-login .brand-slide--login, .auth.mode-verify .brand-slide--login { display: block; } .auth.mode-signup .brand-slide--signup { display: block; } .brand-heading { font-family: var(--f-sans); font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; max-width: 460px; text-wrap: balance; } .brand-heading em { font-style: italic; color: var(--signal-mid); } /* Cuando "Con Motivo." aparece DENTRO del titular no es énfasis, es la marca: va con sus tres piezas (Con blanco · Motivo azul itálico · punto dorado), igual que el logo de arriba. El wordmark trae line-height: 1 para cuando va suelto como logo; aquí tiene que seguir el interlineado del titular o la última línea se pega a la anterior. */ .brand-heading .logo-wordmark { font-size: inherit; line-height: inherit; } .brand-points { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 26px; max-width: 420px; } .brand-points li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.82); } .brand-points li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(45,124,255,0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7cff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 11px; } /* Los dos CTAs del panel navy. El dorado se lo lleva el que cambia de modo ("Crear cuenta" / "Ya tengo cuenta"), que es la acción que queremos que se vea; "Ver productos" va en negro, un escalón por debajo. El negro sobre el navy es contraste de tono, no de luminosidad: los dos son oscuros y sin ayuda el botón se disuelve en el degradado. De ahí el borde claro a un 16% — es lo que dibuja su silueta. */ .brand-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 11px; align-items: center; } .brand-toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: var(--r-ui); font-family: var(--f-sans); font-size: 14px; font-weight: 600; background: var(--gold-light); color: var(--ink); border: 1px solid transparent; box-shadow: 0 2px 16px rgba(240, 180, 41, 0.28); transition: transform .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out); } .brand-toggle-btn:hover { transform: translateY(-1px); background: var(--gold); color: #fff; box-shadow: 0 6px 22px rgba(240, 180, 41, 0.38); } .brand-toggle-btn--ghost { background: var(--ink); color: #fff; border-color: rgba(255, 255, 255, 0.16); box-shadow: none; } .brand-toggle-btn--ghost:hover { background: var(--ink-mid); color: #fff; border-color: rgba(255, 255, 255, 0.30); box-shadow: none; } /* ── CARDS AUXILIARES (forgot / reset / verify) ── Cards sueltas, sin panel navy al lado, así que son hermanas de la card del login: mismo fondo cálido, mismo radio (18px), misma sombra en 3 capas. El wordmark SÍ va aquí encima (a diferencia del login, donde lo lleva el navy): son la única marca en pantalla. */ .card-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px 24px; background: var(--paper-warm); } .card-page .form-logo { font-size: 23px; } .auth-card { width: 100%; max-width: 420px; background: var(--canvas); border: 1px solid var(--line); border-radius: 18px; padding: 34px 32px; box-shadow: 0 44px 90px -36px rgba(11, 16, 32, 0.40), 0 14px 32px -14px rgba(11, 16, 32, 0.18), 0 2px 6px -2px rgba(11, 16, 32, 0.10); display: flex; flex-direction: column; } .auth-card h1 { font-family: var(--f-sans); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; } .auth-card h1 em { font-style: italic; color: var(--signal); } .card-sub { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 22px; } /* ── Login social ───────────────────────────────────────────────────────── El botón y su separador nacen [hidden] en el HTML y solo los enseña auth.js si GET /auth/config dice que hay proveedor configurado. Van ARRIBA del formulario (patrón Holded): es el camino más corto a la cuenta y el que menos gente abandona. */ .auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; font-size: 12px; font-weight: 600; color: var(--steel); letter-spacing: 0.02em; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* Espejo de .auth-btn (conmotivo.css) pero en secundario: misma forma (--r-ui) y misma tipografía. Dos ajustes para que case a la PERFECCIÓN con el botón primario del formulario (medido con Playwright, ambos 49px): - padding 13px en vez de 14px, porque aquí sí hay borde (1px arriba y abajo). - line-height explícito: .auth-btn es un