/* ============================================
   DARK-MODE.CSS — Variables y ajustes de tema.
   ============================================ */

/* Transición suave al cambiar tema */
body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ============================================
   LIGHT MODE
   ============================================ */
[data-bs-theme="light"] {
    --bs-body-bg:                   #ffffff;
    --bs-body-bg-rgb:               255, 255, 255;
    --bs-body-color:                #111827;
    --bs-body-color-rgb:            17, 24, 39;
    --bs-secondary-color:           #6b7280;
    --bs-tertiary-bg:               #f3f4f6;
    --bs-secondary-bg:              #f9fafb;
    --bs-emphasis-color:            #111827;
    --bs-border-color:              #e5e7eb;
    --bs-border-color-translucent:  rgba(229, 231, 235, 0.5);
}

/* ============================================
   DARK MODE
   ============================================ */
[data-bs-theme="dark"] {
    /* Colores de marca en dark */
    --brand-heading:                #60a5fa;
    --brand-primary:                #3b82f6;
    --brand-primary-hover:          #2563eb;
    --brand-primary-subtle:         rgba(59, 130, 246, 0.15);
    --brand-accent:                 #60a5fa;

    /* Bootstrap primary en dark */
    --bs-primary:                   #3b82f6;
    --bs-primary-rgb:               59, 130, 246;
    --bs-link-color:                #60a5fa;
    --bs-link-color-rgb:            96, 165, 250;
    --bs-link-hover-color:          #93c5fd;
    --bs-link-hover-color-rgb:      147, 197, 253;

    /* Bootstrap body tokens — controlan la mayoría de componentes */
    --bs-body-bg:                   #0d1117;
    --bs-body-bg-rgb:               13, 17, 23;
    --bs-body-color:                #e5e7eb;
    --bs-body-color-rgb:            229, 231, 235;
    --bs-secondary-color:           #9ca3af;
    --bs-secondary-color-rgb:       156, 163, 175;
    --bs-emphasis-color:            #f9fafb;
    --bs-emphasis-color-rgb:        249, 250, 251;
    --bs-tertiary-bg:               #161b22;
    --bs-tertiary-bg-rgb:           22, 27, 34;
    --bs-secondary-bg:              #21262d;
    --bs-secondary-bg-rgb:          33, 38, 45;
    --bs-border-color:              #30363d;
    --bs-border-color-translucent:  rgba(48, 54, 61, 0.5);
}


/* ============================================
   FORM CONTROLS — focus en dark
   ============================================ */
[data-bs-theme="dark"] .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
    border-color: var(--brand-primary);
}

/* ============================================
   TABLAS
   ============================================ */
[data-bs-theme="dark"] .calc-table thead th {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* ============================================
   NAV LINKS — success / danger en dark
   ============================================ */
[data-bs-theme="dark"] .nav-link.bg-success-subtle:not(.active),
[data-bs-theme="dark"] .nav-link.bg-success:not(.active),
[data-bs-theme="dark"] .alert.alert-success {
    box-shadow: inset 0 0 0 1px var(--bs-success) !important;
    color: var(--bs-success-text-emphasis) !important;
}

[data-bs-theme="dark"] .nav-link.bg-danger-subtle:not(.active),
[data-bs-theme="dark"] .nav-link.bg-danger:not(.active) {
    box-shadow: inset 0 0 0 1px var(--bs-danger) !important;
    color: var(--bs-danger-text-emphasis) !important;
}

/* ============================================
   SOMBRAS EN DARK
   ============================================ */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .accordion,
[data-bs-theme="dark"] .metric-card {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .custom-card-hover:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   LIST GROUPS EN DARK
   ============================================ */
[data-bs-theme="dark"] .list-group-item {
    background-color: transparent;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .list-group-item:hover,
[data-bs-theme="dark"] .list-group-item:focus {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .list-group-item.text-primary {
    color: var(--brand-heading) !important;
}

/* ============================================
   EXPLANATION TEXT (SSE / AI tools)
   ============================================ */
.explanation-text {
    background-color: #f9fafb;
    color: #111827;
}

[data-bs-theme="dark"] .explanation-text {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}