/* Estilos para la barra de desplazamiento */
::-webkit-scrollbar {
    width: 15px; /* Ancho del scrollbar */
}

::-webkit-scrollbar-track {
    background: #f0f0f0; /* Color de fondo del track (opcional) */
}

::-webkit-scrollbar-thumb {
    background: repeating-linear-gradient(
        45deg,
        #204620 0%, #204620 12.5%, 
        #24581A 12.5%, #285523 25%, 
        #204620 25%, #204620 37.5%, 
        #1B5227 37.5%, #144E1D 50%, 
        #204620 50%, #204620 62.5%, 
        #204620 62.5%, #204620 75%, 
        #144E1D 75%, #144E1D 87.5%, 
        #204620 87.5%, #204620 100%
    );
    border-radius: 6px;
    border: 2px solid #f0f0f0;
    transition: 0.3s ease-in-out; /* Suaviza el cambio */
}

::-webkit-scrollbar-thumb:hover {
    background: repeating-linear-gradient(
        45deg,
        #144E1D 0%, #144E1D 12.5%, 
        #204620 12.5%, #204620 25%, 
        #285523 25%, #285523 37.5%, 
        #204620 37.5%, #204620 50%, 
        #1B5227 50%, #1B5227 62.5%, 
        #204620 62.5%, #204620 75%, 
        #285523 75%, #285523 87.5%, 
        #204620 87.5%, #204620 100%
    ); /* Invierte el orden de colores */
}


/* estilos para el header */
:root {
    --PrimaryColor: #560319; /* Borgoña oscuro */
    --HoverColor: hsl(330, 28%, 17%); /* Un tono más oscuro para el hover */
    --WhiteColor: #ffffff; /* Blanco */
    --BlackColor: #000000; /* Negro */
    --TextColor: hsl(0, 0%, 45%); /* Un tono más oscuro para el texto */
    --WhiteColorDim: hsl(0, 0%, 93%); /* Blanco ligeramente atenuado */
    --GreyBg: hsl(0, 0%, 94%); /* Un gris claro para el fondo */
    --GreyText: hsl(0, 0%, 75%); /* Un gris más oscuro para el texto secundario */
    --InputColor: hsl(0, 0%, 97%); /* Un blanco ligeramente azulado para campos de entrada */
}
.headerHome{
    /* margin-top: 200px; */
    height: 15vh;
    
       
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
}

.headerText {
    margin-top: 45px;
    text-align: center; /* Alinea todo el contenido al centro */
}

.text-container {
    margin-bottom: 20px; /* Espacio entre el texto y el botón */
}


.titulo {
    color: var(--WhiteColor);
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    text-align: center;
}
.subtitulo {
    color: var(--WhiteColor);
    font-weight: 300;
    font-size: 13px;
    padding: 1rem 0 ;
    max-width: 70%;
    text-align: center;
    margin: auto;
}

/* Estilos para el botón */
.boton {
    padding: .4rem 1.5rem;
    background: var(--PrimaryColor);
    border: none;
    outline: none;
    border-radius: 3rem;
    cursor: pointer;
    color: var(--WhiteColor) !important; /* Color del texto */
    font-size: 16px; /* Tamaño de fuente */
    font-weight: 500; /* Peso de la fuente */
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color de fondo */
}

/* Estilos de hover para el botón */
.boton:hover {
    background-color: var(--BlackColor); /* Cambia el color de fondo al pasar el cursor sobre el botón */
}

a{
    color: #ffffff;
}
@media screen and (max-width: 925px) {
    .headerHome{
        height: 10vh;
    }
}

.frmImg{
    height: 50px;
    width: 50px;
  }

.navImg {
    height: 50px;
    width: 50px;
    transition: transform 0.3s ease-in-out; /* Agrega una transición suave */
}

.navImg:hover {
    transform: scale(1.3); /* Aumenta un 20% el tamaño al hacer hover */
}


.alineacion_Y_texto{
    width: 40%;
    margin: auto;
    color: aliceblue;
}

.totalVenta{
    background-image: linear-gradient(to top, #64758b, #286099);
    padding: 9px;
    border-radius: 20px;
    border: 0;
    font-size: 15px;
    box-shadow: 2px 2px 4px #000000;
}

.cambio{
    margin-top: 5px;
    width: 40%;
    background-image: linear-gradient(to top, #64758b, #289986);
    padding: 5px;
    border-radius: 20px;
    border: 0;
    font-size: 15px;
    box-shadow: 2px 2px 4px #000000;
    color: bold;
}

.no-border-input {
    border: none;
    border-radius: 8px; /* Ligero borde redondeado */
    padding: 4px;
    
    box-sizing: border-box;
    background-color: #f0f0f0;
}

.margenArriba{
    margin-top: 5px;
}

.margenLados{
    margin-left: 5px;
    margin-right: 5px;
}

/* Opcional: Cambia el fondo de las filas cuando el usuario pasa el ratón */
table.dataTable tbody tr:hover {
    background-color: #c5c3c3;
}

#search_results .active {
    background-color: #007bff;
    color: white;
}

.buscador{
    display: grid 1fr;
    margin: auto;
    width: 100%;
    max-width: 350px;
    background: rgb(255, 255, 255, 0.2);
    padding: 10px 10px 10px;
    text-align: center;
    border-radius:12px ;
    backdrop-filter: blur(5px);
}