/* ============================================================
   Citae — Tema de marca
   ---------------------------------------------------------------
   BS primary    #0F3D3E  → Azul petróleo  — headings, nav, confianza
   BS secondary  #1B6B6E  → Verde azulado  — muted, deshabilitado
   BS success    #2DD4BF  → Turquesa       — confirmaciones, acciones
   BS info       #17A2B8  → Cyan Bootstrap — informativo
   BS warning    #EFD65A  → Amarillo       — advertencias
   BS danger     #FF7A59  → Coral          — alertas, eliminar
   BS light      #E5E7EB  → Gris suave     — bordes, fondos secundarios
   ============================================================ */


/* ── 1. Variables globales ──────────────────────────────────── */
:root {
    /* Paleta brand */
    --citae-primary:        #2DD4BF;   /* Turquesa  = BS success  */
    --citae-primary-dark:   #1fb9a5;
    --citae-primary-light:  #e6faf8;
    --citae-secondary:      #0F3D3E;   /* Azul petróleo = BS primary */
    --citae-secondary-dark: #081f1f;
    --citae-secondary-mid:  #1B6B6E;   /* Verde azulado = BS secondary */
    --citae-gray:           #E5E7EB;   /* Gris suave = BS light */
    --citae-gray-dark:      #cfd3da;
    --citae-gray-text:      #374151;
    --citae-coral:          #FF7A59;   /* Coral = BS danger  */
    --citae-coral-dark:     #ff5b33;
    --citae-coral-light:    #fff0ec;
    --citae-yellow:         #EFD65A;   /* Amarillo = BS warning */
    --citae-yellow-dark:    #eccd37;
    --citae-yellow-light:   #fefae8;
    --citae-bg:             #FAFAF7;   /* Blanco cálido — fondo body */
    --citae-border:         #E5E7EB;
    --citae-text:           #0F3D3E;

    /* Sobreescritura de variables Bootstrap 5 */
    --bs-primary:           #0F3D3E;
    --bs-primary-rgb:       15, 61, 62;
    --bs-secondary:         #1B6B6E;
    --bs-secondary-rgb:     27, 107, 110;
    --bs-success:           #2DD4BF;
    --bs-success-rgb:       45, 212, 191;
    --bs-info:              #17a2b8;
    --bs-info-rgb:          23, 162, 184;
    --bs-warning:           #EFD65A;
    --bs-warning-rgb:       239, 214, 90;
    --bs-danger:            #FF7A59;
    --bs-danger-rgb:        255, 122, 89;
    --bs-light:             #E5E7EB;
    --bs-light-rgb:         229, 231, 235;
    --bs-border-color:      #E5E7EB;
    --bs-body-bg:           #FAFAF7;
    --bs-body-color:        #0F3D3E;
    --bs-link-color:        #0F3D3E;
    --bs-link-hover-color:  #081f1f;
    --bs-focus-ring-color:  rgba(15, 61, 62, .25);

    /* Sobreescritura de variables propias de Xintra */
    --primary-rgb:          15, 61, 62;
    --primary-color:        #0F3D3E;
    --primary-border:       #0F3D3E;
    --primary01: rgba(15, 61, 62, 0.1);
    --primary02: rgba(15, 61, 62, 0.2);
    --primary03: rgba(15, 61, 62, 0.3);
    --primary04: rgba(15, 61, 62, 0.4);
    --primary05: rgba(15, 61, 62, 0.5);
    --primary06: rgba(15, 61, 62, 0.6);
    --primary07: rgba(15, 61, 62, 0.7);
    --primary08: rgba(15, 61, 62, 0.8);
    --primary09: rgba(15, 61, 62, 0.9);
    --primary005: rgba(15, 61, 62, 0.05);
    --secondary-rgb:        27, 107, 110;
    --success-rgb:          45, 212, 191;
    --info-rgb:             23, 162, 184;
    --danger-rgb:           255, 122, 89;
    --warning-rgb:          239, 214, 90;
}


/* ── 2. Utilidades de color ──────────────────────────────────── */
.text-primary    { color: var(--citae-secondary)     !important; }
.text-secondary  { color: var(--citae-secondary-mid) !important; }
.text-success    { color: var(--citae-primary)       !important; }
.text-info       { color: #17a2b8                    !important; }
.text-warning    { color: var(--citae-yellow)        !important; }
.text-danger     { color: var(--citae-coral)         !important; }
.text-muted      { color: var(--citae-secondary-mid) !important; }

.bg-primary   { background-color: var(--citae-secondary)     !important; color: #fff; }
.bg-secondary { background-color: var(--citae-secondary-mid) !important; color: #fff; }
.bg-success   { background-color: var(--citae-primary)       !important; color: #111; }
.bg-info      { background-color: #17a2b8                    !important; color: #fff; }
.bg-warning   { background-color: var(--citae-yellow)        !important; color: #111; }
.bg-danger    { background-color: var(--citae-coral)         !important; color: #111; }
.bg-light     { background-color: var(--citae-gray)          !important; }

.bg-primary-transparent  { background-color: rgba(15, 61, 62, 0.1)     !important; color: var(--citae-secondary); }
.bg-secondary-transparent{ background-color: rgba(27, 107, 110, 0.1)   !important; color: var(--citae-secondary-mid); }
.bg-success-transparent  { background-color: var(--citae-primary-light) !important; color: var(--citae-primary); }
.bg-danger-transparent   { background-color: var(--citae-coral-light)   !important; color: var(--citae-coral); }
.bg-warning-transparent  { background-color: var(--citae-yellow-light)  !important; color: var(--citae-yellow); }

.border-primary   { border-color: var(--citae-secondary)     !important; }
.border-secondary { border-color: var(--citae-secondary-mid) !important; }
.border-success   { border-color: var(--citae-primary)       !important; }
.border-danger    { border-color: var(--citae-coral)         !important; }
.border-warning   { border-color: var(--citae-yellow)        !important; }


/* ── 3. Botones ─────────────────────────────────────────────── */

.btn-rounded { border-radius: 50rem !important; }

/* Primario — Azul petróleo */
.btn-primary {
    background-color: var(--citae-secondary)      !important;
    border-color:     var(--citae-secondary)      !important;
    color: #fff                                   !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--citae-secondary-dark) !important;
    border-color:     var(--citae-secondary-dark) !important;
    color: #fff                                   !important;
}
.btn-primary:focus-visible { box-shadow: 0 0 0 .25rem rgba(15,61,62,.35); }

/* Secundario — Verde azulado */
.btn-secondary {
    background-color: var(--citae-secondary-mid) !important;
    border-color:     var(--citae-secondary-mid) !important;
    color: #fff                                  !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #134d4f !important;
    border-color:     #114345 !important;
    color: #fff               !important;
}

/* Éxito — Turquesa */
.btn-success {
    background-color: var(--citae-primary)      !important;
    border-color:     var(--citae-primary)      !important;
    color: #111                                 !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--citae-primary-dark) !important;
    border-color:     var(--citae-primary-dark) !important;
    color: #111                                 !important;
}
.btn-success:focus-visible { box-shadow: 0 0 0 .25rem rgba(45,212,191,.35); }

/* Info — Cyan Bootstrap */
.btn-info {
    background-color: #17a2b8 !important;
    border-color:     #17a2b8 !important;
    color: #fff               !important;
}
.btn-info:hover,
.btn-info:active {
    background-color: #138496 !important;
    border-color:     #117a8b !important;
    color: #fff               !important;
}

/* Advertencia — Amarillo */
.btn-warning {
    background-color: var(--citae-yellow)      !important;
    border-color:     var(--citae-yellow)      !important;
    color: #111                                !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--citae-yellow-dark) !important;
    border-color:     var(--citae-yellow-dark) !important;
    color: #111                                !important;
}
.btn-warning:focus-visible { box-shadow: 0 0 0 .25rem rgba(239,214,90,.35); }

/* Peligro — Coral */
.btn-danger {
    background-color: var(--citae-coral)      !important;
    border-color:     var(--citae-coral)      !important;
    color: #111                               !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--citae-coral-dark) !important;
    border-color:     var(--citae-coral-dark) !important;
    color: #111                               !important;
}
.btn-danger:focus-visible { box-shadow: 0 0 0 .25rem rgba(255,122,89,.35); }

/* Light — Gris suave */
.btn-light {
    background-color: var(--citae-gray)      !important;
    border-color:     var(--citae-gray)      !important;
    color: #111                              !important;
}
.btn-light:hover {
    background-color: var(--citae-gray-dark) !important;
    border-color:     var(--citae-gray-dark) !important;
    color: #111                              !important;
}

/* Outline primario — Azul petróleo */
.btn-outline-primary {
    border-color:     var(--citae-secondary) !important;
    color:            var(--citae-secondary) !important;
    background-color: transparent           !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--citae-secondary) !important;
    border-color:     var(--citae-secondary) !important;
    color: #fff                              !important;
}

/* Outline secundario — Verde azulado */
.btn-outline-secondary {
    border-color:     var(--citae-secondary-mid) !important;
    color:            var(--citae-secondary-mid) !important;
    background-color: transparent               !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    background-color: var(--citae-secondary-mid) !important;
    border-color:     var(--citae-secondary-mid) !important;
    color: #fff                                  !important;
}

/* Outline éxito — Turquesa */
.btn-outline-success {
    border-color:     var(--citae-primary) !important;
    color:            var(--citae-primary) !important;
    background-color: transparent         !important;
}
.btn-outline-success:hover,
.btn-outline-success:active {
    background-color: var(--citae-primary) !important;
    border-color:     var(--citae-primary) !important;
    color: #fff                            !important;
}

/* Outline info */
.btn-outline-info {
    border-color:     #17a2b8  !important;
    color:            #17a2b8  !important;
    background-color: transparent !important;
}
.btn-outline-info:hover,
.btn-outline-info:active {
    background-color: #17a2b8 !important;
    border-color:     #17a2b8 !important;
    color: #fff               !important;
}

/* Outline warning — Amarillo */
.btn-outline-warning {
    border-color:     var(--citae-yellow) !important;
    color:            var(--citae-yellow) !important;
    background-color: transparent        !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:active {
    background-color: var(--citae-yellow) !important;
    border-color:     var(--citae-yellow) !important;
    color: #111                           !important;
}

/* Outline danger — Coral */
.btn-outline-danger {
    border-color:     var(--citae-coral) !important;
    color:            var(--citae-coral) !important;
    background-color: transparent       !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:active {
    background-color: var(--citae-coral) !important;
    border-color:     var(--citae-coral) !important;
    color: #fff                          !important;
}

/* Outline light */
.btn-outline-light {
    border-color: var(--citae-gray)      !important;
    color:        var(--citae-secondary) !important;
}


/* ── 4. Badges ──────────────────────────────────────────────── */
.badge.bg-primary   { background-color: var(--citae-secondary)     !important; color: #fff; }
.badge.bg-secondary { background-color: var(--citae-secondary-mid) !important; color: #fff; }
.badge.bg-success   { background-color: var(--citae-primary)       !important; color: #111; }
.badge.bg-info      { background-color: #17a2b8                    !important; color: #fff; }
.badge.bg-warning   { background-color: var(--citae-yellow)        !important; color: #111; }
.badge.bg-danger    { background-color: var(--citae-coral)         !important; color: #111; }
.badge.bg-light     { background-color: var(--citae-gray)          !important; color: #111; border: 1px solid var(--citae-border); }

/* Badges de estatus Xintra */
.badge-activo     { background-color: var(--citae-primary-light); color: var(--citae-primary);   border-radius: 50px; padding: .25em .7em; font-size: .75em; font-weight: 600; }
.badge-suspendido { background-color: var(--citae-coral-light);   color: var(--citae-coral);     border-radius: 50px; padding: .25em .7em; font-size: .75em; font-weight: 600; }

/* Badges transparentes de Bootstrap */
.badge.text-bg-primary   { background-color: rgba(15,61,62,.12)       !important; color: var(--citae-secondary)     !important; }
.badge.text-bg-secondary { background-color: rgba(27,107,110,.12)     !important; color: var(--citae-secondary-mid) !important; }
.badge.text-bg-success   { background-color: var(--citae-primary-light) !important; color: var(--citae-primary)    !important; }
.badge.text-bg-info      { background-color: rgba(23,162,184,.12)     !important; color: #17a2b8                   !important; }
.badge.text-bg-warning   { background-color: var(--citae-yellow-light) !important; color: var(--citae-yellow)      !important; }
.badge.text-bg-danger    { background-color: var(--citae-coral-light)  !important; color: var(--citae-coral)       !important; }


/* ── 5. Formularios ─────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #28a2a5;
    box-shadow:   0 0 0 .2rem rgba(15,61,62,.2);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--citae-secondary) !important;
    border-color:     var(--citae-secondary) !important;
}
.form-check-input:focus {
    border-color: #28a2a5                        !important;
    box-shadow:   0 0 0 .2rem rgba(15,61,62,.2)  !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--citae-secondary) !important;
    border-color:     var(--citae-secondary) !important;
}

.input-group-text {
    border-color: var(--citae-border);
    background-color: var(--citae-bg);
    color: var(--citae-secondary);
}


/* ── 6. Navegación y tabs ───────────────────────────────────── */
.nav-link          { color: var(--citae-secondary); }
.nav-link:hover    { color: var(--citae-secondary-mid); }
.nav-link.active   { color: var(--citae-secondary); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--citae-secondary);
    color: #fff;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--citae-secondary);
    border-bottom-color: var(--citae-secondary);
}

.nav-tabs-footer .nav-link.active {
    color: var(--citae-secondary);
    border-bottom: 2px solid var(--citae-secondary);
}

/* Sidebar — azul petróleo de fondo, turquesa en ítem activo */
.app-sidebar                      { background-color: var(--citae-secondary) !important; }
.app-sidebar .main-sidebar-header { background: var(--citae-secondary)        !important;
                                     border-block-end-color: rgba(255,255,255,.1) !important; }

.sidebar .nav-link,
.app-sidebar .nav-link       { color: rgba(255,255,255,.75); }
.sidebar .nav-link:hover,
.app-sidebar .nav-link:hover { color: #fff; }
.sidebar .nav-link.active,
.app-sidebar .nav-link.active {
    background-color: var(--citae-primary);
    color: var(--citae-secondary);
}


/* ── 7. Cards ───────────────────────────────────────────────── */
.card {
    border-color: var(--citae-border);
    background-color: #fff;
}
.card-header {
    border-bottom-color: var(--citae-border);
    background-color: #fff;
}


/* ── 8. Alertas ─────────────────────────────────────────────── */
.alert-primary {
    background-color: #cfd8d8;
    border-color:     #bcc9c9;
    color:            #082020;
}
.alert-secondary {
    background-color: #d1e1e2;
    border-color:     #bfd6d6;
    color:            #0e3839;
}
.alert-success {
    background-color: var(--citae-primary-light);
    border-color:     var(--citae-primary);
    color:            var(--citae-secondary);
}
.alert-info {
    background-color: #d1ecf1;
    border-color:     #bee5eb;
    color:            #0c5460;
}
.alert-warning {
    background-color: var(--citae-yellow-light);
    border-color:     var(--citae-yellow);
    color:            #7c6f2f;
}
.alert-danger {
    background-color: var(--citae-coral-light);
    border-color:     var(--citae-coral);
    color:            #853f2e;
}
.alert-light {
    background-color: var(--citae-bg);
    border-color:     var(--citae-gray);
    color:            var(--citae-gray-text);
}


/* ── 9. Botones icono Xintra (btn-ag-icon) ──────────────────── */
.btn-ag-icon--primary {
    color: var(--citae-secondary);
}
.btn-ag-icon--primary:hover {
    background-color: rgba(15,61,62,.1);
    color: var(--citae-secondary-dark);
}

.btn-ag-icon--danger {
    color: var(--citae-coral);
}
.btn-ag-icon--danger:hover {
    background-color: var(--citae-coral-light);
    color: var(--citae-coral-dark);
}

.btn-ag-icon--success {
    color: var(--citae-primary);
}
.btn-ag-icon--success:hover {
    background-color: var(--citae-primary-light);
    color: var(--citae-primary-dark);
}

.btn-ag-icon--warning {
    color: var(--citae-yellow);
}
.btn-ag-icon--warning:hover {
    background-color: var(--citae-yellow-light);
    color: var(--citae-yellow-dark);
}


/* ── 10. Links ──────────────────────────────────────────────── */
a { color: var(--citae-secondary); }
a:hover { color: var(--citae-secondary-dark); }


/* ── 11. Spinner y progress ─────────────────────────────────── */
.spinner-border.text-primary,
.spinner-grow.text-primary  { color: var(--citae-secondary) !important; }

.progress-bar               { background-color: var(--citae-secondary); }


/* ── 12. Dropdown ───────────────────────────────────────────── */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(15,61,62,.08);
    color: var(--citae-secondary);
}
.dropdown-item.active {
    background-color: var(--citae-secondary);
    color: #fff;
}


/* ── 13. Paginación ─────────────────────────────────────────── */
.page-link { color: var(--citae-secondary); }
.page-link:hover { color: var(--citae-secondary-dark); }
.page-item.active .page-link {
    background-color: var(--citae-secondary);
    border-color:     var(--citae-secondary);
    color: #fff;
}


/* ── 14. Tooltips ───────────────────────────────────────────── */
.tooltip-inner { background-color: var(--citae-secondary); }
.bs-tooltip-top    .tooltip-arrow::before { border-top-color:    var(--citae-secondary); }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--citae-secondary); }


/* ── 15. Scrollbar (webkit) ─────────────────────────────────── */
::-webkit-scrollbar-track { background: var(--citae-bg); }
::-webkit-scrollbar-thumb { background: var(--citae-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--citae-secondary); }