/* ============================================================
TODOS PROTEGIDOS — App shell + componentes (mockups SGA)
Depende de ../tokens.css. Estilos sobre os tokens.
============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:var(--font-family-body);font-size:var(--font-size-base);
color:var(--color-text-body);background:var(--color-bg-canvas);
line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
.app{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh;}
/* ---------- SIDEBAR ---------- */
.sidebar{
background:var(--color-sidebar-bg);border-right:1px solid var(--color-sidebar-border);
padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-6);
position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 var(--space-2);}
.brand .mark{width:34px;height:34px;flex:none;}
.brand .brand-txt{display:flex;flex-direction:column;line-height:1.12;}
.brand .name{font-family:var(--font-family-display);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);color:#fff;letter-spacing:-.01em;}
.brand .tag{background:transparent;padding:0;border-radius:0;font-size:9px;letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:rgba(255,255,255,.5);}
.nav-group{display:flex;flex-direction:column;gap:2px;}
.nav-label{font-size:10px;letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--color-sidebar-label);padding:0 var(--space-3);margin-bottom:var(--space-2);}
.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--border-radius-md);color:var(--color-sidebar-item);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);}
.nav-item:hover{background:var(--color-sidebar-item-hover);color:#fff;}
.nav-item.active{background:var(--color-accent-teal);color:var(--color-text-on-teal);font-weight:var(--font-weight-bold);}
.nav-item .ico{width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.95;flex:none;} /* encaixe da família de ícones (v2) */
.nav-item .count{margin-left:auto;font-size:10px;font-weight:var(--font-weight-bold);background:rgba(255,255,255,.12);color:#fff;padding:1px 7px;border-radius:var(--border-radius-full);}
.nav-item.active .count{background:color-mix(in srgb, var(--color-text-on-teal) 16%, transparent);color:var(--color-text-on-teal);}
.sidebar-user{margin-top:auto;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--border-radius-md);background:rgba(255,255,255,.04);}
.sidebar-user .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--tp-blue-500),var(--tp-navy-800));color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none;}
.sidebar-user .nm{font-size:var(--font-size-sm);color:#fff;font-weight:var(--font-weight-semibold);}
.sidebar-user .rl{font-size:10px;color:rgba(255,255,255,.5);}
/* ---------- TOPBAR ---------- */
.main{display:flex;flex-direction:column;min-width:0;}
/* BARRA full-bleed (fundo + régua + sticky atravessam o .main de ponta a ponta),
mas o CONTEÚDO interno (.tb-left/.tb-right) pousa no mesmo box de --max-width-page
alinhado à esquerda do .content: o padding direito cresce o excedente além do teto,
empurrando a régua direita (busca/usuário) até a borda direita do miolo. Espelha o
teto do .content (ver README · Largura do miolo). Abaixo de ~1704px o max() zera e nada muda. */
.topbar{height:var(--topbar-height);background:var(--color-bg-primary);border-bottom:1px solid var(--color-border-primary);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-8);padding-right:calc(var(--space-8) + max(0px, 100% - var(--max-width-page)));position:sticky;top:0;z-index:var(--z-sticky);}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);}
.breadcrumb .sep{color:var(--color-text-tertiary);}
.breadcrumb .cur{color:var(--color-text-primary);font-weight:var(--font-weight-semibold);}
.topbar .right{display:flex;align-items:center;gap:var(--space-3);}
.icon-btn{width:var(--control-height-sm);height:var(--control-height-sm);border-radius:var(--border-radius-md);border:1px solid var(--color-border-primary);background:var(--color-bg-primary);color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--duration-fast) var(--easing-default);}
.icon-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary);}
/* ---------- TOPBAR V3 — header canônico do app (ver README · Header do app) ---------- */
.tb-left{display:flex;align-items:center;gap:var(--space-4);min-width:0;}
/* .tb-back: voltar (drill-in) no topbar, à esquerda do breadcrumb — idioma do .icon-btn.
Substitui a antiga faixa .btn-voltar do corpo (que custava uma faixa vertical). */
.tb-back{width:var(--control-height-sm);height:var(--control-height-sm);flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-md);background:var(--color-bg-primary);color:var(--color-text-secondary);text-decoration:none;transition:all var(--duration-fast) var(--easing-default);}
.tb-back:hover{background:var(--color-bg-hover);color:var(--color-text-primary);}
.tb-back:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.tb-right{display:flex;align-items:center;gap:var(--space-3);}
.tb-div{width:var(--border-width-thin);height:var(--space-6);background:var(--color-border-primary);flex:none;}
/* breadcrumb hierarquizado: raiz micro-caps mono · intermediário discreto · atual em display */
.crumb{display:flex;align-items:baseline;gap:var(--space-2);white-space:nowrap;min-width:0;}
.crumb .root{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-tertiary);}
.crumb .mid{font-size:var(--font-size-sm);color:var(--color-text-secondary);}
.crumb .sep{color:var(--color-border-strong);font-size:var(--font-size-sm);}
.crumb .cur{font-family:var(--font-family-display);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight);overflow:hidden;text-overflow:ellipsis;}
/* DESCONTINUADO (refinos do header): usar .scope-select; mantido apenas para mockups históricos */
.scope-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-height-sm);padding:0 var(--space-3);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-full);background:var(--color-bg-secondary);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);}
.scope-chip:hover{border-color:var(--color-border-strong);background:var(--color-bg-hover);}
.scope-chip:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.scope-chip .lbl{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-tertiary);}
.scope-chip .val{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;}
/* busca global com hint de atalho (⌘K) */
.tb-search{width:220px;} /* encaixe: régua direita completa cabe em 1280px */
.tb-search .input{height:var(--control-height-sm);padding-right:var(--space-12);font-size:var(--font-size-sm);}
.kbd{position:absolute;right:var(--space-2);top:50%;transform:translateY(-50%);font-family:var(--font-family-mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);color:var(--color-text-tertiary);background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-xs);padding:2px var(--space-2);pointer-events:none;}
/* contador de notificações (RTs não lidas) — teal com texto índigo escuro */
.icon-btn.has-badge{position:relative;}
.count-badge{position:absolute;top:calc(-1 * var(--space-1));right:calc(-1 * var(--space-1));min-width:var(--space-4);height:var(--space-4);padding:0 var(--space-1);border-radius:var(--border-radius-full);background:var(--color-accent-teal);color:var(--color-text-on-teal);font-family:var(--font-family-mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 var(--border-width-thick) var(--color-bg-primary);}
/* usuário canônico no topbar (nunca duplicado na sidebar) */
.tb-user{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-height-md);padding:0 var(--space-2);border:none;background:transparent;border-radius:var(--border-radius-md);color:var(--color-text-tertiary);cursor:pointer;transition:background var(--duration-fast) var(--easing-default);}
.tb-user:hover{background:var(--color-bg-hover);}
.tb-user:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.tb-user .avatar{width:28px;height:28px;font-size:var(--font-size-2xs);}
.tb-user .who{display:flex;flex-direction:column;align-items:flex-start;line-height:var(--line-height-tight);}
.tb-user .nm{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.tb-user .rl{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-tertiary);}
/* seletor de escopo (rede/filiais) — controle de seleção no idioma do DS */
.scope-select{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-height-sm);padding:0 var(--space-2) 0 var(--space-3);background:var(--color-bg-primary);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md);color:var(--color-text-tertiary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);}
.scope-select:hover{background:var(--color-bg-hover);border-color:var(--color-text-tertiary);}
.scope-select:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);}
.scope-select .val{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;}
/* dropdown do usuário — menu de conta canônico (Meu perfil · Preferências · Sair) */
.tb-menu{position:relative;}
.tb-user .chev{transition:transform var(--duration-fast) var(--easing-default);}
.tb-user[aria-expanded="true"] .chev{transform:rotate(180deg);}
.dropdown{position:absolute;top:calc(100% + var(--space-2));right:0;min-width:240px;background:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);padding:var(--space-2);display:none;}
.dropdown.open{display:block;}
/* Itens de menu não encostam: hover/ativo de um vizinho ganha respiro do outro (o houver não pode colar no active). */
.dd-item + .dd-item, .dd-opt + .dd-opt{margin-top:var(--space-1);}
.dd-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-bottom:1px solid var(--color-border-secondary);margin-bottom:var(--space-2);}
.dd-head .nm{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.dd-head .em{font-size:var(--font-size-xs);color:var(--color-text-tertiary);}
.dd-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-body);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);}
.dd-item:hover{background:var(--color-bg-hover);color:var(--color-text-primary);}
.dd-item:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.dd-item .ico-svg{width:16px;height:16px;color:var(--color-text-tertiary);}
.dd-item:hover .ico-svg{color:var(--color-text-secondary);}
.dd-item.danger{color:var(--color-status-error);}
.dd-item.danger .ico-svg{color:var(--color-status-error);}
.dd-item.danger:hover{background:var(--color-status-error-subtle);color:var(--color-status-error);}
.dd-div{height:var(--border-width-thin);background:var(--color-border-secondary);margin:var(--space-2) var(--space-1);}
/* painel de opções do seletor de escopo — mesmo idioma do .dropdown */
.dropdown.align-left{right:auto;left:0;min-width:260px;}
.scope-select .chev{transition:transform var(--duration-fast) var(--easing-default);}
.scope-select[aria-expanded="true"] .chev{transform:rotate(180deg);}
.dd-label{padding:var(--space-2) var(--space-3) var(--space-1);font-family:var(--font-family-mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-tertiary);}
.dd-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--border-radius-sm);cursor:pointer;transition:background var(--duration-fast) var(--easing-default);}
.dd-opt:hover{background:var(--color-bg-hover);}
.dd-opt:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.dd-opt .nm{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-body);}
.dd-opt .mt{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-tertiary);}
.dd-opt .chk{color:var(--color-accent-teal-strong);visibility:hidden;flex:none;}
.dd-opt.active{background:var(--color-accent-teal-subtle);}
.dd-opt.active .nm{color:var(--color-text-primary);font-weight:var(--font-weight-semibold);}
.dd-opt.active .chk{visibility:visible;}
/* rodapé da sidebar: linha de ambiente (o usuário NÃO vive aqui) */
.side-foot{margin-top:auto;padding:var(--space-3);text-align:center;}
.side-foot.micro{color:var(--color-sidebar-label);}
/* ---------- CONTENT ---------- */
/* miolo com teto de largura, alinhado à esquerda (ancorado à sidebar) — calha só à direita; ver README · Convenções */
.content{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6);max-width:var(--max-width-page);width:100%;}
.content.enxuto{padding-top:var(--space-5);} /* header enxuto de drill-in: título encostado no topo */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
.page-head .eyebrow{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--color-accent-teal);margin-bottom:var(--space-2);}
.page-head h1{font-family:var(--font-family-display);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight);}
.page-head p{color:var(--color-text-secondary);font-size:var(--font-size-base);margin-top:var(--space-1);}
/* ---------- BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-height-md);padding:0 var(--space-5);border-radius:var(--border-radius-md);border:1px solid transparent;font-family:var(--font-family-body);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);white-space:nowrap;}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.btn-primary{background:var(--color-accent-primary);color:var(--color-text-on-accent);}
.btn-primary:hover{background:var(--color-accent-primary-active);}
.btn-secondary{background:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-strong);}
.btn-secondary:hover{background:var(--color-bg-hover);border-color:var(--color-text-tertiary);}
.btn-ghost{background:transparent;color:var(--color-text-secondary);}
.btn-ghost:hover{background:var(--color-bg-hover);color:var(--color-text-primary);}
.btn-sm{height:var(--control-height-sm);padding:0 var(--space-4);font-size:var(--font-size-sm);}
/* AÇÃO teal — assinatura da marca: texto índigo escuro + glow (--shadow-glow-teal); ver README */
.btn-teal{background:var(--color-accent-teal);color:var(--color-text-on-teal);font-weight:var(--font-weight-bold);box-shadow:var(--shadow-glow-teal);}
.btn-teal:hover{background:var(--color-accent-teal-hover);transform:translateY(-1px);}
/* RISCO — botão com rótulo para ação destrutiva (ex.: revogar versão). Idioma do
.btn-secondary tingido de erro; hover preenche o error-subtle e firma a borda —
mesma lógica do .row-act.danger. Completa a família de risco (ícone: .row-act.danger
· item de menu: .dd-item.danger · botão com rótulo: .btn-danger). Ver README. */
.btn-danger{background:var(--color-bg-primary);color:var(--color-status-error);border-color:color-mix(in srgb, var(--color-status-error) 35%, transparent);}
.btn-danger:hover{background:var(--color-status-error-subtle);border-color:var(--color-status-error);color:var(--color-status-error);}
.btn-danger:focus-visible{box-shadow:var(--shadow-focus-error);}
.btn:disabled{background:var(--color-bg-tertiary);color:var(--color-text-tertiary);border-color:transparent;box-shadow:none;cursor:not-allowed;transform:none;}
/* ---------- INPUTS ---------- */
.input,.select{height:var(--control-height-md);width:100%;padding:0 var(--space-4);background:var(--color-bg-primary);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md);color:var(--color-text-primary);font-family:var(--font-family-body);font-size:var(--font-size-base);transition:all var(--duration-fast) var(--easing-default);}
.input::placeholder{color:var(--color-text-tertiary);}
.input:focus,.select:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);}
.search{position:relative;}
.search .input{padding-left:36px;}
.search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-tertiary);font-size:14px;display:flex;align-items:center;} /* encaixe da família de ícones (v2) */
.field label{display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:var(--space-2);}
/* ---------- ÍCONES — família única (fonte canônica: ../assets/icones.svg; ver README) ---------- */
/* consumo: sprite inline por página + */
.ico-svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block;}
.ico-svg.sz16{width:16px;height:16px;}
.ico-svg.sz24{width:24px;height:24px;}
.icon-btn .ico-svg{margin:auto;}
.tl .marker .ico-svg{width:14px;height:14px;}
/* ---------- BADGES ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--border-radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;}
.badge .dot{width:6px;height:6px;border-radius:50%;}
.badge-success{background:var(--color-status-success-subtle);color:var(--color-status-success);} .badge-success .dot{background:var(--color-status-success);}
.badge-warning{background:var(--color-status-warning-subtle);color:var(--color-status-warning);} .badge-warning .dot{background:var(--color-status-warning);}
.badge-error{background:var(--color-status-error-subtle);color:var(--color-status-error);} .badge-error .dot{background:var(--color-status-error);}
.badge-info{background:var(--color-status-info-subtle);color:var(--color-status-info);} .badge-info .dot{background:var(--color-status-info);}
.badge-neutral{background:var(--color-bg-tertiary);color:var(--color-text-secondary);} .badge-neutral .dot{background:var(--color-text-tertiary);}
/* teal — destaque de marca (campanhas, "novo"); mapeamento categoria→badge das RTs: ver README */
.badge-teal{background:var(--color-accent-teal-subtle);color:var(--color-accent-teal-strong);} .badge-teal .dot{background:var(--color-accent-teal);}
.tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--border-radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);background:var(--color-bg-tertiary);color:var(--color-text-secondary);}
/* ---------- LINKS ---------- */
/* link de UI (ações, navegação): feedback POR COR, sem sublinhado */
.link{color:var(--color-text-link);font-weight:var(--font-weight-medium);cursor:pointer;border-radius:var(--border-radius-xs);transition:color var(--duration-fast) var(--easing-default);}
.link:hover{color:var(--color-text-link-hover);}
.link:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
/* link em texto corrido: mantém sublinhado (affordance de texto) + cor no hover */
.link-inline{color:var(--color-text-link);font-weight:var(--font-weight-medium);cursor:pointer;border-radius:var(--border-radius-xs);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb, var(--color-text-link) 45%, transparent);transition:color var(--duration-fast) var(--easing-default), text-decoration-color var(--duration-fast) var(--easing-default);}
.link-inline:hover{color:var(--color-text-link-hover);text-decoration-color:currentColor;}
.link-inline:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
/* ---------- CARDS ---------- */
.card{background:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5);border-bottom:1px solid var(--color-border-primary);}
.card-head h3{font-family:var(--font-family-display);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.card-body{padding:var(--space-5);}
/* ---------- STATS ---------- */
/* Convenção: título e valor de stat NUNCA quebram linha (ver README).
Card com largura mínima do próprio conteúdo (min-content) e strip rolando na
horizontal quando falta espaço (mesma válvula do kanban) — nunca ellipsis/corte.
O delta pode quebrar palavra a palavra (descrição, não é indivisível).
.stats = 4 cards fixos · .stats-fluid = nº de cards varia por cargo/permissão. */
.stats,.stats-fluid{display:flex;gap:var(--space-5);overflow-x:auto;}
.stats-fluid{gap:var(--space-4);}
.stats .stat,.stats-fluid .stat{flex:1 1 0;min-width:min-content;}
.stat{padding:var(--space-5);position:relative;overflow:hidden;}
.stats-fluid .stat{padding:var(--space-5) var(--space-4);}
/* rótulo na camada micro-caps mono — 1 linha sempre */
.stat .lbl{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-secondary);font-weight:var(--font-weight-semibold);white-space:nowrap;}
/* card com spark: rótulo reserva a zona do glifo à direita */
.stat .spark~.lbl{padding-right:var(--space-12);}
.stat .val{font-family:var(--font-family-display);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-top:var(--space-2);letter-spacing:var(--letter-spacing-tight);white-space:nowrap;}
.stat .val.mono{font-family:var(--font-family-mono);font-size:var(--font-size-2xl);}
.stat .delta{display:inline-flex;align-items:center;gap:4px;margin-top:var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);}
.stat .delta.up{color:var(--color-finance-positive);} .stat .delta.down{color:var(--color-finance-negative);} .stat .delta.flat{color:var(--color-text-tertiary);}
.stat .spark{position:absolute;right:var(--space-4);top:var(--space-4);width:34px;height:34px;border-radius:var(--border-radius-md);background:var(--color-accent-primary-subtle);display:flex;align-items:center;justify-content:center;}
/* ---------- TOOLBAR / FILTROS ---------- */
.toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.toolbar .search{flex:1;min-width:240px;max-width:360px;}
.toolbar .spacer{flex:1;}
.chip-filter{display:inline-flex;align-items:center;gap:6px;height:var(--control-height-sm);padding:0 var(--space-3);border-radius:var(--border-radius-full);border:1px solid var(--color-border-strong);background:var(--color-bg-primary);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);}
.chip-filter:hover{background:var(--color-bg-hover);}
.chip-filter.active{background:var(--color-accent-teal-subtle);color:var(--color-accent-teal);border-color:var(--color-accent-teal);}
/* ---------- TABELA ---------- */
.table-wrap{overflow:visible;}
.table-wrap.rolavel{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;}
/* header de tabela = camada micro-caps mono, SEM faixa (aprovado em 15/07/2026):
o header recua como metadado — os dados são o herói; separação por régua strong. */
table.data thead th{text-align:left;padding:var(--space-4) var(--space-5);font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--color-text-tertiary);font-weight:var(--font-weight-semibold);border-bottom:var(--border-width-thin) solid var(--color-border-strong);background:transparent;white-space:nowrap;}
table.data tbody td{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border-secondary);font-size:var(--font-size-sm);color:var(--color-text-body);vertical-align:middle;}
table.data tbody tr{transition:background var(--duration-fast) var(--easing-default);cursor:pointer;}
table.data tbody tr:hover{background:var(--color-bg-hover);}
table.data tbody tr:last-child td{border-bottom:none;}
table.data td .nm{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.assoc{display:flex;align-items:center;gap:var(--space-3);}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--tp-blue-500),var(--tp-navy-800));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-semibold);font-size:var(--font-size-xs);flex:none;}
.avatar.lg{width:56px;height:56px;font-size:var(--font-size-lg);}
.assoc .nm{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.assoc .sub{font-size:var(--font-size-xs);color:var(--color-text-tertiary);}
.mono{font-family:var(--font-family-mono);}
.val-pos{color:var(--color-finance-positive);font-weight:var(--font-weight-semibold);}
.val-neg{color:var(--color-finance-negative);font-weight:var(--font-weight-semibold);}
.row-actions{display:flex;gap:var(--space-1);justify-content:flex-end;}
/* ---------- PAGINAÇÃO ---------- */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border-primary);}
.pagination .info{font-size:var(--font-size-sm);color:var(--color-text-secondary);}
.pagination .pages{display:flex;gap:var(--space-1);}
.pg{min-width:32px;height:32px;border-radius:var(--border-radius-sm);border:1px solid var(--color-border-primary);background:var(--color-bg-primary);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pg:hover{background:var(--color-bg-hover);}
.pg.active{background:var(--color-accent-primary);color:var(--color-text-on-accent);border-color:transparent;}
/* ---------- TABS ---------- */
.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-border-primary);}
.tab{padding:var(--space-3) var(--space-4);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--duration-fast) var(--easing-default);}
.tab:hover{color:var(--color-text-primary);}
.tab.active{color:var(--color-accent-teal);border-bottom-color:var(--color-accent-teal);font-weight:var(--font-weight-semibold);}
/* contador de aba em badge (.tab .qtd) — nunca número solto (ver README): pílula na
mecânica do .qtd dos Filtros; INATIVA neutra + filete (abas vivem sobre canvas E
card — no claro bg-tertiary = canvas); ATIVA na receita única de "pílula que conta"
(teal pleno + índigo on-teal, como .count-badge e .btn-filtros .qtd). */
.tab{display:inline-flex;align-items:center;gap:var(--space-2);}
.tab .qtd{min-width:18px;height:18px;padding:0 5px;border-radius:var(--border-radius-full);background:var(--color-bg-tertiary);border:var(--border-width-thin) solid var(--color-border-primary);color:var(--color-text-secondary);font-family:var(--font-family-mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);display:inline-flex;align-items:center;justify-content:center;transition:all var(--duration-fast) var(--easing-default);}
.tab.active .qtd{background:var(--color-accent-teal);border-color:transparent;color:var(--color-text-on-teal);}
/* ---------- LISTAS DE DADOS (ficha) ---------- */
.datalist{display:flex;flex-direction:column;gap:var(--space-3);}
.datalist .item{display:flex;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border-secondary);}
.datalist .item:last-child{border-bottom:none;padding-bottom:0;}
.datalist .k{color:var(--color-text-secondary);font-size:var(--font-size-sm);}
.datalist .v{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:right;}
/* ---------- TIMELINE ---------- */
.timeline{display:flex;flex-direction:column;}
.tl{display:flex;gap:var(--space-4);padding-bottom:var(--space-5);position:relative;}
.tl::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--color-border-primary);}
.tl:last-child::before{display:none;}
.tl .marker{width:24px;height:24px;border-radius:50%;background:var(--color-accent-primary-subtle);color:var(--color-accent-primary);display:flex;align-items:center;justify-content:center;font-size:11px;flex:none;z-index:1;}
.tl .body h5{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.tl .body p{font-size:var(--font-size-sm);color:var(--color-text-secondary);}
.tl .body .when{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:2px;}
/* ---------- KANBAN (CRM) ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:var(--space-4);overflow-x:auto;padding-bottom:var(--space-3);}
.kcol{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-lg);display:flex;flex-direction:column;min-height:200px;}
.kcol-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-4) var(--space-3);}
.kcol-head .t{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-family-display);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.kcol-head .cnt{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);background:var(--color-bg-primary);border:1px solid var(--color-border-primary);padding:1px 8px;border-radius:var(--border-radius-full);}
.kcol-head .rail{width:8px;height:8px;border-radius:50%;}
.kcol-body{display:flex;flex-direction:column;gap:var(--space-3);padding:0 var(--space-3) var(--space-3);}
.kcol-total{padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border-primary);font-size:var(--font-size-xs);color:var(--color-text-secondary);display:flex;justify-content:space-between;}
.kcard{background:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-md);padding:var(--space-4);box-shadow:var(--shadow-xs);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);}
.kcard:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:var(--color-border-strong);}
.kcard .top{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);}
.kcard .nm{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.kcard .veh{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-bottom:var(--space-3);}
.kcard .foot{display:flex;align-items:center;justify-content:space-between;}
.kcard .val{font-family:var(--font-family-mono);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.kcard .when{font-size:11px;color:var(--color-text-tertiary);}
.avatar.xs{width:22px;height:22px;font-size:9px;}
/* ---------- RT — RECOMENDAÇÕES TÉCNICAS (lista de avisos) ---------- */
.rt-toolbar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-border-primary);background:var(--color-bg-secondary);}
.rt-list{display:flex;flex-direction:column;}
.rt-item{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border-secondary);cursor:pointer;transition:background var(--duration-fast) var(--easing-default);}
.rt-item:hover{background:var(--color-bg-hover);}
.rt-item:last-child{border-bottom:none;}
.rt-item .unread{width:8px;height:8px;border-radius:var(--border-radius-full);background:var(--color-accent-teal);box-shadow:0 0 0 3px var(--color-accent-teal-subtle);flex:none;margin-top:var(--space-2);}
.rt-item.lida .unread{background:transparent;box-shadow:none;}
.rt-item .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
.rt-item .meta{display:flex;align-items:center;gap:var(--space-3);}
.rt-item .cod{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-secondary);}
.rt-item.destaque .cod{color:var(--color-accent-teal-strong);}
.rt-item .when{margin-left:auto;font-family:var(--font-family-mono);font-size:var(--font-size-xs);color:var(--color-text-tertiary);white-space:nowrap;}
.rt-item .tt{font-family:var(--font-family-display);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight);}
.rt-item.lida .tt{font-weight:var(--font-weight-medium);color:var(--color-text-body);}
.rt-item .sum{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-snug);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rt-item .foot{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-1);}
.rt-item .who{font-size:var(--font-size-xs);color:var(--color-text-tertiary);}
.rt-item .foot .link{margin-left:auto;font-size:var(--font-size-sm);white-space:nowrap;}
/* destaque (nova/urgente): fundo teal-subtle + filete teal no rail esquerdo */
.rt-item.destaque{background:var(--color-accent-teal-subtle);box-shadow:inset var(--border-width-thick) 0 0 var(--color-accent-teal);}
.rt-item.destaque:hover{background:var(--color-accent-teal-subtle);}
/* estado vazio */
.rt-empty{padding:var(--space-12) var(--space-6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);}
.rt-empty .glyph{width:44px;height:44px;border-radius:var(--border-radius-md);background:var(--color-accent-teal-subtle);color:var(--color-accent-teal-strong);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);margin-bottom:var(--space-2);}
.rt-empty .t{font-family:var(--font-family-display);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);font-size:var(--font-size-md);}
.rt-empty .s{font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:36ch;}
/* arquivo compacto (lista lateral) */
.rt-arch{display:flex;flex-direction:column;}
.rt-arch a{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-secondary);cursor:pointer;}
.rt-arch a:first-child{padding-top:0;}
.rt-arch a:last-child{border-bottom:none;padding-bottom:0;}
.rt-arch .t{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--duration-fast) var(--easing-default);}
.rt-arch a:hover .t{color:var(--color-text-link);}
.rt-arch .m{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-tertiary);}
/* ---------- QUICK — ATALHOS RÁPIDOS ---------- */
.quick{display:flex;flex-direction:column;gap:var(--space-2);}
.quick a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);}
.quick a:hover{background:var(--color-bg-hover);border-color:var(--color-border-strong);transform:translateY(-1px);box-shadow:var(--shadow-xs);}
.quick a:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.quick .tile{width:32px;height:32px;border-radius:var(--border-radius-sm);background:var(--color-accent-primary-subtle);color:var(--color-accent-primary);display:flex;align-items:center;justify-content:center;flex:none;}
.quick .tile.teal{background:var(--color-accent-teal-subtle);color:var(--color-accent-teal-strong);}
.quick .t{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);}
.quick .s{font-size:var(--font-size-xs);color:var(--color-text-tertiary);}
.quick .go{margin-left:auto;color:var(--color-text-tertiary);display:flex;align-items:center;} /* encaixe da família de ícones (v2) */
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-6);align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.stack{display:flex;flex-direction:column;gap:var(--space-5);}
.muted{color:var(--color-text-secondary);}
.nowrap{white-space:nowrap;}
/* ---------- MICRO — micro-caps mono (menor camada tipográfica; ver README) ---------- */
.micro{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-tertiary);}
/* modificador de .badge — contagem em micro-caps mono (ex.: "3 não lidas") */
.count-pill{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;}
/* ---------- MENSAGENS — alert inline · erro de campo · toast (ver README · Mensagens e feedback) ---------- */
/* Ícones fixos status→símbolo: error = i-alert-circle · warning = i-alert-triangle ·
success = i-check-circle · info = i-info · dismiss = i-x. */
/* ALERT — banner do contexto (formulário/página): persiste até resolver ou o usuário dispensar */
.alert{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--border-radius-md);border:1px solid transparent;}
.alert .aico{margin-top:1px;}
.alert .bd{flex:1;min-width:0;}
.alert .tt{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);}
.alert .tx{font-size:var(--font-size-sm);color:inherit;line-height:var(--line-height-snug);margin-top:2px;}
.alert-error{background:var(--color-status-error-subtle);color:var(--color-status-error);border-color:color-mix(in srgb, var(--color-status-error) 28%, transparent);}
.alert-warning{background:var(--color-status-warning-subtle);color:var(--color-status-warning);border-color:color-mix(in srgb, var(--color-status-warning) 28%, transparent);}
.alert-success{background:var(--color-status-success-subtle);color:var(--color-status-success);border-color:color-mix(in srgb, var(--color-status-success) 28%, transparent);}
.alert-info{background:var(--color-status-info-subtle);color:var(--color-status-info);border-color:color-mix(in srgb, var(--color-status-info) 28%, transparent);}
/* X de dismiss compartilhado (alert e toast) */
.msg-x{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:inherit;opacity:.55;cursor:pointer;border-radius:var(--border-radius-xs);transition:opacity var(--duration-fast) var(--easing-default);}
.msg-x:hover{opacity:1;}
.msg-x:focus-visible{outline:none;box-shadow:var(--shadow-focus);opacity:1;}
/* ERRO DE CAMPO — validação específica de um input: borda + anel --shadow-focus-error + mensagem curta */
.input.invalid{border-color:var(--color-status-error);}
.input.invalid:focus{border-color:var(--color-status-error);box-shadow:var(--shadow-focus-error);}
.input-wrap.invalid .lead{color:var(--color-status-error);}
.field-msg{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--font-size-xs);color:var(--color-status-error);}
.field-msg .ico-svg{width:14px;height:14px;}
/* TOAST — feedback global transitório de AÇÃO ("pop-up" não bloqueante), empilhável.
Superfície INVERSA (--color-bg-inverse): índigo profundo no claro, clara no escuro —
o status é comunicado só pelo ícone (tokens --color-status-*-on-inverse), sem filete. */
.toaster{position:fixed;top:var(--space-4);right:var(--space-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-3);width:340px;max-width:calc(100vw - 2 * var(--space-4));}
.toast{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-bg-inverse);border:1px solid color-mix(in srgb, var(--color-text-inverse) 12%, transparent);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);animation:toast-in var(--duration-normal) var(--easing-out);}
.toast .aico{margin-top:1px;}
.toast .bd{flex:1;min-width:0;}
.toast .tt{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-inverse);}
.toast .tx{font-size:var(--font-size-xs);color:color-mix(in srgb, var(--color-text-inverse) 72%, transparent);margin-top:2px;}
.toast .msg-x{color:var(--color-text-inverse);}
.toast .msg-x:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-text-inverse) 28%, transparent);}
.toast-error .aico{color:var(--color-status-error-on-inverse);}
.toast-warning .aico{color:var(--color-status-warning-on-inverse);}
.toast-success .aico{color:var(--color-status-success-on-inverse);}
.toast-info .aico{color:var(--color-status-info-on-inverse);}
.toast.leaving{animation:toast-out var(--duration-normal) var(--easing-in) forwards;}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px) scale(.98);}}
@media (prefers-reduced-motion:reduce){.toast,.toast.leaving{animation:none;}}
/* JS leve do toaster (referência canônica — cada tela inclui o seu):
const ICO={error:'i-alert-circle',warning:'i-alert-triangle',success:'i-check-circle',info:'i-info'};
function spawnToast(status,tt,tx){
const t=document.createElement('div');
t.className='toast toast-'+status; t.setAttribute('role','status');
t.innerHTML=''+
''+tt+'
'+(tx?'
'+tx+'
':'')+'