:root {
      --bg-main: #09090b;
      --bg-sidebar: #121214;
      --bg-card: #18181b;
      --bg-card-hover: #1f1f23;
      --border-color: #27272a;
      --text-main: #fafafa;
      --text-muted: #c2c2c9;
      --accent: #6366f1;
      --accent-bg: rgba(99, 102, 241, 0.1);
          --accent-hover: #4f46e5;
      --accent-claro: #818cf8;
      /* Turquesa da marca, tirado do próprio public/logo.png. Serve de fundo
         atrás da logo enquanto ela carrega. */
      --marca: #1bbcc6;
      --danger: #f43f5e;
      --success: #10b981;
      --warning: #f59e0b;
      --info: #3b82f6;
      --neutro: #6b7280;
      /* Cor do Administrador principal, que é a coluna `is_admin` e não um
         setor. O --role-dev vizinho saiu daqui: era um token com nome de
         setor da semente, usado como cor genérica de badge. */
      --role-admin: #ec4899;
      --input-bg: #0b0b0d;
      --radius: 12px;
      --radius-sm: 8px;
    }

    body.light-theme {
      /* O fundo precisa ser nitidamente mais escuro que o branco das peças
         de vidro, senão branco sobre branco some. */
      --bg-main: #e8eaee;
      --bg-sidebar: #dfe2e8;
      --bg-card: #ffffff;
      --bg-card-hover: #f1f2f5;
      --border-color: #c9ccd4;
      --text-main: #09090b;
      --text-muted: #52525b;
      --input-bg: #ffffff;
      --accent: #4f46e5;
      --accent-bg: rgba(79, 70, 229, 0.08);
      --accent-hover: #4338ca;
      --accent-claro: #4f46e5;

      /* As cores de estado do tema escuro não passam em contraste AA sobre
         fundo branco; aqui elas escurecem. */
      --danger: #be123c;
      --success: #047857;
      --warning: #b45309;
      --info: #1d4ed8;
      --neutro: #4b5563;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
    }

    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    /* ---- VIDRO LÍQUIDO -------------------------------------------------
       Superfície translúcida que desfoca e satura o que está atrás, sem cor
       própria. No tema claro a transparência sozinha sumiria contra o branco:
       o que faz a peça aparecer é a refração - `brightness` abaixo de 1
       escurece de leve o que está atrás (a lente), o aro branco marca a borda
       e a sombra descola do fundo. Também está em style.css e
       informacoes.css. */
    .theme-toggle-btn,
    .config-card,
    .table-container,
    .btn-logout {
      position: relative;
      background-color: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 2px 10px rgba(0, 0, 0, 0.18);
    }

    body.light-theme .theme-toggle-btn,
    body.light-theme .config-card,
    body.light-theme .table-container,
    body.light-theme .btn-logout {
      background-color: rgba(255, 255, 255, 0.55);
      border-color: rgba(255, 255, 255, 0.9);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04),
        0 2px 10px rgba(9, 9, 11, 0.1),
        0 0 0 1px rgba(9, 9, 11, 0.12);
    }

    /* CUSTO: o desfoque fica só nos botões da barra, que são três. Os cards e
       as tabelas ficam com a cor translúcida, o aro e a sombra, sem
       backdrop-filter: uma aba do painel chega a treze deles abertos ao mesmo
       tempo, cada um virando uma composição de GPU do tamanho do card, e era
       o que segurava o FPS. Eles ficam sobre um fundo chapado, onde o
       desfoque quase não aparece - o mesmo raciocínio de public/css/vidro.css
       para campos e checkboxes. Modal, diálogo e toast continuam com blur:
       aparecem um por vez e ficam sobre o conteúdo. */
    .theme-toggle-btn,
    .btn-logout {
      backdrop-filter: blur(14px) saturate(180%);
      -webkit-backdrop-filter: blur(14px) saturate(180%);
    }

    body.light-theme .theme-toggle-btn,
    body.light-theme .btn-logout {
      backdrop-filter: blur(14px) saturate(190%) brightness(0.97);
      -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(0.97);
    }

    /* A barra superior global e o carregando da troca de aba saíram desta folha
       para public/css/navegacao.css, compartilhada pelas quatro telas. Estavam
       copiados aqui, em admin.css e em informacoes.css. */

    /* O cartão de login saiu daqui junto com o formulário do painel: quem
       autentica é public/index.html, e o cartão dele vive em style.css.
       `.btn-login`, `.campo-label`, `.input-field` e `.error-msg` FICAM - são
       usados pelos formulários do próprio painel. */

    /* Rótulo de campo de formulário. O placeholder some assim que o usuário
       digita, então o nome do campo precisa estar fora dele. */
    .campo-label {
      display: block;
      text-align: left;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .input-field {
      width: 100%;
      padding: 11px 15px;
      border-radius: var(--radius-sm);
      font-family: inherit;
      color: var(--text-main);
      font-size: 0.82rem;
      outline: none;
      margin-bottom: 16px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    }

    /* Mesma peça de vidro tingido de `.btn-action`, e pela mesma razão: era
       o outro `--accent-gradient` do painel. Os dois botões que ainda usam
       esta classe (Excluir Tudo e Resetar Banco) trazem `background` inline
       em `--danger`/`--warning`, que continua vencendo a tinta daqui - eles
       só ganham o aro e o brilho. */
    .btn-login {
      position: relative;
      width: 100%;
      padding: 11px;
      background-color: rgba(99, 102, 241, 0.28);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius-sm);
      color: #fff;
      font-weight: 700;
      font-size: 0.82rem;
      cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 2px 10px rgba(0, 0, 0, 0.16);
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    }

    .btn-login:hover {
      background-color: rgba(99, 102, 241, 0.42);
      border-color: rgba(255, 255, 255, 0.28);
    }

    body.light-theme .btn-login {
      background-color: rgba(79, 70, 229, 0.75);
      border-color: rgba(255, 255, 255, 0.45);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 10px rgba(9, 9, 11, 0.15);
    }

    body.light-theme .btn-login:hover {
      background-color: rgba(79, 70, 229, 0.9);
    }

    .error-msg {
      color: var(--danger);
      font-size: 0.78rem;
      font-weight: 600;
      margin-top: 12px;
      display: none;
    }

    /* DASHBOARD VIEW */
    .dashboard-container {
      display: none;
      flex: 1;
      height: 100%;
      overflow: hidden;
      flex-direction: column;
    }

    /* HEADER STYLING FROM REFERENCE */
    .dash-header {
      background-color: var(--bg-sidebar);
      border-bottom: 1px solid var(--border-color);
      /* O padding de cima vem de marca.css: é ele que põe a logo na mesma
         linha horizontal das outras abas. */
      padding: var(--marca-topo) 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    /* O nome, a legenda e a logo do cabeçalho vêm de public/css/marca.css. */

    .dash-header .title-area p {
      color: var(--text-muted);
      font-size: 0.78rem;
      margin-top: 0.15rem;
    }

    .header-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    /* Premium Compact Buttons styling adapted from reference */
    /* Fundo e borda destes dois vêm do bloco de vidro líquido lá em cima;
       aqui fica só a forma e o texto. O "Sair" mantém a cor de perigo no
       texto, que é o que identifica a ação. */
    .theme-toggle-btn {
      color: var(--text-muted);
      border-radius: 12px;
      padding: 0.5rem;
      font-size: 0.9rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .btn-logout {
      color: var(--danger);
      border-radius: 12px;
      padding: 0.5rem 1rem;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      height: 34px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .theme-toggle-btn:hover,
    .btn-logout:hover {
      background-color: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.28);
      transform: scale(1.05);
    }

    .theme-toggle-btn:hover {
      color: var(--text-main);
    }

    body.light-theme .theme-toggle-btn:hover,
    body.light-theme .btn-logout:hover {
      background-color: rgba(255, 255, 255, 0.8);
    }

    /* BODY LAYOUT */
    .dash-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* SIDEBAR */
    .dash-sidebar {
      width: 260px;
      background-color: var(--bg-sidebar);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      padding: 20px 16px;
      gap: 6px;
    }

    .sidebar-tab {
      position: relative;
      overflow: hidden;
      /* borda transparente desde o estado normal: no hover ela só troca de
         cor, sem empurrar o conteúdo do botão. */
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      cursor: pointer;
      font-weight: 600;
      font-size: 0.8rem;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    }

    /* Sem backdrop-filter: aplicado no :hover, ele fazia o navegador criar
       uma composição nova a cada vez que o ponteiro entrava numa aba - uma
       engasgada por passagem do mouse. */
    .sidebar-tab:hover,
    .sidebar-tab.active {
      background-color: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.14);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 2px 10px rgba(0, 0, 0, 0.18);
    }

    body.light-theme .sidebar-tab:hover,
    body.light-theme .sidebar-tab.active {
      background-color: rgba(255, 255, 255, 0.75);
      border-color: rgba(255, 255, 255, 0.95);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 2px 10px rgba(9, 9, 11, 0.1),
        0 0 0 1px rgba(9, 9, 11, 0.1);
    }

    .sidebar-tab:hover {
      color: var(--text-main);
      transform: scale(1.02);
    }

    .sidebar-tab.active {
      color: var(--accent);
    }

    /* Anel invisível: mantém a área do mouse maior que o botão, para o
       crescimento não derrubar o hover. Igual ao das abas de Informações. */
    .sidebar-tab::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
      .sidebar-tab:hover {
        transform: none;
      }
    }

    /* CONTENT AREA */
    .dash-content {
      flex: 1;
      padding: 24px 32px;
      overflow-y: auto;
      background-color: var(--bg-main);
    }

    .tab-pane {
      display: none;
    }

    .tab-pane.active {
      display: block;
    }

    .pane-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 12px;
    }

    .pane-header h2 {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* Vidro tingido de roxo: a cor da marca aparece pela transparência, em vez
       do bloco chapado de antes. */
    .btn-action {
      position: relative;
      color: #fff;
      border-radius: var(--radius-sm);
      padding: 0.5rem 0.9rem;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background-color: rgba(99, 102, 241, 0.28);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 2px 10px rgba(0, 0, 0, 0.16);
      transition: background-color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .btn-action:hover {
      background-color: rgba(99, 102, 241, 0.42);
      border-color: rgba(255, 255, 255, 0.28);
    }

    body.light-theme .btn-action {
      background-color: rgba(79, 70, 229, 0.75);
      border-color: rgba(255, 255, 255, 0.45);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 10px rgba(9, 9, 11, 0.15);
    }

    body.light-theme .btn-action:hover {
      background-color: rgba(79, 70, 229, 0.9);
    }

    /* Ações da tabela: pastilhas de vidro, não palavras soltas coloridas. */
    .link-edit,
    .link-delete {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: var(--radius-sm);
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.07);
      transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease;
    }

    body.light-theme .link-edit,
    body.light-theme .link-delete {
      background-color: rgba(255, 255, 255, 0.35);
      border-color: rgba(9, 9, 11, 0.06);
    }

    .link-edit:hover {
      background-color: rgba(99, 102, 241, 0.12);
      border-color: rgba(99, 102, 241, 0.28);
    }

    .link-delete:hover {
      background-color: rgba(244, 63, 94, 0.1);
      border-color: rgba(244, 63, 94, 0.26);
    }

    /* Quadradinho de cor: vidro por fora, a cor do setor por dentro. Clicar
       copia o código; o retorno visual vem do atributo data-copiado. */
    .cor-chip {
      position: relative;
      display: inline-block;
      width: 22px;
      height: 22px;
      border-radius: 7px;
      cursor: pointer;
      /* a cor do setor entra por style inline; o vidro é este verniz por cima */
      border: 1px solid rgba(255, 255, 255, 0.28);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .cor-chip:hover {
      border-color: rgba(255, 255, 255, 0.55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 3px rgba(255, 255, 255, 0.08);
    }

    /* Confirmação de cópia: um "v" branco por cima da própria cor. */
    .cor-chip[data-copiado="1"]::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 7px;
      width: 4px;
      height: 9px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(45deg);
    }

    /* TABLES */
    .table-container {
      border-radius: var(--radius);
      overflow: hidden;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 0.82rem;
    }

    th {
      background-color: rgba(0, 0, 0, 0.2);
      padding: 14px 16px;
      font-weight: 700;
      color: #fff;
      border-bottom: 1px solid var(--border-color);
      text-transform: uppercase;
      font-size: 0.72rem;
      letter-spacing: 0.5px;
    }

    body.light-theme th {
      background-color: rgba(0, 0, 0, 0.03);
      color: var(--text-main);
    }

    td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-muted);
    }

    tr:last-child td {
      border-bottom: none;
    }

    tr:hover td {
      background-color: rgba(255, 255, 255, 0.02);
      color: var(--text-main);
    }

    body.light-theme tr:hover td {
      background-color: rgba(0, 0, 0, 0.01);
    }

    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 6px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .badge-active {
      background-color: rgba(16, 185, 129, 0.15);
      color: var(--success);
      border: 1px solid rgba(16, 185, 129, 0.25);
    }

    .badge-inactive {
      background-color: rgba(244, 63, 94, 0.15);
      color: var(--danger);
      border: 1px solid rgba(244, 63, 94, 0.25);
    }

    /* AUDITORIA: seletor de visão e leitura de conversa */
    .auditoria-visoes {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .auditoria-visao {
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      color: var(--text-muted);
      background-color: transparent;
      border: 1px solid var(--border-color);
      transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    }

    .auditoria-visao:hover {
      color: var(--text-main);
      background-color: var(--bg-card-hover);
    }

    .auditoria-visao.ativa {
      color: var(--accent-claro);
      background-color: var(--accent-bg);
      border-color: var(--accent);
    }

    body.light-theme .auditoria-visao.ativa {
      color: var(--accent-hover);
    }

    .conversa-mensagem {
      border-radius: 12px;
      padding: 10px 14px;
      margin-bottom: 10px;
      font-size: 0.82rem;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-word;
      border: 1px solid var(--border-color);
      background-color: var(--bg-card);
      color: var(--text-main);
    }

    .conversa-mensagem.pergunta {
      border-color: var(--accent);
      background-color: var(--accent-bg);
    }

    .conversa-autor {
      display: block;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    /* SAÚDE DO SERVIDOR (aba Ferramentas) */
    .saude-linha {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      font-size: 0.78rem;
      padding: 3px 0;
    }

    .saude-linha .saude-rotulo {
      color: var(--text-muted);
    }

    .saude-linha .saude-valor {
      color: var(--text-main);
      font-weight: 600;
      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      text-align: right;
      word-break: break-all;
    }

    /* A cor da barra vem do valor medido, não de decoração: verde até 75%,
       âmbar até 90%, vermelho acima. */
    .saude-barra {
      height: 6px;
      border-radius: 4px;
      background-color: var(--input-bg);
      overflow: hidden;
      margin-top: 6px;
    }

    body.light-theme .saude-barra {
      background-color: rgba(0, 0, 0, 0.08);
    }

    .saude-barra>span {
      display: block;
      height: 100%;
      border-radius: 4px;
      background-color: var(--success);
      transition: width 0.3s ease;
    }

    .saude-barra.atencao>span {
      background-color: var(--warning);
    }

    .saude-barra.critico>span {
      background-color: var(--danger);
    }

    @media (prefers-reduced-motion: reduce) {
      .saude-barra>span {
        transition: none;
      }
    }

    .action-links {
      display: flex;
      gap: 12px;
    }

    .link-edit {
      color: var(--accent);
    }

    .link-delete {
      color: var(--danger);
    }

    /* CONFIG CARDS & CATEGORIES */
    .config-category-group {
      background-color: rgba(255, 255, 255, 0.015);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    body.light-theme .config-category-group {
      background-color: rgba(0, 0, 0, 0.01);
    }

    .config-category-header {
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--border-color);
    }

    .config-category-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .config-category-desc {
      font-size: 0.76rem;
      color: var(--text-muted);
      margin-top: 4px;
      line-height: 1.4;
    }

    .config-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 0.75rem;
    }

    .config-card {
      border-radius: var(--radius);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      transition: border-color 0.2s, background-color 0.2s;
    }

    .config-card:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    body.light-theme .config-card:hover {
      background-color: rgba(255, 255, 255, 0.65);
    }

    .config-title {
      font-weight: 700;
      font-size: 0.82rem;
      color: var(--text-main);
    }

    .config-desc {
      font-size: 0.7rem;
      color: var(--text-muted);
      line-height: 1.3;
    }

    .config-card .input-field {
      margin-bottom: 0;
      margin-top: 4px;
    }

    /* FORMS & MODALS */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* O desfoque do fundo é feito pelo card (uma composição em vez de duas
         empilhadas); aqui só o escurecimento. */
      background-color: rgba(7, 10, 19, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      /* visibility tira o overlay da composicao quando fechado; sem isso os 7
         overlays continuam com o backdrop-filter ativo e travam o hover da tela */
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }

    .modal-overlay.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.25s ease, visibility 0s linear 0s;
    }

    /* Vidro líquido, com o único backdrop-filter da cena. */
    .modal-card {
      background-color: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(16px) saturate(170%);
      -webkit-backdrop-filter: blur(16px) saturate(170%);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: var(--radius);
      width: 100%;
      max-width: 600px;
      /* isola o repaint do modal do resto da página */
      contain: paint;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 25px 60px rgba(0, 0, 0, 0.45);
      display: flex;
      flex-direction: column;
      max-height: 90vh;
      padding: 0;
    }

    .modal-header {
      padding: 18px 24px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .modal-header h3 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text-main);
    }

    .modal-close-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 24px;
      cursor: pointer;
      transition: color 0.15s;
    }

    .modal-close-btn:hover {
      color: var(--text-main);
    }

    .modal-body {
      padding: 24px;
      overflow-y: auto;
    }

    .modal-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-group label {
      display: block;
      font-size: 0.78rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text-muted);
    }

    .checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 0.78rem;
      color: var(--text-main);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      border-radius: var(--radius-sm);
      padding: 0.5rem 0.9rem;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-main);
    }

    body.light-theme .btn-secondary {
      background: rgba(0, 0, 0, 0.03);
    }

    body.light-theme .btn-secondary:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    /* Toast / Alert styling from reference */
    .alert {
      padding: 12px 16px;
      border-left: 4px solid var(--accent);
      border-radius: var(--radius-sm);
      font-size: 0.78rem;
      margin-bottom: 20px;
      display: none;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      background-color: var(--bg-card);
    }

    .alert-success {
      border-left-color: var(--success);
      color: var(--success);
      background-color: rgba(16, 185, 129, 0.05);
    }

    .alert-error {
      border-left-color: var(--danger);
      color: var(--danger);
      background-color: rgba(244, 63, 94, 0.05);
    }

/* Reflexo dos elementos ao abrir uma aba do painel: a faixa de luz atravessa
   o cabeçalho, as tabelas e os cards. A animação (vidro-reflexo-elemento) vem
   de vidro.css e só existe enquanto o painel tem .active, então trocar de aba
   a reinicia sozinha. */
.tab-pane.active .pane-header,
.tab-pane.active .table-container,
.tab-pane.active .config-card {
  position: relative;
  /* segura a faixa dentro do próprio bloco */
  overflow: hidden;
}

.tab-pane.active .pane-header::after,
.tab-pane.active .table-container::after,
.tab-pane.active .config-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.13) 50%,
      rgba(255, 255, 255, 0) 65%);
  animation: vidro-reflexo-elemento 0.9s ease-out 1 both;
}

body.light-theme .tab-pane.active .pane-header::after,
body.light-theme .tab-pane.active .table-container::after,
body.light-theme .tab-pane.active .config-card::after {
  background: linear-gradient(105deg,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0) 65%);
}

/* Escadinha entre os cards de configuração. */
.tab-pane.active .config-card:nth-child(2)::after {
  animation-delay: 0.08s;
}

.tab-pane.active .config-card:nth-child(3)::after {
  animation-delay: 0.16s;
}

.tab-pane.active .config-card:nth-child(n + 4)::after {
  animation-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {

  .tab-pane.active .pane-header::after,
  .tab-pane.active .table-container::after,
  .tab-pane.active .config-card::after {
    display: none;
  }
}

body.light-theme .modal-card {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 25px 60px rgba(9, 9, 11, 0.18),
    0 0 0 1px rgba(9, 9, 11, 0.12);
}

body.light-theme .modal-overlay {
  background-color: rgba(9, 9, 11, 0.35);
}

/* ---- MATRIZ DE PERMISSÕES -------------------------------------------
   As duas matrizes do painel (documentação por canal e administrativa)
   deixaram de usar peça nativa do navegador: checkbox, barra de rolagem e
   os botões "Marcar Todos" agora são de vidro, como o resto da tela.

   Vale para `.matriz-canal` (setor × vínculo × cargo) e `.matriz-admin`
   (setor × cargo × recurso). O HTML de cada célula é gerado por
   renderizarMatrizPermissoes() e renderizarMatrizAdmin(), em
   public/js/admin.js. */

/* A moldura rolável. A barra nativa (cinza, quadrada, colada no fundo
   branco) era o que mais destoava; esta é fina, arredondada e translúcida. */
.matriz-scroll {
  overflow-x: auto;
  width: 100%;
  /* Firefox: só aceita cor + espessura, não desenha peça. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.matriz-scroll::-webkit-scrollbar {
  height: 10px;
}

.matriz-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.matriz-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.18);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.matriz-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

body.light-theme .matriz-scroll {
  scrollbar-color: rgba(9, 9, 11, 0.22) transparent;
}

body.light-theme .matriz-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(9, 9, 11, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.light-theme .matriz-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(9, 9, 11, 0.28);
}

/* ---- A GRADE --------------------------------------------------------- */

.matriz-tabela {
  min-width: 100%;
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0;
}

/* As linhas separadoras da tabela vinham de --border-color (chapada); sobre
   vidro o que funciona é a linha branca translúcida. */
.matriz-tabela th,
.matriz-tabela td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-theme .matriz-tabela th,
body.light-theme .matriz-tabela td {
  border-bottom-color: rgba(9, 9, 11, 0.08);
}

.matriz-tabela tbody tr:last-child td {
  border-bottom: none;
}

.matriz-tabela thead th {
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body.light-theme .matriz-tabela thead th {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Cabeçalho do canal/recurso: era um retângulo roxo chapado. */
.matriz-cabecalho-grupo {
  text-align: center;
  font-weight: 700;
  color: var(--accent-claro);
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

body.light-theme .matriz-cabecalho-grupo {
  color: var(--accent);
  background-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.matriz-cabecalho-cargo {
  text-align: center;
  font-size: 11px;
  min-width: 118px;
  padding: 8px 12px;
}

/* As duas primeiras colunas ficam paradas na rolagem horizontal: sem isso
   se perde de vista qual setor está sendo marcado.

   CUSTO: aqui NÃO entra backdrop-filter. Cada elemento com backdrop-filter
   vira uma composição de GPU própria, e estas células existem às dezenas
   (duas por linha) - foi o que derrubou o FPS da aba. O desfoque do painel
   já vem de .table-container; a coluna congelada só precisa de fundo opaco
   para esconder o que passa rolando por baixo. */
.matriz-tabela .matriz-col-setor,
.matriz-tabela .matriz-col-recurso {
  position: sticky;
  z-index: 2;
  background-color: var(--bg-card);
}

.matriz-tabela .matriz-col-setor {
  left: 0;
  min-width: 150px;
}

.matriz-tabela .matriz-col-recurso {
  left: 150px;
  min-width: 260px;
  /* Marca onde a área congelada termina e a rolagem começa. */
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
}

.matriz-tabela thead .matriz-col-setor,
.matriz-tabela thead .matriz-col-recurso {
  z-index: 3;
}

body.light-theme .matriz-tabela .matriz-col-recurso {
  box-shadow: 1px 0 0 rgba(9, 9, 11, 0.1);
}

/* A linha do documento principal era tingida de azul; agora é um degrau de
   vidro, um pouco mais claro que as linhas dos vínculos. */
.matriz-linha-principal > td {
  background-color: rgba(255, 255, 255, 0.045);
}

.matriz-linha-principal > td.matriz-col-setor,
.matriz-linha-principal > td.matriz-col-recurso {
  background-color: var(--bg-card-hover);
}

body.light-theme .matriz-linha-principal > td {
  background-color: rgba(255, 255, 255, 0.35);
}

.matriz-tabela tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0.07);
}

.matriz-tabela tbody tr:hover > td.matriz-col-setor,
.matriz-tabela tbody tr:hover > td.matriz-col-recurso {
  background-color: var(--bg-card-hover);
}

body.light-theme .matriz-tabela tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0.5);
}

.matriz-setor-nome {
  font-weight: 700;
  color: var(--text-main);
}

/* Rótulo do recurso, com o botão da linha à direita. */
.matriz-recurso {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.matriz-recurso-nome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.matriz-linha-principal .matriz-recurso-nome {
  color: var(--accent-claro);
  font-weight: 700;
}

body.light-theme .matriz-linha-principal .matriz-recurso-nome {
  color: var(--accent);
}

.matriz-linha-vinculo .matriz-recurso-nome {
  color: var(--text-muted);
  padding-left: 8px;
}

.matriz-celula {
  text-align: center;
}

/* ---- BOTÃO "MARCAR TODOS" ------------------------------------------- */

/* Era um <button> com estilo inline (fundo 4% e borda chapada) repetido em
   quatro lugares do admin.js. */
.matriz-btn-todos {
  padding: 3px 9px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.matriz-btn-todos:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
}

/* Quando a linha já está toda marcada, o botão desmarca - e fica apagado,
   para o estado ficar visível antes do clique. */
.matriz-btn-todos-desmarcar {
  color: var(--text-muted);
}

body.light-theme .matriz-btn-todos {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(9, 9, 11, 0.08);
}

body.light-theme .matriz-btn-todos:hover {
  background-color: rgba(255, 255, 255, 0.85);
}

.matriz-btn-todos:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- O CHECKBOX ------------------------------------------------------ */

/* A caixinha nativa não aceita cor nem raio e muda de desenho a cada
   sistema. Esta é uma peça de vidro; o "v" é a borda de um retângulo
   girado, mesmo truque de .checkbox-label em public/css/vidro.css. */
.matriz-check {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  /* Sem box-shadow na transição: sombra animada repinta a cada quadro, e
     são dezenas de caixas na tela. */
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.12s ease;
}

body.light-theme .matriz-check {
  background-color: rgba(255, 255, 255, 0.65);
  border-color: rgba(9, 9, 11, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}

.matriz-check:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

body.light-theme .matriz-check:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(9, 9, 11, 0.32);
}

.matriz-check:active {
  transform: scale(0.92);
}

.matriz-check:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(99, 102, 241, 0.35),
    0 2px 8px rgba(99, 102, 241, 0.3);
}

.matriz-check:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.matriz-check:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.matriz-check:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ---- ABA TESTES DE PERMISSÃO (public/js/admin.js) ------------------- */

.testes-cartao {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

/* Os controles ficam numa linha só enquanto couberem; abaixo de 900px cada um
   ocupa a largura inteira, que é como o resto do painel se comporta. */
.testes-controles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}

.testes-controles .form-group {
  margin-bottom: 0;
}

/* O botão fica na linha dos campos sem um <label> vazio só para empurrá-lo:
   rótulo sem campo associado é ruído para leitor de tela. */
.testes-acao {
  display: flex;
  align-items: flex-end;
}

/* Mesma aparência de um rótulo de campo, mas para um grupo de campos: não é
   <label>, porque label sem campo associado só atrapalha o leitor de tela. */
.testes-rotulo-grupo {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-muted);
}

.testes-vinculo-linha {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.testes-vinculo-linha select {
  flex: 1;
}

.testes-secao {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.testes-secao h3 {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--text-main);
}

.testes-secao-ajuda {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.testes-aviso {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-main);
  background-color: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* Conferência de formulário: fica recolhida porque é opcional - a pergunta
   principal da tela é permissão, e isto é a segunda peneira. */
.testes-conferencia {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.testes-conferencia summary {
  list-style: none;
}

.testes-conferencia summary::-webkit-details-marker {
  display: none;
}

.testes-conferencia summary::before {
  content: '▸ ';
}

.testes-conferencia[open] summary::before {
  content: '▾ ';
}

/* Agrupamento da aba de Permissões: o que se ajusta toda semana em cima, o
   que muda a cadeia de escalada embaixo e fechado. A separação é visual
   porque a consequência é diferente - errar na matriz de documentos tira ou
   dá acesso hoje, e se percebe; errar na de delegação amplia quem consegue
   ampliar o alcance dos outros, e só aparece depois. */
.grupo-permissoes-rotulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.grupo-permissoes-rotulo span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.grupo-permissoes-rotulo small {
  font-size: 12px;
  color: var(--text-muted);
}

.grupo-permissoes-avancado {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.grupo-permissoes-avancado > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.grupo-permissoes-avancado > summary::-webkit-details-marker {
  display: none;
}

.grupo-permissoes-avancado > summary::before {
  content: '▸';
  color: var(--text-muted);
}

.grupo-permissoes-avancado[open] > summary::before {
  content: '▾';
}

.grupo-permissoes-avancado-titulo {
  font-size: 14px;
  font-weight: 700;
}

.grupo-permissoes-avancado > summary small {
  font-size: 12px;
  color: var(--text-muted);
}

/* Contador de pendências na barra lateral.
   Só aparece quando há o que resolver: aba sem pendência não ganha elemento
   nenhum, para o olho aprender que qualquer marca ali significa alguma coisa.
   A cor vem do backend (crítico x atenção) e nunca é o único sinal - o número
   e o `title` dizem o mesmo, para quem não distingue as duas. */
.sidebar-tab {
  position: relative;
}

.tab-pendencias {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  flex-shrink: 0;
}

.tab-pendencias-critico {
  background: var(--danger);
}

.tab-pendencias-atencao {
  background: var(--warning, #b45309);
}

/* Detalhe das pendências, no topo da aba. Reaproveita `.testes-aviso`, que
   já tem a marca de atenção - o que muda aqui é só o espaçamento do bloco. */
.pendencias-aba {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A aba é um flex row para o contador poder ir para a direita com
   `margin-left: auto`. */
.dash-sidebar .sidebar-tab {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Resposta do motor: verde para permitido, vermelho para negado. Sem depender
   só da cor - cada uma vem com o próprio símbolo e texto. */
.testes-resposta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.testes-resposta-sim {
  color: var(--success);
}

.testes-resposta-nao {
  color: var(--text-muted);
}

/* Lista (setor, cargo, o que se pode conceder) é informação, não veredito:
   usa chip neutro. O sim/não fica na coluna de resposta, que é onde a cor
   significa alguma coisa. */
.testes-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background-color: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.testes-escopo {
  font-size: 11px;
  color: var(--text-muted);
}

.testes-vazio {
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px 0;
}