/* ═══════════════════════════════════════════════════════════════════
   dark-theme.css — Tokens unificados de dark mode para toda la plataforma
   Cargado desde partials/head.php → aplica a TODAS las páginas.

   CÓMO USAR EN MÓDULOS NUEVOS:
     background: var(--dk-surface);
     border-color: var(--dk-border);
     color: var(--dk-text);

   NO usar colores hex hardcodeados en dark mode.
   Agregar aquí si necesitas un token nuevo.
═══════════════════════════════════════════════════════════════════ */

/* ── Tokens base (siempre disponibles) ── */
:root {
    /* Estos valores se sobreescriben en dark mode abajo */
    --dk-bg:              #f3f2f7;
    --dk-bg-subtle:       #f5f4f9;
    --dk-surface:         #ffffff;
    --dk-surface-2:       #f8f7fc;
    --dk-surface-hover:   #f0eef8;
    --dk-border:          #e5e3ef;
    --dk-border-subtle:   #eeecf5;
    --dk-text:            #17161e;
    --dk-text-muted:      #56516b;
    --dk-text-subtle:     #8b879e;
    --dk-shadow-sm:       0 1px 4px rgba(0,0,0,.06);
    --dk-shadow-md:       0 4px 16px rgba(0,0,0,.08);
    --dk-shadow-lg:       0 8px 28px rgba(0,0,0,.12);
    --dk-shadow-hover:    0 12px 36px rgba(0,0,0,.16);
    --dk-accent:          #8b5cf6;
    --dk-accent-muted:    rgba(139,92,246,.12);
}

/* ── Paleta dark mode unificada ── */
html[data-theme="dark"] {
    /* Fondo de página — igual al base Geex (#17161E) */
    --dk-bg:              #17161e;

    /* Paneles, sidebars, fondos secundarios */
    --dk-bg-subtle:       #1d1c27;

    /* Tarjetas / widgets principales — tono oscuro cálido-neutro
       Reemplaza #222222 (style.css), #1e293b (mis_capsulas/dashboard), #2a2a3c (comunidades) */
    --dk-surface:         #21202e;

    /* Superficie elevada: modal overlay, tarjetas destacadas */
    --dk-surface-2:       #2a2938;

    /* Estado hover de tarjetas */
    --dk-surface-hover:   #322f47;

    /* Bordes — visible pero sutil, con leve tono morado */
    --dk-border:          #3a3750;
    --dk-border-subtle:   #2c2a3f;

    /* Textos */
    --dk-text:            #e2e8f0;
    --dk-text-muted:      #94a3b8;
    --dk-text-subtle:     #64748b;

    /* Sombras */
    --dk-shadow-sm:       0 2px 8px  rgba(0,0,0,.40);
    --dk-shadow-md:       0 4px 16px rgba(0,0,0,.45);
    --dk-shadow-lg:       0 8px 28px rgba(0,0,0,.55);
    --dk-shadow-hover:    0 12px 36px rgba(0,0,0,.65);

    /* Acento violeta del sistema */
    --dk-accent:          #8b5cf6;
    --dk-accent-muted:    rgba(139,92,246,.15);
}

/* ══════════════════════════════════════════════════════
   OVERRIDES GLOBALES — clases Geex base que este sistema
   debe homogeneizar en dark mode
══════════════════════════════════════════════════════ */

/* Tarjetas globales del template Geex (style.css usa #222222 — lo reemplazamos) */
html[data-theme="dark"] .geex-btn__customizer,
html[data-theme="dark"] .geex-content__widget__summary,
html[data-theme="dark"] .geex-content__widget__trading__single,
html[data-theme="dark"] .geex-content__market__single,
html[data-theme="dark"] .single-feature-card-area-start,
html[data-theme="dark"] .table-reviews-geex-1,
html[data-theme="dark"] .table-reviews-geex-1 thead tr th,
html[data-theme="dark"] .table-reviews-geex-1 tbody tr td,
html[data-theme="dark"] .kanban-drag-and-drop-area-wrapper .content .deal,
html[data-theme="dark"] .kanban-drag-and-drop-area-wrapper .CONTENT .deal,
html[data-theme="dark"] .kanban-drag-and-drop-area-wrapper .stages .stage.top-stage a,
html[data-theme="dark"] .top_area_file__manager {
    background: var(--dk-surface) !important;
}

/* Contactos: tarjeta de contacto individual — eliminar sombra púrpura pesada */
html[data-theme="dark"] .single-contact-grid-area {
    background: #33353b !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: var(--dk-shadow-sm) !important;
}
html[data-theme="dark"] .single-contact-grid-area:hover {
    background: #3a3d44 !important;
    box-shadow: var(--dk-shadow-md) !important;
    border-color: var(--dk-accent) !important;
}

/* Tablas */
html[data-theme="dark"] .table-reviews-geex-1 tbody tr {
    border-bottom: 1px solid var(--dk-border-subtle);
}
html[data-theme="dark"] .table-reviews-geex-1 tbody tr:hover td {
    background: var(--dk-surface-hover) !important;
}

/* Popups / filter overlays */
html[data-theme="dark"] .geex-content__section .geex-transaction-tab .filter-popup,
html[data-theme="dark"] .geex-content__section .geex-transaction-filter .filter-popup,
html[data-theme="dark"] .geex-content__toggle__content,
html[data-theme="dark"] .geex-content__invoice__chat__content {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border);
}