@charset "utf-8";
/* CSS Document */

/* RESET */
*{margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif;}
/* BODY */
body{min-height:100vh; display:flex; justify-content:center; align-items:center; background:#ebebeb; overflow:hidden; position:relative; padding:20px;}
/* FONDO ANIMADO */
body::before{content:""; position:absolute; width:450px; height:450px; border-radius:50%; background:linear-gradient(135deg,#183b7a,#3b82f6); top:-150px; left:-150px; filter:blur(90px); opacity:.35;}
body::after{content:""; position:absolute; width:400px; height:400px; border-radius:50%; background:linear-gradient(135deg,#b8860b,#d4a017); bottom:-120px; right:-120px; filter:blur(90px); opacity:.25;}

/* CONTENEDOR */
.contlogin{width:100%; max-width:440px; position:relative; z-index:10;}
/* CARD */
.cardlogin{background:white; border-radius:32px; padding:35px 30px; box-shadow: 0 20px 40px rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.04); overflow:hidden; position:relative; animation:fade .7s ease;}
/* EFECTO */
.cardlogin::before{content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(24,59,122,.05); top:-60px; right:-60px;}
/* ANIMACION */
@keyframes fade{
from{opacity:0; transform:translateY(30px);}
to{opacity:1; transform:translateY(0);}}
/* LOGO */
.logo-box{display:flex; justify-content:center; margin-bottom:20px;}
.logo{width:140px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.15)); animation:float 3s ease-in-out infinite;}
/* ANIMACION LOGO */
@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}}
/* TITULOS */
.title{text-align:center; margin-bottom:30px;}
.title h1{font-size:30px; color:#183b7a; margin-bottom:8px; font-weight:700;}
.title p{color:#64748b; font-size:14px;}
/* MENU BOTONES */
.menu-buttons{display:flex; flex-direction:column; gap:18px;}
/* BOTONES */
.btn{ width:100%; border:none; padding:16px; border-radius:18px; cursor:pointer; font-size:15px; font-weight:600; color:white; transition:.3s; display:flex; align-items:center; justify-content:center; gap:10px;}
.btn:hover{transform:translateY(-4px);}
/* ESTILOS BOTONES */
.btn-docente{background:linear-gradient(135deg,#183b7a,#2563eb); box-shadow:0 10px 20px rgba(24,59,122,.25);}
.btn-estudiante{background:linear-gradient(135deg,#b8860b,#d4a017); box-shadow:0 10px 20px rgba(184,134,11,.25);}
.btn-admin{ background:linear-gradient(135deg,#0f766e,#14b8a6); box-shadow:0 10px 20px rgba(15,118,110,.25);}



/* FORMULARIOS */
.login-form{display:none; animation:fade .5s ease;}
.login-form.active{display:block;}
/* INPUTS */
.input-group{margin-bottom:20px;}
.input-group label{ display:block; margin-bottom:8px; font-size:14px; font-weight:500; color:#334155;}
/* INPUT BOX */
.input-box{position:relative;}
/* ICONOS DENTRO INPUT */
.input-box svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#64748b; pointer-events:none;}
/* INPUT */
.input-box input{width:100%; padding:14px 14px 14px 48px; border-radius:14px; border:1px solid #dbe2ea; background:#f8fafc; outline:none; transition:.3s; font-size:14px;}
.input-box input:focus{border-color:#183b7a; background:white; box-shadow:0 0 0 4px rgba(24,59,122,.12);}
/* BOTON VOLVER */
.back-btn{margin-top:14px; background:#f1f5f9; color:#334155;}
.back-btn:hover{background:#e2e8f0;}
/* HIDDEN */
.hidden{display:none;}
/* RESPONSIVE */
@media(max-width:480px){
.cardlogin{padding:28px 22px;}
.title h1{font-size:24px;}
.btn{padding:14px; font-size:14px;}
.logo{width:130px;}}