@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 */
.container{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;
    }
}