/**
 * NEXUS - Sistema de Temas Profesional v2.14
 *
 * Arquitectura: Colores PASTEL desaturados (cómodos para la vista)
 * Basado en los temas originales que funcionaban bien
 *
 * Temas disponibles:
 * - theme-nexus: Púrpura grisáceo (EL FAVORITO - antes "Classic Dark")
 * - theme-ocean: Azul grisáceo
 * - theme-forest: Verde grisáceo
 * - theme-sunset: Naranja/cálido grisáceo
 *
 * Modo oscuro: Añadir clase .dark al body (ej: body.theme-nexus.dark)
 */

/* ============================================
   VARIABLES GLOBALES (Tipografía, espaciado, radios)
   ============================================ */
:root {
    /* Tipografía */
    --font-size-base: 13px;
    --font-size-xs: 8px;
    --font-size-sm: 10px;
    --font-size-md: 11px;
    --font-size-lg: 12px;
    --font-size-xl: 17px;
    --font-size-2xl: 19px;
    --font-size-3xl: 21px;

    /* Espaciados minimalistas */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;

    /* Radios de borde */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ============================================
   COLORES SEMÁNTICOS (Pastel - No cambian por tema)
   ============================================ */
:root {
    /* Estados - Colores PASTEL suaves */
    --color-success: #5fa573;
    --color-success-soft: #e8f5e9;
    --color-error: #d98080;
    --color-error-soft: #fce4ec;
    --color-warning: #e0a855;
    --color-warning-soft: #fef9e7;
    --color-info: #5c89a8;
    --color-info-soft: #e3f2fd;
}

/* ============================================
   TEMA: Nexus (Púrpura grisáceo) - EL FAVORITO
   Antes llamado "Classic Dark"
   ============================================ */
:root,
body.theme-nexus {
    /* Fondos - Pastel muy suave */
    --color-bg: #f7f6f9;
    --color-surface: #ffffff;
    --color-text: #2d3748;
    --color-text-muted: #4a5568;
    --color-accent: #837893;

    /* Derivados del accent */
    --color-accent-hover: #554861;
    --color-accent-soft: rgba(131, 120, 147, 0.12);
    --color-accent-muted: #958ba8;

    /* Bordes y sombras - Muy sutiles */
    --color-border: #e8e6ed;
    --color-border-strong: #d5d1de;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06);

    /* Sidebar - Púrpura grisáceo ORIGINAL */
    --sidebar-bg: linear-gradient(180deg, #463952 0%, #554861 100%);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: #c8c0d4;
    --sidebar-hover: rgba(157, 143, 184, 0.22);
    --sidebar-active: rgba(157, 143, 184, 0.35);
    --sidebar-heading: #958ba8;
    --sidebar-border: #3a2f45;

    /* Header */
    --header-bg-start: #554861;
    --header-bg-end: #463952;

    /* Mensajes de chat */
    --message-user-bg-start: #554861;
    --message-user-bg-end: #463952;

    /* Botones */
    --btn-primary-bg-start: #554861;
    --btn-primary-bg-end: #463952;
    --btn-edit: #837893;
    --btn-view: #958ba8;
    --btn-logout-bg: #61536f;
    --btn-logout-hover: #554861;
}

/* ============================================
   TEMA: Ocean (Azul grisáceo) - Más oscuro y pastel
   ============================================ */
body.theme-ocean {
    /* Fondos - Ligeramente más oscuros */
    --color-bg: #eef2f5;
    --color-surface: #f8f9fb;
    --color-text: #3a4550;
    --color-text-muted: #5a6a78;
    --color-accent: #6a8fa8;

    /* Derivados del accent - Más suaves */
    --color-accent-hover: #5a7a92;
    --color-accent-soft: rgba(106, 143, 168, 0.10);
    --color-accent-muted: #8ab0c8;

    /* Bordes y sombras - Más visibles */
    --color-border: #d5dde5;
    --color-border-strong: #b8c8d5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);

    /* Sidebar - Más oscuro y desaturado */
    --sidebar-bg: linear-gradient(180deg, #3a5565 0%, #4a6575 100%);
    --sidebar-text: #f0f4f8;
    --sidebar-text-muted: #b8c8d5;
    --sidebar-hover: rgba(180, 200, 220, 0.18);
    --sidebar-active: rgba(180, 200, 220, 0.28);
    --sidebar-heading: #98b0c0;
    --sidebar-border: #2a4050;

    /* Header */
    --header-bg-start: #4a6575;
    --header-bg-end: #3a5565;

    /* Mensajes de chat */
    --message-user-bg-start: #4a6575;
    --message-user-bg-end: #3a5565;

    /* Botones */
    --btn-primary-bg-start: #4a6575;
    --btn-primary-bg-end: #3a5565;
    --btn-edit: #6a8fa8;
    --btn-view: #8ab0c8;
    --btn-logout-bg: #5a7585;
    --btn-logout-hover: #4a6575;
}

/* ============================================
   TEMA: Forest (Verde grisáceo) - Más oscuro y pastel
   ============================================ */
body.theme-forest {
    /* Fondos - Ligeramente más oscuros */
    --color-bg: #edf2ef;
    --color-surface: #f7f9f8;
    --color-text: #3a4540;
    --color-text-muted: #5a6860;
    --color-accent: #6a9880;

    /* Derivados del accent - Más suaves */
    --color-accent-hover: #5a8570;
    --color-accent-soft: rgba(106, 152, 128, 0.10);
    --color-accent-muted: #8ab8a0;

    /* Bordes y sombras - Más visibles */
    --color-border: #d0ddd5;
    --color-border-strong: #b5c8bc;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);

    /* Sidebar - Más oscuro y desaturado */
    --sidebar-bg: linear-gradient(180deg, #3a5545 0%, #4a6555 100%);
    --sidebar-text: #f0f5f2;
    --sidebar-text-muted: #b5c8bc;
    --sidebar-hover: rgba(170, 200, 180, 0.18);
    --sidebar-active: rgba(170, 200, 180, 0.28);
    --sidebar-heading: #95b0a0;
    --sidebar-border: #2a4035;

    /* Header */
    --header-bg-start: #4a6555;
    --header-bg-end: #3a5545;

    /* Mensajes de chat */
    --message-user-bg-start: #4a6555;
    --message-user-bg-end: #3a5545;

    /* Botones */
    --btn-primary-bg-start: #4a6555;
    --btn-primary-bg-end: #3a5545;
    --btn-edit: #6a9880;
    --btn-view: #8ab8a0;
    --btn-logout-bg: #5a7565;
    --btn-logout-hover: #4a6555;
}

/* ============================================
   TEMA: Sunset (Cálido grisáceo) - Más oscuro y pastel
   ============================================ */
body.theme-sunset {
    /* Fondos - Ligeramente más oscuros */
    --color-bg: #f2efec;
    --color-surface: #f9f7f5;
    --color-text: #453d38;
    --color-text-muted: #685d55;
    --color-accent: #a08070;

    /* Derivados del accent - Más suaves */
    --color-accent-hover: #8a6a5a;
    --color-accent-soft: rgba(160, 128, 112, 0.10);
    --color-accent-muted: #baa090;

    /* Bordes y sombras - Más visibles */
    --color-border: #ddd5d0;
    --color-border-strong: #c8bdb5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);

    /* Sidebar - Más oscuro y desaturado */
    --sidebar-bg: linear-gradient(180deg, #5a4a42 0%, #6a5a50 100%);
    --sidebar-text: #f5f0ed;
    --sidebar-text-muted: #c8bdb5;
    --sidebar-hover: rgba(200, 180, 165, 0.18);
    --sidebar-active: rgba(200, 180, 165, 0.28);
    --sidebar-heading: #b8a898;
    --sidebar-border: #3a3028;

    /* Header */
    --header-bg-start: #6a5a50;
    --header-bg-end: #5a4a42;

    /* Mensajes de chat */
    --message-user-bg-start: #6a5a50;
    --message-user-bg-end: #5a4a42;

    /* Botones */
    --btn-primary-bg-start: #6a5a50;
    --btn-primary-bg-end: #5a4a42;
    --btn-edit: #a08070;
    --btn-view: #baa090;
    --btn-logout-bg: #7a6a60;
    --btn-logout-hover: #6a5a50;
}

/* ============================================
   MODO OSCURO (Inversión real - Añadir .dark al body)
   Ejemplo: body.theme-nexus.dark
   ============================================ */
body.dark {
    /* Invertir fondos - Oscuros suaves (no negro puro) */
    --color-bg: #1a1a1f;
    --color-surface: #242428;

    /* Invertir textos - Claros suaves */
    --color-text: #e8e6ed;
    --color-text-muted: #a8a4b0;

    /* Bordes más oscuros */
    --color-border: #353540;
    --color-border-strong: #454555;

    /* Sombras más sutiles en dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);

    /* Colores semánticos ajustados para dark - Más suaves */
    --color-success: #7dba8a;
    --color-success-soft: rgba(125, 186, 138, 0.15);
    --color-error: #e09090;
    --color-error-soft: rgba(224, 144, 144, 0.15);
    --color-warning: #e8b86a;
    --color-warning-soft: rgba(232, 184, 106, 0.15);
    --color-info: #7aa8c8;
    --color-info-soft: rgba(122, 168, 200, 0.15);
}

/* Ajustes específicos del sidebar en dark mode (mantener colores de marca) */
body.theme-nexus.dark {
    --sidebar-bg: linear-gradient(180deg, #2e2535 0%, #3a3042 100%);
}

body.theme-ocean.dark {
    --sidebar-bg: linear-gradient(180deg, #1e3a4a 0%, #2a4a5a 100%);
}

body.theme-forest.dark {
    --sidebar-bg: linear-gradient(180deg, #1a3528 0%, #254535 100%);
}

body.theme-sunset.dark {
    --sidebar-bg: linear-gradient(180deg, #3a2a22 0%, #4a3830 100%);
}

/* ============================================
   ALIASES DE COMPATIBILIDAD
   Para mantener retrocompatibilidad con CSS existente
   ============================================ */
:root,
body[class*="theme-"] {
    /* Fondos */
    --bg-main: var(--color-surface);
    --bg-secondary: var(--color-bg);
    --bg-primary: var(--color-surface);
    --bg-card: var(--color-surface);
    --bg-hover: var(--color-accent-soft);
    --chat-bg: var(--color-bg);

    /* Textos */
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --text: var(--color-text);

    /* Acentos */
    --accent: var(--color-accent);
    --accent-hover: var(--color-accent-hover);
    --primary-color: var(--color-accent);

    /* Bordes */
    --border: var(--color-border);
    --border-color: var(--color-border);
    --calendar-border: var(--color-border);

    /* Header text */
    --header-text: #ffffff;

    /* Estados */
    --success-color: var(--color-success);
    --error-color: var(--color-error);
    --toast-success: var(--color-success);
    --toast-error: var(--color-error);
    --toast-warning: var(--color-warning);
    --toast-info: var(--color-info);

    /* Mensajes */
    --message-user-text: #ffffff;
    --message-assistant-bg: var(--color-surface);
    --message-assistant-text: var(--color-text);
    --message-assistant-border: var(--color-border);
    --message-system-bg: var(--color-warning-soft);
    --message-system-text: #8a6d1f;
    --message-system-border: var(--color-warning);
    --message-thinking-bg: var(--color-bg);
    --message-thinking-border: var(--color-border);

    /* Calendario */
    --calendar-header-bg: var(--color-bg);
    --calendar-header-accent: var(--color-accent);
    --calendar-text: var(--color-text);
    --calendar-text-secondary: var(--color-text-muted);
    --calendar-text-muted: var(--color-text-muted);
    --calendar-event-bg: var(--color-accent);
    --calendar-event-text: #ffffff;
    --calendar-event-border: var(--color-accent-hover);
    --calendar-event-hover: var(--color-accent-muted);
    --calendar-event-readonly: var(--color-text-muted);
    --calendar-event-readonly-border: var(--color-border-strong);
    --calendar-event-readonly-hover: var(--color-text-muted);

    /* Danger buttons (siempre rojo pastel) */
    --btn-danger-bg: #b96060;
    --btn-danger-hover: #a94848;
    --btn-delete: #b96060;

    /* Confirm/Complete (siempre verde pastel) */
    --btn-confirm: #5e9877;
    --btn-complete: #4d8d5a;

    /* Modales */
    --modal-warning-bg: var(--color-warning-soft);
    --modal-warning-text: #8a6d1f;
    --modal-danger-bg: var(--color-error-soft);
    --modal-danger-text: #9a3838;
    --modal-info-bg: var(--color-info-soft);
    --modal-info-text: #1e5a7d;

    /* Debug panel (siempre oscuro) */
    --debug-bg: #2d2d2d;
    --debug-text: #d4d4d4;
    --debug-bg-secondary: #3a3a3a;
    --debug-accent: var(--color-success);
    --debug-border: #4a4a4a;
    --debug-code-bg: #1a1a1a;
    --debug-hover-bg: #484848;
    --debug-tag: var(--color-info);
    --debug-tag-light: #82b4d9;
    --debug-error: var(--color-error);

    /* Status badges - Pastel */
    --status-active-bg: var(--color-success-soft);
    --status-active-text: var(--color-success);
    --status-inactive-bg: var(--color-error-soft);
    --status-inactive-text: var(--color-error);
    --status-pending: var(--color-warning);
    --status-confirmed: var(--color-info);
    --status-completed: var(--color-success);
    --status-cancelled: var(--color-error);
    --status-draft: var(--color-text-muted);
    --status-paid: var(--color-success);
    --status-sent: var(--color-info);
    --status-no-show: var(--color-text-muted);

    /* Shadow color */
    --shadow-color: rgba(0, 0, 0, 0.04);
}

/* ============================================
   DARK MODE - OVERRIDES DE COMPONENTES
   Estilos específicos que tienen colores hardcodeados
   ============================================ */

/* --- Tablas --- */
body.dark .table-container {
    background-color: var(--color-surface);
}

body.dark .data-table {
    background-color: var(--color-surface);
}

body.dark .data-table td {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

body.dark .data-table tbody tr:hover {
    background-color: var(--color-bg);
}

body.dark .data-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* --- Stat Cards --- */
body.dark .stat-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .stat-label {
    color: var(--color-text-muted);
}

body.dark .stat-value {
    color: var(--color-text);
}

body.dark .stat-icon {
    opacity: 0.9;
}

/* --- Mensajes de Agentes (Chat) --- */
body.dark .message.assistant {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

body.dark .message.assistant[data-agent="alex"] {
    background: linear-gradient(135deg, rgba(92, 107, 192, 0.15) 0%, rgba(156, 39, 176, 0.10) 100%);
    border-left-color: #7986cb;
}

body.dark .message.assistant[data-agent="sofia"] {
    background: linear-gradient(135deg, rgba(171, 71, 188, 0.15) 0%, rgba(156, 39, 176, 0.10) 100%);
    border-left-color: #ba68c8;
}

body.dark .message.assistant[data-agent="emma"] {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.15) 0%, rgba(139, 195, 74, 0.10) 100%);
    border-left-color: #81c784;
}

body.dark .message.assistant[data-agent="carlos"] {
    background: linear-gradient(135deg, rgba(255, 167, 38, 0.15) 0%, rgba(255, 183, 77, 0.10) 100%);
    border-left-color: #ffb74d;
}

body.dark .message.assistant[data-agent="diana"] {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.15) 0%, rgba(41, 182, 246, 0.10) 100%);
    border-left-color: #4fc3f7;
}

body.dark .message.assistant[data-agent="daniel"] {
    background: linear-gradient(135deg, rgba(120, 144, 156, 0.15) 0%, rgba(144, 164, 174, 0.10) 100%);
    border-left-color: #90a4ae;
}

body.dark .message.assistant[data-agent="ana"] {
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.15) 0%, rgba(77, 182, 172, 0.10) 100%);
    border-left-color: #4db6ac;
}

/* Texto de mensajes en dark mode */
body.dark .message.assistant .message-content,
body.dark .message.assistant p,
body.dark .message.assistant span,
body.dark .message.assistant li {
    color: var(--color-text);
}

/* --- Mensajes del sistema y thinking --- */
body.dark .message.system {
    background-color: rgba(232, 184, 106, 0.12);
    color: var(--color-warning);
    border-color: rgba(232, 184, 106, 0.3);
}

body.dark .message.thinking {
    background-color: var(--color-bg);
    border-color: var(--color-border);
}

/* --- Cards y Paneles generales --- */
body.dark .card,
body.dark .panel,
body.dark .content-panel {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .card-header,
body.dark .panel-header {
    border-bottom-color: var(--color-border);
}

/* --- View containers --- */
body.dark .view-content,
body.dark .main-panel {
    background-color: var(--color-bg);
}

/* --- Forms e inputs --- */
body.dark input,
body.dark select,
body.dark textarea {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
    border-color: var(--color-accent);
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: var(--color-text-muted);
}

/* --- Modales --- */
body.dark .modal-content,
body.dark .modal-body {
    background-color: var(--color-surface);
    color: var(--color-text);
}

body.dark .modal-header,
body.dark .modal-footer {
    border-color: var(--color-border);
}

/* --- Dropdowns en main content (no sidebar) --- */
body.dark .main-panel select option,
body.dark .view-content select option,
body.dark .modal select option {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* --- KPI Cards (Analytics) --- */
body.dark .kpi-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .kpi-title {
    color: var(--color-text-muted);
}

body.dark .kpi-value {
    color: var(--color-text);
}

/* --- Chart Cards --- */
body.dark .chart-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .chart-header {
    border-bottom-color: var(--color-border);
}

body.dark .chart-title {
    color: var(--color-text);
}

/* --- Temporal Cards --- */
body.dark .temporal-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .temporal-header h4 {
    color: var(--color-text);
}

/* --- Org Cards (Admin Organizations) --- */
body.dark .org-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .org-title h3 {
    color: var(--color-text);
}

/* --- Config Sections in Modals --- */
body.dark .config-section h3 {
    color: var(--color-text-muted);
}

/* --- Badges generales --- */
body.dark .badge {
    opacity: 0.9;
}

/* --- Loading states --- */
body.dark .loading-cell,
body.dark .loading-state,
body.dark .chart-loading,
body.dark .temporal-loading {
    color: var(--color-text-muted);
}

/* --- Filtros y controles --- */
body.dark .filters-bar {
    background-color: transparent;
}

body.dark .filter-select,
body.dark .filter-input,
body.dark .chart-control {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* --- View headers --- */
body.dark .view-header h1,
body.dark .view-header h2,
body.dark .view-title {
    color: var(--color-text);
}

/* --- Links --- */
body.dark a {
    color: var(--color-accent-muted);
}

body.dark a:hover {
    color: var(--color-accent);
}

/* --- Scrollbars en dark mode --- */
body.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark ::-webkit-scrollbar-track {
    background: var(--color-bg);
}

body.dark ::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}

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

/* ============================================
   DARK MODE - OVERRIDES COMPREHENSIVOS
   Todos los elementos con fondos claros hardcodeados
   ============================================ */

/* --- Paneles y contenedores principales --- */
body.dark .view-panel,
body.dark .business-hours-content,
body.dark .table-container,
body.dark .day-view-cell,
body.dark .btn-outline,
body.dark .form-actions .btn-secondary,
body.dark .professional-badge {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* --- Stat cards de vista contenedor --- */
body.dark .view-container .stat-card {
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- Sofia Dashboard --- */
body.dark .sofia-table tbody tr:hover,
body.dark .day-row.day-closed {
    background-color: var(--color-bg);
}

body.dark .progress-bar {
    background: var(--color-border);
}

/* --- Severity badges (Sofia) - Versiones oscuras --- */
body.dark .badge-critical {
    background-color: rgba(224, 144, 144, 0.2) !important;
    color: var(--color-error) !important;
}

body.dark .badge-high,
body.dark .badge-warning {
    background-color: rgba(232, 184, 106, 0.2) !important;
    color: var(--color-warning) !important;
}

body.dark .badge-medium {
    background-color: rgba(232, 184, 106, 0.15) !important;
    color: #d4a84a !important;
}

body.dark .badge-low,
body.dark .badge-success {
    background-color: rgba(125, 186, 138, 0.2) !important;
    color: var(--color-success) !important;
}

/* --- Alertas --- */
body.dark .alert-success {
    background: rgba(125, 186, 138, 0.15);
    border-color: var(--color-success);
    color: var(--color-success);
}

body.dark .alert-error {
    background: rgba(224, 144, 144, 0.15);
    border-color: var(--color-error);
    color: var(--color-error);
}

body.dark .alert-info {
    background: rgba(122, 168, 200, 0.15);
    border-color: var(--color-info);
    color: var(--color-info);
}

body.dark .alert-success pre,
body.dark .alert-error pre,
body.dark .alert-info pre {
    background: rgba(0, 0, 0, 0.2);
}

/* --- Toggle Switch (slider) --- */
body.dark .slider {
    background-color: var(--color-border-strong);
}

body.dark .slider:before {
    background-color: var(--color-text);
}

/* --- Time inputs y campos de formulario --- */
body.dark .time-input,
body.dark .time-input:disabled {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark .time-input:disabled {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
}

/* --- Form actions border --- */
body.dark .form-actions {
    border-top-color: var(--color-border);
}

/* --- Calendario vista diaria --- */
body.dark .day-view-cell:hover,
body.dark .day-header-clickable:hover {
    background-color: rgba(122, 168, 200, 0.15) !important;
}

body.dark .day-view-cell.past-cell {
    background-color: var(--color-bg);
}

body.dark .day-view-cell.current-hour {
    background-color: rgba(232, 184, 106, 0.2);
}

body.dark .calendar-header-day {
    border-bottom-color: var(--color-border);
}

body.dark .calendar-table-day th {
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
}

body.dark .calendar-table-day .hour-cell {
    background: var(--color-bg);
    border-right-color: var(--color-border);
}

/* --- Botones secundarios/outline --- */
body.dark .btn-secondary {
    background: var(--color-border-strong);
    color: var(--color-text);
    border-color: var(--color-border);
}

body.dark .btn-secondary:hover {
    background: var(--color-text-muted);
}

body.dark .btn-outline:hover {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
}

/* --- Chart loading text --- */
body.dark .message-chart-container:empty::before {
    color: var(--color-text-muted);
}

body.dark .message-chart-container.error {
    background: rgba(224, 144, 144, 0.1);
    border-color: rgba(224, 144, 144, 0.3);
    color: var(--color-error);
}

/* --- Agent selector options --- */
body.dark #agent-selector option[value="alex"],
body.dark #agent-selector option[value="sofia"],
body.dark #agent-selector option[value="emma"],
body.dark #agent-selector option[value="carlos"],
body.dark #agent-selector option[value="diana"] {
    background-color: var(--color-surface);
}

/* --- Spinner loading --- */
body.dark .spinner {
    border-color: var(--color-border);
    border-top-color: var(--color-accent);
}

/* --- Labels y textos secundarios --- */
body.dark .toggle-label,
body.dark .day-name,
body.dark .resource-name,
body.dark .day-title,
body.dark .view-header h2,
body.dark .view-header h3,
body.dark .view-panel h2 {
    color: var(--color-text);
}

body.dark .day-status,
body.dark .time-input-group label,
body.dark .day-header-clickable .day-name,
body.dark .help-text,
body.dark .view-description {
    color: var(--color-text-muted);
}

/* --- Professional badge estados --- */
body.dark .professional-badge:hover {
    border-color: var(--color-text-muted);
    background: var(--color-bg);
}

body.dark .professional-badge.active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-muted);
}

/* --- Bordes generales --- */
body.dark .btn-outline,
body.dark .form-actions .btn-secondary,
body.dark .time-input {
    border-color: var(--color-border);
}

/* --- Data table header mantiene gradiente pero body oscuro --- */
body.dark .data-table tbody {
    background-color: var(--color-surface);
}

body.dark .data-table tbody tr {
    background-color: var(--color-surface);
}

body.dark .data-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark .data-table tbody tr:hover {
    background-color: var(--color-bg);
}

/* --- Celdas de la tabla con texto claro --- */
body.dark .data-table td,
body.dark .data-table td a,
body.dark .data-table td span {
    color: var(--color-text);
}

/* --- Status badges en tablas --- */
body.dark .status-badge {
    opacity: 0.9;
}

/* --- Tooltips y popovers --- */
body.dark [title]:hover::before,
body.dark .tooltip {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* --- Empty states --- */
body.dark .empty-state,
body.dark .no-data,
body.dark .no-results {
    color: var(--color-text-muted);
}

/* --- Botones de acción en tablas --- */
body.dark .btn-icon:hover {
    background-color: var(--color-accent-soft);
}

/* --- Modal overlays --- */
body.dark .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* --- Búsqueda e inputs en paneles --- */
body.dark .search-input {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark .search-input::placeholder {
    color: var(--color-text-muted);
}

/* --- Action buttons en header de vistas --- */
body.dark .view-actions .btn,
body.dark .header-actions .btn {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark .view-actions .btn:hover,
body.dark .header-actions .btn:hover {
    background-color: var(--color-bg);
}

/* --- Tabs y navigation pills --- */
body.dark .nav-tabs,
body.dark .tab-list {
    border-bottom-color: var(--color-border);
}

body.dark .nav-tab,
body.dark .tab-item {
    color: var(--color-text-muted);
}

body.dark .nav-tab:hover,
body.dark .tab-item:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}

body.dark .nav-tab.active,
body.dark .tab-item.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* --- Dropdown menus en main content --- */
body.dark .dropdown-menu,
body.dark .context-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark .dropdown-item,
body.dark .context-menu-item {
    color: var(--color-text);
}

body.dark .dropdown-item:hover,
body.dark .context-menu-item:hover {
    background-color: var(--color-bg);
}

/* --- Pagination --- */
body.dark .pagination-btn,
body.dark .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark .pagination-btn:hover,
body.dark .page-link:hover {
    background-color: var(--color-bg);
}

body.dark .pagination-btn.active,
body.dark .page-link.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* --- Dividers y separadores --- */
body.dark hr,
body.dark .divider,
body.dark .separator {
    border-color: var(--color-border);
    background-color: var(--color-border);
}

/* --- Code blocks dentro de mensajes --- */
body.dark .message pre,
body.dark .message code {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* --- Fieldsets y legends --- */
body.dark fieldset {
    border-color: var(--color-border);
}

body.dark legend {
    color: var(--color-text);
}

/* --- Select elements en contenido principal --- */
body.dark .main-content select,
body.dark .view-panel select,
body.dark .modal select {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* --- Accordion/collapsible sections --- */
body.dark .accordion-header,
body.dark .collapsible-header {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark .accordion-content,
body.dark .collapsible-content {
    background-color: var(--color-bg);
    border-color: var(--color-border);
}

/* --- Info boxes y callouts --- */
body.dark .info-box,
body.dark .callout {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* --- Calendar events en vista mensual --- */
body.dark .calendar-cell {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .calendar-cell:hover {
    background-color: var(--color-bg);
}

body.dark .calendar-cell.today {
    background-color: rgba(122, 168, 200, 0.1);
}

body.dark .calendar-cell.other-month {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
}

/* --- Asegurar texto visible en todas las celdas --- */
body.dark td,
body.dark th,
body.dark li,
body.dark p,
body.dark span:not(.status-badge):not([class*="badge"]),
body.dark div:not([class*="sidebar"]):not([class*="header"]):not([class*="message"]) {
    color: inherit;
}

/* --- Fix específico para textos grises en fondos claros residuales --- */
body.dark .main-content,
body.dark .main-view,
body.dark #main-view,
body.dark .panel-container,
body.dark #panel-container {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* ============================================
   CALENDARIO - DARK MODE ESPECÍFICO
   ============================================ */

/* --- Grid del calendario (tabla completa) --- */
body.dark .calendar-grid {
    background-color: var(--color-surface);
}

body.dark .calendar-grid td {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .calendar-grid th {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

body.dark .calendar-grid th.hour-col {
    background-color: var(--color-bg);
    border-color: var(--color-border);
}

body.dark .hour-cell {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* --- Celdas del calendario --- */
body.dark .calendar-cell {
    background-color: var(--color-surface);
}

body.dark .calendar-cell:hover {
    background-color: var(--color-bg);
}

body.dark .calendar-cell.has-event {
    background-color: var(--color-surface);
}

body.dark .calendar-cell.has-event:hover {
    background-color: var(--color-bg);
}

body.dark .calendar-cell.current-hour {
    background-color: rgba(122, 168, 200, 0.2) !important;
    border-color: rgba(122, 168, 200, 0.4);
}

body.dark .calendar-cell.current-hour:hover {
    background-color: rgba(122, 168, 200, 0.3) !important;
}

/* --- Headers del calendario --- */
body.dark .calendar-header {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .calendar-header-week,
body.dark .calendar-header-day {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .date-label {
    color: var(--color-text);
}

/* --- Filtros del calendario --- */
body.dark .calendar-filters {
    background-color: var(--color-surface);
}

body.dark .calendar-filters label {
    color: var(--color-text-muted);
}

body.dark .resource-filter-select {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* --- Eventos del calendario (mantener colores pero adaptar sombras) --- */
body.dark .calendar-event {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
}

body.dark .calendar-event:hover {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 4px 8px 3px rgba(0, 0, 0, 0.3);
}

/* --- Vista diaria del calendario --- */
body.dark .calendar-table-day {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .calendar-table-day td {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

body.dark .calendar-table-day .resource-col {
    background-color: var(--color-bg);
}

/* --- Navegación del calendario --- */
body.dark .calendar-nav button,
body.dark .day-navigation button {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

body.dark .calendar-nav button:hover,
body.dark .day-navigation button:hover {
    background-color: var(--color-bg);
}

/* --- Contenedor del calendario --- */
body.dark .calendar-container,
body.dark .calendar-view,
body.dark #calendar-container {
    background-color: var(--color-bg);
}

/* --- Day headers clickeables --- */
body.dark .day-header-clickable {
    background-color: var(--color-bg);
    color: var(--color-text);
}

body.dark .day-header-clickable .day-number {
    color: var(--color-text);
}

/* --- Drop targets para drag & drop --- */
body.dark .calendar-cell.drop-target {
    background-color: rgba(122, 168, 200, 0.2);
}