body{

    margin:0;
    padding:0;

    font-family:Arial, sans-serif;

    background:#f3f8f2;

    text-align:center;
}
body{

    background:

    linear-gradient(

        #dff7ff,

        #f6fff0

    );

}

.contenedor-login{

    width:350px;

    margin:80px auto;

    background:white;

    padding:30px;

    border-radius:15px;

    box-shadow:0 0 15px rgba(0,0,0,.1);
}

input{

    width:90%;

    padding:12px;

    margin:10px;

    border:1px solid #ccc;

    border-radius:10px;
}

button{

    background:#4CAF50;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:10px;

    cursor:pointer;
}
button{

    animation:
        aparecerBoton .8s ease;

    animation-delay:2s;

    animation-fill-mode:forwards;

    opacity:0;

}
@keyframes aparecerBoton{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.dashboard{

    padding:30px;
}

.estadisticas{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:20px;
}

.card{

    background:white;

    padding:20px;

    border-radius:10px;

    min-width:120px;

    box-shadow:0 0 10px rgba(0,0,0,.1);
}
/*avatar*/
.avatar{

    width:180px;
    height:180px;

    border-radius:50%;

    object-fit:cover;

    margin:20px;

    border:5px solid #4CAF50;
}

.login-card{

    width:400px;

    margin:40px auto;

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:0 0 15px rgba(0,0,0,.1);

    text-align:center;
}
.panel-arbol{

    background:#ffffff;

    border-radius:20px;

    padding:20px;

    margin-top:20px;

    text-align:center;

    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.arbol{

    max-width:220px;

    width:100%;

    height:auto;

    display:block;

    margin:auto;
}


.mensaje-luna{

    background:#fff8dc;

    border-radius:15px;

    padding:15px;

    margin-top:15px;

    font-size:18px;
    animation:aparecerLuna 2s ease;

}
.celebracion{
    animation: aparecer 1s ease;
    max-width:700px;

    margin:40px auto;

    padding:30px;

    background:white;

    border-radius:25px;

    text-align:center;

    box-shadow:0 0 20px rgba(0,0,0,.2);
}

 @keyframes aparecer{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.arbol-celebracion{

    width:300px;

    max-width:80%;

    margin:20px auto;

    display:block;

    animation:

        crecer 1.4s ease,

        brillar 2s ease;
}
@keyframes crecer{

0%{

transform:scale(.3);

opacity:0;

}

60%{

transform:scale(1.15);

}

100%{

transform:scale(1);

opacity:1;

}

}
@keyframes brillar{

0%{

filter:brightness(100%);

}

30%{

filter:brightness(240%);

}

100%{

filter:brightness(100%);

}

}
.teclado{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:20px;
}

.tecla{

    width:100px;

    height:100px;

    font-size:40px;

    font-weight:bold;

    border:none;

    border-radius:15px;

    cursor:pointer;

    background:#4CAF50;

    color:white;
}

.tecla:hover{

    transform:scale(1.05);
}
.palabra{

    font-size:60px;

    font-weight:bold;

    text-align:center;

    margin:30px 0;

    letter-spacing:10px;
}
.silabas{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin:30px 0;
}

.silaba-card{

    width:140px;

    height:140px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFD54F;

    border-radius:20px;

    font-size:60px;

    font-weight:bold;

    box-shadow:0 4px 10px rgba(0,0,0,.2);
}

.signo-mas{

    font-size:50px;

    font-weight:bold;
}
.galeria-imagenes{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:nwrap;

    margin-top:20px;
}

.imagen-opcion img{

    width:120px;

    height:120px;

    object-fit:cover;

    background:white;

    border-radius:15px;
}

.imagen-opcion:hover img{

    transform:scale(1.05);
}
.imagen-opcion:hover{

    transform:scale(1.08);
}
.imagenes{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:20px;

}

.imagen-opcion{

    width:180px;

    cursor:pointer;

    text-align:center;

}

.imagen-opcion img{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:15px;

    border:4px solid transparent;

    transition:.3s;

}

.imagen-opcion img:hover{

    transform:scale(1.05);

    border-color:#7ec850;

}

.imagen-opcion p{

    margin-top:10px;

    font-size:22px;

    font-weight:bold;

}
.arbol-celebracion{

    width:300px;
    max-width:80%;

    animation:
        crecer 1.8s ease,
        brillar 2s ease;

}

@keyframes crecer{

    0%{

        transform:scale(.4);

        opacity:0;

    }

    60%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes brillar{

    0%{

        filter:brightness(100%);

    }

    40%{

        filter:brightness(250%);

    }

    100%{

        filter:brightness(100%);

    }

}
.estrellas{

    font-size:40px;

    margin:20px;
    letter-spacing:8px;

    animation:flotar 1.6s infinite alternate;

}
@keyframes flotar{

    from{

transform:translateY(0);

}

to{

transform:translateY(-8px);

}

}
@keyframes aparecerLuna{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}
.celebracion button{

padding:18px 35px;

font-size:20px;

border:none;

border-radius:15px;

cursor:pointer;

background:#58b958;

color:white;

transition:.3s;

animation:mostrarBoton .8s ease;

animation-delay:2.5s;

animation-fill-mode:forwards;

opacity:0;

}
.celebracion button:hover{

transform:scale(1.08);

}
@keyframes mostrarBoton{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}
.panel-docente{

    text-align:center;

    margin:40px auto;

}
.estadisticas{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin:40px;

}
.tarjeta{

    background:white;

    border-radius:20px;

    padding:30px;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:.3s;

}
.tarjeta:hover{

    transform:translateY(-8px);

}
.icono{

    font-size:45px;

}
.acciones{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:20px;

    margin:40px;

}
.formulario-actividad{

    max-width:900px;

    margin:40px auto;

}
.card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}
.card h2{

    margin-top:0;

    color:#2d6a4f;

}
input,
textarea,
select{

    width:100%;

    padding:12px;

    border-radius:10px;

    border:1px solid #ccc;

    font-size:16px;

    box-sizing:border-box;

}
.campo{

    margin-bottom:18px;

}
.boton-guardar{

    background:#4CAF50;

    color:white;

    border:none;

    padding:15px 35px;

    border-radius:12px;

    font-size:18px;

    cursor:pointer;

}