.hoverImageWrapper {
    display: inline-block;
    transition: background 0.5s ease-in-out;
    border-radius: 10px;
    overflow: hidden;
}
/*.hoverImageWrapper:hover {
    background: #00000096 !important;
}*/

.hoverImageWrapper .hoverImage {
    position: relative;
    align-self: stretch;
    /* height: 10em;
    width: 16em; */
    flex-shrink: 0;
    /* object-fit: cover; */
    max-width: 100%;
    transition: transform 0.5s ease-in-out;
}
.hoverImageWrapper:hover .hoverImage {
    transform: scale(1.1);
    opacity: 0.3;
}
.hoverImageWrapper .icon-file {
    transition: transform 0.5s ease-in-out;
}

.hoverImageWrapper:hover .icon-file {
    transform: scale(1.1);
    opacity: 0.9;
}

.bg-main {
    background-color: #f5f5f5;
    background-image: url("/img/bg_main.png");
    /* Prevent the image from repeating */
    background-repeat: no-repeat;
    /* Scale the image to cover the entire background area */
    background-size: cover;
    /* Center the image */
    background-position: bottom;
    /* Keep the background fixed during scroll (optional parallax effect) */
    background-attachment: fixed;
}

.pointer {
    cursor: pointer;
}

/**
 * CSS DATA TABLES
 */
.dataTables_length select {
    width: 100px !important;
    display: inline-block !important;
}

/* Alinea el buscador para que no tenga margen inferior innecesario */
.dataTables_filter label {
    display: flex;
}

.dataTables_filter input {
    margin-left: 10px;
    /*min-width: 200px;*/
    /*width: 200px;*/
}

.dataTables_empty {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: bold; /* Opcional: para resaltar el aviso */
    color: #6c757d;    /* Opcional: color gris suave de Bootstrap */
    padding: 20px !important;
}

.content-filter .btn-search { height: 30px;}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 0.3 !important;
    content: "" !important; /* Si usas la librería estándar */
    margin-right: 20px;
}

/* 3. Icono cuando la columna se puede ordenar (Estado neutro) */
table.dataTable thead th.sorting:before {
    content: "\f0dc" !important; /* Icono de flechas arriba/abajo */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* 4. Icono cuando está en orden ASCENDENTE (Arriba) */
table.dataTable thead th.sorting_asc:before {
    content: "\f0de" !important; /* Flecha hacia arriba */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: black; /* Color azul para resaltar */
}

/* 5. Icono cuando está en orden DESCENDENTE (Abajo) */
table.dataTable thead th.sorting_desc:before {
    content: "\f0dd" !important; /* Flecha hacia abajo */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: black;
}
/**
 * END CSS DATATABLES
 */

.bold {
    font-weight: bold;
}
.lbl_campo {
    color: #0153c3;
    font-size: 1.1rem;
}

.text_base {
    color: #0153c3;
}

.alert-info_
{
    background-color: #ABD3FFA6 !important;
    color: #0153c3;
}

.table .thead-light th {
    background-color: #a8ccf5 !important;
    color: var(--primary) !important;
}

.select2-container .select2-selection--single {
    height: auto !important;
}


caption {
    caption-side: top !important;
}


.input-group-text {
    background-color: #cfdff0bf;
    border: 1px solid #3a7ec3;
    border-radius: 0.25rem;
    color: #195b9e;
    font-weight: bold;
}

.form-control,
.custom-select
{
    border: 1px solid #3a7ec3;
}

.bounce {
    animation: bounce 1.5s ease infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-0.4em);}
    60% {transform: translateY(-0.2em);}
}


#toast-container>div
{
    opacity: 1 !important;
}

.fieldset,
.fieldset legend
{
    border-radius: 15px;
    border: 1px solid #58a5d8b0;
}