/* ============================================================
   Insights Desk — tema base compartido
   Paleta y tipografia alineadas con la pantalla de login.
   Cargar SIEMPRE despues de las demas hojas de estilo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* --- paleta login --- */
    --navy: #0B1230;
    --slate: #5B6472;
    --placeholder: #6B7280;
    --coral: #F0537A;
    --amber: #F5A623;
    --indigo: #5B4FE9;
    --indigo-dark: #4A3FD4;
    --sky: #3AA0FF;
    --cream: #FDF2E4;
    --aqua: #8FE0DA;
    --lavender: #C9C0F0;
    --card: #FFFFFF;
    --border: #E4E7EC;
    --danger: #C0293C;
    --danger-bg: #FCE9EB;
    --success: #1E7A4C;
    --success-bg: #E9F7EF;
    --warning-bg: #FEF4E4;

    --page-bg: #EEF1FA;
    --page-bg-2: #E7ECFB;
    --surface-soft: #F6F8FD;

    --radius-lg: 28px;
    --radius-md: 14px;
    --radius-sm: 12px;

    --shadow-shell: 0 30px 80px -30px rgba(11, 18, 48, 0.35);
    --shadow-card: 0 18px 45px -28px rgba(11, 18, 48, 0.35);

    --grad-primary: linear-gradient(90deg, var(--coral) 0%, var(--indigo) 100%);
    --grad-page: linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-2) 100%);
    --grad-brand: linear-gradient(160deg, var(--cream) 0%, #FBEFE3 45%, #F3F0FB 100%);

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Sora', 'Inter', system-ui, sans-serif;

    /* --- alias del sistema metrics-dashboard --- */
    --rm-bg: var(--page-bg);
    --rm-panel: var(--card);
    --rm-ink: var(--navy);
    --rm-muted: var(--slate);
    --rm-line: var(--border);
    --rm-purple: var(--indigo);
    --rm-purple-dark: var(--navy);
    --rm-blue: var(--sky);
    --rm-cyan: var(--aqua);
    --rm-green: #1E9E63;
    --rm-yellow: var(--amber);
    --rm-orange: var(--amber);
    --rm-red: var(--coral);
    --rm-shadow: var(--shadow-card);

    /* --- alias del sistema forgot-password / conversations --- */
    --bg: var(--page-bg);
    --panel: var(--card);
    --ink: var(--navy);
    --muted: var(--slate);
    --line: var(--border);
    --violet: var(--indigo);
    --violet-dark: var(--indigo-dark);
    --cyan: var(--sky);
    --green: #1E9E63;
    --rose: var(--coral);
    --shadow: var(--shadow-shell);
}

/* ---------- Tipografia base ---------- */
body {
    font-family: var(--font-sans);
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.font-display,
.brand,
.page-title,
.card-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* ---------- Fondo de pagina ---------- */
body.metrics-body,
body.insights-light,
body.auth-body {
    background: var(--grad-page) !important;
    background-attachment: fixed;
    color: var(--navy) !important;
}

/* ---------- Foco accesible unificado ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
}

/* ---------- Superficies ---------- */
.metrics-card,
.metrics-panel,
.panel,
.card,
.data-card,
.kpi-card,
.chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

/* ---------- Barra lateral navy ---------- */
.metrics-sidebar {
    background:
        radial-gradient(circle at 40% 12%, rgba(91, 79, 233, 0.32), transparent 30%),
        linear-gradient(180deg, #131C46 0%, var(--navy) 58%, #070C22 100%) !important;
}

.metrics-sidebar .brand-mark {
    background: var(--grad-primary) !important;
    box-shadow: 0 14px 30px -12px rgba(91, 79, 233, 0.5) !important;
}

/* ---------- Botones primarios ---------- */
.btn-primary,
.primary-btn,
.submit-button,
button[type="submit"]:not([class*="bg-"]):not([class*="btn"]):not(.icon-button),
.metrics-btn.primary,
.action-primary {
    background: var(--grad-primary) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-sans);
    font-weight: 700;
    box-shadow: 0 14px 26px -12px rgba(91, 79, 233, 0.55);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.submit-button:hover:not(:disabled),
button[type="submit"]:not([class*="bg-"]):not([class*="btn"]):not(.icon-button):hover:not(:disabled),
.metrics-btn.primary:hover:not(:disabled),
.action-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px -12px rgba(91, 79, 233, 0.6);
}

.btn-primary:disabled,
.primary-btn:disabled,
.submit-button:disabled,
button[type="submit"]:not([class*="bg-"]):not([class*="btn"]):disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ---------- Botones secundarios ---------- */
.btn-secondary,
.secondary-btn,
.btn-ghost {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--navy);
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}

.btn-secondary:hover:not(:disabled),
.secondary-btn:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
    border-color: var(--indigo);
    background: #F7F6FE;
}

/* ---------- Campos ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    font-family: var(--font-sans);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px rgba(91, 79, 233, 0.15);
}

/* ---------- Alertas ---------- */
.alert.error,
.alert-error,
.alert-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--radius-sm);
}

.alert.success,
.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border-radius: var(--radius-sm);
}

.alert.warning,
.alert-warning {
    background: var(--warning-bg);
    color: #8A5A08;
    border-radius: var(--radius-sm);
}

/* ---------- Tailwind: acentos alineados ---------- */
body.insights-light [class*="bg-[#5B4FE9]"],
body.insights-light [class*="bg-[#6D5FF0]"] {
    background: var(--grad-primary) !important;
    color: #fff !important;
}

body.insights-light [class*="text-[#5B4FE9]"] {
    color: var(--indigo) !important;
}

body.insights-light [class*="text-[#3AA0FF]"] {
    color: var(--sky) !important;
}

body.insights-light [class*="text-[#F5A623]"] {
    color: #B57708 !important;
}

body.insights-light [class*="bg-[#F5A623]"] {
    background: var(--amber) !important;
    color: var(--navy) !important;
}

body.insights-light [class*="bg-[#3AA0FF]"] {
    background: var(--sky) !important;
    color: #fff !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--page-bg);
}

::-webkit-scrollbar-thumb {
    background: #C8CEDC;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lavender);
}

/* ============================================================
   Tailwind CDN: remapeo de la paleta por defecto a Insights Desk
   ============================================================ */

/* --- indigo / violeta --- */
body.insights-light [class*="text-violet-"],
body.insights-light [class*="text-purple-"],
body.insights-light [class*="text-indigo-"],
body.insights-light [class*="text-fuchsia-"] { color: var(--indigo) !important; }

body.insights-light [class*="bg-violet-"],
body.insights-light [class*="bg-purple-"],
body.insights-light [class*="bg-indigo-"],
body.insights-light [class*="bg-fuchsia-"] { background-color: var(--indigo) !important; color: #fff !important; }

body.insights-light [class*="bg-violet-100"],
body.insights-light [class*="bg-violet-200"],
body.insights-light [class*="bg-purple-100"],
body.insights-light [class*="bg-indigo-100"] { background-color: #F3F1FE !important; color: var(--indigo) !important; }

body.insights-light [class*="border-violet-"],
body.insights-light [class*="border-purple-"],
body.insights-light [class*="border-indigo-"] { border-color: var(--indigo) !important; }

/* --- azul / cielo / cyan --- */
body.insights-light [class*="text-blue-"],
body.insights-light [class*="text-sky-"],
body.insights-light [class*="text-cyan-"] { color: var(--sky) !important; }

body.insights-light [class*="bg-blue-"],
body.insights-light [class*="bg-sky-"],
body.insights-light [class*="bg-cyan-"] { background-color: var(--sky) !important; color: #fff !important; }

body.insights-light [class*="bg-blue-100"],
body.insights-light [class*="bg-sky-100"],
body.insights-light [class*="bg-cyan-100"] { background-color: #EAF4FF !important; color: #1B5FA8 !important; }

body.insights-light [class*="border-blue-"],
body.insights-light [class*="border-sky-"],
body.insights-light [class*="border-cyan-"] { border-color: var(--sky) !important; }

/* --- coral / rojo / rosa --- */
body.insights-light [class*="text-red-"],
body.insights-light [class*="text-rose-"],
body.insights-light [class*="text-pink-"] { color: var(--danger) !important; }

body.insights-light [class*="bg-red-"],
body.insights-light [class*="bg-rose-"],
body.insights-light [class*="bg-pink-"] { background-color: var(--coral) !important; color: #fff !important; }

body.insights-light [class*="bg-red-100"],
body.insights-light [class*="bg-rose-100"],
body.insights-light [class*="bg-pink-100"] { background-color: var(--danger-bg) !important; color: var(--danger) !important; }

body.insights-light [class*="border-red-"],
body.insights-light [class*="border-rose-"],
body.insights-light [class*="border-pink-"] { border-color: var(--coral) !important; }

/* --- ambar / amarillo / naranja --- */
body.insights-light [class*="text-yellow-"],
body.insights-light [class*="text-amber-"],
body.insights-light [class*="text-orange-"] { color: #B57708 !important; }

body.insights-light [class*="bg-yellow-"],
body.insights-light [class*="bg-amber-"],
body.insights-light [class*="bg-orange-"] { background-color: var(--amber) !important; color: var(--navy) !important; }

body.insights-light [class*="bg-yellow-100"],
body.insights-light [class*="bg-amber-100"],
body.insights-light [class*="bg-orange-100"] { background-color: var(--warning-bg) !important; color: #8A5A08 !important; }

body.insights-light [class*="border-yellow-"],
body.insights-light [class*="border-amber-"],
body.insights-light [class*="border-orange-"] { border-color: var(--amber) !important; }

/* --- verde --- */
body.insights-light [class*="text-green-"],
body.insights-light [class*="text-emerald-"],
body.insights-light [class*="text-teal-"],
body.insights-light [class*="text-lime-"] { color: var(--success) !important; }

body.insights-light [class*="bg-green-"],
body.insights-light [class*="bg-emerald-"],
body.insights-light [class*="bg-teal-"],
body.insights-light [class*="bg-lime-"] { background-color: #1E9E63 !important; color: #fff !important; }

body.insights-light [class*="bg-green-100"],
body.insights-light [class*="bg-emerald-100"],
body.insights-light [class*="bg-teal-100"] { background-color: var(--success-bg) !important; color: var(--success) !important; }

body.insights-light [class*="border-green-"],
body.insights-light [class*="border-emerald-"],
body.insights-light [class*="border-teal-"] { border-color: #1E9E63 !important; }

/* --- neutros --- */
body.insights-light [class*="text-slate-9"],
body.insights-light [class*="text-gray-9"],
body.insights-light [class*="text-zinc-9"],
body.insights-light [class*="text-slate-8"],
body.insights-light [class*="text-gray-8"] { color: var(--navy) !important; }

body.insights-light [class*="border-slate-"],
body.insights-light [class*="border-gray-"],
body.insights-light [class*="border-zinc-"] { border-color: var(--border) !important; }

body.insights-light [class*="bg-slate-50"],
body.insights-light [class*="bg-gray-50"],
body.insights-light [class*="bg-slate-100"],
body.insights-light [class*="bg-gray-100"] { background-color: var(--surface-soft) !important; }

/* --- degradados de marca --- */
body.insights-light [class*="bg-gradient-to-r"][class*="from-violet"],
body.insights-light [class*="bg-gradient-to-r"][class*="from-indigo"],
body.insights-light [class*="bg-gradient-to-r"][class*="from-purple"],
body.insights-light [class*="bg-gradient-to-r"][class*="from-pink"],
body.insights-light [class*="bg-gradient-to-r"][class*="from-rose"] {
    background-image: var(--grad-primary) !important;
    color: #fff !important;
}

/* --- variantes con opacidad (bg-*-500/10): fondos suaves, no solidos --- */
body.insights-light [class*="bg-violet-"][class*="/"],
body.insights-light [class*="bg-purple-"][class*="/"],
body.insights-light [class*="bg-indigo-"][class*="/"] { background-color: #F3F1FE !important; color: var(--indigo) !important; }

body.insights-light [class*="bg-blue-"][class*="/"],
body.insights-light [class*="bg-sky-"][class*="/"],
body.insights-light [class*="bg-cyan-"][class*="/"] { background-color: #EAF4FF !important; color: #1B5FA8 !important; }

body.insights-light [class*="bg-red-"][class*="/"],
body.insights-light [class*="bg-rose-"][class*="/"],
body.insights-light [class*="bg-pink-"][class*="/"] { background-color: var(--danger-bg) !important; color: var(--danger) !important; }

body.insights-light [class*="bg-yellow-"][class*="/"],
body.insights-light [class*="bg-amber-"][class*="/"],
body.insights-light [class*="bg-orange-"][class*="/"] { background-color: var(--warning-bg) !important; color: #8A5A08 !important; }

body.insights-light [class*="bg-green-"][class*="/"],
body.insights-light [class*="bg-emerald-"][class*="/"],
body.insights-light [class*="bg-teal-"][class*="/"] { background-color: var(--success-bg) !important; color: var(--success) !important; }

body.insights-light [class*="bg-slate-"][class*="/"],
body.insights-light [class*="bg-gray-"][class*="/"],
body.insights-light [class*="bg-zinc-"][class*="/"] { background-color: var(--surface-soft) !important; color: var(--navy) !important; }

body.insights-light [class*="border-"][class*="/"] { border-color: var(--border) !important; }

/* ============================================================
   Tokens Tailwind propios del proyecto (darkCard, qCyan, brandGold...)
   ============================================================ */

/* --- superficies oscuras heredadas -> superficies claras --- */
body.insights-light [class*="bg-darkCard"],
body.insights-light [class*="bg-darkBg"],
body.insights-light [class*="bg-qCard"],
body.insights-light [class*="bg-qDark"],
body.insights-light [class*="bg-qInput"] {
    background-color: var(--card) !important;
    color: var(--navy) !important;
}

body.insights-light [class*="bg-darkBorder"] {
    background-color: var(--surface-soft) !important;
    color: var(--navy) !important;
}

body.insights-light [class*="border-darkBorder"],
body.insights-light [class*="border-qInputBorder"] {
    border-color: var(--border) !important;
}

/* --- textos --- */
body.insights-light [class*="text-textMain"],
body.insights-light [class*="text-darkBorder"] {
    color: var(--navy) !important;
}

body.insights-light [class*="text-qCyan"],
body.insights-light [class*="text-brandCyan"] {
    color: var(--sky) !important;
}

body.insights-light [class*="text-qGold"],
body.insights-light [class*="text-brandGold"] {
    color: #B57708 !important;
}

body.insights-light [class*="text-qDanger"] {
    color: var(--danger) !important;
}

body.insights-light [class*="text-qSuccess"] {
    color: var(--success) !important;
}

/* --- rellenos de acento --- */
body.insights-light [class*="bg-qCyan"],
body.insights-light [class*="bg-brandCyan"] {
    background-color: var(--sky) !important;
    color: #fff !important;
}

body.insights-light [class*="bg-qGold"],
body.insights-light [class*="bg-brandGold"] {
    background-color: var(--amber) !important;
    color: var(--navy) !important;
}

body.insights-light [class*="bg-qDanger"] {
    background-color: var(--coral) !important;
    color: #fff !important;
}

body.insights-light [class*="bg-qSuccess"] {
    background-color: #1E9E63 !important;
    color: #fff !important;
}

/* --- bordes de acento --- */
body.insights-light [class*="border-qCyan"],
body.insights-light [class*="border-brandCyan"] { border-color: var(--sky) !important; }
body.insights-light [class*="border-brandGold"],
body.insights-light [class*="border-qGold"] { border-color: var(--amber) !important; }
body.insights-light [class*="border-qDanger"] { border-color: var(--coral) !important; }
body.insights-light [class*="border-qSuccess"] { border-color: #1E9E63 !important; }

/* --- variantes con opacidad de estos tokens --- */
body.insights-light [class*="bg-qCyan/"],
body.insights-light [class*="bg-brandCyan/"] { background-color: #EAF4FF !important; color: #1B5FA8 !important; }
body.insights-light [class*="bg-qGold/"],
body.insights-light [class*="bg-brandGold/"] { background-color: var(--warning-bg) !important; color: #8A5A08 !important; }
body.insights-light [class*="bg-qDanger/"] { background-color: var(--danger-bg) !important; color: var(--danger) !important; }
body.insights-light [class*="bg-qSuccess/"] { background-color: var(--success-bg) !important; color: var(--success) !important; }

/* --- degradados con tokens de marca --- */
body.insights-light [class*="bg-gradient"][class*="from-qGold"],
body.insights-light [class*="bg-gradient"][class*="from-brandGold"] {
    background-image: linear-gradient(90deg, var(--amber) 0%, #F7C877 100%) !important;
    color: var(--navy) !important;
}

body.insights-light [class*="bg-gradient"][class*="from-darkCard"],
body.insights-light [class*="bg-gradient"][class*="from-qDark"],
body.insights-light [class*="bg-gradient"][class*="from-darkBg"] {
    background-image: none !important;
    background-color: var(--card) !important;
    color: var(--navy) !important;
}

/* --- titulos con degradado recortado al texto --- */
body.insights-light .bg-clip-text,
body.insights-light [class*="bg-clip-text"],
body.insights-light .text-transparent[class*="bg-gradient"] {
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--navy) !important;
    -webkit-text-fill-color: var(--navy) !important;
}