/**
 * Modo nocturno — tokens + overrides incrementales (Chat + CRM + shell).
 * Runtime: html.theme-dark únicamente.
 * FOUC: html.theme-dark-boot solo en boot (sin estilos de componentes).
 */

html.theme-dark-boot {
  color-scheme: dark;
  background-color: #0f1419;
}

html.theme-dark {
  color-scheme: dark;

  --color-bg: #0f1419;
  --color-surface: #1a2332;
  --color-surface-muted: #243044;
  --color-text: #e2e8f0;
  --color-muted: #94a3b8;
  --color-border: #334155;
  --color-primary: #2dd4bf;
  --color-primary-dark: #5eead4;
  --color-accent: #a78bfa;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.38);

  --chat-bg: #1a222c;
  --chat-bubble-bot: #243044;
  --chat-bubble-user: #1e4a3d;
  --chat-bubble-user-text: #d1fae5;
  --chat-composer-bg: #1a2332;
  --chat-chip-bg: #243044;
  --chat-pattern-opacity: 0.34;

  --scrollbar-thumb: rgba(148, 163, 184, 0.35);
  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.52);

  /* Panel Clientes — dark */
  --panel-bg: var(--color-bg);
  --panel-surface: var(--color-surface);
  --panel-surface-muted: var(--color-surface-muted);
  --panel-hover: #2d3a4f;
  --panel-border-soft: var(--color-border);
  --panel-text-strong: var(--color-text);
  --panel-text-secondary: var(--color-muted);
  --panel-sticky-day: var(--color-surface-muted);
  --panel-warn: #fbbf24;
  --panel-badge-ro-bg: #134e3a;
  --panel-badge-ro-text: #6ee7b7;
  --panel-backdrop: rgba(0, 0, 0, 0.38);
  --panel-summary-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  --panel-summary-border: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  --panel-expiration-bg: #422006;
  --panel-expiration-border: #78350f;
  --panel-avatar-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-muted));
  --panel-avatar-tuapi-bg: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface));

  --composer-bg: var(--chat-composer-bg);
  --composer-input-bg: var(--color-surface-muted);
  --composer-border: var(--color-border);
  --bottom-nav-bg: var(--color-surface);
  --bottom-nav-border: var(--color-border);
  --bottom-nav-muted: var(--color-muted);
  --bottom-nav-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
}

html.theme-dark body {
  background: var(--color-bg);
  color: var(--color-text);
}

html.theme-dark .app-header {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

html.theme-dark .app-nav a.app-nav__with-icon:hover,
html.theme-dark .app-nav button.app-nav__with-icon:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-primary);
}

html.theme-dark .app-nav__current.is-active,
html.theme-dark .app-nav__current.is-active.app-nav__with-icon {
  background: #312e5a;
  border-color: #4c4680;
  color: #c4b5fd;
}

html.theme-dark #navEasyReadBtn.is-active {
  background: #312e5a;
  border-color: #4c4680;
  color: #c4b5fd;
}

html.theme-dark #navDarkModeBtn.is-active {
  background: #1e3a4a;
  border-color: #2d5a72;
  color: #7dd3fc;
}

html.theme-dark .app-nav__easy-read:not(.is-active),
html.theme-dark .app-nav__dark-mode:not(.is-active) {
  opacity: 0.9;
}

html.theme-dark .app-nav__workspace-group {
  border-left-color: var(--color-border);
}

html.theme-dark body.page-chat.workspace-open #navChatLink.is-workspace-active,
html.theme-dark body.page-chat.workspace-open #navCrmLink.is-workspace-active {
  background: #312e5a;
  border-color: #4c4680;
  color: #c4b5fd;
}

html.theme-dark .btn--secondary {
  background: #312e5a;
  color: #c4b5fd;
}

html.theme-dark .btn--ghost {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.theme-dark .btn--ghost:hover {
  background: #2d3a4f;
  border-color: #475569;
}

html.theme-dark .card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html.theme-dark .session-pill {
  background: #134e3a;
  border-color: #166534;
  color: #a7f3d0;
}

html.theme-dark .session-modal__backdrop {
  background: rgba(0, 0, 0, 0.55);
}

html.theme-dark .session-modal__panel {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html.theme-dark .chat-shell {
  background: var(--color-surface);
}

html.theme-dark .chat-shell__header {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

html.theme-dark .chat-messages {
  background-color: var(--chat-bg);
}

html.theme-dark .chat-messages::before {
  opacity: var(--chat-pattern-opacity);
}

html.theme-dark .chat-bubble--bot,
html.theme-dark .chat-bubble--typing {
  background: var(--chat-bubble-bot);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

html.theme-dark .chat-bubble--user {
  background: var(--chat-bubble-user);
  color: var(--chat-bubble-user-text);
}

html.theme-dark .chat-bubble__meta,
html.theme-dark .chat-bubble__status {
  color: var(--color-muted);
}

html.theme-dark .chat-bubble__ai-tag {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-muted);
}

html.theme-dark .chat-composer {
  background: var(--chat-composer-bg);
  border-top-color: var(--color-border);
}

html.theme-dark .chip,
html.theme-dark .chat-quick-replies__btn {
  background: var(--chat-chip-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.theme-dark .chat-composer-menu__toggle {
  background: var(--color-surface, #1a2332);
  border-color: var(--color-border);
  color: var(--color-text);
}
html.theme-dark .chat-composer-menu__panel {
  background: var(--color-surface, #1a2332);
  border-color: var(--color-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
html.theme-dark .chat-composer-menu__item:hover,
html.theme-dark .chat-composer-menu__item:focus-visible {
  background: rgba(148, 163, 184, 0.12);
}

html.theme-dark .chip:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

html.theme-dark .chat-form__textarea,
html.theme-dark .chat-form__secure {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.theme-dark .chat-form__textarea:focus,
html.theme-dark .chat-form__secure:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
}

html.theme-dark .chat-form__textarea::placeholder {
  color: #64748b;
}

html.theme-dark .chat-attach-btn {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.theme-dark .chat-composer__send {
  background: var(--color-primary);
  color: #0f1419;
}

html.theme-dark .chat-history-panel__backdrop,
html.theme-dark .chat-tuapi-filter__backdrop {
  background: var(--panel-backdrop);
}

html.theme-dark .chat-history-panel__list,
html.theme-dark .chat-history-panel__detail {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html.theme-dark .chat-history-panel__list::-webkit-scrollbar-thumb,
html.theme-dark .chat-history-panel__detail::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

html.theme-dark .chat-tuapi-filter__input {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.theme-dark .chat-history-detail__header h3 {
  color: var(--color-text);
}

html.theme-dark .chat-history-panel__empty {
  color: var(--color-muted);
}

html.theme-dark .chat-sketch {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

html.theme-dark .chat-delivery-card {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

html.theme-dark .chat-reminders-notice,
html.theme-dark .chat-history-banner {
  background: #1e3a4a;
  border-color: #2d5a72;
  color: #bae6fd;
}

html.theme-dark body.page-chat.workspace-capable .tuapi-workspace {
  background: #0c1017;
}

html.theme-dark body.page-chat .tuapi-workspace__crm {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html.theme-dark body.page-chat.workspace-capable .chat-messages {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html.theme-dark body.page-chat.workspace-capable .chat-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

html.theme-dark body.page-chat.workspace-capable .chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

html.theme-dark body.page-crm,
html.theme-dark body.page-crm-embed {
  background: var(--color-bg);
}

html.theme-dark .crm-sidebar--desktop {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html.theme-dark .crm-sidebar__link {
  color: var(--color-muted);
}

html.theme-dark .crm-sidebar__link:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

html.theme-dark .crm-sidebar__link.is-active {
  background: #134e4a;
  color: #99f6e4;
}

html.theme-dark .crm-nav-badge {
  background: #b91c1c;
  color: #fff;
}

html.theme-dark .crm-metric-card,
html.theme-dark .crm-summary-block,
html.theme-dark .crm-section-block {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html.theme-dark .crm-metric-card {
  background: linear-gradient(160deg, var(--color-surface) 0%, #1a2e2c 100%);
}

html.theme-dark .crm-dashboard-highlight,
html.theme-dark .crm-reminders-banner {
  background: #1e3a4a;
  border-color: #2d5a72;
  color: #bae6fd;
}

html.theme-dark .crm-table th {
  background: var(--color-surface-muted);
  color: var(--color-muted);
  border-color: var(--color-border);
}

html.theme-dark .crm-table td {
  border-color: var(--color-border);
}

html.theme-dark .crm-table tbody tr:hover {
  background: rgba(45, 212, 191, 0.06);
}

html.theme-dark .crm-quick-action {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.theme-dark .crm-quick-action:hover {
  background: #2d3a4f;
  border-color: var(--color-primary);
}

html.theme-dark .crm-form input:not([type="checkbox"]):not([type="radio"]),
html.theme-dark .crm-form select,
html.theme-dark .crm-form textarea {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.theme-dark .crm-form input::placeholder,
html.theme-dark .crm-form textarea::placeholder {
  color: #64748b;
}

html.theme-dark .crm-flash--ok {
  background: #134e3a;
  border-color: #166534;
  color: #a7f3d0;
}

html.theme-dark .crm-flash--err {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fecaca;
}

html.theme-dark .crm-flash--warn {
  background: #422006;
  border-color: #78350f;
  color: #fde68a;
}

html.theme-dark .crm-badge--ok {
  background: #134e3a;
  color: #a7f3d0;
}

html.theme-dark .crm-row-list__item {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html.theme-dark .crm-bottom-nav {
  background: var(--color-surface);
  border-top-color: var(--color-border);
}

html.theme-dark .crm-more-sheet__panel {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html.theme-dark body.page-crm-embed .crm-main {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html.theme-dark body.page-crm-embed .crm-main::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

html.theme-dark body.page-crm-embed .crm-main::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

html.theme-dark body.page-crm-embed .crm-sidebar--desktop {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html.theme-dark.chat-easy-read #navEasyReadBtn.is-active,
html.theme-dark.chat-easy-read #navDarkModeBtn.is-active {
  font-weight: 600;
}

html.theme-dark body.page-chat .chat-composer__send {
  color: #0f1419;
}

@media (max-width: 767px) {
  html.theme-dark body.page-chat .app-bottom-nav__item.is-active {
    color: var(--color-primary);
  }

  html.theme-dark body.page-chat .app-bottom-nav__item.is-active .tuapi-icon {
    color: var(--color-primary);
  }

  html.theme-dark body.page-chat .chat-form__textarea::placeholder,
  html.theme-dark body.page-chat .chat-form__secure::placeholder {
    color: #64748b;
  }

  html.theme-dark body.page-chat .chat-attach-btn {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-dark * {
    transition-duration: 0.01ms !important;
  }
}