/* ============================================================================
   SISCREDI - BOOTSTRAP 5.3.8 CUSTOM VARIABLES
   ============================================================================
   Sistema de Variables CSS usando nomenclatura Bootstrap oficial
   Documentación: https://getbootstrap.com/docs/5.3/customize/css-variables/
   Color Modes: https://getbootstrap.com/docs/5.3/customize/color-modes/
   ============================================================================ */

/* ============================================================================
   LIGHT MODE (DEFAULT)
   ============================================================================ */

:root,
[data-bs-theme="light"] {
  /* Indica al navegador usar esquema de color claro para elementos nativos */
  color-scheme: light;

  /* ==========================================================================
     COLORES PRIMARIOS SISCREDI (Sobrescribiendo Bootstrap)
     ========================================================================== */

  /* Primary: Golden Yellow (#f5a941) - Color principal de SisCredi */
  --bs-primary: #f5a941;
  --bs-primary-rgb: 245, 169, 65;
  --bs-primary-text-emphasis: #313f28; /* Texto oscuro en primary */
  --bs-primary-bg-subtle: #fef8f0; /* Fondo sutil primary */
  --bs-primary-border-subtle: #fbd4ad; /* Borde sutil primary */

  /* Secondary: Verde Oliva (#43503b) - Color secundario de SisCredi */
  --bs-secondary: #43503b;
  --bs-secondary-rgb: 67, 80, 59;
  --bs-secondary-text-emphasis: #1a3027;
  --bs-secondary-bg-subtle: #f2f6f2;
  --bs-secondary-border-subtle: #b8d0bc;

  /* Success: Verde Éxito */
  --bs-success: #22c55e;
  --bs-success-rgb: 34, 197, 94;
  --bs-success-text-emphasis: #15803d;
  --bs-success-bg-subtle: #f0f9f4;
  --bs-success-border-subtle: #bbe8cc;

  /* Danger: Rojo Error */
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-danger-text-emphasis: #b91c1c;
  --bs-danger-bg-subtle: #fef2f2;
  --bs-danger-border-subtle: #fbd5d5;

  /* Warning: Naranja Advertencia */
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-text-emphasis: #b45309;
  --bs-warning-bg-subtle: #fffbeb;
  --bs-warning-border-subtle: #fde68a;

  /* Info: Azul Información */
  --bs-info: #3b82f6;
  --bs-info-rgb: 59, 130, 246;
  --bs-info-text-emphasis: #1d4ed8;
  --bs-info-bg-subtle: #eff6ff;
  --bs-info-border-subtle: #bfdbfe;

  /* Light: Neutral Claro */
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  --bs-light-text-emphasis: #4b5563;
  --bs-light-bg-subtle: #f1f3f4;
  --bs-light-border-subtle: #e3e5e7;

  /* Dark: Neutral Oscuro */
  --bs-dark: #1f2937;
  --bs-dark-rgb: 31, 41, 55;
  --bs-dark-text-emphasis: #1f2937;
  --bs-dark-bg-subtle: #374151;
  --bs-dark-border-subtle: #4b5563;

  /* Purple: Púrpura SisCredi */
  --bs-purple: #7c3aed;
  --bs-purple-rgb: 124, 58, 237;
  --bs-purple-text-emphasis: #5b21b6;
  --bs-purple-bg-subtle: #f5f3ff;
  --bs-purple-border-subtle: #ddd6fe;

  /* ==========================================================================
      COLORES DE FONDO Y TEXTO (Body)
      ========================================================================== */

  --bs-body-color: #596066; /* Texto principal SisCredi */
  --bs-body-color-rgb: 89, 96, 102;
  --bs-body-bg: #f7f2e4; /* Fondo crema/beige SisCredi */
  --bs-body-bg-rgb: 247, 242, 228;

  --bs-emphasis-color: #1f2937; /* Texto con énfasis */
  --bs-emphasis-color-rgb: 31, 41, 55;

  --bs-secondary-color: #6a7076; /* Texto secundario */
  --bs-secondary-color-rgb: 106, 112, 118;
  --bs-secondary-bg: #FAFAFA;
  --bs-secondary-bg-rgb: 255, 255, 255;

  --bs-tertiary-color: #9ca3af; /* Texto terciario (muted) */
  --bs-tertiary-color-rgb: 156, 163, 175;
  --bs-tertiary-bg: #FAFAFA;
  --bs-tertiary-bg-rgb: 250, 250, 250;

  /* ==========================================================================
     COLORES DE ENLACES
     ========================================================================== */

  --bs-link-color: #f5a941; /* Enlaces en primary color */
  --bs-link-color-rgb: 245, 169, 65;
  --bs-link-hover-color: #d9903a; /* Hover más oscuro */
  --bs-link-hover-color-rgb: 217, 144, 58;

  /* ==========================================================================
     COLORES DE BORDES
     ========================================================================== */

  --bs-border-color: #e3e5e7; /* Borde base */
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

  /* ==========================================================================
     ALIAS RGB PARA COMPATIBILIDAD CON VARIABLES CUSTOM (--sc-color-*-rgb)
     ========================================================================== */

  /* Alias de colores RGB para uso con rgba() en componentes custom */
  --sc-color-primary-rgb: var(--bs-primary-rgb);    /* 245, 169, 65 */
  --sc-color-secondary-rgb: var(--bs-secondary-rgb); /* 67, 80, 59 */
  --sc-color-success-rgb: var(--bs-success-rgb);    /* 34, 197, 94 */
  --sc-color-danger-rgb: var(--bs-danger-rgb);      /* 220, 53, 69 */
  --sc-color-warning-rgb: var(--bs-warning-rgb);    /* 245, 158, 11 */
  --sc-color-info-rgb: var(--bs-info-rgb);          /* 59, 130, 246 */

  /* ==========================================================================
     TIPOGRAFÍA
     ========================================================================== */

  --bs-font-sans-serif: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-font-monospace: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;

  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;

  /* Tamaños de fuente adicionales (escala modular 1.25) */
  --bs-font-size-xs: 0.75rem;    /* 12px */
  --bs-font-size-sm: 0.875rem;   /* 14px */
  --bs-font-size-base: 1rem;     /* 16px */
  --bs-font-size-md: 1.125rem;   /* 18px */
  --bs-font-size-lg: 1.25rem;    /* 20px */
  --bs-font-size-xl: 1.5rem;     /* 24px */
  --bs-font-size-2xl: 1.875rem;  /* 30px */
  --bs-font-size-3xl: 2.25rem;   /* 36px */
  --bs-font-size-4xl: 3rem;      /* 48px */
  --bs-font-size-5xl: 3.75rem;   /* 60px */

  /* Pesos de fuente */
  --bs-font-weight-light: 300;
  --bs-font-weight-normal: 400;
  --bs-font-weight-medium: 500;
  --bs-font-weight-semibold: 600;
  --bs-font-weight-bold: 700;
  --bs-font-weight-extrabold: 800;

  /* Line heights */
  --bs-line-height-tight: 1.25;
  --bs-line-height-snug: 1.375;
  --bs-line-height-normal: 1.5;
  --bs-line-height-relaxed: 1.625;
  --bs-line-height-loose: 2;

  /* Letter spacing */
  --bs-letter-spacing-tighter: -0.05em;
  --bs-letter-spacing-tight: -0.025em;
  --bs-letter-spacing-normal: 0em;
  --bs-letter-spacing-wide: 0.025em;
  --bs-letter-spacing-wider: 0.05em;
  --bs-letter-spacing-widest: 0.1em;

  /* ==========================================================================
     ESPACIADO (Sistema de 8px alineado con Bootstrap)
     ========================================================================== */

  --bs-spacer-0: 0;
  --bs-spacer-1: 0.25rem;  /* 4px */
  --bs-spacer-2: 0.5rem;   /* 8px */
  --bs-spacer-3: 0.75rem;  /* 12px */
  --bs-spacer-4: 1rem;     /* 16px */
  --bs-spacer-5: 1.25rem;  /* 20px */
  --bs-spacer-6: 1.5rem;   /* 24px */
  --bs-spacer-8: 2rem;     /* 32px */
  --bs-spacer-10: 2.5rem;  /* 40px */
  --bs-spacer-12: 3rem;    /* 48px */
  --bs-spacer-16: 4rem;    /* 64px */
  --bs-spacer-20: 5rem;    /* 80px */
  --bs-spacer-24: 6rem;    /* 96px */
  --bs-spacer-32: 8rem;    /* 128px */

  /* ==========================================================================
     BORDES Y RADIOS
     ========================================================================== */

  --bs-border-width: 1px;
  --bs-border-width-2: 2px;
  --bs-border-width-3: 3px;
  --bs-border-width-4: 4px;
  --bs-border-width-5: 5px;

  --bs-border-style: solid;

  --bs-border-radius: 0.375rem;       /* 6px - base */
  --bs-border-radius-xs: 0.125rem;    /* 2px */
  --bs-border-radius-sm: 0.25rem;     /* 4px */
  --bs-border-radius-lg: 0.75rem;     /* 12px */
  --bs-border-radius-xl: 1rem;        /* 16px */
  --bs-border-radius-2xl: 1.5rem;     /* 24px */
  --bs-border-radius-pill: 50rem;

  /* ==========================================================================
     SOMBRAS (Box Shadows)
     ========================================================================== */

  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* Sombras personalizadas adicionales */
  --bs-box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bs-box-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --bs-box-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --bs-box-shadow-2xl: 0 50px 100px -20px rgba(0, 0, 0, 0.25);

  /* ==========================================================================
     FOCUS RING (Anillo de Enfoque)
     ========================================================================== */

  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(245, 169, 65, 0.25); /* Primary color con opacidad */

  /* ==========================================================================
     TRANSICIONES
     ========================================================================== */

  --bs-transition-timing-linear: linear;
  --bs-transition-timing-ease: ease;
  --bs-transition-timing-ease-in: ease-in;
  --bs-transition-timing-ease-out: ease-out;
  --bs-transition-timing-ease-in-out: ease-in-out;

  /* Cubic Bezier personalizados */
  --bs-transition-timing-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --bs-transition-timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Duraciones */
  --bs-transition-duration-fast: 150ms;
  --bs-transition-duration-normal: 250ms;
  --bs-transition-duration-slow: 350ms;
  --bs-transition-duration-slower: 500ms;

  /* Transiciones comunes */
  --bs-transition-base: all var(--bs-transition-duration-normal) var(--bs-transition-timing-smooth);
  --bs-transition-colors: color var(--bs-transition-duration-fast) var(--bs-transition-timing-smooth),
                          background-color var(--bs-transition-duration-fast) var(--bs-transition-timing-smooth),
                          border-color var(--bs-transition-duration-fast) var(--bs-transition-timing-smooth);
  --bs-transition-opacity: opacity var(--bs-transition-duration-normal) var(--bs-transition-timing-smooth);
  --bs-transition-transform: transform var(--bs-transition-duration-normal) var(--bs-transition-timing-smooth);

  /* ==========================================================================
     Z-INDEX
     ========================================================================== */

  --bs-z-index-dropdown: 1000;
  --bs-z-index-sticky: 1020;
  --bs-z-index-fixed: 1030;
  --bs-z-index-modal-backdrop: 1040;
  --bs-z-index-offcanvas-backdrop: 1045;
  --bs-z-index-modal: 1055;
  --bs-z-index-popover: 1070;
  --bs-z-index-tooltip: 1080;
  --bs-z-index-toast: 1090;

  /* ==========================================================================
     COLORES FINANCIEROS ESPECÍFICOS SISCREDI
     ========================================================================== */

  --bs-financial-vigente: var(--bs-success); /* Verde para préstamos vigentes */
  --bs-financial-retraso: var(--bs-warning); /* Naranja para retraso */
  --bs-financial-mora: #d97706; /* Naranja oscuro para mora */
  --bs-financial-vencido: #b91c1c; /* Rojo oscuro para vencido */
  --bs-financial-positive: var(--bs-success);
  --bs-financial-negative: var(--bs-danger);

  /* ==========================================================================
     COMPONENTES ESPECÍFICOS
     ========================================================================== */

  /* --- Cards --- */
  --bs-card-spacer-y: 1.5rem; /* 24px */
  --bs-card-spacer-x: 1.5rem; /* 24px */
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: var(--bs-emphasis-color);
  --bs-card-subtitle-color: var(--bs-secondary-color);
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-box-shadow: var(--bs-box-shadow-sm);
  --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 1.5rem;
  --bs-card-cap-bg: var(--bs-light);
  --bs-card-cap-color: var(--bs-body-color);
  --bs-card-height: auto;
  --bs-card-color: var(--bs-body-color);
  --bs-card-bg: var(--bs-secondary-bg);
  --bs-card-img-overlay-padding: 1.25rem;
  --bs-card-group-margin: 0.75rem;

  /* --- Tables --- */
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-border-width: var(--bs-border-width);
  --bs-table-border-radius: var(--bs-border-radius-lg);
  --bs-table-bg: var(--bs-secondary-bg);
  --bs-table-hover-bg: var(--bs-tertiary-bg);
  --bs-table-cap-bg: var(--bs-light);
  --bs-table-cap-padding-y: 1rem;
  --bs-table-cap-padding-x: 1.5rem;
  --bs-table-spacer-x: 1.5rem;
  --bs-table-spacer-y: 1rem;

  /* --- List Group --- */
  --bs-list-group-bg: var(--bs-secondary-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-y: 0.75rem;
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-bg);

  /* --- Buttons --- */
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-family: var(--bs-font-sans-serif);
  --bs-btn-font-size: var(--bs-body-font-size);
  --bs-btn-font-weight: var(--bs-font-weight-medium);
  --bs-btn-line-height: var(--bs-body-line-height);
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .5);

  /* --- Forms --- */
  --bs-form-label-margin-bottom: 0.5rem;
  --bs-form-label-font-size: var(--bs-font-size-sm);
  --bs-form-label-font-weight: var(--bs-font-weight-medium);
  --bs-form-label-color: var(--bs-body-color);
  --bs-form-text-margin-top: 0.25rem;
  --bs-form-text-font-size: var(--bs-font-size-sm);
  --bs-form-text-color: var(--bs-secondary-color);

  /* --- Navbar --- */
  --bs-navbar-padding-y: 1rem;
  --bs-navbar-padding-x: 1rem;
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: var(--bs-body-color);
  --bs-navbar-brand-hover-color: var(--bs-body-color);
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);

  /* ==========================================================================
     BREAKPOINTS (Responsive)
     ========================================================================== */

  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

/* ============================================================================
   DARK MODE
   ============================================================================
   Documentación: https://getbootstrap.com/docs/5.3/customize/color-modes/
   ============================================================================ */

[data-bs-theme="dark"] {
  /* Indica al navegador usar esquema de color oscuro para elementos nativos */
  color-scheme: dark;

  /* ==========================================================================
     COLORES PRIMARIOS EN MODO OSCURO
     ========================================================================== */

  /* Primary: Golden Yellow (ajustado para dark mode) */
  --bs-primary: #f6a955; /* Ligeramente más brillante en dark */
  --bs-primary-rgb: 246, 169, 85;
  --bs-primary-text-emphasis: #fbd4ad; /* Texto claro */
  --bs-primary-bg-subtle: #74501c; /* Fondo oscuro */
  --bs-primary-border-subtle: #966425; /* Borde oscuro */

  /* Secondary: Verde Oliva (ajustado) */
  --bs-secondary: #6fa076; /* Más claro en dark */
  --bs-secondary-rgb: 111, 160, 118;
  --bs-secondary-text-emphasis: #dde8df;
  --bs-secondary-bg-subtle: #081011;
  --bs-secondary-border-subtle: #11201c;

  /* Success */
  --bs-success: #22c55e;
  --bs-success-rgb: 134, 210, 165;
  --bs-success-text-emphasis: #dcf4e3;
  --bs-success-bg-subtle: #15803d;
  --bs-success-border-subtle: #22c55e;

  /* Danger */
  --bs-danger: #dc2626;
  --bs-danger-rgb: 185, 28, 28;
  --bs-danger-text-emphasis: #fde8e8;
  --bs-danger-bg-subtle: #b91c1c;
  --bs-danger-border-subtle: #dc2626;

  /* Warning */
  --bs-warning: #fcd34d;
  --bs-warning-rgb: 252, 211, 77;
  --bs-warning-text-emphasis: #b45309;
  --bs-warning-bg-subtle: #fef3c7;
  --bs-warning-border-subtle: #d97706;

  /* Info */
  --bs-info: #1d4ed8;
  --bs-info-rgb: 147, 197, 253;
  --bs-info-text-emphasis: #dbeafe;
  --bs-info-bg-subtle: #1d4ed8;
  --bs-info-border-subtle: #2563eb;

  /* Purple en dark mode */
  --bs-purple: #a78bfa;
  --bs-purple-rgb: 167, 139, 250;
  --bs-purple-text-emphasis: #c4b5fd;
  --bs-purple-bg-subtle: rgba(124, 58, 237, 0.15);
  --bs-purple-border-subtle: #7c3aed;

  /* Light y Dark invertidos */
  --bs-light: #374151;
  --bs-light-rgb: 55, 65, 81;
  --bs-dark: #f8f9fa;
  --bs-dark-rgb: 248, 249, 250;

  /* Light sub-variants en dark mode */
  --bs-light-text-emphasis: #9ca3af;
  --bs-light-bg-subtle: #1f2937;
  --bs-light-border-subtle: #374151;

  /* Dark sub-variants en dark mode (dark becomes light in dark mode) */
  --bs-dark-text-emphasis: #f8f9fa;
  --bs-dark-bg-subtle: #f8f9fa;
  --bs-dark-border-subtle: #e3e5e7;

  /* ==========================================================================
     COLORES DE FONDO Y TEXTO (Dark Mode)
     ========================================================================== */

  --bs-body-color: #e3e5e7; /* Texto claro */
  --bs-body-color-rgb: 227, 229, 231;
  --bs-body-bg: #1f2937; /* Fondo oscuro */
  --bs-body-bg-rgb: 31, 41, 55;

  --bs-emphasis-color: #f8f9fa;
  --bs-emphasis-color-rgb: 248, 249, 250;

  --bs-secondary-color: #9ca3af;
  --bs-secondary-color-rgb: 156, 163, 175;
  --bs-secondary-bg: #374151;
  --bs-secondary-bg-rgb: 55, 65, 81;

  --bs-tertiary-color: #6a7076;
  --bs-tertiary-color-rgb: 106, 112, 118;
  --bs-tertiary-bg: #4b5563;
  --bs-tertiary-bg-rgb: 75, 85, 99;

  /* ==========================================================================
     ENLACES (Dark Mode)
     ========================================================================== */

  --bs-link-color: #fbd4ad; /* Enlaces más claros */
  --bs-link-color-rgb: 251, 212, 173;
  --bs-link-hover-color: #fdebd6;
  --bs-link-hover-color-rgb: 253, 235, 214;

  /* ==========================================================================
     BORDES (Dark Mode)
     ========================================================================== */

  --bs-border-color: #506066;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);

  /* ==========================================================================
     ALIAS RGB PARA COMPATIBILIDAD CON VARIABLES CUSTOM (--sc-color-*-rgb)
     ========================================================================== */

  /* Alias de colores RGB actualizados para dark mode */
  --sc-color-primary-rgb: var(--bs-primary-rgb);    /* 246, 169, 85 (más brillante) */
  --sc-color-secondary-rgb: var(--bs-secondary-rgb); /* 111, 160, 118 (más claro) */
  --sc-color-success-rgb: var(--bs-success-rgb);    /* 134, 210, 165 */
  --sc-color-danger-rgb: var(--bs-danger-rgb);      /* 248, 180, 180 */
  --sc-color-warning-rgb: var(--bs-warning-rgb);    /* 252, 211, 77 */
  --sc-color-info-rgb: var(--bs-info-rgb);          /* 147, 197, 253 */

  /* ==========================================================================
     FOCUS RING (Dark Mode)
     ========================================================================== */

  --bs-focus-ring-color: rgba(246, 169, 85, 0.4); /* Más visible en dark */

  /* ==========================================================================
     COMPONENTES EN DARK MODE
     ========================================================================== */

  /* Cards */
  --bs-card-bg: #374151;
  --bs-card-cap-bg: #4b5563;
  --bs-card-border-color: #4b5563;

  /* Tables */
  --bs-table-border-color: #4b5563;
  --bs-table-bg: #374151;
  --bs-table-hover-bg: #4b5563;
  --bs-table-cap-bg: #4b5563;

  /* List Group */
  --bs-list-group-bg: #374151;
  --bs-list-group-border-color: #4b5563;
  --bs-list-group-action-hover-bg: #4b5563;
  --bs-list-group-action-active-bg: #374151;

  /* Forms */
  --bs-form-label-color: #e3e5e7;
  --bs-form-text-color: #9ca3af;

  /* Navbar */
  --bs-navbar-brand-color: #f8f9fa;
  --bs-navbar-brand-hover-color: #ffffff;

  /* ==========================================================================
     COLORES FINANCIEROS EN DARK MODE
     ========================================================================== */

  --bs-financial-vigente: #86d2a5;
  --bs-financial-retraso: #fcd34d;
  --bs-financial-mora: #fde68a;
  --bs-financial-vencido: #fbd5d5;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS (Media Queries)
   ============================================================================ */

/* Pantallas pequeñas (móviles) */
@media (max-width: 767px) {
  :root,
  [data-bs-theme="light"],
  [data-bs-theme="dark"] {
    --bs-font-size-xs: 0.7rem;
    --bs-font-size-sm: 0.8rem;
    --bs-font-size-base: 0.9rem;
    --bs-font-size-md: 1rem;
    --bs-font-size-lg: 1.125rem;

    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
  }
}

/* Pantallas grandes (desktop) */
@media (min-width: 1200px) {
  :root,
  [data-bs-theme="light"],
  [data-bs-theme="dark"] {
    --bs-font-size-base: 1.125rem; /* 18px base más grande */
  }
}

/* ============================================================================
   BOTONES - Sobrescribir Bootstrap para usar variables CSS de SisCredi
   ============================================================================
   Bootstrap 5 compila los colores de botones con valores hexadecimales.
   Estos estilos fuerzan el uso de las variables CSS personalizadas.

   Compatibilidad: Chrome 90+, Firefox 88+, Safari 14.1+, Edge 90+
   ============================================================================ */

/* --- btn-primary: Botón sólido con fondo primary (Golden Yellow #f5a941) --- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d99235; /* --bs-primary oscurecido 15% */
  --bs-btn-hover-border-color: #cc892f; /* --bs-primary oscurecido 20% */
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cc892f; /* --bs-primary oscurecido 20% */
  --bs-btn-active-border-color: #bf802a; /* --bs-primary oscurecido 25% */
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* --- btn-outline-primary: Botón con borde primary --- */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* --- btn-secondary: Botón sólido con fondo secondary (Verde Oliva #43503b) --- */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #394432; /* --bs-secondary oscurecido 15% */
  --bs-btn-hover-border-color: #333d2d; /* --bs-secondary oscurecido 20% */
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #333d2d; /* --bs-secondary oscurecido 20% */
  --bs-btn-active-border-color: #2d3628; /* --bs-secondary oscurecido 25% */
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* --- btn-outline-secondary: Botón con borde secondary --- */
.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* --- btn-success: Botón sólido con fondo success (#22c55e) --- */
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1da750; /* --bs-success oscurecido 15% */
  --bs-btn-hover-border-color: #1a9d4b; /* --bs-success oscurecido 20% */
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1a9d4b;
  --bs-btn-active-border-color: #179345;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

/* --- btn-outline-success: Botón con borde success --- */
.btn-outline-success {
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-success);
  --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-disabled-color: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

/* --- btn-danger: Botón sólido con fondo danger (#dc3545) --- */
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b; /* --bs-danger oscurecido 15% */
  --bs-btn-hover-border-color: #b02a37; /* --bs-danger oscurecido 20% */
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

/* --- btn-outline-danger: Botón con borde danger --- */
.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

/* --- btn-warning: Botón sólido con fondo warning (#f59e0b) --- */
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d99235; /* --bs-warning oscurecido 15% */
  --bs-btn-hover-border-color: #cc892f; /* --bs-warning oscurecido 20% */
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cc892f;
  --bs-btn-active-border-color: #bf802a;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

/* --- btn-outline-warning: Botón con borde warning --- */
.btn-outline-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-color: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

/* --- btn-info: Botón sólido con fondo info (#3b82f6) --- */
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #326fd1; /* --bs-info oscurecido 15% */
  --bs-btn-hover-border-color: #2f68c5; /* --bs-info oscurecido 20% */
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2f68c5;
  --bs-btn-active-border-color: #2b61b9;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}

/* --- btn-outline-info: Botón con borde info --- */
.btn-outline-info {
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-info);
  --bs-btn-active-border-color: var(--bs-info);
  --bs-btn-disabled-color: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}

/* ============================================================================
   BOTONES - DARK MODE OVERRIDES
   ============================================================================
   En dark mode, --bs-success/--bs-danger/etc. cambian a tonos pastel
   (#86d2a5, #f8b4b4...) lo que hace que los botones sólidos luzcan
   deslavados con mal contraste de texto blanco.
   Se fuerzan colores vibrantes para mantener legibilidad.
   ============================================================================ */

/* Botones sólidos: mantener colores vibrantes en dark mode */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #f5a941;
  --bs-btn-border-color: #f5a941;
  --bs-btn-hover-bg: #d99235;
  --bs-btn-hover-border-color: #cc892f;
  --bs-btn-active-bg: #cc892f;
  --bs-btn-active-border-color: #bf802a;
  --bs-btn-disabled-bg: #f5a941;
  --bs-btn-disabled-border-color: #f5a941;
  --bs-btn-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-active-color: #000;
  --bs-btn-disabled-color: #000;
}

[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-bg: #6fa076;
  --bs-btn-border-color: #6fa076;
  --bs-btn-hover-bg: #5d8a63;
  --bs-btn-hover-border-color: #53795a;
  --bs-btn-active-bg: #53795a;
  --bs-btn-active-border-color: #496b50;
  --bs-btn-disabled-bg: #6fa076;
  --bs-btn-disabled-border-color: #6fa076;
}

[data-bs-theme="dark"] .btn-success {
  --bs-btn-bg: #22c55e;
  --bs-btn-border-color: #22c55e;
  --bs-btn-hover-bg: #1da750;
  --bs-btn-hover-border-color: #1a9d4b;
  --bs-btn-active-bg: #1a9d4b;
  --bs-btn-active-border-color: #179345;
  --bs-btn-disabled-bg: #22c55e;
  --bs-btn-disabled-border-color: #22c55e;
}

[data-bs-theme="dark"] .btn-danger {
  --bs-btn-bg: #ef4444;
  --bs-btn-border-color: #ef4444;
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-border-color: #c82020;
  --bs-btn-active-bg: #c82020;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-disabled-bg: #ef4444;
  --bs-btn-disabled-border-color: #ef4444;
}

[data-bs-theme="dark"] .btn-warning {
  --bs-btn-bg: #f59e0b;
  --bs-btn-border-color: #f59e0b;
  --bs-btn-hover-bg: #d08609;
  --bs-btn-hover-border-color: #c47e09;
  --bs-btn-active-bg: #c47e09;
  --bs-btn-active-border-color: #b87608;
  --bs-btn-disabled-bg: #f59e0b;
  --bs-btn-disabled-border-color: #f59e0b;
    --bs-btn-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-active-color: #000;
  --bs-btn-disabled-color: #000;
}

[data-bs-theme="dark"] .btn-info {
  --bs-btn-bg: #3b82f6;
  --bs-btn-border-color: #3b82f6;
  --bs-btn-hover-bg: #326fd1;
  --bs-btn-hover-border-color: #2f68c5;
  --bs-btn-active-bg: #2f68c5;
  --bs-btn-active-border-color: #2b61b9;
  --bs-btn-disabled-bg: #3b82f6;
  --bs-btn-disabled-border-color: #3b82f6;
}

/* Botones outline: heredan de var(--bs-primary/secondary/etc.) que ya se
   redefinen en [data-bs-theme="dark"]. Solo necesitamos ajustar hover/active
   colors para contraste adecuado en dark mode. */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-hover-color: #000;
  --bs-btn-active-color: #000;
}

[data-bs-theme="dark"] .btn-outline-warning {
  --bs-btn-hover-color: #000;
  --bs-btn-active-color: #000;
}

/* ============================================================================
   PAGINATION - Forzar --bs-secondary-bg como fondo de page-link
   ============================================================================
   Bootstrap CDN compila --bs-pagination-bg: var(--bs-body-bg) localmente.
   Igual que con tablas, debemos sobrescribir a nivel del componente.
   ============================================================================ */

.page-link {
  --bs-pagination-bg: var(--bs-secondary-bg);
  background-color: var(--bs-pagination-bg);
}

/* ============================================================================
   NAV-PILLS - Estilos para tabs de navegación en páginas de detalle
   ============================================================================ */

/* Línea base de los tabs - mismo estilo que <hr> */
.nav-tabs {
  border-bottom-color: var(--bs-card-border-color);
}

/* Nav-tabs con color primary */
.nav-tabs .nav-link.active,
.nav-tabs .show > .nav-link {
  color: var(--bs-primary);
  border-bottom: 2px solid var(--bs-primary);
  font-weight: 600;
}

/* Nav-link inactivo */
.nav-tabs .nav-link {
  color: var(--bs-secondary-color);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Nav-link hover */
.nav-tabs .nav-link:hover:not(.active) {
  color: var(--bs-primary);
}

/* Dark mode */
[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--bs-card-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .show > .nav-link {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}

/* ============================================================================
   TRANSICIÓN SUAVE DE TEMA
   ============================================================================
   Aplica una transición suave cuando se cambia entre modo claro y oscuro.
   Solo se activa durante el cambio de tema para no afectar rendimiento.
   ============================================================================ */

html.sc-theme-transitioning,
html.sc-theme-transitioning *,
html.sc-theme-transitioning *::before,
html.sc-theme-transitioning *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                opacity 0.3s ease !important;
}