/* HUB de gerenciamento — CSS único, sem dependência externa (o serviço tem de
   subir num ambiente fechado do cliente, sem CDN).

   Organização (M6):
     1. tokens        6. formulários
     2. base + foco   7. botões
     3. casca         8. estado (forma + rótulo + cor)
     9. avisos       10. chat
    11. listagens    12. indicadores e gráfico                                */

/* ============================================================ 1. tokens ===
   Identidade Gestão Expert traduzida para o sistema de tokens do HUB. O visual
   da fonte é Bootstrap 5.3 + OneUI; aqui NÃO entra framework nem CDN (ambiente
   fechado do cliente), então a paleta, o tipo e os raios da SPEC viram degraus
   deste :root. Onde a SPEC regride contraste, o degrau acessível prevalece — a
   nota diz por quê.                                                          */
:root {
    /* superfícies — corpo branco, conteúdo em azul-quase-branco (SPEC §1.2) */
    --ground: #f6fafe;       /* fundo da área de conteúdo */
    --surface: #ffffff;      /* cartões, barras, painéis */
    --surface-2: #f4fafc;    /* teal claro — hover de linha/card, fundos suaves */
    --surface-3: #e7e9f1;    /* header de bloco, chips, cabeçalho de tabela */
    --line: #d6e5ee;         /* borda padrão — inputs, cards, botões (SPEC) */
    --line-strong: #b9cede;

    /* tinta */
    --ink: #212529;          /* texto principal (SPEC) */
    --ink-2: #55606f;        /* secundário — o #6c757d/#6b7683 da SPEC reprova em 4,5:1; este passa */
    --ink-3: #79838f;

    /* marca teal — cromo estrutural: topo, avatar, títulos de módulo, hover */
    --brand: #40839c;        /* teal primário */
    --brand-ink: #166684;    /* teal escuro — títulos de módulo e texto de botão branco */
    --brand-strong: #2e6f88; /* fundo do topo — branco fica em 5,4:1 (o #40839c puro só chega a 4,25) */
    --brand-wash: #f4fafc;   /* teal claro — hover de card/entidade */
    --brand-line: #d6e5ee;
    --brand-contrast: #ffffff;

    /* acento azul-ação — CTAs, links, foco, estados ativos (SPEC "azul ação") */
    --accent: #1e88e5;       /* botão "Cadastrar/Salvar" */
    --accent-hover: #1976d2;
    --accent-ink: #1565c0;   /* texto de link/ativo — AA sobre branco */
    --accent-wash: #e8f2fd;
    --accent-line: #b6d8f7;

    /* status semântico — tons acessíveis do HUB (os hues da SPEC regridem como
       texto); a SPEC é honrada nos washes de fundo */
    --ok: #0f7a43;    --ok-wash: #e3f4ea;    --ok-line: #a9dcc0;
    --warn: #8f6a00;  --warn-wash: #fbf0d6;  --warn-line: #e3cd8d;
    --crit: #b42318;  --crit-wash: #fdeceb;  --crit-line: #f3bdb8;
    --info: #106f83;  --info-wash: #e2f3f6;

    /* tipo — 8 degraus */
    --t-cap: 11px;  --t-xs: 12px;  --t-sm: 13px;  --t-md: 14px;
    --t-lg: 16px;   --t-xl: 20px;  --t-2xl: 26px; --t-kpi: 34px;

    /* espaço — múltiplos de 4 */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

    /* raio — controle (input 5px) / superfície / botão newui (10px) / pílula */
    --r-sm: 5px;  --r-md: 8px;  --r-btn: 10px;  --r-pill: 999px;

    --shadow-1: 0 1px 2px rgba(19,26,34,.06);
    --shadow-2: 0 10px 30px rgba(16,24,40,.14);
    --shadow-block: 0 1px 2px rgba(214,219,226,.5);   /* bloco/painel (SPEC §2.4) */
    --shadow-card: 0 8px 24px rgba(149,157,165,.2);   /* card de módulo (SPEC §2.5) */

    /* Inter primeiro; degrada p/ system-ui — ambiente fechado, sem webfont */
    --sans: "Inter", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

    /* avatar (M8) — 7 tons de cromo, determinísticos por nome; texto branco.
       Fora das famílias de status (não são estado) e do azul de ação. */
    --avatar-0: #3d7d95; --avatar-1: #5b57a0; --avatar-2: #2f6f8f; --avatar-3: #6f4a9c;
    --avatar-4: #37795a; --avatar-5: #8a5f2a; --avatar-6: #4c5e70; --avatar-txt: #fff;

    /* apelidos de transição — não usar em código novo */
    --fundo: var(--ground);
    --papel: var(--surface);
    --borda: var(--line);
    --texto: var(--ink);
    --suave: var(--ink-2);
    --acento: var(--accent);
    --erro: var(--crit);
}

/* ====================================================== 2. base + foco === */
* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.5 var(--sans);
    color: var(--ink);
    background: var(--ground);
}

/* Foco visível em todo elemento interativo (WCAG 2.4.7). Não existia nenhuma
   regra de foco no arquivo — componentes com aparência própria (menu do
   usuário, abas, hambúrguer) não davam retorno algum ao teclado. */
:where(a, button, summary, [role=tab], .menu-toggle, .link-conta):focus-visible,
:where(input, select, textarea):focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================= 3. casca === */
/* O gatilho da gaveta é o próprio checkbox (funciona sem JS). `display:none` o
   tirava da ordem de tabulação — fica invisível, mas focável, e o anel de foco
   aparece no ☰ ao lado. */
#nav-toggle {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    margin: 0; padding: 0; border: 0; overflow: hidden;
}
#nav-toggle:focus-visible ~ .topbar .menu-toggle {
    box-shadow: var(--focus); border-radius: var(--r-sm);
}

/* Topo teal — a marca mais forte da Gestão Expert. Fundo em --brand-strong
   (não no --brand puro) para o branco passar 4,5:1 sobre a barra. */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    min-height: 64px; padding: 10px var(--s6);
    background: var(--brand-strong); border-bottom: 1px solid var(--brand-ink);
    position: sticky; top: 0; z-index: 40;
}
.topbar-esq { display: flex; align-items: center; gap: var(--s3); }
.topbar .marca { font-size: 17px; font-weight: 600; text-decoration: none; color: #fff; display: flex; align-items: center; gap: var(--s2); }
.topbar .marca strong { color: #fff; font-weight: 700; }
.menu-toggle { display: none; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #fff; padding: var(--s1); margin: 0; }

/* Menu do usuário (avatar + dropdown via <details>) — vive sobre o topo teal */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: var(--s1) 6px; border-radius: var(--r-md); }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: rgba(255,255,255,.14); }
.avatar { width: 34px; height: 34px; border-radius: var(--r-pill); background: rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--t-sm); font-weight: 700; flex-shrink: 0; }
.user-menu .quem { font-size: var(--t-md); font-weight: 600; line-height: 1.2; color: #fff; }
.user-menu .quem small { display: block; font-weight: 400; color: rgba(255,255,255,.78); font-size: var(--t-xs); }
.user-menu .chevron { width: var(--t-lg); height: var(--t-lg); color: rgba(255,255,255,.82); }
.user-menu-pop {
    position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
    min-width: 210px; padding: 6px; z-index: 50;
}
.user-menu-pop a, .user-menu-pop button {
    display: block; width: 100%; text-align: left; padding: 9px var(--s3); border-radius: var(--r-sm);
    background: none; border: 0; margin: 0; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer;
}
.user-menu-pop a:hover, .user-menu-pop button:hover { background: var(--surface-3); }
.user-menu-pop .sep { height: 1px; background: var(--line); margin: var(--s1) 0; }

.app { display: flex; align-items: flex-start; }

.sidebar {
    width: 248px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line);
    position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: var(--s2) 10px var(--s6);
}
.menu-label { font-size: var(--t-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); padding: var(--s4) var(--s3) 6px; }
.sidebar nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px var(--s3); margin: 1px 0;
    border-radius: var(--r-md); text-decoration: none; color: var(--ink); font-size: var(--t-md);
    border-left: 3px solid transparent;
}
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-2); }
.sidebar nav a:hover { background: var(--surface-3); }
.sidebar nav a.ativo { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; border-left-color: var(--accent); }
.sidebar nav a.ativo svg { color: var(--accent); }

.main { flex: 1; min-width: 0; }

/* Contexto do tenant: cabeçalho + abas dentro do conteúdo. */
.tenant-context { background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s3) var(--s6) 0; }
.tenant-context-topo { display: flex; align-items: center; gap: var(--s3); max-width: 1160px; margin: 0 auto; }
.tenant-context .voltar { color: var(--accent-ink); text-decoration: none; font-size: var(--t-sm); }
.tenant-context .cliente-nome { display: flex; align-items: center; gap: var(--s2); font-size: 15px; }
.tenant-tabs { display: flex; gap: 2px; max-width: 1160px; margin: 10px auto 0; flex-wrap: wrap; }
.tenant-tabs a { padding: 9px var(--s3); text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; font-size: var(--t-md); }
.tenant-tabs a:hover { color: var(--ink); }
.tenant-tabs a.ativa { color: var(--accent-ink); font-weight: 600; border-bottom-color: var(--accent); }
.tenant-tabs a { display: inline-flex; align-items: center; gap: 6px; }
/* Número do passo do arco (M7). */
.passo-n { font: 700 10px/1 var(--mono); color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-pill); width: 16px; height: 16px; display: inline-grid; place-items: center; }
.tenant-tabs a.ativa .passo-n { border-color: var(--accent); color: var(--accent-ink); }
/* Badge de estado da etapa: só o glifo, herdando a cor do nível. */
.aba-badge { display: inline-flex; }
.aba-badge svg { width: 13px; height: 13px; }
.aba-badge.estado-ok { color: var(--ok); }
.aba-badge.estado-alerta { color: var(--warn); }
.aba-badge.estado-bloqueio { color: var(--crit); }

.main-content { max-width: 1160px; margin: 0 auto; padding: var(--s6); }
footer { max-width: 1160px; margin: 0 auto; padding: var(--s4) var(--s6) var(--s10); color: var(--ink-2); font-size: var(--t-sm); }

/* Faixa persistente de impersonação. */
.faixa-impersonacao {
    display: flex; align-items: center; justify-content: center; gap: var(--s4);
    background: #7a3ea6; color: #fff; padding: var(--s2) var(--s6); font-size: var(--t-md);
}
.faixa-impersonacao .link { color: #fff; text-decoration: underline; background: none; border: 0; cursor: pointer; font: inherit; }

.topo-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }

/* Subnavegação — mesmo desenho das abas do tenant, um só padrão de aba. */
.subnav { display: flex; gap: 2px; flex-wrap: wrap; margin: var(--s1) 0 var(--s4); border-bottom: 1px solid var(--line); }
.subnav a { text-decoration: none; color: var(--ink-2); padding: 9px var(--s3); font-size: var(--t-md); border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); }
.subnav a.ativo { color: var(--accent-ink); font-weight: 600; border-bottom-color: var(--accent); }

/* Responsivo: no mobile a sidebar vira gaveta acionada pelo hambúrguer. */
@media (max-width: 900px) {
    .menu-toggle { display: inline-block; }
    .user-menu .quem { display: none; }
    .sidebar {
        position: fixed; left: 0; top: 0; height: 100vh; z-index: 60;
        transform: translateX(-100%); transition: transform .2s ease;
        box-shadow: 0 0 50px rgba(16,24,40,.25);
    }
    #nav-toggle:checked ~ .app .sidebar { transform: translateX(0); }
    #nav-toggle:checked ~ .backdrop { display: block; }
    .backdrop { display: none; position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 55; }
}

/* ======================================================== 4. tipografia === */
h1 { font-size: 22px; margin: 0 0 var(--s1); }
h2 { font-size: 17px; margin: var(--s8) 0 var(--s2); }
h2:first-child, .cartao > h2:first-child { margin-top: 0; }
p.sub { color: var(--ink-2); margin: 0 0 var(--s5); }

/* =========================================================== 5. cartões === */
.cartao {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-block);
    padding: 18px;
    margin-bottom: 18px;
}
/* Cartão recolhível: o <summary> é o próprio título (expandir/contrair como as
   outras seções). Sem JS — é um <details>. */
details.cartao > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2); font-size: 17px; font-weight: 600; }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary .chev { width: 14px; height: 14px; transition: transform .15s; color: var(--ink-2); flex: none; }
details.cartao[open] > summary .chev { transform: rotate(180deg); }
details.cartao[open] > summary { margin-bottom: var(--s4); }

.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s4); }
.lista-simples { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

/* ======================================================== 6. formulários === */
label { display: block; font-size: var(--t-sm); color: var(--ink-2); margin: 10px 0 3px; }

/* Seletor por exclusão: cobre email, search, date e o que vier depois. A lista
   anterior (text/password/number) deixava 4 campos de e-mail sem estilo. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]):not([type=file]),
select, textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font: inherit;
    background: var(--surface);
    color: var(--ink);
}
textarea { min-height: 90px; font-family: var(--mono); font-size: var(--t-sm); }

input[type=file] {
    width: 100%;
    padding: 9px;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font: inherit;
}
input[type=file]::file-selector-button {
    margin-right: var(--s3);
    padding: 6px var(--s3);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--accent-ink);
    font: inherit;
    cursor: pointer;
}
input[type=checkbox] { accent-color: var(--accent); }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--s4); }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3) var(--s4); }
.form-largo { max-width: 720px; }
.linha-form { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: 6px 0; }
.linha-form select, .linha-form input { padding: 5px var(--s2); }
.perms { font-size: var(--t-sm); color: var(--ink-2); max-width: 480px; }
.perms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); margin: var(--s2) 0; }
.perms-grid legend { padding: 0 6px; color: var(--ink-2); }
.check { display: flex; gap: 6px; align-items: center; font-size: var(--t-sm); font-weight: normal; }
.check input { width: auto; }
details summary { cursor: pointer; color: var(--accent-ink); font-size: var(--t-sm); }

/* Barra de filtro das listagens. */
.filtro { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.filtro input, .filtro select { padding: 6px 10px; width: auto; }
.filtro .busca { flex: 1; min-width: 180px; max-width: 320px; }
.filtro label { margin: 0; }

/* ============================================================ 7. botões === */
/* Sem margem no componente: quem espaça é o contêiner (.acoes / .form-acoes).
   A margem base gerava 29 `style="margin-top:0"` espalhados pelas views. */
button, .botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0;
    padding: 9px var(--s4);
    border: 1px solid var(--accent);
    border-radius: var(--r-btn);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: var(--t-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}
button:hover, .botao:hover { background: var(--accent-hover); border-color: var(--accent-hover); filter: none; }
/* Secundário = "btn-white" da SPEC: branco com tinta teal escura. */
button.secundario, .botao.secundario { background: var(--surface); color: var(--brand-ink); border-color: var(--brand-line); }
button.secundario:hover, .botao.secundario:hover { background: var(--brand-wash); border-color: var(--brand); filter: none; }
button.perigo, .botao.perigo { background: var(--surface); color: var(--crit); border-color: var(--crit); }
button.perigo:hover { background: var(--crit-wash); filter: none; }
button.link, .botao.link { background: none; border: none; color: var(--accent-ink); padding: 0; margin: 0; cursor: pointer; }
button.link:hover { text-decoration: underline; filter: none; }
button[disabled], .botao[disabled] { opacity: .55; cursor: not-allowed; filter: none; }
form.inline { display: inline; }

/* Contêineres que espaçam. `.form-acoes` é o rodapé de formulário. */
.acoes, .acoes-msg, .form-acoes {
    display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
}
.form-acoes { margin-top: var(--s4); }
/* Lista de escolhas (checkbox por linha) — seletor de tabelas do assunto. */
.escolha { padding: var(--s1) 0; }
.escolha label { display: flex; gap: var(--s2); align-items: center; margin: 0; }
/* Um <td> com `display:flex` deixa de ser célula: a coluna sai do grid da tabela
   e os controles flutuam fora da linha. A coluna de ações continua célula — o
   espaço entre os controles vem de margem entre irmãos, que é inline e quebra
   sozinha quando falta largura. */
td.acoes { display: table-cell; vertical-align: middle; }
td.acoes > * + * { margin-left: var(--s3); }

/* Indicador de progresso do botão travado (hub.js). */
.girando {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: girar .7s linear infinite; flex: none;
}
button.secundario .girando { border-color: var(--accent-line); border-top-color: var(--accent); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================ 8. estado === */
/* Um só componente para "estado", com FORMA + RÓTULO + cor.
   A cor sozinha não serve: vermelho e âmbar ficam a ΔE 3,9 em deuteranopia,
   e nenhuma tríade vermelho/âmbar/verde passa do piso de separação. */
.estado {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--t-cap); font-weight: 650; letter-spacing: .03em;
    padding: 3px 9px 3px 6px; border-radius: var(--r-pill);
    border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
}
.estado svg { width: 12px; height: 12px; flex: none; }
.estado-ok       { background: var(--ok-wash);   color: var(--ok);      border-color: var(--ok-line); }
.estado-alerta   { background: var(--warn-wash); color: var(--warn);    border-color: var(--warn-line); }
.estado-bloqueio { background: var(--crit-wash); color: var(--crit);    border-color: var(--crit-line); }
.estado-neutro   { background: var(--surface-3); color: var(--ink-2);   border-color: var(--line); }

/* Chip neutro de categoria (nível de pergunta, plano, papel…). */
.tag { display: inline-block; font-size: var(--t-xs); padding: 2px var(--s2); border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line); }

/* Chip de dado literal: id de tenant, id de conta, competência. */
.cod { display: inline-block; font: 400 var(--t-xs)/1.5 var(--mono); padding: 1px 6px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line); }

/* Lista de verificações de prontidão. */
ul.prontidao { list-style: none; padding: 0; margin: 0; }
ul.prontidao li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); }
ul.prontidao li:last-child { border-bottom: none; }
ul.prontidao li .marca { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; }
ul.prontidao li .marca svg { width: 16px; height: 16px; }
ul.prontidao li.ok .marca { color: var(--ok); }
ul.prontidao li.bloqueia .marca { color: var(--crit); }
ul.prontidao li.alerta .marca { color: var(--warn); }
ul.prontidao li.info .marca { color: var(--ink-2); }
ul.prontidao li.ok .titulo { color: var(--ink-2); }
ul.prontidao li .titulo { flex: 1; }
ul.prontidao li a { margin-left: auto; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }

/* Passos do assistente de novo tenant. */
ol.passos { list-style: none; display: flex; gap: var(--s2); padding: 0; margin: 0 0 var(--s5); flex-wrap: wrap; }
ol.passos li { display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); font-size: var(--t-md); padding: 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
ol.passos li span { display: inline-flex; align-items: center; justify-content: center; width: var(--s5); height: var(--s5); border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; }
ol.passos li.atual { color: var(--ink); border-color: var(--accent); }
ol.passos li.atual span { background: var(--accent); color: #fff; }
ol.passos li.feito span { background: var(--ok); color: #fff; }

/* ============================================================ 9. avisos === */
.aviso { padding: 10px var(--s3); border-radius: var(--r-sm); margin-bottom: var(--s4); border: 1px solid transparent; }
.aviso.ok { background: var(--ok-wash); color: var(--ok); border-color: var(--ok-line); }
.aviso.alerta { background: var(--warn-wash); color: var(--warn); border-color: var(--warn-line); }
.aviso.erro { background: var(--crit-wash); color: var(--crit); border-color: var(--crit-line); }
.aviso b, .aviso a { color: var(--ink); }
.aviso a { font-weight: 600; }
.token { font-family: var(--mono); background: #fff8dc; color: #4a3c00; padding: var(--s2); display: block; overflow-wrap: anywhere; border-radius: var(--r-sm); }

pre.resposta {
    white-space: pre-wrap; overflow-wrap: anywhere;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: var(--s3); margin: 0; font: inherit;
}
pre.sqlbloco {
    white-space: pre-wrap; overflow-wrap: anywhere;
    background: var(--surface-2); border: 1px solid var(--line);
    border-left: 3px solid var(--accent); border-radius: var(--r-sm);
    padding: 10px var(--s3); font-family: var(--mono); font-size: var(--t-xs);
}
a.exemplo { color: var(--accent-ink); text-decoration: none; }
a.exemplo:hover { text-decoration: underline; }

/* ============================================================== 10. chat === */
.chat-layout { display: flex; gap: var(--s5); align-items: flex-start; }
.chat-main { flex: 1 1 60%; min-width: 0; }
.chat-lateral {
    flex: 0 0 320px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s4); position: sticky; top: var(--s4);
}
.chat-lateral .lateral-titulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 0 0 var(--s3); }
.chat-lateral h3 { font-size: var(--t-sm); margin: var(--s4) 0 6px; }
.chat-lateral ul { margin: 0; padding-left: 18px; }
.chat-lateral pre.sqlbloco { font-size: var(--t-cap); }

.conversa { margin-bottom: 18px; }
.bolha { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s3); margin-bottom: var(--s3); background: var(--surface); }
.bolha.voce { background: var(--accent-wash); border-color: var(--accent-line); }
.bolha .quem { font-size: var(--t-cap); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-bottom: var(--s1); }
.bolha .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.acoes-msg { margin-top: 10px; }

/* Voto: botão com rótulo textual e estado em aria-pressed, não em text-shadow. */
.voto {
    display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-2); border-radius: var(--r-sm);
    padding: var(--s1) 9px; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
}
.voto svg { width: 13px; height: 13px; }
.voto:hover { border-color: var(--line-strong); color: var(--ink); filter: none; }
.voto[aria-pressed=true] { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok); }
.voto.ruim[aria-pressed=true] { background: var(--crit-wash); border-color: var(--crit-line); color: var(--crit); }

@media (max-width: 820px) {
    .chat-layout { flex-direction: column; }
    .chat-lateral { flex-basis: auto; width: 100%; position: static; }
}

/* ========================================================= 11. listagens === */
/* Envelope rolável (aplicado pelo EnvelopeTabelaTagHelper em toda <table>):
   sem ele, tabela larga faz o documento inteiro rolar de lado. */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.cartao .tbl-wrap, .tbl-wrap .tbl-wrap { border: 0; border-radius: 0; }

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 10px var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
th {
    font-size: var(--t-cap); text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-2); font-weight: 650; background: var(--surface-3);
    position: sticky; top: 0; z-index: 1;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
tfoot th { position: static; background: var(--surface-3); }
td.sql, td.pergunta { font-family: var(--mono); font-size: var(--t-xs); max-width: 420px; overflow-wrap: anywhere; vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* SQL aberta na própria linha da fila: ler a consulta é o que decide a aprovação,
   então ela não pode exigir sair da tela — mas também não pode dominar a coluna. */
.sql-linha { margin-top: var(--s2); }
.sql-linha pre.sqlbloco { font-size: var(--t-cap); margin: var(--s2) 0 0; }
.sql-linha p.sub { margin: var(--s1) 0 0; }

/* Linha de revisão: ocupa a largura toda da tabela para caber o formulário de
   aprovação, e fica visualmente presa à linha de cima. */
.linha-revisao > td { background: var(--surface-2); padding-top: var(--s2); }
.linha-revisao pre.sqlbloco { font-size: var(--t-cap); }
.vazio { color: var(--ink-2); font-style: italic; }

/* Estado vazio: por que está vazio e qual é o próximo passo. */
.sem-nada { text-align: center; padding: var(--s8) var(--s4); }
.sem-nada svg { width: 34px; height: 34px; color: var(--ink-3); margin-bottom: var(--s3); }
.sem-nada h3 { margin: 0 0 var(--s1); font-size: var(--t-lg); font-weight: 620; }
.sem-nada p { margin: 0 auto var(--s4); font-size: var(--t-sm); color: var(--ink-2); max-width: 44ch; }
td .sem-nada { padding: var(--s6) var(--s4); }

/* Abas "Tabelas" / "Dicionário de dados" na tela da fonte — troca por CSS puro
   (radio :checked), sem ida ao servidor e sem JS. Os radios são os primeiros
   filhos; a barra e os painéis vêm depois, para o combinador ~ alcançá-los. */
.fonte-abas > .aba-radio { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fonte-abas .aba-bar { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 var(--s5); border-bottom: 1px solid var(--line); }
.fonte-abas .aba-bar label {
    cursor: pointer; color: var(--ink-2); padding: 9px var(--s4); font-size: var(--t-md);
    border-bottom: 2px solid transparent; margin: 0; font-weight: 600;
}
.fonte-abas .aba-bar label:hover { color: var(--ink); }
.fonte-abas .aba-painel { display: none; }
#aba-tabelas:checked ~ .aba-bar label[for="aba-tabelas"],
#aba-dicionario:checked ~ .aba-bar label[for="aba-dicionario"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
#aba-tabelas:checked ~ .painel-tabelas,
#aba-dicionario:checked ~ .painel-dicionario { display: block; }
#aba-tabelas:focus-visible ~ .aba-bar label[for="aba-tabelas"],
#aba-dicionario:focus-visible ~ .aba-bar label[for="aba-dicionario"] { box-shadow: var(--focus); border-radius: var(--r-sm); }

/* Listagem compacta das tabelas da fonte — UMA linha por tabela (nome ·
   exposição · gerar IA · expandir descrição), expostas primeiro e sobre
   verde-claro. A descrição vive num <details> que abre para baixo, ocupando a
   linha inteira. Exposição e descrição são formulários separados; cada um leva
   o outro campo como hidden para o handler não apagar o que não foi editado. */
.tabelas-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.tabela-linha {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
    padding: 7px var(--s3); border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface);
}
.tabela-linha.exposta { background: var(--ok-wash); border-color: var(--ok-line); }
.tabela-linha > form { display: contents; }
.tabela-linha .tl-nome { display: flex; align-items: center; gap: var(--s2); font-weight: 600; flex: 1 1 170px; min-width: 150px; overflow-wrap: anywhere; }
.tabela-linha select { width: auto; max-width: 200px; padding: 5px var(--s2); font-size: var(--t-sm); }

/* Expandir a descrição — checkbox oculto + label estilizado de botão. O botão
   fica FIXO no seu lugar na linha; o painel abre como uma faixa de largura total
   abaixo (é o último irmão, com flex-basis:100%), sem deslocar o botão. */
.tl-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; overflow: hidden; }
.tl-desc-btn {
    flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin: 0;
    padding: 6px var(--s3); border: 1px solid var(--brand-line); border-radius: var(--r-btn);
    background: var(--surface); color: var(--brand-ink); font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
}
.tl-desc-btn:hover, .tl-toggle:checked ~ .tl-desc-btn { background: var(--brand-wash); border-color: var(--brand); }
.tl-toggle:focus-visible ~ .tl-desc-btn { box-shadow: var(--focus); border-radius: var(--r-btn); }
.tl-desc-btn .chev { width: 12px; height: 12px; transition: transform .15s; flex: none; }
.tl-toggle:checked ~ .tl-desc-btn .chev { transform: rotate(180deg); }
.tl-desc-btn .marca-ok { color: var(--ok); display: inline-flex; }
.tl-desc-btn .marca-ok svg { width: 13px; height: 13px; }
.tl-desc__corpo { flex-basis: 100%; display: none; margin-top: 6px; }
.tl-toggle:checked ~ .tl-desc__corpo { display: block; }
.tl-desc__corpo textarea { min-height: 60px; margin: 0 0 var(--s2); }
/* rodapé do painel: Salvar à esquerda, Gerar por IA empurrado para a direita */
.tl-desc-acoes { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.tl-desc-acoes form { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.tl-desc-acoes .tl-ia-dir { margin-left: auto; }
/* painel de edição do assunto: várias seções empilhadas dentro da faixa */
.tabela-linha .tl-info { font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
/* grupos de tabelas por database dentro do seletor do assunto — colapsáveis, retraídos. */
.db-grupo { border: 1px solid var(--line); border-radius: var(--r-sm); margin: 6px 0; }
.db-grupo > summary { cursor: pointer; padding: 6px var(--s3); font-weight: 600; color: var(--ink); background: var(--surface-2); border-radius: var(--r-sm); list-style: none; }
.db-grupo > summary::-webkit-details-marker { display: none; }
.db-grupo > summary::before { content: "▸ "; color: var(--ink-2); }
.db-grupo[open] > summary::before { content: "▾ "; }
.db-grupo[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.db-grupo .escolha { padding: 3px var(--s4); }
/* credencial + Gerar descrição empurrados para a direita do rodapé de tabelas */
.tl-ia-grupo { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.tl-desc__corpo > form + form,
.tl-desc__corpo > details,
.tl-desc__corpo > .tl-perigo { margin-top: var(--s4); }
.tl-perigo { border-top: 1px solid var(--line); padding-top: var(--s3); }

.tabela-linha .tl-obs { flex-basis: 100%; margin: 4px 0 0; font-size: var(--t-xs); }

/* "i" de ajuda ao lado do título: popover por <details> (sem JS). Clica no "i",
   abre a descrição; clica de novo, fecha. Substitui os parágrafos de descrição. */
.info-pop { display: inline-block; position: relative; vertical-align: middle; margin-left: 6px; font-weight: 400; }
.info-pop > summary {
    list-style: none; cursor: pointer; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface);
    font: 700 11px/16px var(--sans); text-align: center; display: inline-block;
}
.info-pop > summary::-webkit-details-marker { display: none; }
.info-pop > summary:hover { border-color: var(--accent); color: var(--accent-ink); }
.info-pop[open] > summary { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
.info-pop__corpo {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    width: max-content; max-width: 380px; padding: var(--s3) var(--s4);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-2); font-size: var(--t-sm); color: var(--ink-2); font-weight: 400;
    white-space: normal; text-align: left; line-height: 1.5;
}
.info-pop__corpo strong, .info-pop__corpo em { color: var(--ink); }
.info-pop__corpo a { color: var(--accent-ink); }
@media (max-width: 640px) { .info-pop__corpo { max-width: 78vw; } }
/* "i" dentro da barra de abas (subnav): a aba e o "i" andam juntos. */
.subnav-item { display: inline-flex; align-items: center; }
.subnav-item > a { display: inline-flex; align-items: center; }
.subnav .info-pop { margin-left: 1px; margin-right: 4px; }
.subnav .info-pop > summary { width: 16px; height: 16px; font: 700 10px/14px var(--sans); }

/* Agrupamento por assunto nas listagens do Ensinar (perguntas, fila, aprovadas):
   uma seção colapsável por assunto, com o botão de gerar/novo no cabeçalho. */
.grupo-assunto { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--s3); overflow: hidden; }
.grupo-assunto > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2);
    padding: 10px var(--s4); background: var(--surface-3); font-weight: 650; color: var(--ink);
}
.grupo-assunto > summary::-webkit-details-marker { display: none; }
.grupo-assunto > summary .chev { width: 13px; height: 13px; transition: transform .15s; color: var(--ink-2); flex: none; }
.grupo-assunto[open] > summary .chev { transform: rotate(180deg); }
.grupo-assunto > summary .cont { margin-left: auto; font-weight: 600; color: var(--ink-2); font-size: var(--t-sm); white-space: nowrap; }
.grupo-assunto > summary .grupo-acao { margin-left: var(--s2); }
.grupo-assunto__corpo { padding: var(--s3) var(--s4); }
.grupo-assunto__corpo > *:first-child { margin-top: 0; }
.grupo-assunto .tbl-wrap { border: 0; border-radius: 0; }

/* Seletor de conta no login. */
.lista-contas { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-direction: column; gap: var(--s2); }
.link-conta {
    display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s3) var(--s3); cursor: pointer; font: inherit; color: var(--ink);
}
/* Card de entidade (SPEC §4): hover puxa o teal da marca, não o azul de ação. */
.link-conta:hover { border-color: var(--brand); background: var(--brand-wash); filter: none; }

.conta-atual {
    color: var(--ink-2) !important; font-size: var(--t-sm); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 2px 10px !important;
}
.conta-atual:hover { border-color: var(--brand); }

/* =============================================== 12. indicadores e gráfico === */
/* Arco da jornada (M7): o mesmo estado da barra de abas, explicado na Visão geral. */
.arco { display: flex; align-items: center; gap: 0; margin: 0 0 18px; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-block); overflow-x: auto; }
.arco .passo { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.arco .passo .bola { width: 24px; height: 24px; border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 700; font-size: var(--t-xs); flex: none; background: var(--surface-3); color: var(--ink-3); }
.arco .passo .bola svg { width: 14px; height: 14px; }
.arco .passo.ok { color: var(--ink); }
.arco .passo.ok .bola { background: var(--ok); color: #fff; }
.arco .passo.alerta .bola { background: var(--warn); color: #fff; }
.arco .passo.bloqueio .bola { background: var(--crit); color: #fff; }
.arco .passo.atual { color: var(--ink); font-weight: 650; }
.arco .passo.atual .bola { box-shadow: 0 0 0 3px var(--accent-wash); }
.arco .traco { flex: 1; min-width: 24px; height: 2px; background: var(--line); margin: 0 10px; }
.arco .traco.ok { background: var(--ok); }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); margin-bottom: 18px; }
.indicador { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.indicador .rotulo { font-size: var(--t-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 620; margin-bottom: 2px; }
.indicador .valor { font-size: var(--t-kpi); line-height: 1.05; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.indicador .valor .unidade { font-size: var(--t-lg); font-weight: 600; }
.indicador .nota { font-size: var(--t-xs); color: var(--ink-2); margin-top: 2px; }
.indicador.alerta .valor { color: var(--warn); }
.indicador.bloqueio .valor { color: var(--crit); }
.indicador.ok .valor { color: var(--ok); }

/* Barra de progresso do lote. */
.progresso { background: var(--surface-3); border-radius: var(--r-pill); height: 8px; overflow: hidden; margin: 10px 0; }
.progresso > div { background: var(--accent); height: 100%; border-radius: var(--r-pill); transition: width .4s ease; }

/* Gráfico de série (SVG montado pelo hub.js). Série única, uma cor só. */
.grafico-caixa { position: relative; }
svg.grafico { width: 100%; height: 190px; display: block; }
svg.grafico .malha { stroke: var(--line); stroke-width: 1; }
svg.grafico .eixo { fill: var(--ink-2); font: 400 10px var(--sans); }
svg.grafico .barra { fill: var(--accent); opacity: .45; transition: opacity .15s; }
svg.grafico .barra.ultima { opacity: 1; }
svg.grafico .barra:hover { opacity: 1; }
svg.grafico .alvo { fill: transparent; }
.dica {
    position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s;
    background: var(--ink); color: var(--surface); border-radius: var(--r-sm);
    padding: 6px 10px; font-size: var(--t-xs); white-space: nowrap; z-index: 5;
    box-shadow: var(--shadow-2);
}
.dica b { font-variant-numeric: tabular-nums; }

/* Só para leitor de tela. */
.sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ======================================================= 13. login (M7) ===
   Duas portas por persona. A da conta tem a cara do produto (teal); a da gestão
   é sóbria (ameixa), rotulada como ferramenta interna. Mesmo backend de
   identidade — o que muda é o enquadramento e a guarda de persona. */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); }
.login-wrap.conta { background: linear-gradient(160deg, var(--brand-wash), var(--ground) 62%); }
.login-wrap.gestao { background: var(--surface-3); }
.login-card {
    width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--s6);
}
.login-wrap.conta .login-card { border-top: 3px solid var(--brand); }
.login-wrap.gestao .login-card { border-top: 3px solid #6b3fa0; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); }
.login-brand .logo { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none; }
.login-wrap.conta .login-brand .logo { background: var(--brand); }
.login-wrap.gestao .login-brand .logo { background: #6b3fa0; }
.login-brand .nome { font-weight: 700; font-size: var(--t-lg); letter-spacing: -.01em; line-height: 1.2; }
.login-brand .nome small { display: block; font-weight: 500; font-size: var(--t-xs); color: var(--ink-2); letter-spacing: 0; }
.login-card .tagline { color: var(--ink-2); font-size: var(--t-sm); margin: 0 0 var(--s5); }
.login-card label { margin-top: var(--s3); }
.login-card .botao, .login-card button[type=submit] { width: 100%; margin-top: var(--s5); justify-content: center; }
.login-foot { margin-top: var(--s4); font-size: var(--t-xs); color: var(--ink-3); text-align: center; }
.login-lock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 11px; margin-bottom: var(--s4); }
.login-lock svg { width: 12px; height: 12px; }
.login-card button.plum { background: #6b3fa0; border-color: #6b3fa0; }
.login-card button.plum:hover { background: #5b3488; border-color: #5b3488; }

/* =============================================== 14. gestão (M8) ===
   Usuários e Perfis com a linguagem do 1Doc traduzida para o HUB: avatar,
   busca sobre tabela, modal <dialog> com abas, chips e cartões de permissão.
   Tudo em tokens; teal = cromo, azul = ação. O modal é melhoria progressiva —
   sem JS o <dialog> abre por :target (bloco em fluxo, sem backdrop). */

/* avatar por iniciais — cromo, aria-hidden na marcação */
.avatar {
    flex: none; width: 34px; height: 34px; border-radius: var(--r-pill);
    display: grid; place-items: center; color: var(--avatar-txt);
    font-weight: 700; font-size: var(--t-xs); letter-spacing: .02em; user-select: none;
}
.avatar--c0 { background: var(--avatar-0); } .avatar--c1 { background: var(--avatar-1); }
.avatar--c2 { background: var(--avatar-2); } .avatar--c3 { background: var(--avatar-3); }
.avatar--c4 { background: var(--avatar-4); } .avatar--c5 { background: var(--avatar-5); }
.avatar--c6 { background: var(--avatar-6); }

/* célula de usuário (avatar + nome/e-mail) */
.usuario-cel { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.usuario-cel__id { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.usuario-cel__id .cod { font-size: var(--t-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vazio-inline { color: var(--ink-3); font-size: var(--t-sm); }
.pequeno { padding: 5px 10px; font-size: var(--t-xs); }

/* modal nativo */
dialog.modal {
    width: 100%; max-width: 560px; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2);
}
dialog.modal.modal--largo { max-width: 680px; }
dialog.modal::backdrop { background: rgba(16,24,40,.45); }
/* fallback sem JS: :target mostra em bloco (o showModal do hub.js cuida do resto) */
dialog.modal:target { display: block; }
.modal__topo {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--surface-2);
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.modal__titulo { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-lg); }
.modal__icone { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--brand-wash); color: var(--brand-ink); font-weight: 800; }
.modal__fechar { text-decoration: none; color: var(--ink-2); font-size: 22px; line-height: 1; padding: 0 6px; border-radius: var(--r-sm); }
.modal__fechar:hover { color: var(--ink); background: var(--surface-3); }
.modal__abas { margin: 0; padding: 0 var(--s5); border-bottom: 1px solid var(--line); }
.modal__abas button {
    background: none; border: none; border-bottom: 2px solid transparent; margin: 0;
    color: var(--ink-2); padding: 10px var(--s3); font-size: var(--t-md); font-family: var(--sans); cursor: pointer; border-radius: 0;
}
.modal__abas button:hover { color: var(--ink); }
.modal__abas button.ativo { color: var(--accent-ink); font-weight: 600; border-bottom-color: var(--accent); }
.modal__corpo { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); max-height: 70vh; overflow: auto; }
.modal__painel { display: flex; flex-direction: column; gap: var(--s4); }
.modal__rodape-perigo { padding: var(--s3) var(--s5) var(--s5); border-top: 1px solid var(--line); text-align: right; }
.form-acoes.espalhado { justify-content: space-between; }

/* ficha chave-valor (aba Dados) */
.ficha { display: grid; gap: var(--s3); margin: 0; }
.ficha > div { display: grid; grid-template-columns: 130px 1fr; gap: var(--s3); align-items: baseline; }
.ficha dt { color: var(--ink-2); font-size: var(--t-sm); }
.ficha dd { margin: 0; }
.bloco-recolhivel { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s4); }
.bloco-recolhivel summary { cursor: pointer; font-weight: 600; color: var(--brand-ink); }
.bloco-recolhivel .linha-form { margin-top: var(--s3); }

.lista-acessos { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.lista-acessos li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }

/* cartões de permissão */
.perm-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.perm-card__topo { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface-3); }
.perm-card__nome { font-weight: 600; }
.perm-card__topo .link { margin: 0; font-size: var(--t-xs); }
.perm-card__nota { margin: 0; padding: var(--s2) var(--s4) 0; color: var(--ink-2); font-size: var(--t-xs); }
.perm-card__corpo { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); }
.perm-status { margin-left: auto; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.perm-status--ok { color: var(--ok); }
.perm-status--alerta { color: var(--warn); }
.perm-status--neutro { color: var(--ink-3); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); margin: 0; cursor: pointer; }
.chk input { width: auto; margin: 0; }