/* Pantalla de acceso de LÍBEROS. Una sola tarjeta centrada sobre el fondo líquido. Sigue el manual de marca: §12.11 (el acceso va sobre fondo líquido oscuro y la tarjeta es sólida, porque es contenido y el contenido nunca lleva cristal), §12.2 (botones), §12.3 (campos), §8 (radios y elevación) y §11 (movimiento). Los colores salen de liberos-tokens.css. Lo único escrito aquí son las transparencias de blanco de los estados de hover y el violeta del anillo de foco, porque necesitan canal alfa y los tokens son hexadecimales opacos. La pantalla es oscura siempre, no según la preferencia del sistema: el manual la especifica así (§12.11) y el fondo líquido es el momento de marca. Por eso fija `data-theme="dark"` en el y no consulta `prefers-color-scheme`. */ /* --- Lienzo ---------------------------------------------------------------- */ .lb-acceso { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; font-family: var(--lb-font); font-size: 16px; line-height: 1.5; color: var(--lb-text-primary); background: var(--lb-niebla-950); -webkit-font-smoothing: antialiased; } /* El fondo líquido del manual (§5.6, valores de modo oscuro): cuatro manchas muy difuminadas sobre Niebla 950, más un grano que evita el bandeado que provoca un desenfoque tan grande. La base recoge el degradado del encabezado de liberos.space, ya en colores de la paleta. */ .lb-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 90% at 8% 0%, var(--lb-cielo-900) 0%, transparent 60%), linear-gradient(150deg, var(--lb-niebla-900) 0%, var(--lb-niebla-950) 55%, var(--lb-niebla-950) 100%); } .lb-mancha { position: absolute; border-radius: 50%; filter: blur(110px); mix-blend-mode: screen; will-change: transform; } /* Las cuatro del manual, con su color y su opacidad. Cada una se mueve a un ritmo distinto y sin coincidir con las demás: si respiran a la vez el fondo parece un latido, no una corriente. */ .lb-mancha--violeta { width: 46vmax; height: 46vmax; top: -14vmax; left: -10vmax; background: var(--lb-violeta-700); opacity: 0.45; animation: lb-deriva-a 34s var(--lb-ease-standard) infinite alternate; } .lb-mancha--cielo { width: 52vmax; height: 52vmax; top: 16vmax; right: -18vmax; background: var(--lb-cielo-800); opacity: 0.5; animation: lb-deriva-b 43s var(--lb-ease-standard) infinite alternate; } .lb-mancha--turquesa { width: 38vmax; height: 38vmax; bottom: -16vmax; left: 18vmax; background: var(--lb-turquesa-800); opacity: 0.4; animation: lb-deriva-c 51s var(--lb-ease-standard) infinite alternate; } .lb-mancha--magenta { width: 30vmax; height: 30vmax; bottom: 4vmax; right: 6vmax; background: var(--lb-magenta-800); opacity: 0.3; animation: lb-deriva-d 38s var(--lb-ease-standard) infinite alternate; } @keyframes lb-deriva-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vmax, 10vmax, 0) scale(1.18); } } @keyframes lb-deriva-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-16vmax, 8vmax, 0) scale(0.9); } } @keyframes lb-deriva-c { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(12vmax, -12vmax, 0) scale(1.25); } } @keyframes lb-deriva-d { from { transform: translate3d(0, 0, 0) scale(1.15); } to { transform: translate3d(-10vmax, -6vmax, 0) scale(0.95); } } .lb-grano { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); } /* --- Composición ----------------------------------------------------------- */ .lb-marco { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 48px 16px 24px; } .lb-tarjeta { width: 100%; max-width: 440px; padding: 32px; background: var(--lb-bg-surface); border: 1px solid var(--lb-border-subtle); border-radius: var(--lb-radius-xl); box-shadow: var(--lb-e4); animation: lb-entrada var(--lb-dur-4) var(--lb-ease-spring) both; } /* El único momento orquestado de la pantalla (§11.1). Va de `both` y no deja el contenido en opacidad 0 a la espera de JavaScript: si las animaciones no corren, el fotograma final es el que se ve. */ @keyframes lb-entrada { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.985); } to { opacity: 1; transform: none; } } .lb-marca { display: block; height: 34px; width: auto; margin-bottom: 24px; } .lb-titulo { margin: 0 0 6px; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--lb-text-primary); } .lb-entradilla { margin: 0 0 24px; font-size: 14px; line-height: 20px; color: var(--lb-text-secondary); } /* --- Selector de vía de acceso --------------------------------------------- */ .lb-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--lb-bg-surface-2); border-radius: var(--lb-radius-full); } .lb-via { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 0; border-radius: var(--lb-radius-full); background: transparent; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--lb-text-secondary); text-decoration: none; text-align: center; cursor: pointer; transition: background var(--lb-dur-2) var(--lb-ease-standard), color var(--lb-dur-2) var(--lb-ease-standard); } .lb-via svg { width: 20px; height: 20px; } .lb-via:hover { background: rgba(255, 255, 255, 0.05); color: var(--lb-text-primary); } .lb-via[aria-selected="true"] { background: var(--lb-accent-subtle); color: var(--lb-accent-subtle-text); box-shadow: inset 0 0 0 1px var(--lb-violeta-700); } .lb-via:focus-visible, .lb-boton:focus-visible, .lb-campo input:focus-visible, .lb-enlace:focus-visible, .lb-pie a:focus-visible { outline: 2px solid var(--lb-focus); outline-offset: 2px; } /* --- Panel ------------------------------------------------------------------ */ .lb-panel[hidden] { display: none; } .lb-campo { margin-bottom: 16px; } .lb-campo label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--lb-text-secondary); } .lb-opcional { font-weight: 400; color: var(--lb-text-tertiary); } /* §12.3: alto 44, radio 10. El borde es `border/strong` del modo oscuro y no el Niebla 300 que el manual escribe para los dos modos (hallazgo M-05). */ .lb-campo input[type="text"], .lb-campo input[type="email"], .lb-campo input[type="password"] { width: 100%; height: 44px; padding: 0 14px; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--lb-text-primary); background: var(--lb-bg-surface-2); border: 1px solid var(--lb-border-strong); border-radius: var(--lb-radius-sm); transition: border-color var(--lb-dur-2) var(--lb-ease-standard), box-shadow var(--lb-dur-2) var(--lb-ease-standard); } .lb-campo input::placeholder { color: var(--lb-niebla-400); } .lb-campo input:focus { border-color: var(--lb-accent); outline: none; box-shadow: 0 0 0 3px rgba(129, 51, 241, 0.28); } .lb-campo--error input { border-color: var(--lb-error); } .lb-campo-error { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--lb-error); } .lb-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; } .lb-recordar { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lb-text-secondary); cursor: pointer; } .lb-recordar input { width: 16px; height: 16px; accent-color: var(--lb-accent); cursor: pointer; } .lb-enlace { font-size: 14px; color: var(--lb-text-link); text-decoration: none; } .lb-enlace:hover { text-decoration: underline; } /* --- Botones ---------------------------------------------------------------- */ .lb-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 20px; box-sizing: border-box; border: 0; border-radius: var(--lb-radius-full); font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--lb-dur-2) var(--lb-ease-standard), transform var(--lb-dur-1) var(--lb-ease-standard); } .lb-boton--primario { background: var(--lb-accent); color: var(--lb-text-on-accent); } .lb-boton--primario:hover { background: var(--lb-accent-hover); } .lb-boton:active { transform: scale(0.97); } .lb-boton--secundario { background: transparent; color: var(--lb-text-primary); box-shadow: inset 0 0 0 1px var(--lb-border-strong); } .lb-boton--secundario:hover { background: rgba(255, 255, 255, 0.05); } /* --- Pie de la tarjeta y de la página --------------------------------------- */ .lb-separador { margin: 24px 0 20px; border: 0; border-top: 1px solid var(--lb-border-subtle); } .lb-alta { margin: 0; font-size: 14px; line-height: 20px; color: var(--lb-text-secondary); text-align: center; } .lb-alta a { color: var(--lb-text-link); text-decoration: none; } .lb-alta a:hover { text-decoration: underline; } .lb-pie { position: relative; z-index: 2; padding: 0 16px 32px; font-size: 12px; line-height: 16px; color: var(--lb-text-tertiary); text-align: center; } .lb-pie a { color: var(--lb-text-tertiary); text-decoration: none; } .lb-pie a:hover { color: var(--lb-text-secondary); text-decoration: underline; } /* --- Avisos ----------------------------------------------------------------- */ .lb-avisos { margin-bottom: 20px; } .lb-aviso { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 8px; font-size: 14px; line-height: 20px; border-radius: var(--lb-radius-sm); background: rgba(255, 255, 255, 0.05); color: var(--lb-text-primary); border-left: 3px solid var(--lb-niebla-400); } .lb-aviso--danger, .lb-aviso--error { border-left-color: var(--lb-error); } .lb-aviso--success { border-left-color: var(--lb-exito); } .lb-aviso--warning { border-left-color: var(--lb-aviso); } .lb-aviso--info { border-left-color: var(--lb-info); } /* --- Panel informativo (Outsourcing) ---------------------------------------- */ .lb-nota { margin: 0 0 20px; padding: 16px; font-size: 14px; line-height: 20px; color: var(--lb-text-secondary); background: var(--lb-bg-surface-2); border-radius: var(--lb-radius-md); } .lb-nota strong { display: block; margin-bottom: 4px; color: var(--lb-text-primary); font-weight: 600; } /* --- Aviso de cookies sobre esta pantalla ----------------------------------- */ /* El aviso es compartido con el resto del sitio y sigue en blanco, con Poppins y con el magenta de la marca anterior. Reescribirlo es trabajo del rediseño general (hallazgo P-04); mientras tanto, aquí se le dan los tokens para que no rompa la pantalla. */ .lb-acceso #cookie-consent-banner { font-family: var(--lb-font); background: var(--lb-bg-surface); color: var(--lb-text-primary); border: 1px solid var(--lb-border-subtle); border-radius: var(--lb-radius-xl); box-shadow: var(--lb-e4); } .lb-acceso .cookie-banner-content p a { color: var(--lb-text-link); } .lb-acceso .cookie-banner-actions .btn { border-radius: var(--lb-radius-full); } .lb-acceso #cookie-accept-btn { background: var(--lb-accent); border-color: var(--lb-accent); color: var(--lb-text-on-accent); } .lb-acceso #cookie-accept-btn:hover { background: var(--lb-accent-hover); border-color: var(--lb-accent-hover); } .lb-acceso #cookie-deny-btn, .lb-acceso #cookie-prefs-btn { background: var(--lb-bg-surface-2); border-color: var(--lb-border-strong); color: var(--lb-text-primary); } .lb-acceso .cookie-banner-footer-links { border-top-color: var(--lb-border-subtle); } .lb-acceso .cookie-banner-footer-links a { color: var(--lb-text-tertiary); } .lb-acceso #cookie-consent-icon { background: var(--lb-bg-surface); border-color: var(--lb-border-subtle); color: var(--lb-text-secondary); } .lb-acceso #cookie-consent-icon:hover { background: var(--lb-bg-surface-2); color: var(--lb-accent-subtle-text); } /* --- Adaptación ------------------------------------------------------------- */ @media (max-width: 480px) { .lb-marco { padding: 24px 16px 16px; } .lb-tarjeta { padding: 24px 20px; border-radius: var(--lb-radius-lg); } .lb-selector { grid-template-columns: repeat(2, 1fr); border-radius: var(--lb-radius-lg); } .lb-via { border-radius: var(--lb-radius-md); } .lb-titulo { font-size: 26px; line-height: 32px; } } /* §11.3: sin movimiento, las manchas se quedan quietas y la entrada es un fundido corto. El fondo sigue estando, sólo deja de derivar. */ @media (prefers-reduced-motion: reduce) { .lb-mancha { animation: none; } .lb-tarjeta { animation-duration: var(--lb-dur-1); animation-timing-function: linear; animation-name: lb-fundido; } .lb-boton:active { transform: none; } } @keyframes lb-fundido { from { opacity: 0; } to { opacity: 1; } } /* §7.5: con transparencia reducida o alto contraste, el fondo se vuelve liso y la tarjeta gana un borde que no depende del color. */ @media (prefers-reduced-transparency: reduce) { .lb-mancha, .lb-grano { display: none; } .lb-fondo { background: var(--lb-bg-canvas); } } @media (prefers-contrast: more) { .lb-mancha, .lb-grano { display: none; } .lb-fondo { background: var(--lb-bg-canvas); } .lb-tarjeta { border: 1.5px solid var(--lb-niebla-400); } .lb-campo input[type="text"], .lb-campo input[type="email"], .lb-campo input[type="password"] { border-width: 1.5px; border-color: var(--lb-niebla-400); } }