/**
 * ====================================================================
 * AbiPilot / fmTuAgenteIA - Universal Dark Mode Stylesheet (darkmode.css)
 * High-performance, modern dark theme for all .razor views and components.
 * ====================================================================
 */

/* ====================================================================
   1. CSS Variables & Theme Foundation
   ==================================================================== */
:root {
    --bg-body-light: #f8fafc;
    --bg-card-light: #ffffff;
    --border-light: #e2e8f0;
    --text-primary-light: #1e293b;
    --text-muted-light: #64748b;

    /* Bootstrap 5.1 Native Variables: In Bootstrap 5.1, --bs-body-rgb is the text color RGB (used by .text-body), NOT the background RGB. */
    --bs-body-bg: #f8fafc;
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-body-color: #1e293b;
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-rgb: 30, 41, 59; /* Critical: In Bootstrap 5.1, .text-body uses rgba(var(--bs-body-rgb)) */
    --bs-card-bg: #ffffff;
    --bs-card-color: #1e293b;
    --bs-card-border-color: #e2e8f0;
    --bs-secondary-bg: #f8fafc;
    --bs-secondary-bg-rgb: 248, 250, 252;
    --bs-tertiary-bg: #f1f5f9;
    --bs-tertiary-bg-rgb: 241, 245, 249;
    --bs-border-color: #e2e8f0;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.08);
}

/* Universal Light Theme polyfills for Bootstrap 5.3 utilities in BS 5.1 */
.bg-body {
    background-color: var(--bs-body-bg, #ffffff) !important;
    color: var(--bs-body-color, #1e293b) !important;
}

.bg-body-secondary {
    background-color: var(--bs-secondary-bg, #f8fafc) !important;
    color: var(--bs-body-color, #1e293b) !important;
}

.bg-body-tertiary {
    background-color: var(--bs-tertiary-bg, #f1f5f9) !important;
    color: var(--bs-body-color, #1e293b) !important;
}

.border-secondary-subtle {
    border-color: var(--bs-border-color, #e2e8f0) !important;
}

.text-body {
    color: var(--bs-body-color, #1e293b) !important;
}

.text-body-emphasis {
    color: #0f172a !important;
}

.text-body-secondary {
    color: var(--text-muted-light, #64748b) !important;
}

.text-muted {
    color: var(--text-muted-light, #64748b) !important;
}

[data-theme="dark"],
[data-bs-theme="dark"],
body.dark-mode-active,
.dark-theme {
    --bg-app-deep: #0b0f19;
    --bg-body-dark: #0f172a;
    --bg-card-dark: #1e293b;
    --bg-card-surface: #182234;
    --bg-card-hover: #243247;
    --bg-input-dark: #0b1120;
    --bg-input-focus: #0f172a;
    --bg-header-dark: #0f172a;
    --border-dark: #334155;
    --border-dark-subtle: #1e293b;
    --border-dark-highlight: #475569;
    --text-primary-dark: #f8fafc;
    --text-secondary-dark: #cbd5e1;
    --text-muted-dark: #94a3b8;
    --text-dim-dark: #64748b;
    --accent-indigo: #6366f1;
    --accent-indigo-glow: rgba(99, 102, 241, 0.25);
    --shadow-dark: rgba(0, 0, 0, 0.5);
    --shadow-dark-lg: rgba(0, 0, 0, 0.7);

    /* Bootstrap 5 Native Variable Overrides */
    --bs-body-bg: var(--bg-body-dark);
    --bs-body-color: var(--text-primary-dark);
    --bs-body-color-rgb: 248, 250, 252;
    --bs-body-bg-rgb: 15, 23, 42;
    --bs-body-rgb: 248, 250, 252; /* Bootstrap 5.1 text color RGB */
    --bs-card-bg: var(--bg-card-dark);
    --bs-card-color: var(--text-primary-dark);
    --bs-card-border-color: var(--border-dark);
    --bs-border-color: var(--border-dark);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-tertiary-bg: var(--bg-card-hover);
    --bs-secondary-bg: var(--bg-card-surface);
    --bs-secondary-color: var(--text-muted-dark);
}

/* ====================================================================
   2. Core Layout & Page Containers
   ==================================================================== */
[data-theme="dark"] body,
body.dark-mode-active {
    background-color: var(--bg-body-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .main-content-wrapper,
body.dark-mode-active .main-content-wrapper,
[data-theme="dark"] main,
body.dark-mode-active main,
[data-theme="dark"] article.content,
body.dark-mode-active article.content {
    background-color: var(--bg-body-dark);
    color: var(--text-primary-dark);
}

/* Topbar Sticky Header */
[data-theme="dark"] .top-row,
body.dark-mode-active .top-row {
    background-color: var(--bg-header-dark) !important;
    border-bottom: 1px solid var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .page-topbar-title,
body.dark-mode-active .page-topbar-title {
    color: var(--text-primary-dark) !important;
}

/* Mobile Menu Toggle & Icons in Topbar */
[data-theme="dark"] .top-row .mobile-menu-toggle,
body.dark-mode-active .top-row .mobile-menu-toggle,
[data-theme="dark"] .top-row .btn-link,
body.dark-mode-active .top-row .btn-link {
    color: var(--text-primary-dark) !important;
}

/* ====================================================================
   3. Cards, Surfaces, Panels & Boxes
   ==================================================================== */
[data-theme="dark"] .card,
body.dark-mode-active .card {
    background-color: var(--bg-card-dark) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
    box-shadow: 0 4px 12px var(--shadow-dark) !important;
}

[data-theme="dark"] .card-body,
body.dark-mode-active .card-body {
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .card-header,
body.dark-mode-active .card-header {
    background-color: var(--bg-card-surface) !important;
    border-bottom: 1px solid var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .card-footer,
body.dark-mode-active .card-footer {
    background-color: var(--bg-card-surface) !important;
    border-top: 1px solid var(--border-dark) !important;
    color: var(--text-secondary-dark) !important;
}

/* Bootstrap .bg-white and .bg-light Overrides */
[data-theme="dark"] .bg-white,
body.dark-mode-active .bg-white {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .bg-light,
body.dark-mode-active .bg-light {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-secondary-dark) !important;
}

[data-theme="dark"] .bg-body,
body.dark-mode-active .bg-body {
    background-color: var(--bg-body-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .bg-body-secondary,
body.dark-mode-active .bg-body-secondary {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .bg-body-tertiary,
body.dark-mode-active .bg-body-tertiary {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .border-secondary-subtle,
body.dark-mode-active .border-secondary-subtle {
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .text-body-secondary,
body.dark-mode-active .text-body-secondary {
    color: var(--text-muted-dark) !important;
}

/* ====================================================================
   4. Typography & Text Overrides
   ==================================================================== */
[data-theme="dark"] .text-dark,
body.dark-mode-active .text-dark,
[data-theme="dark"] .text-body,
body.dark-mode-active .text-body {
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .text-muted,
body.dark-mode-active .text-muted,
[data-theme="dark"] .text-secondary,
body.dark-mode-active .text-secondary {
    color: var(--text-muted-dark) !important;
}

[data-theme="dark"] .text-black-50,
body.dark-mode-active .text-black-50 {
    color: var(--text-secondary-dark) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
body.dark-mode-active h1, body.dark-mode-active h2, body.dark-mode-active h3,
body.dark-mode-active h4, body.dark-mode-active h5, body.dark-mode-active h6 {
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] code,
body.dark-mode-active code {
    background-color: var(--bg-input-dark) !important;
    color: #a5b4fc !important;
    border: 1px solid var(--border-dark) !important;
    padding: 0.15rem 0.35rem;
    border-radius: 0.375rem;
}

[data-theme="dark"] pre,
body.dark-mode-active pre {
    background-color: var(--bg-input-dark) !important;
    color: #e2e8f0 !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 0.5rem;
}

[data-theme="dark"] hr,
body.dark-mode-active hr {
    border-color: var(--border-dark) !important;
    opacity: 0.4;
}

/* ====================================================================
   5. Tabs, Nav Pills & Sub-navs (Site Settings, Billing, Workflow)
   ==================================================================== */
[data-theme="dark"] .settings-nav-container,
body.dark-mode-active .settings-nav-container {
    background-color: var(--bg-card-surface) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .settings-nav,
body.dark-mode-active .settings-nav {
    background-color: var(--bg-card-surface) !important;
}

[data-theme="dark"] .settings-nav .nav-link:not(.active),
body.dark-mode-active .settings-nav .nav-link:not(.active) {
    color: var(--text-muted-dark) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

[data-theme="dark"] .settings-nav .nav-link:not(.active):hover,
body.dark-mode-active .settings-nav .nav-link:not(.active):hover {
    background-color: var(--bg-card-dark) !important;
    color: #ffffff !important;
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .settings-nav .nav-link.active,
body.dark-mode-active .settings-nav .nav-link.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
}

/* Generic Nav Pills & Tabs */
[data-theme="dark"] .nav-pills,
body.dark-mode-active .nav-pills {
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .nav-pills.bg-white,
body.dark-mode-active .nav-pills.bg-white {
    background-color: var(--bg-card-surface) !important;
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .nav-pills .nav-link:not(.active),
body.dark-mode-active .nav-pills .nav-link:not(.active) {
    color: var(--text-muted-dark);
}

[data-theme="dark"] .nav-pills .nav-link:not(.active):hover,
body.dark-mode-active .nav-pills .nav-link:not(.active):hover {
    color: var(--text-primary-dark);
    background-color: var(--bg-card-hover);
}

[data-theme="dark"] .nav-tabs,
body.dark-mode-active .nav-tabs {
    border-bottom-color: var(--border-dark) !important;
}

[data-theme="dark"] .nav-tabs .nav-link,
body.dark-mode-active .nav-tabs .nav-link {
    color: var(--text-muted-dark);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover,
body.dark-mode-active .nav-tabs .nav-link:hover {
    color: var(--text-primary-dark);
    border-color: var(--border-dark) var(--border-dark) transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active,
body.dark-mode-active .nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: var(--bg-card-dark) !important;
    border-color: var(--border-dark) var(--border-dark) var(--bg-card-dark) !important;
}

/* ====================================================================
   6. Tables, Grids & Data Lists
   ==================================================================== */
[data-theme="dark"] .table,
body.dark-mode-active .table {
    color: var(--text-secondary-dark) !important;
    border-color: var(--border-dark) !important;
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .table thead,
body.dark-mode-active .table thead,
[data-theme="dark"] thead.table-light,
body.dark-mode-active thead.table-light,
[data-theme="dark"] .table-light,
body.dark-mode-active .table-light {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-secondary-dark) !important;
    border-bottom: 2px solid var(--border-dark) !important;
}

[data-theme="dark"] .table thead th,
body.dark-mode-active .table thead th,
[data-theme="dark"] thead.table-light th,
body.dark-mode-active thead.table-light th {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-secondary-dark) !important;
    border-color: var(--border-dark) !important;
    font-weight: 600;
}

[data-theme="dark"] .table tbody tr,
body.dark-mode-active .table tbody tr {
    border-bottom-color: var(--border-dark) !important;
}

[data-theme="dark"] .table tbody td,
body.dark-mode-active .table tbody td {
    color: var(--text-secondary-dark) !important;
    border-bottom-color: var(--border-dark) !important;
    background-color: transparent;
}

[data-theme="dark"] .table-hover tbody tr:hover,
body.dark-mode-active .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover td,
body.dark-mode-active .table-hover tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.035) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td,
body.dark-mode-active .table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(255, 255, 255, 0.015);
}

[data-theme="dark"] .table-bordered,
body.dark-mode-active .table-bordered,
[data-theme="dark"] .table-bordered td,
body.dark-mode-active .table-bordered td,
[data-theme="dark"] .table-bordered th,
body.dark-mode-active .table-bordered th {
    border-color: var(--border-dark) !important;
}

/* ====================================================================
   7. Form Controls, Inputs, Selects & Switches
   ==================================================================== */
[data-theme="dark"] .form-control,
body.dark-mode-active .form-control,
[data-theme="dark"] .form-select,
body.dark-mode-active .form-select {
    background-color: var(--bg-input-dark) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: none;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
body.dark-mode-active input[type="date"],
body.dark-mode-active input[type="time"],
body.dark-mode-active input[type="datetime-local"],
body.dark-mode-active input[type="month"] {
    color-scheme: dark;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
body.dark-mode-active input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode-active input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.dark-mode-active input[type="month"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2360a5fa' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
}

[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode-active input[type="time"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2360a5fa' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator:hover,
body.dark-mode-active input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.dark-mode-active input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
body.dark-mode-active input[type="month"]::-webkit-calendar-picker-indicator:hover,
body.dark-mode-active input[type="time"]::-webkit-calendar-picker-indicator:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
    transform: scale(1.15);
}

[data-theme="dark"] .form-control:focus,
body.dark-mode-active .form-control:focus,
[data-theme="dark"] .form-select:focus,
body.dark-mode-active .form-select:focus {
    background-color: var(--bg-input-focus) !important;
    color: var(--text-primary-dark) !important;
    border-color: var(--accent-indigo) !important;
    box-shadow: 0 0 0 0.25rem var(--accent-indigo-glow) !important;
}

[data-theme="dark"] .form-control::placeholder,
body.dark-mode-active .form-control::placeholder {
    color: var(--text-dim-dark) !important;
}

[data-theme="dark"] .form-control:disabled,
body.dark-mode-active .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
body.dark-mode-active .form-control[readonly] {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-muted-dark) !important;
}

[data-theme="dark"] .input-group-text,
body.dark-mode-active .input-group-text {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-secondary-dark) !important;
    border: 1px solid var(--border-dark) !important;
}

[data-theme="dark"] .form-check-input,
body.dark-mode-active .form-check-input {
    background-color: var(--bg-input-dark);
    border-color: var(--border-dark-highlight);
}

[data-theme="dark"] .form-check-input:checked,
body.dark-mode-active .form-check-input:checked {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

[data-theme="dark"] .form-check-label,
body.dark-mode-active .form-check-label,
[data-theme="dark"] .form-label,
body.dark-mode-active .form-label {
    color: var(--text-secondary-dark) !important;
}

/* ====================================================================
   8. Modals, Popovers & Dialogs
   ==================================================================== */
[data-theme="dark"] .modal-content,
body.dark-mode-active .modal-content {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 25px 50px -12px var(--shadow-dark-lg) !important;
}

[data-theme="dark"] .modal-header,
body.dark-mode-active .modal-header {
    background-color: var(--bg-card-surface) !important;
    border-bottom: 1px solid var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .modal-footer,
body.dark-mode-active .modal-footer {
    background-color: var(--bg-card-surface) !important;
    border-top: 1px solid var(--border-dark) !important;
    color: var(--text-secondary-dark) !important;
}

[data-theme="dark"] .modal-body,
body.dark-mode-active .modal-body {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-secondary-dark) !important;
}

[data-theme="dark"] .modal-header .btn-close,
body.dark-mode-active .modal-header .btn-close,
[data-theme="dark"] .btn-close,
body.dark-mode-active .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .popover,
body.dark-mode-active .popover {
    background-color: var(--bg-card-dark) !important;
    border: 1px solid var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
    box-shadow: 0 10px 25px var(--shadow-dark);
}

[data-theme="dark"] .popover-header,
body.dark-mode-active .popover-header {
    background-color: var(--bg-card-surface) !important;
    border-bottom: 1px solid var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .popover-body,
body.dark-mode-active .popover-body {
    color: var(--text-secondary-dark) !important;
}

/* ====================================================================
   9. Dropdowns & Menus
   ==================================================================== */
[data-theme="dark"] .dropdown-menu,
body.dark-mode-active .dropdown-menu {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 15px 30px var(--shadow-dark-lg) !important;
}

[data-theme="dark"] .dropdown-item,
body.dark-mode-active .dropdown-item {
    color: var(--text-secondary-dark) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
body.dark-mode-active .dropdown-item:hover,
body.dark-mode-active .dropdown-item:focus {
    background-color: var(--bg-card-hover) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .dropdown-item.active,
body.dark-mode-active .dropdown-item.active {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .dropdown-divider,
body.dark-mode-active .dropdown-divider {
    border-top: 1px solid var(--border-dark) !important;
}

[data-theme="dark"] .dropdown-header,
body.dark-mode-active .dropdown-header {
    color: var(--text-muted-dark) !important;
}

/* ====================================================================
   10. Badges, Alerts, Toasts & Notifications
   ==================================================================== */
[data-theme="dark"] .badge.bg-light,
body.dark-mode-active .badge.bg-light {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-secondary-dark) !important;
    border: 1px solid var(--border-dark) !important;
}

[data-theme="dark"] .badge.bg-white,
body.dark-mode-active .badge.bg-white {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-dark) !important;
}

[data-theme="dark"] .badge.bg-secondary.bg-opacity-10,
body.dark-mode-active .badge.bg-secondary.bg-opacity-10 {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: var(--text-secondary-dark) !important;
}

[data-theme="dark"] .badge.bg-primary.bg-opacity-10,
body.dark-mode-active .badge.bg-primary.bg-opacity-10 {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

[data-theme="dark"] .badge.bg-success.bg-opacity-10,
body.dark-mode-active .badge.bg-success.bg-opacity-10 {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .badge.bg-danger.bg-opacity-10,
body.dark-mode-active .badge.bg-danger.bg-opacity-10 {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .badge.bg-warning.bg-opacity-10,
body.dark-mode-active .badge.bg-warning.bg-opacity-10 {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fde68a !important;
}

[data-theme="dark"] .badge.bg-info.bg-opacity-10,
body.dark-mode-active .badge.bg-info.bg-opacity-10 {
    background-color: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
}

/* Alerts */
[data-theme="dark"] .alert,
body.dark-mode-active .alert {
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .alert-info,
body.dark-mode-active .alert-info {
    background-color: rgba(6, 182, 212, 0.12) !important;
    color: #67e8f9 !important;
    border-color: rgba(6, 182, 212, 0.25) !important;
}

[data-theme="dark"] .alert-success,
body.dark-mode-active .alert-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .alert-warning,
body.dark-mode-active .alert-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #fde68a !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .alert-danger,
body.dark-mode-active .alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

/* Toasts */
[data-theme="dark"] .toast,
body.dark-mode-active .toast {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 10px 25px var(--shadow-dark) !important;
}

[data-theme="dark"] .toast-header,
body.dark-mode-active .toast-header {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-primary-dark) !important;
    border-bottom: 1px solid var(--border-dark) !important;
}

/* ====================================================================
   11. Accordions, List Groups & Lists
   ==================================================================== */
[data-theme="dark"] .accordion-item,
body.dark-mode-active .accordion-item {
    background-color: var(--bg-card-dark) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .accordion-button,
body.dark-mode-active .accordion-button {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-primary-dark) !important;
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed),
body.dark-mode-active .accordion-button:not(.collapsed) {
    background-color: var(--bg-card-surface) !important;
    color: #818cf8 !important;
    box-shadow: inset 0 -1px 0 var(--border-dark);
}

[data-theme="dark"] .accordion-button::after,
body.dark-mode-active .accordion-button::after {
    filter: invert(1) grayscale(100%);
}

[data-theme="dark"] .list-group-item,
body.dark-mode-active .list-group-item {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-primary-dark) !important;
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .list-group-item:hover,
body.dark-mode-active .list-group-item:hover {
    background-color: var(--bg-card-hover) !important;
}

[data-theme="dark"] .list-group-item.active,
body.dark-mode-active .list-group-item.active {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
}

/* ====================================================================
   12. Buttons & Interactivity
   ==================================================================== */
[data-theme="dark"] .btn-outline-primary,
body.dark-mode-active .btn-outline-primary {
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus,
[data-theme="dark"] .btn-outline-primary:active,
body.dark-mode-active .btn-outline-primary:hover,
body.dark-mode-active .btn-outline-primary:focus,
body.dark-mode-active .btn-outline-primary:active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

[data-theme="dark"] .btn-outline-success,
body.dark-mode-active .btn-outline-success {
    color: #86efac !important;
    border-color: #22c55e !important;
    background-color: rgba(34, 197, 94, 0.08) !important;
}

[data-theme="dark"] .btn-outline-success:hover,
body.dark-mode-active .btn-outline-success:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-info,
body.dark-mode-active .btn-outline-info {
    color: #67e8f9 !important;
    border-color: #06b6d4 !important;
    background-color: rgba(6, 182, 212, 0.08) !important;
}

[data-theme="dark"] .btn-outline-secondary,
body.dark-mode-active .btn-outline-secondary {
    color: var(--text-secondary-dark) !important;
    border-color: var(--border-dark-highlight) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover,
body.dark-mode-active .btn-outline-secondary:hover {
    background-color: var(--bg-card-hover) !important;
    color: #ffffff !important;
    border-color: var(--text-muted-dark) !important;
}

[data-theme="dark"] .btn-outline-dark,
body.dark-mode-active .btn-outline-dark {
    color: var(--text-primary-dark) !important;
    border-color: var(--border-dark-highlight) !important;
}

[data-theme="dark"] .btn-outline-dark:hover,
body.dark-mode-active .btn-outline-dark:hover {
    background-color: var(--border-dark-highlight) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-light,
body.dark-mode-active .btn-light {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-primary-dark) !important;
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .btn-light:hover,
body.dark-mode-active .btn-light:hover {
    background-color: var(--bg-card-hover) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-close,
body.dark-mode-active .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ====================================================================
   13. Borders & Shadows Universal Overrides
   ==================================================================== */
[data-theme="dark"] .border,
body.dark-mode-active .border {
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .border-top,
body.dark-mode-active .border-top {
    border-top-color: var(--border-dark) !important;
}

[data-theme="dark"] .border-bottom,
body.dark-mode-active .border-bottom {
    border-bottom-color: var(--border-dark) !important;
}

[data-theme="dark"] .border-start,
body.dark-mode-active .border-start {
    border-left-color: var(--border-dark) !important;
}

[data-theme="dark"] .border-end,
body.dark-mode-active .border-end {
    border-right-color: var(--border-dark) !important;
}

[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xs,
body.dark-mode-active .shadow-sm,
body.dark-mode-active .shadow,
body.dark-mode-active .shadow-lg,
body.dark-mode-active .shadow-xs {
    box-shadow: 0 4px 14px var(--shadow-dark) !important;
}

/* ====================================================================
   14. Specialized Component Overrides (Kanban, CRM, WebBuilder, AI)
   ==================================================================== */

/* Kanban Columns & Cards (TicketBoard / CRM) */
[data-theme="dark"] .kanban-column,
body.dark-mode-active .kanban-column {
    background-color: var(--bg-card-surface) !important;
    border-color: var(--border-dark) !important;
}

[data-theme="dark"] .kanban-card,
body.dark-mode-active .kanban-card {
    background-color: var(--bg-card-dark) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .kanban-card:hover,
body.dark-mode-active .kanban-card:hover {
    background-color: var(--bg-card-hover) !important;
}

/* Chat & Live AI Messages */
[data-theme="dark"] .chat-message-inbound,
body.dark-mode-active .chat-message-inbound {
    background-color: var(--bg-card-surface) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-dark) !important;
}

[data-theme="dark"] .chat-message-outbound,
body.dark-mode-active .chat-message-outbound {
    background-color: #3730a3 !important;
    color: #ffffff !important;
}

/* AI Assistant Prompt Input Container */
[data-theme="dark"] .chat-input-container,
body.dark-mode-active .chat-input-container {
    background-color: var(--bg-card-surface) !important;
    border-top: 1px solid var(--border-dark) !important;
}

/* File Upload & Dropzones */
[data-theme="dark"] .dropzone,
body.dark-mode-active .dropzone,
[data-theme="dark"] .upload-dropzone,
body.dark-mode-active .upload-dropzone {
    background-color: var(--bg-card-surface) !important;
    border-color: var(--border-dark-highlight) !important;
    color: var(--text-secondary-dark) !important;
}

[data-theme="dark"] .dropzone:hover,
body.dark-mode-active .dropzone:hover {
    border-color: var(--accent-indigo) !important;
    background-color: var(--bg-card-hover) !important;
}

/* Status Badges & Pills */
[data-theme="dark"] .status-pill,
body.dark-mode-active .status-pill {
    border-color: var(--border-dark) !important;
}

/* ====================================================================
   15. Pagination & Navigation Controls
   ==================================================================== */
[data-theme="dark"] .pagination,
body.dark-mode-active .pagination {
    --bs-pagination-bg: var(--bg-card-surface);
    --bs-pagination-border-color: var(--border-dark);
    --bs-pagination-color: var(--text-secondary-dark);
    --bs-pagination-hover-bg: var(--bg-card-hover);
    --bs-pagination-hover-color: #ffffff;
    --bs-pagination-hover-border-color: var(--border-dark-highlight);
    --bs-pagination-active-bg: #4f46e5;
    --bs-pagination-active-border-color: #4f46e5;
    --bs-pagination-disabled-bg: rgba(0, 0, 0, 0.2);
    --bs-pagination-disabled-color: var(--text-dim-dark);
    --bs-pagination-disabled-border-color: var(--border-dark);
}

[data-theme="dark"] .page-link,
body.dark-mode-active .page-link {
    background-color: var(--bg-card-surface) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-secondary-dark) !important;
}

[data-theme="dark"] .page-link:hover,
body.dark-mode-active .page-link:hover {
    background-color: var(--bg-card-hover) !important;
    color: #ffffff !important;
    border-color: var(--border-dark-highlight) !important;
}

[data-theme="dark"] .page-item.active .page-link,
body.dark-mode-active .page-item.active .page-link {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .page-item.disabled .page-link,
body.dark-mode-active .page-item.disabled .page-link {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-dim-dark) !important;
}

/* ====================================================================
   16. Tooltips, Popovers & Floating Widgets
   ==================================================================== */
[data-theme="dark"] .tooltip-inner,
body.dark-mode-active .tooltip-inner {
    background-color: var(--bg-card-dark) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 8px 16px var(--shadow-dark);
}

[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
body.dark-mode-active .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--bg-card-dark) !important;
}

[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
body.dark-mode-active .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--bg-card-dark) !important;
}

/* ====================================================================
   17. Sleek Custom Scrollbars in Dark Mode
   ==================================================================== */
[data-theme="dark"] ::-webkit-scrollbar,
body.dark-mode-active ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark-mode-active ::-webkit-scrollbar-track {
    background: var(--bg-app-deep);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark-mode-active ::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
body.dark-mode-active ::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark-highlight);
}

/* ====================================================================
   18. Inline Style Attribute Selectors (Catch-all for hardcoded colors)
   ==================================================================== */
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"],
body.dark-mode-active [style*="background-color: #fff"],
body.dark-mode-active [style*="background-color:#fff"],
body.dark-mode-active [style*="background-color: #ffffff"],
body.dark-mode-active [style*="background-color:#ffffff"],
body.dark-mode-active [style*="background: #fff"],
body.dark-mode-active [style*="background:#fff"],
body.dark-mode-active [style*="background: #ffffff"],
body.dark-mode-active [style*="background:#ffffff"] {
    background-color: var(--bg-card-dark) !important;
}

[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8f9fa"],
[data-theme="dark"] [style*="background-color: #f1f5f9"],
[data-theme="dark"] [style*="background-color:#f1f5f9"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"],
body.dark-mode-active [style*="background-color: #f8f9fa"],
body.dark-mode-active [style*="background-color:#f8f9fa"],
body.dark-mode-active [style*="background-color: #f1f5f9"],
body.dark-mode-active [style*="background-color:#f1f5f9"],
body.dark-mode-active [style*="background: #f8f9fa"],
body.dark-mode-active [style*="background:#f8f9fa"] {
    background-color: var(--bg-card-surface) !important;
}

[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color:#212529"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: black"],
body.dark-mode-active [style*="color: #212529"],
body.dark-mode-active [style*="color:#212529"],
body.dark-mode-active [style*="color: #000"],
body.dark-mode-active [style*="color:#000"],
body.dark-mode-active [style*="color: black"] {
    color: var(--text-primary-dark) !important;
}

/* ====================================================================
   16. WebBuilder AI - Created Website & Preview Dark Mode Styling
   Garantiza un cambio de tema oscuro/claro 100% integral en sitios generados por WebBuilder
   sin afectar en absoluto a abipilot.com ni al resto de la plataforma.
   ==================================================================== */
.website-container.web-dark-theme,
[data-theme="dark"] .website-container,
[data-bs-theme="dark"] .website-container {
    --bs-body-bg: #0f172a;
    --bs-body-color: #f8fafc;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-color: #64748b;
    --bs-secondary-bg: #1e293b;
    --bs-tertiary-bg: #334155;
    --bs-border-color: #334155;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

.website-container.web-light-theme {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Áreas Principales y Contenedores */
.website-container.web-dark-theme main,
.website-container.web-dark-theme #dynamic-content,
.website-container.web-dark-theme #dynamic-content-part1,
.website-container.web-dark-theme #dynamic-content-part2,
[data-theme="dark"] .website-container #dynamic-content {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

.website-container.web-dark-theme section,
.website-container.web-dark-theme header:not(.navbar) {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Secciones Alternadas y Utilidades de Fondo */
.website-container.web-dark-theme section:nth-of-type(even),
.website-container.web-dark-theme section.bg-light,
.website-container.web-dark-theme div.bg-light,
.website-container.web-dark-theme .bg-light,
.website-container.web-dark-theme .bg-body-secondary,
.website-container.web-dark-theme .bg-body-tertiary,
[data-theme="dark"] .website-container section.bg-light,
[data-theme="dark"] .website-container div.bg-light {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

.website-container.web-dark-theme section.bg-white,
.website-container.web-dark-theme div.bg-white,
.website-container.web-dark-theme .bg-white,
[data-theme="dark"] .website-container section.bg-white,
[data-theme="dark"] .website-container div.bg-white {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Tipografía de Alto Contraste */
.website-container.web-dark-theme h1,
.website-container.web-dark-theme h2,
.website-container.web-dark-theme h3,
.website-container.web-dark-theme h4,
.website-container.web-dark-theme h5,
.website-container.web-dark-theme h6,
.website-container.web-dark-theme .display-1,
.website-container.web-dark-theme .display-2,
.website-container.web-dark-theme .display-3,
.website-container.web-dark-theme .display-4,
.website-container.web-dark-theme .display-5,
.website-container.web-dark-theme .display-6,
[data-theme="dark"] .website-container h1,
[data-theme="dark"] .website-container h2,
[data-theme="dark"] .website-container h3,
[data-theme="dark"] .website-container h4,
[data-theme="dark"] .website-container h5,
[data-theme="dark"] .website-container h6 {
    color: #ffffff !important;
}

.website-container.web-dark-theme p,
.website-container.web-dark-theme li,
.website-container.web-dark-theme span:not(.badge),
[data-theme="dark"] .website-container p,
[data-theme="dark"] .website-container li,
[data-theme="dark"] .website-container span:not(.badge) {
    color: #cbd5e1 !important;
}

.website-container.web-dark-theme .text-dark,
.website-container.web-dark-theme .text-body,
.website-container.web-dark-theme .text-black,
.website-container.web-dark-theme .text-body-emphasis,
[data-theme="dark"] .website-container .text-dark,
[data-theme="dark"] .website-container .text-body,
[data-theme="dark"] .website-container .text-black {
    color: #f8fafc !important;
}

.website-container.web-dark-theme .text-muted,
.website-container.web-dark-theme .text-secondary,
[data-theme="dark"] .website-container .text-muted,
[data-theme="dark"] .website-container .text-secondary {
    color: #94a3b8 !important;
}

/* Navbar y Navegación */
.website-container.web-dark-theme .navbar,
[data-theme="dark"] .website-container .navbar {
    background-color: #0b0f19 !important;
    border-bottom: 1px solid #1e293b !important;
}

.website-container.web-dark-theme .navbar-brand,
[data-theme="dark"] .website-container .navbar-brand {
    color: #ffffff !important;
}

.website-container.web-dark-theme .navbar .nav-link,
[data-theme="dark"] .website-container .navbar .nav-link {
    color: #cbd5e1 !important;
}

.website-container.web-dark-theme .navbar .nav-link:hover,
.website-container.web-dark-theme .navbar .nav-link.active,
[data-theme="dark"] .website-container .navbar .nav-link:hover,
[data-theme="dark"] .website-container .navbar .nav-link.active {
    color: #38bdf8 !important;
}

.website-container.web-dark-theme .navbar-toggler,
[data-theme="dark"] .website-container .navbar-toggler {
    border-color: #475569 !important;
}

.website-container.web-dark-theme .navbar-toggler-icon,
[data-theme="dark"] .website-container .navbar-toggler-icon {
    filter: invert(1);
}

/* Cards, Contenedores y Cajas */
.website-container.web-dark-theme .card,
[data-theme="dark"] .website-container .card {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.website-container.web-dark-theme .card-body,
.website-container.web-dark-theme .card-header,
.website-container.web-dark-theme .card-footer,
[data-theme="dark"] .website-container .card-body,
[data-theme="dark"] .website-container .card-header,
[data-theme="dark"] .website-container .card-footer {
    background-color: transparent !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preguntas Frecuentes (Acordeones Bootstrap) */
.website-container.web-dark-theme .accordion-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.website-container.web-dark-theme .accordion-button {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.website-container.web-dark-theme .accordion-button:not(.collapsed) {
    background-color: #253349 !important;
    color: #38bdf8 !important;
    box-shadow: inset 0 -1px 0 #334155 !important;
}

.website-container.web-dark-theme .accordion-button::after {
    filter: invert(1);
}

.website-container.web-dark-theme .accordion-body {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}

/* Formularios, Inputs y Selects */
.website-container.web-dark-theme .form-control,
.website-container.web-dark-theme .form-select {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

.website-container.web-dark-theme .form-control:focus,
.website-container.web-dark-theme .form-select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.25) !important;
}

.website-container.web-dark-theme .form-control::placeholder {
    color: #64748b !important;
}

/* Tablas */
.website-container.web-dark-theme .table {
    --bs-table-color: #f8fafc;
    --bs-table-bg: #1e293b;
    --bs-table-border-color: #334155;
    color: #f8fafc !important;
}

/* List Groups y Modales */
.website-container.web-dark-theme .list-group-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.website-container.web-dark-theme .modal-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Footer */
.website-container.web-dark-theme footer,
.website-container.web-dark-theme footer.bg-light,
[data-theme="dark"] .website-container footer,
[data-theme="dark"] .website-container footer.bg-light {
    background-color: #0b0f19 !important;
    border-top: 1px solid #1e293b !important;
    color: #94a3b8 !important;
}

.website-container.web-dark-theme footer p,
[data-theme="dark"] .website-container footer p {
    color: #94a3b8 !important;
}

/* Enlaces y Bordes */
.website-container.web-dark-theme a:not(.btn):not(.nav-link):not(.navbar-brand),
[data-theme="dark"] .website-container a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: #38bdf8 !important;
}

.website-container.web-dark-theme a:not(.btn):not(.nav-link):not(.navbar-brand):hover,
[data-theme="dark"] .website-container a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: #7dd3fc !important;
}

.website-container.web-dark-theme hr,
.website-container.web-dark-theme .border,
.website-container.web-dark-theme .border-top,
.website-container.web-dark-theme .border-bottom,
.website-container.web-dark-theme .border-start,
.website-container.web-dark-theme .border-end {
    border-color: #334155 !important;
}

/* Forzado de Estilos en Línea con Fondos Claros */
.website-container.web-dark-theme [style*="background: #fff"],
.website-container.web-dark-theme [style*="background:#fff"],
.website-container.web-dark-theme [style*="background: #ffffff"],
.website-container.web-dark-theme [style*="background:#ffffff"],
.website-container.web-dark-theme [style*="background: white"],
.website-container.web-dark-theme [style*="background:white"],
.website-container.web-dark-theme [style*="background-color: #fff"],
.website-container.web-dark-theme [style*="background-color:#fff"],
.website-container.web-dark-theme [style*="background-color: #ffffff"],
.website-container.web-dark-theme [style*="background-color:#ffffff"],
.website-container.web-dark-theme [style*="background-color: white"],
.website-container.web-dark-theme [style*="background-color:white"],
.website-container.web-dark-theme [style*="background-color: rgb(255, 255, 255)"],
.website-container.web-dark-theme [style*="background-color: rgb(248, 249, 250)"],
.website-container.web-dark-theme [style*="background: rgb(248, 249, 250)"],
.website-container.web-dark-theme [style*="background-color: #f8f9fa"],
.website-container.web-dark-theme [style*="background-color:#f8f9fa"] {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* ====================================================================
   Corporate Webmail Email Reading Canvas (Light/Dark Contrast Isolation)
   ==================================================================== */
.email-body-canvas {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow-x: auto;
    max-width: 100%;
}

/* In dark mode, maintain clean white canvas (Gmail/Outlook standard) */
[data-theme="dark"] .email-body-canvas,
body.dark-mode-active .email-body-canvas {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

/* Isolate all containers inside .email-body-canvas from global darkmode overrides */
[data-theme="dark"] .email-body-canvas .bg-white,
body.dark-mode-active .email-body-canvas .bg-white,
[data-theme="dark"] .email-body-canvas .bg-body,
body.dark-mode-active .email-body-canvas .bg-body {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

[data-theme="dark"] .email-body-canvas .bg-light,
body.dark-mode-active .email-body-canvas .bg-light {
    background-color: #f8fafc !important;
    color: #334155 !important;
}

[data-theme="dark"] .email-body-canvas table,
body.dark-mode-active .email-body-canvas table {
    background-color: transparent !important;
    color: inherit !important;
}

[data-theme="dark"] .email-body-canvas tbody,
body.dark-mode-active .email-body-canvas tbody,
[data-theme="dark"] .email-body-canvas tr,
body.dark-mode-active .email-body-canvas tr,
[data-theme="dark"] .email-body-canvas td,
body.dark-mode-active .email-body-canvas td {
    color: inherit;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Reset typography inside white canvas to prevent dark mode global rules from inverting text to white */
[data-theme="dark"] .email-body-canvas h1,
[data-theme="dark"] .email-body-canvas h2,
[data-theme="dark"] .email-body-canvas h3,
[data-theme="dark"] .email-body-canvas h4,
[data-theme="dark"] .email-body-canvas h5,
[data-theme="dark"] .email-body-canvas h6,
body.dark-mode-active .email-body-canvas h1,
body.dark-mode-active .email-body-canvas h2,
body.dark-mode-active .email-body-canvas h3,
body.dark-mode-active .email-body-canvas h4,
body.dark-mode-active .email-body-canvas h5,
body.dark-mode-active .email-body-canvas h6 {
    color: #111827 !important;
}

[data-theme="dark"] .email-body-canvas p,
[data-theme="dark"] .email-body-canvas td,
[data-theme="dark"] .email-body-canvas th,
[data-theme="dark"] .email-body-canvas span,
[data-theme="dark"] .email-body-canvas div,
[data-theme="dark"] .email-body-canvas li,
body.dark-mode-active .email-body-canvas p,
body.dark-mode-active .email-body-canvas td,
body.dark-mode-active .email-body-canvas th,
body.dark-mode-active .email-body-canvas span,
body.dark-mode-active .email-body-canvas div,
body.dark-mode-active .email-body-canvas li {
    color: inherit;
}

[data-theme="dark"] .email-body-canvas a,
body.dark-mode-active .email-body-canvas a {
    color: #2563eb !important;
}

[data-theme="dark"] .email-body-canvas pre,
[data-theme="dark"] .email-body-canvas code,
body.dark-mode-active .email-body-canvas pre,
body.dark-mode-active .email-body-canvas code {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}

/* ====================================================================
   31. Exención y Blindaje Estricto: Home Principal y Public Layout (abipilot.com)
   El modo oscuro NUNCA debe impactar al home principal de abipilot.com
   ni a las páginas públicas (conservan siempre su diseño claro original).
   ==================================================================== */
body:has(.landing-page),
body:has(.public-layout) {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

[data-theme="dark"] .public-layout,
body.dark-mode-active .public-layout,
[data-theme="dark"] .landing-page,
body.dark-mode-active .landing-page {
    background-color: #ffffff;
    color: #1e293b;
    --bs-body-bg: #ffffff;
    --bs-body-color: #1e293b;
    --bs-card-bg: #ffffff;
    --bs-card-color: #1e293b;
    --bs-secondary-bg: #f8fafc;
    --bs-tertiary-bg: #f1f5f9;
    --bs-border-color: #e2e8f0;
}

[data-theme="dark"] .public-layout .bg-white,
body.dark-mode-active .public-layout .bg-white,
[data-theme="dark"] .landing-page .bg-white,
body.dark-mode-active .landing-page .bg-white {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

[data-theme="dark"] .public-layout .bg-light,
body.dark-mode-active .public-layout .bg-light,
[data-theme="dark"] .landing-page .bg-light,
body.dark-mode-active .landing-page .bg-light {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

[data-theme="dark"] .public-layout .card,
body.dark-mode-active .public-layout .card,
[data-theme="dark"] .landing-page .card,
body.dark-mode-active .landing-page .card {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .public-layout .card-body,
body.dark-mode-active .public-layout .card-body,
[data-theme="dark"] .landing-page .card-body,
body.dark-mode-active .landing-page .card-body {
    color: #1e293b !important;
}

[data-theme="dark"] .public-layout .card-header,
body.dark-mode-active .public-layout .card-header,
[data-theme="dark"] .landing-page .card-header,
body.dark-mode-active .landing-page .card-header {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}

[data-theme="dark"] .public-layout .text-dark,
body.dark-mode-active .public-layout .text-dark,
[data-theme="dark"] .landing-page .text-dark,
body.dark-mode-active .landing-page .text-dark {
    color: #1e293b !important;
}

[data-theme="dark"] .public-layout .text-muted,
body.dark-mode-active .public-layout .text-muted,
[data-theme="dark"] .landing-page .text-muted,
body.dark-mode-active .landing-page .text-muted {
    color: #64748b !important;
}

[data-theme="dark"] .public-layout .text-secondary,
body.dark-mode-active .public-layout .text-secondary,
[data-theme="dark"] .landing-page .text-secondary,
body.dark-mode-active .landing-page .text-secondary {
    color: #475569 !important;
}

[data-theme="dark"] .landing-page h1:not(.hero-section *):not(.founder-cohort-banner *),
[data-theme="dark"] .landing-page h2:not(.hero-section *):not(.founder-cohort-banner *),
[data-theme="dark"] .landing-page h3:not(.hero-section *):not(.founder-cohort-banner *),
[data-theme="dark"] .landing-page h4:not(.hero-section *):not(.founder-cohort-banner *),
[data-theme="dark"] .landing-page h5:not(.hero-section *):not(.founder-cohort-banner *),
[data-theme="dark"] .landing-page h6:not(.hero-section *):not(.founder-cohort-banner *),
body.dark-mode-active .landing-page h1:not(.hero-section *):not(.founder-cohort-banner *),
body.dark-mode-active .landing-page h2:not(.hero-section *):not(.founder-cohort-banner *),
body.dark-mode-active .landing-page h3:not(.hero-section *):not(.founder-cohort-banner *),
body.dark-mode-active .landing-page h4:not(.hero-section *):not(.founder-cohort-banner *),
body.dark-mode-active .landing-page h5:not(.hero-section *):not(.founder-cohort-banner *),
body.dark-mode-active .landing-page h6:not(.hero-section *):not(.founder-cohort-banner *) {
    color: #0f172a !important;
}

[data-theme="dark"] .landing-page .hero-section,
body.dark-mode-active .landing-page .hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .landing-page .hero-section *,
body.dark-mode-active .landing-page .hero-section * {
    color: inherit;
}