/* ========================================================================== Autenticación — Sistema Recuperadora Hojas de estilo del módulo de acceso y recuperación de contraseña. Se escribe a mano y no con utilidades de Tailwind porque styles.css está compilado y purgado: solo contiene las clases que ya usaban las vistas antiguas, y el proyecto no tiene node_modules para regenerarlo. Un CSS propio y autocontenido se comporta igual en desarrollo y en producción. ========================================================================== */ :root { --auth-verde: #0e7c4a; --auth-verde-claro: #16a34a; --auth-verde-suave: #e8f5ee; --auth-verde-borde: #bbe3cd; --auth-texto: #17202a; --auth-texto-suave: #5b6b7a; --auth-texto-tenue: #8a99a8; --auth-fondo: #eef2f5; --auth-superficie: #ffffff; --auth-borde: #d8e0e6; --auth-borde-fuerte: #b6c2cc; --auth-error: #b91c1c; --auth-error-suave: #fdeaea; --auth-error-borde: #f5c2c2; --auth-aviso: #a16207; --auth-aviso-suave: #fef6e0; --auth-aviso-borde: #f2ddaa; --auth-radio: 14px; --auth-radio-campo: 10px; --auth-sombra: 0 1px 2px rgba(16, 32, 45, .04), 0 12px 32px -8px rgba(16, 32, 45, .16); --auth-transicion: 170ms cubic-bezier(.4, 0, .2, 1); } /* * El modo oscuro es una elección del usuario, no del sistema operativo: por * eso esto responde a [data-theme="dark"] y no a prefers-color-scheme. El * atributo lo pone auth_ui.js en , restaurado desde localStorage antes * del primer pintado (ver el script inline en el de cada vista) para * que no haya parpadeo del tema equivocado al cargar. */ :root[data-theme="dark"] { --auth-texto: #e8eef3; --auth-texto-suave: #a3b1bd; --auth-texto-tenue: #7d8b98; --auth-fondo: #10171d; --auth-superficie: #1a232b; --auth-borde: #2d3944; --auth-borde-fuerte: #415260; --auth-verde-suave: #12301f; --auth-verde-borde: #1d5334; --auth-error-suave: #351717; --auth-error-borde: #5e2626; --auth-aviso-suave: #332a12; --auth-aviso-borde: #5c4a1c; --auth-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -12px rgba(0, 0, 0, .6); } /* --------------------------------------------------------- estructura */ body.auth-body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; background: var(--auth-fondo); /* Textura sutil: dos halos verdes muy diluidos, sin imágenes externas. */ background-image: radial-gradient(ellipse 80% 60% at 15% 0%, rgba(22, 163, 74, .10), transparent 60%), radial-gradient(ellipse 70% 50% at 90% 100%, rgba(14, 124, 74, .09), transparent 60%); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--auth-texto); -webkit-font-smoothing: antialiased; } .auth-card { position: relative; width: 100%; max-width: 420px; background: var(--auth-superficie); border: 1px solid var(--auth-borde); border-radius: var(--auth-radio); box-shadow: var(--auth-sombra); padding: 32px 28px; box-sizing: border-box; animation: auth-entrada 320ms cubic-bezier(.2, .8, .3, 1) both; } .auth-card--ancha { max-width: 460px; } @keyframes auth-entrada { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } * { transition-duration: .01ms !important; } } /* --------------------------------------------------------- cabecera */ .auth-head { text-align: center; margin-bottom: 26px; } .auth-logo { width: 52px; height: 52px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--auth-verde-suave); border: 1px solid var(--auth-verde-borde); } .auth-logo img { width: 30px; height: 30px; display: block; } .auth-title { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.015em; color: var(--auth-texto); } .auth-subtitle { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--auth-texto-suave); } .auth-marca { margin: 3px 0 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--auth-texto-tenue); } /* --------------------------------------------------------- tema claro/oscuro */ .auth-theme-toggle { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--auth-borde); border-radius: 9px; background: var(--auth-superficie); color: var(--auth-texto-suave); cursor: pointer; transition: color var(--auth-transicion), border-color var(--auth-transicion), background var(--auth-transicion); } .auth-theme-toggle:hover { color: var(--auth-verde); border-color: var(--auth-verde-borde); background: var(--auth-verde-suave); } .auth-theme-toggle:focus-visible { outline: 2px solid var(--auth-verde); outline-offset: 2px; } .auth-theme-toggle svg { width: 18px; height: 18px; display: block; } /* Solo se muestra el icono que representa el tema al que se pasaría al pulsar: sol cuando está en oscuro (invita a aclarar), luna cuando está en claro (invita a oscurecer). auth_ui.js alterna el atributo, no el markup. */ .auth-theme-toggle .icono-sol { display: none; } :root[data-theme="dark"] .auth-theme-toggle .icono-sol { display: block; } :root[data-theme="dark"] .auth-theme-toggle .icono-luna { display: none; } /* --------------------------------------------------------- campos */ /* display:flex ganaría al display:none implícito del atributo hidden, así que los elementos ocultos se fuerzan de forma explícita. */ [hidden] { display: none !important; } .auth-form { display: flex; flex-direction: column; gap: 17px; } .auth-campo { display: flex; flex-direction: column; gap: 6px; } .auth-label { font-size: 13px; font-weight: 560; color: var(--auth-texto); } .auth-input-wrap { position: relative; display: flex; align-items: center; } .auth-input { width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 14.5px; font-family: inherit; color: var(--auth-texto); background: var(--auth-superficie); border: 1px solid var(--auth-borde); border-radius: var(--auth-radio-campo); transition: border-color var(--auth-transicion), box-shadow var(--auth-transicion); appearance: none; } .auth-input::placeholder { color: var(--auth-texto-tenue); } .auth-input:hover:not(:disabled) { border-color: var(--auth-borde-fuerte); } .auth-input:focus { outline: none; border-color: var(--auth-verde); box-shadow: 0 0 0 3px rgba(14, 124, 74, .16); } .auth-input:disabled { opacity: .6; cursor: not-allowed; } .auth-input--con-boton { padding-right: 46px; } .auth-input.is-error { border-color: var(--auth-error-borde); background: var(--auth-error-suave); } .auth-input.is-error:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .14); } /* Botón de mostrar/ocultar contraseña */ .auth-ojo { position: absolute; right: 6px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--auth-texto-tenue); cursor: pointer; transition: color var(--auth-transicion), background var(--auth-transicion); } .auth-ojo:hover { color: var(--auth-verde); background: var(--auth-verde-suave); } .auth-ojo:focus-visible { outline: 2px solid var(--auth-verde); outline-offset: 1px; } .auth-ojo svg { width: 18px; height: 18px; } /* --------------------------------------------------------- mensajes */ .auth-error-campo { font-size: 12.5px; line-height: 1.45; color: var(--auth-error); min-height: 0; } .auth-error-campo:empty { display: none; } .auth-alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--auth-radio-campo); font-size: 13px; line-height: 1.5; border: 1px solid transparent; } .auth-alerta svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; } .auth-alerta--error { background: var(--auth-error-suave); border-color: var(--auth-error-borde); color: var(--auth-error); } .auth-alerta--exito { background: var(--auth-verde-suave); border-color: var(--auth-verde-borde); color: var(--auth-verde); } .auth-alerta--aviso { background: var(--auth-aviso-suave); border-color: var(--auth-aviso-borde); color: var(--auth-aviso); } .auth-alerta--info { background: var(--auth-verde-suave); border-color: var(--auth-verde-borde); color: var(--auth-texto); } .auth-alerta[hidden] { display: none; } /* --------------------------------------------------------- botones */ .auth-btn { position: relative; width: 100%; padding: 12px 16px; font-size: 14.5px; font-weight: 620; font-family: inherit; color: #fff; background: var(--auth-verde); border: 0; border-radius: var(--auth-radio-campo); cursor: pointer; transition: background var(--auth-transicion), transform var(--auth-transicion), box-shadow var(--auth-transicion); } .auth-btn:hover:not(:disabled) { background: var(--auth-verde-claro); box-shadow: 0 4px 14px -4px rgba(14, 124, 74, .5); } .auth-btn:active:not(:disabled) { transform: translateY(1px); } .auth-btn:focus-visible { outline: 2px solid var(--auth-verde); outline-offset: 2px; } .auth-btn:disabled { opacity: .65; cursor: not-allowed; } .auth-btn--secundario { color: var(--auth-texto); background: transparent; border: 1px solid var(--auth-borde); } .auth-btn--secundario:hover:not(:disabled) { background: var(--auth-fondo); border-color: var(--auth-borde-fuerte); box-shadow: none; } /* Indicador de envío en curso */ .auth-btn .auth-spinner { display: none; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: auth-girar .65s linear infinite; } .auth-btn.is-cargando .auth-spinner { display: inline-block; } @keyframes auth-girar { to { transform: rotate(360deg); } } /* --------------------------------------------------------- enlaces y pie */ .auth-pie { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--auth-borde); text-align: center; font-size: 13px; color: var(--auth-texto-suave); } .auth-enlace { color: var(--auth-verde); font-weight: 560; text-decoration: none; border-radius: 4px; transition: color var(--auth-transicion); } .auth-enlace:hover { color: var(--auth-verde-claro); text-decoration: underline; } .auth-enlace:focus-visible { outline: 2px solid var(--auth-verde); outline-offset: 2px; } /* --------------------------------------------------------- captcha */ .auth-captcha { display: flex; justify-content: center; min-height: 78px; align-items: center; } .auth-captcha:empty { display: none; } /* El widget de Google mide 304px fijos y no es fluido. En pantallas estrechas se reduce con transform para que no desborde la tarjeta; el margen negativo recupera el hueco que deja el escalado. */ @media (max-width: 400px) { .auth-captcha > div { transform: scale(.86); transform-origin: center; } .auth-captcha { min-height: 68px; } } /* --------------------------------------------------------- fuerza de clave */ .auth-fuerza { display: flex; flex-direction: column; gap: 6px; } .auth-fuerza-barras { display: flex; gap: 4px; } .auth-fuerza-barra { height: 4px; flex: 1; border-radius: 2px; background: var(--auth-borde); transition: background var(--auth-transicion); } .auth-fuerza-barra.n1 { background: #dc2626; } .auth-fuerza-barra.n2 { background: #ea580c; } .auth-fuerza-barra.n3 { background: #ca8a04; } .auth-fuerza-barra.n4 { background: var(--auth-verde-claro); } .auth-fuerza-texto { font-size: 12px; color: var(--auth-texto-suave); } /* Lista de requisitos de la contraseña */ .auth-requisitos { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--auth-texto-suave); } .auth-requisitos li { display: flex; align-items: center; gap: 7px; transition: color var(--auth-transicion); } .auth-requisitos li::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--auth-borde-fuerte); transition: all var(--auth-transicion); } .auth-requisitos li.ok { color: var(--auth-verde); } .auth-requisitos li.ok::before { border-color: var(--auth-verde); background: var(--auth-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat; } /* --------------------------------------------------------- estado vacío */ .auth-estado { text-align: center; padding: 8px 0 4px; } .auth-estado-icono { width: 56px; height: 56px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .auth-estado-icono svg { width: 27px; height: 27px; } .auth-estado-icono--error { background: var(--auth-error-suave); border: 1px solid var(--auth-error-borde); color: var(--auth-error); } .auth-estado-icono--exito { background: var(--auth-verde-suave); border: 1px solid var(--auth-verde-borde); color: var(--auth-verde); } .auth-estado-texto { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--auth-texto-suave); } /* --------------------------------------------------------- responsive */ @media (max-width: 420px) { body.auth-body { padding: 16px 12px; } .auth-card { padding: 26px 20px; border-radius: 12px; } .auth-title { font-size: 19px; } } @media (max-height: 620px) { body.auth-body { align-items: flex-start; } }