body {
    font-family: system-ui;
    font-size: unset;
}
/*Comportamiento Icono App NavBar       */
a.navbar-nomina-icon {
    color: var(--bs-teal);
}
a.navbar-nomina-icon:hover {
    color: var(--pantone-bg-main);
}
/*  Comportamiento Icono Toggler NavBar */
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

.CardHeader {
    background-color: rgb(0 139 111);
    color: white;
    background: linear-gradient(290deg, rgb(28, 155, 121) 0%, rgb(0, 139, 111) 60%, rgb(13, 167, 136) 100%);
}
.CardHeaderClear {
    background-color: #6ed3bf87;
    color: rgb(0 139 111);
}

/* Columna Filtro en DataTables: Inicio  */
.group_search {
    display: flex;
    /*line-height: 28px;*/
    align-items: center;
    position: relative;
    min-width: 7rem;
}

.input_search {
    width: 100%;
    height: 1.8rem;
    padding: 0 0.5rem;
    border: 1px solid rgb(0 139 111);
    border-radius: 0.7rem;
    outline: none;
    color: white;
    transition: 0.3s ease;
}

.input_search::placeholder {
    color: rgb(0 139 111);
}

input_search:hover {
    outline: none;
    border-color: rgba(0, 48, 73, 0.4);
    box-shadow: 0 0 0 4px rgb(0 48 73 / 10%);
    border: 1px solid dodgerblue;
    background-color: #007bff54;
}

.DTFilterHeader {
    background-color: rgb(0 139 111);
    color: rgb(110 211 191);
}

.DTFilterHeader-info {
    background-color: dodgerblue;
    color: rgb(110 211 191);
}

.filtro-activo {
    background-color: rgb(0 139 111);
    color: white;
    font-style: italic;
    font-weight: 500;
}

input.filtro-activo::placeholder {
    color: white;
}

/* Formularios RH: Empresa, Departamentos, Negocios, Puestos, Divisiones y Labores */
.company-form-card {
    border: 1px solid rgba(0, 139, 111, 0.18);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 56, 50, 0.08);
}

.company-form-card__header {
    border-bottom: 0;
    padding: 0.9rem 1rem;
}

.company-form-card__header .row {
    align-items: center;
    row-gap: 0.6rem;
}

.company-form-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding-left: 0.75rem;
    border-left: 0.35rem solid rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.company-form-card__header .btn {
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.company-form-card__body {
    background: linear-gradient(180deg, #fbfefd 0%, #f6fbfa 100%);
    padding: 1rem;
}

.company-form-context-card {
    border: 1px solid rgba(0, 139, 111, 0.2) !important;
    border-left: 5px solid var(--pantone-bg-main) !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
}

.company-form-section {
    background: #fff;
    color: #263f3a;
}

.company-form-section dl {
    margin-bottom: 0;
}

.company-form-section dt {
    color: #49615c;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.company-form-section dd {
    color: #1f3934;
    font-weight: 500;
}

.company-form-card .form-floating > .form-control,
.company-form-card .form-floating > .form-select {
    border-color: #d6e5e1;
    border-radius: 8px;
    color: #213c36;
    box-shadow: none;
}

.company-form-card .form-floating > .form-control:focus,
.company-form-card .form-floating > .form-select:focus {
    border-color: var(--pantone-bg-main);
    box-shadow: 0 0 0 0.2rem rgba(0, 139, 111, 0.14);
}

.company-form-card .form-floating > label {
    color: #607872;
}

.company-form-card .form-check-input:checked {
    background-color: var(--pantone-bg-main);
    border-color: var(--pantone-bg-main);
}

.company-form-card .accordion {
    display: grid;
    gap: 0.85rem;
}

.company-form-card .accordion-item {
    border: 1px solid rgba(0, 139, 111, 0.18);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.company-form-card .accordion-button {
    color: #1f3934;
    background: #fff;
    font-weight: 700;
    box-shadow: none;
}

.company-form-card .accordion-button:not(.collapsed) {
    color: #fff;
    background: linear-gradient(290deg, rgb(28, 155, 121) 0%, rgb(0, 139, 111) 60%, rgb(13, 167, 136) 100%);
}

.company-form-card .accordion-body {
    padding: 1rem;
}

.company-form-card .badge.bg-danger {
    border-radius: 6px;
    font-weight: 600;
    white-space: normal;
    text-align: left;
}

@media (max-width: 576px) {
    .company-form-card__body {
        padding: 0.75rem;
    }

    .company-form-title {
        font-size: 0.95rem;
    }
}
/* Columna Filtro en DataTables: Fin  */


/*  Estilos boton acorde a Datatables: Ini   */
.text-datatable {
    color: rgb(0 139 111);
}

.btn-datatable {
    color: white;
    background-color: rgb(0 139 111);
    border-color: rgb(0 139 111);
}

.btn-datatable:hover {
    color: white;
    background-color: #005a48;
    border-color: #005a48;
}

.btn-outline-datatable {
    color: rgb(0 139 111);
    border-color: rgb(0 139 111);
}

.btn-outline-datatable:hover {
    color: white;
    background-color: rgb(0 139 111);
    border-color: rgb(0 139 111);
}

/* Estado activo para grupos de toggle (Tabla|Tarjetas|Calendario) */
.btn-outline-datatable.active,
.btn-check:checked + .btn-outline-datatable {
    color: white;
    background-color: rgb(0 139 111);
    border-color: rgb(0 139 111);
}
/*  Estilos boton acorde a Datatables: Fin   */


/*  badges Perfiles Web/Movil/Windows*/
.bg-movil {
    background-color: #47f7a5;
    font-weight: 500;
    color: #009416;
}
.bg-movil:hover {
    background-color: #009416;
    color: white;
}

.bg-windows {
    background-color: #b88aff;
    font-weight: 500;
    color: #5a00e6;
}
.bg-windows:hover {
    background-color: #5a00e6;
    color: white;
}

.bg-web {
    background-color: #419dff;
    font-weight: 500;
    color: #07008a;
}
.bg-web:hover {
    background-color: #07008a;
    color: white;
}

.badge-user {
    background-color: #ffc107c9;
    border-style: solid;
    border-width: 1px;
    border-color: coral;
    font-weight: 500;
    color: white;
    cursor: none;
    font-style: italic;
}

.badge-not-user {
    background-color: #9b9b9b8c;
    border-style: solid;
    border-width: 1px;
    border-color: darkgray;
    font-weight: 500;
    color: white;
    cursor: none;
    font-style: italic;
}

.badge-user:hover {
    background-color: #28a745;
    border-color: forestgreen;
    color: white !important;
    cursor: default;
}

.badge-not-user:hover {
    background-color: #ff5555b3;
    border-color: black;
    color: black !important;
    cursor: default;
}



/*  Extension/clonado badges de bootsrap: Inicio */
.badge-warning-medium {
    background-color: #ffeb3b;
    border-style: solid;
    border-width: 1px;
    border-color: saddlebrown;
    font-weight: 500;
}

.badge-danger-medium {
    background-color: #673ab7;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    color: white;
    font-weight: 500;
}

.badge-warning-medium-2 {
    background-color: #f78e0f;
    border-style: solid;
    border-width: 1px;
    border-color: saddlebrown;
    color: white;
    font-weight: 500;
}

.badge-danger-medium-2 {
    background-color: #ff4444;
    border-style: solid;
    border-width: 1px;
    border-color: saddlebrown;
    color: white;
    font-weight: 500;
}

.badge-info-medium {
    background-color: lightblue;
    border-style: solid;
    border-width: 1px;
    border-color: dodgerblue;
    color: #1a5c9d;
    font-weight: 500;
}

.badge-success-medium {
    background-color: lightgreen;
    font-weight: 500;
}

.badge-success-ligth {
    background-color: rgb(110 211 191);
    font-weight: 500;
}

.badge-primary-medium {
    background-color: dodgerblue;
    border-style: solid;
    border-width: 1px;
    border-color: blue;
    color: white;
    font-weight: 500;
}

.badge-dark-medium {
    background-color: cadetblue;
    font-weight: 500;
}

.badge-secondary-medium {
    background-color: lightgray;
    font-weight: 500;
}

.badge-dtfilter {
    background-color: rgb(110 211 191);
    color: rgb(0 139 111);
    border: dotted 2px rgb(0 139 111);
    font-weight: 500;
}
/*  Extension/clonado badges de bootsrap: Fin */


/** Personalizacion de Switches bootstrap: Ini  */
.form-check-input:checked {
    background-color: rgb(0, 139, 111) !important;
    border-color: rgb(0, 139, 111) !important;
}
/** Personalizacion de Switches bootstrap: Fin  */


/*  Simulacion Componentes Select Deshabilitados con atributo ReadOnly  */
.select-disabled {
    pointer-events: none !important;
    background-color: #e9ecef !important;
    color: #6c757d !important;
    opacity: 0.65;
    cursor: not-allowed !important;
}



.loading-spinner {
    display: none;
    text-align: center;
    padding: 15px;
    color: var(--pantone-bg-main);
}

.text-datatable {
    /*--bs-text-opacity: 1;*/
    color: var(--pantone-bg-main);
}

.alert-datatable {
    color: var(--pantone-bg-main);
    background-color: var(--pantone-bg-secondary);
    border-color: var(--pantone-bg-main);
}

.alert-custom-success {
    color: white;
    background-color: #33d503c4;
    border-color: var(--pantone-bg-main);
}
.alert-custom-primary {
    color: white;
    background-color: #0dcaf0;
    border-color: var(--pantone-bg-main);
}
.bg-datatable {
    color: white;
    background-color: var(--pantone-bg-main);
}



/* Estilos para ordenacion asc|desc de tablas sin librería */
.th.sortable {
    cursor: pointer;
}

/* ================================================
   PERIODOS DE NOMINA - Estilos
   ================================================ */

/* -- Badges de estado -- */
.periodo-badge-pasado {
    background-color: #8e9aab;
    color: white;
    font-weight: 500;
    font-size: 0.7rem;
}
.periodo-badge-vigente {
    background-color: rgb(0, 139, 111);
    color: white;
    font-weight: 500;
    font-size: 0.7rem;
}
.periodo-badge-futuro {
    background-color: #17a2b8;
    color: white;
    font-weight: 500;
    font-size: 0.7rem;
}

/* -- Cards de periodos -- */
.periodo-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 6px;
}
.periodo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.periodo-card-pasado {
    border-left: 3px solid #8e9aab !important;
    background-color: #f8f9fa;
}
.periodo-card-vigente {
    border-left: 3px solid rgb(0, 139, 111) !important;
    background-color: rgba(0, 139, 111, 0.05);
}
.periodo-card-futuro {
    border-left: 3px solid #17a2b8 !important;
    background-color: rgba(23, 162, 184, 0.05);
}

/* -- Tabla de periodos -- */
/* Fondo SOLIDO en los th: el thead es sticky dentro de un contenedor con
   scroll y un fondo translucido deja ver las filas al desplazarse. */
.periodos-table thead th {
    color: rgb(0, 100, 80);
    font-weight: 600;
    font-size: 0.8rem;
    background-color: #ebf6f3;
    border-bottom: 2px solid rgba(0, 139, 111, 0.2);
    padding: 6px 8px;
}
.periodos-table tbody td {
    font-size: 0.82rem;
    padding: 4px 8px;
    vertical-align: middle;
}
.table-row-vigente {
    background-color: rgba(0, 139, 111, 0.06) !important;
}
.table-row-vigente td {
    font-weight: 500;
}

/* -- Calendario -- */
.calendario-mes {
    border-radius: 8px;
    overflow: hidden;
}
.calendario-tabla {
    table-layout: fixed;
}
.calendario-tabla th {
    font-size: 0.65rem;
    padding: 2px !important;
}
.calendario-tabla td {
    height: 28px;
    width: 28px;
    cursor: default;
    position: relative;
}
.cal-dia-num {
    font-size: 0.72rem;
    line-height: 1;
    display: block;
    padding: 4px 0;
}
.cal-dia-periodo {
    cursor: pointer;
    transition: filter 0.15s ease;
}
.cal-dia-periodo:hover {
    filter: brightness(0.85);
}
.cal-dia-periodo .cal-dia-num {
    color: #1a4a3a;
    font-weight: 600;
}
.cal-dia-vacio .cal-dia-num {
    opacity: 0.4;
}
.cal-periodo-inicio {
    border-left: 2px solid rgb(0, 139, 111) !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.cal-periodo-fin {
    border-right: 2px solid rgb(0, 139, 111) !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.cal-estado-vigente {
    box-shadow: inset 0 -2px 0 rgb(0, 139, 111);
}

/* -- Toggle vista buttons -- */
#btnVistaTabla.active,
#btnVistaCards.active {
    background-color: rgb(0, 139, 111);
    border-color: rgb(0, 139, 111);
    color: white;
}


/* ================================================
   LAYOUT DE APLICACION (_Layout) - Post-login
   Tema: Fondo claro con acentos verdes sutiles
   Diferenciador vs _AuthLayout: fondo claro, navbar verde
   ================================================ */

/* -- Body -- */
.app-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: #f5f7f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%23008b6f' fill-opacity='0.018'%3E%3Ccircle cx='30' cy='25' r='8'/%3E%3Ccircle cx='160' cy='35' r='10'/%3E%3Ccircle cx='100' cy='95' r='6'/%3E%3Ccircle cx='45' cy='155' r='9'/%3E%3Ccircle cx='155' cy='150' r='7'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* -- Navbar -- */
.app-navbar {
    background: linear-gradient(135deg, #064a38 0%, rgb(0, 139, 111) 60%, #0da788 100%);
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding: 0.35rem 0;
}

.app-brand {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.3rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
}
.app-brand:hover {
    opacity: 0.85;
    color: white !important;
}

.app-brand-text {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.app-toggler-icon {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.4rem;
}

/* Navbar links sobre fondo verde */
.app-navbar .navbar-nav .nav-link,
.app-navbar .nav-item .nav-link,
.app-navbar .navbar-nav .dropdown-toggle {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 6px;
}
.app-navbar .navbar-nav .nav-link:hover,
.app-navbar .nav-item .nav-link:hover,
.app-navbar .navbar-nav .dropdown-toggle:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.12);
}

/* Dropdown menus */
.app-navbar .dropdown-menu {
    border: 1px solid rgba(0, 139, 111, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.app-navbar .dropdown-menu .dropdown-item {
    color: #2c3e36;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}
.app-navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 139, 111, 0.08);
    color: rgb(0, 139, 111);
}

/* -- Contenido principal -- */
.app-content {
    flex: 1;
    padding-top: 0.5rem;
}

/* -- Footer -- */
.app-footer {
    background: linear-gradient(135deg, #064a38 0%, rgb(0, 100, 80) 100%);
    color: rgba(255, 255, 255, 0.6);
    padding: 0.6rem 0;
    font-size: 0.78rem;
    margin-top: auto;
}
.app-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.78rem;
    transition: color 0.2s ease;
}
.app-footer a:hover {
    color: white;
}

/* -- LoginPartial sobre navbar verde -- */
.app-navbar .nav-link-logout {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.app-navbar .nav-link-logout:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.12);
}


/* ================================================
   BOOTSTRAP TABS - Tema verde global
   Sobreescribe el azul default de Bootstrap
   ================================================ */

/* -- Nav Tabs -- */
.nav-tabs .nav-link {
    color: var(--pantone-bg-main);
    font-weight: 500;
    font-size: 0.88rem;
    border: 1px solid transparent;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: #064a38;
    background-color: rgba(0, 139, 111, 0.06);
    border-color: rgba(0, 139, 111, 0.15) rgba(0, 139, 111, 0.15) transparent;
}
.nav-tabs .nav-link.active {
    color: #064a38;
    font-weight: 600;
    background-color: #fff;
    border-color: rgba(0, 139, 111, 0.3) rgba(0, 139, 111, 0.3) #fff;
    box-shadow: 0 -2px 0 var(--pantone-bg-main) inset;
}
.nav-tabs {
    border-bottom: 2px solid rgba(0, 139, 111, 0.15);
}

/* -- Nav Pills (vertical y horizontal) -- */
.nav-pills .nav-link {
    color: var(--pantone-bg-main);
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: 0.5rem;
    padding: 0.45rem 0.9rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    color: #064a38;
    background-color: rgba(0, 139, 111, 0.08);
}
.nav-pills .nav-link.active {
    color: var(--pantone-bg-main) !important;
    background-color: var(--pantone-bg-secondary) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--pantone-bg-main);
}
/* Pills horizontales - borde inferior en vez de izquierdo */
.nav-pills.nav-fill .nav-link.active,
.nav-pills:not(.flex-column) .nav-link.active {
    box-shadow: inset 0 -3px 0 var(--pantone-bg-main);
}

/* ================================================
   NAV-PILLS COLAPSABLES
   Solo icono cuando collapsed, icono + texto expandido
   ================================================ */
.nav-pills-collapsible {
    transition: width 0.25s ease;
}
/* Fix DataTables dentro de pills colapsables:
   El .col en flex-row necesita min-width:0 Y width:0 como flex-basis
   para que el contenido no empuje el contenedor más allá del viewport. */
.nav-pills-collapsible ~ .tab-content,
.nav-pills-collapsible + .tab-content {
    min-width: 0;
}
.row > .col:has(.tab-content) {
    min-width: 0;
    overflow-x: hidden;
}
.row > .col > .tab-content {
    min-width: 0;
    width: 100%;
}
.row > .col > .tab-content .tab-pane .table-responsive {
    overflow-x: auto;
    max-width: 100%;
}
/* Forzar que DataTables respeten el ancho del contenedor */
.row > .col > .tab-content .dataTables_wrapper {
    overflow-x: auto;
    max-width: 100%;
}
.row > .col > .tab-content .dataTables_wrapper table.dataTable {
    width: 100% !important;
}

/* ================================================
   MODAL STACKING: Factor sobre Detalle TFI
   Bootstrap default z-index modal: 1055, backdrop: 1050
   Factor modal necesita estar por encima
   ================================================ */
#modalFactor {
    z-index: 1065 !important;
}
.nav-pills-collapsible .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
}
.nav-pills-collapsible .nav-link .pill-text {
    transition: opacity 0.2s ease, max-width 0.25s ease;
    opacity: 1;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
}
/* Estado colapsado */
.nav-pills-collapsible.collapsed .nav-link .pill-text {
    opacity: 0;
    max-width: 0;
}
.nav-pills-collapsible.collapsed .nav-link {
    justify-content: center;
    padding: 0.45rem 0.6rem;
}
/* Boton toggle para colapsar/expandir */
.pills-toggle-btn {
    background: none;
    border: 1px solid rgba(0, 139, 111, 0.2);
    color: var(--pantone-bg-main);
    border-radius: 0.35rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pills-toggle-btn:hover {
    background-color: rgba(0, 139, 111, 0.08);
    border-color: var(--pantone-bg-main);
}
.pills-toggle-btn .bi {
    transition: transform 0.25s ease;
}
.pills-toggle-btn.is-collapsed .bi {
    transform: rotate(180deg);
}


/* ================================================
   BREADCRUMBS SIGUIENDO PATRÓN DE COLOR VERDE
   ================================================ */
/* Cambio de separador */
.breadcrumb {
    --bs-breadcrumb-divider: '→';
    background: linear-gradient(290deg, rgb(28, 155, 121) 0%, rgb(0, 139, 111) 60%, rgb(13, 167, 136) 100%);
    border-radius: 0.4rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0.7rem;
    transition: all 0.3s ease;
}

.breadcrumb-item + .breadcrumb-item::before {
    font-weight: 700;
    color:white;
}

/* Breadcrumb general */
.breadcrumb-item {
    color:white;
    font-weight: 600;
}
    .breadcrumb-item:hover {
        cursor: default;
    }
    /* Iconos dentro del breadcrumb */
    .breadcrumb-item i {
        color:white;
        margin-right: 0.25rem;
    }

    /* Item activo (último) */
    .breadcrumb-item.active {
        color: #ffffff;
        font-weight:400;
    }
        /* Si en otras vistas usas <a> */
        .breadcrumb-item a {
            color: white;
            text-decoration: none;
        }

        .breadcrumb-item a:hover {
            color: #ffffff;
            text-decoration: underline;
        }


/* ================================================
   ESTANDARIZACIÓN: Catálogos y secciones
   Uniformidad en headers, cards, botones, modales
   ================================================ */

/* -- Section headers (h6 en cada tab-pane) -- */
.tab-pane h6 {
    /*color: #2c3e36;*/
    font-weight: 600;
    color: var(--pantone-bg-main);
}
.tab-pane h6 i {
    color: var(--pantone-bg-main);
    margin-right: 0.3rem;
}

/* -- Cards dentro de tab-panes: borde sutil verde -- */
.tab-pane > .container-fluid > .card {
    border: 1px solid rgba(0, 139, 111, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.tab-pane > .container-fluid > .card > .card-header {
    background-color: rgba(0, 139, 111, 0.04);
    border-bottom: 1px solid rgba(0, 139, 111, 0.1);
    padding: 0.5rem 0.75rem;
}
.tab-pane > .container-fluid > .card > .card-header h6 {
    font-size: 0.88rem;
    margin-bottom: 0;
}

/* -- Modal headers estandarizados: verde institucional -- */
.modal .modal-header.bg-datatable {
    background: linear-gradient(135deg, #064a38 0%, rgb(0, 139, 111) 60%, #0da788 100%);
}

/* Headers de modal con degradado institucional (patron Departamentos):
   el boton de cierre se blanquea sin requerir btn-close-white explicito. */
.modal .modal-header.CardHeader .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.modal .modal-header .modal-title i {
    margin-right: 0.4rem;
}

/* -- Botones de acción en DataTables: tamaño uniforme -- */
.tab-pane td .btn-group-sm > .btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
    line-height: 1.2;
}

/* -- Alert informativo verde para secciones -- */
.alert-datatable {
    color: var(--pantone-bg-main);
    background-color: var(--pantone-bg-secondary);
    border-color: var(--pantone-bg-main);
    border-left: 3px solid var(--pantone-bg-main);
    font-size: 0.85rem;
}
.alert-datatable strong {
    color: #064a38;
}

/* -- Badges uniformes en tablas -- */
.tab-pane .badge {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.25em 0.5em;
}

/* -- Spacing uniforme entre header y tabla -- */
.tab-pane > .container-fluid > .d-flex.mb-3 {
    margin-bottom: 0.75rem !important;
}

/* -- Form labels consistentes dentro de modales -- */
.modal .form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c3e36;
}
.modal .form-text {
    font-size: 0.75rem;
}

/* -- Spinner dentro de botones de modal -- */
.modal .btn .spinner-border-sm {
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.3rem;
}

/* -- DataTables: estilos verdes para paginación y búsqueda -- */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--pantone-bg-secondary) !important;
    border-color: var(--pantone-bg-main) !important;
    color: var(--pantone-bg-main) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(0, 139, 111, 0.06) !important;
    border-color: rgba(0, 139, 111, 0.2) !important;
    color: var(--pantone-bg-main) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--pantone-bg-main);
    box-shadow: 0 0 0 0.15rem rgba(0, 139, 111, 0.15);
    outline: none;
}
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--pantone-bg-main);
    box-shadow: 0 0 0 0.15rem rgba(0, 139, 111, 0.15);
    outline: none;
}