/* css/login.css */ /* ============================================ Fuentes ============================================ */ @font-face { font-family: 'AdobeCleanBold'; src: url('../fonts/AdobeCleanBold.otf') format('opentype'); font-weight: bold; } @font-face { font-family: 'AdobeCleanRegular'; src: url('../fonts/AdobeCleanRegular.otf') format('opentype'); font-weight: normal; } /* ============================================ Reset & Global ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: 'AdobeCleanRegular', sans-serif; } body { /* 1) Imagen de fondo centrada, fija y cubriendo todo el viewport */ background: url('../images/maintenance-bg.jpg') center center / cover no-repeat fixed, /* 2) Degradado animado encima (usa alpha para ver la imagen) */ linear-gradient( 135deg, rgba(88,137,181,0.8) 0%, rgba(63,95,141,0.8) 100% ); /* tamaño: la imagen cubre, el degradado 200% para animar */ background-size: cover, 200% 200%; /* animación sólo del degradado (segunda capa) */ animation: gradientMove 20s ease infinite; color: #fff; position: relative; overflow-x: hidden; } @keyframes gradientMove { 0% { background-position: cover, 0% 50%; } 50% { background-position: cover, 100% 50%; } 100% { background-position: cover, 0% 50%; } } /* ============================================ Layout principal ============================================ */ .login-wrapper { max-width: 900px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; min-height: calc(100vh - 40px); /* deja espacio para el footer */ padding: 0 20px; } /* ============================================ Columna izquierda ============================================ */ .login-left { width: calc(50% - 20px); padding-right: 40px; text-align: left; animation: slideInLeft 0.8s ease-out both; } .login-left .logo { max-width: 420px; margin-bottom: 0.75rem; animation: bounceIn 1s ease-out both; } .login-left h2 { font-family: 'AdobeCleanBold', sans-serif; font-size: 2rem; margin-bottom: 0.5rem; } .login-left p { font-size: 1rem; color: #91bbd0; line-height: 1.5; margin-bottom: 0; /* eliminamos espacio extra */ } /* ============================================ Columna derecha (formulario) ============================================ */ .login-right { width: calc(50% - 20px); background: #fff; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,0.1); animation: slideInRight 0.8s ease-out both; color: #333; font-family: 'AdobeCleanRegular', sans-serif; } .login-right .form-label { color: #3f5f8d; font-weight: bold; } .login-right .form-control { border-radius: 0.5rem; } .login-right .btn-login { background-color: #3f5f8d; border: none; padding: 0.75rem; font-size: 1rem; width: 100%; color: #fff; border-radius: 0.5rem; transition: transform 0.3s, background-color 0.3s; } .login-right .btn-login:hover { transform: translateY(-2px); background-color: #2e4a71; } .login-right .badge-error { display: inline-block; margin-bottom: 1rem; } .forgot-link { display: block; text-align: right; margin-top: 0.5rem; font-size: 0.9rem; color: #3f5f8d; text-decoration: none; } .forgot-link:hover { text-decoration: underline; } /* ============================================ Mini footer ============================================ */ .mini-footer { position: fixed; bottom: 0; width: 100%; padding: 0.5rem 20px; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-family: 'AdobeCleanRegular', sans-serif; color: #fff; background: rgba(0,0,0,0.1); animation: fadeInUp 0.6s ease-out both; z-index: 100; } .mini-footer .right a { color: #fff; text-decoration: none; margin-left: 1rem; transition: color 0.2s; } .mini-footer .right a:hover { color: #91bbd0; } /* ============================================ Animaciones ============================================ */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ Responsive ============================================ */ @media (max-width: 768px) { .login-wrapper { flex-direction: column; padding: 1rem 10px; min-height: auto; align-items: stretch; } .login-left, .login-right { width: 100%; padding: 1rem 0; text-align: center; margin-bottom: 2rem; } .login-left { padding-right: 0; } } @media (max-width: 576px) { .login-left .logo { max-width: 160px; margin-bottom: 0.5rem; } .login-left h2 { font-size: 1.5rem; margin-bottom: 0.5rem; } .login-left p { font-size: 0.9rem; padding: 0 0.5rem; margin-bottom: 1rem; } .login-right .btn-login { font-size: 0.95rem; } .forgot-link { font-size: 0.85rem; } } /* ---------------------------------- Botón “Regístrate” ---------------------------------- */ /* ---------------------------------- Botón “Regístrate” (estilo botón principal) ---------------------------------- */ .login-right .btn-toggle-register { display: block; width: 100%; padding: 0.75rem; font-size: 1rem; background-color: #91bbd0; /* azul claro */ border: none; color: #fff; border-radius: 0.5rem; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; margin-top: 1rem; } .login-right .btn-toggle-register:hover { transform: translateY(-2px); background-color: #6a8fb8; /* azul un poco más oscuro */ } /* ---------------------------------- Feedback de la fortaleza de la contraseña ---------------------------------- */ #password-strength { font-size: 0.85rem; margin-top: 0.25rem; font-weight: bold; } /* ---------------------------------- Feedback de la validez del token ---------------------------------- */ #token-feedback { font-size: 0.85rem; margin-top: 0.25rem; } /* ---------------------------------- Ajuste para el botón “Crear Cuenta” (usa btn-light + text-primary en el HTML) ---------------------------------- */ .btn-light.text-primary { border-radius: 0.5rem; padding: 0.75rem; font-weight: bold; transition: background 0.3s, color 0.3s; } .btn-light.text-primary:hover { background: #e6f0ff; color: #3f5f8d; } /* Caja semitransparente para el texto */ .login-left .text-box { background: rgba(0, 0, 0, 0.1); /* negro al 50% */ padding: 1.5rem; /* espacio interior */ border-radius: 0.75rem; /* esquinas redondeadas */ display: inline-block; /* para que ajuste al ancho del contenido */ max-width: 100%; /* no desborde en móvil */ } /* Ajustes de texto dentro */ .login-left .text-box h2, .login-left .text-box p { color: #fff; /* blanco puro para máximo contraste */ }