@import url('https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --amarillo: #fcb900;
    --azul: #06429c;
    --gris: #575756;
    --gris-oscuro: #161613;
  }

.font{
    font-family: 'Saira Extra Condensed', sans-serif;
}

.separador{
    margin-top: 120px;
}

a{
    text-decoration: none;
}

p{
    font-size: 20px;
}

h1{
    font-size: 28px;
    color: var(--gris);
}

/** ***** FORM ***** **/
.formulario_log{
    padding: 20px;
    border: .5px solid var(--gris);
    border-radius: 10px;
    box-shadow: 1px 0px 5px var(--azul);
}

label{
    font-size: 20px;
}

input{
    font-size: 18px !important;
}

select{
    font-size: 18px !important;
}

.radio{
    margin-left: 10px;
}

.btn{
    font-size: 20px;
    color: #fff;
    background-color: var(--gris);
    border: none;
}

.btn:hover{
    background-color: var(--azul);
}

.hidden{
    display: none;
}

.show{
    display: block;
}

/** ***** AMD  ***** **/

/** index **/
span.size-32 {
    margin-right: 10px;
    font-size: 32px;
    font-variation-settings: 'OPSZ' 32;
  }

  .linkbtn{
    font-size: 20px;
    color: #fff;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    margin: auto auto;
    background-color: var(--gris);

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

  .linkbtn-menu{
    font-size: 20px;
    color: #fff;
    width: 140px;
    height: 50px;
    border-radius: 5px;
    margin: auto auto;
    background-color: var(--gris);

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


  .linkbtn-out{
    font-size: 20px;
    color: #fff;
    width: 120px;
    height: 50px;
    border-radius: 5px;
    margin: auto auto;
    background-color: var(--gris-oscuro);

    &:hover{
        background-color: rgb(153, 10, 10);
    }
  }

  .card-usuarios{
    border: 1px solid var(--gris);
    border-radius: 10px;
    margin: 20px;
    padding: 20px;
    box-shadow: 1px 0px 5px var(--azul);
  }

  .empresa-logo {
    width: 100%;        /* Ajusta al ancho completo del contenedor. */
    max-height: 120px;  /* O la altura que prefieras. */
    min-height: 120px;  /* O la altura que prefieras. */
    object-fit: contain;  /* Esto hará que la imagen cubra el espacio sin deformarse. */
    display: block;     /* Asegura que la imagen se muestre como un bloque. */
}

.mas, .menos{
    color: var(--gris);
}
.mas:hover{ color: var(--azul); }
.menos:hover{ color: var(--amarillo); }



/** ***** zoom  ***** **/

.zindex{
    z-index: 1000 !important;
}

.zoom:hover {
    transform: scale(1.8);
}


/** ***** prioridad  ***** **/

.media{

    color: #db9218; 
    --bs-table-striped-color: #db9218;
}

.alta{

    color: #781f19; 
    --bs-table-striped-color: #781f19;
    
}

mark{

    background-color: greenyellow !important;
    border-radius: 12px;
}


/** ***** OPERACION  ***** **/
.CARGAR{ color: #10B4C1 ; --bs-table-striped-color: #10B4C1;}
.DESCARGAR{ color: #229954; --bs-table-striped-color: #229954;}
.DEVOLUCION{ color: #F1C40F; --bs-table-striped-color: #F1C40F;}

/** ***** TABS ***** **/
/* Cambia el color de texto y el fondo de la pestaña activa */
.nav-link.active {
    color: #fff !important; /* Cambia el color de texto */
    background-color: #007bff !important; /* Cambia el fondo */
    border-color: #007bff !important; /* Cambia el color del borde si es necesario */
}


/** ***** TABS ***** **/
.logoemp img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}