/**
 * Unio — design tokens (cores e variáveis de layout)
 *
 * Paleta da marca: ciano luminoso (#2DD4FF) → azul Unio (#3D5AE8) → azul profundo (#2B46D4).
 * Fundos leves em família azul-cinza; acentos e CTAs no degradê da marca.
 * Override dinâmico (cor_primaria): unio_theme_vars.html.twig
 */

/* ── Marca (ambos os temas) ───────────────────────────────────────── */
:root {
    --brand-cyan:           #2DD4FF;
    --brand-cyan-light:     #5CE4FF;
    --brand-cyan-mid:       #4A8AFF;
    --brand-cyan-strong:    #3350E0;
    --brand-cyan-dark:      #2B46D4;
    --brand-cyan-deep:      #243CB8;
    --brand-blue:           #3D5AE8;
    --brand-blue-muted:     #5A6B8A;

    --accent-rgb:           61, 90, 232;

    /* Degradê principal — ciano → azul Unio → azul profundo */
    --brand-gradient:       linear-gradient(165deg, #2DD4FF 0%, #3D5AE8 52%, #2B46D4 100%);
    --brand-gradient-hover: linear-gradient(165deg, #5CE4FF 0%, #3350E0 52%, #243CB8 100%);
    /* Hero / card boas-vindas */
    --brand-card-gradient:       linear-gradient(155deg, #2DD4FF 0%, #3D5AE8 42%, #2B46D4 100%);
    --brand-card-gradient-dark:  linear-gradient(155deg, #243CB8 0%, #2B46D4 40%, #3D5AE8 100%);
}

/* ── Tema escuro (padrão) ─────────────────────────────────────────── */
:root,
[data-theme="dark"] {
    --accent:       #5B7CF5;
    --accent-dim:   rgba(91, 124, 245, 0.14);
    --accent-line:  rgba(91, 124, 245, 0.28);
    --accent-rgb:   91, 124, 245;
    --action:       var(--brand-gradient);
    --action-hover: var(--brand-gradient-hover);
    --action-solid: var(--brand-blue);
    --action-solid-hover: var(--brand-cyan-strong);
    --action-dim:   var(--accent-dim);
    --action-line:  var(--accent-line);

    --bg:           #0A0E18;
    --sidebar-bg:   #080C14;
    --surface:      #0E1320;
    --surface-2:    #121828;
    --layout-bg:    var(--surface-2);
    --card-bg:      var(--surface-2);

    --text-1:       #E8ECF4;
    --text-2:       rgba(232, 236, 244, 0.62);
    --text-3:       rgba(232, 236, 244, 0.40);
    --text-primary: var(--text-1);
    --text-muted:   var(--text-2);

    --border:       rgba(255, 255, 255, 0.06);
    --border-2:     rgba(255, 255, 255, 0.10);
    --border-subtle:rgba(255, 255, 255, 0.04);

    --nav-hover-bg: rgba(255, 255, 255, 0.05);
    --nav-active-bg:rgba(91, 124, 245, 0.14);
    --nav-active-icon-bg: rgba(91, 124, 245, 0.22);

    --banner-bg:        var(--surface-2);
    --banner-bg-soft:   var(--surface);
    --banner-heading:   var(--text-1);
    --banner-sub:       var(--text-2);
    --banner-eyebrow:   var(--brand-cyan);
    --banner-border:    var(--border);
    --banner-pattern:   none;

    --layout-header-h:      54px;
    --sidebar-width:        280px;
    --sidebar-width-hover:  304px;
    --inset-shell-bg:       #0a0e14;
    --inset-panel-bg:       var(--surface);
    --inset-panel-border:   rgba(255, 255, 255, 0.07);
    --inset-panel-shadow:   0 1px 3px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --inset-gap:            8px;
    --inset-radius-tl:      24px;
    --inset-radius-tr:      16px;
    --inset-radius-br:      16px;
    --kpi-bottom-glow:      rgba(91, 124, 245, 0.22);
    --sidebar-nav-item-h:   36px;
    --sidebar-nav-icon-box: 24px;

    --ticker-dot-bg:        rgba(255, 255, 255, 0.18);
    --ticker-dot-hover:     rgba(255, 255, 255, 0.35);
    --ticker-track-bg:      rgba(255, 255, 255, 0.08);
    --progress-track-bg:    var(--border);

    --control-bg:           var(--surface-2);
    --control-bg-hover:     var(--nav-hover-bg);
    --input-bg:             var(--surface);

    /* Design system — elevação e forma */
    --ds-radius-sm:         8px;
    --ds-radius-md:         12px;
    --ds-radius-lg:         16px;
    --ds-radius-pill:       999px;
    --ds-shadow-soft:       0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 20px rgba(0, 0, 0, 0.08);
    --ds-shadow-card:       0 2px 8px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(var(--accent-rgb), 0.08);
    --ds-shadow-btn:        0 2px 10px rgba(var(--accent-rgb), 0.28);
    --ds-shadow-btn-hover:  0 4px 16px rgba(var(--accent-rgb), 0.36);
}

/* ── Tema claro ───────────────────────────────────────────────────── */
[data-theme="light"] {
    --accent:       var(--brand-blue);
    --accent-dim:   rgba(61, 90, 232, 0.12);
    --accent-line:  rgba(61, 90, 232, 0.22);
    --accent-rgb:   61, 90, 232;
    --action:       var(--brand-gradient);
    --action-hover: var(--brand-gradient-hover);
    --action-solid: var(--brand-blue);
    --action-solid-hover: var(--brand-cyan-strong);
    --action-dim:   var(--accent-dim);
    --action-line:  var(--accent-line);

    --bg:           #F0F4F8;
    --sidebar-bg:   #E8EDF5;
    --surface:      #EEF2F8;
    --surface-2:    #F8FAFD;
    --layout-bg:    #F0F4F8;
    --card-bg:      #FFFFFF;

    --text-1:       #1A3060;
    --text-2:       #3D4F6F;
    --text-3:       #5A6B8A;
    --text-primary: var(--text-1);
    --text-muted:   var(--text-2);

    --border:       rgba(61, 90, 232, 0.10);
    --border-2:     rgba(61, 90, 232, 0.16);
    --border-subtle:rgba(61, 90, 232, 0.06);

    --nav-hover-bg: rgba(61, 90, 232, 0.08);
    --nav-active-bg: #DDE4F8;
    --nav-active-icon-bg: rgba(61, 90, 232, 0.18);

    --banner-bg:        #D8E2F6;
    --banner-bg-soft:   #E8EEF8;
    --banner-heading:   #1A3060;
    --banner-sub:       #3D4F6F;
    --banner-eyebrow:   var(--brand-blue);
    --banner-border:    rgba(61, 90, 232, 0.14);
    --banner-pattern:   radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.65) 0%, transparent 42%),
                        radial-gradient(circle at 8% 92%, rgba(61, 90, 232, 0.10) 0%, transparent 38%),
                        linear-gradient(125deg, rgba(45, 212, 255, 0.06) 0%, transparent 55%);

    --layout-header-h:      54px;
    --sidebar-width:        280px;
    --sidebar-width-hover:  304px;
    --inset-shell-bg:       #e8ecf0;
    --inset-panel-bg:       #ffffff;
    --inset-panel-border:   rgba(15, 23, 42, 0.08);
    --inset-panel-shadow:   0 1px 3px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.03);
    --inset-gap:            8px;
    --inset-radius-tl:      24px;
    --inset-radius-tr:      16px;
    --inset-radius-br:      16px;
    --kpi-bottom-glow:      rgba(61, 90, 232, 0.18);
    --sidebar-nav-item-h:   36px;
    --sidebar-nav-icon-box: 24px;

    --ticker-dot-bg:        rgba(61, 90, 232, 0.18);
    --ticker-dot-hover:     rgba(61, 90, 232, 0.30);
    --ticker-track-bg:      rgba(61, 90, 232, 0.10);
    --progress-track-bg:    rgba(61, 90, 232, 0.12);

    --control-bg:           rgba(61, 90, 232, 0.06);
    --control-bg-hover:     rgba(61, 90, 232, 0.11);
    --input-bg:             #FFFFFF;

    --ds-shadow-soft:       0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
    --ds-shadow-card:       0 2px 8px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(var(--accent-rgb), 0.07);
    --ds-shadow-btn:        0 2px 10px rgba(var(--accent-rgb), 0.22);
    --ds-shadow-btn-hover:  0 4px 14px rgba(var(--accent-rgb), 0.28);
}

/* ── Tons por item de navegação (shell) ─────────────────────────── */
.nav-item--home    { --nav-tone: #3D5AE8; --nav-tone-bg: rgba(61, 90, 232, 0.14); }
.nav-item--cortex  { --nav-tone: #7C3AED; --nav-tone-bg: rgba(124, 58, 237, 0.14); }
.nav-item--projetos{ --nav-tone: #0891B2; --nav-tone-bg: rgba(8, 145, 178, 0.14); }
.nav-item--chat    { --nav-tone: #059669; --nav-tone-bg: rgba(5, 150, 105, 0.14); }
.nav-item--notif   { --nav-tone: #D97706; --nav-tone-bg: rgba(217, 119, 6, 0.14); }
.nav-item--devtools{ --nav-tone: #8B5CF6; --nav-tone-bg: rgba(139, 92, 246, 0.14); }

[data-hub-pick="operacoes"]     { --nav-tone: #2563EB; --nav-tone-bg: rgba(37, 99, 235, 0.14); }
[data-hub-pick="talentos"]      { --nav-tone: #9333EA; --nav-tone-bg: rgba(147, 51, 234, 0.14); }
[data-hub-pick="maturidade"]    { --nav-tone: #16A34A; --nav-tone-bg: rgba(22, 163, 74, 0.14); }
[data-hub-pick="recrutamento"]  { --nav-tone: #EA580C; --nav-tone-bg: rgba(234, 88, 12, 0.14); }
[data-hub-pick="admin"]         { --nav-tone: #64748B; --nav-tone-bg: rgba(100, 116, 139, 0.14); }
[data-hub-pick="inovacao"]      { --nav-tone: #E11D48; --nav-tone-bg: rgba(225, 29, 72, 0.14); }
[data-hub-pick="ti"]            { --nav-tone: #0EA5E9; --nav-tone-bg: rgba(14, 165, 233, 0.14); }
[data-hub-pick="integracoes"]   { --nav-tone: #14B8A6; --nav-tone-bg: rgba(20, 184, 166, 0.14); }
[data-hub-pick="pos_operatorio"]{ --nav-tone: #EF4444; --nav-tone-bg: rgba(239, 68, 68, 0.14); }
[data-hub-pick="comercial"]     { --nav-tone: #0891B2; --nav-tone-bg: rgba(8, 145, 178, 0.14); }

.sidebar-hub-panel-root[data-sidebar-hub-panel="operacoes"]     { --hub-tone: #2563EB; --hub-tone-bg: rgba(37, 99, 235, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="talentos"]      { --hub-tone: #9333EA; --hub-tone-bg: rgba(147, 51, 234, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="maturidade"]    { --hub-tone: #16A34A; --hub-tone-bg: rgba(22, 163, 74, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="recrutamento"]  { --hub-tone: #EA580C; --hub-tone-bg: rgba(234, 88, 12, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="admin"]         { --hub-tone: #64748B; --hub-tone-bg: rgba(100, 116, 139, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="inovacao"]      { --hub-tone: #E11D48; --hub-tone-bg: rgba(225, 29, 72, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="ti"]            { --hub-tone: #0EA5E9; --hub-tone-bg: rgba(14, 165, 233, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="integracoes"]   { --hub-tone: #14B8A6; --hub-tone-bg: rgba(20, 184, 166, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="pos_operatorio"]{ --hub-tone: #EF4444; --hub-tone-bg: rgba(239, 68, 68, 0.14); }
.sidebar-hub-panel-root[data-sidebar-hub-panel="comercial"]     { --hub-tone: #0891B2; --hub-tone-bg: rgba(8, 145, 178, 0.14); }

.sidebar-hub-panel-root[data-sidebar-hub-panel] {
    --nav-tone: var(--hub-tone);
    --nav-tone-bg: var(--hub-tone-bg);
}

[data-storage-key="ti-ops-sidebar-collapsed"]              { --module-tone: #06B6D4; --module-tone-bg: rgba(6, 182, 212, 0.14); }
[data-storage-key="ti-infra-sidebar-collapsed"]            { --module-tone: #6366F1; --module-tone-bg: rgba(99, 102, 241, 0.14); }
[data-storage-key="ti-intel-sidebar-collapsed"]            { --module-tone: #A855F7; --module-tone-bg: rgba(168, 85, 247, 0.14); }
[data-storage-key="pessoas-sidebar-collapsed"]             { --module-tone: #3B82F6; --module-tone-bg: rgba(59, 130, 246, 0.14); }
[data-storage-key="engenharia-sidebar-collapsed"]          { --module-tone: #F59E0B; --module-tone-bg: rgba(245, 158, 11, 0.14); }
[data-rh-module-tree]                                      { --module-tone: #8B5CF6; --module-tone-bg: rgba(139, 92, 246, 0.14); }
[data-storage-key="publicidade-sidebar-collapsed"]         { --module-tone: #EC4899; --module-tone-bg: rgba(236, 72, 153, 0.14); }
[data-storage-key="inovacao-fluxo-sidebar-collapsed"]      { --module-tone: #F43F5E; --module-tone-bg: rgba(244, 63, 94, 0.14); }
[data-storage-key="inovacao-ideacao-sidebar-collapsed"]    { --module-tone: #FB7185; --module-tone-bg: rgba(251, 113, 133, 0.14); }
[data-storage-key="inovacao-inteligencia-sidebar-collapsed"]{ --module-tone: #C026D3; --module-tone-bg: rgba(192, 38, 211, 0.14); }
[data-storage-key="integracoes-conexoes-sidebar-collapsed"] { --module-tone: #2DD4BF; --module-tone-bg: rgba(45, 212, 191, 0.14); }
[data-storage-key="integracoes-dados-sidebar-collapsed"]   { --module-tone: #38BDF8; --module-tone-bg: rgba(56, 189, 248, 0.14); }
[data-storage-key="integracoes-obs-sidebar-collapsed"]     { --module-tone: #4ADE80; --module-tone-bg: rgba(74, 222, 128, 0.14); }
[data-storage-key="recrutamento-selecao-sidebar-collapsed"]{ --module-tone: #F97316; --module-tone-bg: rgba(249, 115, 22, 0.14); }
[data-storage-key="pos-op-clinica-sidebar-collapsed"]        { --module-tone: #F87171; --module-tone-bg: rgba(248, 113, 113, 0.14); }
[data-storage-key="pos-op-monitoramento-sidebar-collapsed"]  { --module-tone: #FB923C; --module-tone-bg: rgba(251, 146, 60, 0.14); }
[data-storage-key="pos-op-paciente-sidebar-collapsed"]       { --module-tone: #F472B6; --module-tone-bg: rgba(244, 114, 182, 0.14); }