:root{--color-primary: #E31837;--color-primary-dark: #B91430;--color-primary-light: #FF4D6A;--color-primary-rgb: 227, 24, 55;--color-dark: #0A0A0F;--color-dark-elevated: #12121A;--color-dark-surface: #1A1A24;--color-dark-border: #2A2A36;--text-primary: #FFFFFF;--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .5);--gradient-primary: linear-gradient(135deg, #E31837 0%, #FF4D6A 50%, #E31837 100%);--gradient-dark: linear-gradient(180deg, #0A0A0F 0%, #12121A 100%);--gradient-text: linear-gradient(135deg, #E31837 0%, #FF6B6B 50%, #E31837 100%);--gradient-glass: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%);--shadow-glow: 0 0 60px rgba(227, 24, 55, .3);--shadow-glow-sm: 0 0 30px rgba(227, 24, 55, .2);--shadow-card: 0 25px 50px -12px rgba(0, 0, 0, .5);--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--ease-out: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-normal: .3s}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);line-height:1.6;color:var(--text-primary);background:var(--color-dark);min-height:100vh;overflow-x:hidden}.login{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.login:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 20% 20%,rgba(227,24,55,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(227,24,55,.1) 0%,transparent 50%),radial-gradient(ellipse at 40% 60%,rgba(255,77,106,.05) 0%,transparent 40%);animation:bgFloat 20s ease-in-out infinite;z-index:0}.login:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 49.5%,rgba(227,24,55,.03) 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,rgba(227,24,55,.03) 50%,transparent 50.5%);background-size:100px 100px;opacity:.5;z-index:0}@keyframes bgFloat{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(2%,2%) rotate(1deg)}50%{transform:translateY(4%) rotate(0)}75%{transform:translate(-2%,2%) rotate(-1deg)}}.login-contenido{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:40px 20px;position:relative;z-index:1}.login-contenido-recuadro{width:100%;max-width:440px;background:linear-gradient(145deg,rgba(26,26,36,.9) 0%,rgba(18,18,26,.95) 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-card),0 0 0 1px #ffffff0d inset,var(--shadow-glow-sm);position:relative;overflow:hidden;animation:cardAppear .8s var(--ease-out) forwards;opacity:0;transform:translateY(30px)}.login-contenido-recuadro:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(227,24,55,.5) 50%,transparent 100%)}@keyframes cardAppear{to{opacity:1;transform:translateY(0)}}.login-contenido .informacion{padding:48px 40px}@media (max-width: 480px){.login-contenido .informacion{padding:36px 24px}}.login-contenido .informacion .logo-link{display:block;text-align:center;margin-bottom:32px}.login-contenido .informacion img{display:inline-block;width:140px;height:auto;filter:drop-shadow(0 4px 20px rgba(227,24,55,.3));transition:transform var(--duration-normal) var(--ease-out)}.login-contenido .informacion .logo-link:hover img{transform:scale(1.05)}.login-contenido .informacion h1{text-align:center;color:var(--text-primary);font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:-.5px;margin-bottom:32px}.login-contenido .informacion form{display:flex;flex-direction:column;gap:24px}.login-contenido .informacion .field{position:relative}.login-contenido .informacion .field label{display:block;margin-bottom:8px;color:var(--text-secondary);font-size:.875rem;font-weight:500;letter-spacing:.3px;transition:color var(--duration-fast) var(--ease-out)}.login-contenido .informacion .field input{display:block;width:100%;padding:14px 18px;border:2px solid var(--color-dark-border);border-radius:var(--radius-md);background:rgba(10,10,15,.6);color:var(--text-primary);font-family:var(--font-body);font-size:1rem;transition:all var(--duration-normal) var(--ease-out);outline:none}.login-contenido .informacion .field input::placeholder{color:var(--text-muted)}.login-contenido .informacion .field input:hover{border-color:#e318374d;background:rgba(10,10,15,.8)}.login-contenido .informacion .field input:focus{border-color:var(--color-primary);background:rgba(10,10,15,.9);box-shadow:0 0 0 4px #e3183726,0 0 20px #e318371a}.login-contenido .informacion .field input:focus+label,.login-contenido .informacion .field:focus-within label{color:var(--color-primary)}.login-contenido .informacion .boton{padding:8px 0 0;text-align:center}.login-contenido .informacion .boton button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 32px;background:var(--gradient-primary);color:var(--text-primary);font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:.5px;border:none;border-radius:var(--radius-full);cursor:pointer;position:relative;overflow:hidden;box-shadow:0 4px 24px #e3183766;transition:all var(--duration-normal) var(--ease-out)}.login-contenido .informacion .boton button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);opacity:0;transition:opacity var(--duration-normal) var(--ease-out)}.login-contenido .informacion .boton button:hover{transform:translateY(-3px);box-shadow:0 8px 32px #e3183780,0 0 40px #e318374d}.login-contenido .informacion .boton button:hover:before{opacity:1}.login-contenido .informacion .boton button:active{transform:translateY(-1px)}.login-contenido .informacion .boton button:focus{outline:none;box-shadow:0 0 0 4px #e318374d,0 8px 32px #e3183780}.login-contenido .informacion .boton button:disabled{background:var(--color-dark-border);cursor:not-allowed;box-shadow:none;transform:none}.spinner{display:none;width:48px;height:48px;margin:0 auto 24px;position:relative}.spinner:before,.spinner:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid transparent;border-top-color:var(--color-primary);border-radius:50%;animation:spinnerRotate 1.2s linear infinite}.spinner:after{top:6px;right:6px;bottom:6px;left:6px;border-top-color:#e3183780;animation-duration:1.8s;animation-direction:reverse}@keyframes spinnerRotate{to{transform:rotate(360deg)}}.alert{padding:14px 18px;margin-top:20px;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;animation:alertAppear .4s var(--ease-out) forwards}.alert-danger{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#fca5a5}@keyframes alertAppear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}a{color:var(--text-secondary);text-decoration:none;font-size:.875rem;transition:color var(--duration-fast) var(--ease-out);display:inline-block;margin-bottom:20px}a:hover{color:var(--color-primary)}a:focus{outline:none;color:var(--color-primary)}.login-decor{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(227,24,55,.2) 0%,transparent 70%);filter:blur(40px);pointer-events:none;z-index:0}.login-decor--1{width:300px;height:300px;top:-100px;right:-100px;animation:floatDecor 8s ease-in-out infinite}.login-decor--2{width:200px;height:200px;bottom:-50px;left:-50px;animation:floatDecor 10s ease-in-out infinite reverse}@keyframes floatDecor{0%,to{transform:translate(0)}50%{transform:translate(20px,20px)}}@media (max-width: 480px){.login-contenido-recuadro{margin:0 16px;border-radius:var(--radius-lg)}.login-contenido .informacion img{width:120px;margin-bottom:24px}.login-contenido .informacion .field input{padding:12px 16px}.login-contenido .informacion .boton button{padding:14px 28px}}
