img {
    width: 100%;
}

ol,
ul {
    padding-left: 0rem !important;
}

ul,
ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-left: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    min-height: 100vh;
}

a {
    text-decoration: none;
}

header,
footer {
    background: -webkit-linear-gradient(rgba(38, 36, 74, 1) 0%, rgba(33, 33, 119, 1) 57%);
    background: -o-linear-gradient(rgba(38, 36, 74, 1) 0%, rgba(33, 33, 119, 1) 57%);
    background: linear-gradient(rgba(38, 36, 74, 1) 0%, rgba(33, 33, 119, 1) 57%);
}

main {
    min-height: 86vh;
}

.login {
    background-image: url('../img/background_login.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    width: 100%;
    object-fit: cover;
    min-height: 100vh;
}

/*BOTONERAS CON ICONOS*/
.icon-nav {
    font-size: 2em;
}

/*BOTONERAS CON ICONOS*/


@keyframes ampliar {
    0% {
        transform: scale(100%);
    }

    50% {
        transform: scale(110%);
    }

    100% {
        transform: scale(100%);
    }
}

/* AJUSTE DE DATATABLES - INPUT BUSCAR*/
/* Estilo para que el input ocupe todo el ancho de la tabla */
.dataTables_wrapper .dataTables_filter, .dt-search {
    display: none;
    /* Oculta el filtro original */
}


*/

/*INPUTS READONLY EN TODO MOMENTO*/
input[readonly] {
    background-color: #e9ecef !important;
    /* Color de fondo típico de readonly */
    cursor: not-allowed;
    /* Cambiar el cursor para indicar que no es editable */
}

input[readonly]:focus,
input[readonly]:hover {
    background-color: #e9ecef !important;
    /* Mantener el color de readonly en focus y hover */
    border-color: #ced4da;
    /* Opcional: mantener el borde original */
    box-shadow: none;
    /* Evitar el sombreado típico de focus */
}

/*POPOVERS PERSONALIZAS OGALLO THEME*/
.ogallo-popover {
    color: rgb(38, 36, 74) !important;
    /* Cambia el color del texto si lo necesitas */
    border: none;
    /* Remueve cualquier borde si es necesario */
}

.ogallo-popover .popover-header {
    background: -webkit-linear-gradient(rgba(38, 36, 74, 1) 0%, rgba(33, 33, 119, 1) 57%);
    background: -o-linear-gradient(rgba(38, 36, 74, 1) 0%, rgba(33, 33, 119, 1) 57%);
    background: linear-gradient(rgba(38, 36, 74, 1) 0%, rgba(33, 33, 119, 1) 57%);
    color: white !important;
}

.ogallo-popover .popover-body {
    background-color: #e9ecef !important;
}

/*ajuste de altura del editor ckeditor, y summernote*/
.ck-editor__editable,
.note-editing-area,
.ql-editor {
    min-height: 300px;
}
/*ajuste de altura del editor*/


.dt-info, .dt-paging {
    justify-content: flex-end !important;
    display: flex !important;
    z-index: 1 !important;
}

/*para las tablas de color por cia*/
.bg-san-cristobal {
    background: linear-gradient(145deg, #77a0da, #3a71c2) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    border-radius: 0.375rem !important;
}
.bg-cooperacion {
    background: linear-gradient(145deg, #609c79, #31ad63) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    border-radius: 0.375rem !important;
}
.bg-general {
    background: linear-gradient(145deg, #c0c0c0, #757776) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    border-radius: 0.375rem !important;
}
/*para las tablas de color por cia*/


.datatable-mobile-hint {
    background-color: #477fd4;
    /* amarillo claro */
    color: #ffffff;
    /* marrón fuerte (contraste) */
    padding: 0.75rem 1rem;
    border: 1px solid #ffeeba;
    border-radius: 0.375rem;
    font-size: 15px;
    margin-bottom: 10px;
}

/*para el color de texto datatables clientes*/
.text-white-force {
    color: #fff !important;
}

/* Estilo de encabezado de la tabla similar al popover */
table.dataTable thead th {
    background: linear-gradient(rgba(38, 36, 74, 1) 0%, rgba(33, 33, 119, 1) 57%) !important;
    color: white !important;
    font-weight: bold;
    text-transform: capitalize;
    border: none !important;
    padding: 12px 10px;
    font-size: 14px;
    
}
table.dataTable thead{
    margin-top: 5px !important;
}
table.dataTable tbody td {
    background-color: white;
    font-size: 14px;
    padding: 10px;
    vertical-align: middle;
}
table.dataTable {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    border: none !important;
}
/* Buscador */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 12px;
    background-color: #fff;
    transition: border-color 0.3s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #28478B;
    outline: none;
}

/* Select de registros */
.dataTables_wrapper .dataTables_length select {
    border-radius: 6px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    background-color: #fff;
}

/* Info texto */
.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: #444;
}

/* Paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    background-color: #e0e0e0;
    margin: 0 4px;
    padding: 6px 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #ccc;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #28478B;
    color: white !important;
    border-color: #1e356b;
}
table.dataTable thead th:first-child {
    border-top-left-radius: 8px;
}
table.dataTable thead th:last-child {
    border-top-right-radius: 8px;
}

.dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}
table, .dataTables_wrapper, .dataTables_scrollBody {
    overflow: visible !important;
}


@media (max-width: 767px) {
    /* Cartel opcional visible solo en celulares */
    .datatable-mobile-hint {
        display: block;
        text-align: center;
        font-size: 14px;
        color: #dddddd;
        margin-bottom: 10px;
    }

    table.dataTable tbody tr:not(.child) td:nth-child(1):not(.dt-empty)::after {
        content: "🔍 Ver más";
        font-weight: bold;
        text-decoration: underline;
        display: block;
        color: #0d4ba7;
        font-size: 15px;
        margin-top: 4px;
        text-align: left;
        opacity: 0.8;
    }
}

@media (min-width: 768px) {
    .dt-buttons {
        margin-bottom: 5px !important;
    }
}