/* atlas.bundle.css — generado, no editar */
/* ========== BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-bg);
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    line-height: var(--line-height-normal);
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

input, textarea, select {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-family: var(--font-family);
}

button {
    font-family: var(--font-family);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

:root {
    /* ========== COLORES PRINCIPALES (Atlas landing look) ========== */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #eff6ff;
    --color-secondary: #3b82f6;

    /* Gradientes */
    --gradient-primary: #2563eb;
    --gradient-danger: #dc2626;
    --gradient-success: #16a34a;
    --gradient-warning: #d97706;

    /* ========== COLORES DE ESTADO ========== */
    --color-success: #16a34a;
    --color-success-dark: #15803d;
    --color-warning: #d97706;
    --color-warning-dark: #b45309;
    --color-danger: #dc2626;
    --color-danger-dark: #b91c1c;
    --color-info: #2563eb;

    /* ========== COLORES NEUTROS (slate) ========== */
    --color-text: #0f172a;
    --color-text-light: #475569;
    --color-text-muted: #64748b;
    --color-text-white: #ffffff;

    --color-bg: #ffffff;
    --color-bg-light: #f8fafc;
    --color-bg-gray: #f8fafc;
    --color-bg-hover: #f1f5f9;
    --color-bg-secondary: var(--color-bg-hover);

    --color-border: #e2e8f0;
    --color-border-light: #e2e8f0;
    --color-border-dark: #cbd5e1;

    /* ========== ESPACIADOS ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 48px;

    /* ========== BORDES ========== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ========== SOMBRAS ========== */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.1);
    --shadow-primary: 0 8px 20px rgba(37, 99, 235, 0.25);
    --shadow-danger: 0 4px 10px rgba(220, 38, 38, 0.2);

    /* ========== TRANSICIONES ========== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ========== TIPOGRAFÍA ========== */
    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 48px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* ========== Z-INDEX ========== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 998;
    --z-toggle: 999;
    --z-sidebar: 1000;
    --z-modal: 1050;

    /* ========== ANCHOS MÁXIMOS ========== */
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;
    --max-width-2xl: 1536px;

    /* ========== SIDEBAR ========== */
    --sidebar-width: 280px;
    --sidebar-bg: var(--color-bg);
    --sidebar-header-bg: #ffffff;

    /* ========== COLORES SEMÁNTICOS DE ALERTAS/BADGES ========== */
    --color-alert-success-bg: #d1fae5;
    --color-alert-success-text: #065f46;
    --color-alert-success-border: #a7f3d0;

    --color-alert-error-bg: #fee2e2;
    --color-alert-error-text: #991b1b;
    --color-alert-error-border: #fecaca;

    --color-alert-warning-bg: #fef3c7;
    --color-alert-warning-text: #92400e;
    --color-alert-warning-border: #fde68a;

    --color-alert-info-bg: #dbeafe;
    --color-alert-info-text: #1e40af;
    --color-alert-info-border: #93c5fd;

    --color-badge-info-bg: #e3f2fd;
    --color-badge-info-text: #1976d2;
    --color-badge-warning-bg: #fff3e0;
    --color-badge-warning-text: #f57c00;

    --color-neutral: #9e9e9e;

    --color-bg-elevated: #ffffff;
    --color-bg-sunken: #f8f9fa;
    --color-code-text: #1e293b;
    --color-surface: var(--color-bg-elevated);
    --color-surface-alt: var(--color-bg-gray);
    --color-surface-hover: var(--color-bg-hover);

    color-scheme: light;
}

/* ========== DARK MODE VARIABLES (slate + Atlas blue) ========== */
[data-theme="dark"] {
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-light: #172554;
    --color-secondary: #60a5fa;

    --gradient-primary: #3b82f6;
    --gradient-danger: #c53030;
    --gradient-success: #276749;
    --gradient-warning: #c05621;

    --color-success: #4ade80;
    --color-success-dark: #22c55e;
    --color-warning: #fbbf24;
    --color-warning-dark: #f59e0b;
    --color-danger: #f87171;
    --color-danger-dark: #ef4444;
    --color-info: #60a5fa;

    --color-text: #f8fafc;
    --color-text-light: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-white: #ffffff;

    --color-bg: #0f172a;
    --color-bg-light: #020617;
    --color-bg-gray: #0f172a;
    --color-bg-hover: #334155;
    --color-bg-secondary: var(--color-bg-hover);

    --color-border: #334155;
    --color-border-light: #334155;
    --color-border-dark: #475569;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 8px 24px rgba(37, 99, 235, 0.35);
    --shadow-danger: 0 4px 10px rgba(248, 113, 113, 0.3);

    --sidebar-bg: #0f172a;
    --sidebar-header-bg: #0f172a;

    --color-alert-success-bg: #052e16;
    --color-alert-success-text: #86efac;
    --color-alert-success-border: #166534;

    --color-alert-error-bg: #450a0a;
    --color-alert-error-text: #fca5a5;
    --color-alert-error-border: #7f1d1d;

    --color-alert-warning-bg: #422006;
    --color-alert-warning-text: #fcd34d;
    --color-alert-warning-border: #854d0e;

    --color-alert-info-bg: #172554;
    --color-alert-info-text: #93c5fd;
    --color-alert-info-border: #1e40af;

    --color-badge-info-bg: #172554;
    --color-badge-info-text: #93c5fd;
    --color-badge-warning-bg: #422006;
    --color-badge-warning-text: #fcd34d;

    --color-neutral: #475569;

    --color-bg-elevated: #1e293b;
    --color-bg-sunken: #020617;
    --color-code-text: #e2e8f0;
    --color-surface: var(--color-bg-elevated);
    --color-surface-alt: var(--color-bg-gray);
    --color-surface-hover: var(--color-bg-hover);

    color-scheme: dark;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-small {
    font-size: var(--font-size-sm);
}

.text-large {
    font-size: var(--font-size-lg);
}

/* ========== DARK MODE OVERRIDES ==========
   Sólo contiene overrides para componentes que tienen colores hardcodeados
   en templates HTML (inline styles) o valores deliberadamente distintos
   a los que producen las CSS variables (efectos especiales, sombras, etc).

   Los componentes que migraron a CSS variables ya no necesitan overrides aquí.
   ================================================== */

/* -------- BODY / GLOBAL -------- */
[data-theme="dark"] body {
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

[data-theme="dark"] .main-content {
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* -------- SIDEBAR -------- */
[data-theme="dark"] .sidebar {
    background: var(--sidebar-bg);
    border-right-color: var(--color-border);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .sidebar-header {
    background: var(--sidebar-header-bg);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .sidebar-header h2 {
    color: var(--color-text);
}

[data-theme="dark"] .sidebar-brand-logo {
    border-color: var(--color-border-dark);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .theme-toggle-btn {
    background: var(--color-bg-hover);
    border-color: var(--color-border-dark);
    color: var(--color-text-light);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    color: #93c5fd;
    background: var(--color-primary-light);
    border-color: #2563eb;
}

[data-theme="dark"] .sandbox-badge {
    background: var(--color-primary-light);
    color: #93c5fd;
    border-color: #2563eb;
}

[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-main::-webkit-scrollbar-thumb {
    background: #334155;
}

[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .sidebar-main::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

[data-theme="dark"] .sidebar-nav-link,
[data-theme="dark"] .sidebar-nav > a,
[data-theme="dark"] .sidebar-nav > a span {
    color: var(--color-text-light);
}

[data-theme="dark"] .sidebar-nav-link:hover,
[data-theme="dark"] .sidebar-nav > a:hover,
[data-theme="dark"] .sidebar-nav > a:hover span {
    background: var(--color-bg-hover);
    color: var(--color-text);
    border-left-color: var(--color-border-dark);
}

[data-theme="dark"] .sidebar-nav-link.active,
[data-theme="dark"] .sidebar-nav > a.active,
[data-theme="dark"] .sidebar-nav > a.active span {
    color: #60a5fa;
}

[data-theme="dark"] .sidebar-nav-link.active,
[data-theme="dark"] .sidebar-nav > a.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.22) 0%, transparent 100%);
    border-left-color: #3b82f6;
}

[data-theme="dark"] .sidebar-nav-section-label {
    color: var(--color-text-muted);
}

[data-theme="dark"] .sidebar-footer-logout {
    background: var(--sidebar-bg);
    border-top-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .sidebar-footer-logout:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-light);
    border-left-color: var(--color-border-dark);
}

[data-theme="dark"] .staff-tools-divider {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .staff-tools-label {
    color: var(--color-text-muted);
}

[data-theme="dark"] .staff-tools-divider > a {
    color: var(--color-text-muted);
}

[data-theme="dark"] .staff-tools-divider > a:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
    border-left-color: var(--color-border-dark);
}

[data-theme="dark"] .staff-tools-divider > a .nav-badge {
    box-shadow: 0 0 0 2px var(--sidebar-bg);
}

[data-theme="dark"] .staff-tools-section {
    background: var(--sidebar-bg);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .staff-tools-section .sidebar-nav-link {
    color: var(--color-text-muted);
}

[data-theme="dark"] .staff-tools-section .sidebar-nav-link:hover {
    color: var(--color-text);
    background: var(--color-bg-hover);
}

[data-theme="dark"] .staff-tools-section .sidebar-nav-link.active {
    color: #60a5fa;
}

[data-theme="dark"] .staff-tools-section .sidebar-nav-link .nav-badge {
    box-shadow: 0 0 0 2px var(--sidebar-bg);
}

/* -------- WARNING BANNER (impersonation, etc) -------- */
[data-theme="dark"] .warning-banner {
    background: #2a2010;
    border-color: #d69e2e;
    color: #f6ad55;
}

[data-theme="dark"] .warning-banner strong {
    color: #fcd34d;
}

/* -------- IMPERSONATION BANNER -------- */
[data-theme="dark"] .impersonation-banner {
    background: var(--color-bg-elevated);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .impersonation-banner-header {
    color: var(--color-text-muted);
}

[data-theme="dark"] .impersonation-banner-user {
    color: var(--color-text-light);
    background: var(--color-bg-hover);
    border-color: var(--color-border-dark);
}

[data-theme="dark"] .impersonation-banner-user strong {
    color: var(--color-text);
}

[data-theme="dark"] .impersonation-banner-staff {
    color: var(--color-text-muted);
}

[data-theme="dark"] .impersonation-banner-actions a {
    background: var(--color-bg-hover);
    border-color: var(--color-border-dark);
    color: var(--color-text-light);
}

[data-theme="dark"] .impersonation-banner-actions a:hover {
    background: #334155;
    border-color: #64748b;
    color: var(--color-text);
}

/* -------- LOGOUT MODAL -------- */
[data-theme="dark"] .logout-modal {
    background: var(--color-bg-elevated);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .logout-modal-title {
    color: var(--color-text);
}

[data-theme="dark"] .logout-modal-content {
    color: var(--color-text-light);
}

[data-theme="dark"] .logout-modal-btn-cancel {
    background: var(--color-bg-hover);
    color: var(--color-text-light);
}

[data-theme="dark"] .logout-modal-btn-cancel:hover {
    background: #334155;
}

/* -------- SIDEBAR MOBILE TOGGLE -------- */
[data-theme="dark"] .sidebar-toggle {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .sidebar-toggle:hover {
    background: var(--color-bg-hover);
}

[data-theme="dark"] .sidebar-toggle-icon span {
    background: var(--color-text-light);
}

/* -------- DARK MODE SWITCH BUTTON (en sidebar) -------- */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #475569;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    font-family: inherit;
}

.dark-mode-toggle:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-left-color: #cbd5e1;
}

.dark-mode-toggle i {
    font-size: 16px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Toggle switch pill */
.dark-mode-switch {
    margin-left: auto;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 10px;
    position: relative;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.dark-mode-switch::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

[data-theme="dark"] .dark-mode-switch {
    background: #4a7fc1;
}

[data-theme="dark"] .dark-mode-switch::after {
    transform: translateX(16px);
}

[data-theme="dark"] .dark-mode-toggle {
    color: #a0aec0;
}

[data-theme="dark"] .dark-mode-toggle:hover {
    background: #2d3748;
    color: #e2e8f0;
    border-left-color: #4a5568;
}

/* -------- BUTTONS SECONDARY (tono más oscuro en dark) -------- */
[data-theme="dark"] .btn--secondary,
[data-theme="dark"] .btn-secondary {
    background: #1e2a3a;
    color: #63b3ed;
    border-color: #2d3748;
}

[data-theme="dark"] .btn--secondary:hover:not(:disabled),
[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    border-color: #4a7fc1;
    color: #90cdf4;
    background: #1a2a3a;
}

[data-theme="dark"] .clear-filters-btn {
    background: #1e2a3a;
    color: #a0aec0;
    border-color: #2d3748;
}

[data-theme="dark"] .clear-filters-btn:hover {
    background: #2d3748;
    border-color: #4a5568;
}

/* -------- PAGE HEADER -------- */
[data-theme="dark"] .page-header {
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
}

/* -------- STAGE BADGES (dark bg + light text — diseño deliberado) -------- */
/* Nota: initial_contact y scripts ya usan variables en badges.css.
   El resto tiene fondo oscuro + texto claro, diseño intencional para dark mode. */
[data-theme="dark"] .stage-closed_qualified {
    background: #22543d;
    color: #68d391;
}

[data-theme="dark"] .stage-closed_unqualified {
    background: #742a2a;
    color: #fc8181;
}

[data-theme="dark"] .stage-needs_context {
    background: #2a2010;
    color: #f6ad55;
}

[data-theme="dark"] .stage-qualified_ask_for_call,
[data-theme="dark"] .stage-qualified_send_adoctrination,
[data-theme="dark"] .stage-call_accepted,
[data-theme="dark"] .stage-closed_qualified_booked_call {
    background: #0d2818;
    color: #68d391;
}

[data-theme="dark"] .stage-closed_qualified_call_not_booked,
[data-theme="dark"] .stage-closed_not_cooperative {
    background: #2a2010;
    color: #f6ad55;
}

[data-theme="dark"] .stage-closed_call_denied {
    background: #2d1515;
    color: #fc8181;
}

/* -------- MODEL BADGE (tono más suave en dark) -------- */
[data-theme="dark"] .model-badge {
    background: #1a2a4a;
    color: #63b3ed;
}

/* -------- CONVERSATIONS LIST PAGE -------- */
[data-theme="dark"] .conversations-container {
    background: var(--color-bg);
    border-color: var(--color-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

[data-theme="dark"] .header-section {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .page-header__title {
    color: var(--color-text);
}

[data-theme="dark"] .page-header__subtitle {
    color: var(--color-text-muted);
}

[data-theme="dark"] .filter-input,
[data-theme="dark"] .filter-select {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .filter-input::placeholder {
    color: var(--color-text-muted);
}

[data-theme="dark"] .btn-clear {
    background: var(--color-bg-gray);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

[data-theme="dark"] .btn-clear:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

[data-theme="dark"] .conversation-card.closed {
    border-left-color: #4a5568;
}

[data-theme="dark"] .cta-card.inactive {
    border-left-color: #4a5568;
}

/* -------- TABS -------- */
[data-theme="dark"] .tabs-nav {
    background: linear-gradient(to bottom, var(--color-bg-gray) 0%, var(--color-bg) 100%);
}

[data-theme="dark"] .tab-item {
    color: var(--color-text-muted);
}

[data-theme="dark"] .tab-item:hover,
[data-theme="dark"] .tab-item.active {
    color: var(--color-primary);
}

[data-theme="dark"] .tab-item.active {
    background: var(--color-bg);
    border-bottom-color: var(--color-primary);
    box-shadow: 0 -2px 8px rgba(74, 127, 193, 0.15);
}

[data-theme="dark"] .tab-item.tab-personalized.active {
    border-bottom-color: #ec4899;
    box-shadow: 0 -2px 8px rgba(236, 72, 153, 0.2);
}

[data-theme="dark"] .tab-nav,
[data-theme="dark"] .tabs-nav,
[data-theme="dark"] .conversations-tabs {
    background: linear-gradient(to bottom, var(--color-bg-gray) 0%, var(--color-bg) 100%);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .tab-count {
    background: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .tab-item.active .tab-count {
    background: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .tab-item.tab-personalized.active .tab-count {
    background: #ec4899;
    color: #fff;
}

/* -------- CONVERSATIONS TABLE -------- */
[data-theme="dark"] .conversations-table thead {
    background: var(--color-bg-gray);
}

[data-theme="dark"] .conversations-table th {
    background: var(--color-bg-gray);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .conversations-table td {
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .conversations-table tbody tr {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .conversations-table tbody tr:nth-child(even) {
    background: rgba(45, 55, 72, 0.25);
}

[data-theme="dark"] .conversations-table tbody tr:hover {
    background: var(--color-bg-hover);
}

[data-theme="dark"] .lead-name {
    color: var(--color-text);
}

[data-theme="dark"] .lead-username {
    color: var(--color-text-muted);
}

/* -------- ANALYTICS FUNNEL -------- */
[data-theme="dark"] .stage {
    color: var(--color-text);
}

[data-theme="dark"] .stage:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .stage-label {
    color: var(--color-text-muted);
}

[data-theme="dark"] .stage-value {
    color: var(--color-text);
}

[data-theme="dark"] .stage-pct-total {
    color: var(--color-text-muted);
}

[data-theme="dark"] .stage-conversion {
    background: var(--color-bg-gray);
    color: var(--color-text);
}

[data-theme="dark"] .stage-dropoff {
    color: var(--color-danger);
}

[data-theme="dark"] .funnel-chip {
    background: rgba(30, 42, 58, 0.95);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .funnel-card,
[data-theme="dark"] .funnel-body {
    background: var(--color-bg);
    border-color: var(--color-border);
}

/* -------- MODALS -------- */
[data-theme="dark"] .modal-content {
    background: var(--color-bg);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--color-border);
}

[data-theme="dark"] .modal-btn--secondary {
    background: var(--color-bg-gray);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .modal-option {
    background: var(--color-bg-gray);
    border-color: var(--color-border);
}

[data-theme="dark"] .cta-badge--empty {
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
}

[data-theme="dark"] .creator-badge {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

/* -------- CHAT PAGE -------- */
/* metadata-content: intencionalmente dark en ambos modos (editor de código) */
[data-theme="dark"] .metadata-content {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .metadata-content::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] .chat-input:focus {
    box-shadow: 0 0 0 3px rgba(74, 127, 193, 0.25);
}

/* -------- DEBUG PAGE -------- */
[data-theme="dark"] body.debug-page {
    background: var(--gradient-primary);
}

/* -------- LANDING PAGE -------- */
[data-theme="dark"] .landing-logo,
[data-theme="dark"] .lang-selector a:hover,
[data-theme="dark"] .lang-selector a.active {
    color: #90cdf4;
}

[data-theme="dark"] .feature-card:nth-child(1) .feature-card-icon {
    background: #1a1625;
    border-top-color: #805ad5;
    color: #c4b5fd;
}

[data-theme="dark"] .feature-card:nth-child(2) .feature-card-icon {
    background: #1a1625;
    border-top-color: #ec4899;
    color: #f9a8d4;
}

[data-theme="dark"] .feature-card:nth-child(3) .feature-card-icon {
    background: #0d2818;
    border-top-color: #22c55e;
    color: #68d391;
}

/* -------- AUTH PAGE -------- */
[data-theme="dark"] .auth-logo,
[data-theme="dark"] .auth-link a {
    color: #90cdf4;
}

[data-theme="dark"] .auth-message--error {
    background: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
    border-color: var(--color-alert-error-border);
}

[data-theme="dark"] .auth-message--success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
    border-color: var(--color-alert-success-border);
}

[data-theme="dark"] .auth-message--warning {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
    border-color: var(--color-alert-warning-border);
}

/* -------- SETTER QUEUE PAGE -------- */
[data-theme="dark"] .sq-container {
    background: var(--color-bg);
    border-color: var(--color-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

[data-theme="dark"] .sq-header {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .sq-filter-select,
[data-theme="dark"] .sq-search-input {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .sq-tabs {
    border-bottom-color: var(--color-border);
    background: var(--color-bg-gray);
}

[data-theme="dark"] .sq-table th {
    background: var(--color-bg-gray);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .sq-table td {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .sq-table tbody tr:hover {
    background: var(--color-bg-hover);
}

[data-theme="dark"] .sq-tab-count {
    background: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .sq-tab.active .sq-tab-count {
    background: rgba(74, 127, 193, 0.25);
    color: var(--color-primary);
}

[data-theme="dark"] .sq-channel-badge {
    background: #2d1b4e;
    color: #a78bfa;
}

[data-theme="dark"] .sq-stage-select {
    background: var(--color-bg);
}

[data-theme="dark"] .sq-empty {
    color: var(--color-text-muted);
}

[data-theme="dark"] .sq-pagination a:hover {
    background: var(--color-bg-hover);
}

[data-theme="dark"] .leads-top-tabs {
    background: var(--color-bg-gray);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="dark"] .leads-top-tab {
    color: var(--color-text-muted);
}

[data-theme="dark"] .leads-top-tab:hover {
    color: var(--color-primary);
    background: rgba(74, 127, 193, 0.15);
}

[data-theme="dark"] .leads-top-tab--active {
    color: var(--color-primary);
    background: var(--color-bg);
    box-shadow: 0 2px 8px rgba(74, 127, 193, 0.25), 0 1px 3px rgba(0,0,0,0.3);
}

/* -------- PREFERENCES GRID -------- */
[data-theme="dark"] .pref-item {
    background: var(--color-bg-gray);
}

[data-theme="dark"] .pref-item label {
    color: var(--color-text);
}

[data-theme="dark"] .response-brevity-options label {
    background: var(--color-bg-gray);
    color: var(--color-text);
}

[data-theme="dark"] .response-brevity-options label:hover {
    background: rgba(74, 127, 193, 0.15);
}

[data-theme="dark"] .response-brevity-options label:has(input:checked) {
    background: rgba(74, 127, 193, 0.2);
    border-color: var(--color-primary);
}

/* -------- CTA TABLE -------- */
[data-theme="dark"] .cta-table-wrapper {
    background: var(--color-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .cta-table th {
    background: var(--color-bg-gray);
    border-bottom-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .cta-table td {
    border-bottom-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .cta-table tr:nth-child(even) td {
    background: rgba(45, 55, 72, 0.25);
}

[data-theme="dark"] .cta-table tr:hover td {
    background: var(--color-bg-hover);
}

[data-theme="dark"] .cta-type-badge.direct {
    background: #1a2e4a !important;
    color: #63b3ed !important;
}

[data-theme="dark"] .cta-type-badge.comment {
    background: #2d1b4e !important;
    color: #a78bfa !important;
}

[data-theme="dark"] .cta-type-badge.outbound {
    background: #2a2010 !important;
    color: #f6ad55 !important;
}

[data-theme="dark"] .cta-type-badge.follower {
    background: #2a2010 !important;
    color: #f6ad55 !important;
}

[data-theme="dark"] .cta-status-badge.active {
    background: #0d2818 !important;
    color: #68d391 !important;
}

[data-theme="dark"] .cta-status-badge.inactive {
    background: var(--color-bg-gray) !important;
    color: var(--color-text-muted) !important;
}

/* -------- CTA MODAL -------- */
[data-theme="dark"] .cta-modal-content {
    background: var(--color-bg);
}

[data-theme="dark"] .cta-modal-header,
[data-theme="dark"] .cta-modal-body,
[data-theme="dark"] .cta-modal-footer {
    border-color: var(--color-border);
}

[data-theme="dark"] #keywordsDisabledNotice,
[data-theme="dark"] .cta-notice-warning {
    background: #2a2010 !important;
    border-color: #d69e2e !important;
}

[data-theme="dark"] #keywordsDisabledNotice strong,
[data-theme="dark"] #keywordsDisabledNotice span,
[data-theme="dark"] .cta-notice-warning strong,
[data-theme="dark"] .cta-notice-warning span {
    color: #f6ad55 !important;
}

[data-theme="dark"] .cta-outbound-notice {
    background: #2a2010 !important;
    border-color: #ed8936 !important;
}

[data-theme="dark"] .cta-outbound-notice strong,
[data-theme="dark"] .cta-outbound-notice p {
    color: #f6ad55 !important;
}

[data-theme="dark"] .cta-nutrition-fields {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .cta-purple-section {
    background: rgba(139, 92, 246, 0.1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .cta-purple-section p {
    color: #a78bfa !important;
}

[data-theme="dark"] .cta-modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .cta-toast.success { background: linear-gradient(135deg, #059669, #047857); }
[data-theme="dark"] .cta-toast.error { background: linear-gradient(135deg, #dc2626, #b91c1c); }
[data-theme="dark"] .cta-toast.warning { background: linear-gradient(135deg, #d97706, #b45309); }
[data-theme="dark"] .cta-toast.info { background: linear-gradient(135deg, #2563eb, #1d4ed8); }

[data-theme="dark"] .toggle-slider {
    background: var(--color-border);
}

[data-theme="dark"] .toggle-input input:checked + .toggle-slider {
    background: var(--color-primary);
}

[data-theme="dark"] .var-chip {
    background: var(--color-bg-hover);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .cta-modal-body .form-control,
[data-theme="dark"] .cta-modal-body textarea.form-control,
[data-theme="dark"] #ctaModal .form-control,
[data-theme="dark"] #ctaModal textarea.form-control {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border);
}

[data-theme="dark"] .cta-modal-body .form-control::placeholder,
[data-theme="dark"] #ctaModal .form-control::placeholder {
    color: var(--color-text-muted);
}

[data-theme="dark"] .textarea-backdrop,
[data-theme="dark"] #ctaModal .textarea-backdrop {
    background: var(--color-bg) !important;
}

[data-theme="dark"] .textarea-backdrop .var-highlight,
[data-theme="dark"] #ctaModal .textarea-backdrop .var-highlight {
    background: rgba(74, 127, 193, 0.25);
}

[data-theme="dark"] .add-keyword-btn {
    background: var(--color-primary);
}

[data-theme="dark"] .cta-draft-banner {
    background: #2a2010 !important;
    border-color: #d69e2e !important;
}

[data-theme="dark"] .cta-draft-banner span,
[data-theme="dark"] .cta-draft-banner button {
    color: #f6ad55 !important;
    border-color: #d69e2e !important;
}

/* -------- ROI CALCULATOR -------- */
[data-theme="dark"] .roi-section {
    --text: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --border: var(--color-border);
    --bg: var(--color-bg);
    --bg-subtle: var(--color-bg-gray);
    --navy: var(--color-primary);
    --navy-lighter: rgba(74, 127, 193, 0.2);
}

[data-theme="dark"] .roi-input-wrapper {
    background: var(--color-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .roi-input-wrapper:focus-within {
    box-shadow: 0 0 0 3px rgba(74, 127, 193, 0.25);
}

[data-theme="dark"] .roi-output-card {
    background: var(--color-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .roi-output-row {
    border-color: var(--color-border);
}

[data-theme="dark"] .roi-cta-btn {
    background: var(--color-primary);
}

[data-theme="dark"] .roi-cta-btn:hover {
    box-shadow: 0 4px 16px rgba(74, 127, 193, 0.4);
}

/* -------- CTA DETAIL BADGES -------- */
[data-theme="dark"] .cta-type-badge--comment {
    background: #1a2e4a !important;
    color: #63b3ed !important;
}

[data-theme="dark"] .cta-type-badge--follower {
    background: #2a2010 !important;
    color: #f6ad55 !important;
}

[data-theme="dark"] .cta-type-badge--outbound {
    background: #2a2010 !important;
    color: #ed8936 !important;
}

[data-theme="dark"] .cta-type-badge--direct {
    background: #1a2a4a !important;
    color: #90cdf4 !important;
}

[data-theme="dark"] .cta-voice-badge {
    background: #2a2010 !important;
    color: #f6ad55 !important;
}

[data-theme="dark"] .stat-icon.blue {
    background: #1a2e4a;
    color: #63b3ed;
}

[data-theme="dark"] .stat-icon.green {
    background: #0d2818;
    color: #68d391;
}

[data-theme="dark"] .stat-icon.gray {
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
}

[data-theme="dark"] .stat-icon--orange {
    background: #2a2010;
    color: #ed8936;
}

[data-theme="dark"] .stat-icon--purple {
    background: #2d1b4e;
    color: #a78bfa;
}

[data-theme="dark"] .stat-icon--red {
    background: #2d1515;
    color: #fc8181;
}

[data-theme="dark"] .stat-card-clean {
    background: var(--color-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .stat-value-clean {
    color: var(--color-text);
}

/* -------- AI SCRIPT (action-flow-step, pitch-mode, etc) -------- */
[data-theme="dark"] .action-flow-step {
    background: var(--color-bg-gray) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .action-flow-step .action-inner-box {
    background: var(--color-bg) !important;
}

[data-theme="dark"] .pitch-mode-option {
    border-color: var(--color-border);
    background: transparent;
}

[data-theme="dark"] .pitch-mode-option.pitch-mode-active {
    border-color: var(--color-primary);
    background: rgba(74, 127, 193, 0.15);
}

[data-theme="dark"] .qualification-score-box {
    background: var(--color-bg-gray);
}

[data-theme="dark"] .qualification-criteria-item {
    background: var(--color-bg-gray);
    border-color: var(--color-border);
}

[data-theme="dark"] .action-box,
[data-theme="dark"] .qualification-threshold-display {
    background: var(--color-bg) !important;
}

/* -------- PAGINATION SHADOW -------- */
[data-theme="dark"] .pagination .page-link:hover:not(.active):not(:disabled) {
    box-shadow: 0 4px 12px rgba(74, 127, 193, 0.3);
}

/* -------- AI SETTINGS / NOTIF OPTIONS -------- */
[data-theme="dark"] .notif-options {
    background: var(--color-bg-gray) !important;
}

[data-theme="dark"] .notif-options label {
    color: var(--color-text-muted);
}

/* -------- SETTINGS TABS -------- */
[data-theme="dark"] .settings-tabs {
    background: var(--color-bg-gray);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .settings-tab {
    color: var(--color-text-muted);
}

[data-theme="dark"] .settings-tab:hover {
    color: var(--color-primary);
    background: rgba(74, 127, 193, 0.12);
}

[data-theme="dark"] .settings-tab--active {
    color: var(--color-primary);
    background: var(--color-bg);
    box-shadow: 0 2px 8px rgba(74, 127, 193, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* -------- DO NOT CONTACT (No contactar) -------- */
[data-theme="dark"] .help-box,
[data-theme="dark"] .bulk-box {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .help-box h3,
[data-theme="dark"] .bulk-box strong {
    color: var(--color-text);
}

[data-theme="dark"] .help-box p,
[data-theme="dark"] .help-box li,
[data-theme="dark"] .bulk-box p {
    color: var(--color-text-muted);
}

[data-theme="dark"] .help-box code {
    color: var(--color-text);
    background: var(--color-bg-gray);
}

[data-theme="dark"] .bulk-box textarea,
[data-theme="dark"] .page-leads .search-input,
[data-theme="dark"] .page-leads .form-input {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .page-leads .leads-container,
[data-theme="dark"] .page-leads .pagination {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .page-leads .header-section,
[data-theme="dark"] .page-leads .search-section,
[data-theme="dark"] .page-leads .leads-table th,
[data-theme="dark"] .page-leads .leads-table tbody tr {
    border-color: var(--color-border);
}

[data-theme="dark"] .page-leads .btn-back {
    background: var(--color-bg-gray);
    color: var(--color-text);
}

[data-theme="dark"] .page-leads .btn-back:hover {
    background: var(--color-bg);
}

/* -------- AUDIENCE SLIDER -------- */
[data-theme="dark"] .audience-slider-container {
    background: var(--color-bg-gray);
}

[data-theme="dark"] .audience-percent-label {
    color: var(--color-text-muted);
}

[data-theme="dark"] .audience-number-input {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* -------- INLINE REQUIRED ASTERISK -------- */
[data-theme="dark"] #keywordsRequired,
[data-theme="dark"] #initialMessageRequired {
    color: var(--color-danger) !important;
}

/* -------- TASK BOARD -------- */
[data-theme="dark"] .tb-page {
    background: var(--color-bg);
}

[data-theme="dark"] .tb-topbar {
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .tb-title {
    color: var(--color-text);
}

[data-theme="dark"] .tb-select {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .tb-btn-ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .tb-btn-ghost:hover {
    border-color: #4a7fc1;
    color: #90cdf4;
}

[data-theme="dark"] .tb-col {
    background: #1e2a3a;
    border-color: var(--color-border);
}

[data-theme="dark"] .tb-col.drag-over {
    border-color: #4a7fc1;
    background: #1a2e4a;
}

[data-theme="dark"] .tb-col-header {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .tb-col-count {
    background: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .tb-col[data-status="nice_to_have"] .tb-col-label { color: #718096; }
[data-theme="dark"] .tb-col[data-status="must_ship"]    .tb-col-label { color: #ed8936; }
[data-theme="dark"] .tb-col[data-status="in_progress"]  .tb-col-label { color: #63b3ed; }
[data-theme="dark"] .tb-col[data-status="in_review"]    .tb-col-label { color: #9f7aea; }
[data-theme="dark"] .tb-col[data-status="resolved"]     .tb-col-label { color: #48bb78; }

[data-theme="dark"] .tb-card {
    background: var(--color-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .tb-card:hover {
    border-color: #4a7fc1;
    box-shadow: 0 2px 12px rgba(74, 127, 193, 0.15);
}

[data-theme="dark"] .tb-card-title {
    color: var(--color-text);
}

[data-theme="dark"] .tb-card-meta {
    color: var(--color-text-muted);
}

[data-theme="dark"] .dc-coding          { background: #1a2e4a; color: #63b3ed; }
[data-theme="dark"] .dc-manychat        { background: #2d1b3a; color: #f9a8d4; }
[data-theme="dark"] .dc-mgmt            { background: #0d2818; color: #68d391; }
[data-theme="dark"] .dc-prompting_config { background: #2a2010; color: #f6ad55; }

[data-theme="dark"] .kc-quick_24h { background: #0d2818; color: #68d391; }
[data-theme="dark"] .kc-bug       { background: #2d1515; color: #fc8181; }
[data-theme="dark"] .kc-feature   { background: #1a2e4a; color: #63b3ed; }

[data-theme="dark"] .tb-avatar {
    background: #3a5f8a;
    border-color: var(--color-bg);
}
[data-theme="dark"] .tb-avatar.rv { background: #553d7a; }
[data-theme="dark"] .tb-avatar.rp { background: #4a5568; }

[data-theme="dark"] .tb-archived-toggle {
    background: #1e2a3a;
    border-top-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .tb-archived-toggle:hover { color: var(--color-text); }

[data-theme="dark"] .tb-archived-panel {
    background: #1e2a3a;
    border-top-color: var(--color-border);
}

[data-theme="dark"] .tb-archived-panel.drag-over {
    border-color: #4a7fc1;
    background: #1a2e4a;
}

[data-theme="dark"] .tb-modal {
    background: var(--color-bg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .tb-modal-header,
[data-theme="dark"] .tb-modal-footer {
    border-color: var(--color-border);
}

[data-theme="dark"] .tb-modal-title {
    color: var(--color-text);
}

[data-theme="dark"] .tb-modal-close {
    color: var(--color-text-muted);
}

[data-theme="dark"] .tb-modal-close:hover { color: var(--color-text); }

[data-theme="dark"] .form-label { color: var(--color-text-muted); }

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: var(--color-text-muted);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    border-color: var(--color-primary);
}

[data-theme="dark"] .tb-detail-panel {
    background: var(--color-bg);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tb-detail-header {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] #detailTitle { color: var(--color-text); }

[data-theme="dark"] .tb-section-label { color: #4a5568; }

[data-theme="dark"] #detailDesc { color: var(--color-text-muted); }

[data-theme="dark"] .tb-detail-meta-value { color: var(--color-text); }

[data-theme="dark"] .tb-note {
    background: #1e2a3a;
    border-color: var(--color-border);
}

[data-theme="dark"] .tb-note-meta { color: var(--color-text-muted); }
[data-theme="dark"] .tb-note-body { color: var(--color-text); }

[data-theme="dark"] .tb-detail-actions {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .tb-btn-edit {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .tb-btn-edit:hover {
    border-color: #4a7fc1;
    color: #90cdf4;
}

[data-theme="dark"] .tb-btn-archive {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .tb-btn-archive:hover {
    border-color: var(--color-border-dark);
    color: var(--color-text);
}

[data-theme="dark"] .tb-empty-col { color: var(--color-text-muted); }

[data-theme="dark"] .tb-img-item {
    background: #1e2a3a;
    border-color: var(--color-border);
}

[data-theme="dark"] .tb-img-item:hover { border-color: #4a7fc1; }

[data-theme="dark"] .tb-img-dropzone {
    border-color: var(--color-border);
}

[data-theme="dark"] .tb-img-dropzone:hover,
[data-theme="dark"] .tb-img-dropzone.dragover {
    border-color: #4a7fc1;
    background: #1a2e4a;
}

[data-theme="dark"] .tb-img-dropzone-icon { color: #4a7fc1; }

[data-theme="dark"] .tb-img-dropzone-text { color: var(--color-text-muted); }
[data-theme="dark"] .tb-img-dropzone-text strong { color: #63b3ed; }
[data-theme="dark"] .tb-img-dropzone-hint { color: #4a5568; }

[data-theme="dark"] .tb-img-uploading { color: var(--color-text-muted); }

[data-theme="dark"] .tb-toast {
    background: #e2e8f0;
    color: #1e293b;
}

/* -------- SURVEY MODAL -------- */
[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .modal-box {
    background: #1e2a3a !important;
    border: 1px solid #2d3748;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-box h3 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .modal-box .form-group label {
    color: #a0aec0 !important;
}

[data-theme="dark"] .modal-box .form-control {
    background: #0f172a !important;
    border-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .modal-box .form-control::placeholder {
    color: #64748b;
}

[data-theme="dark"] .modal-box .form-control:focus {
    border-color: var(--color-primary);
    background: #1e293b !important;
}

[data-theme="dark"] .modal-box .btn-cancel {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-theme="dark"] .modal-box .btn-cancel:hover {
    background: #3d4a5c;
}

[data-theme="dark"] .modal-box .btn-save {
    background: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .modal-box button[title="Cerrar"] {
    color: #a0aec0 !important;
}

[data-theme="dark"] .modal-box button[title="Cerrar"]:hover {
    color: #e2e8f0 !important;
}

/* -------- AI CONFIG TABS -------- */
[data-theme="dark"] .ai-tabs {
    background: var(--color-bg-gray);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .ai-tab--active {
    background: var(--color-bg-elevated);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* -------- GENERIC PAGE FORM CONTROLS -------- */
[data-theme="dark"] .main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
[data-theme="dark"] .main-content select,
[data-theme="dark"] .main-content textarea {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .main-content input::placeholder,
[data-theme="dark"] .main-content textarea::placeholder {
    color: var(--color-text-muted);
}

/* -------- CTA / V2 FLOW LIST -------- */
[data-theme="dark"] .cta-filter-select,
[data-theme="dark"] .cta-search-input {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .empty-state {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .empty-state h3 {
    color: var(--color-text);
}

/* -------- V2 FLOW EDITOR -------- */
[data-theme="dark"] .cf-topbar,
[data-theme="dark"] .cf-panel,
[data-theme="dark"] .cf-panel-footer {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .cf-panel-title-input,
[data-theme="dark"] .cf-form-group input,
[data-theme="dark"] .cf-form-group select,
[data-theme="dark"] .cf-form-group textarea {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .cf-canvas {
    background: var(--color-bg-light);
}

/* -------- FORMS BUILDER -------- */
[data-theme="dark"] .form-config-card,
[data-theme="dark"] .builder-section,
[data-theme="dark"] .question-card,
[data-theme="dark"] .form-container,
[data-theme="dark"] .delete-card {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .section-header,
[data-theme="dark"] .stats-bar {
    background: var(--color-bg-gray);
    border-color: var(--color-border);
}

[data-theme="dark"] .form-config-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .question-text,
[data-theme="dark"] .delete-title {
    color: var(--color-text);
}

[data-theme="dark"] .fp-msg-card {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .fp-msg-text {
    color: var(--color-text);
}

/* -------- CLOSER CRM + OPPORTUNITIES -------- */
[data-theme="dark"] .crm-table-wrap,
[data-theme="dark"] .opp-table-wrap {
    background: var(--color-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .crm-filters input,
[data-theme="dark"] .crm-filters select,
[data-theme="dark"] .crm-period-pill,
[data-theme="dark"] .crm-link-btn,
[data-theme="dark"] .btn-crm-hide,
[data-theme="dark"] .crm-pagination a,
[data-theme="dark"] .crm-pagination span,
[data-theme="dark"] .opp-section-pill,
[data-theme="dark"] .opp-inner-tab,
[data-theme="dark"] .opp-filters select,
[data-theme="dark"] .opp-filters input,
[data-theme="dark"] .opp-inline-input,
[data-theme="dark"] .opp-inline-select,
[data-theme="dark"] .crm-inline-input,
[data-theme="dark"] .crm-inline-select,
[data-theme="dark"] .crm-inline-textarea,
[data-theme="dark"] .opp-row:hover:not(.head) {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .crm-period-pill.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

[data-theme="dark"] .opp-inner-tab.active {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Status dropdowns (floating menu — most visible offender) */
[data-theme="dark"] .crm-status-trigger,
[data-theme="dark"] .crm-status-menu {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .crm-status-opt {
    color: var(--color-text);
}

[data-theme="dark"] .crm-status-opt:hover {
    background: var(--color-bg-hover);
}

[data-theme="dark"] .crm-status-opt.is-selected {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-primary);
}

[data-theme="dark"] .crm-status-trigger.is-disabled,
[data-theme="dark"] .crm-status-trigger:disabled,
[data-theme="dark"] .crm-close-cell.is-disabled .crm-inline-input,
[data-theme="dark"] .crm-close-cell.is-disabled .crm-inline-select,
[data-theme="dark"] .crm-close-cell.is-disabled .crm-inline-textarea,
[data-theme="dark"] .crm-col-objection .crm-inline-input:disabled {
    background: var(--color-bg-gray);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* Row tints (alpha overlays, not pale slabs) */
[data-theme="dark"] .crm-row--pending,
[data-theme="dark"] .opp-row--pending { background: rgba(127, 29, 29, 0.18); }
[data-theme="dark"] .crm-row--follow_up,
[data-theme="dark"] .opp-row--follow_up { background: rgba(180, 83, 9, 0.18); }
[data-theme="dark"] .crm-row--no_show,
[data-theme="dark"] .opp-row--no_show { background: var(--color-bg-gray); }
[data-theme="dark"] .crm-row--lost,
[data-theme="dark"] .opp-row--lost { background: rgba(127, 29, 29, 0.22); }
[data-theme="dark"] .crm-row--won,
[data-theme="dark"] .opp-row--won { background: rgba(22, 163, 74, 0.18); }

[data-theme="dark"] tr.is-default-flow td { background: rgba(22, 163, 74, 0.18) !important; }
[data-theme="dark"] tr.is-default-flow:hover td { background: rgba(22, 163, 74, 0.28) !important; }

/* -------- CONVERSATION PHASE CHIPS -------- */
[data-theme="dark"] .chip-new_lead,
[data-theme="dark"] .chip-survey { background: #0c2a47 !important; color: #7dd3fc !important; }
[data-theme="dark"] .chip-conversation { background: #0d2818 !important; color: #86efac !important; }
[data-theme="dark"] .chip-pitch_call { background: #3b2f0a !important; color: #fcd34d !important; }
[data-theme="dark"] .chip-pitch_sale { background: #3a1d0a !important; color: #fdba74 !important; }
[data-theme="dark"] .chip-link_call_sent { background: #3b0d4a !important; color: #d8b4fe !important; }
[data-theme="dark"] .chip-link_sale_sent { background: #2a1a4a !important; color: #c4b5fd !important; }
[data-theme="dark"] .chip-booked_call { background: #0d2818 !important; color: #86efac !important; }
[data-theme="dark"] .chip-sold { background: #0d2818 !important; color: #6ee7b7 !important; }
[data-theme="dark"] .chip-disqualified { background: #3a0d0d !important; color: #fca5a5 !important; }
[data-theme="dark"] .chip-lost { background: #3f0d1a !important; color: #fda4af !important; }
[data-theme="dark"] .chip-default { background: var(--color-bg-hover) !important; color: var(--color-text-muted) !important; }

/* Form v2 inline panel + conversation panels (massive inline-styled cluster) */
[data-theme="dark"] .form-v2-detail-panel,
[data-theme="dark"] .link-windows-panel,
[data-theme="dark"] .qual-panel {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* -------- VOICENOTES -------- */
[data-theme="dark"] .vn-modal,
[data-theme="dark"] .vn-modal-field input,
[data-theme="dark"] .vn-modal-field select,
[data-theme="dark"] .vn-modal-field textarea,
[data-theme="dark"] .vn-upload-field input[type=text],
[data-theme="dark"] .vn-upload-field input[type=file],
[data-theme="dark"] .btn-modal-cancel {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .vn-modal-title { color: var(--color-text); }
[data-theme="dark"] .vn-modal-field label { color: var(--color-text-light); }
[data-theme="dark"] .vn-name { color: var(--color-text); }
[data-theme="dark"] .vn-row { border-bottom-color: var(--color-border); }
[data-theme="dark"] .vn-row:hover { background: var(--color-bg-hover); }
[data-theme="dark"] .vn-row-header { background: var(--color-bg-gray); border-bottom-color: var(--color-border); }
[data-theme="dark"] .vn-table-header { background: var(--color-bg-gray); }
[data-theme="dark"] .vn-status-badge.pending { background: #3b2f0a; color: #fcd34d; border-color: #854d0e; }
[data-theme="dark"] .vn-tutorial,
[data-theme="dark"] .vn-flow-banner.has-url,
[data-theme="dark"] .vn-upload-card,
[data-theme="dark"] .vn-success-card,
[data-theme="dark"] .btn-copy-token {
    background: var(--color-bg-gray);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* -------- CTA / V2 FLOW PCT + STATUS BADGES -------- */
[data-theme="dark"] .pct-won { background: #0d2818 !important; color: #68d391 !important; }
[data-theme="dark"] .pct-lost { background: #3a0d0d !important; color: #fc8181 !important; }

[data-theme="dark"] .status-badge--active,
[data-theme="dark"] .status-badge.active,
[data-theme="dark"] .form-status-badge.active {
    background: #0d2818 !important;
    color: #68d391 !important;
    border-color: #166534 !important;
}

[data-theme="dark"] .status-badge.inactive,
[data-theme="dark"] .form-status-badge.inactive {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-muted) !important;
}

/* -------- TUTORIAL BARS (summary headings #3730a3 vanish in dark) -------- */
[data-theme="dark"] .cta-tutorials-bar summary,
[data-theme="dark"] .flow-tutorials-bar summary,
[data-theme="dark"] .cta-tutorial-item summary,
[data-theme="dark"] .flow-tutorial-item summary,
[data-theme="dark"] .vn-tutorial-header {
    color: var(--color-primary) !important;
}

/* -------- ANALYTICS TABS (#f1f5f9 / white bug) -------- */
[data-theme="dark"] .cta-section-tabs {
    background: var(--color-bg-hover);
}

[data-theme="dark"] .cta-section-tab--active {
    background: var(--color-bg-elevated);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35);
    color: var(--color-primary);
}

/* -------- CTA MODAL BITS -------- */
[data-theme="dark"] .cta-type-tab.active {
    background: var(--color-bg-elevated);
    color: var(--color-primary);
}

[data-theme="dark"] .cta-type-tab[data-type="outbound"].active {
    background: rgba(249, 115, 22, 0.15);
    color: var(--color-warning);
}

/* Keyword duplicate alert + IG rate-limit alert */
[data-theme="dark"] .keyword-duplicate-alert,
[data-theme="dark"] .keyword-duplicate-alert__body,
[data-theme="dark"] .keyword-duplicate-alert__icon,
[data-theme="dark"] .ig-rate-limit-alert {
    background: var(--color-alert-error-bg) !important;
    border-color: var(--color-alert-error-border) !important;
    color: var(--color-alert-error-text) !important;
}

[data-theme="dark"] .keyword-duplicate-alert strong,
[data-theme="dark"] .ig-rate-limit-alert__title,
[data-theme="dark"] .ig-rate-limit-alert__text,
[data-theme="dark"] .ig-rate-limit-alert__close {
    color: var(--color-alert-error-text) !important;
}

/* -------- V2 FLOW EDITOR BADGES + CONN LABELS -------- */
[data-theme="dark"] .cf-badge-entry,
[data-theme="dark"] .cf-badge-booked,
[data-theme="dark"] .cf-badge-ai { background: #0c2a47 !important; color: #7dd3fc !important; }
[data-theme="dark"] .cf-badge-sold,
[data-theme="dark"] .cf-badge-literal,
[data-theme="dark"] .cf-badge-form,
[data-theme="dark"] .cf-badge-phase-won { background: #0d2818 !important; color: #6ee7b7 !important; }
[data-theme="dark"] .cf-badge-not-sold,
[data-theme="dark"] .cf-badge-phase-lost { background: #3a0d0d !important; color: #fca5a5 !important; }
[data-theme="dark"] .cf-badge-disqualified,
[data-theme="dark"] .cf-badge-lost-term { background: #3a1d0a !important; color: #fdba74 !important; }
[data-theme="dark"] .cf-badge-image,
[data-theme="dark"] .cf-badge-loop,
[data-theme="dark"] .cf-badge-qual { background: #3b2f0a !important; color: #fcd34d !important; }
[data-theme="dark"] .cf-badge-voicenote { background: #2a1a4a !important; color: #c4b5fd !important; }
[data-theme="dark"] .cf-badge-phase-mid { background: #2a1a4a !important; color: #c4b5fd !important; }

[data-theme="dark"] .cf-conn-label.auto-pass { background: #0d2818 !important; border-color: #166534 !important; color: #6ee7b7 !important; }
[data-theme="dark"] .cf-conn-label.loop-label { background: #3b2f0a !important; border-color: #854d0e !important; color: #fcd34d !important; }
[data-theme="dark"] .cf-conn-label-qual-yes { background: #0d2818 !important; color: #6ee7b7 !important; }
[data-theme="dark"] .cf-conn-label-qual-mid { background: #3a1d0a !important; color: #fdba74 !important; }
[data-theme="dark"] .cf-conn-label-qual-no { background: #3a0d0d !important; color: #fca5a5 !important; }

/* Routing panel + mode cards */
[data-theme="dark"] .cf-routing-section,
[data-theme="dark"] .cf-vn-toggle-row.active,
[data-theme="dark"] .cf-mode-toggle-row.active,
[data-theme="dark"] .cf-form-step-toggle-row.active,
[data-theme="dark"] .cf-literal-toggle-row.active {
    background: var(--color-bg-gray) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .cf-step-mode-option:hover {
    background: var(--color-bg-hover);
}

/* -------- CONVERSATION LIST EXTRAS -------- */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-btn--secondary {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .convlist-table tr.row-selected td {
    background: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .btn-action--view,
[data-theme="dark"] .btn-action--info,
[data-theme="dark"] .btn-action--delete,
[data-theme="dark"] .fu-badge,
[data-theme="dark"] .creator-badge,
[data-theme="dark"] .btn-settings {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .fu-badge--high {
    background: var(--color-alert-warning-bg) !important;
    color: var(--color-alert-warning-text) !important;
    border-color: var(--color-alert-warning-border) !important;
}

/* -------- ANALYTICS SETUP MODAL -------- */
[data-theme="dark"] .analytics-setup-modal {
    background: var(--color-bg-elevated);
}

[data-theme="dark"] .analytics-setup-modal__title { color: var(--color-text); }
[data-theme="dark"] .analytics-setup-modal__body { color: var(--color-text-light); }
[data-theme="dark"] .analytics-setup-modal__close {
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
}

[data-theme="dark"] .analytics-setup-modal__close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

[data-theme="dark"] .analytics-setup-modal__icon {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

[data-theme="dark"] .analytics-setup-modal__btn--primary {
    background: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .analytics-setup-modal__btn--primary:hover {
    background: var(--color-primary-dark);
}

/* -------- CSM DASHBOARD PILLS -------- */
[data-theme="dark"] .rate-red,
[data-theme="dark"] .days-red { background: var(--color-alert-error-bg) !important; color: var(--color-alert-error-text) !important; }
[data-theme="dark"] .rate-yellow,
[data-theme="dark"] .days-yellow { background: var(--color-alert-warning-bg) !important; color: var(--color-alert-warning-text) !important; }
[data-theme="dark"] .rate-green,
[data-theme="dark"] .days-green,
[data-theme="dark"] .cost-badge { background: var(--color-alert-success-bg) !important; color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .rate-gray,
[data-theme="dark"] .days-gray { background: var(--color-bg-hover) !important; color: var(--color-text-muted) !important; }
[data-theme="dark"] .cost-mid { background: var(--color-alert-warning-bg) !important; color: var(--color-alert-warning-text) !important; }
[data-theme="dark"] .cost-high { background: var(--color-alert-error-bg) !important; color: var(--color-alert-error-text) !important; }
[data-theme="dark"] .agendas-num { color: var(--color-text) !important; }

/* -------- FLOW STEP RATES -------- */
[data-theme="dark"] .fs-alert { background: var(--color-alert-error-bg); border-color: var(--color-alert-error-border); color: var(--color-alert-error-text); }
[data-theme="dark"] .fs-table tr.fs-row--bottleneck { background: var(--color-alert-warning-bg); }
[data-theme="dark"] .fs-step-type { background: var(--color-alert-info-bg); color: var(--color-alert-info-text); }
[data-theme="dark"] .fs-bar { background: var(--color-bg-hover); }
[data-theme="dark"] .fs-notice { background: var(--color-alert-warning-bg); border-top-color: var(--color-alert-warning-border); color: var(--color-alert-warning-text); }
[data-theme="dark"] .fs-zero-banner { background: var(--color-alert-info-bg); border-color: var(--color-alert-info-border); color: var(--color-alert-info-text); }
[data-theme="dark"] .fs-zero-banner strong { color: var(--color-alert-info-text); }
[data-theme="dark"] .fs-terminal-badge { background: var(--color-alert-success-bg); color: var(--color-alert-success-text); }

/* -------- ANALYTICS PAGE (legacy stage chips + funnel toggle) -------- */
[data-theme="dark"] .stage-sub-chip { background: var(--color-bg-hover) !important; color: var(--color-text-muted) !important; }
[data-theme="dark"] .funnel-toggle-btn.active { background: var(--color-primary); color: #fff; }
[data-theme="dark"] .stage:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .flow-step-badge--entry { background: var(--color-alert-info-bg); color: var(--color-alert-info-text); }
[data-theme="dark"] .flow-step-badge--phase { background: var(--color-bg-hover); color: var(--color-text-light); }
[data-theme="dark"] .flow-notice { background: var(--color-alert-warning-bg); border-color: var(--color-alert-warning-border); color: var(--color-alert-warning-text); }

/* -------- CRM ANALYTICS PANEL EMBEDDED IN analytics.html -------- */
[data-theme="dark"] .creator-crm-section {
    --ca-bg: var(--color-bg-light);
    --ca-surface: var(--color-bg-elevated);
    --ca-border: var(--color-border);
    --ca-text: var(--color-text);
    --ca-muted: var(--color-text-muted);
    --ca-green: var(--color-success);
    --ca-green-bg: var(--color-alert-success-bg);
    --ca-green-border: var(--color-alert-success-border);
    --ca-blue: var(--color-primary);
    --ca-blue-light: var(--color-secondary);
    --ca-violet: #a78bfa;
    --ca-amber: var(--color-warning);
    --ca-red: var(--color-danger);
}

[data-theme="dark"] .ca-empty h3 { color: var(--color-text) !important; }
[data-theme="dark"] .ca-empty p { color: var(--color-text-muted) !important; }
[data-theme="dark"] .ca-empty svg,
[data-theme="dark"] .ca-empty i { color: var(--color-text-muted) !important; opacity: 0.6; }

/* -------- CONVERSATION DEBUG / DETAIL -------- */
[data-theme="dark"] .warnings-panel { background: var(--color-alert-warning-bg) !important; border-color: var(--color-alert-warning-border) !important; }
[data-theme="dark"] .warnings-title { color: var(--color-alert-warning-text) !important; }
[data-theme="dark"] .warning-item { color: var(--color-alert-warning-text) !important; }
[data-theme="dark"] .message-card-assistant { background: var(--color-alert-success-bg) !important; color: var(--color-text) !important; }
[data-theme="dark"] .message-card-system { background: var(--color-alert-warning-bg) !important; color: var(--color-text) !important; }
[data-theme="dark"] .log-card.error { background: var(--color-alert-error-bg) !important; border-color: var(--color-alert-error-border) !important; color: var(--color-text) !important; }
[data-theme="dark"] .log-card { background: var(--color-bg-gray) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .log-details { background: var(--color-bg-gray) !important; color: var(--color-text) !important; }
[data-theme="dark"] .flag-badge.active { background: var(--color-alert-success-bg) !important; color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .flag-badge.inactive { background: var(--color-alert-error-bg) !important; color: var(--color-alert-error-text) !important; }
[data-theme="dark"] .flag-badge.warning { background: var(--color-alert-warning-bg) !important; color: var(--color-alert-warning-text) !important; }

/* Inline "Links enviados" / "Context card" slabs in conversation_detail.html — target by inline-style wrappers */
[data-theme="dark"] .context-snapshot,
[data-theme="dark"] .kpi-card {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* -------- FOLLOWUPS extras -------- */
[data-theme="dark"] .fp-badge--has { background: var(--color-alert-success-bg) !important; color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .fp-status.ai-off-empty { background: var(--color-alert-error-bg) !important; color: var(--color-alert-error-text) !important; border-color: var(--color-alert-error-border) !important; }
[data-theme="dark"] .fp-status.ai-on-empty { border-color: var(--color-border-dark) !important; }
[data-theme="dark"] .fp-status-note.ai-on { background: var(--color-alert-info-bg) !important; color: var(--color-alert-info-text) !important; border-left-color: var(--color-primary) !important; }
[data-theme="dark"] .fp-status-note.ai-off { background: var(--color-alert-error-bg) !important; color: var(--color-alert-error-text) !important; border-left-color: var(--color-danger) !important; }
[data-theme="dark"] .fp-msg-order { background: var(--color-bg-hover) !important; color: var(--color-text-muted) !important; }
[data-theme="dark"] .fp-msg-btn.del:hover { background: var(--color-alert-error-bg) !important; color: var(--color-alert-error-text) !important; border-color: var(--color-alert-error-border) !important; }
[data-theme="dark"] .fp-modal-close:hover { background: var(--color-bg-hover) !important; }
[data-theme="dark"] .fp-phase-header { background: var(--color-bg-gray) !important; }
[data-theme="dark"] .var-chip { background: rgba(99, 102, 241, 0.15) !important; border-color: rgba(99, 102, 241, 0.4) !important; color: #c4b5fd !important; }
[data-theme="dark"] .var-chip:hover { background: rgba(99, 102, 241, 0.25) !important; }
[data-theme="dark"] .textarea-backdrop .var-highlight { background: rgba(99, 102, 241, 0.2) !important; }
[data-theme="dark"] .fp-image-upload-area:hover { background: var(--color-bg-hover) !important; }

/* -------- VOICENOTES extras -------- */
[data-theme="dark"] .vn-success-card { background: var(--color-bg-elevated) !important; border-color: var(--color-alert-success-border) !important; }
[data-theme="dark"] .vn-success-title { color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .vn-success-desc { color: var(--color-text-light) !important; }
[data-theme="dark"] .vn-success-token { background: rgba(99, 102, 241, 0.18) !important; color: #c4b5fd !important; }
[data-theme="dark"] .btn-mark-uploaded { background: var(--color-bg-elevated) !important; color: var(--color-success) !important; border-color: var(--color-success) !important; }
[data-theme="dark"] .btn-dl-m4a-row { background: var(--color-alert-warning-bg) !important; color: var(--color-alert-warning-text) !important; border-color: var(--color-alert-warning-border) !important; }
[data-theme="dark"] .btn-dl-m4a-row:hover { background: var(--color-alert-warning-border) !important; }
[data-theme="dark"] .vn-modal-check label { color: var(--color-text-light) !important; }
[data-theme="dark"] .vn-tutorial { background: var(--color-bg-elevated) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .vn-count-badge { background: var(--color-alert-warning-bg) !important; color: var(--color-alert-warning-text) !important; }

/* -------- FORM DEFAULT OUTCOME -------- */
[data-theme="dark"] .default-outcome-header { background: var(--color-alert-warning-bg) !important; border-bottom-color: var(--color-alert-warning-border) !important; }
[data-theme="dark"] .default-outcome-header .default-title,
[data-theme="dark"] .default-outcome-header .default-subtitle { color: var(--color-alert-warning-text) !important; }
[data-theme="dark"] .then-message-chip { background: var(--color-alert-success-bg) !important; border-color: var(--color-alert-success-border) !important; color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .outcome-edit-form { background: var(--color-bg-gray) !important; }
[data-theme="dark"] .new-outcome-form { background: var(--color-bg-gray) !important; }
[data-theme="dark"] .rr-display-chip { background: rgba(99, 102, 241, 0.15) !important; border-color: rgba(99, 102, 241, 0.4) !important; color: #c4b5fd !important; }
[data-theme="dark"] .question-card.dragging { background: var(--color-bg-hover) !important; }
[data-theme="dark"] .condition-row-new { background: var(--color-alert-success-bg) !important; border-color: var(--color-alert-success-border) !important; color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .logic-keyword.if-kw { background: rgba(124, 58, 237, 0.15) !important; color: #c4b5fd !important; }
[data-theme="dark"] .logic-keyword.then-kw { background: var(--color-alert-success-bg) !important; color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .logic-keyword.default-kw { background: var(--color-alert-warning-bg) !important; color: var(--color-alert-warning-text) !important; }

/* -------- AI SCRIPT QUALIFICATION + DESC GÉNERO -------- */
[data-theme="dark"] .criterion-row { background: var(--color-bg-gray) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
[data-theme="dark"] .criterion-row * { color: var(--color-text); }

/* -------- ACTION BUTTONS AS DARK CHIPS -------- */
[data-theme="dark"] .btn-action--edit,
[data-theme="dark"] .btn-action--analytics,
[data-theme="dark"] .btn-action--copy,
[data-theme="dark"] .btn-action--duplicate,
[data-theme="dark"] .btn-action--danger,
[data-theme="dark"] .btn-action--transfer,
[data-theme="dark"] .btn-action--assign,
[data-theme="dark"] .btn-action--view,
[data-theme="dark"] .btn-action--info,
[data-theme="dark"] .btn-action--delete,
[data-theme="dark"] .creator-copy-btn,
[data-theme="dark"] .btn-crm-hide,
[data-theme="dark"] .crm-link-btn {
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
}
[data-theme="dark"] .btn-action--edit,
[data-theme="dark"] .btn-action--analytics,
[data-theme="dark"] .btn-action--copy { color: #93c5fd !important; }
[data-theme="dark"] .btn-action--duplicate,
[data-theme="dark"] .btn-action--assign { color: var(--color-text-muted) !important; }
[data-theme="dark"] .btn-action--danger,
[data-theme="dark"] .btn-action--delete,
[data-theme="dark"] .btn-crm-hide { color: #fca5a5 !important; }
[data-theme="dark"] .btn-action--transfer { color: #fdba74 !important; }
[data-theme="dark"] .btn-action--view { color: #c4b5fd !important; }
[data-theme="dark"] .btn-action--info { color: #93c5fd !important; }
[data-theme="dark"] .creator-copy-btn { color: #93c5fd !important; border-color: var(--color-primary) !important; }
[data-theme="dark"] .crm-link-btn { color: #93c5fd !important; }

[data-theme="dark"] .btn-action--edit:hover,
[data-theme="dark"] .btn-action--analytics:hover,
[data-theme="dark"] .btn-action--copy:hover { background: rgba(59, 130, 246, 0.15) !important; border-color: var(--color-primary) !important; }
[data-theme="dark"] .btn-action--duplicate:hover,
[data-theme="dark"] .btn-action--assign:hover { background: var(--color-bg-hover) !important; }
[data-theme="dark"] .btn-action--danger:hover,
[data-theme="dark"] .btn-action--delete:hover,
[data-theme="dark"] .btn-crm-hide:hover { background: rgba(239, 68, 68, 0.15) !important; border-color: var(--color-danger) !important; }
[data-theme="dark"] .btn-action--transfer:hover { background: rgba(249, 115, 22, 0.15) !important; border-color: var(--color-warning) !important; }
[data-theme="dark"] .btn-action--view:hover,
[data-theme="dark"] .btn-action--info:hover { background: var(--color-bg-hover) !important; }
[data-theme="dark"] .creator-copy-btn:hover { background: rgba(59, 130, 246, 0.15) !important; }
[data-theme="dark"] .crm-link-btn:hover { background: rgba(59, 130, 246, 0.15) !important; }

/* -------- CRM SOURCE BADGES (inline pastels) -------- */
[data-theme="dark"] .crm-src-badge { background: var(--color-bg-elevated) !important; border: 1px solid var(--color-border) !important; }
[data-theme="dark"] .crm-src-badge--rebook { color: #fdba74 !important; border-color: #fdba74 !important; }
[data-theme="dark"] .crm-src-badge--cal { color: #86efac !important; border-color: #86efac !important; }
[data-theme="dark"] .crm-src-badge--form-booked { color: #fde68a !important; border-color: #fde68a !important; }
[data-theme="dark"] .crm-src-badge--form-web { color: #a5b4fc !important; border-color: #818cf8 !important; }
[data-theme="dark"] .crm-src-badge--form-web-booked { color: #c4b5fd !important; border-color: #a78bfa !important; }
[data-theme="dark"] .crm-src-badge--other { color: #a5b4fc !important; border-color: #a5b4fc !important; }

/* -------- OPPORTUNITIES BADGES + BANNERS + CARDS -------- */
[data-theme="dark"] .badge-source,
[data-theme="dark"] .badge-state-red,
[data-theme="dark"] .badge-state-yellow,
[data-theme="dark"] .badge-state-green,
[data-theme="dark"] .closer-0,
[data-theme="dark"] .closer-1,
[data-theme="dark"] .closer-2,
[data-theme="dark"] .opp-banner.blue,
[data-theme="dark"] .opp-banner.yellow,
[data-theme="dark"] .opp-banner.red {
    background: var(--color-bg-elevated) !important;
    border: 1px solid currentColor !important;
}
[data-theme="dark"] .badge-source { color: #a5b4fc !important; }
[data-theme="dark"] .badge-source.cal { color: #86efac !important; }
[data-theme="dark"] .badge-source.rebook { color: #fdba74 !important; }
[data-theme="dark"] .badge-state-red { color: #fca5a5 !important; }
[data-theme="dark"] .badge-state-yellow { color: #fde68a !important; }
[data-theme="dark"] .badge-state-green { color: #86efac !important; }
[data-theme="dark"] .closer-0 { color: #a5b4fc !important; }
[data-theme="dark"] .closer-1 { color: #86efac !important; }
[data-theme="dark"] .closer-2 { color: #fde68a !important; }
[data-theme="dark"] .opp-banner.blue { color: #93c5fd !important; }
[data-theme="dark"] .opp-banner.yellow { color: #fde68a !important; }
[data-theme="dark"] .opp-banner.red { color: #fca5a5 !important; }

[data-theme="dark"] .opp-form-tab.active[data-tab="completaron"] { color: #93c5fd !important; }
[data-theme="dark"] .opp-form-tab.active[data-tab="descalificados"] { color: #fde68a !important; }
[data-theme="dark"] .opp-form-tab.active[data-tab="no-completaron"] { color: #fca5a5 !important; }

/* Tutorial borders */
[data-theme="dark"] .cta-tutorial-item,
[data-theme="dark"] .flow-tutorial-item,
[data-theme="dark"] .opp-tutorial,
[data-theme="dark"] .forms-tutorial { border-color: var(--color-border) !important; }

/* -------- DEEP PASS: residual flashes / contrast -------- */
[data-theme="dark"] .flow-step-badge--entry { background: var(--color-alert-info-bg) !important; color: var(--color-alert-info-text) !important; }
[data-theme="dark"] .flow-step-badge--phase { background: var(--color-bg-hover) !important; color: var(--color-text-muted) !important; }
[data-theme="dark"] .stage-sub-chip { background: var(--color-bg-hover) !important; color: var(--color-text-muted) !important; }
[data-theme="dark"] .stage-sub-chip.call { background: var(--color-alert-info-bg) !important; color: var(--color-alert-info-text) !important; }
[data-theme="dark"] .stage-sub-chip.sale { background: var(--color-alert-warning-bg) !important; color: var(--color-alert-warning-text) !important; }
[data-theme="dark"] .stage-sub-chip.won { background: var(--color-alert-success-bg) !important; color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .stage-sub-chip.lost { background: var(--color-alert-error-bg) !important; color: var(--color-alert-error-text) !important; }

[data-theme="dark"] .cta-type-tab.active,
[data-theme="dark"] .apertura-tab.active {
    background: var(--color-bg-elevated) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .cta-type-tab[data-type="outbound"].active {
    background: var(--color-alert-warning-bg) !important;
    color: var(--color-alert-warning-text) !important;
}

[data-theme="dark"] .textarea-backdrop { background: var(--color-bg-elevated) !important; }

[data-theme="dark"] .cta-notice-warning,
[data-theme="dark"] .cta-outbound-notice {
    background: var(--color-alert-warning-bg) !important;
    border-color: var(--color-alert-warning-border) !important;
    color: var(--color-alert-warning-text) !important;
}

[data-theme="dark"] .pct-won { background: var(--color-alert-success-bg) !important; color: var(--color-alert-success-text) !important; }
[data-theme="dark"] .pct-lost { background: var(--color-alert-error-bg) !important; color: var(--color-alert-error-text) !important; }
[data-theme="dark"] .pct-grey { background: var(--color-bg-hover) !important; color: var(--color-text-muted) !important; }

[data-theme="dark"] .cta-status-badge.active,
[data-theme="dark"] .status-badge--active,
[data-theme="dark"] .status-badge.active {
    background: var(--color-alert-success-bg) !important;
    color: var(--color-alert-success-text) !important;
    border-color: var(--color-alert-success-border) !important;
}
[data-theme="dark"] .cta-status-badge.inactive,
[data-theme="dark"] .status-badge.inactive {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .fs-zero-banner {
    background: var(--color-alert-info-bg) !important;
    border-color: var(--color-alert-info-border) !important;
    color: var(--color-alert-info-text) !important;
}
[data-theme="dark"] .fs-zero-banner strong { color: var(--color-primary) !important; }

[data-theme="dark"] .cf-vn-toggle-row.active .cf-vn-toggle-icon,
[data-theme="dark"] .cf-mode-toggle-row.active .cf-mode-toggle-icon {
    background: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .main-content input[type="range"],
[data-theme="dark"] .audience-bar {
    background: var(--color-bg-hover) !important;
}

[data-theme="dark"] .icon-ring {
    background: var(--color-bg-hover) !important;
}

[data-theme="dark"] .rr-pill:hover,
[data-theme="dark"] .rr-closer-trigger:hover {
    background: var(--color-bg-hover) !important;
}

/* -------- ROUND 2: purple chips, gender, flow badges, mgmt -------- */
[data-theme="dark"] .chip-link_call_sent,
[data-theme="dark"] .chip-link_sale_sent {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #c4b5fd !important;
}
[data-theme="dark"] .cf-badge-link {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #c4b5fd !important;
}
[data-theme="dark"] .lead-gender-badge.gender-F {
    background: rgba(236, 72, 153, 0.2) !important;
    color: #f9a8d4 !important;
}
[data-theme="dark"] .lead-gender-badge.gender-M {
    background: var(--color-alert-info-bg) !important;
    color: var(--color-alert-info-text) !important;
}
[data-theme="dark"] .lead-profile-header {
    background: linear-gradient(135deg, var(--color-bg-gray) 0%, var(--color-bg-hover) 100%) !important;
}

[data-theme="dark"] .crm-header-note {
    background: var(--color-alert-info-bg) !important;
    color: var(--color-alert-info-text) !important;
    border-color: var(--color-alert-info-border) !important;
}
[data-theme="dark"] .crm-th-close {
    background: var(--color-alert-success-bg) !important;
    color: var(--color-alert-success-text) !important;
}

[data-theme="dark"] .fu-badge--high {
    background: var(--color-alert-warning-bg) !important;
    color: var(--color-alert-warning-text) !important;
    border-color: var(--color-alert-warning-border) !important;
}

[data-theme="dark"] .vn-flow-banner.has-url {
    background: var(--color-primary-light) !important;
    border-color: var(--color-border) !important;
    color: var(--color-alert-info-text) !important;
}
[data-theme="dark"] .vn-flow-banner.no-url {
    background: var(--color-alert-warning-bg) !important;
    border-color: var(--color-alert-warning-border) !important;
    color: var(--color-alert-warning-text) !important;
}
[data-theme="dark"] .vn-status-badge.approved {
    background: var(--color-alert-success-bg) !important;
    color: var(--color-alert-success-text) !important;
    border-color: var(--color-alert-success-border) !important;
}
[data-theme="dark"] .vn-container {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .v2q-modal {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .v2q-modal-header,
[data-theme="dark"] .v2q-modal-footer {
    background: var(--color-bg-gray) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .tb-drawer-panel,
[data-theme="dark"] .tb-drawer-pill {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .tb-drawer-panel-close:hover {
    background: var(--color-bg-hover) !important;
}
[data-theme="dark"] .tb-col[data-status="in_progress"],
[data-theme="dark"] .tb-col[data-status="must_ship"] {
    background: var(--color-bg-elevated) !important;
}

[data-theme="dark"] .cls-conv,
[data-theme="dark"] .cls-summary-body {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .cls-transcript { color: var(--color-text) !important; }

/* Simulate conversation / prompt lab */
[data-theme="dark"] .sim-panel,
[data-theme="dark"] .sim-card,
[data-theme="dark"] .mega-panel,
[data-theme="dark"] .prompt-lab,
[data-theme="dark"] .pl-row,
[data-theme="dark"] .pl-card {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .btn-pl-view {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-border) !important;
}

/* Sim V2: phase strip, flow map, decision diag (light lavender leftovers) */
[data-theme="dark"] .v2-step-strip {
    background: var(--color-bg-elevated) !important;
    border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .v2-step-strip-label { color: var(--color-text) !important; }
[data-theme="dark"] .v2-step-strip-hint,
[data-theme="dark"] .v2-step-toggle { color: #a5b4fc !important; }
[data-theme="dark"] .v2-step-strip-id {
    color: #c4b5fd !important;
    background: rgba(99, 102, 241, 0.2) !important;
}
[data-theme="dark"] .v2-flow-map-wrap,
[data-theme="dark"] .sim-v2-flow-diag {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .v2-flow-map-toolbar {
    background: var(--color-bg-gray) !important;
    border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .v2-flow-map-viewport {
    background:
        radial-gradient(circle at 1px 1px, rgba(129, 140, 248, 0.22) 1px, transparent 0) 0 0 / 16px 16px,
        var(--color-bg) !important;
}
[data-theme="dark"] .v2-flow-node rect {
    fill: var(--color-bg-elevated) !important;
    stroke: #6366f1 !important;
}
[data-theme="dark"] .v2-flow-node.is-visited rect {
    fill: rgba(99, 102, 241, 0.18) !important;
    stroke: #818cf8 !important;
}
[data-theme="dark"] .v2-flow-node-label { color: #e2e8f0 !important; }
[data-theme="dark"] .v2-flow-node-meta,
[data-theme="dark"] .sim-v2-diag-title,
[data-theme="dark"] .sim-v2-diag-k { color: #a5b4fc !important; }
[data-theme="dark"] .sim-v2-diag-block,
[data-theme="dark"] .v2-flow-detail,
[data-theme="dark"] .v2-step-instruction-box {
    background: var(--color-bg-gray) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .sim-v2-diag-row,
[data-theme="dark"] .v2-flow-detail-h { color: var(--color-text) !important; }
[data-theme="dark"] .sim-decision-chip {
    background: rgba(99, 102, 241, 0.18) !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
    color: #e0e7ff !important;
}
[data-theme="dark"] .v2-flow-path-chip {
    background: var(--color-bg-gray) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .team-table tr:hover td {
    background: var(--color-bg-hover) !important;
}
[data-theme="dark"] .setter-webhook-input {
    background: var(--color-bg-gray) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .setter-status--active {
    background: var(--color-alert-success-bg) !important;
    color: var(--color-alert-success-text) !important;
}
[data-theme="dark"] .setter-status--inactive {
    background: var(--color-alert-error-bg) !important;
    color: var(--color-alert-error-text) !important;
}

/* Soften form-v2 panel override: don't flatten badge colors */
[data-theme="dark"] .form-v2-detail-panel {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* -------- SETTINGS ACCOUNT BUTTONS -------- */
[data-theme="dark"] .btn-action--save {
    background: #16a34a !important;
    color: #fff !important;
    border-color: #16a34a !important;
}
[data-theme="dark"] .btn-action--save:hover {
    background: #15803d !important;
    color: #fff !important;
    border-color: #15803d !important;
}
[data-theme="dark"] .btn-action--test {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .btn-action--test:hover {
    background: var(--color-primary-dark) !important;
    color: #fff !important;
    border-color: var(--color-primary-dark) !important;
}
[data-theme="dark"] .btn-action--danger {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}
[data-theme="dark"] .btn-action--danger:hover {
    background: #b91c1c !important;
    color: #fff !important;
    border-color: #b91c1c !important;
}
[data-theme="dark"] .btn-invite {
    background: var(--color-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-invite:hover {
    background: var(--color-primary-dark) !important;
}
[data-theme="dark"] .btn-invite--secondary {
    background: transparent !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .btn-invite--secondary:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .pending-invite-item {
    background: var(--color-alert-warning-bg) !important;
    border-color: var(--color-alert-warning-border) !important;
    color: var(--color-alert-warning-text) !important;
}

/* -------- MGMT USERS -------- */
[data-theme="dark"] .users-table tbody tr:hover td {
    background: var(--color-bg-hover) !important;
}
[data-theme="dark"] .btn-icon-view {
    background: var(--color-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-icon-view:hover {
    background: var(--color-primary-dark) !important;
}
[data-theme="dark"] .btn-save-url {
    background: #16a34a !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-save-url:hover {
    background: #15803d !important;
}

/* -------- CREATE CREATOR -------- */
[data-theme="dark"] .btn-create,
[data-theme="dark"] .btn-copy {
    background: var(--color-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-create:hover,
[data-theme="dark"] .btn-copy:hover {
    background: var(--color-primary-dark) !important;
}
[data-theme="dark"] .btn-copy.copied {
    background: #16a34a !important;
}

/* -------- OPP HUB + SIM + FLOW residual -------- */
[data-theme="dark"] .badge-source,
[data-theme="dark"] .closer-0 {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #c4b5fd !important;
}
[data-theme="dark"] .cf-badge-link,
[data-theme="dark"] .cf-badge-voicenote {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #c4b5fd !important;
}
[data-theme="dark"] .cf-vn-toggle-row.active .cf-vn-toggle-icon,
[data-theme="dark"] .cf-mode-toggle-row.active .cf-mode-toggle-icon {
    background: rgba(99, 102, 241, 0.25) !important;
}
[data-theme="dark"] .pl-badge,
[data-theme="dark"] .v2-step-strip-badge.gate {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #e9d5ff !important;
}
[data-theme="dark"] .dc-manychat {
    background: rgba(236, 72, 153, 0.2) !important;
    color: #f9a8d4 !important;
}
[data-theme="dark"] .opp-row--pending {
    background: var(--color-alert-error-bg) !important;
}

/* -------- V2 FLOW EDITOR — STEP PANEL (fase, caminos, link, qual, VN) -------- */
[data-theme="dark"] .cf-trans-card,
[data-theme="dark"] .cf-paths-card,
[data-theme="dark"] .cf-condition-mode-sub,
[data-theme="dark"] .cf-vn-active-section,
[data-theme="dark"] .cf-qual-gate-active-section,
[data-theme="dark"] .cf-form-step-active-section,
[data-theme="dark"] .cf-link-modal__content {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .cf-trans-card-head,
[data-theme="dark"] .cf-paths-card-head {
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .cf-trans-card-head-icon,
[data-theme="dark"] .cf-paths-card-count,
[data-theme="dark"] .cf-link-help code,
[data-theme="dark"] .cf-link-var-chip {
    background: var(--color-primary-light) !important;
    color: var(--color-alert-info-text) !important;
    border-color: var(--color-alert-info-border) !important;
}
[data-theme="dark"] .cf-condition-mode-sub {
    background: var(--color-alert-info-bg) !important;
    border-color: var(--color-alert-info-border) !important;
}
[data-theme="dark"] .cf-condition-mode-sub::before {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-alert-info-border) !important;
}
[data-theme="dark"] .cf-condition-mode-sub-head,
[data-theme="dark"] .cf-condition-mode-sub-hint b,
[data-theme="dark"] .cf-paths-card-title,
[data-theme="dark"] .cf-trans-card-title {
    color: var(--color-alert-info-text) !important;
}
[data-theme="dark"] .cf-condition-mode-sub-hint {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .cf-phase-entry-badge {
    background: var(--color-alert-info-bg) !important;
    border-color: var(--color-alert-info-border) !important;
    color: var(--color-alert-info-text) !important;
}
[data-theme="dark"] .cf-vn-dup-warning,
[data-theme="dark"] .cf-loop-info,
[data-theme="dark"] #linkInstructionWarning {
    background: var(--color-alert-warning-bg) !important;
    border-color: var(--color-alert-warning-border) !important;
    color: var(--color-alert-warning-text) !important;
}
[data-theme="dark"] .cf-vn-dup-warning-title,
[data-theme="dark"] .cf-vn-dup-warning-text,
[data-theme="dark"] .cf-vn-dup-warning-hint,
[data-theme="dark"] .cf-btn-full.loop,
[data-theme="dark"] .cf-btn-full.orange {
    color: var(--color-alert-warning-text) !important;
    border-color: var(--color-alert-warning-border) !important;
}
[data-theme="dark"] .cf-btn-full.danger {
    border-color: var(--color-alert-error-border) !important;
    color: var(--color-alert-error-text) !important;
    background: var(--color-bg-elevated) !important;
}
[data-theme="dark"] .cf-qual-gate-toggle-row,
[data-theme="dark"] .cf-qual-gate-toggle-row.active,
[data-theme="dark"] .cf-qual-gate-summary {
    background: var(--color-alert-warning-bg) !important;
    border-color: var(--color-alert-warning-border) !important;
    color: var(--color-alert-warning-text) !important;
}
[data-theme="dark"] .cf-form-step-toggle-row.active {
    background: var(--color-alert-success-bg) !important;
    border-color: #0d9488 !important;
}
[data-theme="dark"] .cf-form-step-toggle-row.active .cf-form-step-toggle-icon {
    background: rgba(13, 148, 136, 0.25) !important;
    color: #5eead4 !important;
}
[data-theme="dark"] .cf-literal-toggle-row.active .cf-literal-toggle-icon {
    background: var(--color-alert-success-bg) !important;
}
[data-theme="dark"] .cf-tb-nota {
    background: var(--color-alert-warning-bg) !important;
    color: var(--color-alert-warning-text) !important;
    border-color: var(--color-alert-warning-border) !important;
}
[data-theme="dark"] .cf-link-modal__footer {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .cf-link-field input[type="text"],
[data-theme="dark"] .cf-form-group input,
[data-theme="dark"] .cf-form-group select,
[data-theme="dark"] .cf-form-group textarea,
[data-theme="dark"] .cf-panel-title-input {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .cf-trans-item {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .cf-toggle-row span,
[data-theme="dark"] .cf-form-group label,
[data-theme="dark"] .cf-section-label {
    color: var(--color-text) !important;
}
[data-theme="dark"] .cf-paths-card-empty {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .cf-multisel-chip,
[data-theme="dark"] .cf-dtc-list,
[data-theme="dark"] .cf-routing-section {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .drawflow .drawflow-node {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .cf-conn-inline-editor,
[data-theme="dark"] .cf-conn-popup {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .cf-badge-entry,
[data-theme="dark"] .cf-badge-booked,
[data-theme="dark"] .cf-badge-ai {
    background: #0c2a47 !important;
    color: #7dd3fc !important;
}

/* -------- POLICY CONTEXT -------- */
[data-theme="dark"] .policy-textarea {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .history-item--active {
    background: var(--color-alert-success-bg) !important;
    border-left-color: var(--color-success) !important;
}
[data-theme="dark"] .history-item__badge {
    background: var(--color-alert-success-bg) !important;
    color: var(--color-alert-success-text) !important;
}
[data-theme="dark"] .policy-editor-card,
[data-theme="dark"] .history-item {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .cf-postit--lemon {
    background-color: #3b2f0a !important;
    border-color: rgba(234, 179, 8, 0.35) !important;
    color: #fde68a !important;
}
[data-theme="dark"] .cf-postit--mint {
    background-color: #0d2818 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}
[data-theme="dark"] .cf-postit--mist {
    background-color: #1e1b4b !important;
    border-color: rgba(102, 126, 234, 0.35) !important;
    color: #c7d2fe !important;
}
[data-theme="dark"] .cf-postit--blush {
    background-color: #3b1220 !important;
    border-color: rgba(244, 114, 182, 0.35) !important;
    color: #f9a8d4 !important;
}

/* -------- PRETTY SELECT (cf-cs) — force dark surfaces -------- */
[data-theme="dark"] .cf-cs-trigger,
[data-theme="dark"] .cf-cs-menu,
[data-theme="dark"] .cf-pretty-select,
[data-theme="dark"] select.cf-pretty-select,
[data-theme="dark"] .cf-select-wrap select,
[data-theme="dark"] .cf-form-group .cf-cs-trigger,
[data-theme="dark"] .cf-link-row .cf-cs-trigger,
[data-theme="dark"] .cf-panel .cf-cs-trigger {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .cf-cs-trigger-label {
    color: var(--color-text) !important;
}
[data-theme="dark"] .cf-cs-trigger-label.placeholder {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .cf-cs-option {
    color: var(--color-text) !important;
    border-bottom-color: var(--color-border) !important;
    background: transparent !important;
}
[data-theme="dark"] .cf-cs-option:hover,
[data-theme="dark"] .cf-cs-option.active {
    background: var(--color-bg-hover) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .cf-cs-option.selected {
    background: var(--color-primary-light) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .cf-form-group input,
[data-theme="dark"] .cf-form-group textarea,
[data-theme="dark"] .cf-form-group select,
[data-theme="dark"] .cf-panel input[type="text"],
[data-theme="dark"] .cf-panel input[type="number"],
[data-theme="dark"] .cf-panel textarea {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    color-scheme: dark;
}

/* -------- Global form / modal contrast (conversation + Atlas) -------- */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    color-scheme: dark;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .stage-select,
[data-theme="dark"] .lead-input,
[data-theme="dark"] .lead-select,
[data-theme="dark"] .search-box input {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .channel-switch {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .channel-switch__btn {
    color: var(--color-text-muted);
}

[data-theme="dark"] .channel-switch__btn:hover:not(.is-disabled):not(.is-active) {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

[data-theme="dark"] .cc-criterion {
    background: var(--color-bg-elevated);
    color: var(--color-text);
}

[data-theme="dark"] .lead-gender-badge.gender-F {
    background: #4a044e !important;
    color: #f9a8d4 !important;
}

[data-theme="dark"] .analytics-setup-modal {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .cta-modal-content,
[data-theme="dark"] .logout-modal {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .modal-content label,
[data-theme="dark"] .modal-box label,
[data-theme="dark"] .cta-modal-body label {
    color: var(--color-text-light) !important;
}



/* ========== COMPONENTS ========== */
/* ========== BASE BUTTON ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-decoration: none;
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========== VARIANTS ========== */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn--primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.btn--secondary {
    background: var(--color-bg);
    color: var(--color-primary);
    border: 2px solid var(--color-border);
}

.btn--secondary:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--danger {
    background: var(--color-danger);
    color: var(--color-text-white);
}

.btn--danger:hover:not(:disabled) {
    background: var(--color-danger-dark);
}

.btn--success {
    background: var(--color-success);
    color: var(--color-text-white);
}

.btn--warning {
    background: var(--color-warning);
    color: var(--color-text-white);
}

/* ========== SIZES ========== */
.btn--small {
    padding: 8px var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn--large {
    padding: 16px var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* ========== FULL WIDTH ========== */
.btn--full {
    width: 100%;
}

/* ========== ICON BUTTONS ========== */
.btn .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

/* ========== BACK BUTTON ========== */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 12px var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
    margin-bottom: var(--spacing-lg);
}

.back-button:hover {
    background: var(--color-primary-dark);
}

/* ========== CLEAR FILTERS BUTTON ========== */
.clear-filters-btn {
    padding: 12px var(--spacing-lg);
    background: var(--color-bg-light);
    color: var(--color-text-light);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: var(--font-size-sm);
}

.clear-filters-btn:hover {
    background: var(--color-border-light);
    border-color: var(--color-border-dark);
}

/* ========== CREATE BUTTON ========== */
.create-btn {
    background: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    padding: 12px var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.create-btn:hover {
    background: var(--color-primary-dark);
}

/* ========== CONFIRM DUPLICATE BUTTON ========== */
.btn-confirm-duplicate {
    background: var(--color-warning);
    color: var(--color-text-white);
    border: none;
    padding: 10px var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    margin-top: var(--spacing-sm);
    transition: all var(--transition-base);
}

.btn-confirm-duplicate:hover {
    background: var(--color-warning-dark);
}

/* ========== LEGACY CLASSES (for backward compatibility) ========== */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: var(--color-bg);
    color: var(--color-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .back-button,
    .clear-filters-btn,
    .create-btn,
    .btn-confirm-duplicate {
        transition: none;
    }
}

/* ========== FORM CONTAINER ========== */
.form-container {
    padding: 80px var(--spacing-2xl) var(--spacing-2xl);
    max-width: var(--max-width-lg);
    margin: 0 auto;
    background: var(--color-bg-light);
    min-height: 100vh;
}

.form-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-md);
}

.form-card h1 {
    font-size: var(--font-size-3xl);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.form-card p {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xl);
}

/* ========== FORM GROUP ========== */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* ========== FORM CONTROLS ========== */
.form-control {
    width: 100%;
    padding: 12px var(--spacing-md);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: all var(--transition-base);
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.form-control:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: none;
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

select.form-control {
    cursor: pointer;
}

/* ========== FORM CHECK ========== */
.form-check-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form-check-input {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.form-check-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========== FORM HELP TEXT ========== */
.helptext {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
    display: block;
}

/* ========== FORM ACTIONS ========== */
.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.form-actions .btn {
    flex: 1;
}

/* ========== ERROR AND SUCCESS MESSAGES ========== */
.error-message {
    background: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
    padding: 12px var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid var(--color-danger);
}

.success-message {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
    padding: 12px var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid var(--color-success);
}

/* ========== FORM HEADER ========== */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.form-header-left {
    flex: 1;
    min-width: 200px;
}

.form-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.form-check-group--inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border-light);
}

/* ========== KEYWORDS DYNAMIC INPUTS ========== */
.keywords-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.keyword-input-wrapper {
    display: flex;
    width: 100%;
}

.keyword-input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.keyword-input {
    flex: 1;
    margin: 0;
}

/* Botón de eliminar usando clases del sistema */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    flex-shrink: 0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .form-container {
        padding: 60px var(--spacing-lg) var(--spacing-lg);
    }
    
    .form-card {
        padding: var(--spacing-lg);
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .keyword-input-group {
        flex-wrap: wrap;
    }
    
    .btn-remove-keyword {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-lg);
    }

    .form-control,
    .form-control-sm,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }
}

/* ========== BASE CARD ========== */
.card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.card-header {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.card-header h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 0;
}

.card-subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.card-body {
    padding: var(--spacing-xl);
}

.card-footer {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-gray);
}

/* ========== STAT CARD ========== */
.stat-card {
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    color: var(--color-text-white);
}

.stat-card--intervened {
    background: var(--gradient-warning);
}

.stat-card--active {
    background: var(--gradient-success);
}

.stat-label {
    font-size: var(--font-size-xs);
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
}

.stat-value {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
}

/* ========== CONVERSATION CARD ========== */
.conversation-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    cursor: pointer;
    border-left: 4px solid var(--color-primary);
    position: relative;
    overflow: hidden;
}

.conversation-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.conversation-card.closed {
    border-left-color: var(--color-neutral);
    opacity: 0.8;
}

.conversation-card.intervened {
    border-left-color: var(--color-warning);
}

.conversation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.conversation-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.conversation-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-family: monospace;
}

.conversation-lead {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.conversation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.conversation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    border-top: 2px solid var(--color-border-light);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.conversation-stats {
    display: flex;
    gap: var(--spacing-md);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ========== CTA CARD ========== */
.cta-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    cursor: pointer;
    border-left: 4px solid var(--color-primary);
}

.cta-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.cta-card.inactive {
    border-left-color: var(--color-neutral);
    opacity: 0.7;
}

.cta-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.cta-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.cta-description {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-relaxed);
}

.cta-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 2px solid var(--color-border-light);
}

/* ========== METRIC CARD ========== */
.metric-card {
    background: var(--color-bg-elevated);
    border-radius: 11px;
    border: 1px solid var(--color-border);
    padding: 20px 22px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.metric-card:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 22px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.metric-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--color-text-white);
    flex-shrink: 0;
}

.metric-icon.green {
    background: linear-gradient(145deg, #1e3a8a, #0f2a5a);
    box-shadow: 0 2px 8px rgba(15, 42, 95, 0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}

.metric-icon.blue {
    background: #3d4f65;
}

.metric-icon.orange {
    background: #4b5e73;
}

.metric-icon.purple {
    background: #2d3d52;
}

.metric-content {
    flex: 1;
}

.metric-label {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.metric-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.3px;
    line-height: 1.1;
}

/* ========== BASE BADGE ========== */
.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    line-height: 1;
}

/* ========== STAGE BADGES ========== */
.stage-badge {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
}

.stage-initial_contact {
    background: var(--color-badge-info-bg);
    color: var(--color-badge-info-text);
}

.stage-scripts {
    background: var(--color-badge-warning-bg);
    color: var(--color-badge-warning-text);
}


.stage-closed_qualified {
    background: var(--color-success);
    color: var(--color-text-white);
}

.stage-closed_unqualified {
    background: var(--color-danger);
    color: var(--color-text-white);
}

/* ========== STATUS BADGES ========== */
.status-badge {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
}

.status-badge.active {
    background: var(--color-success);
    color: var(--color-text-white);
}

.status-badge.inactive {
    background: var(--color-neutral);
    color: var(--color-text-white);
}

/* ========== INTERVENTION BADGE ========== */
.intervention-badge {
    background: var(--color-warning);
    color: var(--color-text-white);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
}

/* ========== CTA BADGE ========== */
.cta-badge {
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
}

.cta-keyword {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--spacing-sm);
}

.cta-status {
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

.cta-status.active {
    background: var(--color-success);
    color: var(--color-text-white);
}

.cta-status.inactive {
    background: var(--color-neutral);
    color: var(--color-text-white);
}

/* ========== MODEL BADGE ========== */
.model-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    background: var(--color-primary-light);
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
}

/* ========== PAGINATION ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 10px var(--spacing-md);
    background: var(--color-bg);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.pagination-btn:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg-light);
    color: var(--color-text-muted);
    border-color: var(--color-border-light);
}

.pagination-btn.disabled:hover {
    transform: none;
    box-shadow: none;
    background: var(--color-bg-light);
    color: var(--color-text-muted);
}

.pagination-info {
    padding: 10px var(--spacing-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.pagination-current {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

.pagination-current:hover {
    background: var(--color-primary-dark);
    color: var(--color-text-white);
}

/* ========== FILTERS SECTION ========== */
.filters-section {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}

.filters-actions {
    margin-top: var(--spacing-md);
    text-align: right;
}

.filters-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--spacing-md);
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.filter-group label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    text-transform: uppercase;
}

.filter-input,
.filter-select {
    padding: 12px var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* 16px on mobile avoids iOS input zoom; keep desktop at design token size */
@media (max-width: 768px) {
    .filter-input,
    .filter-select {
        font-size: 16px;
    }
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.filter-input:focus-visible,
.filter-select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: none;
}

.filter-input {
    width: 100%;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
    .filters-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== EMPTY STATE ========== */
.empty-state {
    text-align: center;
    padding: 60px var(--spacing-lg);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    grid-column: 1 / -1;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-lg);
    opacity: 0.5;
}

.empty-state-text {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.empty-state-subtext {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Atlas content skeletons — layout-preserving load placeholders */

@keyframes atlas-skel-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.atlas-skel {
    display: block;
    background: linear-gradient(
        90deg,
        var(--color-bg-gray, #f1f5f9) 25%,
        var(--color-border, #e2e8f0) 37%,
        var(--color-bg-gray, #f1f5f9) 63%
    );
    background-size: 400% 100%;
    animation: atlas-skel-shimmer 1.25s ease-in-out infinite;
    border-radius: var(--radius-md, 8px);
}

.atlas-skel--text {
    height: 10px;
    width: 42%;
    margin-bottom: 10px;
}

.atlas-skel--value {
    height: 28px;
    width: 58%;
    margin-bottom: 10px;
    border-radius: var(--radius-lg, 12px);
}

.atlas-skel--meta {
    height: 10px;
    width: 78%;
}

.atlas-skel--row {
    height: 14px;
    width: 100%;
    margin: 10px 0;
}

.atlas-skel--row-sm {
    height: 12px;
    width: 100%;
    margin: 8px 0;
}

.atlas-skel-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 14px;
    padding: 16px 18px 14px;
}

.atlas-skel-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.atlas-skel-grid > .atlas-skel-card {
    grid-column: span 4;
}

.atlas-skel-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.atlas-skel-table {
    width: 100%;
    border-collapse: collapse;
}

.atlas-skel-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    vertical-align: middle;
}

.atlas-skel-msg {
    margin: 0 0 12px;
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text-muted, #64748b);
}

.crm-panel-lazy,
.atlas-skel-panel {
    min-height: 120px;
}

.flow-steps-loading.atlas-skel-panel {
    padding: var(--spacing-md, 12px) 0;
}

@media (max-width: 1024px) {
    .atlas-skel-grid > .atlas-skel-card {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .atlas-skel-grid > .atlas-skel-card {
        grid-column: span 12;
    }
}

[data-theme="dark"] .atlas-skel {
    background: linear-gradient(
        90deg,
        var(--color-bg-gray, #1e293b) 25%,
        var(--color-border, #334155) 37%,
        var(--color-bg-gray, #1e293b) 63%
    );
    background-size: 400% 100%;
}

[data-theme="dark"] .atlas-skel-card {
    background: var(--color-bg, #0f172a);
}

/* ========== MESSAGES COMPONENT ========== */
.messages-container {
    margin-bottom: var(--spacing-lg);
}

.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.alert--success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
    border-color: var(--color-alert-success-border);
}

.alert--error {
    background: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
    border-color: var(--color-alert-error-border);
}

.alert--warning {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
    border-color: var(--color-alert-warning-border);
}

.alert--info {
    background: var(--color-alert-info-bg);
    color: var(--color-alert-info-text);
    border-color: var(--color-alert-info-border);
}

/* Legacy support for old class names */
.alert-success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
    border-color: var(--color-alert-success-border);
}

.alert-error {
    background: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
    border-color: var(--color-alert-error-border);
}

.alert-warning {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
    border-color: var(--color-alert-warning-border);
}

.alert-info {
    background: var(--color-alert-info-bg);
    color: var(--color-alert-info-text);
    border-color: var(--color-alert-info-border);
}


/* ========== LAYOUTS ========== */
/* ========== CONTAINERS ========== */
.container {
    max-width: var(--max-width-2xl);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-sm {
    max-width: var(--max-width-md);
}

.container-lg {
    max-width: var(--max-width-xl);
}

.container-full {
    max-width: 100%;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    width: calc(100% - var(--sidebar-width));
    background-color: var(--color-bg-light);
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    position: relative;
}

.main-content.sidebar-open {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

/* ========== PAGE CONTAINERS ========== */
/* Standard page container - use for most pages */
.page-container {
    padding: var(--spacing-2xl);
    max-width: 100%;
    width: 100%;
}

/* Page content wrapper */
.page-content {
    padding: var(--spacing-2xl);
    max-width: 100%;
    width: 100%;
}

/* ========== PAGE HEADER ========== */
.page-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-lg) var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
}

.page-header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.page-header__text {
    flex: 1;
    min-width: 200px;
}

.page-header__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs) 0;
}

.page-header__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin: 0;
}

.page-header__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.page-header--with-stats {
    padding-bottom: var(--spacing-xl);
}

.page-header__stats {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        width: 100%;
        padding-top: max(60px, calc(44px + env(safe-area-inset-top, 0px) + 16px));
    }
    
    .main-content.sidebar-open {
        margin-left: 0;
        width: 100%;
    }
    
    .page-container,
    .page-content {
        padding: var(--spacing-lg);
    }
    
    .page-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .page-header__content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-header__actions {
        width: 100%;
    }
    
    .page-header__title {
        font-size: var(--font-size-2xl);
    }
    
    .page-header__subtitle {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .main-content {
        padding-top: max(56px, calc(44px + env(safe-area-inset-top, 0px) + 12px));
    }
    
    .page-container,
    .page-content {
        padding: var(--spacing-md);
    }
    
    .page-header {
        padding: var(--spacing-sm) var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .page-header__title {
        font-size: var(--font-size-xl);
    }
    
    .page-header__actions {
        flex-direction: column;
    }
    
    .page-header__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========== GRID SYSTEM ========== */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.conversations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
    
    .conversations-grid,
    .cta-grid {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== SPACING UTILITIES ========== */
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

/* ========== TEXT UTILITIES ========== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }


/* ========== PAGES ========== */
/* ========== CHAT/CONVERSATION DETAIL PAGE ========== */
.chat-container {
    display: flex;
    height: 100vh;
    background: var(--color-bg-gray);
}

.chat-sidebar {
    width: 300px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
}

.conversation-info {
    flex: 1;
    overflow-y: auto;
}

.conversations-filter {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.conversations-filter h3 {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conversations-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.conversations-list::-webkit-scrollbar {
    width: 6px;
}

.conversations-list::-webkit-scrollbar-track {
    background: var(--color-bg-hover);
    border-radius: 3px;
}

.conversations-list::-webkit-scrollbar-thumb {
    background: var(--color-border-dark);
    border-radius: 3px;
}

.conversations-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

.conversation-item {
    padding: 10px var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-gray);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    color: inherit;
    display: block;
}

.conversation-item:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-dark);
}

.conversation-item.active {
    background: var(--gradient-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

.conversation-item-title {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item.active .conversation-item-title {
    color: var(--color-text-white);
}

.conversation-item-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-item.active .conversation-item-meta {
    color: rgba(255, 255, 255, 0.8);
}

.conversation-item-stage {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg);
    color: var(--color-primary);
}

.conversation-item.active .conversation-item-stage {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-white);
}

@media (max-width: 768px) {
    .chat-container {
        flex-direction: column;
        height: auto;
        min-height: 100dvh;
        min-height: 100vh;
    }

    .chat-sidebar {
        width: 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .chat-main {
        min-height: 60dvh;
    }
}

.conversation-info h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.conversation-meta {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.conversation-meta div {
    margin-bottom: var(--spacing-xs);
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chat-header {
    background: var(--color-bg);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-content h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.chat-header-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.detailed-mode-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px var(--spacing-md);
    background: var(--color-bg-hover);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.detailed-mode-toggle:hover {
    background: var(--color-border);
}

.detailed-mode-toggle.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.toggle-icon {
    font-size: var(--font-size-base);
}

.chat-messages {
    flex: 1;
    padding: var(--spacing-xl);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.message {
    display: flex;
    gap: var(--spacing-md);
    max-width: 800px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.message.user .message-avatar {
    background: var(--gradient-primary);
}

.message.assistant .message-avatar {
    background: var(--color-bg-hover);
}

.message-content {
    flex: 1;
}

.message-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
}

.message-author {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.message-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.message-text {
    background: var(--color-bg);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    font-size: 15px;
    line-height: var(--line-height-normal);
    color: var(--color-text);
    white-space: pre-wrap;
}

.message.user .message-text {
    background: var(--gradient-primary);
    color: var(--color-text-white);
    border: none;
}

.btn-metadata {
    padding: 4px 10px;
    font-size: 11px;
    background: var(--color-bg-hover);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: auto;
}

.btn-metadata:hover {
    background: var(--color-border);
    border-color: var(--color-border-dark);
}

.message-metadata {
    margin-top: var(--spacing-md);
    background: var(--color-bg-gray);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding: 0 var(--spacing-md);
    }
    to {
        opacity: 1;
        max-height: 1000px;
        padding: var(--spacing-md);
    }
}

.metadata-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.btn-close-metadata {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.btn-close-metadata:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.metadata-section {
    margin-bottom: var(--spacing-md);
}

.metadata-section:last-child {
    margin-bottom: 0;
}

.metadata-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metadata-content {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 14px;
    font-size: var(--font-size-xs);
    color: #e2e8f0;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    line-height: var(--line-height-normal);
    margin: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.metadata-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.metadata-content::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 4px;
}

.metadata-content::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.metadata-content::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.chat-input-container {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg) var(--spacing-xl);
}

.chat-input-form {
    display: flex;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}

.chat-input {
    flex: 1;
    padding: 14px var(--spacing-lg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 15px;
    resize: none;
    min-height: 52px;
    max-height: 200px;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.chat-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.send-button {
    padding: 14px var(--spacing-xl);
    background: var(--gradient-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.send-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========== LOADING INDICATOR ========== */
.loading-indicator {
    display: none;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-gray);
    border-radius: var(--radius-lg);
    max-width: 800px;
}

.loading-indicator.active {
    display: flex;
}

.loading-dots {
    display: flex;
    gap: var(--spacing-xs);
}

.loading-dot {
    width: 8px;
    height: 8px;
    background: var(--color-text-muted);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* ========== EMPTY CHAT ========== */
.empty-chat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
}

.empty-chat-content {
    max-width: 400px;
}

.empty-chat-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
}

.empty-chat-text {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

/* ========== BACKSTAGE PANEL ========== */
.backstage-panel {
    display: none;
    margin-top: var(--spacing-md);
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 2px solid #475569;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    animation: slideDown 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.backstage-panel.active {
    display: block;
}

.backstage-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid #475569;
}

.backstage-title {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.backstage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.backstage-item {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: var(--radius-md);
    padding: 10px var(--spacing-md);
}

.backstage-label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.backstage-value {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: #e2e8f0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.stage-arrow {
    display: inline-block;
    margin: 0 var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.followup-counter {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    background: var(--color-primary-light);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    margin-left: var(--spacing-sm);
    white-space: nowrap;
}

/* ========== COUNTDOWN MESSAGE ========== */
.countdown-message {
    background: var(--color-alert-warning-bg);
    border: 1px solid var(--color-alert-warning-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.countdown-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

.countdown-icon {
    font-size: var(--font-size-2xl);
}

.countdown-text {
    font-size: var(--font-size-sm);
    color: var(--color-alert-warning-text);
    font-weight: var(--font-weight-medium);
}

.countdown-timer {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-warning-dark);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    min-width: 50px;
    text-align: center;
}

.skip-button {
    background: var(--color-warning);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.skip-button:hover {
    background: var(--color-warning-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.skip-button:active {
    transform: translateY(0);
}

/* ========== AUTH PAGES (LOGIN/REGISTER) ========== */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
    padding: var(--spacing-lg);
}

.auth-card {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl);
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: 100%;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-heading);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    justify-content: center;
}

.auth-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-primary);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white);
    font-size: var(--font-size-2xl);
}

.auth-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.auth-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.form-input {
    width: 100%;
    padding: 12px var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    font-family: inherit;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15, 42, 95, 0.12);
}

.form-input.error {
    border-color: var(--color-danger);
}

.form-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: 6px;
}

.form-checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.form-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.form-checkbox-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.auth-divider-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-divider-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.auth-link {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.auth-link a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.alert-error {
    background: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
    border: 1px solid var(--color-alert-error-border);
}

.alert-success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
    border: 1px solid var(--color-alert-success-border);
}

.alert-warning {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
    border: 1px solid var(--color-alert-warning-border);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
    .auth-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    
    .auth-title {
        font-size: var(--font-size-2xl);
    }
}

/* ========== LANDING PAGE ========== */
.landing-container {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
}

.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.landing-logo-icon {
    width: 32px;
    height: 32px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white);
    font-size: var(--font-size-xl);
}

.landing-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.lang-selector {
    display: flex;
    gap: var(--spacing-sm);
}

.lang-selector a {
    padding: 6px var(--spacing-md);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}

.lang-selector a:hover,
.lang-selector a.active {
    background: var(--color-bg-hover);
    color: var(--color-primary);
}

.user-greeting {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.hero-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px var(--spacing-2xl);
    text-align: center;
}

.hero-title {
    font-size: 64px;
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
}

.hero-title .highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--font-size-2xl);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    margin-top: var(--spacing-lg);
}

.features-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px var(--spacing-2xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.feature-card {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-lg);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);
    border-top: 4px solid;
}

.feature-card:nth-child(1) .feature-card-icon {
    background: var(--color-primary-light);
    border-top-color: var(--color-secondary);
    color: var(--color-secondary);
}

.feature-card:nth-child(2) .feature-card-icon {
    background: var(--color-alert-error-bg);
    border-top-color: var(--color-danger);
    color: var(--color-danger);
}

.feature-card:nth-child(3) .feature-card-icon {
    background: var(--color-alert-success-bg);
    border-top-color: var(--color-success);
    color: var(--color-success);
}

.feature-card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: var(--font-size-lg);
    }
    
    .features-section {
        grid-template-columns: 1fr;
    }
    
    .landing-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .landing-header-right {
        flex-wrap: wrap;
    }
}


/* ========== DEBUG PAGES ========== */
.debug-button {
    width: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    border: none;
    padding: 12px;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.debug-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.conversation-header__content {
    flex: 1;
}

.meta-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.page-debug-conversations {
    padding: var(--spacing-2xl);
    max-width: 100%;
    width: 100%;
}

.conversation-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-gray);
    border-radius: var(--radius-md);
}

.conversation-stats .stat-item {
    text-align: center;
}

.conversation-stats .stat-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 3px;
}

.conversation-stats .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.conversation-date {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

@media (max-width: 768px) {
    .page-debug-conversations {
        padding: var(--spacing-lg);
    }
}
body.debug-page {
    background: var(--gradient-primary);
    min-height: 100vh;
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.debug-container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.debug-header {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-xl);
}

.debug-header h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.debug-header p {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
}

/* ========== MODAL ========== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.modal-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.modal-close {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

.modal-body {
    margin-bottom: var(--spacing-lg);
}

.modal-footer {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

.modal-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
}

.modal-btn-cancel {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.modal-btn-confirm {
    background: var(--color-warning);
    color: var(--color-text-white);
}

.modal-btn-confirm:hover {
    background: var(--color-warning-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

/* ========== FOLLOWUP & CHECKER BADGES ========== */
.followup-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    background: var(--color-secondary);
    color: var(--color-text-white);
    margin-left: var(--spacing-sm);
}

.checker-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    margin-left: var(--spacing-sm);
}

.checker-AVANZAR_NORMAL {
    background: var(--color-success);
    color: var(--color-text-white);
}

.checker-ACLARAR {
    background: var(--color-warning);
    color: var(--color-text-white);
}

.checker-CERRAR_INMEDIATO {
    background: var(--color-danger);
    color: var(--color-text-white);
}


/* ========== WEBHOOK LOGS PAGE ========== */
.container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* ========== HEADER ========== */
.header {
    background: var(--color-bg);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.header h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
}

.header p {
    color: var(--color-text-muted);
    font-size: 16px;
    margin-bottom: 20px;
}

/* ========== STATS ========== */
.stats-wrapper {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-top: 20px;
}

.stats-grid {
    display: grid;
    gap: 15px;
}

.stats-grid--main {
    grid-template-columns: repeat(3, 1fr);
    flex: 3;
}

.stats-grid--recovery {
    grid-template-columns: repeat(2, 1fr);
    flex: 2;
}

.stats-divider {
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--color-border), transparent);
    align-self: stretch;
}

@media (max-width: 900px) {
    .stats-wrapper {
        flex-direction: column;
    }
    .stats-divider {
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, transparent, var(--color-border), transparent);
    }
    .stats-grid--main {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .stats-grid--recovery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.stat-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-text-white);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.stat-card.success {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

.stat-card.error {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

/* ========== FILTERS ========== */
.filters {
    background: var(--color-bg);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.filter-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text);
    font-size: 14px;
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
    background: var(--color-bg);
    color: var(--color-text);
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-text-white);
}

.btn-secondary {
    background: var(--color-bg-hover);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* ========== LOGS CONTAINER ========== */
.logs-container {
    background: var(--color-bg);
    border-radius: 16px;
    padding: 30px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    margin-bottom: 30px;
}

/* ========== LOG ITEM ========== */
.log-item {
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Main info - siempre visible */
.log-main {
    padding: 20px;
    cursor: pointer;
    user-select: none;
}

.log-main-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.log-main-left {
    flex: 1;
    min-width: 300px;
}

.log-main-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.endpoint-badge {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-text-white);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    display: inline-block;
    margin-bottom: 10px;
}

.log-meta {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.log-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-badge {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.status-200, .status-201 { background: var(--color-success); color: var(--color-text-white); }
.status-400 { background: var(--color-warning); color: var(--color-text-white); }
.status-404 { background: var(--color-danger); color: var(--color-text-white); }
.status-500, .status-504 { background: var(--color-secondary); color: var(--color-text-white); }

.toggle-icon {
    font-size: 20px;
    transition: transform 0.3s;
}

.log-item.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* ========== STAGE FLOW ========== */
.stage-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.stage-badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    background: var(--color-badge-info-bg);
    color: var(--color-badge-info-text);
}

.stage-arrow {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 700;
}

.stage-badge.changed {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
    border: 2px solid var(--color-warning);
}

/* ========== ACTIONS GRID ========== */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.action-card {
    background: var(--color-bg-sunken);
    border-left: 4px solid var(--color-border-dark);
    padding: 12px;
    border-radius: 6px;
}

.action-card.executed {
    background: var(--color-alert-success-bg);
    border-left-color: var(--color-success);
}

.action-card.not-executed {
    background: var(--color-bg-light);
    border-left-color: var(--color-border);
    opacity: 0.6;
}

.action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.action-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
}

.action-status {
    font-size: 18px;
}

.action-details {
    font-size: 12px;
    color: var(--color-text-muted);
}

.action-value {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 6px;
    display: inline-block;
    color: var(--color-text);
}

.action-value.success {
    background: var(--color-success);
    color: var(--color-text-white);
    border-color: transparent;
}

.action-value.error {
    background: var(--color-danger);
    color: var(--color-text-white);
    border-color: transparent;
}

.action-value.warning {
    background: var(--color-warning);
    color: var(--color-text-white);
    border-color: transparent;
}

/* ========== SIMPLE INFO (Para otros webhooks) ========== */
.simple-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.info-badge {
    background: var(--color-badge-info-bg);
    color: var(--color-badge-info-text);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.info-badge.success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
}

.info-badge.error {
    background: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
}

.info-badge strong {
    font-weight: 700;
}

/* ========== DETAILS (EXPANDIBLE) ========== */
.log-details {
    display: none;
    border-top: 2px solid var(--color-border);
    padding: 20px;
    background: var(--color-bg-light);
}

.log-item.expanded .log-details {
    display: block;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr;
    }
}

.detail-box {
    background: var(--color-bg);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--color-border);
}

.detail-box h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-box pre {
    background: var(--color-bg-sunken);
    color: var(--color-code-text);
    padding: 12px;
    border-radius: 6px;
    font-size: 11px;
    margin: 0;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Courier New', monospace;
}

.metadata-table {
    width: 100%;
    font-size: 13px;
}

.metadata-table td {
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
}

.metadata-table td:first-child {
    font-weight: 600;
    color: var(--color-text-muted);
    width: 40%;
}

/* ========== INFO SECTIONS ========== */
.info-section {
    background: var(--color-bg);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--color-border);
    margin-bottom: 15px;
}

.info-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 8px;
}

.info-section-title.clickable {
    cursor: pointer;
    user-select: none;
}


.section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.section-content.expanded {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.collapse-indicator {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
    transition: transform 0.3s;
}

.info-section.collapsed .collapse-indicator {
    transform: rotate(-90deg);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.info-item {
    background: var(--color-bg-sunken);
    padding: 10px;
    border-radius: 6px;
    border-left: 3px solid var(--color-primary);
}

.info-item-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.info-item-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    word-break: break-word;
}

.info-item-value.success {
    color: var(--color-alert-success-text);
}

.info-item-value.error {
    color: var(--color-danger);
}

.info-item-value.neutral {
    color: var(--color-info);
}

.info-item--active {
    border-left-color: var(--color-success);
}

.info-item--inactive {
    border-left-color: var(--color-danger);
}

.info-item-value--routed {
    color: var(--color-warning);
    font-weight: 700;
}

.info-item-value--null {
    color: var(--color-text-muted);
}

/* ========== PAGINATION ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.pagination-btn {
    padding: 8px 16px;
    border: 2px solid var(--color-primary);
    background: var(--color-bg);
    color: var(--color-primary);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.pagination-btn.active {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.pagination-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-info {
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ========== NO LOGS ========== */
.no-logs {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.no-logs h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--color-text);
}

/* ========== INLINE STYLE REPLACEMENTS ========== */
.simple-info--spaced {
    margin-bottom: 15px;
}

.simple-info--spaced-sm {
    margin-bottom: 10px;
}

.info-badge--large {
    padding: 10px 16px;
    font-size: 14px;
}

.action-detail-box {
    margin-top: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 6px;
    border-radius: 4px;
}

.action-detail-box--warning {
    color: var(--color-alert-warning-text);
    background: var(--color-alert-warning-bg);
    padding: 6px;
    border-radius: 4px;
    border-left: 3px solid var(--color-warning);
}

.action-detail-box--success {
    color: var(--color-alert-success-text);
    background: var(--color-alert-success-bg);
    padding: 6px;
    border-radius: 4px;
    border-left: 3px solid var(--color-success);
}

.action-detail-box--link {
    margin-top: 8px;
    font-size: 10px;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 6px;
    border-radius: 4px;
    word-break: break-all;
}

.info-item--dynamic {
    border-left-color: var(--border-color, var(--color-primary));
}

.info-item-value--dynamic {
    color: var(--text-color, var(--color-text-muted));
    font-weight: var(--font-weight, 400);
}

.info-section-title--flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-box--spaced {
    margin: 10px 0;
}

.detail-box h5 {
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 14px;
}

.detail-box h5.detail-box__title--system {
    color: var(--color-info);
}

.detail-box h5.detail-box__title--config {
    color: var(--color-success);
}

.detail-box h5.detail-box__title--instruction {
    color: var(--color-warning);
}

.detail-box pre.detail-box__pre--system {
    background: var(--color-alert-info-bg);
    border-left: 4px solid var(--color-info);
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--color-alert-info-text);
}

.detail-box pre.detail-box__pre--config {
    background: var(--color-alert-success-bg);
    border-left: 4px solid var(--color-success);
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--color-alert-success-text);
}

.detail-box pre.detail-box__pre--instruction {
    background: var(--color-alert-warning-bg);
    border-left: 4px solid var(--color-warning);
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--color-alert-warning-text);
}

/* ========== BLOQUEO / RAZÓN (banner visible en lista de logs) ========== */
.log-block-reason-banner {
    margin: 0 0 16px 0;
    padding: 14px 18px;
    border-radius: 10px;
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
}

.log-block-reason-banner--danger {
    background: var(--color-alert-error-bg);
    border-color: var(--color-danger);
}

.log-block-reason-banner--warn {
    background: var(--color-alert-warning-bg);
    border-color: var(--color-warning);
}

.log-block-reason-banner--success {
    background: var(--color-alert-success-bg);
    border-color: var(--color-success);
}

.log-block-reason-banner--error {
    background: var(--color-primary-light);
    border-color: var(--color-secondary);
}

.log-block-reason-banner__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.92;
}

.log-block-reason-banner--danger .log-block-reason-banner__eyebrow {
    color: var(--color-alert-error-text);
}

.log-block-reason-banner--warn .log-block-reason-banner__eyebrow {
    color: var(--color-alert-warning-text);
}

.log-block-reason-banner--success .log-block-reason-banner__eyebrow {
    color: var(--color-alert-success-text);
}

.log-block-reason-banner--error .log-block-reason-banner__eyebrow {
    color: var(--color-primary);
}

.log-block-reason-banner__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-word;
    color: var(--color-text);
}

.log-block-reason-banner--danger .log-block-reason-banner__code {
    color: var(--color-alert-error-text);
}

.log-block-reason-banner--warn .log-block-reason-banner__code {
    color: var(--color-alert-warning-text);
}

.log-block-reason-banner--success .log-block-reason-banner__code {
    color: var(--color-alert-success-text);
}

.log-block-reason-banner--error .log-block-reason-banner__code {
    color: var(--color-primary);
}

.log-block-reason-banner__hint {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* ========== COMPACT DENSITY (webhook logs list) ========== */
.logs-page--compact .header {
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: 12px;
}

.logs-page--compact .header h1 {
    font-size: 22px;
    margin-bottom: 4px;
}

.logs-page--compact .header p {
    font-size: 13px;
    margin-bottom: 12px;
}

.logs-page--compact .stat-card {
    padding: 10px 12px;
    border-radius: 8px;
}

.logs-page--compact .stat-number {
    font-size: 22px;
}

.logs-page--compact .stat-label {
    font-size: 11px;
}

.logs-page--compact .filters {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
}

.logs-page--compact .filters-grid {
    gap: 10px;
    margin-bottom: 10px;
}

.logs-page--compact .filter-group label {
    font-size: 11px;
    margin-bottom: 4px;
}

.logs-page--compact .filter-group select,
.logs-page--compact .filter-group input {
    padding: 6px 10px;
    font-size: 12px;
}

.logs-page--compact .btn {
    padding: 6px 12px;
    font-size: 12px;
}

.logs-page--compact .logs-container {
    padding: 12px 14px;
    border-radius: 12px;
}

.logs-page--compact .log-item {
    border-width: 1px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.logs-page--compact .log-main {
    padding: 8px 10px;
}

.logs-page--compact .log-main-header {
    margin-bottom: 0;
    gap: 8px;
    align-items: center;
}

.logs-page--compact .log-main-left {
    min-width: 0;
}

.logs-page--compact .endpoint-badge {
    padding: 2px 8px;
    font-size: 11px;
    margin-bottom: 4px;
    border-radius: 4px;
}

.logs-page--compact .log-meta {
    gap: 8px 12px;
    font-size: 11px;
    margin-bottom: 4px;
}

.logs-page--compact .log-conv-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.logs-page--compact .log-meta-muted {
    color: #888;
    font-size: 10px;
}

.logs-page--compact .log-test-pill {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 700;
    margin-left: 4px;
    text-transform: uppercase;
}

.logs-page--compact .log-preview {
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 2px;
}

.logs-page--compact .log-preview--blocked {
    color: var(--color-alert-error-text);
    font-weight: 600;
}

.logs-page--compact .log-preview--response {
    color: #065f46;
}

.logs-page--compact .log-preview--input {
    color: #1d4ed8;
}

/* Preview solo en modo compacto colapsado */
.logs-page:not(.logs-page--compact) .log-preview {
    display: none;
}

/* Colapsado: solo fila densa + preview; detalle al expandir */
.logs-page--compact .log-item:not(.expanded) .log-main-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}

.logs-page--compact .log-item:not(.expanded) .endpoint-badge {
    margin-bottom: 0;
}

.logs-page--compact .log-item:not(.expanded) .log-meta {
    margin-bottom: 0;
    display: inline-flex;
    flex-wrap: wrap;
}

.logs-page--compact .log-item:not(.expanded) .log-preview {
    flex-basis: 100%;
    margin-top: 0;
}

.logs-page--compact .log-item:not(.expanded) .log-block-reason-banner,
.logs-page--compact .log-item:not(.expanded) .log-main-extras {
    display: none;
}

.logs-page--compact .log-item.expanded .log-preview {
    display: none;
}

.logs-page--compact .status-badge {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 4px;
}

.logs-page--compact .toggle-icon {
    font-size: 12px;
}

.logs-page--compact .log-main-right span[style*="Recuperado"] {
    padding: 2px 6px !important;
    font-size: 9px !important;
}

.logs-page--compact .log-item.expanded .log-block-reason-banner {
    margin: 0 0 8px 0;
    padding: 8px 10px;
    border-radius: 6px;
    border-width: 1px;
}

.logs-page--compact .log-item.expanded .log-block-reason-banner__eyebrow {
    font-size: 9px;
    margin-bottom: 4px;
}

.logs-page--compact .log-item.expanded .log-block-reason-banner__code {
    font-size: 12px;
}

.logs-page--compact .log-item.expanded .log-block-reason-banner__hint {
    font-size: 11px;
    margin-top: 6px;
}

.logs-page--compact .log-item.expanded .highlighted-message {
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    border-left-width: 3px !important;
}

.logs-page--compact .log-item.expanded .highlighted-message > div:first-child {
    font-size: 9px !important;
    margin-bottom: 4px !important;
}

.logs-page--compact .log-item.expanded .highlighted-message > div:last-child {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.logs-page--compact .log-item.expanded .actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 8px !important;
}

.logs-page--compact .log-item.expanded .action-card,
.logs-page--compact .log-item.expanded .action-card[style] {
    padding: 8px !important;
    border-radius: 6px !important;
}

.logs-page--compact .log-item.expanded .simple-info {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    gap: 6px;
}

.logs-page--compact .log-item.expanded .info-badge,
.logs-page--compact .log-item.expanded .info-badge[style] {
    padding: 4px 8px !important;
    font-size: 11px !important;
}

.logs-page--compact .log-item.expanded .stage-flow {
    margin-bottom: 8px;
}

.logs-page--compact .log-item.expanded .stage-badge {
    padding: 3px 8px;
    font-size: 11px;
}

.logs-page--compact .log-details {
    padding: 10px 12px;
}

.logs-page--compact .flow-events-diag-banner {
    margin-bottom: 12px !important;
    padding: 10px 12px !important;
}

.logs-page--compact .pagination {
    margin-top: 16px;
}
/* ========== THEMED BLOCKS (light + dark) ========== */
.flow-events-diag-banner {
    margin: 0 0 20px 0;
    padding: 14px 18px;
    border-radius: 10px;
    border: 2px solid var(--color-border);
    background: var(--color-bg-gray);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
}
.flow-events-diag-banner--ok {
    border-color: var(--color-success);
    background: var(--color-alert-success-bg);
}
.flow-events-diag-banner--error {
    border-color: var(--color-danger);
    background: var(--color-alert-error-bg);
}
.flow-events-diag-banner--neutral {
    border-color: var(--color-border-dark);
    background: var(--color-bg-gray);
}
.flow-events-diag-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--color-text);
}
.flow-events-diag-banner--ok .flow-events-diag-title { color: var(--color-alert-success-text); }
.flow-events-diag-banner--error .flow-events-diag-title { color: var(--color-alert-error-text); }
.flow-events-diag-stat {
    padding: 10px 14px;
    background: var(--color-bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.flow-events-diag-stat--focus {
    border-color: var(--color-border-dark);
}
.flow-events-diag-banner--ok .flow-events-diag-stat--focus { border-color: var(--color-success); }
.flow-events-diag-banner--error .flow-events-diag-stat--focus { border-color: var(--color-danger); }
.flow-events-diag-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.flow-events-diag-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    margin-top: 4px;
}
.flow-events-diag-banner--ok .flow-events-diag-stat--focus .flow-events-diag-value,
.flow-events-diag-banner--ok .flow-events-diag-stat--focus .flow-events-diag-label { color: var(--color-alert-success-text); }
.flow-events-diag-banner--error .flow-events-diag-stat--focus .flow-events-diag-value,
.flow-events-diag-banner--error .flow-events-diag-stat--focus .flow-events-diag-label { color: var(--color-alert-error-text); }
.flow-events-diag-hint { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }
.flow-events-diag-chip {
    padding: 3px 10px;
    background: var(--color-bg-elevated);
    border-radius: 9999px;
    font-size: 11px;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.flow-events-diag-foot { font-size: 11px; color: var(--color-text-muted); line-height: 1.5; }

.highlighted-message {
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    border-left: 4px solid var(--color-border);
}
.highlighted-message--recovery {
    background: var(--color-alert-warning-bg);
    border-left-color: #f97316;
}
.highlighted-message--response {
    background: var(--color-alert-success-bg);
    border-left-color: #10b981;
}
.highlighted-message--input {
    background: var(--color-alert-info-bg);
    border-left-color: #3b82f6;
}
.highlighted-message__label,
.highlighted-message > div:first-child {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.highlighted-message--recovery > div:first-child { color: var(--color-alert-warning-text) !important; }
.highlighted-message--response > div:first-child { color: var(--color-alert-success-text) !important; }
.highlighted-message--input > div:first-child { color: var(--color-alert-info-text) !important; }
.highlighted-message > div:last-child {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-text) !important;
}

.action-card {
    cursor: pointer;
    padding: 14px;
    border-radius: 10px;
    border: 2px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text);
}
.action-card.executed.action-card--intent, .action-card--intent {
    background: var(--color-alert-warning-bg);
    border-color: #f59e0b;
}
.action-card--intent .action-title { color: var(--color-alert-warning-text) !important; }
.action-card.executed.action-card--precheck-skip, .action-card--precheck-skip {
    background: var(--color-bg-gray);
    border-style: dashed;
    border-color: var(--color-border-dark);
    opacity: 0.85;
}
.action-card.executed.action-card--precheck-objection, .action-card--precheck-objection {
    background: rgba(168, 85, 247, 0.12);
    border-color: #a855f7;
}
.action-card.executed.action-card--precheck-clarify, .action-card--precheck-clarify {
    background: var(--color-alert-warning-bg);
    border-color: #f59e0b;
}
.action-card.executed.action-card--precheck-continue, .action-card--precheck-continue {
    background: var(--color-alert-info-bg);
    border-color: #3b82f6;
}
.action-card--precheck-na {
    background: var(--color-bg-gray);
    border-style: dashed;
    border-color: var(--color-border);
    opacity: 0.7;
    cursor: default;
}
.action-card.executed.action-card--qualify-yes, .action-card--qualify-yes {
    background: var(--color-alert-success-bg);
    border-color: var(--color-success);
}
.action-card--qualify-yes .action-title { color: var(--color-alert-success-text) !important; }
.action-card.executed.action-card--qualify-no, .action-card--qualify-no {
    background: var(--color-alert-error-bg);
    border-color: var(--color-danger);
}
.action-card--qualify-no .action-title { color: var(--color-alert-error-text) !important; }
.action-card.executed.action-card--qualify-mid, .action-card--qualify-mid {
    background: var(--color-alert-warning-bg);
    border-color: #f59e0b;
}
.action-card--qualify-mid .action-title { color: var(--color-alert-warning-text) !important; }
.action-card.executed.action-card--postcheck, .action-card--postcheck {
    background: var(--color-alert-success-bg);
    border-color: var(--color-success);
}
.action-card--postcheck .action-title { color: var(--color-alert-success-text) !important; }
.action-card.not-executed {
    background: var(--color-bg-gray);
    border-color: var(--color-border);
    opacity: 0.7;
}
.action-meta-box,
.action-meta-grid {
    background: var(--color-bg-elevated);
    border-radius: 6px;
    color: var(--color-text);
}

.log-banner {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid var(--color-border);
}
.log-banner--link {
    background: var(--color-alert-success-bg);
    border-left-color: #22c55e;
    color: var(--color-alert-success-text);
}
.log-banner--link div { color: inherit !important; }
.log-banner--pipeline {
    background: rgba(168, 85, 247, 0.12);
    border-left-color: #a855f7;
    color: #7e22ce;
}
[data-theme="dark"] .log-banner--pipeline { color: #c4b5fd; }

.llm-meta-card {
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--color-border);
    background: var(--color-bg-elevated);
}
.llm-meta-card--model {
    background: var(--color-alert-info-bg);
    border-left-color: #6366f1;
}
.llm-meta-card--temp {
    background: var(--color-alert-warning-bg);
    border-left-color: #f59e0b;
}
.llm-meta-card--tokens {
    background: var(--color-alert-success-bg);
    border-left-color: #10b981;
}
.llm-meta-card > div:first-child {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted) !important;
}
.llm-meta-card > div:last-child {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--color-text) !important;
}

.llm-msg {
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--color-border);
    background: var(--color-bg-gray);
}
.llm-msg--user {
    background: var(--color-alert-info-bg);
    border-left-color: #3b82f6;
}
.llm-msg--assistant {
    background: var(--color-alert-success-bg);
    border-left-color: #10b981;
}
.llm-msg pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    color: var(--color-text) !important;
    max-height: 300px;
    overflow-y: auto;
}

/* Neutralize leftover hard light pills inside themed cards */
[data-theme="dark"] .action-card [style*="background: #fef9c3"],
[data-theme="dark"] .action-card [style*="background: #fffbeb"],
[data-theme="dark"] .action-card [style*="background: #fee2e2"],
[data-theme="dark"] .action-card [style*="background: #f3f4f6"],
[data-theme="dark"] .action-card [style*="background: #d1fae5"],
[data-theme="dark"] .action-card [style*="background: #fef3c7"],
[data-theme="dark"] .checker-metadata [style*="background:"] {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .action-card [style*="color: #92400e"],
[data-theme="dark"] .action-card [style*="color: #7e22ce"],
[data-theme="dark"] .action-card [style*="color: #1e40af"],
[data-theme="dark"] .action-card [style*="color: #166534"],
[data-theme="dark"] .action-card [style*="color: #6b7280"],
[data-theme="dark"] .action-card [style*="color: #9ca3af"] {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .stat-pct { color: inherit !important; }
.llm-msg__role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    color: var(--color-text-muted);
}
.llm-msg--user .llm-msg__role { color: var(--color-alert-info-text); }
.llm-msg--assistant .llm-msg__role { color: var(--color-alert-success-text); }
.llm-msg--other { background: rgba(139, 92, 246, 0.12); border-left-color: #8b5cf6; }
.llm-msg--other .llm-msg__role { color: #a78bfa; }


/* --- pretty-select.css --- */
/*
 * Pretty Select — custom dropdown para reemplazar el select nativo del SO.
 * El <select> real queda oculto como fuente de verdad; el dropdown custom
 * se crea por JS (pretty-select.js / window.cfEnhanceSelect).
 *
 * Uso básico:
 *   <select class="cf-pretty-select">...</select>
 * El JS lo detecta automáticamente y lo transforma.
 *
 * Variables requeridas (definidas globalmente o por la vista que lo usa):
 *   --cf-border, --cf-muted, --cf-text, --cf-primary, --cf-primary-light, --cf-surface
 * Si no estan definidas, caen a tokens globales / fallback.
 */

/* ── Wrapper generado por JS ─────────────────────────────── */
.cf-cs {
    position: relative;
    display: block;
    width: 100%;
    font-family: inherit;
}
.cf-cs-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
    margin: 0;
}

/* ── Trigger (botón visible) ─────────────────────────────── */
.cf-cs-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 34px 9px 12px;
    border: 1.5px solid var(--cf-border, var(--color-border, #e2e8f0));
    border-radius: 9px;
    background: var(--cf-surface, var(--color-bg-elevated, #fff));
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-family: inherit;
    text-align: left;
    user-select: none;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    color: var(--cf-text, var(--color-text, #1e293b));
}
.cf-cs-trigger:hover {
    border-color: var(--color-primary, #a5b4fc);
    background: var(--color-bg-hover, #fafbff);
}
.cf-cs-trigger:focus-visible {
    outline: 2px solid var(--cf-primary, var(--color-primary, #667eea));
    outline-offset: 2px;
}
.cf-cs.open .cf-cs-trigger {
    border-color: var(--cf-primary, var(--color-primary, #667eea));
    background: var(--cf-primary-light, var(--color-primary-light, #eef2ff));
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.cf-cs.disabled .cf-cs-trigger {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--color-bg-gray, #f8fafc);
}

/* ── Label dentro del trigger ────────────────────────────── */
.cf-cs-trigger-label {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm, 14px);
    font-weight: 500;
    color: var(--cf-text, var(--color-text, #1e293b));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .cf-cs-trigger-label {
        font-size: 16px; /* avoid iOS zoom on focus */
    }
}
.cf-cs-trigger-label.placeholder {
    color: var(--cf-muted, var(--color-text-muted, #64748b));
    font-weight: 400;
}

/* ── Chevron ─────────────────────────────────────────────── */
.cf-cs-trigger-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--cf-muted, var(--color-text-muted, #64748b));
    pointer-events: none;
    transition: transform 0.18s ease, color 0.15s;
}
.cf-cs-trigger:hover .cf-cs-trigger-chevron {
    color: var(--cf-primary, var(--color-primary, #4f46e5));
}
.cf-cs.open .cf-cs-trigger-chevron {
    transform: translateY(-50%) rotate(180deg);
    color: var(--cf-primary, var(--color-primary, #667eea));
}

/* ── Menú desplegable ────────────────────────────────────── */
.cf-cs-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--cf-surface, var(--color-bg-elevated, #fff));
    border: 1.5px solid var(--cf-border, var(--color-border, #e0e7ff));
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
    display: none;
    animation: cfSelectIn 0.12s ease;
    color: var(--cf-text, var(--color-text, #1e293b));
}
@keyframes cfSelectIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cf-cs.open .cf-cs-menu { display: block; }
.cf-cs-menu.drop-up {
    top: auto;
    bottom: calc(100% + 5px);
}

/* ── Opciones ────────────────────────────────────────────── */
.cf-cs-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--cf-text, var(--color-text, #1e293b));
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    border-bottom: 1px solid var(--color-border-light, var(--color-border, #f1f5f9));
    line-height: 1.35;
}
.cf-cs-option:last-child { border-bottom: none; }
.cf-cs-option:hover,
.cf-cs-option.active {
    background: var(--color-bg-hover, #fafbff);
    color: var(--cf-primary, var(--color-primary, #667eea));
}
.cf-cs-option.selected {
    background: var(--cf-primary-light, var(--color-primary-light, #eef2ff));
    color: var(--cf-primary, var(--color-primary, #667eea));
    font-weight: 600;
}
.cf-cs-option.disabled {
    color: var(--cf-muted, var(--color-text-muted, #64748b));
    cursor: not-allowed;
    background: var(--cf-surface, var(--color-bg-elevated, #fff));
    opacity: 0.6;
}
.cf-cs-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-cs-option-check {
    font-size: 10px;
    color: var(--cf-primary, var(--color-primary, #667eea));
    visibility: hidden;
    flex-shrink: 0;
}
.cf-cs-option.selected .cf-cs-option-check { visibility: visible; }

/* ── Estado vacío ────────────────────────────────────────── */
.cf-cs-menu-empty {
    padding: 12px;
    font-size: 11.5px;
    color: var(--cf-muted, var(--color-text-muted, #64748b));
    text-align: center;
    font-style: italic;
}

/* ── Scrollbar fino ──────────────────────────────────────── */
.cf-cs-menu::-webkit-scrollbar { width: 8px; }
.cf-cs-menu::-webkit-scrollbar-thumb {
    background: var(--color-border-dark, #cbd5e1);
    border-radius: 4px;
}
.cf-cs-menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted, #94a3b8);
}

/* ── Backwards-compat: cf-pretty-select sin enhance (fallback nativo) ── */
.cf-select-wrap { position: relative; display: block; width: 100%; }
.cf-pretty-select,
select.cf-pretty-select {
    width: 100%;
    padding: 9px 34px 9px 12px;
    border: 1.5px solid var(--cf-border, var(--color-border, #e2e8f0));
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cf-text, var(--color-text, #1e293b));
    background: var(--cf-surface, var(--color-bg-elevated, #fff));
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
    line-height: 1.35;
}

/* ── Dark mode (belt-and-suspenders; tokens already flip) ── */
[data-theme="dark"] .cf-cs-trigger,
[data-theme="dark"] .cf-cs-menu,
[data-theme="dark"] .cf-pretty-select,
[data-theme="dark"] select.cf-pretty-select {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .cf-cs-trigger-label {
    color: var(--color-text) !important;
}
[data-theme="dark"] .cf-cs-trigger-label.placeholder,
[data-theme="dark"] .cf-cs-trigger-chevron,
[data-theme="dark"] .cf-cs-menu-empty {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .cf-cs-trigger:hover {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .cf-cs.open .cf-cs-trigger {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .cf-cs.disabled .cf-cs-trigger {
    background: var(--color-bg-gray) !important;
}
[data-theme="dark"] .cf-cs-option {
    color: var(--color-text) !important;
    border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .cf-cs-option:hover,
[data-theme="dark"] .cf-cs-option.active {
    background: var(--color-bg-hover) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .cf-cs-option.selected {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .cf-cs-option.disabled {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .cf-cs-menu::-webkit-scrollbar-thumb {
    background: var(--color-border-dark) !important;
}