/* ============================================================ login-style.css — Rediseno de la pantalla de acceso (iniciar.php) ------------------------------------------------------------ Scopeado bajo .login-page (clase del ) para no afectar nada mas. ============================================================ */ *{ box-sizing: border-box; } .login-page{ margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Montserrat','Segoe UI',Arial,sans-serif; color: #2c3a47; background: #0d3b66; background: linear-gradient(135deg, #1769aa 0%, #0d3b66 100%); position: relative; overflow: hidden; } /* logo gigante translucido de fondo */ .login-page::before{ content: ""; position: absolute; right: -80px; bottom: -80px; width: 420px; height: 420px; background: url("../img/logo50_320x226.png") no-repeat center / contain; opacity: .06; pointer-events: none; } /* ---------- Tarjeta ---------- */ .login-card{ position: relative; z-index: 1; width: 100%; max-width: 400px; background: #ffffff; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.30); padding: 38px 34px 30px; animation: loginIn .45s ease both; } @keyframes loginIn{ from{ opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Encabezado ---------- */ .login-head{ text-align: center; margin-bottom: 28px; } .login-logo{ width: 92px; height: auto; margin-bottom: 14px; } .login-head h1{ margin: 0; font-size: 26px; font-weight: 700; color: #1769aa; letter-spacing: .5px; } .login-head p{ margin: 4px 0 0; font-size: 13px; color: #8190a0; font-weight: 500; } /* ---------- Campos ---------- */ .login-field{ position: relative; margin-bottom: 16px; } .login-field .login-ico{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9bb0c4; font-size: 16px; pointer-events: none; } .login-field input{ width: 100%; height: 50px; border: 1px solid #dbe3ec; border-radius: 11px; background: #f6f9fc; padding: 0 44px 0 42px; font-size: 15px; color: #2c3a47; transition: all .18s ease; outline: none; } .login-field input::placeholder{ color: #aab7c4; } .login-field input:focus{ border-color: #1769aa; background: #fff; box-shadow: 0 0 0 4px rgba(23,105,170,.12); } /* boton ver/ocultar contrasena */ .login-eye{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: #9bb0c4; font-size: 16px; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; transition: color .18s ease; } .login-eye:hover{ color: #1769aa; } /* ---------- Boton ingresar ---------- */ .login-btn{ width: 100%; height: 50px; margin-top: 6px; border: none; border-radius: 11px; background: linear-gradient(135deg, #2980b9, #1769aa); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .3px; cursor: pointer; box-shadow: 0 8px 20px rgba(23,105,170,.35); transition: all .2s ease; } .login-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(23,105,170,.45); } .login-btn:active{ transform: translateY(0); } /* ---------- Pie ---------- */ .login-foot{ text-align: center; margin-top: 22px; font-size: 12px; color: #9bb0c4; } /* ---------- Responsive ---------- */ @media (max-width: 480px){ .login-card{ padding: 30px 22px 24px; border-radius: 14px; } .login-head h1{ font-size: 23px; } .login-logo{ width: 78px; } }