/* Sugerencia: mueve la fuente al como: */ :root { --bg-image: url('../files/images/login_gym_background.jpg'); --overlay: rgba(0,0,0,0.45); --card-bg: rgba(0,0,0,0.70); --text: #fff; --muted: #bfbfbf; --accent: #9a9a9a; --accent-contrast: #111; --radius: 12px; --space: 16px; --space-sm: 8px; --input-h: 44px; --transition: 160ms ease; } html, body { min-height: 100%; height: 100%; font-family: 'Numans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text); } /* Fondo con overlay para mejorar contraste */ body { min-height: 100svh; margin: 0; background: linear-gradient(var(--overlay), var(--overlay)), var(--bg-image) center/cover no-repeat fixed; } /* Contenedor centrado */ .container { min-height: 100%; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: calc(var(--space) * 2) var(--space); } /* Tarjeta del login */ .card { width: 100%; max-width: 420px; background-color: var(--card-bg); border-radius: var(--radius); backdrop-filter: saturate(1.1) blur(6px); -webkit-backdrop-filter: saturate(1.1) blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); overflow: hidden; } .card-header { padding: calc(var(--space) * 1.25) calc(var(--space) * 1.5) var(--space); border-bottom: 1px solid rgba(255,255,255,0.08); } .card-header h3 { margin: 0; font-weight: 600; letter-spacing: 0.2px; color: var(--text); } .card-body { padding: calc(var(--space) * 1.25) calc(var(--space) * 1.5) calc(var(--space) * 1.5); } /* Grupos de entrada (compatibles con Bootstrap) */ .input-group { display: flex; align-items: stretch; margin-bottom: var(--space); } .input-group-prepend { display: flex; } .input-group-prepend span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 0 var(--space-sm); background-color: var(--accent); color: var(--accent-contrast); border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); border: 1px solid transparent; } /* Campos de entrada */ input[type="text"], input[type="email"], input[type="password"] { flex: 1 1 auto; height: var(--input-h); padding: 0 var(--space); border: 1px solid rgba(255,255,255,0.15); border-left: 0; border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); background: rgba(255,255,255,0.06); color: var(--text); transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition); } /* Estados de foco accesibles (no elimines outline globalmente) */ input:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(154,154,154,0.35); } input::placeholder { color: rgba(255,255,255,0.65); } /* Recordarme */ .remember { display: flex; align-items: center; gap: 10px; color: var(--text); margin-bottom: var(--space); } .remember input[type="checkbox"] { width: 18px; height: 18px; } /* Botón de login */ .login_btn { display: inline-flex; align-items: center; justify-content: center; height: var(--input-h); min-width: 120px; padding: 0 calc(var(--space)*1.25); color: #fff; background-color: var(--accent); border: none; border-radius: var(--radius); cursor: pointer; transition: transform var(--transition), background-color var(--transition), color var(--transition), opacity var(--transition); } .login_btn:hover { background-color: #eaeaea; color: #111; } .login_btn:active { transform: translateY(1px) scale(0.99); } .login_btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Enlaces complementarios */ .links { margin-top: var(--space); color: var(--muted); font-size: 0.95rem; } .links a { margin-left: 4px; color: #fff; text-decoration: underline; text-underline-offset: 2px; } .links a:hover { opacity: 0.85; } /* Preferencias del usuario para reducir animaciones */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Ajustes pequeños para pantallas estrechas */ @media (max-width: 380px) { .card { border-radius: 0; max-width: none; } .input-group-prepend span { min-width: 40px; } }