/*---------------------------------------- index.php -------------------------------------------------------- */

/* Barra de navegación superior con el texto de 'Sistemas Mundo Dulce' */
.navbar-brand {
    font-size: 24px;                                            /* Tamaño de fuente */
    font-weight: bold;                                          /* Peso de la fuente */
    font-family: Arial, sans-serif;                             /* Fuente */
    /*background: linear-gradient(to right, red, orange); */    /* Gradiente de color */
    /*-webkit-background-clip: text;  */                        /* Clip de fondo para aplicar el gradiente al texto */
    /*-webkit-text-fill-color: transparent;   */                /* Relleno de color transparente para el texto */
}


/*------------------------------------index_result.php ------------------------------------------------------- */
/* Tabla que contiene la tabla de facturas */
.table-responsive {
    width: 100%;                /* Hacer que la tabla ocupe todo el ancho disponible */
/*    background-color: black;*/    /* Para saber donde esta este DIV */
}


/*--------------------------------------------------------------------------------- */
/* Tabla de facturas (DataTable)

/* Tabla de facturas (DataTable) */
#tblInvoices {
/*    background-color: white;*/
    overflow-x: auto;       /* Agregar scrool horizontal si es necesario */
    /*display: block;*/    /* El elemento 'tblInvoices' se mostrará como un bloque, por lo cual ocupará todo el ancho disponible y comenzará en una nueva línea.
                        Esto quita del desplazamiento lateral los demás elementos que vienen con la tabla (búsqueda, total de registros, etc.) dejandolos fijo.
                        Esta opción hacía que la tabla ocupara la mitad del DIV con el espacio restante blanco */
/*  text-align: left;         /* Alineación del texto de todas las celdas de la tabla */        
  border-collapse: collapse;
}

/* Cabecera de la tabla de facturas. Colores celestes */
#tblInvoices thead
{
    background-color: #dee7ee;
    border-bottom: solid 4px #7CAACE;  
}

#tblInvoices thead th 
{
/*    padding: 8px 5px;*/
/*    font-size: 10px;    /* Tamaño de las fuentes de las CABECERAS */*/
}

#tblInvoices th {
    text-align: center;
}

#tblInvoices tbody td 
{
/*    padding: 8px 5px;*/
/*    font-size: 12px;    /* Tamaño de las fuentes de los VALORES de la tabla */*/
}

.row_order:not(.odd) {
    background-color: #C5E1A5;
/*    color: black;*/
}

.row_order:not(.even) {
    background-color: #C5E1A5 !important;    /* !important se asegura que el estilo se aplique con más prioridad que el estilo por defecto de la tabla */
/*    color: black;*/
}

.row_invoice:not(.odd) {
    background-color: white;
/*    color: black;*/
}

.row_invoice:not(.even) {
    background-color: white !important;
}

/* Estilo de celda (<td>) de una fila (<tr>) cuando el cursor está sobre la fila */
tr:hover td {
    background-color: #93CDFA;  /* Cambia el color de FONDO de la celda marcada a un tono azul claro */
    color: white;               /* Cambia el color de TEXTO de la celda marcada a blanco para un contraste adecuado con el color de fondo más oscuro */
}

/* Selección de un checkbox */
#tblInvoices input[type="checkbox"]:checked {
    transform: scale(1.8);      /* Aumenta el tamaño del checkbox cuando esta seleccionado */
}

/* Estilos para los checkbox de la tabla */   
#tblInvoices input[type="checkbox"] {
    transform: scale(1.5);      /* Aumenta el tamaño del checkbox */
    margin-left: auto;          /* Centra el checkbox */
    margin-right: auto;
    display: block;
}


/*--------------------------------------------------------------------------------- */
/* Campo Total. Estilos */
.div-amount {
    font-size: 20px;                    /* Tamaño del texto */
    font-weight: bold;                  /* Texto en negrita */
    color: #000;                        /* Color del texto negro - 27ae60 (verde) */
/*    position: relative; */            /* Posición absoluta dentro del contenedor */
/*    top: -30px;*/
/*    left: 55%;*/
}

/*--------------------------------------------------------------------------------- */
/* Botón PAGAR. Estilos */
.btn-pagar {
    font-size: 25px;                    /* Tamaño del texto */
    padding: 15px 30px;                 /* Espaciado interno del botón. Padding para hacer el botón más grande */
    background-color: #3498db;          /* Color de fondo azul */
    color: #ffffff;                     /* Color del texto blanco */
    border: none;                       /* Sin borde */
    border-radius: 10px;                /* Bordes redondeados */
    margin-bottom: 30px;                /* Espacio adicional debajo del botón */
    cursor: pointer;                    /* Cambiar el cursor al pasar sobre el botón */
    transition: background-color 0.3s;  /* Transición suave del color de fondo */
/*    position: relative;        */     /* Posición absoluta dentro del contenedor */
/*    transform: translateX(-50%);*/
}

/* Botón de pago, al pasar el cursor sobre él */
.btn-pagar:hover 
{
    background-color: #2980b9;          /* Cambia el color de fondo */
}

/* Botón de pago. Desactivado */
.btn-pagar-disabled 
{
    background-color: #bdc3c7;          /* Color de fondo gris */
    cursor: not-allowed;                /* Cambiar el cursor a no permitido */
/*  pointer-events: none;               /* Opcional: puedes quitar la interacción con el botón */
}

/* Botón de pago desactivado, al pasar el cursor sobre él */
.btn-pagar-disabled:hover 
{
    background-color: #bdc3c7;          /* Para no cambiar el color gris de fondo cuando el botón esta desactivado */
}

/*--------------------------------------------------------------------------------- */
/* max-width especifica la condición bajo la cual se aplicarán las reglas de estilo. En este caso se aplicarán solo cuando el ancho de la ventana del navegador (o dispositivo) sea igual o menor a 768 píxeles, 
lo que generalmente se considera el límite entre dispositivos de pantalla grande (como computadores de escritorio y tabletas en orientación horizontal) 
y dispositivos de pantalla pequeña (como teléfonos inteligentes y tabletas en orientación vertical).

/* Cuando el ancho de la pantalla es de 768px o menos (punto de ruptura común para celulares) ... */
/* ... Cambia el tamaño de la fuente para todo el cuerpo del documento */
@media only screen and (max-width: 768px) {
/*    body {
        font-size: 14px;
    }*/

    .hidden-xs {
        display: none;      /* Oculta las columnas que tengan esta clase en pantallas pequeñas */
    }

    #tblInvoices {
        font-size: 14px;      /* Tamño de fuente más pequeño, en font-size: 12px en mi celular sobrepasa un poco la pantalla.
        También se puede achicar el checkbox */
    }
}

.dataTables_wrapper .dataTables_filter input {
    width: auto; 
    display: inline-block;
    margin-right: 120px; 
}

/* only screen especifica que las reglas de estilo solo se aplicarán a dispositivos con pantalla. Esto excluye a los dispositivos como impresoras, etc. */
/* Esas instrucciones son las que estaban con la tabla original de Michael */
/*@media only screen and (max-width: 768px)
{
    #tblInvoices,
    #tblInvoices thead,
    #tblInvoices tbody,
    #tblInvoices tr,
    #tblInvoices th,
    #tblInvoices td,
    #tblInvoices caption {
        display: block;
    }

    #tblInvoices {
        border: none;
    }

    #tblInvoices thead tr {
        display: none;
    }

    #tblInvoices tbody tr 
    {
        margin: 1em 0;
        border: 1px solid #2ba6cb;
    }

    #tblInvoices td 
    {
        border: none;
        border-bottom: 1px solid #dddddd;
        position: relative;
        padding-left: 45%;
        text-align: left;
    }

    #tblInvoices tr td:last-child {
        border-bottom: 1px double #dddddd;  
    }

    #tblInvoices tr:last-child td:last-child {
        border: none;
    }
    
    #tblInvoices td:before 
    {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}*/