/* ============================================================
   MYG Telecom — Design System Tokens + Dark Mode
   Versión: 1.0.0 — Fase 6 UX Premium
   ============================================================
   Uso: html.dark activa el modo oscuro.
   Toggle: document.documentElement.classList.toggle('dark')
   ============================================================ */

/* ── [QiORA] Fuente de marca Gordita (títulos/KPIs) ─────────── */
@font-face {
    font-family: 'Gordita';
    src: url('/fonts/Gordita-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Gordita';
    src: url('/fonts/Gordita-Medium.ttf') format('truetype');
    font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Gordita';
    src: url('/fonts/Gordita-Black.ttf') format('truetype');
    font-weight: 700 900; font-style: normal; font-display: swap;
}

/* ── Tokens — Modo claro (default) ──────────────────────────── */
:root {
    /* Fondos — [QiORA] claro con tinte cian */
    --bg-primary:    #f4fafd;
    --bg-secondary:  #eaf4f9;
    --bg-tertiary:   #e2eef5;
    --bg-card:       #ffffff;
    --bg-hover:      #eaf4f9;

    /* Texto */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --text-inverse:   #ffffff;

    /* Bordes */
    --border:         #dce7ee;
    --border-strong:  #c3d6e1;
    --border-focus:   #00b2e3;

    /* Acento (brand QiORA cian) */
    --accent:         #00b2e3;
    --accent-hover:   #0897ba;
    --accent-light:   #e0f7fd;
    --accent-text:    #0e7c97;

    /* Éxito */
    --success:        #10b981;
    --success-light:  #d1fae5;
    --success-text:   #065f46;

    /* Advertencia */
    --warning:        #f59e0b;
    --warning-light:  #fef3c7;
    --warning-text:   #92400e;

    /* Error */
    --error:          #ef4444;
    --error-light:    #fee2e2;
    --error-text:     #991b1b;

    /* Sombras */
    --shadow-sm:      0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow:         0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md:      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Overlay */
    --overlay-bg:     rgba(0, 0, 0, 0.5);

    /* Palette modal */
    --palette-bg:     #ffffff;
    --palette-item-hover: #f1f5f9;
    --palette-border: #e2e8f0;

    /* Sidebar */
    --sidebar-bg:     #0d2230;
    --sidebar-text:   #cbd5e1;
    --sidebar-active: #00b2e3;

    /* Skeleton */
    --skeleton-base:  #e2e8f0;
    --skeleton-shine: #f8fafc;

    /* Toast */
    --toast-bg:       #1e293b;
    --toast-text:     #f1f5f9;

    /* Transición global */
    --transition:     150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Paleta corporativa QMYG / QiORA ───────────────────────── */
    --color-brand-primary:   #00B2E3;  /* Cian QiORA */
    --color-brand-accent:    #00B2E3;  /* Cian acción */
    --qiora-cian:    #00B2E3;
    --qiora-azul:    #5683F4;
    --qiora-magenta: #D363C8;
    --qiora-morado:  #7E3AAF;
    --color-brand-success:   #10B981;  /* Verde éxito */
    --color-brand-warning:   #F59E0B;  /* Ámbar advertencia */
    --color-brand-danger:    #EF4444;  /* Rojo peligro */
    --color-brand-nebula:    #4F46E5;  /* Índigo NebulAgent */
    --color-brand-ai:        #EC4899;  /* Rosa IA/Grabaciones */
    --color-brand-rh:        #F43F5E;  /* Rosa RH */
    --color-brand-logistica: #F97316;  /* Naranja logística */
    --color-brand-credito:   #10B981;  /* Verde crédito */
    --color-brand-mant:      #F59E0B;  /* Ámbar mantenimiento */
    --color-brand-att:       #7C3AED;  /* Violeta AT&T */

    /* Tipografía — [QiORA] Gordita para títulos/marca, Segoe UI para cuerpo */
    --font-sans:    'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Gordita', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:    'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* Radios */
    --radius-sm:  0.5rem;    /* 8px */
    --radius-md:  0.75rem;   /* 12px */
    --radius-lg:  1rem;      /* 16px */
    --radius-xl:  1.5rem;    /* 24px */
    --radius-2xl: 2rem;      /* 32px */

    /* Card & Modal shadows */
    --shadow-card:  0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
    --shadow-modal: 0 20px 60px -10px rgb(0 0 0 / 0.25);
}

/* ── Tokens — Modo oscuro ────────────────────────────────────── */
html.dark {
    /* Fondos — [QiORA] oscuro */
    --bg-primary:    #0b1220;
    --bg-secondary:  #131c2e;
    --bg-tertiary:   #1b273c;
    --bg-card:       #131c2e;
    --bg-hover:      #1b273c;

    /* Texto */
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --text-inverse:   #0f172a;

    /* Bordes */
    --border:         #24324a;
    --border-strong:  #33455f;
    --border-focus:   #3fc9f0;

    /* Acento (cian QiORA, aclarado para contraste en oscuro) */
    --accent:         #3fc9f0;
    --accent-hover:   #00b2e3;
    --accent-light:   rgba(0,178,227,0.16);
    --accent-text:    #7cdaf2;

    /* Éxito */
    --success:        #34d399;
    --success-light:  #064e3b;
    --success-text:   #6ee7b7;

    /* Advertencia */
    --warning:        #fbbf24;
    --warning-light:  #451a03;
    --warning-text:   #fde68a;

    /* Error */
    --error:          #f87171;
    --error-light:    #450a0a;
    --error-text:     #fca5a5;

    /* Sombras (más sutiles en dark) */
    --shadow-sm:      0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow:         0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md:      0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg:      0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-xl:      0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);

    /* Overlay */
    --overlay-bg:     rgba(0, 0, 0, 0.7);

    /* Palette modal */
    --palette-bg:     #1e293b;
    --palette-item-hover: #273548;
    --palette-border: #334155;

    /* Sidebar */
    --sidebar-bg:     #081019;
    --sidebar-text:   #94a3b8;
    --sidebar-active: #3fc9f0;

    /* Skeleton */
    --skeleton-base:  #1e293b;
    --skeleton-shine: #273548;

    /* Toast */
    --toast-bg:       #0f172a;
    --toast-text:     #f1f5f9;
}

/* ── Dark mode — overrides globales para Tailwind components ─── */
html.dark body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Cards / paneles blancos → oscuros */
html.dark .bg-white {
    background-color: var(--bg-card) !important;
}
html.dark .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}
html.dark .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

/* Texto gris → claro en dark */
html.dark .text-gray-900,
html.dark .text-gray-800 {
    color: var(--text-primary) !important;
}
html.dark .text-gray-700,
html.dark .text-gray-600 {
    color: var(--text-secondary) !important;
}
html.dark .text-gray-500,
html.dark .text-gray-400 {
    color: var(--text-muted) !important;
}

/* Bordes */
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: var(--border) !important;
}

/* Inputs */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border);
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--text-muted);
}

/* Tablas */
html.dark thead {
    background-color: var(--bg-tertiary) !important;
}
html.dark tbody tr:hover {
    background-color: var(--bg-hover) !important;
}
html.dark .divide-gray-200 > * + * {
    border-color: var(--border) !important;
}

/* ── Dark mode — Tailwind coloured backgrounds ───────────────── */
/* Blue */
html.dark .bg-blue-50  { background-color: rgba(0,178,227,0.16) !important; }
html.dark .bg-blue-100 { background-color: rgba(0,178,227,0.16) !important; }
html.dark .text-blue-800, html.dark .text-blue-900 { color: #7cdaf2 !important; }
html.dark .text-blue-700 { color: #3fc9f0 !important; }
html.dark .text-blue-600 { color: #3fc9f0 !important; }
html.dark .border-blue-200 { border-color: #00b2e3 !important; }

/* Indigo */
html.dark .bg-indigo-50  { background-color: #1e1b4b !important; }
html.dark .bg-indigo-100 { background-color: #1e1b4b !important; }
html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #a5b4fc !important; }
html.dark .text-indigo-700 { color: #818cf8 !important; }
html.dark .text-indigo-600 { color: #818cf8 !important; }
html.dark .border-indigo-200 { border-color: #3730a3 !important; }

/* Purple / Violet */
html.dark .bg-purple-50  { background-color: #2e1065 !important; }
html.dark .bg-purple-100 { background-color: #2e1065 !important; }
html.dark .text-purple-800, html.dark .text-purple-900 { color: #d8b4fe !important; }
html.dark .text-purple-700 { color: #c084fc !important; }
html.dark .text-purple-600 { color: #c084fc !important; }
html.dark .border-purple-200 { border-color: #6b21a8 !important; }
html.dark .bg-violet-50  { background-color: #2e1065 !important; }
html.dark .text-violet-800, html.dark .text-violet-900 { color: #ddd6fe !important; }
html.dark .text-violet-700 { color: #a78bfa !important; }

/* Green / Emerald / Teal */
html.dark .bg-green-50   { background-color: #052e16 !important; }
html.dark .bg-green-100  { background-color: #052e16 !important; }
html.dark .text-green-800, html.dark .text-green-900 { color: #86efac !important; }
html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-green-600 { color: #4ade80 !important; }
html.dark .border-green-200 { border-color: #166534 !important; }
html.dark .bg-emerald-50  { background-color: #022c22 !important; }
html.dark .bg-emerald-100 { background-color: #022c22 !important; }
html.dark .text-emerald-800, html.dark .text-emerald-900 { color: #6ee7b7 !important; }
html.dark .text-emerald-700 { color: #34d399 !important; }
html.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .border-emerald-200 { border-color: #065f46 !important; }
html.dark .bg-teal-50  { background-color: #042f2e !important; }
html.dark .text-teal-800, html.dark .text-teal-900 { color: #99f6e4 !important; }
html.dark .text-teal-700 { color: #2dd4bf !important; }

/* Yellow / Amber */
html.dark .bg-yellow-50  { background-color: #422006 !important; }
html.dark .bg-yellow-100 { background-color: #422006 !important; }
html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #fde68a !important; }
html.dark .text-yellow-700 { color: #fbbf24 !important; }
html.dark .text-yellow-600 { color: #fbbf24 !important; }
html.dark .border-yellow-200 { border-color: #854d0e !important; }
html.dark .bg-amber-50   { background-color: #451a03 !important; }
html.dark .bg-amber-100  { background-color: #451a03 !important; }
html.dark .text-amber-800, html.dark .text-amber-900 { color: #fde68a !important; }
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .border-amber-200 { border-color: #92400e !important; }

/* Orange */
html.dark .bg-orange-50  { background-color: #431407 !important; }
html.dark .bg-orange-100 { background-color: #431407 !important; }
html.dark .text-orange-800, html.dark .text-orange-900 { color: #fdba74 !important; }
html.dark .text-orange-700 { color: #fb923c !important; }
html.dark .text-orange-600 { color: #fb923c !important; }
html.dark .border-orange-200 { border-color: #9a3412 !important; }

/* Red / Rose */
html.dark .bg-red-50   { background-color: #450a0a !important; }
html.dark .bg-red-100  { background-color: #450a0a !important; }
html.dark .text-red-800, html.dark .text-red-900 { color: #fca5a5 !important; }
html.dark .text-red-700 { color: #f87171 !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .border-red-200 { border-color: #991b1b !important; }
html.dark .bg-rose-50   { background-color: #4c0519 !important; }
html.dark .bg-rose-100  { background-color: #4c0519 !important; }
html.dark .text-rose-800, html.dark .text-rose-900 { color: #fda4af !important; }
html.dark .text-rose-700 { color: #fb7185 !important; }
html.dark .text-rose-600 { color: #fb7185 !important; }
html.dark .border-rose-200 { border-color: #9f1239 !important; }

/* Pink / Fuchsia */
html.dark .bg-pink-50   { background-color: #500724 !important; }
html.dark .bg-pink-100  { background-color: #500724 !important; }
html.dark .text-pink-800, html.dark .text-pink-900 { color: #f9a8d4 !important; }
html.dark .text-pink-700 { color: #f472b6 !important; }
html.dark .border-pink-200 { border-color: #9d174d !important; }

/* Cyan / Sky */
html.dark .bg-cyan-50   { background-color: #083344 !important; }
html.dark .bg-sky-50    { background-color: #082f49 !important; }
html.dark .bg-sky-100   { background-color: #082f49 !important; }
html.dark .text-sky-800, html.dark .text-sky-900 { color: #7dd3fc !important; }
html.dark .text-sky-700 { color: #38bdf8 !important; }
html.dark .border-sky-200 { border-color: #0369a1 !important; }

/* Gray shades */
html.dark .bg-gray-200 { background-color: var(--bg-tertiary) !important; }
html.dark .bg-gray-300 { background-color: #374151 !important; }
html.dark .text-gray-300 { color: #6b7280 !important; }
html.dark .text-gray-200 { color: #9ca3af !important; }
html.dark .border-gray-100 { border-color: var(--border) !important; }
html.dark .border-gray-400 { border-color: #6b7280 !important; }

/* (La cobertura de `slate` vive junto al resto de superficies, más abajo:
   buscar "Superficies gris/slate".) */

/* White text on dark colored backgrounds stays white */
html.dark .bg-blue-600,
html.dark .bg-blue-700,
html.dark .bg-indigo-600,
html.dark .bg-purple-600,
html.dark .bg-green-600,
html.dark .bg-emerald-600,
html.dark .bg-teal-600,
html.dark .bg-red-600,
html.dark .bg-rose-600,
html.dark .bg-orange-600,
html.dark .bg-amber-600,
html.dark .bg-yellow-600,
html.dark .bg-pink-600 {
    /* Keep vivid backgrounds in dark mode but slightly muted */
    filter: brightness(0.9);
}

/* Gradient adjustments */
html.dark .from-blue-50    { --tw-gradient-from: #0e3a47; }
html.dark .from-indigo-50  { --tw-gradient-from: #1e1b4b; }
html.dark .from-green-50   { --tw-gradient-from: #052e16; }
html.dark .from-emerald-50 { --tw-gradient-from: #022c22; }
html.dark .from-amber-50   { --tw-gradient-from: #451a03; }
html.dark .from-red-50     { --tw-gradient-from: #450a0a; }
html.dark .from-rose-50    { --tw-gradient-from: #4c0519; }
html.dark .to-blue-50      { --tw-gradient-to: #0e3a47; }
html.dark .to-indigo-50    { --tw-gradient-to: #1e1b4b; }
html.dark .to-green-50     { --tw-gradient-to: #052e16; }
html.dark .to-emerald-50   { --tw-gradient-to: #022c22; }
html.dark .to-amber-50     { --tw-gradient-to: #451a03; }
html.dark .to-red-50       { --tw-gradient-to: #450a0a; }
html.dark .to-rose-50      { --tw-gradient-to: #4c0519; }

/* Ring/outline adjustments */
html.dark .ring-gray-200  { --tw-ring-color: var(--border); }
html.dark .ring-blue-200  { --tw-ring-color: #0897ba; }

/* Scrollbar dark theme */
html.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
html.dark ::-webkit-scrollbar-track { background: var(--bg-secondary); }
html.dark ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── Skeleton animation ──────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ── Command Palette ─────────────────────────────────────────── */
.cmd-palette-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    backdrop-filter: blur(2px);
}

.cmd-palette-modal {
    /* [PALETTE-FIX] Colores EXPLÍCITOS (no vars): en modo claro el modal era blanco
       pero el título tomaba el --text-primary de dark (#f1f5f9) → invisible. Fijar
       fondo+texto a hex que alternan con html.dark elimina toda ambigüedad. */
    background: #ffffff;
    border: 1px solid var(--palette-border);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 560px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: palette-drop 120ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes palette-drop {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.cmd-palette-input {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    border: none;
    outline: none;
    background: transparent;
    color: #0f172a;
    border-bottom: 1px solid var(--palette-border);
}

.cmd-palette-results {
    overflow-y: auto;
    max-height: 50vh;
}

.cmd-palette-group-label {
    padding: 8px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background var(--transition);
}

.cmd-palette-item:hover,
.cmd-palette-item.active {
    background: var(--palette-item-hover);
}

.cmd-palette-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    flex-shrink: 0;
}

.cmd-palette-item-label {
    font-size: 14px;
    color: #0f172a;        /* [PALETTE-FIX] explícito: legible en modo claro siempre */
    font-weight: 600;
    flex: 1;
}
.cmd-palette-group-label { color: #64748b; }   /* explícito (no depende de --text-muted) */

/* [PALETTE-FIX] Modo oscuro: invertir fondo y texto con hex explícitos */
html.dark .cmd-palette-modal      { background: #1e293b; }
html.dark .cmd-palette-input      { color: #f1f5f9; }
html.dark .cmd-palette-item-label { color: #f1f5f9; }
html.dark .cmd-palette-group-label { color: #94a3b8; }

.cmd-palette-item-kbd {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
}

.cmd-palette-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Toast System ────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 40px);
}

.toast-item {
    pointer-events: auto;
    background: var(--toast-bg);
    color: var(--toast-text);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: var(--shadow-xl);
    border-left: 4px solid transparent;
    animation: toast-in 200ms cubic-bezier(0.2, 0, 0, 1);
    transition: opacity 200ms, transform 200ms;
}

.toast-item.leaving {
    opacity: 0;
    transform: translateX(100%);
}

.toast-item.success { border-left-color: var(--success); }
.toast-item.error   { border-left-color: var(--error);   }
.toast-item.warning { border-left-color: var(--warning); }
.toast-item.info    { border-left-color: var(--accent);  }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0);    }
}

.toast-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.toast-message {
    font-size: 13px;
    opacity: 0.75;
    margin-top: 2px;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: 2px;
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
    transition: opacity var(--transition);
}
.toast-close:hover { opacity: 1; }

/* ── ConfirmDialog ───────────────────────────────────────────── */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
    animation: fade-in 100ms ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.confirm-modal {
    background: var(--palette-bg);
    border: 1px solid var(--palette-border);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 420px;
    padding: 28px;
    animation: palette-drop 120ms cubic-bezier(0.2, 0, 0, 1);
}

/* ── Dark mode toggle button ─────────────────────────────────── */
.dark-toggle {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dark-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* ── ExportMenu ──────────────────────────────────────────────── */
.export-menu {
    position: relative;
    display: inline-flex;
}

.export-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--palette-bg);
    border: 1px solid var(--palette-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 500;
    overflow: hidden;
    animation: palette-drop 100ms cubic-bezier(0.2, 0, 0, 1);
}

.export-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}

.export-menu-item:hover {
    background: var(--palette-item-hover);
}

/* ── Responsive sidebar drawer (mobile) ─────────────────────── */
.sidebar-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 8000;
    backdrop-filter: blur(2px);
    animation: fade-in 150ms ease;
}

.sidebar-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--sidebar-bg);
    z-index: 8001;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: slide-in-left 200ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes slide-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ── Kbd hint ────────────────────────────────────────────────── */
.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   CAPA VISUAL COMÚN v1.1 — pulido transversal (toda la app MYG)
   Aditivo y de bajo riesgo: usa los tokens de arriba, funciona en
   claro/oscuro, no cambia layouts ni lógica de los módulos.
   ════════════════════════════════════════════════════════════════ */

/* Texto más nítido en todo el dashboard */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }

/* [QiORA] Gordita en títulos, encabezados y números KPI (cuerpo sigue en Segoe UI) */
h1, h2, h3,
.text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl,
.font-display {
    font-family: var(--font-display);
}

/* Scrollbars finas y temáticas (claro/oscuro vía tokens) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }

/* Foco accesible visible solo en navegación por teclado (no molesta al mouse) */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }

/* Selección de texto con color de marca */
::selection { background: var(--accent-light); color: var(--accent-text); }

/* Transición suave en elementos interactivos (solo color/sombra → sin jank) */
button, a, input, select, textarea, [role="button"], .myg-interactive {
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition), opacity var(--transition);
}

/* Utilidades opt-in (los módulos pueden adoptarlas sin obligar) */
.myg-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.myg-lift { transition: transform var(--transition), box-shadow var(--transition); }
.myg-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Cursor correcto en controles deshabilitados */
button:disabled, [role="button"][aria-disabled="true"] { cursor: not-allowed; }

/* Accesibilidad: respetar usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — cobertura profunda v1.2
   Los módulos usan muchos fondos de color claros (-50/-100) como
   badges/tarjetas que en oscuro quedaban "claros". Aquí se oscurecen
   manteniendo el texto de color legible. html.dark .clase gana a .clase
   por especificidad (sin !important).
   ════════════════════════════════════════════════════════════════ */

/* Superficies gris/slate */
html.dark .bg-gray-200,
html.dark .bg-slate-200,
html.dark .bg-slate-100,
html.dark .bg-slate-50  { background-color: var(--bg-tertiary); }
html.dark .bg-slate-800,
html.dark .bg-slate-900 { background-color: #0b1220; }   /* aún más oscuro para hubs slate */
html.dark .text-gray-300,
html.dark .text-gray-200 { color: var(--text-muted); }

/* ── slate: texto oscuro que se quedaba oscuro ───────────────────────────────
   `slate` se usa en ~540 lugares de src/ y aquí faltaban los tonos MÁS oscuros,
   que son justo los que rompen: sobre el panel --bg-card (#131c2e), medido,
   `text-slate-700` daba 1.64:1, `-800` 1.16:1 y `-900` 1.05:1. Texto invisible
   en modo Oscuro sin que nada fallara ni avisara — pasaba, por ejemplo, en los
   encabezados de Folios de correo.

   Ojo con qué NO se toca, porque hay DOS poblaciones de slate y se comportan al
   revés. Los componentes diseñados oscuros a propósito (`bg-slate-700/800/900`
   con texto `slate-200/300`) ya se ven bien; repintarlos como se repinta `gray`
   —que oscurece `text-gray-200/300`— dejaría texto oscuro sobre panel oscuro.
   Por eso slate-200/300 se quedan como están.

   `text-slate-400` tampoco se oscurece: a diferencia de gray-400, slate-400
   (#94a3b8) ya da 6.64:1 sobre el panel. Estaba mapeado a --text-muted (#64748b)
   y eso lo BAJABA a 3.58:1 — el arreglo empeoraba a 183 usos. */
html.dark .text-slate-900,
html.dark .text-slate-800 { color: var(--text-primary); }
html.dark .text-slate-700 { color: var(--text-secondary); }

html.dark .border-gray-100,
html.dark .border-gray-50,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .divide-gray-100 > * + * ,
html.dark .divide-gray-50  > * + * ,
html.dark .divide-slate-100 > * + * ,
html.dark .divide-slate-200 > * + * { border-color: var(--border); }

/* Sombras: en oscuro las sombras claras parecen halos → suavizar */
html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4); }
html.dark .shadow    { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5); }
html.dark .shadow-md { box-shadow: 0 4px 8px -2px rgb(0 0 0 / 0.55); }
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl { box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.6); }

/* Fondos de color suaves (-50/-100) → tinte oscuro translúcido del mismo color.
   Texto -600/-700/-800 → tono claro legible. Cubre badges/tarjetas/alertas. */
html.dark .bg-indigo-50, html.dark .bg-indigo-100   { background-color: rgba(99,102,241,0.16); }
html.dark .bg-blue-50,   html.dark .bg-blue-100      { background-color: rgba(0,178,227,0.16); }
html.dark .bg-sky-50,    html.dark .bg-sky-100       { background-color: rgba(14,165,233,0.16); }
html.dark .bg-cyan-50,   html.dark .bg-cyan-100      { background-color: rgba(6,182,212,0.16); }
html.dark .bg-green-50,  html.dark .bg-green-100     { background-color: rgba(16,185,129,0.16); }
html.dark .bg-emerald-50,html.dark .bg-emerald-100   { background-color: rgba(16,185,129,0.16); }
html.dark .bg-teal-50,   html.dark .bg-teal-100      { background-color: rgba(20,184,166,0.16); }
html.dark .bg-red-50,    html.dark .bg-red-100       { background-color: rgba(239,68,68,0.16); }
html.dark .bg-rose-50,   html.dark .bg-rose-100      { background-color: rgba(244,63,94,0.16); }
html.dark .bg-orange-50, html.dark .bg-orange-100    { background-color: rgba(249,115,22,0.16); }
html.dark .bg-amber-50,  html.dark .bg-amber-100     { background-color: rgba(245,158,11,0.16); }
html.dark .bg-yellow-50, html.dark .bg-yellow-100    { background-color: rgba(234,179,8,0.16); }
html.dark .bg-purple-50, html.dark .bg-purple-100    { background-color: rgba(168,85,247,0.16); }
html.dark .bg-violet-50, html.dark .bg-violet-100    { background-color: rgba(139,92,246,0.16); }
html.dark .bg-pink-50,   html.dark .bg-pink-100      { background-color: rgba(236,72,153,0.16); }

html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-600 { color: #a5b4fc; }
html.dark .text-blue-700,   html.dark .text-blue-800,   html.dark .text-blue-600   { color: #7cdaf2; }
html.dark .text-sky-700,    html.dark .text-sky-600     { color: #7dd3fc; }
/* -800/-900 de cyan: faltaban, y es la misma falla que tenía slate. Las tarjetas
   `bg-cyan-50/100` SÍ se oscurecen (arriba), así que un `text-cyan-800` encima se
   quedaba en #155e75 sobre fondo oscuro — 2.34:1, y el -900 en 1.87:1. Se ve, por
   ejemplo, en el Panel Admin → "Pestañas como subpestañas del hub": el título y su
   explicación eran ilegibles en Oscuro. Se aclaran como ya se aclara `blue`, que es
   la misma rampa de marca. */
html.dark .text-cyan-700,   html.dark .text-cyan-600    { color: #67e8f9; }
html.dark .text-cyan-800,   html.dark .text-cyan-900    { color: #a5f3fc; }

/* El peldaño -500 de las rampas moradas quedaba por debajo de AA (indigo 3.81:1,
   violet 4.02:1, purple 4.30:1) sólo porque nadie lo había listado: su -600, que es
   MÁS oscuro en la paleta, sí estaba aclarado. Se igualan a su vecino. */
html.dark .text-indigo-500  { color: #a5b4fc; }
html.dark .text-violet-500  { color: #c4b5fd; }
html.dark .text-purple-500  { color: #d8b4fe; }
html.dark .text-green-700,  html.dark .text-green-800,  html.dark .text-green-600  { color: #6ee7b7; }
html.dark .text-emerald-700,html.dark .text-emerald-800,html.dark .text-emerald-600{ color: #6ee7b7; }
html.dark .text-teal-700,   html.dark .text-teal-600    { color: #5eead4; }
html.dark .text-red-700,    html.dark .text-red-800,    html.dark .text-red-600    { color: #fca5a5; }
html.dark .text-rose-700,   html.dark .text-rose-600    { color: #fda4af; }
html.dark .text-orange-700, html.dark .text-orange-600  { color: #fdba74; }
html.dark .text-amber-700,  html.dark .text-amber-800,  html.dark .text-amber-600  { color: #fcd34d; }
html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-600 { color: #fde047; }
html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-600 { color: #d8b4fe; }
html.dark .text-violet-700, html.dark .text-violet-600  { color: #c4b5fd; }
html.dark .text-pink-700,   html.dark .text-pink-600    { color: #f9a8d4; }

/* Bordes de color suaves → versión translúcida */
html.dark .border-indigo-200, html.dark .border-indigo-100  { border-color: rgba(99,102,241,0.35); }
html.dark .border-blue-200,   html.dark .border-blue-100    { border-color: rgba(0,178,227,0.35); }
html.dark .border-green-200,  html.dark .border-green-100,
html.dark .border-emerald-200,html.dark .border-emerald-100 { border-color: rgba(16,185,129,0.35); }
html.dark .border-red-200,    html.dark .border-red-100     { border-color: rgba(239,68,68,0.35); }
html.dark .border-amber-200,  html.dark .border-amber-100,
html.dark .border-yellow-200                                { border-color: rgba(245,158,11,0.35); }
html.dark .border-purple-200, html.dark .border-purple-100  { border-color: rgba(168,85,247,0.35); }

/* ── Fondos con GRADIENTE claro → en oscuro se aplanan a superficie oscura ──────
   Tailwind aplica gradientes con stops (from-/via-/to-); los overrides de bg-*-50
   de arriba NO los cubren. Aquí se neutraliza el gradiente (background-image:none)
   para los gradientes claros usados como fondo de página/paneles. */
/* Shell de página completo (min-h-screen ... from-blue-50 via-purple-50 to-pink-50) */
html.dark .min-h-screen.bg-gradient-to-br.from-blue-50 {
    background-image: none !important;
    background-color: var(--bg-primary) !important;
}
/* Paneles/encabezados + THEADS de tabla con gradiente claro neutro (gray/slate) →
   superficie oscura. Cubre <thead className="bg-gradient-to-r from-gray-50 to-gray-100"> */
html.dark .bg-gradient-to-r.from-blue-50,
html.dark .bg-gradient-to-r.from-indigo-50,
html.dark .bg-gradient-to-r.from-purple-50,
html.dark .bg-gradient-to-r.from-green-50,
html.dark .bg-gradient-to-r.from-emerald-50,
html.dark .bg-gradient-to-r.from-cyan-50,
html.dark .bg-gradient-to-r.from-amber-50,
html.dark .bg-gradient-to-r.from-yellow-50,
html.dark .bg-gradient-to-r.from-orange-50,
html.dark .bg-gradient-to-r.from-lime-50,
html.dark .bg-gradient-to-r.from-pink-50,
html.dark .bg-gradient-to-r.from-rose-50,
html.dark .bg-gradient-to-r.from-gray-50,
html.dark .bg-gradient-to-r.from-gray-100,
html.dark .bg-gradient-to-r.from-slate-50,
html.dark .bg-gradient-to-br.from-slate-50,
html.dark .bg-gradient-to-br.from-gray-50 {
    background-image: none !important;
    background-color: var(--bg-tertiary) !important;
}
/* Tarjetas KPI con gradiente de color claro (bg-gradient-to-br from-*-50 to-*-100) →
   tinte oscuro del MISMO color (conserva identidad; borde-l y números ya van de color).
   El selector de clase exacto .from-green-50 NO matchea .from-green-500 (vivos intactos). */
html.dark .bg-gradient-to-br.from-green-50,
html.dark .bg-gradient-to-br.from-emerald-50 { background-image:none !important; background-color: rgba(16,185,129,.12) !important; }
html.dark .bg-gradient-to-br.from-blue-50,
html.dark .bg-gradient-to-br.from-sky-50     { background-image:none !important; background-color: rgba(0,178,227,.12) !important; }
html.dark .bg-gradient-to-br.from-red-50,
html.dark .bg-gradient-to-br.from-rose-50    { background-image:none !important; background-color: rgba(239,68,68,.12) !important; }
html.dark .bg-gradient-to-br.from-yellow-50,
html.dark .bg-gradient-to-br.from-amber-50   { background-image:none !important; background-color: rgba(245,158,11,.12) !important; }
html.dark .bg-gradient-to-br.from-purple-50,
html.dark .bg-gradient-to-br.from-violet-50,
html.dark .bg-gradient-to-br.from-fuchsia-50 { background-image:none !important; background-color: rgba(168,85,247,.12) !important; }
html.dark .bg-gradient-to-br.from-indigo-50  { background-image:none !important; background-color: rgba(99,102,241,.12) !important; }
html.dark .bg-gradient-to-br.from-cyan-50,
html.dark .bg-gradient-to-br.from-teal-50    { background-image:none !important; background-color: rgba(20,184,166,.12) !important; }
html.dark .bg-gradient-to-br.from-orange-50  { background-image:none !important; background-color: rgba(249,115,22,.12) !important; }
html.dark .bg-gradient-to-br.from-pink-50    { background-image:none !important; background-color: rgba(236,72,153,.12) !important; }
/* Variantes neutras con OPACIDAD (bg-gray-50/60, bg-slate-50/40…) — el selector de
   clase exacto no las cubre. Se usa selector de atributo (incluye la "/"). NO toca
   bg-white/20 (overlays translúcidos sobre headers de color). */
html.dark [class*="bg-gray-50/"],
html.dark [class*="bg-slate-50/"]  { background-color: rgba(30,41,59,.55) !important; }
html.dark [class*="bg-gray-100/"],
html.dark [class*="bg-slate-100/"] { background-color: rgba(39,53,72,.55) !important; }
/* Estados HOVER claros → en oscuro se atenúan (evita el flash BLANCO/claro al pasar el
   mouse en pestañas inactivas de los hubs, filas de tabla y botones). La variante
   hover: genera otra clase que .bg-white/.bg-*-50 no cubren → selector de atributo. */
html.dark [class~="hover:bg-white"]:hover    { background-color: var(--bg-tertiary) !important; }
html.dark [class~="hover:bg-gray-50"]:hover,
html.dark [class~="hover:bg-gray-100"]:hover,
html.dark [class~="hover:bg-slate-50"]:hover,
html.dark [class~="hover:bg-slate-100"]:hover { background-color: rgba(148,163,184,.10) !important; }
html.dark [class~="hover:bg-blue-50"]:hover   { background-color: rgba(0,178,227,.12) !important; }
html.dark [class~="hover:bg-indigo-50"]:hover { background-color: rgba(99,102,241,.12) !important; }
html.dark [class~="hover:bg-red-50"]:hover    { background-color: rgba(239,68,68,.12) !important; }
html.dark [class~="hover:bg-green-50"]:hover,
html.dark [class~="hover:bg-emerald-50"]:hover{ background-color: rgba(16,185,129,.12) !important; }
html.dark [class~="hover:bg-amber-50"]:hover,
html.dark [class~="hover:bg-yellow-50"]:hover { background-color: rgba(245,158,11,.12) !important; }
html.dark [class~="hover:bg-purple-50"]:hover { background-color: rgba(168,85,247,.12) !important; }

/* Texto tenue que quedaba ilegible sobre el fondo claro (subtítulos del shell) */
html.dark .text-gray-500, html.dark .text-gray-600,
html.dark .text-slate-500, html.dark .text-slate-600 { color: var(--text-secondary); }