/* ══════════════════════════════════════════════════════════
   VitalSoft Theme — Paleta de marca unificada
   ──────────────────────────────────────────────────────────
   Aplica a TODO el sistema. Importar después de Bootstrap.

   Tokens:
   --vs-navy        Primario (botones primarios, headers, links)
   --vs-navy-dark   Hover de primario, gradientes
   --vs-emerald     Secundario / éxito (CTAs verdes, badges)
   --vs-emerald-dark Hover de emerald
   --vs-grey        Neutro (textos secundarios)
   --vs-bg-soft     Fondo suave
   --vs-warning     Por vencer, pendiente
   --vs-danger      Vencido, errores
══════════════════════════════════════════════════════════ */

:root {
    /* Paleta VitalSoft */
    --vs-navy:        #1E3A8A;
    --vs-navy-dark:   #172554;
    --vs-navy-soft:   #E8EEF9;
    --vs-emerald:     #10B981;
    --vs-emerald-dark:#059669;
    --vs-emerald-soft:#ECFDF5;
    --vs-grey:        #64748B;
    --vs-grey-soft:   #F1F5F9;
    --vs-bg-soft:     #F1F5F9;
    --vs-warning:     #F59E0B;
    --vs-warning-soft:#FEF3C7;
    --vs-danger:      #DC2626;
    --vs-danger-soft: #FEE2E2;
    --vs-border:      #E2E8F0;

    /* Override Bootstrap variables */
    --bs-primary:        #1E3A8A;
    --bs-primary-rgb:    30, 58, 138;
    --bs-success:        #10B981;
    --bs-success-rgb:    16, 185, 129;
    --bs-warning:        #F59E0B;
    --bs-warning-rgb:    245, 158, 11;
    --bs-danger:         #DC2626;
    --bs-danger-rgb:     220, 38, 38;
    --bs-secondary:      #64748B;
    --bs-secondary-rgb:  100, 116, 139;
    --bs-info:           #3B82F6;
    --bs-info-rgb:       59, 130, 246;
    --bs-link-color:     #1E3A8A;
    --bs-link-hover-color: #172554;
}

/* ══════════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════════ */

.btn-primary {
    background-color: var(--vs-navy) !important;
    border-color: var(--vs-navy) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--vs-navy-dark) !important;
    border-color: var(--vs-navy-dark) !important;
}
.btn-outline-primary {
    color: var(--vs-navy) !important;
    border-color: var(--vs-navy) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--vs-navy) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--vs-emerald) !important;
    border-color: var(--vs-emerald) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--vs-emerald-dark) !important;
    border-color: var(--vs-emerald-dark) !important;
}
.btn-outline-success {
    color: var(--vs-emerald-dark) !important;
    border-color: var(--vs-emerald) !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--vs-emerald) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: var(--vs-warning) !important;
    border-color: var(--vs-warning) !important;
    color: #fff !important;
}
.btn-danger {
    background-color: var(--vs-danger) !important;
    border-color: var(--vs-danger) !important;
}
.btn-secondary {
    background-color: var(--vs-grey) !important;
    border-color: var(--vs-grey) !important;
}

/* ══════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════ */

.bg-primary    { background-color: var(--vs-navy)     !important; }
.bg-success    { background-color: var(--vs-emerald)  !important; }
.bg-warning    { background-color: var(--vs-warning)  !important; }
.bg-danger     { background-color: var(--vs-danger)   !important; }
.bg-secondary  { background-color: var(--vs-grey)     !important; }

.bg-primary-subtle   { background-color: var(--vs-navy-soft)    !important; }
.bg-success-subtle   { background-color: var(--vs-emerald-soft) !important; }
.bg-warning-subtle   { background-color: var(--vs-warning-soft) !important; }
.bg-danger-subtle    { background-color: var(--vs-danger-soft)  !important; }

.text-primary  { color: var(--vs-navy)     !important; }
.text-success  { color: var(--vs-emerald-dark) !important; }
.text-warning  { color: var(--vs-warning)  !important; }
.text-danger   { color: var(--vs-danger)   !important; }
.text-muted    { color: var(--vs-grey)     !important; }

.border-primary { border-color: var(--vs-navy) !important; }
.border-success { border-color: var(--vs-emerald) !important; }

/* ══════════════════════════════════════════════════════════
   FORMULARIOS
══════════════════════════════════════════════════════════ */

.form-control:focus,
.form-select:focus {
    border-color: var(--vs-emerald);
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.18);
}
.form-check-input:checked {
    background-color: var(--vs-emerald);
    border-color: var(--vs-emerald);
}
.form-label {
    color: var(--vs-navy);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   LINKS
══════════════════════════════════════════════════════════ */

a { color: var(--vs-navy); }
a:hover { color: var(--vs-navy-dark); }

/* ══════════════════════════════════════════════════════════
   CARDS Y TABLAS
══════════════════════════════════════════════════════════ */

.card-title { color: var(--vs-navy); }

.table thead th {
    color: var(--vs-navy);
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--vs-navy) !important;
    color: #fff !important;
    border-color: var(--vs-navy) !important;
}

/* ══════════════════════════════════════════════════════════
   NAV / TABS / PILLS
══════════════════════════════════════════════════════════ */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--vs-navy);
}
.nav-tabs .nav-link.active {
    color: var(--vs-navy);
    border-bottom: 2px solid var(--vs-navy);
}

/* ══════════════════════════════════════════════════════════
   PAGE TITLE
══════════════════════════════════════════════════════════ */

.page-title-box h4 {
    color: var(--vs-navy);
}