/* =========================================================================
   PORTAL DE AUDITORIA - SO Consultoria e Negócios Ltda.
   Aparência da tela de senha e da tela de documentos.
   ========================================================================= */

:root {
    --page-bg: #f3f6f8;
    --surface: #fff;
    --surface-soft: #f8fafb;
    --text: #183036;
    --muted: #66777c;
    --line: #dce5e8;
    --brand: #007b7b;
    --brand-dark: #005e60;
    --brand-soft: #e6f5f4;
    --excel: #167d48;
    --excel-soft: #edf8f1;
    --zip-soft: #fff5e6;
    --pdf: #a52a2a;
    --pdf-soft: #fff1f1;
    --gestao: #173f67;
    --gestao-soft: #eef4fb;
    /* ⚠️ O CABEÇALHO FICOU CLARO DE VERDADE (v45), e isso obrigou a VIRAR A
       LETRA. Enquanto o fundo era escuro com texto branco, "mais claro" tinha
       um teto baixo: a partir de certo ponto o branco deixa de ser legível, e
       a v44 parou nesse teto sem chegar a parecer clara. Fundo claro com letra
       escura não tem esse teto, e é o que dá o tom leve pedido.
       ⚠️ E UM PASSO MAIS ESCURO NA v46, a pedido. Medido na ponta mais escura
       do degradê, que é onde o contraste aperta: o título dá 10,3 e o
       subtítulo 5,5, ambos acima do mínimo de 4,5 para texto pequeno. Um
       passo além deste (#bcdbdf na ponta) derruba o subtítulo para 4,4, e aí
       a letra teria que escurecer junto. */
    --hero-de: #dceef0;
    --hero-ate: #c9e3e6;
    --hero-texto: #183036;
    --hero-suave: #46595f;
    --hero-linha: #b3d4d9;
    --perigo: #b42323;
    --shadow: 0 12px 35px rgba(27, 62, 70, .10);
    --radius: 18px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background: radial-gradient(circle at top right, rgba(0,123,123,.10), transparent 32rem), var(--page-bg);
    font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; }

/* =========================================================================
   TELA DE SENHA
   ========================================================================= */

body.tela-login {
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at top right, rgba(0,123,123,.14), transparent 32rem),
        var(--page-bg);
}
.login-card {
    width: min(500px, 100%);
    padding: 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 35px rgba(27,62,70,.12);
}
/* ⚠️ O LOGO TEM 287x100, proporção 2,87:1.
   A caixa recebe LARGURA e deixa a altura vir da imagem. Fixar as duas, como
   era antes, dava uma caixa de proporção diferente da do arquivo, e a imagem
   vazava por baixo: com `height:auto` o `object-fit` não recorta nada. */
.login-card .logo { width: min(287px, 100%); margin: 0 auto 22px; }
/* ⚠️ LIMITADO PELA ALTURA, E NÃO SÓ PELA LARGURA. O logo do cliente é trocado
   pela própria tela de gestão, então a proporção dele é imprevisível: um logo
   alto e estreito esticado a 287 px de largura empurrava o formulário para
   fora da tela. Com o teto de altura e o `object-fit`, qualquer proporção cabe
   sem distorcer. */
.login-card .logo img { display: block; width: 100%; max-height: 110px; height: auto; object-fit: contain; }
.login-card h1 { margin: 0; text-align: center; font-size: 25px; }
.login-card p { margin: 9px 0 24px; color: var(--muted); text-align: center; line-height: 1.45; }
.company-info {
    margin: 16px 0 20px;
    padding: 15px 14px;
    color: #52656a;
    background: var(--surface-soft);
    border: 1px solid #e1e8ea;
    border-radius: 11px;
    font-size: 13px;
    font-style: normal;
    line-height: 1.55;
    text-align: center;
}
.company-info strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 14px; }
.login-instruction { margin: 0 0 20px; }
.login-card label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.login-card input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #cfdadd;
    border-radius: 10px;
    outline: none;
    font-size: 16px;
}
.login-card input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,123,123,.12); }
.login-card button {
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.login-card button:hover { background: var(--brand-dark); }
.error {
    margin: 0 0 16px;
    padding: 11px 13px;
    color: #9b1c1c;
    background: #fef2f2;
    border: 1px solid #efaaaa;
    border-radius: 9px;
    text-align: left;
    font-size: 13px;
}
.note { margin: 16px 0 0; font-size: 12px; }

/* =========================================================================
   TELA DE DOCUMENTOS
   ========================================================================= */

.page { width: min(1120px, calc(100% - 32px)); margin: 32px auto; }

.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
    color: var(--hero-texto);
    background: linear-gradient(135deg, var(--hero-de), var(--hero-ate));
    /* A borda entrou com o fundo claro: sem ela, o cabeçalho e o fundo da
       página, que também é claro, encostavam sem fronteira nenhuma. */
    border: 1px solid var(--hero-linha);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(27,62,70,.08);
}
.hero::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    right: -80px;
    top: -110px;
    /* Branco sobre fundo claro é invisível: o círculo virou um teal lavado,
       que é o que ainda se lê como marca d'água sem competir com o texto. */
    border: 34px solid rgba(0,123,123,.07);
    border-radius: 50%;
}
/* Mesma regra do logo da tela de senha: largura fixa, altura livre. */
.logo-wrap {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 152px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--hero-linha);
    border-radius: 11px;
    /* Sombra leve: a pesada era para destacar o branco do fundo escuro, e no
       fundo claro ela só sujava. */
    box-shadow: 0 2px 8px rgba(27,62,70,.07);
}
.logo-wrap img { display: block; width: 100%; height: auto; }
.hero-copy { position: relative; z-index: 1; }
.hero-acoes {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.hero-acoes form { margin: 0; }
/* Com o cabeçalho claro, os botões deixam de ser vidro translúcido e viram
   botões brancos de verdade, com a letra escura. */
.logout-button {
    min-height: 34px;
    padding: 6px 12px;
    color: var(--hero-texto);
    background: #fff;
    border: 1px solid var(--hero-linha);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.logout-button:hover { border-color: var(--brand); background: var(--brand-soft); }
/* O nome do cliente e a área ganham a cor da marca: no fundo claro, o
   `opacity` de antes os deixava quase apagados. */
.eyebrow { margin: 0 0 4px; color: var(--brand-dark); font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; }
.subtitle { margin: 5px 0 0; max-width: 680px; color: var(--hero-suave); font-size: 13px; line-height: 1.45; }

/* ── A chave entre Modo Padrão e Modo Gestão ──────────────────────────────
   Uma chave, e não um botão: ela mostra em que modo a sessão ESTÁ, além de
   servir para trocar. Um botão só diria o que acontece se for clicado. */
/* ⚠️ OS DOIS ESTADOS PRECISAVAM SER DIFERENTES DE LONGE (v44). Antes, a
   pastilha era a mesma nos dois e o trilho desligado era preto translúcido
   sobre um cabeçalho escuro: dava um verde-escuro que, ao lado do verde do
   ligado, parecia a mesma cor com a bolinha de lado. Agora muda a pastilha
   inteira, e não só a bolinha.

   ⚠️ DESLIGADO É CINZA, E NÃO VERMELHO. Vermelho é a cor do erro e do
   perigo, e o Modo Padrão é justamente o estado SEGURO, aquele em que
   nenhum clique apaga documento. Pintar de vermelho o estado seguro é a tela
   gritando quando não há nada errado, e some com a força do vermelho para
   quando ele for preciso de verdade (o botão de excluir).

   ⚠️ E O VERDE DO LIGADO FICOU LAVADO (v45). No cabeçalho escuro da v44, o
   verde cheio era o único jeito de o estado se ler de longe. Com o cabeçalho
   claro, ele virou a coisa mais berrante da tela, e um modo de trabalho não é
   um alarme. Verde claro com a letra verde escura se distingue igual do
   branco do desligado, e não disputa atenção com a lista. */
.modo-chave {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 10px;
    color: var(--hero-suave);
    background: #fff;
    border: 1px solid var(--hero-linha);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.modo-chave:hover { border-color: var(--brand); }
.modo-chave.is-ativa {
    color: #15674a;
    background: #e4f6ed;
    border-color: #8ad4b4;
}
.modo-chave.is-ativa:hover { background: #d7f1e4; border-color: #5cc295; }
/* A caixa de verdade fica escondida, e não apagada: escondida, ela continua
   recebendo o foco do teclado e o clique da etiqueta; com `display:none`
   perderia as duas coisas e a chave só funcionaria no mouse. */
.modo-chave input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.modo-trilho {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 18px;
    /* Cinza médio: agora tem que se ler sobre a pastilha BRANCA do
       desligado, e não mais sobre um cabeçalho escuro. */
    background: #a9b9bd;
    border-radius: 999px;
    transition: background .18s ease;
}
.modo-trilho::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s ease;
}
/* Ligado, o trilho leva o verde cheio: agora que a pastilha ao redor é
   clara, ele é a peça pequena que pode ser saturada sem incomodar. */
.modo-chave input:checked + .modo-trilho { background: #22a176; }
.modo-chave input:checked + .modo-trilho::after { background: #fff; }
.modo-chave input:checked + .modo-trilho::after { transform: translateX(14px); }
.modo-chave input:focus-visible + .modo-trilho { box-shadow: 0 0 0 3px rgba(0,123,123,.3); }
.modo-texto { font-size: 12px; font-weight: 700; white-space: nowrap; }
.modo-botao {
    min-height: 34px;
    padding: 6px 12px;
    color: var(--hero-texto);
    background: #fff;
    border: 1px solid var(--hero-linha);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.modo-botao:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ── A varredura do que veio por FTP ────────────────────────────────────
   Encostada embaixo da tabela de pastas, separada por uma linha: é do mesmo
   assunto, mas não é mais uma linha daquela tabela. */
.bloco-varredura {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #c3d5e8;
}
.bloco-varredura h3 { margin: 0 0 6px; font-size: 15px; }
.bloco-varredura form { margin: 12px 0 0; }
/* A promessa de que nada é apagado é o que faz o botão ser clicável sem medo,
   então ela não fica na cor de texto secundário como o resto da nota. */
.gestao-nota-firme { color: var(--gestao); font-weight: 700; }

/* ── Alterar logo: o link do cabeçalho e a faixa que ele abre ───────────
   ⚠️ DISCRETO DE PROPÓSITO. Ele divide a fila com "Clientes", a chave de modo
   e "Sair", que são as três coisas que se usam todo dia; esta se usa uma vez
   por cliente. Com o mesmo peso das outras, roubaria atenção a vida inteira
   para uma tarefa de um minuto. */
.logo-trocar {
    padding: 4px 9px;
    color: var(--hero-suave);
    background: none;
    border: 1px solid var(--hero-linha);
    border-radius: 8px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.logo-trocar:hover { color: var(--brand-dark); background: #fff; border-color: var(--brand); }

.faixa-logo {
    margin-top: 10px;
    padding: 12px 16px;
    background: var(--gestao-soft);
    border: 1px solid #c3d5e8;
    border-radius: 12px;
}
.faixa-logo[hidden] { display: none; }
.faixa-logo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* A miniatura aqui não tem a margem de cima que ela usava dentro da tabela:
   nesta faixa tudo está na mesma linha. */
.faixa-logo .logo-mini { margin-top: 0; max-height: 38px; }
.faixa-logo-nota { flex: 1 1 260px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.faixa-logo-fechar {
    padding: 7px 12px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.faixa-logo-fechar:hover { border-color: #b9dfdc; background: var(--brand-soft); }

.panel {
    margin-top: 22px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(220,229,232,.85);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ── A contagem ao lado do nome da pasta ───────────────────────────────
   ⚠️ O MENU DE PASTAS SAIU DAQUI NA v84 (`.menu-bar`, `.menu-item` e o
   `.submenu`): as pastas viraram a árvore da coluna da esquerda, e os estilos
   dela estão no fim deste arquivo, em "A TELA EM TRÊS ZONAS". Ficou só a
   pastilha da contagem, que a árvore usa igual. */
.menu-conta {
    padding: 1px 7px;
    color: var(--muted);
    background: #eef2f3;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* ── O painel de gestão ───────────────────────────────────────────────── */
.gestao-area {
    padding: 20px 22px;
    background: var(--gestao-soft);
    border-bottom: 1px solid #cfdef0;
}
.gestao-area h2 { margin: 0 0 4px; color: #123252; font-size: 17px; }
.gestao-nota { margin: 0 0 14px; color: #3f5f81; font-size: 13px; line-height: 1.55; }
.gestao-nota code { background: #fff; border: 1px solid #d5e3f1; border-radius: 5px; padding: 1px 5px; }
.gestao-form { display: grid; gap: 12px; }

/* ── A tabela de envios do painel de gestão ───────────────────────────────
   Três envios diferentes (logo, documentos, pacote .zip) numa grade só:
   finalidade, arquivo, destino e ação, na mesma ordem em toda linha.

   ⚠️ OS FORMULÁRIOS ESTÃO FORA DA TABELA e ficam escondidos; quem aparece na
   tela são os campos, ligados a eles pelo atributo `form` (ver pagina.php). */
.form-alvo { display: none; }

.gestao-tabela-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #c3d5e8;
    border-radius: 12px;
}
.gestao-tabela { width: 100%; border-collapse: collapse; }
.gestao-tabela thead th {
    padding: 11px 14px;
    color: #4a678a;
    background: #eef4fb;
    border-bottom: 1px solid #c3d5e8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.gestao-tabela tbody tr + tr td, .gestao-tabela tbody tr + tr th { border-top: 1px solid #dde7f2; }
.gestao-tabela td, .gestao-tabela tbody th {
    padding: 13px 14px;
    text-align: left;
    vertical-align: middle;
}
/* A largura vai nas colunas de fora; a do arquivo fica com o que sobrar, que
   é a que mais precisa de espaço (o nome do arquivo escolhido aparece ali). */
.gestao-tabela .col-finalidade { width: 32%; font-weight: 400; }
.gestao-tabela td:nth-child(3) { width: 240px; }
.gestao-tabela td:nth-child(4) { width: 1%; white-space: nowrap; }

.finalidade-nome { display: block; color: #123252; font-size: 14px; font-weight: 700; }
.finalidade-nota { display: block; margin-top: 3px; color: #5b7998; font-size: 12px; line-height: 1.45; }
.finalidade-nota code { background: #f3f7fc; border: 1px solid #dde7f2; border-radius: 5px; padding: 0 4px; }
.logo-mini {
    display: block;
    max-width: 150px;
    max-height: 48px;
    width: auto;
    height: auto;
    margin-top: 9px;
    padding: 5px 7px;
    background: #fff;
    border: 1px solid #dde7f2;
    border-radius: 8px;
}

.gestao-tabela input[type="file"], .gestao-tabela select, .gestao-tabela input[type="text"] {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid #c3d5e8;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
}
.gestao-tabela input[type="file"]:focus, .gestao-tabela select:focus,
.gestao-tabela input[type="text"]:focus {
    border-color: var(--gestao);
    box-shadow: 0 0 0 3px rgba(23,63,103,.10);
}
.gestao-tabela input:disabled, .gestao-tabela select:disabled { background: #f1f5f9; color: #92a4b8; }
.gestao-tabela .botao-gestao, .gestao-tabela .delete-button { width: 100%; }
.gestao-tabela .delete-button:disabled { opacity: .5; cursor: not-allowed; }

/* ── Gerenciar pastas ──────────────────────────────────────────────────── */
/* ⚠️ SEM SEPARADOR PRÓPRIO. Este traço dividia os blocos quando todos
   apareciam empilhados de uma vez. Hoje cada bloco é revelado pela sua
   caixa, e quem desenha a divisão é a regra de `.bloco-gestao`, que sabe
   quais estão à vista: mantendo o traço aqui, o bloco aberto sozinho
   ganhava uma linha solta acima do título. */
.pastas-area { margin-top: 0; }
.pastas-area h2 { margin: 0 0 4px; color: #123252; font-size: 17px; }

/* Destino que não se escolhe: é sempre o mesmo, e o campo desabilitado seria
   pior (parece quebrado e ainda ocupa a altura de um select). */
.destino-fixo {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    color: #4a678a;
    background: #f3f7fc;
    border: 1px dashed #c3d5e8;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}
.gestao-linha {
    display: grid;
    grid-template-columns: minmax(200px, 320px) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { color: #123252; font-size: 12px; font-weight: 700; }
.campo select, .campo input[type="file"], .campo input[type="password"] {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--text);
    background: #fff;
    border: 1px solid #c3d5e8;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.campo select:focus, .campo input:focus { border-color: var(--gestao); box-shadow: 0 0 0 4px rgba(23,63,103,.10); }
.botao-gestao {
    min-height: 44px;
    padding: 10px 18px;
    color: #fff;
    background: var(--gestao);
    border: 1px solid var(--gestao);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.botao-gestao:hover { background: #0d2f50; }
.botao-gestao:disabled { opacity: .55; cursor: progress; }
.gestao-limites { margin: 12px 0 0; color: #5b7998; font-size: 12px; line-height: 1.7; }
.gestao-limites code { background: #fff; border: 1px solid #d5e3f1; border-radius: 5px; padding: 1px 5px; }

/* ── Arquivos Compactados (upload de .zip para extração) ─────────────── */
.compactados-area { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #c3d5e8; }
.compactados-area h2 { margin: 0 0 4px; color: #123252; font-size: 17px; }
.gestao-linha-zip { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.gestao-linha-zip .campo { flex: 1 1 260px; }
.compactados-lista { display: grid; gap: 10px; margin-top: 14px; }
.compactado-item {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #c3d5e8;
    border-radius: 11px;
}
.compactado-extrair { display: flex; align-items: center; gap: 8px; margin: 0; }
.compactado-extrair select {
    height: 42px;
    padding: 0 10px;
    color: var(--text);
    background: #fff;
    border: 1px solid #c3d5e8;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
.compactado-extrair select:focus { border-color: var(--gestao); box-shadow: 0 0 0 3px rgba(23,63,103,.10); }
@media (max-width: 760px) {
    .compactado-item { grid-template-columns: 1fr; }
    .compactado-extrair { flex-wrap: wrap; }
    .compactado-extrair select, .compactado-extrair button { width: 100%; }
}

/* ── Os pacotes ZIP ───────────────────────────────────────────────────── */
.zip-area { padding: 22px; background: var(--zip-soft); border-bottom: 1px solid #f0d6ad; }
.zip-area-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.zip-area h2 { margin: 0; font-size: 18px; color: #704100; }
.zip-area p { margin: 5px 0 0; color: #805b2a; font-size: 13px; }
.zip-buttons { display: grid; gap: 10px; }
.zip-item {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 10px;
    background: rgba(255,255,255,.58);
    border: 1px solid #f0d6ad;
    border-radius: 11px;
}
.zip-info { min-width: 0; }
.zip-name {
    display: block;
    overflow: hidden;
    color: #513000;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zip-size { display: block; margin-top: 3px; color: #805b2a; font-size: 12px; }
.zip-item form, .zip-area-head form { margin: 0; }
.download-button, .delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.download-button { color: #fff; background: var(--gestao); border: 1px solid var(--gestao); }
.download-button:hover { background: #0d2f50; border-color: #0d2f50; }
.delete-button {
    color: #fff;
    background: var(--perigo);
    border: 1px solid var(--perigo);
    font-size: 13px;
}
.delete-button:hover { background: #8f1717; border-color: #8f1717; }
.delete-button { height: 100%; padding-inline: 12px; }
/* ⚠️ A VARIANTE DISCRETA É SÓ DO PACOTE GERADO (v46), e não das outras duas
   que usam `.delete-button`: excluir pasta leva os documentos dentro, e
   excluir um .zip ENVIADO joga fora o que a pessoa subiu. Essas duas
   continuam vermelhas, porque não têm volta. O pacote gerado tem: ele se
   refaz num clique a partir dos documentos, que continuam lá. */
.delete-button-leve {
    color: var(--perigo);
    background: #fff;
    border-color: #e3bdbd;
}
.delete-button-leve:hover { color: #fff; background: var(--perigo); border-color: var(--perigo); }

/* ── Mensagens e avisos ───────────────────────────────────────────────── */
.message { margin: 18px 20px 0; padding: 13px 15px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.message-success { color: #176b3a; background: #ecfdf3; border: 1px solid #86d8a6; }
.message-error { color: #9b1c1c; background: #fef2f2; border: 1px solid #efaaaa; }
.aviso-raiz { padding: 22px 22px 0; }
.aviso-raiz p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* ── A barra de ferramentas, em três faixas ───────────────────────────────
   De cima para baixo: as caixas que ligam cada funcionalidade, os botões das
   que estão ligadas, e a seleção com a busca. Uma faixa por assunto, em vez
   das três colunas de antes, onde botão de gestão, busca e caixas disputavam
   a mesma linha e mudavam de posição conforme o que estivesse ligado. */
.barra-ferramentas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}
/* ⚠️ A LINHA DO "GERENCIAR" SAIU DAQUI NA v84. A escolha do grupo virou o
   menu do topo (`.menu-app`, no fim deste arquivo), a busca foi para a linha
   do caminho e o "O que mudou" para o "Mais" do menu. */
.grupo-titulo {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.linha-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.linha-ferramentas[hidden] { display: none; }
.linha-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* ⚠️ A FAIXA VAZIA NÃO EXISTE. Sem nenhuma caixa marcada não há botão nenhum
   para mostrar, e uma faixa vazia deixaria um vão entre as caixas e a busca
   que parece defeito de tela. Quem liga e desliga o `hidden` é o script, que
   é quem sabe o que está marcado. */
.linha-botoes[hidden] { display: none; }
/* ⚠️ A FAIXA NASCE ESCONDIDA (v47), e só aparece quando tem o que mostrar.
   Desde que a busca subiu para a linha do "Gerenciar", sobraram aqui duas
   coisas intermitentes: o "Selecionar tudo", que só existe com uma ferramenta
   de marcação ligada, e o filtro de tipos, que só existe com mais de um tipo
   de arquivo na pasta. Na tela mais comum (pasta só de PDF, nenhuma
   ferramenta ligada) as duas estão fora, e a faixa seria um vão vazio entre a
   barra e a lista.

   Quem traz de volta são as duas regras abaixo: a marcação ligada, ou a
   simples presença do filtro no HTML. */
.linha-selecao { display: none; flex-wrap: wrap; align-items: center; gap: 14px; }
#painelLista.mostra-marcacao .linha-selecao { display: flex; }
/* ⚠️ SÓ VAI PARA A DIREITA QUANDO HÁ ALGO À ESQUERDA (v47). Ele era empurrado
   para longe da busca, que morava nesta mesma faixa; agora a busca subiu, e
   sem o "Selecionar tudo" ligado o filtro ficava sozinho boiando no canto
   direito de uma linha vazia. */
.filtro-tipos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* ══ A FAIXA DA VISTA (v67) ═══════════════════════════════════════════
   ORGANIZAR e EXIBIR em duas linhas, com fundo rosa claro, de ponta a ponta
   da barra (a margem negativa desfaz o recuo dela): o que só muda o que se vê
   fica separado do "Gerenciar", que mexe nos arquivos. Rosa, e não amarelo:
   o amarelo é o do "Ver como" ligado (estou vendo pelo lado do cliente). */
.faixa-vista {
    display: flex; flex-direction: column; gap: 8px;
    margin: 2px -20px -16px; padding: 11px 20px 12px;
    background: #fdf2f5; border-top: 1px solid #f0d5de;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.linha-vista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.vista-titulo { min-width: 80px; }
.vista-sub { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.linha-exibir .filtro-tipos + .vista-sub,
.linha-organizar .filtro-organizar + .filtro-requisito { margin-left: 6px; padding-left: 14px; border-left: 1px solid #e8c6d2; border-radius: 0; }
.linha-organizar .filtro-organizar + .filtro-requisito { padding: 0 0 0 14px; background: none; border-top: 0; border-right: 0; border-bottom: 0; }
/* A contagem por tipo, no mesmo desenho da contagem do menu de pastas. */
.tipo-conta {
    min-width: 18px;
    padding: 1px 6px;
    color: var(--muted);
    background: var(--surface-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.ferramenta-tipo:has(input:checked) .tipo-conta { color: var(--gestao); background: #fff; }
.select-all { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.botao-linha {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
/* Enviar e gerar ZIP são as duas funcionalidades que qualquer um usa, e ficam
   na cor da casa. As de gestão pesada (ordenar, excluir) usam o azul e o
   vermelho, e a de PDF o contorno. */
.botao-enviar, .botao-porta-gestao { color: #fff; background: var(--gestao); border: 1px solid var(--gestao); }
.botao-enviar:hover, .botao-porta-gestao:hover { background: #0d2f50; }
.botao-zip { color: #fff; background: var(--brand); border: 1px solid var(--brand); }
.botao-zip:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.botao-zip:disabled { opacity: .45; cursor: not-allowed; }
.botao-ordem { color: #fff; background: var(--gestao); border: 1px solid var(--gestao); }
.botao-ordem:hover { background: #0d2f50; }
.botao-excluir { color: #fff; background: var(--perigo); border: 1px solid var(--perigo); }
.botao-excluir:hover { background: #8f1717; }
/* ⚠️ A LARGURA MÍNIMA CABE O RÓTULO INTEIRO, e não só o texto de progresso.
   Os dois trabalham trocando o próprio rótulo enquanto rodam ("Gerando ZIP..."
   e "Convertendo 3/7"), que são bem mais curtos que "Gerar ZIP dos
   selecionados" e "Gerar PDF dos selecionados". Sem esta reserva o botão
   encolheria ao começar e voltaria a crescer ao terminar, com os vizinhos
   dançando junto a cada documento convertido. O valor é o maior dos dois
   rótulos, com folga. */
.botao-zip, .botao-pdf-lote { min-width: 210px; }

/* ── O grupo "Mover para [pasta] (Mover selecionados)" ────────────────────
   ⚠️ CONTORNADO, PELA MESMA RAZÃO DO "GERAR PDF DOS SELECIONADOS". Ao lado do
   "Salvar ordem", que é azul cheio, um segundo azul cheio viraria o mesmo
   botão para quem bate o olho. Contornado, ele se lê como o fim do grupo que
   começa no rótulo e passa pelo menu, e não como mais um botão solto na
   faixa. */
.grupo-mover { display: none; align-items: center; gap: 8px; }
.mostra-mover .grupo-mover { display: inline-flex; }
.rotulo-mover {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.select-mover {
    max-width: 260px;
    min-height: 38px;
    padding: 8px 10px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
}
.botao-mover { color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; }
.botao-mover:hover { background: var(--surface-soft); border-color: var(--gestao); }
.botao-acesso { color: #fff; background: var(--gestao); border: 1px solid var(--gestao); }
.botao-acesso:hover { background: #0d2f50; }
.botao-arvore {
    display: none;
    align-items: center;
    color: var(--gestao);
    background: #fff;
    border: 1px solid #c3d5e8;
    text-decoration: none;
}
.mostra-acesso .botao-arvore { display: inline-flex; }
.botao-arvore:hover { background: var(--surface-soft); border-color: var(--gestao); }

/* ── A TELA DA ÁRVORE INTEIRA (acesso.php) ────────────────────────────────
   Uma tabela por pasta, uma linha por documento. Não usa a grade da lista de
   documentos de propósito: aqui não há tamanho, ícone nem ordem, e a linha
   existe para uma coisa só, que é marcar. */
.acesso-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}
.acesso-total { color: var(--text); font-size: 13px; font-weight: 700; }
.acesso-conta {
    padding: 5px 12px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.acesso-conta strong { color: var(--gestao); }
.acesso-resumo .acesso-busca { flex: 1 1 260px; max-width: 420px; min-width: 0; margin-left: auto; }
.acesso-resumo .acesso-busca input { height: 40px; }
.acesso-aviso { padding: 12px 22px; margin: 0; border-bottom: 1px solid var(--line); }

.acesso-pasta { border-bottom: 1px solid var(--line); }
.acesso-pasta[hidden] { display: none; }
.acesso-pasta-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.acesso-pasta-cabeca h2 { margin: 0; font-size: 14px; }
.acesso-pasta-conta {
    min-width: 20px;
    padding: 2px 8px;
    color: var(--muted);
    background: var(--surface-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
/* ⚠️ AS CAIXAS DE COLUNA FICAM NA MESMA POSIÇÃO DAS DA LINHA, à direita, e é
   o que deixa claro o que cada uma comanda: a de cima manda na coluna abaixo
   dela. */
.acesso-pasta-tudo { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.acesso-coluna { border-style: dashed; }

.acesso-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.acesso-linha[hidden] { display: none; }
.acesso-linha:hover { background: var(--surface-soft); }
.acesso-nome { flex: 1 1 320px; min-width: 0; font-size: 13px; font-weight: 700; word-break: break-word; }
/* ⚠️ NESTA TELA AS PASTILHAS SÃO O ASSUNTO, e não se escondem. O seletor tem
   duas classes de propósito: a regra que as esconde (`.acesso-marcas`) vale
   para a listagem de documentos e está escrita DEPOIS desta no arquivo; com
   uma classe só, empatariam na especificidade e a de baixo venceria. */
.acesso-linha .acesso-marcas { display: inline-flex; margin-right: 0; }
.acesso-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
}
.acesso-rodape .gestao-nota { flex: 1 1 320px; margin: 0; }

/* ── AS MARCAS DE ÁREA, NA LINHA DO DOCUMENTO ─────────────────────────────
   Escondidas como todo o resto, e reveladas pela caixa "Acesso por área".
   Ficam na mesma coluna dos botões da linha, à direita: são ferramenta de
   quem organiza, não informação de quem lê. */
.acesso-marcas { display: none; align-items: center; gap: 6px; margin-right: 10px; }
.mostra-acesso .acesso-marcas { display: inline-flex; }
.acesso-marca {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
/* ⚠️ O ESTADO MARCADO PRECISA SER LEGÍVEL DE LONGE. Esta tela é lida em
   diagonal, procurando o documento que está liberado para quem não devia: sem
   contraste entre marcado e desmarcado, a conferência vira leitura de
   quadradinho um por um. */
.acesso-marca:has(input:checked) {
    color: var(--gestao);
    background: var(--surface-soft);
    border-color: #9fc0e0;
}
.acesso-marca input { margin: 0; }

/* ── A FAIXA DO "VER COMO" ────────────────────────────────────────────────
   Discreta enquanto está desligada, destacada quando está valendo: é um modo
   de visualização, e modo que não se anuncia faz a pessoa achar que
   documentos sumiram. */
.ver-como {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}
.ver-como.is-ativo { background: #fff4e0; border-bottom-color: #e8c98d; }
.ver-como-rotulo { color: var(--muted); font-size: 12px; font-weight: 700; }
.ver-como.is-ativo .ver-como-rotulo { color: #8a5a10; }
.ver-como-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ver-como-opcao {
    min-height: 30px;
    padding: 5px 12px;
    color: var(--gestao);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.ver-como-opcao:hover { border-color: var(--gestao); }
.ver-como-opcao.is-atual { color: #fff; background: var(--gestao); border-color: var(--gestao); }

/* ⚠️ CONTORNADO, E NÃO VERMELHO CHEIO. Do lado do "Excluir selecionados",
   dois botões vermelhos sólidos viram o mesmo botão para quem bate o olho, e
   um deles apaga documento. Contornado, ele fica igual ao botão "Gerar PDF"
   da linha (mesma cor, mesma ideia) e diferente do que é destrutivo. */
.botao-pdf-lote {
    color: var(--pdf);
    background: #fff;
    border: 1px solid #e7c3c3;
}
.botao-pdf-lote:hover { background: var(--pdf-soft); border-color: var(--pdf); }

/* Acompanha a caixa "Gerar PDF", como o botão de lote, mas sem a cor de ação:
   é conferência, não conversão. */
.botao-logos {
    display: none;
    align-items: center;
    color: var(--gestao);
    background: #fff;
    border: 1px solid #c3d5e8;
    text-decoration: none;
}
.mostra-pdf .botao-logos { display: inline-flex; }
.botao-logos:hover { background: var(--surface-soft); border-color: var(--gestao); }
.botao-pdf-lote:disabled { opacity: .75; cursor: progress; }
.botao-linha:disabled { cursor: progress; opacity: .6; }
.search { position: relative; }
.search svg { position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.search input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 45px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    font-size: 15px;
}
.search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,123,123,.12); }
/* ── As caixas que ligam cada funcionalidade ──────────────────────────── */
.ferramenta {
    display: inline-flex;
    align-items: center;
    /* Apertado de propósito: são oito pastilhas numa fila só, e cada pixel
       entre o quadradinho e a palavra é multiplicado por oito. */
    gap: 6px;
    padding: 7px 11px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.ferramenta:hover { border-color: #b9dfdc; background: var(--brand-soft); }
.ferramenta input { width: 16px; height: 16px; }
/* O diagnóstico é botão, não caixa, mas fica na mesma fila e com a mesma
   pastilha: o que muda é não ter o quadradinho na frente. `font: inherit`
   porque <button> não herda a fonte da página como <label> herda. */
/* ⚠️ EMPURRADO PARA A DIREITA, e não por capricho. Ele fecha a fila mas não é
   uma caixa: separado por um vão, dá para ver de relance que é outra coisa. E
   quando a fila quebra em duas linhas, que é o que acontece em tela de 1180 px
   com as sete caixas, ele cai alinhado à direita em vez de ficar órfão no
   começo da segunda linha. */
.ferramenta-botao { font-family: inherit; font-size: 12.5px; font-weight: 700; margin-left: auto; }
.ferramenta-botao[aria-pressed="true"] { color: var(--gestao); background: var(--gestao-soft); border-color: #c3d5e8; }
/* Marcada, a caixa muda de cor: de relance dá para ver quais ferramentas
   estão ligadas sem procurar o tique dentro de cada quadradinho. */
.ferramenta:has(input:checked) { color: var(--gestao); background: var(--gestao-soft); border-color: #c3d5e8; }

/* Renomear também no servidor (v72), em Gerenciar pastas. */
.pasta-no-servidor { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--gestao); cursor: pointer; }
.pasta-disco { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.pasta-disco code { font-size: 12px; color: var(--text); background: var(--surface-soft); padding: 0 4px; border-radius: 4px; }
.pasta-disco-aviso { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--perigo); }
.pasta-disco-aviso[hidden], .pasta-disco [hidden] { display: none; }

/* Nome na tela e no servidor (v73). */
.pastas-servidor-tabela code { font-size: 12.5px; padding: 1px 5px; background: var(--surface-soft); border-radius: 4px; word-break: break-all; }
.pastas-servidor-tabela .pastas-servidor-novo { color: var(--gestao); font-weight: 700; background: var(--gestao-soft); }
.pastas-servidor-tabela .pastas-servidor-tela small { color: var(--muted); font-weight: 500; }
.pastas-servidor-sub .pastas-servidor-tela .ps-nome { padding-left: 18px; }
.pastas-servidor-ok { font-size: 12px; font-weight: 700; color: #8a929c; }
.pastas-servidor-acao { width: 110px; text-align: right; }
.pastas-servidor-tabela .pastas-servidor-docs { width: 110px; text-align: center; font-weight: 700; white-space: nowrap; }
.pastas-servidor-tabela .pastas-servidor-docs small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.pastas-servidor-tabela .pastas-servidor-vazia { color: var(--perigo); }
.pastas-servidor-excluir { width: 96px; }
.ps-alterar { display: block; }
.ps-alterar > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.ps-alterar > summary::-webkit-details-marker { display: none; }
.ps-alterar > summary::marker { content: ""; }
/* O Alterar e o Atualizar com a mesma cara (v76): o Atualizar é botão de
   verdade, o Alterar é o `summary` do details; a regra vale para os dois. */
.pastas-servidor-tabela .ps-alterar-botao,
.pastas-servidor-tabela button.botao-linha[name=so] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    color: #1f2a36;
    background: #f4f5f7;
    border: 1px solid #9aa3ad;
    box-sizing: border-box;
}
.pastas-servidor-tabela .ps-alterar-botao:hover,
.pastas-servidor-tabela button.botao-linha[name=so]:hover { background: #fff; border-color: var(--gestao); color: var(--gestao); }
.ps-alterar[open] .ps-alterar-botao { background: var(--gestao-soft); border-color: var(--gestao); color: var(--gestao); }
.ps-alterar-botao { flex: 0 0 auto; }
/* A linha Incluir, no fim da tabela (v77). */
.pastas-servidor-tabela tfoot td { padding-top: 14px; padding-bottom: 14px; background: var(--gestao-soft); border-top: 2px solid #c3d5e8; }
.ps-incluir-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ps-incluir-caixa select { flex: 0 1 300px; min-width: 0; max-width: 100%; padding: 8px 10px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ps-incluir-caixa input[type=text] { flex: 1 1 240px; min-width: 0; padding: 8px 10px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; }
.ps-incluir-disco { font-size: 12px; color: var(--muted); }
.ps-incluir-disco code { font-size: 12px; color: var(--gestao); font-weight: 700; background: #fff; padding: 1px 5px; border-radius: 4px; }
.pastas-servidor-tabela .ps-incluir-botao { min-width: 86px; color: #fff; background: var(--gestao); border: 1px solid var(--gestao); }
.pastas-servidor-tabela .ps-incluir-botao:hover { background: #0d2f50; }

/* O texto das outras colunas na altura do nome, que fica no meio do botão
   Alterar (38px). Só na tabela larga: no celular a linha vira cartão. */
@media (min-width: 721px) {
    .pastas-servidor-tabela td:not(.pastas-servidor-tela):not(.pastas-servidor-acao) { padding-top: 18px; }
}
.ps-alterar .ps-fechar, .ps-alterar[open] .ps-abrir { display: none; }
.ps-alterar[open] .ps-fechar { display: inline; }
.ps-alterar .ps-nome { cursor: text; }
.ps-alterar .ps-nome small { color: var(--muted); font-weight: 500; }
.ps-alterar-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; padding: 8px 10px; background: var(--gestao-soft); border: 1px solid #c3d5e8; border-radius: 10px; }
.ps-alterar-caixa input[type=text] { flex: 1 1 220px; min-width: 0; padding: 6px 9px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; }
.ps-alterar-servidor { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--gestao); }
.ps-alterar-caixa .botao-atualizar-mapa { color: #fff; background: var(--gestao); border-color: var(--gestao); }
.pastas-servidor-tabela .botao-excluir-pasta { color: #fff; background: var(--perigo); border-color: var(--perigo); }
.pastas-servidor-igual code { color: #8a929c; }
a.botao-gestao { display: inline-flex; align-items: center; text-decoration: none; }

/* ── As ferramentas com ícone (v71) ───────────────────────────────────────
   Arquivos e Regulatório. Desligada: o traço escuro num quadrado cinza
   claro. Ligada: o quadrado na cor da ferramenta (`--cor`, no HTML), o
   brilho em volta e o visto no canto; o Excluir em vermelho. A caixa de
   marcar continua lá, invisível: é ela que o script lê, e é ela que recebe o
   Tab do teclado. */
.ferramenta.ferramenta-icone {
    position: relative;
    flex-direction: column;
    gap: 5px;
    width: 74px;
    padding: 6px 2px 2px;
    color: #3b4652;
    background: none;
    border: 0;
    border-radius: 12px;
    font-size: 11.5px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}
.ferramenta.ferramenta-icone:hover { background: none; }
.ferramenta-icone input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ferr-quadro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #1f2a36;
    background: #eef1f4;
    border: 1.5px solid #c5ced7;
    border-radius: 12px;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ferr-quadro > svg { width: 24px; height: 24px; }
.ferramenta-icone:hover .ferr-quadro { color: var(--cor); background: #fff; border-color: var(--cor); }
.ferramenta-icone:has(input:focus-visible) .ferr-quadro { outline: 2px solid var(--brand); outline-offset: 2px; }
.ferr-visto {
    position: absolute;
    top: -7px;
    right: -7px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: var(--cor);
    background: #fff;
    border: 2px solid var(--cor);
    border-radius: 50%;
}
.ferr-visto svg { width: 11px; height: 11px; }
.ferramenta.ferramenta-icone:has(input:checked) { color: var(--cor); background: none; border-color: transparent; }
.ferramenta-icone:has(input:checked) .ferr-quadro {
    color: #fff;
    background: var(--cor);
    border-color: var(--cor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 20%, transparent), 0 4px 14px color-mix(in srgb, var(--cor) 40%, transparent);
}
.ferramenta-icone:has(input:checked) .ferr-visto { display: flex; }
.linha-ferramentas:has(.ferramenta-icone) { align-items: flex-start; gap: 4px 6px; }
.linha-ferramentas:has(.ferramenta-icone) > .atalho-mapa { align-self: center; }

/* ── A lista de documentos ──────────────────────────────────────────────
   Colunas: marcação, nome, tamanho. Na gestão entram mais duas à DIREITA, o
   número da posição e o renomear: são ferramentas de ajuste, e à esquerda
   ficavam na frente do nome, que é o que se procura na lista. */
.list-head, .document-row { display: grid; grid-template-columns: 0 minmax(0,1fr) minmax(190px,auto) minmax(96px,auto); gap: 14px; align-items: center; }
/* ⚠️ A GRADE MUDA COM AS FERRAMENTAS LIGADAS. Não basta esconder a coluna:
   a coluna escondida continuaria reservando lugar e espaçamento na grade, e
   a lista ficaria com uma faixa vazia à direita. Cada combinação tem o seu
   template, e é o JavaScript que liga as classes no formulário. */
/* ⚠️ AS CLASSES `mostra-*` MUDARAM DE ELEMENTO. Antes viviam no formulário,
   junto do `.is-gestao`, e por isso os seletores eram compostos
   (`.is-gestao.mostra-ordem`). Agora a barra de ferramentas é IRMÃ da lista,
   não mãe dela, então a classe subiu para o `#painelLista`, que é o ancestral
   comum das duas. Daí os seletores serem descendentes: a classe fica no
   painel, o `.is-gestao` continua no formulário. */
/* ⚠️ SÃO QUATRO COLUNAS AGORA, E A PRIMEIRA TEM ZERO DE LARGURA. A coluna
   de marcação deixou de existir: a caixa de seleção foi para o lado do
   ARQUIVO dela, dentro da coluna do Word ou do PDF, porque a linha passou a
   ter dois arquivos e uma caixa só na frente não diria qual dos dois ela
   seleciona. A célula vazia continua no HTML para o cabeçalho e as linhas
   terem o mesmo número de colunas. */
.is-gestao .list-head, .is-gestao .document-row { grid-template-columns: 0 minmax(0,1fr) minmax(190px,auto) minmax(96px,auto); }
.mostra-ordem .is-gestao .list-head,
.mostra-ordem .is-gestao .document-row { grid-template-columns: 0 minmax(0,1fr) minmax(190px,auto) minmax(96px,auto) 62px; }
/* ⚠️ AS COLUNAS ANVISA, INMETRO E OUTROS (v61) SÃO UMA CÉLULA SÓ NA GRADE
   (`.col-regs`), com as três dentro dela. Assim o celular empilha as três
   numa faixa, e a grade larga ganha uma coluna, e não três. Aparecem quando
   a pasta tem alguma marcação (`com-regs`, no formulário) ou com a
   ferramenta ligada (`mostra-regulatorio`, no painel); as duas nunca vêm
   com o "Ordenar", que é outra ferramenta, a não ser pelo `com-regs`. */
.col-regs { display: none; }
/* Quantas colunas: os sistemas da empresa (`--n-regs`, no formulário, v62). */
.com-regs .col-regs, .mostra-regulatorio .col-regs { display: grid; grid-template-columns: repeat(var(--n-regs, 3), 64px); align-items: center; justify-items: center; }
.com-regs .list-head, .com-regs .document-row,
.mostra-regulatorio .list-head, .mostra-regulatorio .document-row { grid-template-columns: 0 minmax(0,1fr) calc(var(--n-regs, 3) * 64px) minmax(150px,auto) minmax(80px,auto); }
.mostra-ordem .is-gestao.com-regs .list-head,
.mostra-ordem .is-gestao.com-regs .document-row { grid-template-columns: 0 minmax(0,1fr) calc(var(--n-regs, 3) * 64px) minmax(150px,auto) minmax(80px,auto) 62px; }

/* ⚠️ ESCONDIDO É O ESTADO PADRÃO, e cada elemento tem UMA regra que o traz
   de volta. A tentação aqui é escrever "esconde tudo e mostra o grupo", mas
   os dois botões da linha são `.row-action` e moram na mesma caixa: mostrar
   o grupo traria o Renomear junto com o PDF, e depois seria preciso escondê-lo
   de novo numa exceção, que é como se perde o controle de uma folha de
   estilo. Um seletor por elemento, sem exceções. */
.ordem-input, .col-ordem,
.botao-enviar, .botao-zip, .botao-excluir, .botao-ordem, .botao-pdf-lote,
.botao-acesso,
.botao-regulatorio,
.row-action-pdf, .row-action-editar, .row-action[data-renomear],
.row-action-citado { display: none; }

/* ── A COLUNA DE MARCAÇÃO ─────────────────────────────────────────────────
   ⚠️ `visibility`, E NÃO `display`. O quadradinho some mas continua ocupando
   os 34 px da primeira coluna da grade: com `display: none` a grade encolheria
   e os nomes dos documentos andariam para a esquerda a cada caixa marcada, com
   a lista inteira pulando na tela. E o cabeçalho, que tem uma célula vazia
   nessa coluna, sairia do alinhamento com as linhas.

   O "Selecionar tudo" acompanha, mas com `display`: ele mora numa linha
   flexível, onde sumir de vez não desalinha nada e ainda devolve o espaço
   para a busca. */
/* ⚠️ AGORA É `display`, E NÃO MAIS `visibility`. A caixa morava numa coluna
   fixa de 34 px, onde sumir sem devolver o espaço era o certo: com `display`
   a grade encolheria e os nomes andariam para a esquerda a cada clique. Hoje
   ela mora ao lado da pastilha do arquivo, numa célula que já é flexível, e
   guardar lugar para ela só afastaria a pastilha da borda à toa. */
.file-checkbox { display: none; }
.select-all { display: none; }
.mostra-marcacao .file-checkbox { display: inline-block; }
.mostra-marcacao .select-all { display: inline-flex; }
/* Arquivo que a funcionalidade ligada não alcança: com só o "Gerar PDF"
   ligado, é o caso de tudo que não é .docx. */
.mostra-marcacao .arquivo-bloco.sem-marcacao .file-checkbox { display: none; }

/* ── Os blocos de gestão, um por caixa ────────────────────────────────────
   Entrar no Modo Gestão não abre bloco nenhum: cada um espera a sua caixa.
   A caixa cinza que os contém (`#painelGestao`) é escondida pelo script
   quando nenhum está à vista, senão sobraria uma faixa vazia. */
.bloco-envios, .bloco-pastas { display: none; }
.mostra-enviar .bloco-envios { display: block; }
.mostra-pastas .bloco-pastas { display: block; }
/* ⚠️ A LINHA SEPARADORA NÃO PODE SER `+`. Bloco escondido continua sendo o
   irmão anterior na marcação, então `.bloco + .bloco` desenharia a linha no
   primeiro bloco visível quando o de cima estivesse escondido, e sobraria um
   traço solto acima do título. Cada caso é escrito pelas classes que estão
   ligadas de fato, na ordem em que os blocos aparecem na página. */
.mostra-enviar.mostra-pastas .bloco-pastas {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed #c3d5e8;
}

.mostra-zip .botao-zip { display: inline-flex; }
.mostra-excluir .botao-excluir { display: inline-flex; }
.mostra-ordem .ordem-input, .mostra-ordem .col-ordem { display: block; }
.mostra-ordem .botao-ordem { display: inline-flex; }
.mostra-pdf .row-action-pdf, .mostra-pdf .botao-pdf-lote { display: inline-flex; }
/* ⚠️ ESTA LINHA FALTAVA, e o defeito é do mesmo feitio do da v11: botão que
   não entrou na lista dos escondidos aparece na faixa assim que QUALQUER
   caixa é marcada, porque a faixa inteira passa a existir. Na prática, marcar
   "Gerar PDF" trazia junto um "Salvar acesso" que não tinha nada a ver com o
   que a pessoa pediu. */
.mostra-acesso .botao-acesso { display: inline-flex; }
.mostra-editar .row-action-editar, .mostra-editar .botao-versoes { display: inline-flex; }
.mostra-renomear .row-action[data-renomear] { display: inline-flex; }
.mostra-citado .row-action-citado { display: inline-flex; }

/* ══ ANVISA / INMETRO / OUTROS (v58; colunas na v61) ═══════════════════
   Na leitura, a marca (um "certo" na cor do órgão); com a ferramenta
   ligada, a caixa de marcar no lugar dela, e a caixa do título marca a
   coluna inteira. O rótulo dentro da célula só aparece no celular, onde
   não há título de coluna. */
.reg-cel { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 22px; }
.list-head .reg-cel { font-size: 10.5px; text-align: center; line-height: 1.2; }
.reg-sim { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 999px; }
.reg-sim svg { width: 15px; height: 15px; }
.reg-cel-anvisa .reg-sim  { color: #0b5d3b; background: #e8f6ee; }
.reg-cel-inmetro .reg-sim { color: #173f67; background: #e8f0f8; }
.reg-cel-iso13485 .reg-sim { color: #5b3a8c; background: #f1ecf8; }
.reg-cel-iso9001 .reg-sim  { color: #8a5a00; background: #fff5e0; }
.reg-cel-anatel .reg-sim   { color: #9a3412; background: #fdeee6; }
.reg-cel-rotulo { display: none; }
.reg-caixa, .reg-todos { display: none; margin: 0; width: 16px; height: 16px; cursor: pointer; }
.mostra-regulatorio .reg-caixa, .mostra-regulatorio .reg-todos { display: inline-block; }
.mostra-regulatorio .document-row .reg-sim { display: none; }
/* Com a ferramenta ligada, a caixa do título fica em cima do nome da coluna:
   lado a lado, "Inmetro" não cabe nos 58 px. */
.mostra-regulatorio .list-head .reg-cel { flex-direction: column; gap: 4px; }
/* ⚠️ A CÉLULA É `label`, E SÓ RESPONDE AO CLIQUE COM A FERRAMENTA LIGADA.
   Na leitura a caixa está escondida mas existe (em gestão), e um clique no
   título "Anvisa" marcaria a coluna inteira sem ninguém ver. */
.reg-cel { pointer-events: none; }
.mostra-regulatorio .reg-cel { pointer-events: auto; cursor: pointer; }
.reg-anvisa  { color: #0b5d3b; background: #e8f6ee; border-color: #b6e0c8; }
.reg-inmetro { color: #173f67; background: #e8f0f8; border-color: #c3d5e8; }
.reg-iso13485 { color: #5b3a8c; background: #f1ecf8; border-color: #d9cbee; }
.reg-iso9001  { color: #8a5a00; background: #fff5e0; border-color: #f0d9a8; }
.reg-anatel   { color: #9a3412; background: #fdeee6; border-color: #f3c9b3; }
.grupo-regulatorio { display: none; align-items: center; gap: 6px; }
.mostra-regulatorio .grupo-regulatorio, .mostra-regulatorio .botao-regulatorio { display: inline-flex; }
.botao-regulatorio { color: #fff; background: var(--gestao); border: 1px solid var(--gestao); }
.botao-regulatorio:hover { background: #0d2f50; }
/* ══ ORGANIZAR A LISTA (v63) ═══════════════════════════════════════════
   As linhas de título dos itens (e dos de cima), o bloco do produto e o
   "também em" do documento de mais de um item. */
/* Três tons (v65): o primeiro nível em azul escuro com texto branco, o do
   meio em azul médio, o de baixo em azul claro. Na impressão, as cores vão
   junto (print-color-adjust), senão o navegador tira o fundo. */
.lista-grupo {
    display: flex; align-items: baseline; gap: 10px; padding: 11px 22px 7px;
    color: var(--gestao); background: #e8f0f8; border-top: 1px solid #c3d5e8;
    font-weight: 700; font-size: 13px; line-height: 1.35;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lista-grupo[hidden] { display: none; }
.lista-grupo-n1 {
    font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em;
    color: #fff; background: var(--gestao); border-top-color: var(--gestao);
}
.lista-grupo-n2 { padding-left: 30px; color: #10304f; background: #bfd4ea; border-top-color: #a9c4e0; }
.lista-grupo-n3 { padding-left: 44px; background: #e8f0f8; }
.lista-grupo-num { flex: 0 0 auto; min-width: 46px; font-variant-numeric: tabular-nums; }
/* A faixa com o título das colunas (v67): a cópia do cabeçalho da lista, com
   a grade dele; o título do item no lugar de "Nome do documento". */
.lista-grupo-com-colunas { display: block; }
#documentList .lista-grupo-grade {
    padding: 0; color: inherit; background: none; border: 0;
    font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit;
}
.lista-grupo-nome { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lista-grupo-grade .col-regs, .lista-grupo-grade .col-fonte,
.lista-grupo-grade .col-pdf, .lista-grupo-grade .col-ordem {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .85;
}
.lista-grupo-grade .reg-cel { font-size: 10px; }
.lista-grupo-n1 .lista-grupo-grade .reg-cel, .lista-grupo-n1 .lista-grupo-grade .col-fonte,
.lista-grupo-n1 .lista-grupo-grade .col-pdf, .lista-grupo-n1 .lista-grupo-grade .col-ordem { color: #fff; }
.org-tambem {
    display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 5px; vertical-align: 1px;
    font-size: 11px; font-weight: 600; color: #8a5a00; background: #fff5e0; white-space: nowrap;
}
/* O documento que está no requisito mas não é do sistema escolhido (v67):
   o MSGQ na Seção I da RDC, o PRO 2.5-01 no 7.4.1 do Inmetro. */
.document-row.org-fora { background: #eef0f2; }
.document-row.org-fora:hover { background: #e8eaed; }
.document-row.org-fora .document-name strong { color: #848c96; font-weight: 600; }
.filtro-organizar { align-items: center; }
.filtro-organizar .filtro-requisito-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.filtro-organizar input[type=radio] { margin: 0; }
.filtro-organizar input[type=radio]:disabled + * { opacity: .5; }

/* Os atalhos do grupo Regulatório: links, no fim da linha das caixas. */
.atalho-regulatorio { margin-left: auto; }
.atalho-regulatorio + .atalho-regulatorio { margin-left: 0; }
/* As opções da junção andam com o "Mover", na linha de baixo dele. */
.grupo-mover-opcoes { display: none; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.mostra-mover .grupo-mover-opcoes { display: inline-flex; }
/* ══ OS REQUISITOS NA LISTA (v59) ═════════════════════════════════════
   Desde a v61 a lista só filtra por requisito; a linha de baixo do nome e
   os campos de digitar saíram (ver a vista Requisitos x Documentos). */
.req-ident-norma { white-space: nowrap; }
.req-ident-norma b { color: var(--gestao); font-weight: 700; margin-right: 3px; }
.filtro-requisito { gap: 6px; }
.filtro-requisito-rotulo { font-weight: 700; }
.filtro-requisito select { max-width: 280px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 12.5px; background: #fff; }

/* A vista Requisitos x Documentos. */
.req-normas { padding-top: 0; border-bottom: 1px solid var(--line); }
.req-acoes { margin-top: 0; }
.req-matriz td { vertical-align: top; }
.req-col-item { width: 72px; white-space: nowrap; font-weight: 700; color: var(--gestao); }
.req-col-situacao { width: 190px; }
.req-nivel-1 td { background: var(--surface-soft); font-weight: 700; }
.req-nivel-1 .req-titulo { text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px; }
.req-nivel-3 .req-col-item, .req-nivel-3 .req-titulo { padding-left: 22px; }
.req-nivel-4 .req-col-item, .req-nivel-4 .req-titulo { padding-left: 36px; }
.req-titulo .mapa-local { display: block; }
.req-lacuna td { background: #fffafa; }
.req-docs { display: flex; flex-wrap: wrap; gap: 4px; }
.req-doc {
    display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
    color: var(--gestao); background: var(--gestao-soft); border: 1px solid #c3d5e8; cursor: help; white-space: nowrap;
    max-width: 320px; overflow: hidden; text-overflow: ellipsis;
}
.req-doc-sumiu { color: var(--perigo); background: #fdf0f1; border-color: #edc9cc; text-decoration: line-through; }
/* Um documento por linha: código, título, "também em", e o menu do item
   (só em "Reorganizar"). */
.req-col-docs { min-width: 0; }
.req-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.req-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 2px 4px; border-radius: 6px; font-size: 13px; }
.req-linha { flex-wrap: nowrap; }
.req-linha-doc { flex: 1 1 180px; min-width: 0; }
.req-cod { font-weight: 700; color: var(--gestao); margin-right: 6px; white-space: nowrap; }
.req-tit small { color: var(--muted); font-size: 11.5px; }
.req-tambem { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px; color: #8a5a00; background: #fff5e0; border-radius: 5px; white-space: nowrap; }
.req-linha-sumiu .req-cod, .req-linha-sumiu .req-tit { color: var(--perigo); text-decoration: line-through; }
/* No item, mas não é do sistema da aba (v67): cinza, e não conta. */
.req-linha-fora { background: #f1f2f4; }
.req-linha-fora .req-cod, .req-linha-fora .req-tit { color: #8a929c; }
.req-fora-selo { margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 600; color: #5f6873; background: #e3e6ea; white-space: nowrap; }
.req-para { display: none; flex: 0 0 230px; width: 230px; max-width: 230px; min-width: 0; padding: 3px 6px; font: inherit; font-size: 12px; border: 1px solid #c3d5e8; border-radius: 7px; background: #fff; color: var(--text); }
.req-reorganizando .req-para { display: inline-block; }
.req-serie { flex-wrap: wrap; }
.req-serie > .req-membros { flex-basis: 100%; margin: 0 0 2px 16px; }
.req-membros > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gestao); }
.req-membros .req-lista { margin-top: 3px; padding-left: 8px; border-left: 2px solid var(--gestao-soft); }
.req-vai { background: #fff6dd; }
.req-sai { background: #fdf0f1; }
.req-sai > .req-linha-doc { text-decoration: line-through; opacity: .65; }
.req-nova { background: #ebf6ee; color: var(--excel); font-weight: 600; }
.req-tirar-nova { border: 0; background: none; cursor: pointer; color: var(--perigo); font-size: 17px; line-height: 1; padding: 0 4px; }
.req-so-repetidos .req-linha:not([data-tambem]):not(.req-nova) { opacity: .4; }
.req-incluir { display: none; gap: 6px; margin-top: 6px; }
.req-reorganizando .req-incluir { display: flex; flex-wrap: wrap; }
.req-incluir-campo { flex: 1 1 240px; min-width: 0; padding: 4px 8px; font: inherit; font-size: 12.5px; border: 1px dashed #c3d5e8; border-radius: 7px; }
.req-incluir-campo:focus { outline: none; border-style: solid; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,123,123,.12); }
.req-incluir .botao-linha { min-height: 28px; padding: 3px 10px; color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; }
.req-campo-erro { border-color: var(--perigo) !important; border-style: solid !important; }
.req-ligar { font-weight: 700; color: var(--gestao); }
.req-barra {
    position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
    margin: 0 0 -1px; padding: 10px 22px; background: #fff; border-top: 2px solid var(--gestao); box-shadow: 0 -6px 16px rgba(23,63,103,.10);
}
.req-barra[hidden] { display: none; }
.req-barra #reqContagem { margin-right: auto; font-weight: 700; color: var(--gestao); }
.req-desfazer-caixa { display: grid; gap: 8px; margin: 0 22px 14px; padding: 10px 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.req-desfazer-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.req-desfazer-linha small { color: var(--muted); }
.req-desfazer-caixa .botao-linha { color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; }
.req-limpar > summary { cursor: pointer; color: var(--perigo); font-weight: 600; font-size: 13px; }
.req-limpar-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.req-limpar-form .gestao-nota { flex-basis: 100%; margin: 0; }
.req-botao-perigo { color: var(--perigo); background: #fff; border: 1px solid #edc9cc; }
/* Os sistemas da empresa (v62), em cima das abas. */
.req-sistemas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 22px 12px; font-size: 13px; }
.req-sistemas-mudar > summary { cursor: pointer; color: var(--gestao); font-weight: 600; }
.req-sistemas-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.req-previa-marcas .req-previa-caixa { width: 32px; text-align: center; }
.req-marcar-sis { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; white-space: nowrap; cursor: pointer; }
.req-marcar-sistemas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.req-ganha { color: var(--excel); font-weight: 600; }
.req-perde { color: var(--perigo); font-weight: 600; }
.req-previa-gravar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.selo-neutro { color: #5c6670; background: #f2f4f5; border: 1px solid #dde3e6; }
.req-na { margin-top: 6px; }
.req-na > summary { cursor: pointer; color: var(--gestao); font-size: 12px; font-weight: 600; }
.req-na-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.req-na-form input[type=text] { flex: 1 1 140px; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 12.5px; }
.req-na-form .botao-linha { min-height: 30px; padding: 4px 10px; color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; }
.req-desfazer { margin-top: 6px; }
.req-previa { margin: 0 22px 14px; padding: 14px 16px; background: var(--gestao-soft); border: 1px solid #c3d5e8; border-radius: 12px; }
.req-previa p { margin: 0 0 8px; }
.req-previa-lista > summary { cursor: pointer; color: var(--gestao); font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.req-previa-lista .req-ident-norma { display: inline-block; margin-right: 12px; }
.req-previa-acoes { margin: 10px 0 0; }
.req-importar { display: grid; gap: 14px; margin: 0 22px 18px; }
.req-importar-bloco { display: flex; flex-direction: column; gap: 6px; }
.req-importar-bloco > .botao-linha { align-self: flex-start; color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; }
.req-importar select { flex: 1 1 420px; width: auto; max-width: 100%; min-width: 0; }
/* A lista mestra (v70): a falta em cada item de Requisitos x Documentos, e a
   página da lista. */
.req-lista-mestra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0 22px 12px; padding: 8px 14px; font-size: 13px; background: #fdf2f5; border: 1px solid #f0d3dc; border-radius: 12px; }
.req-lista-mestra a[data-req-faltas] { color: var(--perigo); font-weight: 700; }
.req-lista-mestra .botao-linha { color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; }
.req-faltas { margin-top: 3px; }
.req-linha-falta { background: #fdf0f1; border: 1px dashed #edc9cc; }
.req-linha-falta .req-cod, .req-linha-falta .req-tit { color: var(--perigo); }
.req-falta-selo { margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 600; color: var(--perigo); background: #fff; border: 1px solid #edc9cc; white-space: nowrap; }
.lm-painel .mapa-grupo { margin-top: 18px; }
.lm-bloco { display: flex; flex-direction: column; gap: 10px; margin: 0 22px 18px; font-size: 13.5px; }
.lm-bloco > p { margin: 0; }
.lm-envio { padding: 14px 16px; background: var(--gestao-soft); border: 1px solid #c3d5e8; border-radius: 12px; }
.lm-diferencas { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.lm-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-botoes form { margin: 0; }
.lm-bloco .botao-linha { color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; }
.lm-bloco .botao-atualizar-mapa { color: #fff; background: var(--gestao); border-color: var(--gestao); }
.lm-tabela td { vertical-align: top; }
.lm-tabela .lm-x { text-align: center; font-weight: 700; }
.lm-tabela .lm-itens { font-size: 12px; color: var(--muted); }
.lm-em-uso { background: #f2f8f4; }
.lm-falta td { background: #fdf0f1; }
.lm-falta .req-cod, .lm-falta .lm-falta-titulo { color: var(--perigo); }
/* v80: o que a empresa ignora, a lista inteira e o Word das pastas. */
.lm-considerar { width: 70px; text-align: center; }
.lm-considerar input { width: 17px; height: 17px; }
.lm-ignorado td { background: #f3f4f6; color: #8a929c; }
.lm-ignorado .req-cod, .lm-ignorado .lm-falta-titulo { color: #8a929c; text-decoration: line-through; }
.lm-ignorado-selo { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 11px; font-weight: 600; color: #6b7480; background: #fff; border: 1px solid #d5dae0; border-radius: 5px; text-decoration: none; }
.lm-ignorar-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 4px; }
.lm-ignorar-pe .gestao-nota { flex: 1 1 320px; margin: 0; }
.lm-situacao span { display: inline-block; padding: 1px 7px; font-size: 12px; font-weight: 600; border-radius: 5px; }
.lm-sit-tem .lm-situacao span { color: var(--excel); background: #ebf6ee; border: 1px solid #cfe7d6; }
.lm-sit-falta td { background: #fdf0f1; }
.lm-sit-falta .req-cod, .lm-sit-falta td:nth-child(2) { color: var(--perigo); }
.lm-sit-falta .lm-situacao span { color: var(--perigo); background: #fff; border: 1px solid #edc9cc; }
.lm-sit-ignorado td { color: #8a929c; }
.lm-sit-ignorado .lm-situacao span, .lm-sit-um-a-um .lm-situacao span { color: #6b7480; background: #f3f4f6; border: 1px solid #d5dae0; }
.lm-ou { font-size: 12.5px; color: var(--muted); }
.lm-form select.lm-da-pasta { flex: 1 1 260px; }
.lm-selo { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 700; color: var(--excel); background: #ebf6ee; border: 1px solid #cfe7d6; }
.lm-acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.lm-mais > summary { cursor: pointer; color: var(--gestao); font-weight: 600; font-size: 13px; padding: 5px 0; }
.lm-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.lm-form input[type=text], .lm-form select { flex: 1 1 220px; min-width: 0; max-width: 100%; padding: 6px 9px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; }
.lm-form input[type=file] { flex: 1 1 220px; min-width: 0; max-width: 100%; font-size: 12.5px; }
.lm-nova { padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.lm-resumo { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-resumo span { padding: 6px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; }
.lm-fora { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; }
.lm-gravar { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--gestao-soft); border: 1px solid #c3d5e8; border-radius: 12px; }
.lm-gravar p { margin: 0; }
.lm-gravar label { display: block; }
.lm-gravar label small { color: var(--muted); }
.lm-gravar > .botao-linha { align-self: flex-start; }
/* A lista desta empresa em Word (v81). */
.lm-gerar > p { margin: 0 0 8px; }
.lm-gerar-formas { display: grid; gap: 10px; }
.lm-gerar-formas .lm-form { margin: 0; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.lm-gerar-formas .lm-form label { font-size: 13px; }
.lm-form input.lm-gerar-nome:disabled { color: var(--muted); background: #f3f4f6; }
@media (max-width: 720px) {
    .req-previa, .req-importar { margin-left: 14px; margin-right: 14px; }
    .req-col-situacao { width: auto; }
    .req-matriz thead { display: none; }
    .req-matriz tr { display: grid; grid-template-columns: 64px 1fr; border-bottom: 1px solid #eef2f3; }
    .req-matriz td { border-bottom: 0; }
    .req-matriz td:nth-child(3), .req-matriz td:nth-child(4) { grid-column: 2; padding-top: 0; }
    .req-desfazer-caixa { margin-left: 14px; margin-right: 14px; }
    .req-lista-mestra, .lm-bloco { margin-left: 14px; margin-right: 14px; }
    .pastas-servidor-tabela thead { display: none; }
    .pastas-servidor-tabela, .pastas-servidor-tabela tbody, .pastas-servidor-tabela tfoot { display: block; }
    .pastas-servidor-tabela tfoot td.nomes-caixa { display: none; }
    .pastas-servidor-tabela tfoot tr { grid-template-columns: minmax(0, 1fr); }
    .pastas-servidor-tabela tfoot td:not(.nomes-caixa) { grid-column: 1; }
    .pastas-servidor-tabela tr { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid #e3e8ec; }
    .mapa-tabela.pastas-servidor-tabela td { display: block; padding: 2px 6px; border: 0; }
    .pastas-servidor-tabela td.nomes-caixa { grid-row: 1 / span 4; width: auto; }
    .pastas-servidor-tabela td:not(.nomes-caixa) { grid-column: 2; }
    .pastas-servidor-tabela td[data-rotulo]:not(.pastas-servidor-tela)::before { content: attr(data-rotulo) ": "; font-size: 11.5px; color: var(--muted); }
    .pastas-servidor-tabela .pastas-servidor-tela { font-weight: 600; }
    .pastas-servidor-sub .pastas-servidor-tela .ps-nome { padding-left: 0; }
    .pastas-servidor-acao { width: auto; text-align: left; }
    .pastas-servidor-tabela .pastas-servidor-docs { width: auto; text-align: left; white-space: normal; }
    .pastas-servidor-tabela .pastas-servidor-docs small { display: inline; }
    .pastas-servidor-tabela td.nomes-caixa { grid-row: 1 / span 6; }
    .pastas-servidor-acao:empty { display: none !important; }
    .lm-tabela thead { display: none; }
    .lm-tabela tr { display: flex; flex-wrap: wrap; column-gap: 14px; padding: 6px 0; border-bottom: 1px solid #eef2f3; }
    .mapa-tabela.lm-tabela td { flex: 1 1 100%; border-bottom: 0; padding: 2px 4px; }
    .mapa-tabela.lm-tabela td.lm-x { flex: 0 0 auto; text-align: left; }
    .mapa-tabela.lm-tabela td.lm-considerar { flex: 0 0 auto; width: auto; text-align: left; }
    .lm-tabela td.lm-x::before { content: attr(data-rotulo) ": "; font-weight: 400; color: var(--muted); }
    .lista-grupo { padding: 10px 14px 6px; }
    #documentList .lista-grupo-grade { display: block; }
    .lista-grupo-grade > :not(.lista-grupo-nome) { display: none !important; }
    .linha-vista .vista-titulo { flex: 1 1 100%; }
    .linha-organizar .filtro-organizar + .filtro-requisito { flex: 1 1 100%; min-width: 0; margin-left: 0; padding-left: 0; border-left: 0; }
    .filtro-requisito select { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; }
    .linha-exibir .filtro-tipos + .vista-sub { margin-left: 0; padding-left: 0; border-left: 0; }
    .lista-grupo-n2 { padding-left: 20px; }
    .lista-grupo-n3 { padding-left: 26px; }
    .org-tambem { white-space: normal; }
    .req-linha { flex-wrap: wrap; }
    .req-para { flex-basis: 100%; width: 100%; max-width: 100%; }
    .req-barra { padding: 10px 14px; }
    .req-tambem { white-space: normal; }
}

.ferramenta-reg-anvisa:has(input:checked)  { border-color: #8fcfa9; }
.ferramenta-reg-inmetro:has(input:checked) { border-color: #9dbbdb; }
.list-head { padding: 12px 22px; color: var(--muted); background: #fff; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.list-head .col-fonte, .list-head .col-pdf { font-size: 10.5px; }
.document-row { min-height: 60px; padding: 10px 22px; background: #fff; border-bottom: 1px solid var(--line); transition: background .16s ease, box-shadow .16s ease; }
/* Tabular-nums alinha os algarismos em colunas de mesma largura: sem isso,
   "1" e "8" ocupam espaços diferentes e a coluna de tamanhos fica trêmula. */
.document-size {
    color: var(--muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
/* ── As duas colunas de arquivo ─────────────────────────────────────────
   Cada célula guarda as pastilhas dos arquivos daquele lado, e cada pastilha
   leva junto o que é dela: a caixa de seleção, os botões e a marcação de
   acesso. É essa vizinhança que permite a linha ser do DOCUMENTO sem perder
   nada do que era por ARQUIVO. */
.celula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.arquivo-bloco { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* ⚠️ A MESMA ARMADILHA DA LINHA, UM NÍVEL ABAIXO (ver o comentário grande do
   `.document-row[hidden]` mais embaixo). O filtro de tipos esconde a PASTILHA
   pondo `hidden` nela, contando com o `[hidden] { display: none }` do
   navegador; só que essa regra é do USER-AGENT e a linha acima, do autor,
   ganha dela. Sem esta regra o `hidden` é marcado, a caixa até fica
   desabilitada, e a pastilha continua na tela: desligar "Word" não tirava o
   DOCX do par. Foi assim que o defeito chegou à v51. */
.arquivo-bloco[hidden] { display: none !important; }
.celula-vazia { color: #b4c2c6; font-size: 13px; }
.document-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.document-nome .document-name { flex: 1 1 200px; min-width: 0; }

/* A pastilha do arquivo: é ela que abre o documento. Cor por tipo, como o
   quadrado que havia antes à esquerda do nome. */
.chip-arquivo {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-decoration: none;
    white-space: nowrap;
}
.chip-arquivo:hover { filter: brightness(.94); }
.chip-word   { color: var(--gestao); background: #e3ecfb; }
.chip-excel  { color: var(--excel); background: #d7efdf; }
.chip-pdf    { color: var(--pdf); background: var(--pdf-soft); }
.chip-imagem { color: #6b4ea8; background: #f2eefb; }
.chip-outros { color: #4f6267; background: #eef2f3; }
/* ⚠️ "FALTA" NÃO É LINK, e por isso não tem `:hover`: não há o que abrir. Em
   âmbar e não em vermelho, porque PDF por publicar é pendência de trabalho, e
   não defeito: muitos documentos passam dias assim entre a revisão e a
   publicação. */
.chip-falta { color: #8a6400; background: #fdf3dc; border: 1px solid #ecd9a6; }
/* O "falta" não mora numa pastilha de arquivo: ele é escondido direto quando o
   filtro de PDF é desligado, e precisa da mesma regra pelo mesmo motivo. */
.chip-arquivo[hidden] { display: none !important; }

/* ⚠️ SEM ESTA LINHA A BUSCA NÃO FILTRA NADA, e o defeito é silencioso.
   O script da busca marca as linhas que não casam com o atributo `hidden`,
   contando com o `[hidden] { display: none }` do navegador. Só que aquela
   regra é do USER-AGENT, e qualquer regra do autor ganha dela: o
   `.document-row { display: grid }` logo acima reacenderia todas as linhas
   escondidas, e digitar na busca não esconderia nada. */
.document-row[hidden] { display: none !important; }
.document-row:last-child { border-bottom: 0; }
.document-row:hover { background: #f9fcfc; box-shadow: inset 4px 0 0 var(--brand); }
.document-main { min-width: 0; display: flex; align-items: center; gap: 13px; text-decoration: none; }
/* O quadrado carrega a extensão inteira (até quatro letras, "DOCX"), então a
   fonte é um pouco menor que a de antes, quando só cabia "DOC". */
.file-icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 38px; color: #4f6267; background: #eef2f3; border-radius: 10px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; }
.document-name { min-width: 0; }
.document-name strong { display: block; overflow: hidden; color: var(--text); font-size: 14.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
/* O número da posição. `type="number"` de propósito: no celular abre o
   teclado numérico, e as setinhas do desktop sobem e descem de um em um, que
   é exatamente o gesto de trocar de lugar. */
.ordem-input {
    width: 100%;
    height: 40px;
    padding: 0 6px;
    color: var(--gestao);
    background: #fff;
    border: 1px solid #c3d5e8;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    outline: none;
}
.ordem-input:focus { border-color: var(--gestao); box-shadow: 0 0 0 3px rgba(23,63,103,.12); }
.ordem-input.mudou { background: #fff8e1; border-color: #e0b44a; }
.row-action {
    min-height: 36px;
    padding: 7px 12px;
    color: var(--gestao);
    background: #fff;
    border: 1px solid #c3d5e8;
    border-radius: 9px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.row-action:hover { background: var(--gestao-soft); }
.row-action:disabled { opacity: .5; cursor: progress; }

/* Os dois botões da linha (PDF e Renomear) numa caixa só, para ocuparem uma
   coluna única da grade.

   ⚠️ SEM `display` AQUI. Quem manda no aparecer é o bloco das ferramentas, lá
   em cima; um `display: inline-flex` nesta regra viria depois na folha e
   ganharia do `display: none` de lá, deixando os botões na tela com as caixas
   desmarcadas. */
.row-acoes { align-items: center; gap: 6px; }
/* O PDF ganha a cor do documento que ele produz, a mesma do ícone de PDF da
   lista: quem procura o botão procura por essa cor. */
.row-action-pdf { color: var(--pdf); border-color: #e7c3c3; }
.row-action-pdf:hover { background: var(--pdf-soft); }

/* ── O EDITOR ─────────────────────────────────────────────────────────────
   O Editar fica na cor da gestão, e não numa cor própria: ele é a ação mais
   pesada da linha (grava por cima do documento publicado), e a cor do PDF ao
   lado já é a do arquivo que aquele botão produz.

   Como é um link vestido de botão, precisa das regras que o `<a>` não herda
   do `<button>`. */
.row-action-editar {
    color: var(--gestao);
    border-color: #c6d4ec;
    align-items: center;
    text-decoration: none;
}
.row-action-editar:hover { background: var(--gestao-soft); }

.botao-versoes {
    display: none;
    align-items: center;
    color: var(--gestao);
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
}
.botao-versoes:hover { background: var(--surface-soft); border-color: var(--gestao); }

/* ── A TELA DAS VERSÕES ANTERIORES ────────────────────────────────────────
   Mesmo desenho da árvore de acesso: um bloco por documento, uma linha por
   versão. */
.versoes-doc { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.versoes-doc-cabeca {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.versoes-doc-cabeca h2 { margin: 0; font-size: 15px; }
.versoes-conta {
    min-width: 24px; padding: 2px 8px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    font-size: 12px; font-weight: 700; text-align: center; color: var(--muted);
}
.versoes-linha {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line);
}
.versoes-linha:last-child { border-bottom: 0; }
.versoes-quando { font-variant-numeric: tabular-nums; font-weight: 600; }
.versoes-tamanho { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.versoes-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* ⚠️ AQUI OS `.row-action` APARECEM SEMPRE. A regra que os esconde lá em cima
   vale para a lista de documentos, onde eles dependem de uma caixa marcada;
   nesta tela eles SÃO a tela, e não há caixa nenhuma para marcar. */
.versoes-acoes .row-action,
.versoes-acoes .row-action-editar { display: inline-flex; }
.versoes-form { display: inline; margin: 0; }
.row-action-apagar { color: var(--perigo); border-color: #edc9cc; }
.row-action-apagar:hover { background: #fdf0f1; }

.type-excel { background: var(--excel-soft); }
.type-excel:hover { background: #e5f5eb; box-shadow: inset 4px 0 0 var(--excel); }
.type-excel .file-icon { color: var(--excel); background: #d7efdf; }
.type-pdf .file-icon { color: var(--pdf); background: var(--pdf-soft); }
/* Imagem deixou de cair em "genérico" e ganhou cor própria, como Excel e PDF
   já tinham: numa pasta de registros com foto, é o que separa a evidência
   fotográfica do documento escrito de relance. */
.type-imagem .file-icon { color: #6b4ea8; background: #f2eefb; }

.empty { padding: 46px 24px; color: var(--muted); text-align: center; }
.footer-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

/* ── Telas estreitas ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gestao-linha { grid-template-columns: 1fr; align-items: stretch; }
    .campo-vazio { display: none; }
    .botao-gestao { width: 100%; }
}
@media (max-width: 850px) {
    /* A barra já é uma coluna de faixas; no estreito o que muda é que os
       botões passam a ocupar a largura toda, para o dedo não errar o alvo. */
    .linha-botoes .botao-linha { flex: 1 1 100%; }

    /* O grupo de mover quebra em duas linhas: o menu de pastas em cima,
       ocupando a largura toda, e o botão embaixo, como os demais. O rótulo
       sai: "Mover selecionados" logo abaixo do menu já diz o que ele é, e no
       estreito cada linha a menos conta. */
    .grupo-mover { flex: 1 1 100%; flex-wrap: wrap; gap: 10px; }
    .rotulo-mover { display: none; }
    .select-mover { flex: 1 1 100%; max-width: none; min-height: 44px; }
}
@media (max-width: 760px) {
    .page { width: min(100% - 20px, 1120px); margin: 10px auto 24px; }
    .hero { padding: 16px; border-radius: 16px; }
    .logo-wrap { width: 132px; padding: 7px; border-radius: 10px; }
    .hero-acoes { position: absolute; top: 12px; right: 12px; }
    .zip-area-head { align-items: flex-start; flex-direction: column; }

    /* ⚠️ NO CELULAR A TABELA VIRA CARTÃO, uma linha embaixo da outra. Quatro
       colunas em 360 px de largura ou apertam tudo numa coluna de 40 px, ou
       empurram a tabela para uma barra de rolagem lateral que ninguém
       percebe. O cabeçalho some e cada célula passa a dizer o próprio nome,
       que vai no atributo `data-rotulo` lá no HTML. */
    .gestao-tabela-wrap { overflow-x: visible; background: transparent; border: 0; }
    .gestao-tabela, .gestao-tabela tbody, .gestao-tabela tr,
    .gestao-tabela td, .gestao-tabela tbody th { display: block; width: auto; }
    .gestao-tabela thead { display: none; }
    .gestao-tabela tbody tr {
        margin-bottom: 12px;
        padding: 14px;
        background: #fff;
        border: 1px solid #c3d5e8;
        border-radius: 12px;
    }
    .gestao-tabela tbody tr:last-child { margin-bottom: 0; }
    .gestao-tabela tbody tr + tr td, .gestao-tabela tbody tr + tr th { border-top: 0; }
    .gestao-tabela td, .gestao-tabela tbody th { padding: 0; }
    .gestao-tabela tbody th { margin-bottom: 12px; }
    .gestao-tabela td { margin-top: 10px; }
    .gestao-tabela td::before {
        content: attr(data-rotulo);
        display: block;
        margin-bottom: 5px;
        color: #4a678a;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .gestao-tabela .col-finalidade, .gestao-tabela td:nth-child(3),
    .gestao-tabela td:nth-child(4) { width: auto; white-space: normal; }
    .destino-fixo { width: 100%; }
    /* ⚠️ NO ESTREITO A LINHA EMPILHA, e as três colunas viram três faixas.
       Nome, Word e PDF lado a lado em 700 px deixam o nome com uns 200 px, e
       numa lista cujos nomes começam com código ("PRO 2.1-02 - …") truncar
       cedo é o mesmo que não mostrar nome. O cabeçalho some junto: sem as
       colunas alinhadas ele não rotula nada. */
    .list-head { display: none; }
    .list-head, .document-row,
    .is-gestao .list-head, .is-gestao .document-row,
    .mostra-ordem .is-gestao .list-head, .mostra-ordem .is-gestao .document-row {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "nome  ordem"
            "regs  regs"
            "fonte fonte"
            "pdf   pdf";
        gap: 8px 10px;
        padding: 12px 16px;
    }
    .document-row .col-marca { display: none; }
    .document-row .document-nome { grid-area: nome; }
    .document-row .col-fonte { grid-area: fonte; }
    .document-row .col-pdf { grid-area: pdf; }
    /* Empilhadas, as marcas viram selos com o nome ("Anvisa", "Inmetro"),
       só os que a linha tem; com a ferramenta ligada, as três caixas. */
    .com-regs .document-row .col-regs, .mostra-regulatorio .document-row .col-regs {
        grid-area: regs; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px;
    }
    .document-row .reg-cel { display: none; }
    .document-row .reg-cel.reg-tem { display: inline-flex; padding: 2px 9px 2px 3px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
    .document-row .reg-cel-anvisa.reg-tem  { color: #0b5d3b; background: #e8f6ee; }
    .document-row .reg-cel-inmetro.reg-tem { color: #173f67; background: #e8f0f8; }
    .document-row .reg-cel-iso13485.reg-tem { color: #5b3a8c; background: #f1ecf8; }
    .document-row .reg-cel-iso9001.reg-tem  { color: #8a5a00; background: #fff5e0; }
    .document-row .reg-cel-anatel.reg-tem   { color: #9a3412; background: #fdeee6; }
    .document-row .reg-cel-rotulo { display: inline; }
    .document-row .reg-cel.reg-tem .reg-sim { width: 18px; height: 18px; background: none; }
    .mostra-regulatorio .document-row .reg-cel { display: inline-flex; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font-size: 12px; }
    .document-row .col-regs:not(:has(.reg-tem)) { display: none; }
    .mostra-regulatorio .document-row .col-regs:not(:has(.reg-tem)) { display: flex; }
    .document-row .ordem-input { grid-area: ordem; }
    /* Empilhadas, as duas células precisam dizer qual é qual: na tela larga
       quem faz isso é o cabeçalho das colunas, que aqui não existe. */
    .document-row .celula::before {
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    /* ⚠️ AQUI O RÓTULO É "ARQUIVO", E NA TELA LARGA É "WORD / EXCEL", de
       propósito. Largo, ele é o TÍTULO DE UMA COLUNA, e diz o que se espera
       encontrar descendo por ela. Empilhado, ele fica colado numa pastilha só,
       e "WORD / EXCEL  JPG" vira uma etiqueta errada no arquivo. */
    .document-row .col-fonte::before { content: "Arquivo"; }
    .document-row .col-pdf::before { content: "PDF"; }
    /* Célula de um lado sem nada e sem pendência não vira faixa: "— " embaixo
       de um rótulo é uma linha gasta para dizer que não há nada. */
    .document-row .celula:has(> .celula-vazia:only-child) { display: none; }
    .row-action { padding: 7px 9px; font-size: 12px; }
}
@media (max-width: 520px) {
    .hero { align-items: flex-start; flex-direction: column; gap: 12px; padding-top: 58px; }
    .logo-wrap { width: 140px; }
    .eyebrow { display: none; }
    .subtitle { font-size: 12.5px; }
    /* Numa tela de 360 px o rótulo da chave briga com o botão Sair. Fica só
       o trilho, que já mostra o estado pela cor e pela posição. */
    .modo-texto { display: none; }
    .modo-chave { padding: 5px 9px; }
    /* O empilhamento já vem da faixa de 760 px; aqui só o que ainda aperta. */
    .document-nome .document-name { flex: 1 1 100%; }
    .document-row .ordem-input { width: 56px; }
    .zip-item { grid-template-columns: 1fr 1fr; }
    .zip-info { grid-column: 1 / -1; }
    .zip-item .download-button, .zip-item form, .zip-item .delete-button { width: 100%; }
}

/* ── Diagnóstico do servidor (no menu de clientes) ────────────────────────
   Uma gaveta no fim da página: consulta de quando algo dá errado, não de todo
   dia. */
.diagnostico-mestre { padding: 18px 22px; }
.diagnostico-mestre > summary {
    color: var(--gestao);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    list-style: none;
}
.diagnostico-mestre > summary::-webkit-details-marker { display: none; }
.diagnostico-mestre > summary::before { content: "▸ "; }
.diagnostico-mestre[open] > summary::before { content: "▾ "; }
.diagnostico-mestre .diagnostico-area { margin-top: 14px; }
.diagnostico-mestre h2 { display: none; }

/* ── Diagnóstico do servidor (a tabela em si) ─────────────────────────────
   Deixou de ser um <details>: quem abre e fecha é o botão da barra de
   ferramentas, e a separação em relação aos outros blocos vem da regra de
   `.bloco-gestao`, lá em cima, que sabe quais estão à vista. */
.diagnostico-area .gestao-nota { margin-top: 10px; }
.diagnostico-tabela .col-finalidade { width: 40%; }
.diagnostico-tabela td { color: #3f5f81; font-size: 13.5px; }

/* ═══ TELA DE ENTRADA COM ÁREA, EMPRESA E SENHA ═══════════════════════════ */
.login-card-entrada { max-width: 430px; }
.login-card .campo-rotulo,
.login-card label { display: block; margin: 14px 0 6px; color: var(--text); font-size: 13px; font-weight: 700; text-align: left; }
/* As áreas como pastilhas, e não como <select>: são três, cabem, e ver as três
   de uma vez evita abrir uma lista para descobrir o que existe. */
.areas-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.area-opcao { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 9px 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.area-opcao input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.area-opcao:hover { border-color: #b9dfdc; background: var(--brand-soft); }
.area-opcao:has(input:checked) { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand); }

/* ═══ MENU DE CLIENTES (só a senha mestra chega aqui) ═════════════════════ */
.hero-mestre .hero-texto { flex: 1; min-width: 0; }
.cliente-bloco { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.cliente-bloco:last-child { border-bottom: 0; }
.cliente-cabeca h2 { margin: 0; color: #123252; font-size: 17px; }
.cliente-dados { margin: 3px 0 12px; color: var(--muted); font-size: 12.5px; }
.cliente-dados strong { color: var(--gestao); font-family: ui-monospace, Consolas, monospace; }
.cliente-pasta { margin-left: 12px; font-family: ui-monospace, Consolas, monospace; opacity: .75; }
.salas-lista { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.sala-item { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.sala-abrir { margin: 0; }
.botao-sala { min-height: 36px; padding: 7px 16px; color: #fff; background: var(--gestao); border: 1px solid var(--gestao); border-radius: 9px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.botao-sala:hover { background: #0d2f50; }
.sala-gestao { font-size: 11.5px; font-weight: 700; }
.sala-gestao.pode { color: var(--excel); }
.sala-gestao.nao-pode { color: var(--muted); }
.sala-senha { font-size: 11.5px; }
.sala-senha > summary { color: var(--muted); cursor: pointer; list-style: none; }
.sala-senha > summary::-webkit-details-marker { display: none; }
.sala-senha > summary::before { content: "▸ "; }
.sala-senha[open] > summary::before { content: "▾ "; }
.sala-senha code { display: block; margin-top: 4px; padding: 3px 7px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.form-trocar { margin: 0; }

/* ═══ CADASTRO DE EMPRESAS (dentro do menu da senha mestra) ═══════════════ */
/* ── O aviso de empresa ainda na estrutura antiga ─────────────────────────
   Faixa clara com borda à esquerda: é aviso de estado, não erro. Fica entre a
   lista de salas e a gaveta de edição, que é onde o olho passa depois de ver
   as áreas da empresa. */
/* O aviso de senha mestra curta: âmbar, como o "ver como" ligado, porque é
   estado e não erro. */
.aviso-senha {
    margin: 18px 22px 0;
    padding: 14px 16px;
    color: #7a4e06;
    background: #fff4e0;
    border: 1px solid #e8c98d;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.aviso-senha code { padding: 1px 5px; background: #fff; border-radius: 4px; font-size: 12px; }

.empresa-migrar {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gestao);
    border-radius: 10px;
}
.migrar-nota { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.botao-migrar { color: #fff; background: var(--gestao); border: 1px solid var(--gestao); }
.botao-migrar:hover { background: #0d2f50; }

.empresa-editar, .empresa-nova { margin-top: 14px; font-size: 13px; }
.empresa-nova { padding: 18px 22px; border-top: 1px solid var(--line); }
.empresa-editar > summary, .empresa-nova > summary { color: var(--gestao); font-weight: 700; cursor: pointer; list-style: none; }
.empresa-editar > summary::-webkit-details-marker, .empresa-nova > summary::-webkit-details-marker { display: none; }
.empresa-editar > summary::before, .empresa-nova > summary::before { content: "▸ "; }
.empresa-editar[open] > summary::before, .empresa-nova[open] > summary::before { content: "▾ "; }
.form-empresa { margin-top: 12px; padding: 14px 16px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.form-empresa + .form-empresa { margin-top: 10px; }
.form-empresa label { display: block; margin-bottom: 10px; color: var(--text); font-size: 12.5px; font-weight: 700; }
.form-empresa input[type="text"] { width: 100%; margin-top: 4px; padding: 9px 11px; font-family: inherit; font-size: 13.5px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.form-empresa input[type="text"]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(0,123,123,.12); }
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Uma linha por área: a marca, a senha e a permissão do cliente. */
.area-linha { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.area-linha label { margin: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.area-linha input[type="checkbox"] { width: 16px; height: 16px; }
.area-senha { font-family: ui-monospace, Consolas, monospace; }
.area-gerencia { color: var(--muted); font-weight: 400 !important; font-size: 12px !important; }
.form-excluir { background: #fff8f8; border-color: #e7c3c3; }
.form-empresa .gestao-nota { margin: 10px 0 0; font-size: 12px; }
@media (max-width: 700px) {
    .campo-par { grid-template-columns: 1fr; }
    .area-linha { grid-template-columns: 1fr; gap: 6px; }
}

/* ═══ O QUE MUDOU ════════════════════════════════════════════════════════
   O atalho na tela de documentos, e a tela própria. */

/* ⚠️ O ATALHO NÃO ENTRA NA LISTA DOS ESCONDIDOS lá de cima, ao contrário dos
   outros `.botao-linha`. Aqueles dependem de uma caixa marcada; este é
   navegação, e quem mais precisa dele é o auditor, que nunca liga o Modo
   Gestão. Por isso ganha o `display` aqui. */
/* ⚠️ A FAIXA PRÓPRIA DO "O QUE MUDOU" SAIU NA v45, e o botão foi para a
   linha dos grupos. Ela era uma faixa de largura inteira com um botão e uma
   frase de duas linhas explicando o que ele faz, lida uma vez e depois
   ocupando espaço em toda tela, em toda pasta, para sempre. O nome do botão
   já diz o que ele faz, e a explicação está na tela que ele abre. */

/* ── Os períodos ───────────────────────────────────────────────────────── */
.periodos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 22px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}
.periodos-titulo {
    color: var(--muted); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.periodo {
    padding: 7px 13px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.periodo:hover { border-color: #b9dfdc; background: var(--brand-soft); }
.periodo.is-ativo { color: #fff; background: var(--gestao); border-color: var(--gestao); }
.periodo-data { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.periodo-data label { color: var(--muted); font-size: 12.5px; }
.periodo-data input[type="date"] {
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
    font-family: inherit; font-size: 13px;
}
.botao-periodo { display: inline-flex; color: var(--gestao); background: #fff; border: 1px solid var(--line); }
.botao-periodo:hover { background: var(--surface-soft); border-color: var(--gestao); }

/* ── O topo da lista ───────────────────────────────────────────────────── */
.novidades-topo {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
    padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.novidades-conta { font-size: 13px; color: var(--muted); }
.novidades-conta strong { color: var(--text); font-size: 15px; }
/* Nesta tela a seleção é o ponto, então ela aparece sempre: a regra geral do
   `.select-all` a esconde enquanto nenhuma ferramenta está ligada. */
.novidades-tudo { display: inline-flex; }
.novidades-busca { flex: 1 1 240px; min-width: 200px; }
.botao-zip-novidades {
    display: inline-flex; margin-left: auto;
    color: #fff; background: var(--brand); border: 1px solid var(--brand);
}
.botao-zip-novidades:hover { background: var(--brand-dark); }
.botao-zip-novidades:disabled { opacity: .45; cursor: not-allowed; }

/* ── As faixas de dia e as linhas ──────────────────────────────────────── */
.novidades-dia {
    padding: 9px 22px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.novidades-dia[hidden] { display: none; }
.novidades-linha {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.novidades-linha:hover { background: var(--surface-soft); }
.novidades-linha[hidden] { display: none; }
.novidade-caixa { width: 18px; height: 18px; }
/* A pasta embaixo do nome, e não numa coluna: numa lista que atravessa a
   árvore, ela é contexto do documento, não um dado para comparar entre linhas. */
.novidades-pasta { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.novidades-selos { display: flex; align-items: center; gap: 6px; }
.selo {
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.selo-atualizado { color: var(--gestao); background: var(--gestao-soft); border: 1px solid #c3d5e8; }
.selo-publicado { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); }
.selo-pdf { color: var(--pdf); background: var(--pdf-soft); border: 1px solid #e7c3c3; }
.novidades-hora { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.novidades-rodape { padding: 16px 22px; }

/* ── Os pacotes prontos ────────────────────────────────────────────────── */
.novidades-pacotes {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 14px 22px; background: var(--zip-soft); border-bottom: 1px solid var(--line);
}
.novidades-pacotes-titulo {
    color: var(--muted); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.botao-zip-pronto {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gestao); background: #fff; border: 1px solid var(--line); text-decoration: none;
}
.botao-zip-pronto:hover { border-color: var(--gestao); }
.pacote-tamanho { color: var(--muted); font-size: 12px; font-weight: 400; }

@media (max-width: 720px) {
    .novidades-linha { grid-template-columns: 30px minmax(0, 1fr) auto; }
    .novidades-hora, .novidades-linha .document-size { display: none; }
    .periodo-data { margin-left: 0; }
    .botao-zip-novidades { margin-left: 0; width: 100%; justify-content: center; }
}


/* =========================================================================
   O MAPA DE REFERÊNCIAS
   A tela `mapa.php`, o link ao lado do "O que mudou" e o botão "Onde é
   citado" da linha do documento.
   ========================================================================= */

/* O link do mapa, colado no "O que mudou" e no mesmo desenho dele, com a
   cor da gestão: só quem está na gestão (ou é a senha mestra) o vê. */
.atalho-mapa {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    color: var(--gestao);
    background: var(--gestao-soft);
    border: 1px solid #c3d5e8;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.atalho-mapa:hover { background: #dfeaf6; border-color: var(--gestao); }

/* O "Onde é citado" da linha é link vestido de botão, como o Editar. */
.row-action-citado { align-items: center; text-decoration: none; }

/* ── A situação do mapa ───────────────────────────────────────────────── */
.mapa-situacao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 16px 22px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}
.mapa-situacao-texto { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: 1 1 320px; font-size: 14px; }
.mapa-situacao-nota { color: var(--muted); font-size: 13px; }
.mapa-form-atualizar { margin: 0; }
.botao-atualizar-mapa { display: inline-flex; align-items: center; color: #fff; background: var(--gestao); border: 1px solid var(--gestao); min-width: 150px; justify-content: center; }
.botao-atualizar-mapa:hover { background: #0d2f50; }
.mapa-mudancas { flex-basis: 100%; font-size: 13px; color: #6b4a00; }
.mapa-mudancas summary { cursor: pointer; }
.mapa-mudancas ul { margin: 8px 0 0; padding-left: 18px; color: var(--text); line-height: 1.6; }
.mapa-mudanca-tipo { display: inline-block; min-width: 68px; color: var(--muted); font-size: 12px; }
.selo-em-dia { color: #176b3a; background: #ecfdf3; border: 1px solid #86d8a6; }
.selo-desatualizado { color: #8a5a00; background: #fff8e1; border: 1px solid #e0b44a; }
.selo-problema { color: var(--perigo); background: #fdf0f1; border: 1px solid #edc9cc; margin-left: 4px; }
/* O selo pequeno do mapa: "PDF", "PDF desatualizado", "só no PDF", "só no Word". */
.mapa-selo { margin-left: 4px; padding: 2px 7px; font-size: 10px; vertical-align: 1px; }
.mapa-doc-aviso { margin-top: 6px; font-size: 13px; }
.mapa-ficha small { color: var(--muted); font-weight: 400; }

/* ── As vistas e os cartões ───────────────────────────────────────────── */
.mapa-vistas span.periodo { cursor: default; }
.mapa-cartoes { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 22px 6px; }
.mapa-cartao {
    min-width: 112px;
    padding: 10px 14px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    font-size: 12.5px;
    text-decoration: none;
}
.mapa-cartao b { display: block; color: var(--text); font-size: 21px; line-height: 1.2; }
a.mapa-cartao:hover { background: var(--surface-soft); }
.mapa-cartao-erro { border-color: #efaaaa; } .mapa-cartao-erro b { color: var(--perigo); }
.mapa-cartao-aviso { border-color: #e9c46a; } .mapa-cartao-aviso b { color: #a15c00; }
.mapa-cartao-info b { color: #475467; }
.mapa-explica { padding: 10px 22px 0; }

/* ── As verificações do relatório ─────────────────────────────────────── */
.mapa-parcial {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin: 14px 22px 0; padding: 9px 13px;
    color: #6b4a00; background: #fff8e1; border: 1px solid #e0b44a; border-radius: 9px; font-size: 13px;
}
.mapa-parcial > span { flex: 1 1 320px; min-width: 0; }
.mapa-form-inline { margin: 0; }
.mapa-parcial .botao-linha { min-height: 32px; padding: 5px 12px; background: #fff; border: 1px solid #e0b44a; color: #6b4a00; }
.mapa-verificacoes { margin: 14px 22px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.mapa-verificacoes > summary { padding: 10px 13px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--gestao); }
.mapa-verificacoes > summary span { color: var(--muted); font-weight: 400; }
.mapa-verificacoes form { padding: 0 13px 13px; }
.mapa-verif-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; }
.mapa-verif-grupo { min-width: 0; margin: 0; padding: 8px 10px 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.mapa-verif-grupo legend { padding: 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #1b3e46; }
.mapa-verif-grupo legend label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mapa-verif-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; cursor: pointer; }
.mapa-verif-item input { margin-top: 2px; flex: none; }
.mapa-verif-texto { min-width: 0; }
.mapa-verif-nome { font-weight: 600; }
.mapa-verif-conta {
    display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px;
    border-radius: 999px; background: var(--gestao-soft); color: var(--gestao);
    font-size: 11px; font-weight: 700; text-align: center;
}
.mapa-verif-conta.is-zero { background: var(--surface-soft); color: var(--muted); font-weight: 400; }
.mapa-verif-texto small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.mapa-verif-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.mapa-verif-acoes .botao-linha:not(.botao-atualizar-mapa) { background: #fff; border: 1px solid #c3d5e8; color: var(--gestao); }

/* ── Os achados ───────────────────────────────────────────────────────── */
.mapa-grupo { margin: 26px 22px 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 17px; }
.mapa-grupo span { color: var(--muted); font-weight: 400; }
.mapa-grupo-erro { color: var(--perigo); }
.mapa-grupo-aviso { color: #a15c00; }
.mapa-grupo-info { color: #475467; }
.mapa-achado { margin: 8px 22px; padding: 9px 13px; background: #fcfcfd; border-left: 3px solid #d0d5dd; border-radius: 0 9px 9px 0; }
.mapa-achado-erro { border-left-color: var(--perigo); }
.mapa-achado-aviso { border-left-color: #d08a00; }
.mapa-achado-tipo { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mapa-achado-texto { margin: 3px 0 0; font-size: 14px; line-height: 1.5; }
.mapa-ocorrencias { margin: 6px 0 0; padding-left: 18px; color: #475467; font-size: 13px; line-height: 1.55; }
.mapa-ocorrencias a, .mapa-tabela a { color: var(--gestao); }
.mapa-local { color: var(--muted); font-size: 12px; }
.mapa-ocorrencias .mapa-trecho::before { content: "\201C"; }
.mapa-ocorrencias .mapa-trecho::after { content: "\201D"; }

/* ── As ocorrências de cada achado, recolhidas de saída ───────────────── */
.mapa-detalhes-acoes {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
    margin: 16px 22px 0; color: var(--muted); font-size: 13px;
}
.mapa-detalhes-acoes .botao-linha { min-height: 32px; padding: 5px 12px; }
.mapa-detalhe > summary {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
    color: var(--gestao); font-size: 12.5px; font-weight: 600; cursor: pointer; list-style: none;
}
.mapa-detalhe > summary::-webkit-details-marker { display: none; }
.mapa-detalhe > summary::before { content: "\25B8"; display: inline-block; font-size: 11px; transition: transform .15s; }
.mapa-detalhe[open] > summary::before { transform: rotate(90deg); }
.mapa-detalhe > summary:hover { text-decoration: underline; }
.mapa-detalhe-fechar, .mapa-detalhe-conta { display: none; }
.mapa-detalhe[open] .mapa-detalhe-abrir { display: none; }
.mapa-detalhe[open] .mapa-detalhe-fechar { display: inline; }
.mapa-nota-ignorados { color: #6b4a00; }
.mapa-ignorados { margin: 0 22px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.mapa-ignorados summary { cursor: pointer; }
.mapa-ignorados ul { margin: 4px 0 8px; padding-left: 18px; color: var(--muted); }

/* ── As tabelas ───────────────────────────────────────────────────────── */
.mapa-tabela-wrap { padding: 0 22px 8px; overflow-x: auto; }
.mapa-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.mapa-tabela th {
    padding: 9px 8px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}
.mapa-tabela td { padding: 8px; border-bottom: 1px solid #eef2f3; vertical-align: top; line-height: 1.45; }
.mapa-tabela tr[hidden] { display: none; }
.mapa-col-codigo { white-space: nowrap; font-weight: 700; }
.mapa-col-rev, .mapa-tabela th.mapa-col-rev { width: 52px; text-align: center; }
.mapa-col-pasta { color: var(--muted); }
.mapa-col-num, .mapa-tabela th.mapa-col-num { width: 120px; text-align: right; white-space: nowrap; }
.mapa-col-item { width: 92px; white-space: nowrap; }
.mapa-col-item .mapa-local { display: block; }
.mapa-col-obs { width: 200px; }
.mapa-zero { color: var(--muted); }

/* ── A lista de documentos: ausentes, ordem, quem cita, duplicados ────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mapa-ordem-acoes { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mapa-ordem-modo { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.mapa-ordem-acoes [hidden], .mapa-ordem-modo[hidden] { display: none !important; }
.mapa-ordem-acoes .botao-linha { min-height: 34px; padding: 6px 12px; }
.mapa-ordem-nota { color: #6b4a00; }
.mapa-tabela-docs .mapa-col-alca { display: none; }
.mapa-tabela-docs.reordenando .mapa-col-alca { display: table-cell; width: 66px; white-space: nowrap; }
.mapa-tabela-docs.reordenando tbody.mapa-bloco tr { cursor: grab; }
.mapa-tabela-docs.reordenando tbody.mapa-bloco tr:hover td { background: var(--gestao-soft); }
.mapa-tabela-docs tr.arrastando td { opacity: .35; }
.mapa-alca { margin-right: 4px; color: var(--muted); font-size: 15px; cursor: grab; }
.mapa-mover {
    width: 22px; height: 22px; padding: 0; margin-left: 1px;
    color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; border-radius: 6px;
    font-size: 10px; line-height: 1; cursor: pointer;
}
.mapa-mover:hover { background: var(--gestao-soft); }
.mapa-salvar-ignorar { float: right; min-height: 30px; padding: 4px 11px; font-size: 12.5px; }
.mapa-salvar-ignorar:disabled { opacity: .45; cursor: default; }
.mapa-ignorar { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; cursor: pointer; }
.mapa-ausente-origem { font-size: 12.5px; }
.mapa-tabela-docs tr.is-ignorado td { color: var(--muted); }
.mapa-tabela-docs tr.is-ignorado .mapa-col-codigo a { color: var(--muted); }
.mapa-quem > summary { color: var(--gestao); cursor: pointer; }
.mapa-quem[open] > summary { margin-bottom: 4px; }
.mapa-quem ul {
    min-width: 240px; max-width: 360px; margin: 0 0 0 auto; padding: 6px 0 0;
    list-style: none; text-align: left; white-space: normal; border-top: 1px dashed var(--line);
}
.mapa-quem li { padding: 2px 0; font-size: 12.5px; line-height: 1.4; }
.mapa-quem .mapa-quem-titulo { margin-left: 4px; font-size: 12px; }
.mapa-dup { margin: 0; padding: 0; list-style: none; }
.mapa-dup li { padding: 2px 0; font-size: 12.5px; line-height: 1.4; }
.mapa-dup li + li { border-top: 1px dashed var(--line); }
.mapa-dup-nome { display: block; color: var(--text); }

/* ── O "Onde é citado" ────────────────────────────────────────────────── */
.mapa-doc { padding: 18px 22px 4px; }
.mapa-doc-titulo { margin: 0; font-size: 19px; line-height: 1.35; }
.mapa-doc-codigo { margin-right: 6px; color: var(--gestao); }
.mapa-doc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.mapa-acao { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; text-decoration: none; }
.mapa-faixa th {
    padding: 16px 8px 6px;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}
.mapa-faixa a { color: var(--gestao); }
.mapa-quem-titulo { margin-left: 6px; color: var(--muted); font-weight: 400; }
.mapa-cita { padding: 0 22px 6px; }
.mapa-cita-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mapa-cita-titulo { min-width: 92px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mapa-ficha {
    padding: 3px 9px;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    text-decoration: none;
}
a.mapa-ficha { color: var(--gestao); border-color: #c3d5e8; background: #fff; }
a.mapa-ficha:hover { background: var(--gestao-soft); }
.mapa-ficha-falta { color: var(--perigo); border-color: #edc9cc; background: #fdf0f1; }
.mapa-rodape { padding: 18px 22px; margin: 10px 0 0; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
    .mapa-col-pasta, .mapa-col-rev { display: none; }
    .mapa-col-obs { width: auto; }
    .botao-atualizar-mapa { width: 100%; }
    .mapa-form-atualizar { flex-basis: 100%; }
}

/* ── Exportar: PDF e planilha ─────────────────────────────────────────── */
/* À direita da linha das vistas: são saídas da vista aberta, e não outra
   vista. */
.mapa-exportar { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mapa-botao-exportar {
    display: inline-flex;
    align-items: center;
    color: var(--gestao);
    background: #fff;
    border: 1px solid #c3d5e8;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.mapa-botao-exportar:hover { background: var(--gestao-soft); border-color: var(--gestao); }

/* ⚠️ A FOLHA DE IMPRESSÃO É O "PDF". O navegador salva como PDF o que
   imprimiria, então tudo que é tela (botões, busca, fundo, sombras) sai, e o
   que sobra é o relatório. As ocorrências recolhidas em "mais N" são abertas
   pelo script antes de imprimir: um <details> fechado não sai no papel, e o
   PDF ficaria mais curto do que o relatório. */
/* ══ O CRUZAMENTO DO PRODUTO ═════════════════════════════════════════════ */
/* Os produtos: um botão por produto e o "Novo produto". */
.prod-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.prod-barra-titulo { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prod-barra-nota { color: var(--muted); font-size: 13px; }
.prod-chip {
    padding: 6px 12px; color: var(--gestao); background: var(--gestao-soft); border: 1px solid #c3d5e8;
    border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none;
}
.prod-chip:hover { border-color: var(--gestao); }
.prod-chip.is-ativo { color: #fff; background: var(--gestao); border-color: var(--gestao); }
.prod-novo { margin-left: auto; display: inline-flex; align-items: center; color: var(--gestao); background: #fff;
             border: 1px dashed var(--gestao); text-decoration: none; }
.prod-novo:hover, .prod-novo.is-ativo { background: var(--gestao-soft); }

/* O formulário do produto, em três passos. */
.prod-form { padding-bottom: 6px; }
.prod-passo { margin: 0 22px 18px; }
.prod-rotulo { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.prod-rotulo b { color: var(--gestao); }
.prod-rotulo small { color: var(--muted); font-weight: 400; }
.prod-nome { width: min(420px, 100%); padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 14px; }
.prod-nome:focus, .prod-busca input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,123,123,.12); }
.prod-siglas { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-sigla { cursor: pointer; }
.prod-sigla input { position: absolute; opacity: 0; pointer-events: none; }
.prod-sigla span {
    display: inline-block; padding: 5px 11px; color: var(--muted); background: #fff; border: 1px solid var(--line);
    border-radius: 999px; font-size: 13px; font-weight: 700;
}
.prod-sigla span small { font-weight: 400; }
.prod-sigla input:checked + span { color: #fff; background: var(--brand); border-color: var(--brand); }
.prod-sigla input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,123,123,.25); }
.prod-busca { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prod-busca input { flex: 1 1 280px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13px; }
.prod-busca .botao-linha { min-height: 34px; padding: 6px 12px; color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; }
.prod-docs-wrap { padding: 0; }
.prod-docs .prod-col-cruzar { width: 58px; text-align: center; }
.prod-docs .prod-col-cruzar input { width: 17px; height: 17px; cursor: pointer; }
.prod-docs tr.is-marcado td { background: var(--brand-soft); }
.prod-docs tr[hidden] { display: none; }
.prod-doc { display: block; cursor: pointer; }
.prod-doc-titulo { display: block; color: var(--text); }
.prod-doc-pasta { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.prod-papeis { display: flex; flex-wrap: wrap; gap: 4px; }
.prod-papel { cursor: pointer; }
.prod-papel input { position: absolute; opacity: 0; pointer-events: none; }
.prod-papel span {
    display: inline-block; padding: 4px 9px; color: var(--muted); background: #fff; border: 1px solid var(--line);
    border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.prod-papel input:checked + span { color: var(--gestao); background: var(--gestao-soft); border-color: var(--gestao); }
.prod-papel input:focus-visible + span { box-shadow: 0 0 0 3px rgba(23,63,103,.25); }
.prod-docs tr:not(.is-marcado) .prod-papel span { opacity: .55; }
.prod-sem-resultado { padding: 24px; }
.prod-legenda { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
.prod-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 22px 14px; }
.prod-so-salvar, .prod-cancelar, .prod-editar {
    display: inline-flex; align-items: center; color: var(--gestao); background: #fff; border: 1px solid #c3d5e8; text-decoration: none;
}
.prod-excluir { margin: 0 22px 16px; text-align: right; }
.prod-botao-excluir { color: var(--perigo); background: #fff; border: 1px solid #edc9cc; }
.prod-botao-excluir:hover { background: #fdf0f1; }

/* A lista dos produtos. */
.prod-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 18px 22px; }
.prod-cartao {
    display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; color: var(--text); background: #fff;
    border: 1px solid var(--line); border-radius: 12px; text-decoration: none;
}
.prod-cartao:hover { border-color: var(--gestao); background: var(--gestao-soft); }
.prod-cartao strong { font-size: 16px; color: var(--gestao); }
.prod-cartao-docs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; font-weight: 700; }
.prod-cartao-docs small { color: var(--muted); font-weight: 400; }
.prod-cartao-nota { color: var(--muted); font-size: 12.5px; }

/* O produto e o resultado. */
.prod-situacao { border-top: 0; }
.prod-titulo { font-size: 17px; color: var(--gestao); }
.prod-papel-selo {
    display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
    color: var(--gestao); background: var(--gestao-soft); border: 1px solid #c3d5e8;
}
.prod-papel-lista_mestra { color: #fff; background: var(--gestao); border-color: var(--gestao); }
.prod-papel-embalagem { color: #6b4a00; background: #fff8e1; border-color: #e0b44a; }
.prod-papel-outros { color: var(--muted); background: var(--surface-soft); border-color: var(--line); }
.prod-docs-do-produto { margin-top: 6px; }
.prod-tipo { margin: 16px 22px 4px; color: var(--text); font-size: 14px; }
.prod-tipo span { color: var(--muted); font-weight: 400; }
.prod-ocorrencias { margin-top: 6px; background: #fff; }
.prod-ocorrencias th { padding: 6px 8px; font-size: 10.5px; }
.prod-ocorrencias td { padding: 6px 8px; }
.prod-col-item { white-space: nowrap; }
.prod-grade-caixa { margin: 0 22px 10px; }
.prod-grade-caixa > summary { padding: 8px 0; color: var(--gestao); font-size: 13px; font-weight: 700; cursor: pointer; }
.prod-grade-caixa .mapa-tabela-wrap { padding: 0; }
.prod-grade-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 10px; }
.prod-grade th.prod-col-doc, .prod-grade td.prod-col-doc { text-align: center; white-space: nowrap; }
.prod-grade th small { display: block; font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.prod-grade tr.prod-fora td { background: #fdf0f1; }
.prod-celula {
    display: inline-block; min-width: 34px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; text-align: center;
}
.prod-celula-tem { color: #176b3a; background: #ecfdf3; border: 1px solid #b7e6c8; }
.prod-celula-difere { color: #8a5a00; background: #fff3c4; border: 1px solid #e0b44a; cursor: help; }
.prod-celula-qtd { box-shadow: inset 0 -3px 0 var(--perigo); color: var(--perigo); cursor: help; }
.prod-fora-do-cruzamento { display: block; }
.prod-celula-falta { color: var(--perigo); background: #fdf0f1; border: 1px solid #edc9cc; }
.prod-celula-nao_se_aplica { min-height: 20px; background: repeating-linear-gradient(45deg, #f4f6f7, #f4f6f7 4px, #fff 4px, #fff 8px); border: 1px solid #eef2f3; }
.prod-etapas { display: block; color: var(--muted); font-size: 11px; }

@media (max-width: 720px) {
    .prod-barra, .prod-lista { padding-left: 14px; padding-right: 14px; }
    .prod-passo, .prod-acoes, .prod-excluir, .prod-tipo, .prod-grade-caixa { margin-left: 14px; margin-right: 14px; }
    .prod-novo { margin-left: 0; }
    .prod-docs thead { display: none; }
    .prod-docs tr { display: grid; grid-template-columns: 44px 1fr; border-bottom: 1px solid #eef2f3; }
    .prod-docs td { border-bottom: 0; }
    .prod-docs td:last-child { grid-column: 1 / -1; padding-top: 0; padding-left: 52px; }
    .prod-acoes .botao-linha { flex: 1 1 auto; justify-content: center; }
    .prod-docs-do-produto thead { display: none; }
    .prod-docs-do-produto tr { display: block; padding: 8px 0; border-bottom: 1px solid #eef2f3; }
    .prod-docs-do-produto td { display: block; padding: 2px 8px; border-bottom: 0; }
    .prod-docs-do-produto td.mapa-col-num { width: auto; text-align: left; white-space: normal; }
    .prod-docs-do-produto td.mapa-col-num::before { content: "Itens lidos: "; color: var(--muted); font-size: 12px; }
    .prod-situacao .mapa-situacao-texto { flex-basis: 100%; }
}

@media print {
    @page { margin: 12mm 11mm; }

    body { background: #fff !important; min-height: 0; }
    .page { width: auto !important; margin: 0 !important; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .hero { padding: 0 0 10px; background: #fff !important; border: 0; border-bottom: 2px solid #1b3e46;
            border-radius: 0; box-shadow: none; }
    .hero::after { display: none; }
    .logo-wrap { width: 110px; box-shadow: none; }
    .hero-acoes,
    .mapa-form-atualizar,
    .mapa-exportar,
    .novidades-busca,
    .mapa-mudancas ul,
    .mapa-detalhes-acoes,
    .mapa-ordem-acoes,
    .mapa-ordem-nota,
    .mapa-tabela-docs .mapa-col-alca,
    .mapa-salvar-ignorar,
    .mapa-ignorar input,
    .mapa-detalhe-abrir,
    .mapa-detalhe[open] > summary,
    .mapa-verificacoes,
    .mapa-parcial form,
    .mapa-acao,
    .message,
    #semResultadoMapa { display: none !important; }

    .panel { margin-top: 10px; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
    .mapa-situacao { padding: 8px 0; background: #fff; }
    .mapa-vistas { padding: 6px 0 10px; background: #fff; }
    .mapa-vistas .periodo:not(.is-ativo) { display: none; }
    .mapa-vistas .periodo.is-ativo { padding: 0; color: #1b3e46; background: none; border: 0; font-size: 16px; }

    .mapa-cartoes, .mapa-explica, .mapa-tabela-wrap, .mapa-doc, .mapa-cita, .mapa-rodape { padding-left: 0; padding-right: 0; }
    .mapa-grupo, .mapa-achado, .mapa-ignorados, .mapa-parcial { margin-left: 0; margin-right: 0; }
    .mapa-tabela-wrap { overflow: visible; }

    .mapa-grupo { break-after: avoid; }
    .mapa-achado, .mapa-cartao, .mapa-tabela tr { break-inside: avoid; }
    .mapa-tabela thead { display: table-header-group; }
    .mapa-tabela td, .mapa-tabela th { padding: 5px 6px; }
    .mapa-tabela, .mapa-ocorrencias { font-size: 11px; }

    /* Link no papel é só texto: a cor de link sozinha não leva a lugar
       nenhum, e o sublinhado atrapalha a leitura do código. */
    a { color: inherit !important; text-decoration: none !important; }
    .mapa-detalhe > summary::before { display: none; }
    .mapa-detalhe > summary { color: var(--muted); font-weight: 400; }
    .mapa-detalhe:not([open]) .mapa-detalhe-conta { display: inline; }
    .mapa-fora-grupo > summary { list-style: none; font-weight: 700; }

    /* O cruzamento do produto: sai o resultado, sem os botões. */
    .prod-barra, .prod-editar, #formCruzar, .prod-grade-caixa > summary { display: none !important; }
    .prod-tipo, .prod-grade-caixa { margin-left: 0; margin-right: 0; }
    .prod-grade-caixa:not([open]), #grade:has(+ .prod-grade-caixa:not([open])) { display: none; }
    .prod-grade { font-size: 10px; }
    .prod-celula { min-width: 0; padding: 0 4px; font-size: 10px; }

    /* Requisitos x Documentos: sai a tabela, sem a importação nem os botões. */
    .req-normas, .req-acoes, .req-na, .req-na-form, #importar, .req-previa, .req-importar,
    .req-para, .req-incluir, .req-barra, .req-desfazer-caixa, .req-membros > summary { display: none !important; }
    .req-linha { padding: 0; font-size: 10px; }
    .req-vai, .req-sai, .req-nova { background: none; }
    .req-matriz { font-size: 10.5px; }
    .req-doc { padding: 0 4px; font-size: 10px; border: 0; }
}

/* ══ TIRAR O NÚMERO DOS NOMES (v67) ════════════════════════════════════ */
.nomes-painel { padding: 18px 22px 24px; }
.nomes-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 6px; }
.nomes-todos { display: inline-flex; }
.nomes-conta { flex: 1 1 260px; color: var(--muted); font-size: 13px; }
.nomes-conta strong { color: var(--text); font-size: 15px; }
.nomes-nota { margin: 4px 0 14px; }
.nomes-tabela { width: 100%; margin-bottom: 16px; }
.nomes-tabela .nomes-caixa { width: 34px; text-align: center; }
.nomes-pasta-titulo { color: #fff; background: var(--gestao); font-size: 13px; text-align: left; }
.nomes-tabela thead tr:first-child th { color: #fff; background: var(--gestao); }
.nomes-pasta-titulo small { font-weight: 600; opacity: .8; }
.nomes-colunas th { font-size: 11px; }
.nomes-atual { color: var(--muted); }
.nomes-novo { font-weight: 600; }
.nomes-tipos { width: 110px; color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.nomes-conflito td { background: #f1f2f4; }
.nomes-conflito .nomes-novo { color: #8a929c; font-weight: 500; }
@media (max-width: 720px) {
    .nomes-painel { padding: 14px 12px 20px; }
    .nomes-tipos { display: none; }
    .nomes-colunas th:last-child { display: none; }
}

/* =========================================================================
   O AGENTE DE REVISÃO (v83)
   ========================================================================= */
.empresa-agente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; padding: 8px 12px;
    font-size: 13px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; }
.empresa-agente.liberado { background: #ebf6ee; border-color: #cfe7d6; }
.empresa-agente.liberado .agente-estado strong { color: var(--excel); }
.agente-gasto { color: var(--muted); }
.empresa-agente .botao-linha { margin-left: auto; padding: 5px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--gestao);
    background: #fff; border: 1px solid #c3d5e8; border-radius: 8px; cursor: pointer; }
.empresa-agente .botao-linha:hover { background: var(--gestao-soft); }

.ag-form { display: grid; gap: 12px; }
.ag-campo { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: #123252; }
.ag-campo select, .ag-campo textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-weight: 400;
    font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ag-campo textarea { resize: vertical; min-height: 96px; }
.ag-acervo { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; display: grid; gap: 4px; }
.ag-acervo legend { padding: 0 4px; font-weight: 600; color: #123252; }
.ag-form-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ag-gasto { margin: 0 0 8px; }
.ag-gasto small { color: var(--muted); }
.ag-revisoes .ag-pedido-curto { font-size: 12.5px; color: #33454b; }
.ag-revisoes tr.ag-encerrada td { color: #7d8a90; }
.ag-encerrar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }

.ag-resumo { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 8px 12px; font-size: 13px;
    background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; }
.ag-custo { margin-left: auto; }
.ag-tela { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: #f6f8fa; overflow: hidden; }
.ag-conversa { min-height: 260px; max-height: 64vh; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ag-carregando { color: var(--muted); font-size: 13px; }
.ag-msg { max-width: 92%; padding: 10px 14px; border-radius: 12px; line-height: 1.5; font-size: 14px; overflow-wrap: anywhere; }
.ag-msg-usuario { align-self: flex-end; background: #e6effa; border: 1px solid #c9dbef; white-space: pre-wrap; }
.ag-msg-agente { align-self: flex-start; background: #fff; border: 1px solid var(--line); }
.ag-msg-agente.ag-parcial { white-space: pre-wrap; color: #3d4f55; }
.ag-msg-agente p { margin: 0 0 8px; }
.ag-msg-agente p:last-child { margin-bottom: 0; }
.ag-msg-agente h3, .ag-msg-agente h4, .ag-msg-agente h5, .ag-msg-agente h6 { margin: 10px 0 6px; color: #123252; font-size: 15px; }
.ag-msg-agente ul, .ag-msg-agente ol { margin: 4px 0 8px; padding-left: 22px; }
.ag-msg-agente code { padding: 0 4px; font-size: 12.5px; background: #f1f4f6; border-radius: 4px; }
.ag-msg-agente pre { margin: 6px 0; padding: 8px 10px; overflow-x: auto; background: #f1f4f6; border-radius: 8px; }
.ag-msg-agente pre code { padding: 0; background: none; }
.ag-msg-agente blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid #c9dbef; color: #44575d; }
.ag-msg-agente hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.ag-tabela { max-width: 100%; overflow-x: auto; margin: 6px 0 10px; }
.ag-tabela table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.ag-tabela th, .ag-tabela td { padding: 5px 8px; border: 1px solid #dfe6ea; text-align: left; vertical-align: top; }
.ag-tabela th { background: #eef4fb; color: #123252; }
.ag-acoes { align-self: flex-start; max-width: 92%; font-size: 12.5px; color: var(--muted); }
.ag-acoes summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-acoes ol { margin: 4px 0 0; padding-left: 22px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.ag-aviso { align-self: center; margin: 0; padding: 4px 10px; font-size: 12.5px; color: #5c6b71; background: #fff; border: 1px dashed #cfd8dc; border-radius: 8px; }
.ag-aviso-erro { color: var(--perigo); border-color: #edc9cc; }
.ag-confirmar .botao-linha { margin-left: 6px; }
.ag-estado { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; color: #44575d; background: #fff;
    border-top: 1px solid var(--line); }
.ag-luz { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #a9b4b9; }
.ag-estado-trabalhando .ag-luz { background: #d9a400; animation: agPulso 1.1s ease-in-out infinite; }
.ag-estado-aguardando .ag-luz { background: #2e9d5b; }
.ag-estado-erro { color: var(--perigo); }
.ag-estado-erro .ag-luz { background: var(--perigo); }
.ag-estado-conexao .ag-luz { background: #d9a400; }
.ag-estado-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes agPulso { 50% { opacity: .35; } }
.ag-compor { display: flex; gap: 10px; align-items: flex-end; padding: 10px 14px; background: #fff; border-top: 1px solid var(--line); }
.ag-compor textarea { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font: inherit; font-size: 14px; border: 1px solid var(--line);
    border-radius: 8px; resize: vertical; }
.ag-compor-botoes { display: flex; flex-direction: column; gap: 6px; }
.ag-rodape { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ag-arquivos { flex: 1 1 360px; padding: 10px 12px; background: #ebf6ee; border: 1px solid #cfe7d6; border-radius: 10px; font-size: 13px; }
.ag-arquivos ul { margin: 6px 0 10px; padding-left: 20px; }
.ag-arquivos .gestao-nota { margin: 8px 0 0; }
.ag-encerrar-grande { flex: 0 1 auto; }
.ag-pedido { white-space: normal; font-size: 13.5px; }
@media (max-width: 720px) {
    .ag-msg, .ag-acoes { max-width: 100%; }
    .ag-compor { flex-direction: column; align-items: stretch; }
    .ag-compor-botoes { flex-direction: row; }
    .ag-custo { margin-left: 0; }
    .ag-conversa { max-height: 58vh; padding: 10px; }
}

/* =========================================================================
   A TELA EM TRÊS ZONAS (v84)

   Como um gerenciador de arquivos: o cabeçalho fino, o MENU em cima (o que
   fazer), a ÁRVORE de pastas à esquerda (onde) e, à direita, o caminho, os
   ícones e a lista.

   ⚠️ SÓ A TELA DE DOCUMENTOS (`.page-app`). As outras páginas (requisitos,
   lista mestra, mapa, agente) continuam com o cabeçalho de antes até
   ganharem a mesma moldura.
   ========================================================================= */
.page-app { width: min(1440px, calc(100% - 32px)); margin: 16px auto 28px; }

/* ── O cabeçalho fino ─────────────────────────────────────────────────── */
.hero-fino { gap: 14px; padding: 8px 16px; border-radius: 14px; box-shadow: none; }
.hero-fino::after { display: none; }
.hero-fino .logo-wrap { width: 108px; padding: 4px 7px; border-radius: 9px; box-shadow: none; }
.hero-fino .hero-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.hero-fino h1 { font-size: 18px; line-height: 1.2; }
.hero-area {
    padding: 2px 10px;
    color: var(--brand-dark);
    background: rgba(255,255,255,.75);
    border: 1px solid var(--hero-linha);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hero-fino .hero-acoes { flex-wrap: wrap; justify-content: flex-end; }

/* ── O menu do topo ───────────────────────────────────────────────────────
   Itens com traço embaixo no escolhido. Desde a v85 cada um abre as opções
   numa caixa logo abaixo, ao passar o mouse (`:hover`), ao chegar pelo
   teclado (`:focus-within`) e, no celular, no primeiro toque (`.is-aberto`,
   pelo script). `.is-recolhido` fecha a caixa depois de uma escolha feita na
   própria tela, mesmo com o mouse ainda em cima. */
.menu-app {
    position: relative;
    z-index: 30;
    margin-top: 10px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid rgba(220,229,232,.85);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(27,62,70,.05);
}
.menu-app-lista { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 0; padding: 0; list-style: none; }
.menu-app-grupo { position: relative; display: flex; }
.menu-app-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
/* A setinha de "tem opções". */
.menu-app-grupo.tem-opcoes > .menu-app-item::after {
    content: "";
    width: 6px;
    height: 6px;
    margin: -3px 0 0 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .55;
    transform: rotate(45deg);
}
.menu-app-item:hover,
.menu-app-grupo:hover > .menu-app-item,
.menu-app-grupo.is-aberto > .menu-app-item { color: var(--brand-dark); background: var(--brand-soft); }
.menu-app-grupo.is-ativo > .menu-app-item { color: var(--brand-dark); border-bottom-color: var(--brand); }
.menu-app-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -6px; border-radius: 9px; }

.menu-app-opcoes {
    position: absolute;
    z-index: 40;
    top: 100%;
    left: 0;
    display: none;
    min-width: 250px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 14px 34px rgba(27,62,70,.16);
}
.menu-app-grupo:hover > .menu-app-opcoes,
.menu-app-grupo:focus-within > .menu-app-opcoes,
.menu-app-grupo.is-aberto > .menu-app-opcoes { display: block; }
.menu-app-grupo.is-recolhido:not(.is-aberto) > .menu-app-opcoes { display: none; }
/* ⚠️ NA TELA DE TOQUE QUEM ABRE É SÓ O TOQUE (`.is-aberto`). Lá o navegador
   finge um "mouse em cima" depois de cada toque e o deixa preso no último
   item tocado: com o `:hover` valendo, a caixa não fecharia depois da
   escolha. */
@media (hover: none) {
    .menu-app-grupo:hover > .menu-app-opcoes,
    .menu-app-grupo:focus-within > .menu-app-opcoes { display: none; }
    .menu-app-grupo.is-aberto > .menu-app-opcoes { display: block; }
    .menu-app-grupo:hover:not(.is-aberto) > .menu-app-item { color: var(--muted); background: none; }
    .menu-app-grupo.is-ativo:hover:not(.is-aberto) > .menu-app-item { color: var(--brand-dark); }
}
/* O último item abre a caixa para a esquerda, para não sair da tela. */
.menu-app-grupo:last-child:not(:first-child) > .menu-app-opcoes { right: 0; left: auto; border-radius: 12px 0 12px 12px; }

.menu-app-opcao {
    display: block;
    width: 100%;
    padding: 8px 11px;
    color: var(--text);
    background: none;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.menu-app-opcao:hover, .menu-app-opcao:focus-visible { color: var(--brand-dark); background: var(--brand-soft); outline: none; }
.menu-app-opcao.is-ativo { color: var(--brand-dark); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
/* A ferramenta que a pasta aberta não oferece: aparece, apagada. */
.menu-app-opcao.is-indisponivel { color: #a3b0b4; font-weight: 500; cursor: default; }
.menu-app-opcao.is-indisponivel:hover { color: #a3b0b4; background: none; }
.menu-app-form { margin: 0; }
.menu-app-sep { display: block; height: 1px; margin: 5px 8px; background: var(--line); }

/* ── A coluna da direita nas outras páginas (v85) ─────────────────────────
   O título da página no lugar do caminho da pasta, e a frase de apoio, num
   cartão em cima do conteúdo da página. */
.app-conteudo { min-width: 0; }
.app-conteudo > .panel { margin-top: 10px; }
.pagina-cabeca {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(220,229,232,.85);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(27,62,70,.05);
}
.pagina-cabeca .linha-caminho { border-bottom: 0; }
.pagina-titulo { display: inline; margin: 0; padding: 4px 7px; color: var(--text); font-size: 17px; line-height: 1.3; }
.pagina-texto { margin: 0; padding: 0 16px 12px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ── As duas colunas ──────────────────────────────────────────────────── */
.app-corpo {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 10px;
}
.app-corpo > .panel { margin-top: 0; }

/* ── A árvore de pastas ───────────────────────────────────────────────────
   Presa no topo ao rolar a lista: numa pasta com cem documentos, trocar de
   pasta não pode pedir a volta ao começo da página. */
.arvore {
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    padding: 8px;
    background: var(--surface);
    border: 1px solid rgba(220,229,232,.85);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(27,62,70,.05);
}
.arvore-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px; }
.arvore-titulo { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.arvore-fechar { display: none; }
.arvore-lista, .arvore-filhos { margin: 0; padding: 0; list-style: none; }
.arvore-linha { display: flex; align-items: flex-start; }
.arvore-seta {
    position: relative;
    flex: none;
    width: 22px;
    height: 32px;
    padding: 0;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.arvore-seta::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}
/* A animação só vale depois de a tela montada (ver o script). */
.arvore.is-pronta .arvore-seta::before { transition: transform .12s ease; }
button.arvore-seta:hover { color: var(--brand-dark); background: var(--brand-soft); }
.arvore-pasta.is-aberta > .arvore-linha .arvore-seta::before { left: 7px; top: 10px; transform: rotate(45deg); }
.arvore-seta-vazia { cursor: default; }
.arvore-seta-vazia::before { display: none; }
.arvore-item {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-height: 32px;
    padding: 7px 8px;
    color: var(--text);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
/* A pastinha antes do nome, desenhada com máscara para herdar a cor do
   texto (branca na pasta escolhida, cinza na vazia). */
.arvore-item::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background: currentColor;
    opacity: .7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.arvore-inicio { margin-left: 22px; }
.arvore-inicio::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6'/%3E%3C/svg%3E");
}
.arvore-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.arvore-item .menu-conta { flex: none; margin-top: 1px; }
.arvore-item:hover { background: var(--brand-soft); }
.arvore-item.is-ativo { color: #fff; background: var(--brand); }
.arvore-item.is-ativo:hover { background: var(--brand-dark); }
.arvore-item.is-ativo::before { opacity: .95; }
.arvore-item.is-ativo .menu-conta { color: #fff; background: rgba(255,255,255,.25); }
/* A pasta de cima, quando o que está aberto é uma subpasta dela. */
.arvore-item.is-no-caminho { color: var(--brand-dark); font-weight: 700; }
/* Pasta sem documento: só no Modo Gestão, e apagada. */
.arvore-item.is-vazia { color: #8a989c; font-weight: 400; }
.arvore-item.is-vazia .menu-conta { background: none; }
.arvore-filhos { margin: 0 0 4px 10px; padding-left: 11px; border-left: 1px solid var(--line); }
.arvore-filhos[hidden] { display: none; }
.arvore-sub { font-weight: 500; }
.arvore-fundo { display: none; }
/* Sala sem subpasta nenhuma: sem seta, não há por que guardar o lugar dela. */
.arvore-lista.sem-setas .arvore-seta { display: none; }
.arvore-lista.sem-setas .arvore-inicio { margin-left: 0; }

/* A coluna recolhida (só no computador: no celular a árvore é gaveta, e a
   preferência guardada aqui não pode sumir com o único caminho até ela). */
@media (min-width: 901px) {
    .app-corpo.sem-arvore { grid-template-columns: minmax(0, 1fr); }
    .app-corpo.sem-arvore .arvore { display: none; }
}

/* ── A linha do caminho ───────────────────────────────────────────────── */
.linha-caminho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.botao-arvore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 5px 11px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid #b9dfdc;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.botao-arvore svg { width: 17px; height: 17px; }
.botao-arvore:hover { background: #d8efed; border-color: var(--brand); }
/* Recolhida, o botão fica branco: é o convite para trazer a árvore de volta. */
.botao-arvore[aria-expanded="false"] { color: var(--muted); background: #fff; border-color: var(--line); }
.caminho { flex: 1 1 240px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 14px; }
.caminho a { padding: 4px 7px; color: var(--brand-dark); border-radius: 7px; font-weight: 700; text-decoration: none; }
.caminho a:hover { background: var(--brand-soft); }
.caminho strong { padding: 4px 7px; overflow-wrap: anywhere; }
.caminho-sep { color: #a9b6ba; }
.linha-caminho .search { flex: 0 1 340px; min-width: 200px; }
.linha-caminho .search input { height: 38px; padding-left: 40px; border-radius: 10px; font-size: 14px; }
.linha-caminho .search svg { left: 12px; width: 17px; height: 17px; }

/* ── As pastas daqui ──────────────────────────────────────────────────────
   O conteúdo do lugar aberto, antes dos arquivos: as pastas no Início, as
   subpastas numa pasta. Mesma pastinha e mesma contagem da árvore. */
.pastas-daqui { padding: 14px 16px 16px; border-bottom: 1px solid var(--line); }
.pastas-daqui:last-child { border-bottom: 0; }
/* O recado do Início sem nada: sozinho no painel, precisa de chão. */
.app-corpo .aviso-raiz:last-child { padding-bottom: 22px; }
.pastas-daqui-titulo {
    display: block;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.pastas-daqui-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pasta-daqui {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 8px 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}
.pasta-daqui::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pasta-daqui-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pasta-daqui:hover { background: var(--brand-soft); border-color: var(--brand); }
.pasta-daqui.is-vazia { color: #8a989c; font-weight: 500; border-style: dashed; }
.pasta-daqui.is-vazia::before { background: #a9b6ba; }
.pasta-daqui.is-vazia .menu-conta { background: none; }

/* ── O que cada grupo mostra na lista (v85) ───────────────────────────────
   O bloco do meio tem só o que é da função escolhida no menu. Em Pastas: o
   Gerenciar pastas e as pastas, sem a lista de documentos, os ícones, os
   filtros e a busca. Fora de Arquivos, sem os ZIPs prontos; em Regulatório
   e Acesso, sem as pastas (lá se trabalha nos documentos da lista).
   O "Ver como" ligado (amarelo) fica em qualquer grupo: é um aviso. */
#painelLista[data-grupo="pastas"] .ver-como:not(.is-ativo),
#painelLista[data-grupo="pastas"] .barra-ferramentas,
#painelLista[data-grupo="pastas"] .aviso-raiz,
#painelLista[data-grupo="pastas"] #zipForm,
#painelLista[data-grupo="pastas"] .linha-caminho .search,
#painelLista[data-grupo="regulatorio"] .pastas-daqui,
#painelLista[data-grupo="acesso"] .pastas-daqui,
#painelLista:not([data-grupo="arquivos"]) .zip-area { display: none; }
#painelLista[data-grupo="pastas"] .gestao-area { border-bottom: 1px solid var(--line); }

/* O Gerenciar pastas na forma de "Nome na tela e no servidor" (v85). */
.gp-tabela { margin-top: 12px; }
.gp-nenhuma { padding: 14px 12px; color: var(--muted); }
.ps-incluir-nota { margin: 8px 0 0; }

/* O Ordenar do Gerenciar pastas (v89). */
.gp-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.gp-cabeca h2 { margin-bottom: 0; }
.gp-ordenar-botao { min-height: 34px; padding: 6px 14px; }
.gp-ordenar-botao[hidden], .gp-ordem[hidden] { display: none !important; }
.gp-ordem { margin: 12px 0 0; padding: 10px 12px; background: #fff8e6; border: 1px solid #f0d28a; border-radius: 10px; }
.gp-ordem-nota { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #6b4a00; }
.gp-ordem-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gp-ordem-acoes .botao-linha { min-height: 34px; padding: 6px 12px; }
.gp-ordem-fim { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.gp-ordem-acoes .gp-salvar-ordem { color: #fff; background: var(--gestao); border-color: var(--gestao); }
.gp-ordem-acoes .gp-salvar-ordem:hover { background: #0d2f50; }
.gp-ordem-acoes .gp-salvar-ordem:disabled { opacity: .6; cursor: default; }
.gp-mover { display: none; flex: 0 0 auto; align-items: center; white-space: nowrap; }
.gp-tabela.ordenando .gp-mover { display: inline-flex; }
.gp-tabela.ordenando .ps-alterar-botao,
.gp-tabela.ordenando .pastas-servidor-excluir > *,
.gp-tabela.ordenando tfoot { display: none; }
.gp-tabela.ordenando .ps-alterar > summary,
.gp-tabela.ordenando .ps-alterar .ps-nome { cursor: grab; }
.gp-tabela.ordenando tbody tr:hover td { background: var(--gestao-soft); }
.gp-tabela.ordenando tbody tr:not(.pastas-servidor-sub) td { border-top: 1px solid #c3d5e8; }
.gp-tabela tr.arrastando td { opacity: .35; }
/* Com a alça e as setas na frente, a subpasta continua um passo para dentro. */
.gp-tabela.ordenando .pastas-servidor-sub .gp-mover { margin-left: 18px; }
.gp-tabela.ordenando .pastas-servidor-sub .ps-nome { padding-left: 0; }

/* ── Trazer cliente do /auditoria (v88) ──────────────────────────────────── */
.importar-antigo > .gestao-nota { margin: 10px 0; }
.importar-tabela td { vertical-align: top; }
.importar-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.importar-novo { color: var(--brand-dark); font-weight: 700; }
.importar-aviso { display: block; margin-top: 4px; color: var(--perigo); font-size: 12px; }
.importar-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin: 0; }
.importar-confirma { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.importar-acao { text-align: right; }

/* ── O agente: gravar nas pastas (v87) ──────────────────────────────────── */
.ag-arquivos-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.ag-gravar { margin-top: 12px; }
.ag-gravar h3 { margin: 0 0 4px; color: #123252; font-size: 15px; }
.ag-gravar-tabela { margin-top: 10px; }
.ag-gravar-tabela td { vertical-align: top; }
.ag-gravar-pasta, .ag-gravar-resumo { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.ag-gravar-resumo { font-style: italic; }
.ag-gravar-rev { white-space: nowrap; }
.ag-gravar-parado td { color: var(--muted); }
.ag-gravar-situacao .req-fora-selo { white-space: normal; }
.ag-gravar-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ag-gravado { margin: 10px 0 0; padding: 9px 13px; border: 1px solid #b9dfdc; border-left: 4px solid var(--brand); border-radius: 10px; background: var(--brand-soft); font-size: 13.5px; }
.ag-gravada { color: var(--brand-dark); font-weight: 700; }

/* ── Atualizar estrutura (v86): o resultado numa tela só dele ───────────── */
.estrutura-painel { padding: 18px 22px 22px; }
.estrutura-resultado { padding: 14px 18px; border: 1px solid #b9dfdc; border-left: 4px solid var(--brand); border-radius: 12px; background: var(--brand-soft); }
.estrutura-resultado.is-atencao { border-color: #f0c9b8; border-left-color: var(--perigo); background: #fff6f2; }
.estrutura-titulo { margin: 0 0 4px; color: var(--brand-dark); font-size: 16px; font-weight: 800; }
.estrutura-resultado.is-atencao .estrutura-titulo { color: var(--perigo); }
.estrutura-resumo { margin: 0; color: var(--text); font-size: 14px; line-height: 1.5; }
.estrutura-itens { display: grid; gap: 10px; margin-top: 14px; }
.estrutura-item { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.estrutura-item.is-atencao { border-color: #f0c9b8; background: #fff6f2; }
.estrutura-item h3 { margin: 0 0 4px; color: #123252; font-size: 14.5px; }
.estrutura-item.is-atencao h3 { color: var(--perigo); }
.estrutura-item p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; }
.estrutura-item p.estrutura-nada { margin: 0; color: var(--muted); }
.estrutura-item ul { margin: 4px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.estrutura-tabela { margin-top: 6px; }
.estrutura-explica { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.estrutura-explica h3 { margin: 0 0 4px; color: #123252; font-size: 14.5px; }
.estrutura-explica p, .estrutura-explica ul { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.estrutura-explica ul { padding-left: 20px; }
.estrutura-form { margin-top: 12px; }

/* ── Telas estreitas: a árvore vira gaveta ────────────────────────────── */
@media (max-width: 900px) {
    .page-app { width: min(100% - 20px, 1440px); margin: 10px auto 24px; }
    .app-corpo { grid-template-columns: minmax(0, 1fr); }
    /* No estreito a caixa das opções ocupa a largura do menu, logo embaixo
       dele, e não a do item: o item pode estar na ponta direita. */
    .menu-app-grupo { position: static; }
    .menu-app-opcoes, .menu-app-grupo:last-child:not(:first-child) > .menu-app-opcoes {
        left: 6px; right: 6px; min-width: 0; border-radius: 12px;
    }
    .menu-app-opcao { white-space: normal; padding: 10px 12px; }
    .arvore {
        position: fixed;
        z-index: 70;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(86vw, 330px);
        max-height: none;
        padding: 12px 10px;
        border-radius: 0 16px 16px 0;
        box-shadow: 0 0 40px rgba(15,35,40,.35);
        visibility: hidden;
        transform: translateX(-104%);
        transition: transform .18s ease, visibility .18s;
    }
    .app-corpo.arvore-aberta .arvore { visibility: visible; transform: none; }
    .arvore-fundo { position: fixed; z-index: 65; inset: 0; display: block; background: rgba(15,35,40,.45); }
    .arvore-fundo[hidden] { display: none; }
    .arvore-fechar {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 5px 12px;
        color: var(--text);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 9px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }
    .arvore-item { min-height: 40px; padding: 10px 8px; font-size: 14.5px; }
    .arvore-seta { height: 40px; width: 28px; }
    .arvore-seta::before { left: 9px; top: 16px; }
    .arvore-pasta.is-aberta > .arvore-linha .arvore-seta::before { left: 10px; top: 14px; }
    .arvore-inicio { margin-left: 28px; }
    /* No celular a gaveta começa sempre fechada: o botão diz "abrir". */
    .botao-arvore[aria-expanded="false"] { color: var(--brand-dark); background: var(--brand-soft); border-color: #b9dfdc; }
    .linha-caminho { padding: 10px 12px; }
    .linha-caminho .search { flex: 1 1 100%; min-width: 0; }
    .pastas-daqui { padding: 12px; }
    .pastas-daqui-lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    /* ⚠️ DESFAZ O QUE O CABEÇALHO ALTO FAZIA NO ESTREITO. Lá os botões saem do
       fluxo e vão para o canto de cima, e o cabeçalho vira uma coluna com 58 px
       de folga no topo para eles. No cabeçalho fino tudo cabe em linha, e o
       que não couber quebra para a linha de baixo. */
    .hero-fino { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border-radius: 12px; }
    .hero-fino .logo-wrap { width: 84px; padding: 3px 5px; }
    .hero-fino h1 { font-size: 16px; }
    .hero-fino .hero-acoes { position: static; margin-left: auto; }
    .menu-app { padding: 0 4px; }
    .menu-app-item { min-height: 42px; padding: 0 10px; font-size: 13.5px; }
}
@media (max-width: 520px) {
    .hero-fino { flex-direction: row; align-items: center; padding-top: 8px; }
    .hero-fino .logo-wrap { width: 76px; }
    .hero-fino .hero-acoes { gap: 6px; }
    .hero-fino .logout-button, .hero-fino .logo-trocar { min-height: 32px; padding: 5px 9px; font-size: 12.5px; }
}

@media print {
    .menu-app, .arvore, .arvore-fundo, .botao-arvore, .linha-caminho .search { display: none !important; }
    .pagina-cabeca { border: 0; box-shadow: none; }
    .app-corpo { display: block; }
}