:root{
    --color-principal: rgb(85, 190, 83);
    --color-secundario: rgb(64, 156, 62);
    --color-terciario: rgb(50, 123, 49);
}


.padding-superior{
    padding-top: 5rem;
}

.navbar-propia{
    background-color: var(--color-principal);
    color: white !important;
}

.navbar-botones{
    background-color: var(--color-terciario);
    color: white;
}

.boton-modelo{
    background-color: var(--color-secundario);

    &:hover{
        background-color: var(--color-terciario);
    }
}

.botones-modelos{
    background-color: var(--color-principal);

    &:hover{
        background-color: var(--color-secundario);
    }
}

.iconos-inicio{
    font-size:25px; 
    color: var(--color-principal);
}

.espacio-archivos{
    background: rgb(218, 218, 222);
    height: 150px;
    padding: 20px 10px;

    /* & input[type='file']{
        display: none;
    } */

    & label{
        font-size: x-large;
        cursor: pointer;
    }
}

.color-claro{
    background: rgb(232, 234, 239);
}

.color-formulario{
    background: rgb(218, 218, 222);
}

.color-alerta{
    background: rgb(241, 201, 201);
}

.formulario-check div input[type='checkbox'] + label, .formulario-check div input[type='checkbox']{
    display: none;
}

.formulario-check div input[type='file']{
    margin-top: 0.5rem;
}

.acciones-recientes{
    width: 25vw;
    max-height: 500px;
    border-radius: 15px 0px 0px 15px;
    border-style: none;
    overflow-y: auto;
}

.nav-sidebar {
    transition: transform 0.4s;
}
.nav-sidebar.collapsed {
    transform: translateX(-50%) scale(0);
}

.animacion_contenido{
    transition: transform 0.5s;
}

#ventana-dialogo[open] {
    max-width: 350px;
}

#ventana-dialogo::backdrop {
    background-color: rgba(119, 136, 153, 0.3) !important;
}

.mensaje {
    width: auto;
    padding: 5px;
    display: flex;
    justify-content: center;
    font-weight: bolder;
    border-radius: 15px;
}

.mensaje-v {
    padding: 5px;
    display: flex;
    justify-content: center;
    font-weight: bolder;
    border-radius: 15px;
}

.tipo-info {
    background: lightslategray;
}

.tipo-success {
    background: lightgreen;
}

.tipo-warning {
    background: rgb(255, 253, 168);
}

.tipo-error {
    background: lightcoral;
}

.celdas-centradas td, .celdas-centradas th{
    vertical-align: middle;
}

@media (max-width: 768px){
    .acciones-recientes{
        width: auto;
    }
}