/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

table.dataTable td {
    font-size: 0.95em;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 100%;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}


/*.navbar-nav .nav-link {
    color: white; /* Color del texto } */ 

    .navbar-nav .nav-link:hover {
        color: #cccccc; /* Color al pasar el mouse */
    }

.navbar-nav .nav-item.bg-dark {
    background-color: #343a40; /* Fondo oscuro */
}


/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.radio-button-bootstrap label {
    padding-left: 10px; /* Ajusta el espaciado horizontal entre el texto y la etiqueta de radio */
}

.colpivot {
    /* Define tus estilos CSS aquí */
    font-weight: bold;
    /*font-size: medium;*/
    /*color: red;*/
    text-align: left;
    /* Otros estilos según sea necesario */
}

.colnumero {
    /* Define tus estilos CSS aquí */
    /*color: blue;*/
    text-align: right;
    /* Otros estilos según sea necesario */
}

.colnumerototal {
    /* Define tus estilos CSS aquí */
    /*color: blue;*/
    text-align: right;
    font-weight: bold;
    /* Otros estilos según sea necesario */
}

.btnAndroid {
    min-width: 150px;
    /*font-size: 16px !important;*/
}

.uncheck {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-app" viewBox="0 0 16 16"> <path d="M11 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4z"/> </svg>') !important;
    padding: 10px 20px;
    padding-left: 30px !important;
    border: none;
    border-radius: 5px;
    color: white; /* Color del texto del botón */
    cursor: pointer;
    text-align: left !important;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 20px; /* Tamaño del SVG */
    background-position-x: 5px;
}

.check {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-check2-square" viewBox="0 0 16 16"><path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5z"/><path d="m8.354 10.354 7-7a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0"/></svg>') !important;
    padding: 10px 20px;
    padding-left: 30px !important;
    border: none;
    border-radius: 5px;
    color: white; /* Color del texto del botón */
    cursor: pointer;
    text-align: left !important;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 20px; /* Tamaño del SVG */
    background-position-x: 5px;
}

.sb-nav-fixed {
    padding-top: 10px;
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Estilo para ocultar el control en dispositivos móviles */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
}

/* Estilo para ocultar el control en Computadoras */
@media (min-width: 768px) {
    .desktop-hidden {
        display: none;
    }
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

/* Estilo general de la tabla */
table.dataTable {
    border-collapse: collapse !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    /* Encabezados modernos */
    table.dataTable thead th {
        background-color: #f8f9fa;
        color: #333;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85em;
        border-bottom: 2px solid #dee2e6 !important;
        padding: 12px 10px !important;
    }

    /* Filas con mejor espaciado */
    table.dataTable tbody td {
        padding: 10px !important;
        vertical-align: middle;
    }

/* Personalizar buscador y selector de registros */
.dataTables_filter input {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px 10px;
    margin-left: 10px;
}

.dataTables_length select {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px;
}

/* Estilo para los botones de paginación (si no usas la integración de Bootstrap) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    color: #0d6efd !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #0d6efd !important;
        color: white !important;
        border: 1px solid #0d6efd !important;
    }

/* Contenedor de la paginación */
.dataTables_paginate {
    margin-top: 15px !important;
    text-align: right !important;
    display: block !important;
}

/* Estilo para cada botón */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: #0d6efd !important; /* Color azul Bootstrap */
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px;
}

    /* Botón de la página actual (Azul con texto blanco) */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        color: white !important;
        background-color: #0d6efd !important;
        border: 1px solid #0d6efd !important;
    }

    /* Efecto al pasar el mouse (Hover) */
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        color: #0a58ca !important;
        background-color: #e9ecef !important;
        border: 1px solid #dee2e6 !important;
    }

    /* Botones deshabilitados (Anterior/Siguiente cuando no hay más páginas) */
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
        color: #6c757d !important;
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        cursor: default;
    }