*{
    box-sizing: border-box;
}

body{
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(234, 236, 236);
}

.card{
    background-color: rgb(156, 209, 240);
    padding: 10px;
}

select{
    border: none;
    border-radius: 5px;
    max-height: 40px;
    padding: 5px;
    margin: 5px;
}

.nota1{
    border: none;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

h1{ 
    text-align: center;
    padding: 10px;
    margin: auto;
}

.btn{
    font-size: 1em;
    background-color: rgb(236, 235, 185);
    border: none;
    border-radius: 5px;
    padding: 5px;
}

.btn:hover{
    background-color: rgb(190, 162, 130);
}

.mt-2{
    text-align: center;
    background-color: rgb(208, 226, 236);
    margin: 0px;
    padding: 10px;
}

.tabla--cards{
    width: 100%;
    padding: 5px;
}

.tabla--cards thead{
    background-color: rgb(146, 230, 230);
}

.tabla--cards tr{
    width: 100%;
    padding: 5px;
    text-align: center;
}

.tabla--cards td{
    padding: 5px;
}

.cols-2 label{
    padding: 5px;
    margin: 5px;
    border: none;
}

.archivo{
    font-size: 1em;
    border: none;
    border-radius: 7px;
    border-bottom: none;
}

.login1{
    background-color: rgb(156, 209, 240);
    padding: 100px;
}

.login1>form>div{
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.login1 .btn{
    padding: 10px;
    margin: 10px;
}

.login1 p{
    text-align: center;
}

.login1 p a{
    text-decoration: none;
}

.recuperar1{
    padding: 100px;
    background-color: rgb(156, 209, 240);
    text-align: center;
}

.recuperar1 a{
    text-decoration: none;
}

tr:hover {
    background-color: #b9d6ec;
    transition: background-color 0.3s ease;
}