/* =========================================
   CSS Custom Variables - Dark Mode Palette
   ========================================= */
:root {
    --bg-base: #f3f4f6;
    --bg-surface: #ffffff;
    --bg-elevated: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: rgba(0, 0, 0, 0.08);
}

.dark {
    --bg-base: #0f1117;
    --bg-surface: #1a1d27;
    --bg-elevated: #21253a;
    --bg-chat: #131620;
    --bg-panel: #1a1d27;
    --bg-sidebar: #111318;
    --bg-input: #252836;
    --bg-input-focus: #2d3148;
    --text-primary: #e8eaf0;
    --text-secondary: #8b90a0;
    --text-muted: #555c72;
    --border-color: rgba(255, 255, 255, 0.06);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --accent-teal: #2dd4bf;
    --accent-blue: #60a5fa;
    --msg-outgoing-asesor: rgba(20, 184, 166, 0.18);
    --msg-outgoing-bot: rgba(59, 130, 246, 0.15);
    --msg-incoming: rgba(255, 255, 255, 0.05);
}

/* =========================================
   Light Mode - CRM Overrides
   ========================================= */

/* Sub-nav bar - light mode */
html:not(.dark) .crm-subnav {
    background-color: #ffffff !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
}

/* Sub-nav bar - dark mode (restore) */
.dark .crm-subnav {
    background-color: #161923 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Sub-nav links - light mode */
html:not(.dark) .crm-subnav a {
    color: #4b5563 !important;
}

html:not(.dark) .crm-subnav a:hover {
    color: #111827 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Active sub-nav link - light mode */
html:not(.dark) .crm-subnav a.text-teal-300,
html:not(.dark) .crm-subnav a.bg-teal-500\/20 {
    color: #0d9488 !important;
    background-color: rgba(13, 148, 136, 0.1) !important;
}

/* Search input in subnav - light mode */
html:not(.dark) .crm-subnav input[type="text"] {
    background-color: #f3f4f6 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #111827 !important;
}

html:not(.dark) .crm-subnav input[type="text"]::placeholder {
    color: #9ca3af !important;
}

html:not(.dark) .crm-subnav input[type="text"]:focus {
    background-color: #ffffff !important;
    border-color: rgba(13, 148, 136, 0.5) !important;
}

html:not(.dark) .crm-subnav .fa-search {
    color: #9ca3af !important;
}

/* Search results dropdown - light mode */
html:not(.dark) .crm-subnav [x-show] {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .crm-subnav [x-show] a {
    color: #374151 !important;
}

html:not(.dark) .crm-subnav [x-show] a:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Bandeja - filter button group + Monitor IA incoming bubble */
html:not(.dark) .bg-gray-800\/60 {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

/* Bandeja - filter buttons inactive state */
html:not(.dark) .bg-gray-800\/60 button.text-gray-400 {
    color: #6b7280 !important;
}

/* Bandeja - select (etiquetas) */
html:not(.dark) select.bg-gray-700\/50,
html:not(.dark) select.text-gray-200 {
    background-color: #f3f4f6 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #374151 !important;
}

/* Bandeja - "Solo activas" label */
html:not(.dark) label.text-gray-400 {
    color: #6b7280 !important;
}

/* Bandeja - checkbox */
html:not(.dark) input[type="checkbox"].bg-gray-700 {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

/* Bandeja - conversation card */
html:not(.dark) .bg-gray-800\/50 {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) .bg-gray-800\/50:hover,
html:not(.dark) .hover\:bg-gray-700\/60:hover {
    background-color: #f0fdf9 !important;
    border-color: rgba(13, 148, 136, 0.3) !important;
}

/* Conversation card - name text */
html:not(.dark) .text-gray-100 {
    color: #111827 !important;
}

/* Conversation card - last message text */
html:not(.dark) .bg-gray-800\/50 .text-gray-400,
html:not(.dark) .bg-gray-800\/50 p.text-gray-400 {
    color: #6b7280 !important;
}

/* Conversation card - timestamp */
html:not(.dark) .text-gray-500 {
    color: #9ca3af !important;
}

/* Pagination buttons */
html:not(.dark) .bg-gray-700\/50 {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

html:not(.dark) .hover\:bg-gray-600\/50:hover {
    background-color: #d1d5db !important;
}

/* ---- Filter buttons: selected state text visibility ---- */
/* "Todas" selected: teal-300 text is invisible on light bg → use dark teal */
html:not(.dark) .bg-teal-500\/30 {
    background-color: rgba(13, 148, 136, 0.18) !important;
    color: #0f766e !important;
}

/* "Bot" selected: blue-300 text invisible on light bg */
html:not(.dark) .bg-blue-500\/30 {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #1d4ed8 !important;
}

/* "Pendientes" selected: yellow-300 invisible on light bg */
html:not(.dark) .bg-yellow-500\/30 {
    background-color: rgba(234, 179, 8, 0.18) !important;
    color: #92400e !important;
}

/* "Asesor" selected: green-300 invisible on light bg */
html:not(.dark) .bg-green-500\/30 {
    background-color: rgba(34, 197, 94, 0.18) !important;
    color: #166534 !important;
}

/* Filter button inactive text */
html:not(.dark) .bg-gray-800\/60 button {
    color: #4b5563 !important;
}

/* ---- Page titles (text-gray-200 used as heading) ---- */
html:not(.dark) h1.text-gray-200,
html:not(.dark) h2.text-gray-200 {
    color: #111827 !important;
}

/* ---- Section headings (text-gray-300) ---- */
html:not(.dark) h2.text-gray-300,
html:not(.dark) h3.text-gray-300 {
    color: #374151 !important;
}

/* ---- Dashboard KPI cards ---- */
html:not(.dark) .text-teal-300 {
    color: #0d9488 !important;
}

html:not(.dark) .text-blue-300 {
    color: #1d4ed8 !important;
}

html:not(.dark) .text-purple-300 {
    color: #7c3aed !important;
}

html:not(.dark) .text-green-300 {
    color: #166534 !important;
}

/* ---- Monitor IA: robot icon area - soften blue ---- */
html:not(.dark) .bg-blue-500\/15 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}

html:not(.dark) .text-blue-400 {
    color: #6366f1 !important;
}

/* Monitor IA panels */
html:not(.dark) .bg-gray-800\/40 {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .bg-gray-900\/30 {
    background-color: #f9fafb !important;
}

html:not(.dark) .bg-gray-900\/20 {
    background-color: #f3f4f6 !important;
}

/* Monitor IA: active filter pills */
html:not(.dark) .bg-blue-500\/20 {
    background-color: rgba(99, 102, 241, 0.12) !important;
}

html:not(.dark) .bg-emerald-500\/20 {
    background-color: rgba(16, 185, 129, 0.12) !important;
}

html:not(.dark) .bg-emerald-500\/15 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

html:not(.dark) .bg-yellow-500\/20 {
    background-color: rgba(234, 179, 8, 0.12) !important;
}

html:not(.dark) .bg-yellow-500\/15 {
    background-color: rgba(234, 179, 8, 0.1) !important;
}

html:not(.dark) .bg-purple-500\/15 {
    background-color: rgba(168, 85, 247, 0.1) !important;
}

/* Monitor IA: conversation list item selected + outgoing bot bubble */
html:not(.dark) .bg-blue-500\/10 {
    background-color: rgba(99, 102, 241, 0.09) !important;
    color: #312e81 !important;
}

/* Monitor IA: chat bubbles (outgoing asesor) */
html:not(.dark) .bg-emerald-500\/10 {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #064e3b !important;
}

/* Monitor IA: text-blue-100 / text-emerald-100 in light mode */
html:not(.dark) .text-blue-100 {
    color: #312e81 !important;
}

html:not(.dark) .text-emerald-100 {
    color: #064e3b !important;
}

html:not(.dark) .text-emerald-300 {
    color: #065f46 !important;
}

html:not(.dark) .text-yellow-300 {
    color: #92400e !important;
}

html:not(.dark) .text-yellow-400 {
    color: #b45309 !important;
}

/* Config form background + Dashboard table header */
html:not(.dark) .bg-gray-700\/30 {
    background-color: #f3f4f6 !important;
}

html:not(.dark) table thead th.text-gray-500 {
    color: #6b7280 !important;
}

html:not(.dark) table tbody td.text-gray-200 {
    color: #111827 !important;
}

html:not(.dark) .hover\:bg-gray-700\/20:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Dashboard: bar chart date labels */
html:not(.dark) .text-gray-600 {
    color: #9ca3af !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .bg-gray-900\/40 {
    background-color: #e2e8f0 !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .bg-gray-800\/50 {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .bg-gray-700\/20,
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .bg-gray-700\/30,
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .bg-gray-700\/40,
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .bg-gray-700\/50 {
    background-color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .text-gray-100,
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .text-gray-200 {
    color: #0f172a !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .text-gray-300 {
    color: #1f2937 !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .text-gray-400 {
    color: #475569 !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .text-gray-500 {
    color: #334155 !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .text-teal-300 {
    color: #0f766e !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .text-cyan-300 {
    color: #0e7490 !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] .text-amber-200 {
    color: #92400e !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] input[type="text"],
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] input[type="number"],
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] input[type="text"]::placeholder,
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] input[type="number"]::placeholder,
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] textarea::placeholder {
    color: #64748b !important;
}

html:not(.dark) body.crm-config-active [x-data="crmConfig()"] input[type="text"]:focus,
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] input[type="number"]:focus,
html:not(.dark) body.crm-config-active [x-data="crmConfig()"] textarea:focus {
    border-color: rgba(13, 148, 136, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}

html:not(.dark) body.crm-config-active label:has(input[x-model="distribucion.timeout_no_aceptado.accion"][value="reasignar"]:checked),
html:not(.dark) body.crm-config-active label:has(input[x-model="distribucion.timeout_sin_respuesta.accion"][value="reasignar"]:checked) {
    background-color: rgba(20, 184, 166, 0.2) !important;
    color: #0f766e !important;
    border-color: rgba(13, 148, 136, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.18), 0 8px 20px -12px rgba(13, 148, 136, 0.45) !important;
}

html:not(.dark) body.crm-config-active label:has(input[x-model="distribucion.timeout_no_aceptado.accion"][value="cola_general"]:checked),
html:not(.dark) body.crm-config-active label:has(input[x-model="distribucion.timeout_sin_respuesta.accion"][value="cola_general"]:checked) {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #92400e !important;
    border-color: rgba(217, 119, 6, 0.62) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2), 0 8px 20px -12px rgba(180, 83, 9, 0.45) !important;
}

html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left {
    background-color: #f8fafc !important;
    border-right-color: rgba(15, 23, 42, 0.14) !important;
}

html:not(.dark) [x-data="crmAsesor()"] .bg-gray-950\/30,
html:not(.dark) [x-data="crmAsesor()"] .bg-gray-950\/20 {
    background-color: #f1f5f9 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .bg-gray-900\/40,
html:not(.dark) [x-data="crmAsesor()"] .bg-gray-900\/90 {
    background-color: #e2e8f0 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .bg-gray-800\/40,
html:not(.dark) [x-data="crmAsesor()"] .bg-gray-700\/50,
html:not(.dark) [x-data="crmAsesor()"] .bg-white\/5 {
    background-color: #ffffff !important;
}

html:not(.dark) [x-data="crmAsesor()"] .border-white\/10,
html:not(.dark) [x-data="crmAsesor()"] .border-white\/8,
html:not(.dark) [x-data="crmAsesor()"] .border-white\/5 {
    border-color: rgba(148, 163, 184, 0.38) !important;
}

html:not(.dark) [x-data="crmAsesor()"] .text-gray-100 {
    color: #0f172a !important;
}

html:not(.dark) [x-data="crmAsesor()"] .text-gray-500 {
    color: #334155 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .text-gray-400 {
    color: #475569 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .hover\:text-white:hover {
    color: #0f172a !important;
}

html:not(.dark) [x-data="crmAsesor()"] .text-teal-300 {
    color: #0f766e !important;
}

html:not(.dark) [x-data="crmAsesor()"] .text-green-300 {
    color: #166534 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .text-yellow-300 {
    color: #92400e !important;
}

html:not(.dark) [x-data="crmAsesor()"] .text-teal-50 {
    color: #115e59 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .text-blue-100 {
    color: #1e3a8a !important;
}

html:not(.dark) [x-data="crmAsesor()"] .bg-white\/6 {
    background-color: #f8fafc !important;
}

html:not(.dark) [x-data="crmAsesor()"] .hover\:bg-gray-700\/50:hover,
html:not(.dark) [x-data="crmAsesor()"] .hover\:bg-gray-600\/50:hover {
    background-color: #ecfeff !important;
}

html:not(.dark) [x-data="crmAsesor()"] textarea {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html:not(.dark) [x-data="crmAsesor()"] textarea::placeholder {
    color: #64748b !important;
}

html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left .text-xs.font-medium.text-gray-100 {
    color: #0b1220 !important;
    font-weight: 600 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left .text-xs.text-gray-500.truncate {
    color: #475569 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left .text-xs.text-gray-500.flex-shrink-0 {
    color: #334155 !important;
    font-weight: 600 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left .text-yellow-400,
html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left .text-teal-400 {
    color: #0f766e !important;
    font-weight: 600 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left .rounded-xl.bg-teal-500\/20 {
    background-color: rgba(13, 148, 136, 0.14) !important;
    border-color: rgba(13, 148, 136, 0.42) !important;
    box-shadow: 0 4px 12px -10px rgba(13, 148, 136, 0.42) !important;
}

html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left .bg-yellow-500\/20 {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #92400e !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
}

html:not(.dark) [x-data="crmAsesor()"] .crm-panel-left .bg-green-500\/20 {
    background-color: rgba(34, 197, 94, 0.18) !important;
    color: #166534 !important;
    border: 1px solid rgba(22, 163, 74, 0.34) !important;
}

html:not(.dark) [x-data="crmAsesor()"] #chat-messages .opacity-50 {
    opacity: 0.72 !important;
    color: #334155 !important;
}

html:not(.dark) [x-data="crmAsesor()"] .bg-teal-500\/15 .opacity-50,
html:not(.dark) [x-data="crmAsesor()"] .bg-blue-500\/15 .opacity-50 {
    color: rgba(15, 23, 42, 0.72) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) {
    --crm-light-surface-0: #ffffff;
    --crm-light-surface-1: #f8fafc;
    --crm-light-surface-2: #f1f5f9;
    --crm-light-surface-3: #e2e8f0;
    --crm-light-border-soft: rgba(148, 163, 184, 0.38);
    --crm-light-border-strong: rgba(15, 23, 42, 0.14);
    --crm-light-text-main: #0f172a;
    --crm-light-text-strong: #0b1220;
    --crm-light-text-muted: #334155;
    --crm-light-text-subtle: #475569;
    --crm-light-accent-teal: #0f766e;
    --crm-light-accent-blue: #1e3a8a;
    --crm-light-accent-green: #166534;
    --crm-light-accent-yellow: #92400e;
    --crm-light-chat-meta: rgba(15, 23, 42, 0.72);
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) :is(.crm-panel-left, .crm-panel-right) {
    background-color: var(--crm-light-surface-1) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .border-r.border-white\/10 {
    border-right-color: var(--crm-light-border-strong) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .border-l.border-white\/10 {
    border-left-color: var(--crm-light-border-strong) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .border-b.border-white\/10,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .border-t.border-white\/8,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .border.border-white\/10,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .border.border-white\/5 {
    border-color: var(--crm-light-border-soft) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-gray-950\/30,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-gray-950\/20 {
    background-color: var(--crm-light-surface-2) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-gray-900\/40,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-gray-900\/90,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-gray-900 {
    background-color: var(--crm-light-surface-3) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-gray-800\/40,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-gray-700\/50,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-white\/5 {
    background-color: var(--crm-light-surface-0) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-gray-100,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-gray-200 {
    color: var(--crm-light-text-main) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-gray-500 {
    color: var(--crm-light-text-muted) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-gray-400 {
    color: var(--crm-light-text-subtle) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-teal-300 {
    color: var(--crm-light-accent-teal) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-blue-100,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-blue-300 {
    color: var(--crm-light-accent-blue) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-green-300 {
    color: var(--crm-light-accent-green) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-yellow-300 {
    color: var(--crm-light-accent-yellow) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-teal-50 {
    color: #115e59 !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-teal-500\/20 {
    background-color: rgba(13, 148, 136, 0.14) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-blue-500\/20,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-blue-500\/15 {
    background-color: rgba(59, 130, 246, 0.16) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-green-500\/20,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-green-500\/15 {
    background-color: rgba(34, 197, 94, 0.18) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-yellow-500\/20,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-yellow-500\/15,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-yellow-500\/10,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-yellow-500\/5 {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .bg-red-500\/15 {
    background-color: rgba(239, 68, 68, 0.14) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .hover\:bg-gray-700\/50:hover,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .hover\:bg-gray-600\/50:hover {
    background-color: #ecfeff !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-xs.font-medium.text-gray-100,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-sm.font-semibold.text-gray-100 {
    color: var(--crm-light-text-strong) !important;
    font-weight: 600 !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-xs.opacity-50,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) .text-xs.opacity-40 {
    opacity: 1 !important;
    color: var(--crm-light-chat-meta) !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) textarea,
html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) select {
    color: var(--crm-light-text-main) !important;
    border-color: #cbd5e1 !important;
}

html:not(.dark) :is([x-data="crmAsesor()"], [x-data^="crmDetalle("]) textarea::placeholder {
    color: #64748b !important;
}

/* =========================================
   Modern Scrollbar Styles
   ========================================= */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #2d3148;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #3d4260;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.dark * {
    scrollbar-color: #2d3148 transparent;
}

/* =========================================
   Global Dark Mode - Base Surfaces
   ========================================= */
.dark body {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

/* Cards / panels */
.dark .bg-white {
    background-color: var(--bg-surface) !important;
}

.dark .bg-gray-50 {
    background-color: var(--bg-elevated) !important;
}

.dark .bg-gray-100 {
    background-color: #1e2130 !important;
}

.dark .bg-gray-200 {
    background-color: #252836 !important;
}

/* Text */
.dark .text-gray-900 {
    color: #e8eaf0 !important;
}

.dark .text-gray-800 {
    color: #d1d5e0 !important;
}

.dark .text-gray-700 {
    color: #b0b6c8 !important;
}

.dark .text-gray-600 {
    color: #8b90a0 !important;
}

.dark .text-gray-500 {
    color: #6b7280 !important;
}

/* Borders */
.dark .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

.dark .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.09) !important;
}

.dark .divide-gray-200>*+* {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* =========================================
   Global Dark Mode - Buttons (no outlines)
   ========================================= */
.dark button,
.dark a[role="button"],
.dark input[type="button"],
.dark input[type="submit"],
.dark input[type="reset"] {
    border: none !important;
    outline: none !important;
}

.dark button:focus,
.dark a[role="button"]:focus,
.dark button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Preserve ring/focus for accessibility only on keyboard nav */
.dark button:focus-visible {
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.5) !important;
}

/* Remove default browser button borders globally */
button {
    border: none;
}

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.6);
    outline-offset: 2px;
}

/* =========================================
   CRM Chat Area - Distinct Background
   ========================================= */
.dark #chat-messages {
    background-color: var(--bg-chat, #131620) !important;
}

/* Chat message bubbles - improved contrast */
.dark .chat-bubble-incoming {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #dde1ec !important;
}

.dark .chat-bubble-outgoing-asesor {
    background-color: rgba(20, 184, 166, 0.2) !important;
    color: #a7f3d0 !important;
}

.dark .chat-bubble-outgoing-bot {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #bfdbfe !important;
}

/* CRM sub-nav bar */
.dark .crm-subnav {
    background-color: #161923 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* CRM left/right panels */
.dark .crm-panel-left,
.dark .crm-panel-right {
    background-color: #1a1d27 !important;
}

/* =========================================
   Global Dark Mode - Tables
   ========================================= */
.dark table thead {
    background-color: #1e2130 !important;
}

.dark table thead th {
    color: #9ca3af !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.dark table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

.dark table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark table tbody td {
    color: #d1d5e0 !important;
}

/* =========================================
   Global Dark Mode - Modals / Dropdowns
   ========================================= */
.dark .modal-content,
.dark [class*="modal"]>div,
.dark [x-show][class*="bg-white"] {
    background-color: var(--bg-surface) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* =========================================
   Global Dark Mode - Inputs/Selects
   ========================================= */
.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark input[type="month"],
.dark input[type="week"],
.dark input[type="color"],
.dark textarea,
.dark select {
    background-color: var(--bg-input, #252836) !important;
    color: var(--text-primary, #e8eaf0) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark select option,
.dark optgroup {
    background-color: #252836 !important;
    color: #e8eaf0 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #555c72 !important;
    opacity: 1;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #252836 inset !important;
    -webkit-text-fill-color: #e8eaf0 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.dark input[type="text"]:focus,
.dark input[type="password"]:focus,
.dark input[type="email"]:focus,
.dark input[type="number"]:focus,
.dark input[type="search"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark input[type="date"]:focus,
.dark input[type="time"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="month"]:focus,
.dark input[type="week"]:focus,
.dark input[type="color"]:focus,
.dark textarea:focus,
.dark select:focus {
    background-color: var(--bg-input-focus, #2d3148) !important;
    border-color: rgba(45, 212, 191, 0.4) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.25) !important;
}

/* =========================================
   Sidebar Styles
   ========================================= */
.sidebar-link {
    --accent-rgb: 59, 130, 246;
    transition: background-color 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms cubic-bezier(.2, .8, .2, 1), transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.sidebar-link i {
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), color 220ms cubic-bezier(.2, .8, .2, 1);
}

.sidebar-link:hover {
    background-color: rgba(var(--accent-rgb), 0.22);
    box-shadow: 0 10px 24px -12px rgba(var(--accent-rgb), 0.6);
    transform: translateY(-1px);
}

.sidebar-link:hover i {
    color: rgba(var(--accent-rgb), 1);
    transform: scale(1.12);
}

.sidebar-link:active {
    transform: translateY(0);
}

.sidebar-link:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.7);
    outline-offset: 2px;
}

/* =========================================
   WhatsApp Notification Animations
   ========================================= */
@keyframes whatsapp-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 18px 6px rgba(37, 211, 102, 0.3);
        transform: scale(1.05);
    }
}

@keyframes whatsapp-icon-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.15);
    }
}

.whatsapp-pending-animation {
    animation: whatsapp-pulse 1.5s ease-in-out infinite;
    background-color: rgba(37, 211, 102, 0.12) !important;
}

.whatsapp-pending-animation i {
    animation: whatsapp-icon-pulse 1.5s ease-in-out infinite;
    color: #25d366 !important;
}

.whatsapp-notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    animation: pulse-badge 1.5s ease-in-out infinite;
}

@keyframes pulse-badge {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

/* =========================================
   Responsive Tables
   ========================================= */
@media (max-width: 640px) {

    #partial-content table,
    #app-tab-panels table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        width: max-content;
    }
}

/* =========================================
   Dark Mode - Badge / Pill improvements
   ========================================= */
.dark .badge,
.dark [class*="rounded-full"][class*="bg-gray"] {
    border: none !important;
}

/* =========================================
   Dark Mode - Card / Panel shadows
   ========================================= */
.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* =========================================
   Dark Mode - Hover states on list items
   ========================================= */
.dark .hover\:bg-gray-50:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* =========================================
   CRM Specific - Improved message bubbles
   ========================================= */
.dark .crm-msg-tool {
    background-color: rgba(99, 102, 241, 0.1) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
    font-size: 0.7rem;
    border-radius: 0.5rem;
    padding: 0.15rem 0.5rem;
    display: inline-block;
    margin-left: auto;
}

label:has(input[x-model="distribucion.timeout_no_aceptado.accion"][value="reasignar"]),
label:has(input[x-model="distribucion.timeout_no_aceptado.accion"][value="cola_general"]),
label:has(input[x-model="distribucion.timeout_sin_respuesta.accion"][value="reasignar"]),
label:has(input[x-model="distribucion.timeout_sin_respuesta.accion"][value="cola_general"]) {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

label:has(input[x-model="distribucion.timeout_no_aceptado.accion"][value="reasignar"]:checked),
label:has(input[x-model="distribucion.timeout_sin_respuesta.accion"][value="reasignar"]:checked) {
    background-color: rgba(20, 184, 166, 0.3) !important;
    color: #cffafe !important;
    border-color: rgba(94, 234, 212, 0.9) !important;
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.38), 0 8px 20px -12px rgba(45, 212, 191, 0.9) !important;
    transform: translateY(-1px);
}

label:has(input[x-model="distribucion.timeout_no_aceptado.accion"][value="cola_general"]:checked),
label:has(input[x-model="distribucion.timeout_sin_respuesta.accion"][value="cola_general"]:checked) {
    background-color: rgba(245, 158, 11, 0.32) !important;
    color: #fffbeb !important;
    border-color: rgba(252, 211, 77, 0.9) !important;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.38), 0 8px 20px -12px rgba(251, 191, 36, 0.9) !important;
    transform: translateY(-1px);
}

label:has(input[x-model="distribucion.timeout_no_aceptado.accion"]):active,
label:has(input[x-model="distribucion.timeout_sin_respuesta.accion"]):active {
    transform: scale(0.98);
}