/* ═══════════════════════════════════════════════════════
   DIP Stratify v1 — Design System
   Aligned with dip_prototipo_v2.html
   ═══════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Acessibilidade (WCAG 2.1 AA) ─────────────────── */
/* Skip link — oculto visualmente mas visivel ao focar via Tab */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}
.skip-link:focus {
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    padding: 10px 16px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
}

/* Focus visivel — qualquer elemento interativo com outline quando
   navegado por teclado (focus-visible nao ativa em clique de mouse). */
:focus-visible {
    outline: 2px solid var(--g500, #1a56a8);
    outline-offset: 2px;
    border-radius: 3px;
}

/* prefers-reduced-motion: desliga animacoes para usuarios com
   sensibilidade vestibular (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Role-btn como button (Login) — reset do estilo nativo */
button.role-btn {
    font-family: inherit;
    border: none;
    background: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* Dash body states — classes para substituir style inline */
.dash-loading { padding: 40px; text-align: center; color: var(--ink4); }
.dash-empty   { padding: 40px; text-align: center; color: var(--ink4); }
.dash-error   { padding: 40px; color: var(--danger); }

/* Bloco de erro do login — exibido quando ModelState tem erro.
   role="alert" + aria-live garantem leitura por leitor de tela. */
.login-error {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--danger);
    background: rgba(220, 38, 38, .08);
    color: var(--danger);
    font-size: 13px;
    line-height: 1.45;
}

/* Screen reader only — label oculto visualmente mas lido pelo SR */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Classes que substituem style="" inline nas Razor views ── */
.nav-faq-btn {
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}
.view-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.view-header-title { flex: 1; min-width: 200px; }
.view-sub-flush    { margin-bottom: 0; }
.view-sub-compact  { margin-bottom: 16px; }
.coord-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink3);
}
.ops-header-right {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ops-vision-toggle {
    display: flex;
    gap: 2px;
}
.ops-vision-toggle.hidden { display: none; }
.dash-run {
    font-size: 11px;
    color: var(--ink4);
    margin-top: 2px;
}
.exec-vision-pick { margin-bottom: 14px; }
.exec-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.login-footer-sub { opacity: .6; }

/* ── Utility classes — substituem style="" inline em innerHTML (CSP) ── */
/* Margin */
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-2  { margin-top: 2px; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }

/* Text color */
.text-ink   { color: var(--ink); }
.text-ink2  { color: var(--ink2); }
.text-ink3  { color: var(--ink3); }
.text-ink4  { color: var(--ink4); }
.text-ok    { color: var(--ok); }
.text-warn  { color: var(--warn); }
.text-danger{ color: var(--danger); }

/* Text sizing / weight */
.fs-9  { font-size: 9px; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.font-mono  { font-family: var(--mono, ui-monospace,Consolas,'Courier New',monospace); }
.font-serif { font-family: var(--display, 'Nunito', sans-serif); }
.ucase-label { text-transform: uppercase; letter-spacing: .06em; }

/* Text alignment */
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* Flex / grid */
.flex-row      { display: flex; flex-direction: row; }
.flex-col      { display: flex; flex-direction: column; }
.flex-between  { display: flex; justify-content: space-between; }
.flex-between-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 3px; }
.flex-center   { display: flex; align-items: center; }
.inline-flex-center { display: inline-flex; align-items: center; gap: 4px; }
.gap-2  { gap: 2px; }
.gap-4  { gap: 4px; }
.gap-5  { gap: 5px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); }

/* Panels / cards reutilizaveis */
.panel-bordered {
    background: var(--paper);
    border: 1px solid var(--border2);
    border-radius: 10px;
    overflow: hidden;
}
.panel-head-strong {
    padding: 8px 13px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
}
.panel-row-flex {
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.stat-card-inline {
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 12px 16px;
    min-height: 64px;
}
.scroll-x-pad0 { padding: 0; overflow-x: auto; }

/* Section/label texts */
.section-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--ink4);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.meta-mono {
    font-size: 9px;
    font-family: var(--mono, ui-monospace,Consolas,'Courier New',monospace);
    color: var(--ink4);
}
.strong-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}
.muted-small {
    font-size: 11px;
    color: var(--ink3);
}

/* Status indicators (replaces inline colored dots/chips) */
.dot-ok,
.dot-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
}
.legend-dot-ok     { background: var(--ok); }
.legend-dot-warn   { background: var(--warn); }
.legend-dot-danger { background: var(--danger); }
.legend-dot-stone  { background: #bcc1cc; }

/* Avatar / chip-like usado nos ranks */
.rank-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}

/* View header (shared entre tabs) */
.view-header-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

/* Tag roxa pequena (prioridade/label) */
.tag-purple-sm {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: #ede9fe;
    color: #5b21b6;
}

/* ── Design Tokens ───────────────────────────────── */
:root {
    /* Palette — azul institucional (#00265c), stone, off-white.
       Substitui a paleta sage green original; a escala mantem os mesmos
       degraus (g50..g700) para nao quebrar nenhum consumidor de token. */
    --g50:  #f2f7fd;
    --g100: #dfeaf8;
    --g200: #bdd5f0;
    --g300: #8bb2e2;
    --g400: #4d84cc;
    --g500: #1a56a8;
    --g600: #003785;
    --g700: #00265c;

    /* Palette — stone (neutro frio, para casar com o azul) */
    --s50:  #f7f8fa;
    --s100: #ecedf1;
    --s200: #d9dce3;
    --s300: #bcc1cc;
    --s400: #9ba3b1;
    --s500: #7d8695;
    --s600: #616a79;

    /* Ink (text) — contraste ajustado para WCAG AA (4.5:1 em texto normal) */
    --ink:  #141a24;
    --ink2: #3b4557;
    --ink3: #58627a;  /* 5.1:1 em --paper */
    --ink4: #6d778e;  /* 4.6:1 em --paper */

    /* Paper (backgrounds) */
    --paper:  #fafbfe;
    --paper2: #f1f4fa;
    --paper3: #e6ebf5;

    /* Borders */
    --border:  rgba(0, 38, 92, 0.09);
    --border2: rgba(0, 38, 92, 0.15);
    --border3: rgba(0, 38, 92, 0.24);

    /* Marca — navy + dourado institucional (referencia 1: painel TCS) */
    --gold:    #d4a03c;
    --gold2:   #b8862c;
    --navy:    #00265c;
    --navy2:   #001b42;
    --navy3:   #000d20;  /* campo quase preto da referencia 2 */

    /* Fitas de luz (referencia 2) — usadas nos overlays e nos realces
       de borda. Sao cores de superficie, nunca de texto: o cyan claro
       reprova em contraste sobre papel. */
    --ribbon-cyan:  #5ec8e8;
    --ribbon-cyan2: #2f7fd0;
    --ribbon-amber: #f2c85a;

    /* Status */
    --ok:      #1e7a52;
    --warn:    #b87333;
    --danger:  #8b3a3a;
    --ok-bg:   #eef7f2;
    --warn-bg: #fdf5ec;
    --danger-bg: #fdf0f0;

    /* Typography */
    --font:    'Nunito', system-ui, sans-serif;
    /* Display e texto na mesma familia agora: a hierarquia passa a vir do
       peso (700/800), nao do contraste serif x sans. */
    --display: 'Nunito', system-ui, sans-serif;
    /* JetBrains Mono saiu junto com o link antigo do Google Fonts; o que
       sobra e a pilha monoespacada do sistema. */
    --mono:    ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

    /* Shadows */
    --shadow:  0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
    --shadow2: 0 2px 8px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.06);
}

/* ── Base ──────────────────────────────────────────── */
html, body {
    height: 100%;
    font-family: var(--font);
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}
.hidden { display: none !important; }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--paper3); border-radius: 99px; }

/* ── Animations ────────────────────────────────────── */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
}
@keyframes dotBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
}
.fadein  { animation: fadeUp .3s ease forwards; }
.slidein { animation: slideIn .25s ease forwards; }


/* ═══════════════════════════════════════════════════════
   SCREEN SYSTEM
   ═══════════════════════════════════════════════════════ */
.screen        { display: none; height: 100vh; overflow: hidden; }
.screen.active { display: flex; }


/* ═══════════════════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════════════════ */
#screen-login {
    /* Campo navy que escurece no topo esquerdo (ref. 2) e abre para azul
       no canto inferior direito, onde os arcos entram (ref. 1). */
    background: linear-gradient(150deg, var(--navy3) 0%, var(--navy2) 38%, var(--navy) 72%, #00306f 100%);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: hidden;
}
/* Arc sweep em escala grande, ancorado no canto inferior direito. */
#screen-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("../img/login-arcs.svg") right bottom / auto 118% no-repeat;
    pointer-events: none;
}
/* Fita de luz cyan/ambar cruzando a tela (ref. 2). Fica ABAIXO do card
   (z-index 0 contra o z-index 1 do card) e acima do gradiente. A altura
   fixa em vh evita que a fita estique junto com telas muito altas. */
#screen-login::after {
    content: '';
    position: absolute;
    left: -6%;
    right: -6%;
    top: 46%;
    height: 62vh;
    background: url("../img/ribbon-flow.svg") center / 100% 100% no-repeat;
    opacity: .85;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 768px) {
    /* Em tela estreita a fita passa por tras do card e suja a leitura. */
    #screen-login::after { opacity: .45; }
}

.login-card {
    /* Opaco de proposito: sobre o campo navy, o card translucido deixava
       a fita atravessar o formulario. */
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    padding: 44px 52px 48px;
    width: 420px;
    box-shadow: 0 8px 28px rgba(0, 12, 32, .30), 0 32px 80px rgba(0, 12, 32, .26);
    position: relative;
    z-index: 1;
    animation: cardIn .6s cubic-bezier(.16, 1, .3, 1) forwards;
}
/* Logo institucional no topo do card. O filete dourado abaixo separa
   a marca da empresa do nome do produto. */
.login-brand {
    display: block;
    height: 42px;
    width: auto;
    margin-bottom: 2px;
}
.login-divider {
    width: 44px;
    height: 2px;
    background: var(--gold);
    border-radius: 99px;
    margin: 20px 0;
}
.login-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink3);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.login-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border3);
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font);
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color .15s;
    margin-bottom: 14px;
}
.login-input:focus { border-color: var(--g400); }
.login-roles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 24px;
}
.role-btn {
    padding: 10px 6px;
    border: 1.5px solid var(--border2);
    border-radius: 10px;
    background: var(--paper2);
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}
.role-btn:hover { border-color: var(--g300); background: var(--g50); }
.role-btn.on   { border-color: var(--g500); background: var(--g50); }
/* SVG de linha no lugar de emoji — herda a cor do estado do botao. */
.role-icon {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0 auto 6px;
    color: var(--ink3);
    transition: color .15s ease;
}
.role-btn.on .role-icon   { color: var(--g600); }
.role-btn:hover .role-icon { color: var(--g500); }
.role-name     { font-size: 10px; font-weight: 600; color: var(--ink2); }
.role-btn.on .role-name { color: var(--g600); }
.login-btn {
    width: 100%;
    padding: 13px;
    background: var(--g600);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all .15s;
    letter-spacing: .02em;
}
.login-btn:hover  { background: var(--g700); }
.login-footer     { margin-top: 18px; font-size: 11px; color: var(--ink4); text-align: center; }


/* ═══════════════════════════════════════════════════════
   APP SHELL — Top Navigation
   ═══════════════════════════════════════════════════════ */
#screen-app { flex-direction: column; }

.topnav {
    height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    /* Tres camadas, de cima para baixo: arcos dourados (ref. 1), fita de
       luz (ref. 2) e o gradiente navy. A ordem em `background` e a ordem
       de empilhamento — o primeiro valor fica na frente. */
    background:
        url("../img/header-arcs.svg") right 240px top / auto 100% no-repeat,
        url("../img/ribbon-flow.svg") left -340px bottom -72px / 1500px auto no-repeat,
        linear-gradient(100deg, var(--navy2) 0%, var(--navy) 46%, #00306f 100%);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 14px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 12px rgba(0, 27, 66, .22);
}
/* Veu que escurece a faixa sob o conteudo — arcos e fita viram textura
   de fundo e nunca disputam legibilidade com a logo, o nome ou o relogio. */
.topnav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--navy) 0%, var(--navy) 26%,
        rgba(0, 38, 92, .50) 38%, rgba(0, 38, 92, 0) 50%,
        rgba(0, 38, 92, 0) 66%, rgba(0, 38, 92, .82) 78%,
        rgba(0, 38, 92, .90) 100%);
    pointer-events: none;
}
/* Conteudo acima do veu. */
.topnav > * { position: relative; z-index: 1; }

/* Fio inferior de 1px: dourado da ref. 1 virando cyan da ref. 2. */
.topnav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        var(--gold) 0%, rgba(212,160,60,.45) 20%,
        rgba(94,200,232,.38) 46%, rgba(94,200,232,.12) 62%, transparent 80%);
    z-index: 2;
}

/* ── Marca no canto esquerdo ──────────────────────────
   Logo institucional oficial, sozinha. O filete existe
   para separar as duas marcas: sem ele "tcs ... DIP" le como um nome so. */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-brand-logo {
    height: 30px;
    width: auto;
    display: block;
}
.nav-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .58);
    min-width: 0;          /* sem isso o flex item nao encolhe abaixo do conteudo */
    overflow: hidden;
    white-space: nowrap;
}
.nav-crumb, .nav-breadcrumb > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-sep   { color: rgba(255, 255, 255, .32); }
.nav-crumb {
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    transition: color .15s ease;
}
.nav-crumb:hover  { color: #fff; }
.nav-crumb.active { color: var(--gold); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.persona-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* Sobre a topnav navy: fundo translucido claro, texto claro. As versoes
   anteriores (fundo claro/texto escuro) sumiam contra o azul. */
.persona-tag.supervisor  { background: rgba(255,255,255,.14); color: #dfeaf8; }
.persona-tag.coordenador { background: rgba(255,255,255,.14); color: #bdd5f0; }
.persona-tag.executivo   { background: rgba(212,160,60,.20); color: var(--gold); }
.nav-user   { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.nav-clock  {
    font-size: 10px;
    font-family: var(--mono);
    color: rgba(255, 255, 255, .62);
    padding: 3px 8px;
    background: rgba(255, 255, 255, .09);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
/* Logout via POST: o form não pode quebrar o alinhamento da barra */
.nav-logout-form { display: inline-flex; margin: 0; }
button.nav-logout { font-family: inherit; line-height: inherit; }
.nav-logout {
    font-size: 11px;
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .22);
    text-decoration: none;
    background: transparent;
    transition: background .15s ease, border-color .15s ease;
}
.nav-logout:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .38);
}
/* Foco visivel sobre navy — o --g500 global sumiria aqui. */
.topnav :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════
   CONTENT AREA
   ═══════════════════════════════════════════════════════ */
.app-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.view      { display: none; flex: 1; }
.view.active { display: flex; flex-direction: column; overflow: hidden; contain: layout style; }


/* ═══════════════════════════════════════════════════════
   PROJECT SELECTOR
   ═══════════════════════════════════════════════════════ */
.proj-view { padding: 40px 48px; overflow-y: auto; flex: 1; }
.view-headline {
    font-family: var(--display);
    font-size: 30px;
    color: var(--g700);
    margin-bottom: 6px;
    letter-spacing: -.4px;
}
.view-sub { font-size: 13px; color: var(--ink3); margin-bottom: 32px; }
.proj-search-input {
    padding: 8px 14px;
    border: 1.5px solid var(--border2);
    border-radius: 10px;
    font-size: 12px;
    font-family: var(--font);
    background: #fff;
    color: var(--ink);
    outline: none;
    width: 220px;
    transition: border-color .15s;
}
.proj-search-input:focus { border-color: var(--g400); }
.proj-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.proj-card {
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 16px;
    padding: 22px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.proj-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--g300);
    border-radius: 16px 16px 0 0;
    transition: background .2s;
}
.proj-card:hover        { border-color: var(--g300); box-shadow: var(--shadow2); transform: translateY(-1px); }
.proj-card:hover::before { background: var(--g500); }
.proj-card-icon   { font-size: 26px; margin-bottom: 12px; }
.proj-card-name   { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.proj-card-client { font-size: 11px; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.proj-card-ops    { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.op-chip {
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--g50);
    border: 1px solid var(--g100);
    color: var(--g700);
}
.proj-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.pcs-item { text-align: center; }
.pcs-val {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--ink);
}
.pcs-val.ok     { color: var(--ok); }
.pcs-val.warn   { color: var(--warn); }
.pcs-val.danger { color: var(--danger); }
.pcs-label { font-size: 9px; color: var(--ink4); text-transform: uppercase; letter-spacing: .05em; }


/* ═══════════════════════════════════════════════════════
   OPERATIONS LIST
   ═══════════════════════════════════════════════════════ */
.ops-view { padding: 32px 48px; overflow-y: auto; flex: 1; }
.back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink3);
    cursor: pointer;
    margin-bottom: 24px;
    width: fit-content;
}
.back-btn:hover { color: var(--g600); }
.ops-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.ops-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--g50);
    border: 1px solid var(--g200);
    color: var(--g700);
}
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.op-card {
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    transition: all .18s;
}
.op-card:hover { border-color: var(--g300); box-shadow: var(--shadow); }
.op-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.op-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.sla-pill { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px; font-family: var(--mono); }
.sla-ok     { background: var(--ok-bg); color: var(--ok); }
.sla-warn   { background: var(--warn-bg); color: var(--warn); }
.sla-danger { background: var(--danger-bg); color: var(--danger); }
.op-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.op-m  { text-align: center; background: var(--paper2); border-radius: 8px; padding: 7px 4px; }
.op-mv { font-size: 13px; font-weight: 700; font-family: var(--mono); color: var(--ink); }
.op-ml { font-size: 9px; color: var(--ink4); text-transform: uppercase; letter-spacing: .04em; }
.op-sla-bar  { height: 4px; background: var(--paper3); border-radius: 99px; overflow: hidden; }
.op-sla-fill { height: 100%; border-radius: 99px; transition: width .4s; }


/* ═══════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════ */
.dash-view    { display: flex; flex-direction: column; height: 100%; }
/* Coluna direita do grid da sidebar: topbar (altura natural) + corpo
   (ocupa o resto e rola sozinho). O min-height:0 e obrigatorio — sem ele
   um filho com overflow dentro de flex nunca encolhe e o scroll vaza. */
.dash-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.dash-topbar  { padding: 16px 32px 10px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-title   { font-family: var(--display); font-size: 22px; color: var(--g700); letter-spacing: -.3px; }
.dash-tab {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 99px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--ink3);
    transition: all .15s;
    letter-spacing: .02em;
    font-family: var(--font);
}
.dash-tab.on             { background: var(--g600); color: #fff; }
.dash-tab:hover:not(.on) { background: var(--paper3); }
.dash-body { flex: 1; overflow-y: auto; padding: 16px 32px 32px; transition: opacity .15s ease; min-width: 0; }

/* ── Stack rhythm: espaçamento uniforme entre blocos top-level
   Todos os filhos diretos de .dash-body (kpi-row, grids, panels,
   filter bars, agent panels) usam o mesmo ritmo vertical.
   A especificidade (.dash-body > *) ganha de .grid-2/.kpi-row/.mb-14
   e zera o margin-bottom legado, transferindo para margin-top via
   "lobotomized owl" (* + *). Resultado: 24px entre qualquer par
   de blocos, sempre consistente, independente do que cada tab
   renderiza.  Não afeta .dash-body.rev-mode (review tab), pois lá
   o único filho é o .rev-shell e a regra * + * só dispara entre
   irmãos. */
.dash-body > * { margin-bottom: 0; }
.dash-body > * + * { margin-top: 24px; }

/* ── Sidebar Retrátil ─────────────────────────────────── */
.dash-layout {
    display: grid;
    grid-template-columns: 52px 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    transition: grid-template-columns .25s cubic-bezier(.4,0,.2,1);
}
.dash-layout:has(.dash-sidebar.expanded) {
    grid-template-columns: 210px 1fr;
}
.dash-sidebar {
    background: linear-gradient(to bottom, var(--paper) 0%, var(--paper2) 100%);
    border-right: none;
    padding: 10px 0 20px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 52px;
    transition: width .25s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.dash-sidebar.expanded { width: 210px; }
/* Sem a linha divisoria, a barra de rolagem da sidebar passou a ser o unico
   traço vertical na borda e lia como se a linha continuasse ali. Fica
   invisivel em repouso e aparece quando o ponteiro entra na coluna. */
.dash-sidebar::-webkit-scrollbar-thumb { background: transparent; }
.dash-sidebar:hover::-webkit-scrollbar-thumb { background: var(--paper3); }
.dash-sidebar { scrollbar-color: transparent transparent; }
.dash-sidebar:hover { scrollbar-color: var(--paper3) transparent; }

/* Toggle button */
.dsb-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ink4);
    transition: color .15s;
    flex-shrink: 0;
}
.dsb-toggle:hover { color: var(--g600); }
.dash-sidebar.expanded .dsb-toggle { justify-content: flex-end; padding-right: 14px; }

/* Groups */
.dsb-group { margin-bottom: 2px; }
.dsb-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink4);
    padding: 12px 0 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.dash-sidebar.expanded .dsb-label {
    text-align: left;
    padding: 12px 16px 4px;
}

/* Items */
.dsb-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    padding: 9px 0;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink3);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: all .15s ease;
    white-space: nowrap;
    overflow: hidden;
}
.dash-sidebar.expanded .dsb-item {
    justify-content: flex-start;
    gap: 8px;
    padding: 7px 14px 7px 16px;
}
.dsb-item:hover {
    background: var(--paper3);
    color: var(--ink);
}
.dsb-item.active {
    background: var(--g100);
    color: var(--g700);
    border-left-color: var(--g500);
    font-weight: 600;
}
.dsb-icon {
    flex-shrink: 0;
    width: 20px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}
.dsb-icon svg { display: block; }
.dsb-text {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-sidebar.expanded .dsb-text { display: inline; }

/* Tooltip — JS-driven, positioned absolutely in body */
.dsb-tooltip {
    position: fixed;
    background: var(--ink);
    color: #fff;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    opacity: 0;
    transition: opacity .1s ease;
}
.dsb-tooltip.visible { opacity: 1; }

.dash-sidebar:not(.expanded) .dsb-label { font-size: 0; height: 8px; }

/* ── FAQ KPI Catalog ─────────────────────────────────── */
.faq-kcat {
    margin-top: 28px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.faq-kcat-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--g50) 0%, #fff 70%);
    border-bottom: 1px solid var(--border);
}
.faq-kcat-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.faq-kcat-head-text { flex: 1; min-width: 0; }
.faq-kcat-title {
    font-family: var(--display);
    font-size: 17px;
    color: var(--g700);
    line-height: 1.2;
    margin-bottom: 3px;
}
.faq-kcat-sub {
    font-size: 11.5px;
    color: var(--ink3);
    line-height: 1.45;
}
.faq-kcat-stats {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.faq-kcat-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 10px;
    min-width: 60px;
}
.faq-kcat-stat span {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--g600);
    line-height: 1;
}
.faq-kcat-stat small {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink4);
    margin-top: 3px;
}

.faq-kcat-cat {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.faq-kcat-cat:last-of-type { border-bottom: none; }
.faq-kcat-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.faq-kcat-cat-icon { font-size: 16px; }
.faq-kcat-cat-name {
    margin: 0;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.faq-kcat-cat-count {
    margin-left: auto;
    font-size: 10px;
    color: var(--ink4);
    background: var(--paper2);
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-weight: 500;
}

.faq-kcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.faq-kcat-card {
    padding: 12px 14px;
    background: var(--paper2);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: box-shadow .2s, border-color .2s, transform .15s;
}
.faq-kcat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
    border-color: var(--border2);
    transform: translateY(-1px);
}
.faq-kcat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.faq-kcat-freq {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 5px;
    border: 1px solid;
    line-height: 1.6;
}
.faq-kcat-bench {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--g600);
    text-align: right;
}
.faq-kcat-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 8px;
}
.faq-kcat-formula,
.faq-kcat-action {
    font-size: 10.5px;
    color: var(--ink2);
    line-height: 1.45;
    padding: 6px 10px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 4px;
}
.faq-kcat-formula {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink2);
}
.faq-kcat-formula span,
.faq-kcat-action span {
    display: block;
    font-family: var(--font);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink4);
    margin-bottom: 2px;
}

.faq-kcat-footer {
    padding: 16px 22px;
    background: var(--paper2);
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--ink3);
    line-height: 1.6;
}
.faq-kcat-footer strong {
    display: block;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}
.faq-kcat-footer ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}
.faq-kcat-footer li { margin-bottom: 3px; }

@media (max-width: 768px) {
    .faq-kcat-header { flex-direction: column; align-items: flex-start; }
    .faq-kcat-stats { width: 100%; }
    .faq-kcat-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   PIPELINE STATUS BAR (prototype v2 addition)
   ═══════════════════════════════════════════════════════ */
.pipeline-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--paper2);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 11px;
}


/* ═══════════════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════════════ */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.kpi {
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}
.kpi::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 0 0 12px 12px;
}
.kpi.ok::after     { background: var(--ok); }
.kpi.warn::after   { background: var(--warn); }
.kpi.danger::after { background: var(--danger); }
.kpi-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--ink4);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}
.kpi-val {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--ink);
    letter-spacing: -.5px;
}
.kpi.ok .kpi-val     { color: var(--ok); }
.kpi.warn .kpi-val   { color: var(--warn); }
.kpi.danger .kpi-val { color: var(--danger); }
.kpi-sub { font-size: 10px; color: var(--ink4); margin-top: 3px; }
.kpi-delta {
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.kpi-delta.up      { color: var(--ok); }
.kpi-delta.down    { color: var(--danger); }
.kpi-delta.neutral { color: var(--ink3); }


/* ═══════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════ */
.grid-2  { display: grid; grid-template-columns: 1fr 1fr;   gap: 14px; margin-bottom: 14px; }
.grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.grid-13 { display: grid; grid-template-columns: 1fr 2fr;   gap: 14px; margin-bottom: 14px; }
.grid-31 { display: grid; grid-template-columns: 2fr 1fr;   gap: 14px; margin-bottom: 14px; }
.span-2  { grid-column: span 2; }


/* ═══════════════════════════════════════════════════════
   PANELS
   ═══════════════════════════════════════════════════════ */
.panel      { background: #fff; border: 1px solid var(--border2); border-radius: 14px; overflow: hidden; }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.panel-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 7px;
}
.panel-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    font-family: var(--mono);
}
.panel-badge.ok     { background: var(--ok-bg);     color: var(--ok); }
.panel-badge.warn   { background: var(--warn-bg);   color: var(--warn); }
.panel-badge.danger { background: var(--danger-bg); color: var(--danger); }
.panel-body   { padding: 14px 16px; }
.panel-action { font-size: 10px; font-weight: 600; color: var(--g500); cursor: pointer; }
.panel-action:hover { color: var(--g700); }


/* ═══════════════════════════════════════════════════════
   SVG CHARTS
   ═══════════════════════════════════════════════════════ */
.chart-wrap { overflow: visible; }


/* ═══════════════════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════════════════ */
.dt              { width: 100%; border-collapse: collapse; font-size: 12px; }
.dt th           { text-align: left; font-size: 10px; font-weight: 600; color: var(--ink4); text-transform: uppercase; letter-spacing: .06em; padding: 20px 18px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; background: #fff; }
.dt th:first-child { padding-left: 20px; }
.dt th:last-child  { padding-right: 20px; }
.dt td           { padding: 12px 18px; border-bottom: 1px solid var(--border); color: var(--ink2); vertical-align: middle; }
.dt td:first-child { padding-left: 20px; }
.dt td:last-child  { padding-right: 20px; }
.dt tr:last-child td { border-bottom: none; }
.dt tr:hover td  { background: var(--paper2); }
.dt .mono        { font-family: var(--mono); font-size: 11px; }
/* Tabelas dentro de panel-body.scroll-x-pad0 não tem padding no wrapper —
   o respiro vem das células. Garante separação título(panel-head) ↔ dados. */
.panel-body.scroll-x-pad0 > .dt > thead > tr > th:first-child,
.panel-body.scroll-x-pad0 > .dt > tbody > tr > td:first-child { padding-left: 20px; }
.panel-body.scroll-x-pad0 > .dt > thead > tr > th:last-child,
.panel-body.scroll-x-pad0 > .dt > tbody > tr > td:last-child  { padding-right: 20px; }

.severity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 99px;
    white-space: nowrap;
    line-height: 1.4;
}
.severity.high   { background: var(--danger-bg); color: var(--danger); }
.severity.medium { background: var(--warn-bg);   color: var(--warn); }
.severity.low    { background: var(--ok-bg);     color: var(--ok); }


/* ═══════════════════════════════════════════════════════
   PROGRESS BARS
   ═══════════════════════════════════════════════════════ */
.pbar      { height: 6px; background: var(--paper3); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.pbar-fill { height: 100%; border-radius: 99px; }
.pbar-fill.ok     { background: var(--ok); }
.pbar-fill.warn   { background: var(--warn); }
.pbar-fill.danger { background: var(--danger); }


/* ═══════════════════════════════════════════════════════
   PARETO — diagrama, tabela e barra de filtros
   ═══════════════════════════════════════════════════════ */

/* Linha que fecha os 80% na vista de tabela. O realce e de fundo e so na
   primeira coluna, para nao competir com a coluna de criticidade. */
.pareto-tr-vital td { background: linear-gradient(90deg, var(--g50) 0%, transparent 60%); }
.pareto-tr-vital td:first-child { box-shadow: inset 2px 0 0 var(--g300); }

.pareto-legenda { justify-content: center; margin-top: -6px; margin-bottom: 4px; }

.pareto-ord { color: var(--ink4); font-size: 10px; text-align: center; }
.pareto-cod { color: var(--ink4); font-size: 10px; margin-left: 5px; font-weight: 400; }
.pareto-resumo { margin-top: 12px; font-size: 11.5px; color: var(--ink3); }

/* ── Barra de filtros ───────────────────────────────── */
.qf-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
/* Empurra o alternador de vista para a direita, longe dos filtros de
   recorte: sao controles de natureza diferente e agrupa-los confunde. */
.qf-fim { margin-left: auto; }

.qf-seg {
    display: inline-flex;
    border: 1px solid var(--border2);
    border-radius: 8px;
    overflow: hidden;
}
.qf-seg-btn {
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--ink3);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.qf-seg-btn + .qf-seg-btn { border-left: 1px solid var(--border2); }
.qf-seg-btn:hover { background: var(--g50); color: var(--g600); }
.qf-seg-btn.on { background: var(--g600); color: #fff; }
.qf-vista .qf-seg-btn { padding: 4px 10px; font-size: 10.5px; }

.qf-campo { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink3); }
.qf-select {
    font: inherit;
    font-size: 11px;
    padding: 5px 9px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    max-width: 230px;
}
.qf-select:focus { outline: none; border-color: var(--g400); }

.qf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink3); cursor: pointer; }
.qf-check input { cursor: pointer; accent-color: var(--g600); }

.qf-limpar {
    font: inherit;
    font-size: 11px;
    padding: 4px 10px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: transparent;
    color: var(--ink4);
    cursor: pointer;
}
.qf-limpar:hover { color: var(--g600); border-color: var(--g300); }

.qf-tag {
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid var(--border3);
    color: var(--ink4);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    white-space: nowrap;
}
.qf-tag.danger { border-color: var(--danger); color: var(--danger); }

@media (max-width: 768px) {
    .qf-bar { gap: 10px; }
    .qf-fim { margin-left: 0; }
    .qf-select { max-width: 150px; }
}


/* ═══════════════════════════════════════════════════════
   LEGEND
   ═══════════════════════════════════════════════════════ */
.legend      { display: flex; gap: 12px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ink3); }
.legend-dot  { width: 8px; height: 8px; border-radius: 50%; }


/* ═══════════════════════════════════════════════════════
   FORECAST
   ═══════════════════════════════════════════════════════ */
.forecast-note { font-size: 10px; color: var(--ink4); margin-top: 6px; }


/* ═══════════════════════════════════════════════════════
   AGENT PANEL (Insight narrativo)
   ═══════════════════════════════════════════════════════ */
.agent-panel {
    background: linear-gradient(135deg, var(--g50), #fff);
    border: 1px solid var(--g200);
    border-radius: 14px;
    padding: 16px;
}
.agent-head  { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.agent-dot   { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex-shrink: 0; animation: pulse .9s infinite; }
.agent-title { font-size: 12px; font-weight: 600; color: var(--g700); }
.agent-msg {
    font-size: 12px;
    color: var(--ink2);
    line-height: 1.65;
    /* Narrativas do pipeline (templates por persona) vêm com quebras de linha */
    white-space: pre-line;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--g100);
    border-radius: 8px;
    border-left: 3px solid var(--g400);
}
.agent-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.agent-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    cursor: pointer;
    transition: all .12s;
}
.agent-tag.ok     { background: var(--ok-bg);     color: var(--ok);     border: 1px solid var(--g200); }
.agent-tag.warn   { background: var(--warn-bg);   color: var(--warn);   border: 1px solid #e8c8a0; }
.agent-tag.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #e0b0b0; }


/* ═══════════════════════════════════════════════════════
   BREAKDOWN TREE (Gargalos)
   ═══════════════════════════════════════════════════════ */
.tree-item {
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 3px;
    cursor: pointer;
    transition: background .12s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tree-item:hover  { background: var(--paper2); }
.tree-item-name   { font-size: 12px; font-weight: 500; color: var(--ink2); }
.tree-item-bar    { flex: 1; margin: 0 10px; }
.tree-item-val    { font-size: 11px; font-family: var(--mono); font-weight: 600; color: var(--ink); }
.tree-sub         { padding-left: 14px; border-left: 1px dashed var(--border2); margin-left: 6px; }


/* ═══════════════════════════════════════════════════════
   AGING BANDS
   ═══════════════════════════════════════════════════════ */
.aging-row { display: flex; height: 28px; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.aging-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    transition: flex .4s;
}


/* ═══════════════════════════════════════════════════════
   EXECUTIVE OVERLAY
   ═══════════════════════════════════════════════════════ */
.exec-highlight { position: relative; }
.exec-highlight::after {
    content: '★';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 9px;
    color: #b87333;
    opacity: .6;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════
   TYPING DOTS (chat/review)
   ═══════════════════════════════════════════════════════ */
.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ink4);
    display: inline-block;
    animation: dotBounce 1.1s infinite;
}
.dot:nth-child(2) { animation-delay: .15s; }
.dot:nth-child(3) { animation-delay: .3s; }


/* ═══════════════════════════════════════════════════════
   REVIEW SHELL — full-height 3-column layout
   ═══════════════════════════════════════════════════════ */

/* When review tab is active, dash-body must NOT scroll —
   the review shell handles its own scroll per-column. */
.dash-body.rev-mode {
    padding: 8px !important;
    overflow: hidden !important;
}

.rev-shell {
    display: grid;
    grid-template-columns: 250px 1fr 330px;
    /* Fill all remaining vertical space inside dash-body */
    height: 100%;
    border: 1px solid var(--border2);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.rev-queue {
    border-right: 1px solid var(--border2);
    overflow-y: auto;
    background: var(--paper2);
    display: flex;
    flex-direction: column;
}

.rev-center {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border2);
    overflow: hidden;
}

.rev-center-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
/* Prevent flex children from collapsing */
.rev-center-scroll > * {
    flex-shrink: 0;
}

.rev-chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--paper);
}

/* Review filter bar (for faturamento) */
.rev-filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 0;
}
.rev-filter-bar select,
.rev-filter-bar input {
    padding: 7px 12px;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    font-size: 12px;
    font-family: var(--font);
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color .15s;
}
.rev-filter-bar select:focus,
.rev-filter-bar input:focus { border-color: var(--g400); }


/* ═══════════════════════════════════════════════════════
   COORDENADOR FILTER BAR
   ═══════════════════════════════════════════════════════ */
.coord-filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 12px;
    margin-bottom: 20px;
}
.coord-filter-bar select {
    padding: 7px 12px;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    font-size: 12px;
    font-family: var(--font);
    background: #fff;
    color: var(--ink);
    outline: none;
    min-width: 160px;
    transition: border-color .15s;
}
.coord-filter-bar select:focus { border-color: var(--g400); }
.coord-apply-btn {
    padding: 7px 20px;
    background: var(--g600);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s;
    letter-spacing: .02em;
}
.coord-apply-btn:hover { background: var(--g700); }

/* ═══════════════════════════════════════════════════════
   Responsive Design & Typography Additions
   ═══════════════════════════════════════════════════════ */

/* ── Typography refinements ───────────────────────────── */
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.kpi-val { letter-spacing: -0.02em; font-feature-settings: 'tnum'; }
.panel-title { font-size: 13px; }
.agent-msg { line-height: 1.7; }
.mono, .dt .mono { font-feature-settings: 'tnum'; }

/* ── Chart containers ─────────────────────────────────── */
.chart-container { position: relative; width: 100%; min-height: 140px; contain: layout paint; }
.chart-container canvas { width: 100% !important; height: 100% !important; }

/* ── Grid equal-height panels ────────────────────────── */
.grid-2 > .panel,
.grid-3 > .panel,
.grid-13 > .panel,
.grid-31 > .panel { display: flex; flex-direction: column; }
.grid-2 > .panel > .panel-body,
.grid-3 > .panel > .panel-body,
.grid-13 > .panel > .panel-body,
.grid-31 > .panel > .panel-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.grid-2,
.grid-3,
.grid-13,
.grid-31 { align-items: stretch; }

/* ── Responsive: narrow desktop (≤1280px) ─────────────── */
@media (max-width: 1280px) {
    /* Mantém auto-fit — adapta à contagem real de KPIs sem criar órfãos */
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
    .proj-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .rev-shell { grid-template-columns: 220px 1fr 280px; }
}

/* ── Responsive: tablet landscape (≤1024px) ───────────── */
@media (max-width: 1024px) {
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; }
    .grid-2, .grid-3, .grid-13, .grid-31 { grid-template-columns: 1fr; }
    .dash-topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .rev-shell { grid-template-columns: 1fr; }
    .rev-queue { max-height: 200px; overflow-y: auto; }
    .rev-center { border-right: none; }
    .rev-chat { max-height: 300px; overflow-y: auto; }
    .ops-grid { grid-template-columns: 1fr; }
    .proj-view, .ops-view, .faq-view { padding: 24px 20px; }
    .topnav { padding: 0 16px; }
}

/* ── Responsive: tablet portrait (≤768px) ─────────────── */
@media (max-width: 768px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
    .proj-grid { grid-template-columns: 1fr; }
    .proj-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .proj-view, .ops-view, .faq-view { padding: 16px 12px; }
    .topnav .nav-clock,
    .topnav .nav-user { display: none; }
    .nav-brand-logo { height: 26px; }
    .login-card { width: 100%; max-width: 400px; padding: 32px 24px; margin: 0 16px; }
    .dash-body { padding: 12px 16px 24px; }
    .dash-topbar { padding: 12px 16px 0; }
    .view-headline { font-size: 24px; }
    .op-metrics { grid-template-columns: repeat(2, 1fr); }
    .coord-filter-bar select { min-width: 120px; }
    .persona-tag { font-size: 9px; padding: 3px 8px; }
}

/* ── Responsive: mobile (≤480px) ──────────────────────── */
@media (max-width: 480px) {
    .kpi-row { grid-template-columns: 1fr !important; }
    .proj-card-stats { grid-template-columns: 1fr 1fr; }
    .login-card { padding: 24px 20px; }
    .login-roles { grid-template-columns: 1fr; }
    .op-card-top { flex-wrap: wrap; }
    .topnav { height: 44px; gap: 8px; }
    /* Em 44px os arcos viram ruido: sobra so o gradiente e a fita. */
    .topnav {
        background:
            url("../img/ribbon-flow.svg") left -260px bottom -58px / 1100px auto no-repeat,
            linear-gradient(100deg, var(--navy2) 0%, var(--navy) 46%, #00306f 100%);
    }
    .nav-brand-logo { height: 22px; }
    .ops-header { flex-direction: column; gap: 12px; }
    .proj-search-input { display: none; }
}

/* ── Smooth transitions for interactive elements ──────── */
.proj-card, .op-card, .kpi, .panel { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.dash-tab { transition: all 0.15s ease; }

/* ── Filter-active indicator ─────────────────────────── */
.rev-filter-bar select:not([value="todos"]),
.coord-filter-bar select:not([value="todos"]) {
    border-color: var(--g400);
    background: var(--g50);
}

/* ── Table responsive wrapper ────────────────────────── */
.dt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═══════════════════════════════════════════════════════
   FAQ VIEW
   ═══════════════════════════════════════════════════════ */
.faq-view { padding: 32px 48px; overflow-y: auto; flex: 1; }
.faq-group {
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 14px;
    overflow: hidden;
}
.faq-group-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--g700);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    padding: 12px 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background .12s;
    user-select: none;
}
.faq-q:hover { background: var(--paper2); }
.faq-q::after { content: '+'; font-size: 16px; color: var(--ink4); transition: transform .2s; }
.faq-item.open .faq-q::after { content: '\2212'; color: var(--g600); }
.faq-a {
    display: none;
    padding: 0 18px 14px;
    font-size: 12px;
    color: var(--ink2);
    line-height: 1.7;
}
.faq-item.open .faq-a { display: block; animation: fadeUp .2s ease forwards; }
.faq-a strong { color: var(--ink); }
.faq-a ul { margin: 6px 0 6px 16px; }
.faq-a li { margin-bottom: 4px; }
.faq-a .faq-tip {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--g50);
    border-left: 3px solid var(--g400);
    border-radius: 0 8px 8px 0;
    font-size: 11px;
}
.faq-a code {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--paper3);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════
   KPI VIEWS — Gauges, Live Cards, Sections
   ═══════════════════════════════════════════════════════ */

/* ── Live header ─────────────────────────────────────── */
.kv-live-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--g50), #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--g700);
}
.kv-live-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse .9s infinite;
    flex-shrink: 0;
}
.kv-live-clock {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink4);
    font-weight: 500;
}

/* ── Section header ──────────────────────────────────── */
.kv-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.kv-section-icon {
    font-size: 16px;
}
.kv-section-title {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.kv-section-count {
    margin-left: auto;
    font-size: 10px;
    color: var(--ink4);
    background: var(--paper2);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* ── Gauge cards grid ────────────────────────────────── */
.kv-gauge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.kv-gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px 14px;
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 12px;
    transition: box-shadow .2s, transform .15s;
    animation: cardIn .45s ease forwards;
}
.kv-gauge-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
    transform: translateY(-1px);
}
.kv-gauge-ring {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
}
.kv-gauge-ring svg {
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
}
.kv-gauge-val {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.kv-gauge-val small {
    font-size: 10px;
    font-weight: 500;
    margin-left: 1px;
}
.kv-gauge-val.ok { color: var(--ok); }
.kv-gauge-val.warn { color: var(--warn); }
.kv-gauge-val.danger { color: var(--danger); }
.kv-gauge-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    line-height: 1.3;
}
.kv-gauge-bench {
    font-size: 9.5px;
    color: var(--ink4);
    margin-top: 2px;
}

/* ── Live cards grid ─────────────────────────────────── */
.kv-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.kv-live-card {
    position: relative;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s;
    animation: cardIn .45s ease forwards;
}
.kv-live-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
}
.kv-live-card.ok::after { background: var(--ok); }
.kv-live-card.warn::after { background: var(--warn); }
.kv-live-card.danger::after { background: var(--danger); }
.kv-live-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.kv-live-dot {
    position: absolute;
    top: 12px; right: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse .9s infinite;
}
.kv-live-label {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink4);
    margin-bottom: 4px;
}
.kv-live-val {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.kv-live-val small {
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
}
.kv-live-delta {
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;
}

/* ── Fiscal year header ──────────────────────────────── */
.kv-fiscal-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--g50), #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 18px;
}
.kv-fiscal-title {
    font-family: var(--display);
    font-size: 20px;
    color: var(--g700);
}
.kv-fiscal-sub {
    font-size: 12px;
    color: var(--ink3);
    margin-top: 2px;
}

/* ── Sidebar responsive: gaveta no celular/tablet ─────── */
.dash-menu-btn, .dash-sidebar-fundo { display: none; }
@media (max-width: 1024px) {
    .dash-layout { grid-template-columns: 1fr !important; }
    .dash-sidebar,
    .dash-sidebar.expanded {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1001;
        width: min(280px, 86vw);
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(-102%);
        transition: transform .22s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 0 32px rgba(0,0,0,.18);
    }
    .dash-sidebar.aberta { transform: none; }
    .dash-sidebar .dsb-toggle { display: none; }
    .dash-sidebar .dsb-item { min-height: 44px; }  /* alvo de toque confortável */
    .dash-sidebar-fundo:not([hidden]) {
        display: block; position: fixed; inset: 0; z-index: 1000;
        background: rgba(15, 23, 42, .38);
    }
    body.menu-movel-aberto { overflow: hidden; }
    .dash-menu-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 14px; min-height: 40px; max-width: 100%;
        border: 1px solid var(--border2); border-radius: 999px;
        background: var(--paper); color: var(--g700);
        font: 600 13px var(--font); cursor: pointer;
    }
    .dash-menu-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .kv-gauge-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .kv-live-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 768px) {
    .kv-gauge-grid { grid-template-columns: repeat(2, 1fr); }
    .kv-live-grid { grid-template-columns: repeat(2, 1fr); }
    .kv-gauge-ring { width: 64px; height: 64px; }
    .kv-gauge-val { font-size: 13px; }
}
@media (max-width: 480px) {
    .kv-gauge-grid { grid-template-columns: 1fr 1fr; }
    .kv-live-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   CATÁLOGO KPIs — Advanced Design System
   ═══════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────── */
.kcat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--g50) 0%, #fff 60%, var(--paper2) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
.kcat-header::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 143, 92, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.kcat-header-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.kcat-icon {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
.kcat-title {
    margin: 0 0 4px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.kcat-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink3);
    line-height: 1.5;
    max-width: 480px;
}
.kcat-header-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}
.kcat-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 10px;
    min-width: 72px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.kcat-stat-val {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--g600);
    line-height: 1.1;
}
.kcat-stat-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink4);
    margin-top: 3px;
}

/* ── Toolbar ─────────────────────────────────────────── */
.kcat-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.kcat-search-wrap {
    position: relative;
    flex: 0 1 280px;
    min-width: 180px;
}
.kcat-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink4);
    pointer-events: none;
}
.kcat-search {
    width: 100%;
    padding: 9px 12px 9px 36px;
    font-family: var(--font);
    font-size: 12.5px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kcat-search:focus {
    border-color: var(--g400);
    box-shadow: 0 0 0 3px rgba(74, 143, 92, 0.1);
}
.kcat-search::placeholder { color: var(--ink4); }

/* ── Frequency segmented control ─────────────────────── */
.kcat-freq-bar {
    display: flex;
    gap: 0;
    background: var(--paper2);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--border);
    margin-left: auto;
    flex-shrink: 0;
    overflow-x: auto;
}
.kcat-freq-btn {
    position: relative;
    padding: 7px 16px;
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink3);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
}
.kcat-freq-btn:hover {
    color: var(--ink2);
    background: rgba(255,255,255,0.5);
}
.kcat-freq-btn.active {
    color: var(--g700);
    background: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px var(--border2);
}
.kcat-freq-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    background: var(--g100, var(--paper3));
    color: var(--g600);
    border-radius: 9px;
    line-height: 1;
}
.kcat-freq-btn.active .kcat-freq-count {
    background: var(--g500);
    color: #fff;
}

/* ── Categories container ────────────────────────────── */
.kcat-categories {
    display: flex;
    flex-direction: column;
    gap: 28px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ── Category block ──────────────────────────────────── */
.kcat-category {
    animation: fadeUp 0.35s ease forwards;
}
.kcat-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.kcat-cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 8px;
    color: #fff;
    flex-shrink: 0;
}
.kcat-cat-title {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.kcat-cat-count {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ink4);
    background: var(--paper2);
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

/* ── Metric cards grid ───────────────────────────────── */
.kcat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

/* ── Metric card ─────────────────────────────────────── */
.kcat-card {
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.15s ease;
    animation: cardIn 0.45s ease forwards;
}
.kcat-card:hover {
    border-color: var(--border3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.03);
    transform: translateY(-1px);
}
.kcat-card.expanded {
    border-color: var(--g400);
    box-shadow: 0 4px 20px rgba(74, 143, 92, 0.1), 0 1px 4px rgba(0,0,0,0.04);
}

.kcat-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px 0;
    gap: 8px;
}
.kcat-card-header {
    flex: 1;
    min-width: 0;
}
.kcat-metric-name {
    margin: 6px 0 0;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

/* ── Frequency badges ────────────────────────────────── */
.kcat-freq-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 5px;
    line-height: 1.6;
}
.kcat-freq-rt {
    background: rgba(74, 143, 92, 0.1);
    color: var(--g600);
    border: 1px solid rgba(74, 143, 92, 0.2);
}
.kcat-freq-day {
    background: rgba(91, 141, 239, 0.08);
    color: #3b6fd0;
    border: 1px solid rgba(91, 141, 239, 0.18);
}
.kcat-freq-week {
    background: rgba(184, 115, 51, 0.08);
    color: #9a6030;
    border: 1px solid rgba(184, 115, 51, 0.18);
}
.kcat-freq-month {
    background: rgba(124, 92, 191, 0.08);
    color: #6845a8;
    border: 1px solid rgba(124, 92, 191, 0.18);
}
.kcat-freq-quarter {
    background: rgba(184, 115, 51, 0.08);
    color: #9a6030;
    border: 1px solid rgba(184, 115, 51, 0.18);
}
.kcat-freq-annual {
    background: rgba(139, 58, 58, 0.08);
    color: #8b3a3a;
    border: 1px solid rgba(139, 58, 58, 0.18);
}

/* ── Expand button ───────────────────────────────────── */
.kcat-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--paper2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--ink3);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.22s ease;
}
.kcat-expand-btn:hover {
    background: var(--paper3);
    color: var(--ink2);
}
.kcat-expand-btn svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.kcat-expand-btn.rotated svg {
    transform: rotate(180deg);
}

/* ── Card body ───────────────────────────────────────── */
.kcat-card-body {
    padding: 12px 16px 14px;
}

/* ── Benchmark section ───────────────────────────────── */
.kcat-bench-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kcat-bench-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink4);
}
.kcat-bench-target {
    font-size: 10.5px;
    color: var(--ink3);
    font-weight: 500;
}
.kcat-bench-text {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink2);
    padding: 6px 0 2px;
}

/* ── Gauge ───────────────────────────────────────────── */
.kcat-gauge {
    position: relative;
    height: 6px;
    background: var(--paper3);
    border-radius: 3px;
    overflow: hidden;
    margin: 6px 0 2px;
}
.kcat-gauge-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--g400), var(--g500));
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kcat-gauge-label {
    position: absolute;
    right: 0;
    top: -16px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--g600);
}

/* ── Expandable detail ───────────────────────────────── */
.kcat-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                margin-top 0.25s ease;
    margin-top: 0;
}
.kcat-detail.visible {
    max-height: 400px;
    opacity: 1;
    margin-top: 14px;
}
.kcat-detail-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink4);
    margin-bottom: 4px;
}

/* ── Formula ─────────────────────────────────────────── */
.kcat-formula-section {
    margin-bottom: 12px;
}
.kcat-formula {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink2);
    background: var(--paper2);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    word-break: break-word;
    white-space: pre-wrap;
}

/* ── Action ──────────────────────────────────────────── */
.kcat-action-section { margin-bottom: 10px; }
.kcat-action {
    margin: 0;
    font-size: 11.5px;
    color: var(--ink2);
    line-height: 1.55;
    padding: 8px 12px;
    background: var(--g50, #f2f7fd);
    border-left: 3px solid var(--g400);
    border-radius: 0 8px 8px 0;
}

/* ── Danger note ─────────────────────────────────────── */
.kcat-danger-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 10.5px;
    color: var(--danger);
    background: rgba(139, 58, 58, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(139, 58, 58, 0.12);
    line-height: 1.5;
    margin-top: 4px;
}
.kcat-danger-note svg { flex-shrink: 0; margin-top: 1px; }

/* ── Empty state ─────────────────────────────────────── */
.kcat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--ink4);
    text-align: center;
    gap: 12px;
}
.kcat-empty p {
    margin: 0;
    font-size: 13px;
}

/* ── Footer / Princípios ─────────────────────────────── */
.kcat-footer {
    margin-top: 32px;
    padding: 0;
}
.kcat-footer-inner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px 24px;
    background: var(--paper2);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.kcat-footer-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.kcat-footer-inner strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.kcat-footer-list {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: disc;
}
.kcat-footer-list li {
    font-size: 11.5px;
    color: var(--ink3);
    line-height: 1.6;
    margin-bottom: 2px;
}

/* ── Responsive KPI Catalog ──────────────────────────── */
@media (max-width: 1280px) {
    .kcat-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    .kcat-header { flex-direction: column; gap: 16px; }
    .kcat-header-stats { width: 100%; justify-content: flex-start; }
}
@media (max-width: 1024px) {
    .kcat-toolbar { flex-direction: column; align-items: stretch; }
    .kcat-search-wrap { flex: 1; }
    .kcat-freq-bar { margin-left: 0; width: 100%; overflow-x: auto; }
}
@media (max-width: 768px) {
    .kcat-cards { grid-template-columns: 1fr; }
    .kcat-header { padding: 20px; }
    .kcat-header-stats { flex-wrap: wrap; }
    .kcat-stat { min-width: 60px; padding: 8px 12px; }
    .kcat-freq-btn { padding: 6px 10px; font-size: 10.5px; }
}
@media (max-width: 480px) {
    .kcat-freq-bar { gap: 0; }
    .kcat-freq-btn { padding: 6px 8px; font-size: 10px; }
    .kcat-freq-count { display: none; }
}

/* ── Print styles ─────────────────────────────────────── */
@media print {
    .topnav, .nav-logout, .dash-menu-btn, .coord-filter-bar, .kcat-toolbar { display: none !important; }
    .proj-view, .ops-view, .dash-body { padding: 0 !important; }
    .view { display: block !important; overflow: visible !important; }
    .screen { height: auto; overflow: visible; }
    .kcat-card { break-inside: avoid; }
    .kcat-detail { max-height: none !important; opacity: 1 !important; }
}


/* ── Titulos na Nunito ────────────────────────────────
   Os seletores abaixo usam var(--display) sem declarar peso: com DM Serif
   o peso 400 ja tinha presenca, com Nunito ficaria apagado. */
.view-headline,
.dash-title,
.faq-kcat-title,
.kv-fiscal-title,
.kcat-title { font-weight: 800; letter-spacing: -.02em; }

/* ── Painéis do TimeTracker (dip-timetracker.js) ─────────── */
.btn-sm {
    padding: 4px 12px;
    background: var(--paper);
    color: var(--g600);
    border: 1px solid var(--border2);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
}
.btn-sm:hover { background: var(--g50); }
.tt-periodo input[type="date"] {
    padding: 4px 8px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    color: var(--ink2);
    background: var(--paper);
}
.tt-tabela td, .tt-tabela th { white-space: nowrap; }