/**
 * Metronic Integration Fixes
 * La paleta vive en style.bundle.css (Metronic 8).
 * Los botones/badges "light" del HTML se pintan sólidos (como el demo),
 * porque casi toda la app usa btn-light-* y se veían pastel.
 */

/* ===== CORRECCIÓN DE SÍMBOLOS Y AVATARS ===== */

.symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.symbol-circle .symbol-label {
    border-radius: 50%;
}

/* Fondo más gris para separar header blanco y cards */
[data-bs-theme="light"] {
    --bs-app-bg-color: #e9edf5;
    --bs-app-header-base-bg-color: #ffffff;
    --bs-app-header-base-box-shadow: 0 4px 16px rgba(15, 34, 58, 0.08);
    --bs-app-header-base-border-bottom: 1px solid var(--bs-gray-300);
}

[data-bs-theme="light"] body,
[data-bs-theme="light"] .app-default,
[data-bs-theme="light"] .app-page,
[data-bs-theme="light"] .app-wrapper,
[data-bs-theme="light"] .app-main,
[data-bs-theme="light"] .app-content {
    background-color: #e9edf5;
}

[data-bs-theme="light"] .app-header,
[data-bs-theme="light"] #kt_app_header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--bs-gray-300);
    box-shadow: 0 4px 16px rgba(15, 34, 58, 0.08);
}

[data-bs-theme="light"] .card {
    background-color: #ffffff;
    border: 1px solid var(--bs-gray-300);
    box-shadow: 0 6px 18px rgba(15, 34, 58, 0.06);
}

[data-bs-theme="light"] .card-flush {
    border: 1px solid var(--bs-gray-300);
    box-shadow: 0 6px 18px rgba(15, 34, 58, 0.06);
}

[data-bs-theme="dark"] {
    --bs-app-header-base-border-bottom: 1px solid var(--bs-gray-800);
}

[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] #kt_app_header {
    background-color: var(--bs-app-header-base-bg-color, #0D0E12) !important;
    border-bottom: 1px solid var(--bs-gray-800);
}

/* ===== BOTONES LIGHT → SÓLIDOS (colores vivos) ===== */

.btn.btn-light-primary,
.btn.btn-light-success,
.btn.btn-light-info,
.btn.btn-light-warning,
.btn.btn-light-danger,
.btn.btn-light-dark {
    color: #ffffff !important;
}

.btn.btn-light-primary i,
.btn.btn-light-primary .ki-duotone,
.btn.btn-light-success i,
.btn.btn-light-success .ki-duotone,
.btn.btn-light-info i,
.btn.btn-light-info .ki-duotone,
.btn.btn-light-warning i,
.btn.btn-light-warning .ki-duotone,
.btn.btn-light-danger i,
.btn.btn-light-danger .ki-duotone,
.btn.btn-light-dark i,
.btn.btn-light-dark .ki-duotone {
    color: #ffffff !important;
}

.btn.btn-light-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:active:not(.btn-active),
.btn.btn-light-primary.active {
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
    color: #ffffff !important;
}

.btn.btn-light-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

.btn.btn-light-success:hover:not(.btn-active),
.btn.btn-light-success:focus:not(.btn-active),
.btn.btn-light-success:active:not(.btn-active),
.btn.btn-light-success.active {
    background-color: var(--bs-success-active) !important;
    border-color: var(--bs-success-active) !important;
    color: #ffffff !important;
}

.btn.btn-light-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}

.btn.btn-light-info:hover:not(.btn-active),
.btn.btn-light-info:focus:not(.btn-active),
.btn.btn-light-info:active:not(.btn-active),
.btn.btn-light-info.active {
    background-color: var(--bs-info-active) !important;
    border-color: var(--bs-info-active) !important;
    color: #ffffff !important;
}

.btn.btn-light-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}

.btn.btn-light-warning:hover:not(.btn-active),
.btn.btn-light-warning:focus:not(.btn-active),
.btn.btn-light-warning:active:not(.btn-active),
.btn.btn-light-warning.active {
    background-color: var(--bs-warning-active) !important;
    border-color: var(--bs-warning-active) !important;
    color: #ffffff !important;
}

.btn.btn-light-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

.btn.btn-light-danger:hover:not(.btn-active),
.btn.btn-light-danger:focus:not(.btn-active),
.btn.btn-light-danger:active:not(.btn-active),
.btn.btn-light-danger.active {
    background-color: var(--bs-danger-active) !important;
    border-color: var(--bs-danger-active) !important;
    color: #ffffff !important;
}

.btn.btn-light-dark {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

.btn.btn-light-dark:hover:not(.btn-active),
.btn.btn-light-dark:focus:not(.btn-active),
.btn.btn-light-dark:active:not(.btn-active),
.btn.btn-light-dark.active {
    background-color: var(--bs-dark-active, #111318) !important;
    border-color: var(--bs-dark-active, #111318) !important;
    color: #ffffff !important;
}

/* Texto blanco en botones sólidos (Bootstrap 5.3 los deja en negro por contraste) */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-info,
.btn.btn-warning,
.btn.btn-danger,
.btn.btn-dark {
    --bs-btn-color: #ffffff;
    color: #ffffff;
}

.btn.btn-primary i,
.btn.btn-primary .ki-duotone,
.btn.btn-success i,
.btn.btn-success .ki-duotone,
.btn.btn-info i,
.btn.btn-info .ki-duotone,
.btn.btn-warning i,
.btn.btn-warning .ki-duotone,
.btn.btn-danger i,
.btn.btn-danger .ki-duotone,
.btn.btn-dark i,
.btn.btn-dark .ki-duotone {
    color: #ffffff;
}

/* ===== BADGES LIGHT → SÓLIDOS ===== */

.badge.badge-light-primary,
.badge-light-primary {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.badge.badge-light-success,
.badge-light-success {
    background-color: var(--bs-success) !important;
    color: #ffffff !important;
}

.badge.badge-light-info,
.badge-light-info {
    background-color: var(--bs-info) !important;
    color: #ffffff !important;
}

.badge.badge-light-warning,
.badge-light-warning {
    background-color: var(--bs-warning) !important;
    color: #ffffff !important;
}

.badge.badge-light-danger,
.badge-light-danger {
    background-color: var(--bs-danger) !important;
    color: #ffffff !important;
}

.badge.badge-light-dark,
.badge-light-dark {
    background-color: var(--bs-dark) !important;
    color: #ffffff !important;
}

/* ===== RESPONSIVE ICONS ===== */

@media (max-width: 991.98px) {
    .ki-duotone {
        font-size: inherit !important;
    }
}