.deck thead th {
    background-color: #5373B8 !important;
    color: white !important; /* Color del texto */
    font-family: Verdana !important;
    font-weight:bold !important;
}

.tabla-deck th,
.tabla-deck td {
    font-size: 11px !important; /* Tamaño de fuente deseado */
}

.reducido-50 td {
    padding: 0.2em !important; /*Ajusta el padding para reducir el tamaño */
}

.reducido-50 th {
    padding: 0.9em !important; /*Ajusta el padding para reducir el tamaño */
}

.reducido-50 button {
    font-size: 0.8em !important; /* También reduce el tamaño de los botones */
}

.btn {
    font-family: Verdana !important;
    font-weight: bold;
}

.deck_font {
    font-family: Verdana !important;
}

.form-label {
    font-family: Verdana !important;
    /*font-weight: bold;*/
}

.encabezado {

    background-color: #5373B8 !important;
    color: white !important; /* Color del texto */
    font-family: Verdana !important;
    font-weight: bold !important;
}
/********************STYLE ENCABEZADO FIJO***************************/
/* Estilo del contenedor de la tabla */
.tabla-container {
    overflow-y: auto; /* Permitir el desplazamiento vertical */
    max-height: 360px; /* Altura máxima de la tabla */
}

/* Estilo del encabezado de la tabla */
/*#tablaCompras thead {
    position: sticky;
    top: 0;
    background-color: #f3f3f3;*/ /* Color de fondo del encabezado */
    /*z-index: 1;*/ /* Asegura que el encabezado esté encima del cuerpo de la tabla */
/*}*/


/***********************************************/

/********************FONDO BLANCO COLUMNA FIJA***************************/

#tablaGastosXRendir tr td:first-child,
#tablaGastosXRendir tr td:nth-child(2) {
    background-color: white !important;
}

/**************************************************************************/

/* Pantalla completa detrás */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.20);
    z-index: 20000;
    display: none;
}

/* Capa full-screen (no la centramos, sólo contiene la caja) */
#loadingSpinner {
    position: fixed;
    inset: 0;
    z-index: 20001;
    display: none; /* mostrar por JS */
    pointer-events: none; /* clics los bloquea .overlay */
    background: transparent;
}

    /* Caja del spinner: esta SÍ va al centro del viewport */
    #loadingSpinner .spinner-box {
        position: fixed; /* relativo al viewport SIEMPRE */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 72px;
        height: 72px;
        border-radius: 12px;
        background: rgba(255,255,255,0.92);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
    }

/* Círculo animado */
.spinner-circle {
    width: 36px;
    height: 36px;
    border: 4px solid transparent;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spinCircle 1s linear infinite;
}

@keyframes spinCircle {
    to {
        transform: rotate(360deg);
    }
}

/* (opcional) bloquear scroll del body mientras carga */
body.loading {
    overflow: hidden;
}




/**************************************************/

/*del {
    
    text-decoration-color: red;*/ /* Color del texto tachado */
/*}


.checkbox-column {
    text-align: center;*/ /* Alinea el contenido al centro */
/*}

.checkbox-column .form-check {
    display: inline-block;*/ /* Cambia el display para permitir el centrado */
/*}*/


/*********************CONFIG MODAL******************/

@media (max-width: 992px) {
    .modal-lg {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .modal-lg {
        max-width: 95%;
    }
}
/*********************CONFIG MODAL******************/



/*.boton-popover {
    border-radius: 60%;
    background-color: red;
    border: none;
    color: white;
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .boton-popover:hover {
        background-color: darkred;
    }

.fa-circle-info {
    font-size: 16px;
    color: white;
}*/

/*********************ANCHO COLUMNA DATATABLE***********************/

.truncar-columna {
    max-width: 100px; /* Ancho máximo de la columna */
    white-space: nowrap; /* Evita que el texto se ajuste automáticamente */
    overflow: hidden; /* Oculta el texto que no cabe en la celda */
    text-overflow: ellipsis; /* Agrega puntos suspensivos (...) al final del texto truncado */
}

/**************Centrar Botón buscar al lado de fechas***************/
.div2 {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/**************************/

.kpi-card {
    background: linear-gradient(180deg,#fff 0%,#fbfbfb 100%);
    border: 1px solid #e9ecef;
    border-radius: 18px;
    box-shadow: 0 6px 14px rgba(33,37,41,.06);
    padding: 14px 14px;
    height: 100%;
    cursor: pointer;
    transition: transform .12s ease,box-shadow .12s ease,border-color .12s ease;
    user-select: none
}

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(33,37,41,.10)
    }

    .kpi-card.active {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13,110,253,.12)
    }

.kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.kpi-title-wrap {
    display: flex;
    align-items: center;
    gap: .55rem
}

.kpi-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0,0,0,.03) inset
}

.kpi-title {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .3px;
    color: #212529
}

.kpi-count {
    padding: .22rem .6rem;
    border-radius: 999px;
    background: #f1f3f5;
    border: 1px solid #e9ecef;
    font-weight: 800;
    font-size: .95rem;
    color: #0f172a;
    min-width: 42px;
    text-align: center
}

.kpi-footer {
    margin-top: .45rem;
    font-size: .78rem;
    color: #6c757d
}

.dot-recibida {
    background: #dc3545
}

.dot-enproceso {
    background: #198754
}

.dot-cerrada {
    background: #0d6efd
}

.dot-reapertura {
    background: #fd7e14
}

.dot-todas {
    background: #adb5bd
}

.table thead th {
    white-space: nowrap
}

.badge-state {
    font-size: .8rem
}

.badge-via {
    font-size: .75rem
}

.dt-topbar {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    align-items: center
}

    .dt-topbar .form-control {
        max-width: 300px
    }

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.4);
    display: none;
    z-index: 1050
}

#loadingSpinner {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 1060
}

.spinner-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid #e9ecef;
    border-top-color: #0d6efd;
    animation: spin .9s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ===== Timeline ===== */
.timeline {
    position: relative;
    padding-left: 28px
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef
    }

.timeline-item {
    position: relative;
    margin-bottom: 16px
}

    .timeline-item::before {
        content: none !important
    }

.timeline-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 3px 8px rgba(33,37,41,.05)
}

.timeline-meta {
    font-size: .78rem;
    color: #6c757d;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

.timeline-obs {
    margin-top: .35rem;
    white-space: pre-wrap
}

.badge-state-sm {
    font-size: .7rem
}

#tblInteracciones th, #tblInteracciones td {
    vertical-align: top
}

#buscadorInteracciones {
    max-width: 360px
}

/* ===== Editor de correo (toolbar + área editable) ===== */
.mail-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .75rem 0 .5rem
}

    .mail-toolbar .btn {
        border: 1px solid #e9ecef;
        background: #fff
    }

.mail-editor {
    min-height: 260px;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 12px;
    background: #fff
}

    .mail-editor:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(13,110,253,.12)
    }

/* ===== RUT sin input-group (guión centrado) ===== */
.rut-wrap {
    display: flex;
    align-items: center; /* <- centra verticalmente el guión e inputs */
    gap: .5rem;
}

    .rut-wrap .rut-num {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rut-wrap .rut-dv {
        width: 56px; /* ancho fijo para el DV */
        text-align: center;
    }

    .rut-wrap .rut-guion {
        display: inline-flex; /* caja flexible para centrar el "-" */
        align-items: center;
        justify-content: center;
        min-width: 14px; /* evita que “salte” */
        font-weight: 700;
        color: #495057;
        line-height: 1; /* evita desajustes por métricas de fuente */
    }
/* (quita cualquier translateY o line-height viejo que tuvieras) */

.form-control[readonly] {
    background-color: #f0f2f5;
}

/* Badge morado (relleno) */
.badge-morado {
    background-color: #6f42c1; /* morado */
    border: 1px solid #6f42c1;
    color: #fff;
}

/* Badge morado (outline) */
.badge-outline-morado {
    background-color: transparent;
    border: 1px solid #6f42c1;
    color: #6f42c1;
}

/* (opcional) Hover sutil para ambos */
/*.badge-morado:hover {
    filter: brightness(0.95);
}

.badge-outline-morado:hover {
    background-color: #6f42c1;
    color: #fff;
}*/

.badge-gris {
    background-color: #6c757d; /* gris */
    border: 1px solid #6c757d;
    color: #fff;
}

/* Badge gris (outline) */
.badge-outline-gris {
    background-color: transparent;
    border: 1px solid #6c757d; /* gris */
    color: #6c757d;
}

.dt-head .dt-toolbar {
    margin-left: 60px !important;
}