/* Shield Assinador - painel do operador.
   Tokens e padroes de componente extraidos de docs/shield-assinador-direcao-visual.html
   (verde-mata + dourado, efeito glass, tema claro/escuro). Fontes de sistema. */

:root{
  --mata:#2B2314; --mata-2:#43371F; --mata-3:#59492F;
  --ouro:#E0A33C; --ouro-suave:#F6EBD6;
  --canvas:#F4F2ED; --superficie:#FFFFFF; --superficie-2:#FAF8F4;
  --borda:#E6E1D8; --borda-forte:#CBC2B2;
  --texto:#1E1A12; --texto-2:#655D4E; --texto-3:#948974;
  --selo:#0E7A55; --selo-fundo:#E4F2EC;
  --alerta:#9C6A08; --alerta-fundo:#FAF0DC;
  --risco:#A5382C; --risco-fundo:#F9EAE7;
  --info:#2F5F8F; --info-fundo:#E6EEF6;
  --raio:12px; --sombra:0 1px 2px rgba(43,35,20,.06), 0 12px 32px -18px rgba(43,35,20,.3);
  --vidro:rgba(255,255,255,.62); --vidro-2:rgba(255,255,255,.42);
  --vidro-borda:rgba(255,255,255,.75); --vidro-luz:rgba(255,255,255,.9);
  --brilho-a:rgba(89,73,47,.16); --brilho-b:rgba(224,163,60,.13);
  --branco:#FFFFFF;
  --sobre-ouro:#2A1C05; --ouro-texto:#8A6212; --sobre-selo-escuro:#04150F;
  /* A lateral (.lateral) e sempre escura, nos dois temas (o gradiente --mata-*
     so fica mais escuro no tema escuro, nao muda de familia de cor) - estes
     tokens nao precisam de redefinicao em html[data-tema="escuro"], mas
     continuam variaveis (regra: cores so por variavel CSS) em vez de hex
     solto nos seletores (fecha a BL9). */
  --lateral-titulo:#6E9082; --lateral-item:#B3C9BE; --lateral-item-hover:#E6F0EA;
  --lateral-rodape:#8FAFA0;
  --ouro-anel:rgba(224,163,60,.28);
}
html[data-tema="escuro"]{
  --mata:#120E08; --mata-2:#2B2314; --mata-3:#59492F;
  --canvas:#15110A; --superficie:#1C160D; --superficie-2:#231A0F;
  --borda:#3A2E1B; --borda-forte:#4F4026;
  --texto:#EDEAE1; --texto-2:#A89C86; --texto-3:#7C7160;
  --selo:#3ECC93; --selo-fundo:#132A21;
  --alerta:#D9A241; --alerta-fundo:#2C2314;
  --risco:#E0705F; --risco-fundo:#2C1714;
  --info:#7FB0E0; --info-fundo:#16222D;
  --ouro-suave:#2A2213;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.7);
  --vidro:rgba(28,22,13,.55); --vidro-2:rgba(28,22,13,.36);
  --vidro-borda:rgba(255,255,255,.09); --vidro-luz:rgba(255,255,255,.14);
  --brilho-a:rgba(89,73,47,.20); --brilho-b:rgba(224,163,60,.10);
}

*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--texto);
  background-image:
    radial-gradient(52rem 32rem at 78% -8%,var(--brilho-a),transparent 60%),
    radial-gradient(44rem 30rem at 8% 108%,var(--brilho-b),transparent 60%);
  background-attachment:fixed;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.mono,.cod,.hash,.contagem{font-family:ui-monospace,"IBM Plex Mono","SF Mono",Consolas,monospace}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px;border-radius:4px}

.app{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100vh}

.lateral{background:linear-gradient(168deg,var(--mata-3) 0%,var(--mata-2) 42%,var(--mata) 100%);
  padding:20px 14px;display:flex;flex-direction:column;gap:22px;position:relative}
.lateral::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 20% 0%,rgba(224,163,60,.16),transparent 62%)}
.lateral>*{position:relative;z-index:1}
.marca{display:flex;align-items:center;gap:10px;padding:0 8px}
.marca-img{display:block;width:100%;max-width:210px;height:auto}
.lateral .marca-img{max-width:168px}
/* versao clara (fundo claro) x versao light (fundo escuro): alterna por tema */
.marca-img-escuro{display:none}
html[data-tema="escuro"] .marca-img-claro{display:none}
html[data-tema="escuro"] .marca-img-escuro{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-tema="claro"]) .marca-img-claro{display:none}
  html:not([data-tema="claro"]) .marca-img-escuro{display:block}
}
.acao{display:block;width:100%;text-align:center;text-decoration:none;
  background:var(--ouro);color:var(--sobre-ouro);border:0;border-radius:var(--raio);
  padding:9px 12px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px -8px rgba(224,163,60,.6)}
.acao:hover{filter:brightness(1.07)}
.grupo{display:flex;flex-direction:column;gap:1px}
.grupo-titulo{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lateral-titulo);padding:0 8px 7px;margin:0}
.item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;
  color:var(--lateral-item);font-size:14px;cursor:pointer;text-decoration:none;border-left:2px solid transparent}
.item:hover{background:rgba(255,255,255,.06);color:var(--lateral-item-hover)}
.item[aria-current="page"]{background:rgba(255,255,255,.11);color:var(--branco);border-left-color:var(--ouro)}
.lateral-rodape{margin-top:auto;display:flex;flex-direction:column;gap:8px}
/* "Minha Conta" (bloco de UI do painel) - substitui o nome cru que ficava
   ali antes: avatar (foto ou iniciais) + rotulo fixo, mesmo padrao de
   "conta do usuario" de produtos de assinatura eletronica. */
.conta{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;
  color:var(--lateral-rodape);font-size:12.5px;font-weight:500;text-decoration:none;
  border-left:2px solid transparent}
.conta:hover{background:rgba(255,255,255,.06);color:var(--lateral-item-hover)}
.conta[aria-current="page"]{background:rgba(255,255,255,.11);color:var(--branco);border-left-color:var(--ouro)}
.conta-avatar{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;
  display:grid;place-items:center;background:var(--vidro-2);border:1px solid rgba(255,255,255,.18)}
.conta-avatar-iniciais{font-size:11.5px;font-weight:700;color:var(--branco);
  background:linear-gradient(155deg,var(--ouro),var(--mata-3))}
.conta-rotulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.principal{padding:26px 30px 44px;min-width:0}
/* Ritmo vertical entre blocos de pagina (.topo, .aviso, .colunas...): sem
   isso cada view precisava lembrar de espacar as suas proprias secoes na
   mao, e nem sempre lembrava (ex.: o bloco "Enviar" de envelope.php colado
   direto embaixo da grade de Documentos/Participantes). .topo ja fecha com
   22px de margin-bottom (linha acima) - o seletor "coruja" iguala o resto. */
.principal>*+*{margin-top:22px}
.topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  /* padding-right maior que o esquerdo: reserva espaco pro .alterna-tema
     fixo (36px + 18px de margem) nao cobrir o conteudo da direita de .topo
     (ex. o botao "Voltar" de envelope.php) - achado ao testar no navegador,
     o icone caia direto em cima do texto do botao. */
  margin:-26px -30px 0;padding:22px 66px 16px 30px;position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,var(--vidro) 55%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.titulo{margin:0;font-size:24px;font-weight:600;letter-spacing:-.025em}
.sub{margin:3px 0 0;color:var(--texto-2);font-size:14px}

/* Seletor de tema - fixo, presente em QUALQUER pagina (renderizado uma vez
   em layout.php, fora das duas ramificacoes de conteudo) em vez de um botao
   de texto que só o painel tinha. Icone com troca sol/lua (mesmo padrao de
   .marca-img-claro/.marca-img-escuro) + title como tooltip nativo, sem lib
   de tooltip nova. */
.alterna-tema{position:fixed;top:22px;right:18px;z-index:30;width:36px;height:36px;padding:0;
  /* top:22px = mesmo padding-top de .topo (linha acima): alinha pelo topo
     com os botoes de .topo (ex. "Voltar"), que nao tem a mesma altura deste
     circulo - centralizar os dois exigiria depender da altura exata de
     .btn, fragil se o padding dele mudar. Alinhar pelo topo nao. */
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:var(--vidro);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--borda-forte);color:var(--texto-2);transition:background .15s ease,color .15s ease}
.alterna-tema:hover{background:var(--vidro-2);color:var(--texto)}
.ico-tema{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico-tema-lua{display:none}
html[data-tema="escuro"] .ico-tema-sol{display:none}
html[data-tema="escuro"] .ico-tema-lua{display:block}

.colunas{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.colunas.par{grid-template-columns:minmax(0,1fr) 340px}
/* Empilha 2+ cards dentro de UMA celula do grid (ex.: Arquivos + Enviar,
   ambos na coluna esquerda) - sem isto cada card viraria um item de grid
   separado, e a ALTURA DA LINHA do grid e definida pelo item mais alto
   dela (Participantes, com o formulario de signatario), deixando um vao
   vazio acima do card de baixo em vez dele colar direto no de cima. */
.coluna-empilhada{display:flex;flex-direction:column;gap:20px;min-width:0}

.painel,.cartao{background:var(--vidro);backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);border:1px solid var(--vidro-borda);
  border-radius:16px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.painel::before,.cartao::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--vidro-luz),transparent);pointer-events:none}
.cartao{padding:18px}
.painel-topo{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--borda)}
.quadro{width:30px;height:30px;border-radius:9px;background:var(--selo-fundo);color:var(--selo);
  display:grid;place-items:center;flex:none;font-weight:700}
.painel-titulo{font-size:14.5px;font-weight:600;margin:0}
.painel-sub{font-size:12px;color:var(--texto-2);margin:0}
.contagem{margin-left:auto;font-size:12px;color:var(--texto-3)}
.painel-corpo{padding:16px 18px}

.linha{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--borda);text-decoration:none}
.linha:last-child{border-bottom:0}
.linha:hover{background:var(--vidro-2)}
.linha-corpo{flex:1;min-width:0}
.linha-nome{font-size:14.5px;font-weight:500;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha-meta{margin:0;font-size:12.5px;color:var(--texto-2)}
.cod{color:var(--texto-3);font-size:11.5px}

.marca-estado{font-size:12px;font-weight:500;padding:3px 9px;border-radius:6px;white-space:nowrap;flex:none}
.e-rascunho{background:var(--alerta-fundo);color:var(--alerta)}
.e-andamento{background:var(--selo-fundo);color:var(--selo)}
.e-concluido{background:var(--selo-fundo);color:var(--selo)}
.e-outro{background:var(--risco-fundo);color:var(--risco)}

.selo-ouro{display:inline-block;background:var(--ouro-suave);color:var(--ouro-texto);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:5px;margin-bottom:9px}
html[data-tema="escuro"] .selo-ouro{color:var(--ouro)}
.nivel{display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--selo-fundo);color:var(--selo)}
.nivel.n-outro{background:transparent;color:var(--texto-2);border:1px solid var(--borda-forte)}

.interno{background:var(--vidro-2);border:1px solid var(--vidro-borda);border-radius:var(--raio);padding:14px;margin-bottom:14px}
.faixa{border:1px solid var(--vidro-borda);border-radius:var(--raio);overflow:hidden;margin:0 0 14px;background:var(--vidro-2)}
.faixa-topo{display:flex;align-items:center;gap:7px;padding:8px 11px;background:var(--vidro-2);border-bottom:1px solid var(--vidro-borda)}
.faixa-topo span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2)}
.faixa-corpo{padding:10px 11px}
.hash{font-size:11.5px;line-height:1.75;color:var(--texto-2);word-break:break-all;margin:0}
.hash b{color:var(--texto);font-weight:500}

form.grade,.qualificada{display:grid;gap:15px;grid-template-columns:minmax(0,1fr)}
.grade-aninhada{display:grid;gap:15px;grid-template-columns:minmax(0,1fr)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:12.5px;font-weight:500;color:var(--texto-2)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:14px;padding:10px 12px;border-radius:var(--raio);
  border:1px solid var(--borda-forte);background:var(--superficie);color:var(--texto);
  transition:border-color .15s ease,box-shadow .15s ease}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--texto-3)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouro-anel)}
.campo textarea{resize:vertical;min-height:78px;line-height:1.55;font-family:inherit}

/* <select> nativo (Fase 2, sub-bloco 1 - assinatura qualificada, primeiro
   select de verdade do projeto; os outros lugares usam cartoes custom de
   proposito, ver .nivel-seletor acima). Sem appearance:none, o cromo nativo
   do <select> (seta + padding interno do navegador) brigava com a borda/
   box-shadow customizados - relatado pelo dono como "campo quebrado" ao
   focar. appearance:none + seta em gradiente CSS puro (sem SVG - assim nao
   precisa de duas versoes pra claro/escuro, so acompanha --texto-2 direto).
   !important em tudo: o antigo `lacuna-web-pki.js` (removido em 2026-10-06; o !important ficou) populava este <select> via
   `listCertificates({selectId})` e aplica estilo INLINE nele (biblioteca de
   terceiro, sem controle sobre isso) - estilo inline vence qualquer regra
   externa por especificidade, independente de quao especifico o seletor
   for, entao so !important garante a aparencia (confirmado pelo dono: sem
   isso a seta some e o texto comprido estoura a caixa sem reticencias,
   mesmo com o CSS certo servido e cache limpo). */
.campo select{appearance:none !important;-webkit-appearance:none !important;
  cursor:pointer;padding-right:34px !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--texto-2) 50%),
    linear-gradient(135deg,var(--texto-2) 50%,transparent 50%) !important;
  background-position:calc(100% - 19px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px) !important;
  background-size:5px 5px,5px 5px !important;background-repeat:no-repeat !important;
  /* Nome de certificado real pode ser bem mais comprido que o de teste
     (ex. razao social + CNPJ + emissor) - sem isto o texto estourava a
     caixa sem reticencias, escondendo a seta (relatado pelo dono, teste
     manual do sub-bloco 1). */
  overflow:hidden !important;white-space:nowrap !important;text-overflow:ellipsis !important;
  /* CAUSA RAIZ de verdade (achada via DevTools com o dono, o !important
     acima ja estava ganhando - nao era sobreposicao de estilo): .campo e
     .qualificada sao flex/grid, e um <select> como item de flex/grid NAO
     encolhe abaixo do proprio min-content por padrao (min-width:auto
     implicito) - a caixa crescia pra caber o nome inteiro do certificado,
     entao o text-overflow:ellipsis nunca tinha o que cortar. width:100% +
     min-width:0 forcam o <select> a respeitar a largura do container em
     vez do proprio conteudo. */
  width:100% !important;min-width:0 !important;box-sizing:border-box !important}

/* Upload: o navegador nao deixa restylizar o dialogo nativo, so o botao
   (::file-selector-button, suportado nos motores atuais) e o contorno ao
   redor dele - contorno tracejado da a pista de "solte/escolha um arquivo"
   sem precisar de JS/drag-and-drop novo (regra 6, sem dependencia nova). */
.campo input[type=file]{padding:10px;background:var(--vidro-2);color:var(--texto-2);
  border:1px dashed var(--borda-forte);cursor:pointer}
.campo input[type=file]::file-selector-button{
  font:inherit;font-size:13px;font-weight:500;padding:7px 13px;margin-right:11px;
  border:1px solid var(--vidro-borda);border-radius:calc(var(--raio) - 4px);
  background:var(--vidro);color:var(--texto);cursor:pointer;
  backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);
  transition:background .15s ease}
.campo input[type=file]::file-selector-button:hover{background:var(--vidro-2)}

/* Codigo OTP: mesma convencao visual de entrada de codigo de 6 digitos
   (bancos, apps de 2FA) - grande, monoespacado, espacado, centralizado. */
.codigo-otp{font-family:ui-monospace,"IBM Plex Mono","SF Mono",Consolas,monospace;
  font-size:24px;font-weight:500;letter-spacing:.5em;text-align:center;
  padding-left:calc(12px + .5em)}

.campo-linha{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--texto-2);cursor:pointer}
/* Checkbox nativo, sem estilo nenhum, destoava muito do resto do form
   (campo/select/textarea todos com o mesmo tratamento de borda/fundo do
   tema escuro) - reportado pelo dono. appearance:none + box customizada,
   mesma paleta dos cards de nivel de assinatura (borda-forte em repouso,
   ouro cheio quando marcado, com o "check" desenhado em CSS puro). */
input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;
  box-sizing:border-box;padding:0;font-size:0;line-height:0;
  width:18px;height:18px;aspect-ratio:1/1;margin:0;border-radius:5px;cursor:pointer;
  border:1px solid var(--borda-forte);background-color:var(--superficie-2);
  background-repeat:no-repeat;background-position:center;background-size:11px 11px;
  transition:border-color .15s ease,background-color .15s ease}
input[type=checkbox]:hover{border-color:var(--texto-3)}
input[type=checkbox]:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
/* Check desenhado como SVG em vez de borda rotacionada em ::after: o
   "L" de borda rotacionado nunca ficava visualmente centralizado (o
   centro geometrico da caixa antes de rotacionar nao e o centro visual
   do tick depois) - reportado pelo dono. #2A1C05 = --sobre-ouro (cor fixa
   nos dois temas, ver comentario na definicao de --lateral-* mais acima;
   um data URI de SVG nao le variavel CSS, por isso o valor literal aqui). */
input[type=checkbox]:checked{border-color:var(--ouro);background-color:var(--ouro);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232A1C05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E")}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* Seletor de nivel de assinatura (tela "Novo documento") - cartoes com
   icone em vez de <select>, radio nativo escondido (continua acessivel/
   funcional sem JS, so a aparencia muda). */
.nivel-seletor{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nivel-opcao{position:relative;display:flex;flex-direction:column;gap:8px;padding:13px 12px;
  border:1px solid var(--borda-forte);border-radius:var(--raio);cursor:pointer;
  background:var(--superficie-2);transition:border-color .15s ease,background .15s ease}
.nivel-opcao:hover{border-color:var(--texto-3)}
.nivel-opcao input{position:absolute;opacity:0;width:1px;height:1px}
.nivel-opcao:has(input:focus-visible){outline:2px solid var(--ouro);outline-offset:2px}
/* :has(input:checked) reage ao clique sem JS, cobre tanto o valor inicial
   da pagina quanto a troca depois - nao existe classe "ativa" renderizada
   pelo PHP (era estatica, nunca saia do card inicial ao trocar de opcao -
   bug reportado pelo dono). Navegador sem suporte a :has() (raro hoje) so
   perde o realce visual, o radio continua funcional. */
.nivel-opcao:has(input:checked){border-color:var(--ouro);background:var(--ouro-suave)}
.nivel-opcao-icone{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--selo-fundo);color:var(--selo);flex:none}
.nivel-opcao:has(input:checked) .nivel-opcao-icone{background:var(--ouro);color:var(--sobre-ouro)}
.nivel-opcao-icone svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nivel-opcao-texto{display:flex;flex-direction:column;gap:2px}
.nivel-opcao-nome{font-size:13.5px;font-weight:600}
.nivel-opcao-desc{font-size:11.5px;line-height:1.4;color:var(--texto-2)}

.proximos-passos{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px;
  font-size:13px;color:var(--texto-2);line-height:1.5}

/* Downloads do envelope concluido - movidos pra baixo do conteudo
   principal (antes ficavam no cabecalho, achado do dono do projeto:
   "muito pobre e em cima"), com icone proprio por tipo de arquivo. */
.downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.download-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--raio);
  border:1px solid var(--borda-forte);background:var(--superficie-2);text-decoration:none;color:var(--texto);
  transition:border-color .15s ease,background .15s ease}
.download-item:hover{border-color:var(--ouro);background:var(--ouro-suave)}
.download-icone{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--ouro);color:var(--sobre-ouro)}
.download-icone svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.download-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.download-nome{font-size:13.5px;font-weight:600}
.download-desc{font-size:11.5px;color:var(--texto-2);line-height:1.35}

/* Trilha de eventos (envelope.php) - tabela simples, mesmos tokens de
   .linha/.painel para nao inventar um componente novo. */
.tabela-eventos{width:100%;border-collapse:collapse;font-size:13px}
.tabela-eventos th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);font-weight:600;padding:10px 18px;border-bottom:1px solid var(--borda)}
.tabela-eventos td{padding:10px 18px;border-bottom:1px solid var(--borda);color:var(--texto)}
.tabela-eventos tr:last-child td{border-bottom:0}

.botoes{display:flex;gap:8px;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:var(--raio);border:1px solid var(--borda-forte);
  background:var(--vidro);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  color:var(--texto);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(43,35,20,.05);transition:background .15s ease,border-color .15s ease}
/* --borda-forte no lugar de --vidro-borda de proposito: um botao "vidro
   sobre vidro" (ex. dentro de .interno, que ja e translucido) com borda
   quase branca ficava sem nenhuma definicao visual - virava so texto
   flutuando. --borda-forte da o contorno que falta em qualquer superficie,
   sem abrir mao do fundo desfocado (o efeito glass continua no blur). */
.btn:hover{background:var(--vidro-2);border-color:var(--texto-3)}
/* Mesma receita do .acao (CTA da lateral) - achado do usuario: os dois eram
   visualmente parentes distantes (aquele com glow/realce, este chapado em
   --mata-2/--selo). Um botao primario so, em qualquer lugar da tela. */
.btn-forte{background:var(--ouro);border-color:var(--ouro);color:var(--sobre-ouro);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px -8px rgba(224,163,60,.6);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.btn-forte:hover{filter:brightness(1.07);background:var(--ouro)}

/* Acao desencorajada, nunca proibida - vermelho/coral sugestivo (mesmos
   tokens --risco/--risco-fundo de .aviso.erro, nao uma cor nova) sem ser
   alarmante: preenche so no hover/foco, texto+contorno em repouso. */
.btn-risco{background:var(--risco-fundo);border-color:var(--risco);color:var(--risco);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.btn-risco:hover{background:var(--risco);border-color:var(--risco);color:var(--branco)}

.aviso{border-radius:var(--raio);padding:10px 13px;font-size:13.5px;margin-bottom:14px}
.aviso.erro{background:var(--risco-fundo);color:var(--risco)}
.aviso.ok{background:var(--selo-fundo);color:var(--selo)}
/* pedido que espera uma acao da pessoa (ex.: autorizar a assinatura no Mercado Pago): bloco proprio, com o botao ao lado, nao uma linha solta */
.pendencia{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:14px 16px;border:1px solid var(--ouro);border-radius:var(--raio);background:var(--ouro-suave);color:var(--texto)}
.pendencia-texto{flex:1 1 320px;min-width:0}
.pendencia-texto p{margin:0;font-size:13.5px;line-height:1.5;color:var(--texto-2)}
.pendencia-texto .pendencia-titulo{margin:0 0 2px;font-size:14.5px;font-weight:600;color:var(--texto)}
.pendencia .btn{flex:none;text-decoration:none}
.vazio{color:var(--texto-2);font-size:13.5px;padding:6px 0}

/* Aviso transitorio (ex. "codigo enviado"): flutua por cima da pagina em vez
   de empurrar o layout, some sozinho ou no X - so para confirmacoes (.ok),
   nao para erro: erro de formulario fica melhor perto do campo, visivel ate
   a pessoa corrigir, nao sumindo por conta propria (achado do dono do
   projeto - "notificacoes" na jornada de assinatura). JS em painel.js cuida
   do timer/fechar; aqui so a entrada/saida, sem JS. */
.toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 32px));
  background:var(--selo-fundo);color:var(--selo);border-radius:var(--raio);
  padding:12px 14px;font-size:13.5px;box-shadow:var(--sombra);
  animation:toast-entra .22s ease}
.toast-fechar{background:none;border:0;padding:2px;margin:0 0 0 auto;color:inherit;
  opacity:.7;cursor:pointer;font-size:15px;line-height:1;flex:none}
.toast-fechar:hover{opacity:1}
.toast.toast-saindo{animation:toast-sai .18s ease forwards}
@keyframes toast-entra{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toast-sai{from{opacity:1}to{opacity:0;transform:translate(-50%,6px)}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}.toast.toast-saindo{animation:none;opacity:0}}

.entrar-caixa{max-width:380px;padding:0 20px;width:100%}
.assinar-caixa{max-width:720px;margin:7vh auto;padding:0 20px}
/* Caixa de ciencia do e-CNPJ: checkbox alinhado ao texto (nao ao meio do bloco) e respiro antes dos botoes. */
.campo-check{display:flex;align-items:flex-start;gap:10px;margin:16px 0 18px;font-size:13.5px;line-height:1.45;cursor:pointer}
.campo-check input[type=checkbox]{flex:none;width:18px;height:18px;margin:1px 0 0;padding:0}
/* .campo-linha dentro de .campo (contatos): `.campo label` (12,5px/500) nao pode vencer o padrao dos demais checkboxes do painel. */
.campo .campo-linha{font-size:13.5px;font-weight:400;margin-top:2px}
/* Nota abaixo da fileira de botoes da importacao: respiro entre os botoes e o texto. */
.bloco-importacao>.painel-sub:last-child{margin-top:14px}
[data-qualificada-pj] .botoes{margin-top:20px}

/* Tela de entrar: dois paineis. O esquerdo reusa o MESMO gradiente/tokens da
   lateral do painel (nao e um visual novo, e o mesmo shell escuro+dourado -
   so em outro lugar da tela) para dar peso a primeira impressao sem
   inventar uma segunda identidade visual. */
.entrar-shell{display:grid;grid-template-columns:minmax(240px,35%) minmax(0,1fr);min-height:100vh}
.entrar-hero{background:linear-gradient(168deg,var(--mata-3) 0%,var(--mata-2) 42%,var(--mata) 100%);
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  gap:24px;padding:44px 34px}
.entrar-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 15% 0%,rgba(224,163,60,.18),transparent 62%)}
.entrar-hero-escudo{position:absolute;right:-90px;bottom:-90px;width:280px;height:auto;opacity:.1;pointer-events:none}
.entrar-hero>*{position:relative;z-index:1}
.entrar-hero .marca-img{max-width:150px}
.entrar-hero h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.28;
  max-width:13ch;color:var(--branco)}
.entrar-hero p{margin:0;font-size:13.5px;line-height:1.65;max-width:26ch;color:var(--lateral-item)}

.entrar-form-lado{display:flex;align-items:center;justify-content:center;padding:20px;background:var(--canvas);
  background-image:radial-gradient(44rem 30rem at 92% 100%,var(--brilho-b),transparent 60%)}

/* A marca do lado do formulario so existe para quando a hero (que ja tem a
   sua propria) estiver escondida - evita duas marcas na mesma tela no
   desktop. */
@media(min-width:841px){
  .entrar-form-lado .marca{display:none}
}
@media(max-width:840px){
  .entrar-shell{grid-template-columns:1fr;min-height:0}
  .entrar-hero{display:none}
  .entrar-form-lado{min-height:100vh;background-image:
      radial-gradient(52rem 32rem at 78% -8%,var(--brilho-a),transparent 60%),
      radial-gradient(44rem 30rem at 8% 108%,var(--brilho-b),transparent 60%)}
}

/* Utilitarios das telas do shell. Existem para tirar todo style="" inline das
   vistas: a CSP do painel usa style-src 'self' sem 'unsafe-inline' (M4). */
.marca.marca-centro{justify-content:center;margin-bottom:18px}
.cartao-titulo{margin:0 0 2px;font-size:16px}
.cartao-sub{margin:0 0 14px}
.btn-pleno{flex:1}
.item-sair{width:100%;background:none;border:0;font:inherit;text-align:left}
.vazio-rente{padding:0}
.part-item{padding-bottom:11px}
.part-nome{margin:0;font-size:13.5px;font-weight:500}
.part-meta{margin:1px 0 0;font-size:12px;color:var(--texto-2)}

/* Reordenar participantes (bloco 3.1). Sem JS ficam so as setas (formulario
   comum); com JS (.ordem-ativa, posto por painel.js) aparece tambem a alca de
   arrastar, por Pointer Events (funciona com mouse e toque). */
.part-linha{display:flex;align-items:center;gap:8px}
.part-corpo{flex:1;min-width:0}
.part-alca{display:none;flex:none;width:28px;height:36px;align-items:center;justify-content:center;
  color:var(--texto-3);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.part-alca svg{width:18px;height:18px;fill:currentColor}
.ordem-ativa .part-alca{display:flex}
.part-alca:hover{color:var(--texto-2)}
.part-mover{display:flex;flex:none;gap:2px}
.part-seta{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--borda);border-radius:8px;color:var(--texto-2);cursor:pointer}
.part-seta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.part-seta:hover:not(:disabled){background:var(--vidro-2);border-color:var(--texto-3);color:var(--texto)}
.part-seta:focus-visible,.part-alca:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.part-seta:disabled{opacity:.35;cursor:default}
/* Remover participante (rascunho): mesmo botao quadrado das setas, em tom de risco ao passar o mouse; o <form> nao quebra a linha */
.part-remover{display:flex;flex:none;margin:0}
.part-seta-risco:hover:not(:disabled){background:var(--risco-fundo,var(--vidro-2));border-color:var(--risco,var(--texto-3));color:var(--risco,var(--texto))}
.part-arrastando{background:var(--ouro-suave);border-radius:8px;box-shadow:0 0 0 1px var(--ouro)}
.part-arrastando .part-alca{cursor:grabbing}
.ordem-enviando{opacity:.6;pointer-events:none}

/* Jornada do signatario (assinar/*): indicador de etapas - pensado pra
   acomodar a assinatura de verdade quando ela entrar (bloco futuro), nao so
   o que existe hoje (documento -> identidade -> assinatura). Nao e um
   componente novo por pagina: as 3 etapas sao fixas, cada view so marca
   qual esta "feita"/"atual" de acordo com o estado do participante. */
.etapas{display:flex;align-items:center;list-style:none;padding:0;margin:0 0 18px}
.etapa{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--texto-3);white-space:nowrap}
.etapa:not(:last-child)::after{content:"";width:22px;height:1px;background:var(--borda-forte);margin:0 8px;flex:none}
.etapa-marca{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;border:1.5px solid var(--borda-forte);color:var(--texto-3);
  flex:none;background:var(--superficie)}
.etapa.etapa-feita{color:var(--texto-2)}
.etapa.etapa-feita .etapa-marca{background:var(--selo);border-color:var(--selo);color:var(--branco)}
.etapa.etapa-feita:not(:last-child)::after{background:var(--selo)}
.etapa.etapa-atual{color:var(--texto);font-weight:600}
.etapa.etapa-atual .etapa-marca{background:var(--ouro);border-color:var(--ouro);color:var(--sobre-ouro)}

.etapa-titulo{margin:0 0 2px;font-size:14.5px;font-weight:600}
.etapa-legenda{margin:0 0 14px}

/* Lista compacta dos arquivos do documento - era um bloco cheio (.interno)
   por PDF, competindo visualmente com a etapa atual (identidade); agora e
   uma lista discreta de apoio, uma linha por arquivo. */
.lista-arquivos{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:1px}
.arquivo-linha{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13px;
  border-bottom:1px solid var(--borda)}
.lista-arquivos li:last-child .arquivo-linha{border-bottom:0}
.arquivo-nome{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arquivo-tamanho{margin-left:auto;color:var(--texto-3);font-size:12px;flex:none}

/* Acao secundaria discreta (ex. "reenviar codigo") - nao compete com o CTA
   principal (.btn-forte), mas ainda e um alvo de clique claro. */
.link-sutil{background:none;border:0;padding:6px 0;margin-top:2px;font:inherit;font-size:12.5px;
  color:var(--texto-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.link-sutil:hover{color:var(--texto)}

/* Recusar e a excecao, nao o caminho esperado - fica atras de um disclosure
   nativo (sem JS) em vez de sempre visivel, pra nao competir com a etapa
   atual (hoje "aguardando o bloco de assinatura", amanha o proprio ato de
   assinar). summary reusa .link-sutil; so tira o marcador padrao do <details>. */
.recusa-revelar{margin-top:16px}
.recusa-revelar summary.link-sutil{list-style:none}
.recusa-revelar summary.link-sutil::-webkit-details-marker{display:none}
.recusa-revelar[open] summary.link-sutil{margin-bottom:12px}

/* Tela de perfil (bloco de UI do painel): coluna lateral fixa (foto +
   identidade) + conteudo em abas, no lugar dos cartoes empilhados de antes. */
.perfil-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.perfil-lateral{padding:24px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.avatar-grande{width:96px;height:96px;margin-bottom:12px}
.avatar-img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:var(--vidro-2);border:1px solid var(--vidro-borda);box-shadow:var(--sombra)}
.avatar-iniciais{font-size:30px;font-weight:700;color:var(--branco);
  background:linear-gradient(155deg,var(--ouro),var(--mata-3))}
.perfil-nome{margin:2px 0 0;font-size:15px;font-weight:600}
.perfil-email{margin:1px 0 16px;font-size:12.5px;color:var(--texto-2);word-break:break-all}
.perfil-lateral form.grade{width:100%;gap:10px}
.botoes-coluna{flex-direction:column}

/* Recorte/zoom do avatar - overlay simples sobre o cartao lateral, sem
   dialogo nativo (evita polyfill de <dialog> em navegador antigo) nem lib
   de crop nova (regra 6): canvas + slider de zoom, tudo em painel.js. */
.recorte{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(20,16,9,.55);padding:20px}
.recorte[hidden]{display:none}
.recorte-caixa{background:var(--superficie);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:340px}
.recorte-titulo{color:var(--texto);font-size:14px;font-weight:600;margin:0;align-self:flex-start}
.recorte-area{display:flex;justify-content:center}
.recorte-tela{border-radius:50%;background:var(--vidro-2);cursor:grab;touch-action:none}
.recorte-tela:active{cursor:grabbing}
.recorte-zoom-rotulo{display:block;font-size:12px;color:var(--texto-2);margin:0;align-self:flex-start}
.recorte-caixa input[type=range]{width:100%;accent-color:var(--ouro)}
.recorte-caixa .botoes{width:100%}

/* Abas da tela de perfil - nativo (botao + hidden), sem componente de tab
   novo. painel.js so alterna a classe/atributo, cada painel ja e HTML
   completo (sem carregar nada via JS). */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin-bottom:18px}
.aba{background:none;border:0;border-bottom:2px solid transparent;padding:10px 4px;margin-right:18px;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--texto-2);cursor:pointer}
.aba:hover{color:var(--texto)}
.aba.aba-ativa{color:var(--texto);border-bottom-color:var(--ouro);font-weight:600}
.aba-painel[hidden]{display:none}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{flex-direction:row;align-items:center;gap:14px;overflow-x:auto;padding:12px 14px}
  .lateral .grupo,.lateral .lateral-rodape{display:none}
  .colunas.par{grid-template-columns:1fr}
  .principal{padding:20px 18px 32px}
  .dois{grid-template-columns:1fr}
  .perfil-layout{grid-template-columns:1fr}
  .nivel-seletor{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .painel,.cartao,.tema,.topo{background:var(--superficie)}
}

/* Editor de posicao do campo de assinatura (bloco 3.2a). */
.ed{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;align-items:start}
.ed-lateral{position:sticky;top:16px}
.ed-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ed-part{padding-bottom:12px;border-bottom:1px solid var(--borda)}
.ed-part:last-child{border-bottom:0}
.ed-part-nome{margin:0;font-size:13.5px;font-weight:500}
.ed-part-sit{margin:1px 0 8px;font-size:12px;color:var(--texto-2)}
.ed-part-acoes{display:flex;flex-wrap:wrap;gap:8px}
.ed-part-pag{margin:0 0 10px}
.ed-ajuda{margin-top:14px}
.ed-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;position:sticky;top:0;z-index:5;padding:8px 56px 8px 0;margin-bottom:12px;
  background:var(--canvas)}
/* Rolando (barra grudada): a barra vira o MESMO vidro desfocado do `.topo` do site (gradiente + blur) e se estende para a ESQUERDA ate a borda do conteudo (nao cobre o menu lateral). O blur fica no ::before (atras do conteudo da barra) porque backdrop-filter aninhado nao enxerga a pagina. Parada, nao existe. */
/* Posicionar: o cabecalho (titulo + Voltar) ROLA junto com a pagina; so a barra do editor fica fixa (senao eram duas barras de vidro, uma sobre a outra) */
.topo-rola{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.ed-sentinela{height:1px;margin-bottom:-1px;pointer-events:none}
.ed-barra-fixa{background:none}
.ed-barra-fixa::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * var(--ed-cobertura,0px));right:0;
  background:linear-gradient(180deg,var(--vidro) 55%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
/* O Voltar da barra so existe com a barra grudada (rolando); parada, o Voltar do topo basta (sem dois botoes iguais) */
.ed-barra [data-voltar]{display:none}
.ed-barra-fixa [data-voltar]{display:inline-flex}
.ed-zoom{min-width:48px;text-align:center;font-size:13px;color:var(--texto-2)}
.ed-estado{margin-left:auto;font-size:12.5px;color:var(--texto-2)}
.ed-paginas{display:grid;gap:22px;justify-items:center}
.ed-pagina{max-width:100%;overflow-x:auto}
.ed-pagina-rotulo{margin:0 0 6px;font-size:12.5px;color:var(--texto-2)}
.ed-pagina-nota{margin:0 0 6px;font-size:12.5px;color:var(--alerta)}
.ed-folha{position:relative;background:var(--branco);box-shadow:var(--sombra);border-radius:2px}
.ed-canvas{display:block}
.ed-overlay{position:absolute;inset:0}
.ed-campo{position:absolute;box-sizing:border-box;border:2px solid var(--ouro);border-radius:4px;
  background:var(--ouro-anel);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.ed-campo:focus-visible{outline:2px solid var(--texto);outline-offset:2px}
.ed-campo-ativo{cursor:grabbing;border-style:dashed}
.ed-campo-rotulo{display:block;padding:2px 6px;font-size:12px;font-weight:600;color:var(--sobre-ouro);
  background:var(--ouro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.ed-campo-alca{position:absolute;right:0;bottom:0;width:26px;height:26px;cursor:nwse-resize;touch-action:none;
  background:linear-gradient(135deg,transparent 50%,var(--ouro) 50%)}
@media (max-width:860px){
  .ed{grid-template-columns:minmax(0,1fr)}
  .ed-lateral{position:static}
}

/* Botao-link isolado entre a lista e um formulario: respiro acima e abaixo. */
.btn-espaco{display:flex;margin:16px 0 20px}

/* Botao so de icone (ex.: excluir arquivo). Traco fino arredondado, cor por currentColor. */
.btn-icone{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:none;border:1px solid var(--borda);border-radius:var(--raio);color:var(--texto-2);cursor:pointer}
.btn-icone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn-icone:hover{background:var(--vidro-2);border-color:var(--texto-3);color:var(--texto)}
.btn-icone-risco:hover{background:var(--risco-fundo);border-color:var(--risco);color:var(--risco)}
.btn-icone:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}

/* Icones de botao (App\Http\Icone): traco fino arredondado, cor por currentColor. */
.ico{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.acao{display:flex;align-items:center;justify-content:center;gap:8px}
.item-sair,.aba{display:inline-flex;align-items:center;gap:8px}
.item-sair{display:flex}
.link-sutil{display:inline-flex;align-items:center;gap:7px}
.link-sutil .ico{width:15px;height:15px}

/* Acoes no topo da tela (ex.: Excluir documento + Voltar). */
.topo-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}

/* Linha da lista com link + acao (lixeira): o <a> nao pode conter o <form>. */
.linha-dupla{padding:0;gap:0}
.linha-link{display:flex;flex:1;align-items:center;gap:14px;min-width:0;padding:13px 10px 13px 18px;color:inherit;text-decoration:none}
.linha-acao{margin:0 14px 0 4px;flex:none;width:34px;height:34px}

/* Pagina publica de validacao (/verificar/{codigo}) - documento ao lado, cartoes e menu de downloads.
   So variaveis de cor (regra do projeto); layout em grade, empilha no celular. */
.validacao{max-width:1280px;margin:0 auto;padding:18px 20px 40px}
.validacao-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-right:52px}
.validacao-marca{display:inline-block}
.validacao-titulo{font-size:20px;margin:0 0 14px}
.validacao-grade{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:18px;align-items:start}
.validacao-doc{background:var(--superficie-2);border:1px solid var(--borda);border-radius:var(--raio);padding:12px}
.leitor{min-height:240px}
.leitor-estado{color:var(--texto-2);font-size:13.5px;margin:6px 4px}
.leitor-paginas{display:flex;flex-direction:column;align-items:center;gap:10px}
.leitor-pagina{display:block;max-width:100%;background:var(--branco);box-shadow:var(--sombra)}
.validacao-lateral{display:flex;flex-direction:column;gap:14px}
.validacao-situacao{display:flex;align-items:center;gap:8px;margin:2px 0 10px;color:var(--selo);font-weight:600}
.validacao-dados{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 14px;font-size:13px}
.validacao-dados dt{color:var(--texto-3)}
.validacao-dados dd{margin:0;color:var(--texto);word-break:break-all}
.menu-baixar{position:relative;margin-bottom:10px}
.menu-baixar>summary{list-style:none;cursor:pointer;display:inline-flex}
.menu-baixar>summary::-webkit-details-marker{display:none}
.menu-baixar-lista{margin-top:8px;display:flex;flex-direction:column;background:var(--superficie);
  border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden}
.menu-baixar-lista a{padding:11px 14px;text-decoration:none;color:var(--texto);border-bottom:1px solid var(--borda)}
.menu-baixar-lista a:last-child{border-bottom:0}
.menu-baixar-lista a:hover{background:var(--ouro-suave)}
.validacao-assinaturas{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.validacao-assinaturas li{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--borda);
  border-radius:var(--raio);background:var(--superficie)}
.sit{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;margin-top:2px}
.sit-ok{background:var(--selo-fundo);color:var(--selo)}
.sit-aviso{background:var(--ouro-suave);color:var(--texto)}
.sit-erro{background:var(--risco-fundo);color:var(--risco)}
.validar-ao-vivo{margin:4px 0 8px}
.validar-ao-vivo .painel-sub{margin-top:8px}
.validacao-viva{font-weight:600}
.validacao-viva.viva-valida{color:var(--selo)}
.validacao-viva.viva-invalida{color:var(--risco)}
.assinatura-nome{margin:0 0 2px;font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:.02em}
.onde-codigo{margin-top:14px}
.onde-codigo>summary{cursor:pointer}
.onde-codigo-img{display:block;max-width:100%;height:auto;margin-top:12px;border:1px solid var(--borda);border-radius:var(--raio)}
@media (max-width:900px){.validacao-grade{grid-template-columns:minmax(0,1fr)}}
.menu-pacote{margin-top:14px}
.menu-pacote>summary{cursor:pointer;display:inline-flex}
.menu-pacote form{margin-top:12px}
.menu-pacote textarea{width:100%;font:inherit}

.busca{display:flex;gap:10px;align-items:flex-end;padding:12px 18px;border-bottom:1px solid var(--borda)}
.busca .campo{flex:1}
.paginacao{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--borda);font-size:13px;color:var(--texto-2)}
.contato-picker{position:relative}
.contato-resultados{list-style:none;margin:6px 0 0;padding:4px;border:1px solid var(--borda-forte);border-radius:var(--raio);background:var(--vidro-2);max-height:260px;overflow:auto}
.contato-opcao{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:2px;padding:8px 10px;border:0;border-radius:var(--raio);background:transparent;color:var(--texto);font:inherit;text-align:left;cursor:pointer}
.contato-opcao:hover,.contato-opcao:focus-visible{background:var(--vidro-2);outline:2px solid var(--ouro);outline-offset:-2px}
.contato-escolhido{min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--borda-forte);border-radius:var(--raio)}
[hidden]{display:none !important}

/* Login por certificado digital (entrar e Perfil > Seguranca) */
.cert-bloco { display: grid; gap: .75rem; }
.cert-ou { text-align: center; margin: .75rem 0 .25rem; }
.lista-cert { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .75rem; }
.lista-cert li { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.badge-part{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap}
.badge-part .ico{width:13px;height:13px;stroke-width:2.2}
.b-pendente{background:var(--vidro-2);color:var(--texto-2);box-shadow:inset 0 0 0 1px var(--borda-forte)}
.b-notificado{background:var(--alerta-fundo);color:var(--alerta)}
.b-andamento{background:var(--info-fundo);color:var(--info)}
.b-assinado{background:var(--selo-fundo);color:var(--selo)}
.b-recusado{background:var(--risco-fundo);color:var(--risco)}
.resumo-importacao{margin:0 0 14px;padding-left:18px;font-size:13.5px;line-height:1.7}
.resumo-importacao .aviso-linha{color:var(--alerta)}
.tabela-rolagem{overflow-x:auto}
.colunas.meio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.colunas.meio{grid-template-columns:minmax(0,1fr)}}
.bloco-importacao{margin-top:20px}
.bloco-importacao .botoes{flex-wrap:wrap}
.linha-compacta .linha-link{padding:8px 10px 8px 18px}
.linha-compacta .linha-nome{margin-bottom:1px}
.linha-compacta .linha-acao{margin-right:12px}
.paginacao p{margin:0}
.paginacao-resumo strong{color:var(--texto);font-weight:600}
.paginacao-passos{display:flex;gap:10px;align-items:center}
.paginacao-tamanho{display:flex;gap:6px;align-items:center}
.pag-tamanho{padding:2px 8px;border-radius:6px;color:var(--texto-2);text-decoration:none}
.pag-tamanho:hover{background:var(--vidro-2);color:var(--texto)}
.pag-tamanho[aria-current]{background:var(--ouro-suave);color:var(--texto);font-weight:600}

/* F5a - pastas: arvore, gerenciamento na linha e filtro da lista de documentos. */
.pasta-linha .linha-link{gap:10px}
.pasta-recuo-1 .linha-link{padding-left:40px}
.pasta-recuo-2 .linha-link{padding-left:62px}
.pasta-recuo-3 .linha-link{padding-left:84px}
.pasta-gerir{position:relative;flex:none;margin:0 14px 0 4px}
.pasta-gerir>summary{list-style:none;cursor:pointer}
.pasta-gerir>summary::-webkit-details-marker{display:none}
.pasta-gerir[open]>summary{background:var(--vidro-2);border-color:var(--texto-3);color:var(--texto)}
.pasta-gerir-corpo{position:absolute;right:0;top:40px;z-index:5;width:min(320px,80vw);display:grid;gap:14px;padding:14px;
  background:var(--superficie);border:1px solid var(--borda-forte);border-radius:var(--raio);box-shadow:var(--sombra)}
.filtro-pasta{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--borda);flex-wrap:wrap}
.filtro-pasta label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--texto-2)}
.filtro-pasta select{font:inherit;font-size:13.5px;padding:7px 10px;border-radius:var(--raio);border:1px solid var(--borda-forte);
  background:var(--superficie);color:var(--texto);min-width:0;max-width:100%}
.filtro-pasta-caminho{display:flex;align-items:center;gap:8px;margin:0;padding:10px 18px;font-size:13px;color:var(--texto-2);border-bottom:1px solid var(--borda)}

/* o popover de gerenciar sai do cartao: sem isso o overflow do .painel o corta */
.painel-pastas{overflow:visible}
.painel-pastas .pasta-gerir[open]{z-index:6}

/* F5b-1 - membros e convites */
.convite-linha{flex-wrap:wrap;gap:10px}
.convite-linha form{margin:0}
.convite-pastas{border:1px solid var(--borda);border-radius:var(--raio);padding:10px 12px;max-height:220px;overflow:auto;margin:0}
.convite-pastas legend{font-size:12.5px;font-weight:500;color:var(--texto-2);padding:0 6px}
.convite-pasta{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px 0;border-bottom:1px solid var(--borda)}
.convite-pasta:last-child{border-bottom:0}
.convite-sub{margin:2px 0 4px 16px}
.convite-sub>summary{cursor:pointer;font-size:12.5px;color:var(--texto-2);padding:4px 0}
.convite-pasta select{font:inherit;font-size:13.5px;padding:8px 10px;width:100%;border-radius:var(--raio);border:1px solid var(--borda-forte);background:var(--superficie);color:var(--texto)}
.aviso-pastas{margin-bottom:14px}
.aviso-pastas{background:var(--ouro-suave);color:var(--texto);line-height:1.5}
.membro-gerir-corpo{width:min(340px,86vw)}
.membro-gerir-corpo{max-height:min(520px,75vh);overflow:auto}
.liberacao{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:6px 0;border-bottom:1px solid var(--borda)}
.liberacao:last-of-type{border-bottom:0}
.liberacao .campo-linha{cursor:default;flex-wrap:wrap}
/* F7a - cadastro publico, redefinicao de senha e Termos */
.regras-senha{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px;color:var(--texto-2)}
.regras-senha li{padding:2px 0 2px 20px;position:relative}
.regras-senha li::before{content:"";position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;background:currentColor;opacity:.55;
  -webkit-mask:var(--ic-regra) center/contain no-repeat;mask:var(--ic-regra) center/contain no-repeat;
  --ic-regra: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.2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E")}
.regras-senha li.ok{color:var(--selo)}
.regras-senha li.ok::before{opacity:1;--ic-regra: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E")}
.regras-senha li.falha{color:var(--risco)}
.regras-senha li.falha::before{opacity:1;--ic-regra: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal-pagina{max-width:760px;margin:0 auto;padding:32px 20px;line-height:1.6}
.legal-texto h2{font-size:16px;margin:22px 0 6px}
.legal-texto p{margin:0 0 10px}
.legal-texto ul{margin:0 0 12px;padding-left:22px}
.legal-texto li{margin:0 0 4px}
.legal-tabela{overflow-x:auto;margin:6px 0 16px}
.legal-tabela table{width:100%;border-collapse:collapse;font-size:13px}
.legal-tabela th,.legal-tabela td{border:1px solid var(--borda);padding:7px 9px;text-align:left;vertical-align:top}
.legal-tabela th{background:var(--superficie-2)}
/* F6 - seletor de organizacao (so aparece com mais de uma) */
.seletor-organizacao{display:grid;gap:6px;margin:10px 0 4px;padding:10px;border:1px solid var(--borda);border-radius:var(--raio)}
.seletor-organizacao label{font-size:12px;font-weight:500;color:var(--texto-2)}
.seletor-organizacao select{font:inherit;font-size:13.5px;padding:7px 9px;width:100%;border-radius:var(--raio);border:1px solid var(--borda-forte);background:var(--superficie);color:var(--texto)}
/* F5c - pagina de permissoes */
.permissoes-texto{max-width:760px;line-height:1.6}
.permissoes-texto h2{font-size:16px;margin:26px 0 8px}
.permissoes-texto ul{padding-left:20px;margin:8px 0}
.permissoes-texto li{margin:5px 0}
.permissoes-tabela{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0}
.permissoes-tabela th,.permissoes-tabela td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--borda);vertical-align:top}
.permissoes-tabela th{font-weight:600;color:var(--texto-2)}
.membro-corpo .linha-nome{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.painel-membros{overflow:visible}
.painel-membros .pasta-gerir[open]{z-index:6}
/* Membros: a esquerda (convites pendentes, encerrados e membros) em coluna, o formulario de novo convite na coluna da direita; respiro entre os blocos e dentro das linhas. */
.membros-esquerda{display:flex;flex-direction:column;gap:22px;min-width:0}
.membros-colunas>.cartao{align-self:start}
.membro-linha .linha-corpo{padding:16px 20px}
.membro-linha .linha-meta{margin-top:6px;line-height:1.5}
.membro-linha{align-items:center}
.membros-esquerda .convite-linha{padding:16px 20px;gap:12px}
/* Termos e Politica em janela dentro da propria pagina (legal-modal.js); sem JS o link abre a pagina normal */
.legal-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--texto) 55%,transparent);animation:legal-fade .15s ease}
.legal-modal[hidden]{display:none}
.legal-modal-caixa{display:flex;flex-direction:column;width:min(720px,100%);max-height:min(86vh,760px);background:var(--superficie);color:var(--texto);border:1px solid var(--borda);border-radius:16px;box-shadow:var(--sombra);overflow:hidden;animation:legal-sobe .18s ease}
.legal-modal-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--borda);background:var(--superficie-2)}
.legal-modal-topo h2{margin:0;font-size:16px}
.legal-modal-corpo{padding:16px 22px 22px;overflow:auto;line-height:1.6;font-size:14px}
.legal-modal-corpo .titulo{display:none}
.legal-modal-corpo .legal-texto h2{font-size:15px;margin:18px 0 6px}
.legal-modal-pe{display:flex;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--borda)}
.legal-modal-carregando{color:var(--texto-2)}
@keyframes legal-fade{from{opacity:0}to{opacity:1}}
@keyframes legal-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.legal-modal,.legal-modal-caixa{animation:none}}
/* <select> com lista propria (select-custom.js): botao no padrao dos campos e lista no padrao do sistema; o <select> nativo fica escondido
   (continua sendo quem manda no formulario). */
.sel{position:relative;display:block;min-width:0;max-width:100%}
.filtro-pasta .sel{display:inline-block}
.sel-nativo{position:absolute !important;inset:0;width:100% !important;height:100% !important;opacity:0;pointer-events:none}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:14px;text-align:left;
  padding:10px 12px;border-radius:var(--raio);border:1px solid var(--borda-forte);background:var(--superficie);color:var(--texto);cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease}
.sel-btn:hover:not(:disabled){border-color:var(--texto-3)}
.sel-btn:focus-visible,.sel-btn[aria-expanded="true"]{outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouro-anel)}
.sel-btn:disabled{opacity:.6;cursor:not-allowed}
.sel-btn.vazio .sel-texto{color:var(--texto-3)}
.sel-texto{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sel-seta{flex:none;color:var(--texto-2);transition:transform .15s ease}
.sel-btn[aria-expanded="true"] .sel-seta{transform:rotate(180deg)}
.filtro-pasta .sel-btn{font-size:13.5px;padding:7px 10px}
.convite-pasta .sel-btn,.seletor-organizacao .sel-btn{font-size:13.5px;padding:8px 10px}
.seletor-organizacao .sel-btn{padding:7px 9px}
.sel-lista{position:fixed;z-index:120;margin:0;padding:6px;list-style:none;overflow:auto;box-sizing:border-box;background:var(--superficie);color:var(--texto);
  border:1px solid var(--borda-forte);border-radius:var(--raio);box-shadow:var(--sombra);animation:sel-entra .12s ease}
.sel-op{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:calc(var(--raio) - 4px);font-size:13.5px;cursor:pointer;line-height:1.3}
.sel-op span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-op.foco{background:var(--superficie-2)}
.sel-op.ativo{color:var(--ouro);font-weight:600}
.sel-op.ativo::after{content:"";flex:none;width:14px;height:14px;background:currentColor;
  -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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.sel-op.off{opacity:.45;cursor:not-allowed}
@keyframes sel-entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sel-lista{animation:none}}
/* F7b - botoes de entrar com Google/Microsoft */
.social-botoes{display:grid;gap:8px}
.social-botoes form{margin:0}
.nota-senha{padding:8px 10px;border:1px dashed var(--borda-forte);border-radius:var(--raio)}
/* Botoes OFICIAIS de entrar com Google e Microsoft (diretrizes de marca de cada um): so a cor, a altura e o logotipo seguem a marca; o tema claro usa a
   versao clara do botao e o escuro, a versao escura. Cores so por variavel. */
:root{
  --marca-google-fundo:#FFFFFF; --marca-google-borda:#747775; --marca-google-texto:#1F1F1F;
  --marca-ms-fundo:#FFFFFF; --marca-ms-borda:#8C8C8C; --marca-ms-texto:#5E5E5E;
}
html[data-tema="escuro"]{
  --marca-google-fundo:#131314; --marca-google-borda:#8E918F; --marca-google-texto:#E3E3E3;
  --marca-ms-fundo:#2F2F2F; --marca-ms-borda:#2F2F2F; --marca-ms-texto:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  html:not([data-tema="claro"]){
    --marca-google-fundo:#131314; --marca-google-borda:#8E918F; --marca-google-texto:#E3E3E3;
    --marca-ms-fundo:#2F2F2F; --marca-ms-borda:#2F2F2F; --marca-ms-texto:#FFFFFF;
  }
}
.btn-marca{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;cursor:pointer;border-style:solid;border-width:1px;
  font-family:inherit;line-height:1;transition:filter .15s ease,box-shadow .15s ease}
.btn-marca:hover{filter:brightness(.96)}
.btn-marca:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ouro-anel)}
.btn-marca .marca-logo{flex:none;display:block}
.btn-google{height:40px;padding:0 12px;border-radius:var(--raio);background:var(--marca-google-fundo);border-color:var(--marca-google-borda);color:var(--marca-google-texto);font-size:14px;font-weight:500;letter-spacing:.25px}
.btn-google .marca-logo{width:18px;height:18px}
.btn-microsoft{height:41px;padding:0 12px;border-radius:var(--raio);background:var(--marca-ms-fundo);border-color:var(--marca-ms-borda);color:var(--marca-ms-texto);font-size:15px;font-weight:600}
.btn-microsoft .marca-logo{width:21px;height:21px}
/* Perfil > Seguranca: os blocos ficam lado a lado quando ha largura (senha | e-mail; contas conectadas | certificado) e empilham no estreito */
.colunas.lado-a-lado{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1280px){.colunas.lado-a-lado{grid-template-columns:minmax(0,1fr)}}
.colunas.lado-a-lado>.cartao-linha{grid-column:1/-1}
.colunas.lado-a-lado{align-items:stretch}
/* Contatos: lista e "Novo contato" com a mesma altura */
.colunas.meio{align-items:stretch}
/* Perfil > Contas conectadas */
.nota-senha{display:grid;gap:10px;margin:12px 0}
.nota-senha .painel-sub{margin:0}
.contas-lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.conta-item{padding:12px;border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie)}
.conta-linha{display:flex;align-items:center;gap:12px}
.conta-logo{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--borda);border-radius:50%;background:var(--superficie-2)}
.conta-logo .marca-logo{width:18px;height:18px;display:block}
.conta-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.conta-nome{font-weight:600;font-size:14px}
.conta-email{font-size:12.5px;color:var(--texto-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-confirma{display:flex;gap:8px;margin-top:10px}
.conta-confirma input{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:8px 10px;border-radius:var(--raio);border:1px solid var(--borda-forte);background:var(--superficie);color:var(--texto)}
.conta-confirma input:focus-visible{outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouro-anel)}
.contas-vazio{margin:12px 0 0;padding:14px;border:1px dashed var(--borda-forte);border-radius:var(--raio);text-align:center;font-size:13px;color:var(--texto-2)}
.contas-conectar{margin-top:16px;padding-top:14px;border-top:1px solid var(--borda)}
.contas-subtitulo{margin:0;font-size:13px;font-weight:600;color:var(--texto-2)}


/* Dashboard (Inicio) */
.inicio-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch;margin-bottom:20px}
@media(max-width:1100px){.inicio-grade{grid-template-columns:minmax(0,1fr)}}
.inicio-grade>.painel{display:flex;flex-direction:column}
.inicio-grade .painel-corpo{flex:1}
.inicio-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.inicio-lista li{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie-2)}
.inicio-lista .titulo-doc{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.inicio-lista .origem-doc{font-size:12.5px;color:var(--texto-2);overflow-wrap:anywhere}
.inicio-lista .inicio-item-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.inicio-lista form{margin:0;flex:none}
.indicadores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.indicador{padding:12px;border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie-2)}
.indicador dt{font-size:12.5px;color:var(--texto-2);margin:0}
.indicador dd{margin:2px 0 0;font-size:24px;font-weight:600;color:var(--texto)}
.indicador.destaque dd{color:var(--alerta)}
.inicio-nota{font-size:12.5px;color:var(--texto-2);margin:12px 0 0;line-height:1.5}
.inicio-atalhos{display:flex;flex-wrap:wrap;gap:10px}
.inicio-rodape-bloco{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.inicio-ocultar{display:inline}
.btn-discreto{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--texto-2);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer}

.inicio-linhas{list-style:none;margin:0;padding:0}
.inicio-linhas li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--borda)}
.inicio-linhas li:last-child{border-bottom:0}
.inicio-linhas li[hidden]{display:none}
.linha-nome-inicio{display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--texto);text-decoration:none;font-size:14px;overflow-wrap:anywhere}
a.linha-nome-inicio:hover{text-decoration:underline}
.linha-qtd{color:var(--texto-3);font-size:13px}
.linha-org{font-size:12px;color:var(--texto-2);text-transform:uppercase;letter-spacing:.03em;text-align:right}
.linha-troca{display:flex;align-items:center;gap:10px;margin:0}
.btn-mini{padding:4px 10px;font-size:12.5px}
.busca-bloco{margin-left:auto;display:flex;align-items:center;gap:6px;border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie-2);padding:4px 10px;max-width:220px}
.busca-bloco input{border:0;background:none;color:var(--texto);font:inherit;font-size:13px;min-width:0;width:100%;outline:none}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.inicio-ocultar{margin:0 0 0 6px;display:inline-flex}
.icone-discreto{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;border-radius:8px;background:none;color:var(--texto-3);cursor:pointer;padding:0}
.icone-discreto:hover,.icone-discreto:focus-visible{background:var(--superficie-2);color:var(--texto)}
.icone-discreto .ico{width:15px;height:15px}
.aviso-saldo{background:var(--ouro-suave);color:var(--texto);line-height:1.5;margin:12px 0 0}
.aviso-saldo a{color:inherit;text-decoration:underline}
button[disabled]{opacity:.55;cursor:not-allowed}

/* campo de usuario escondido nos formularios que pedem a senha atual (ver campos.js): fora da tela, nao some do DOM */
.usuario-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- Planos e creditos (F8b-3b) ---- */
.fat-grade{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:stretch}
.fat-bloco{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);padding:20px 22px;box-shadow:var(--sombra)}
.fat-bloco h2{margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.fat-topo-bloco{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.fat-topo-bloco h2{margin:0}
.fat-vazio{color:var(--texto-2);font-size:14px;margin:0}
.fat-saldo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fat-rotulo{display:block;font-size:12.5px;color:var(--texto-2);margin-bottom:2px}
.fat-valor{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--texto)}
.fat-valor-sec{font-size:13px;color:var(--texto-2);margin-top:2px}
.fat-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fat-acoes form{margin:0}
.fat-dados dt{font-size:12.5px;color:var(--texto-2);margin:10px 0 1px}
.fat-dados dt:first-child{margin-top:0}
.fat-dados dd{margin:0;font-size:14px;color:var(--texto)}
.fat-aviso{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:var(--alerta-fundo);color:var(--alerta);font-size:13.5px}
.fat-secao{margin-top:28px}
.fat-secao-titulo{margin:0 0 4px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.fat-secao-sub{margin:0 0 16px;color:var(--texto-2);font-size:14px;max-width:70ch}
.planos{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.plano{display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra)}
.plano-cab{background:var(--mata-2);color:var(--branco);padding:14px 18px;font-size:16px;font-weight:600}
.plano-preco{padding:20px 18px 14px;display:flex;align-items:baseline;gap:6px;color:var(--texto)}
.plano-preco small{font-size:14px;color:var(--texto-2)}
.plano-preco strong{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.plano-preco span{font-size:13px;color:var(--texto-2)}
.plano-lista{list-style:none;margin:0;padding:0 18px;display:grid;gap:0}
.plano-lista li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--borda);font-size:14px}
.plano-lista li span{color:var(--texto-2)}
.plano-lista li b{font-weight:600;color:var(--texto);text-align:right;white-space:nowrap}
.plano-mais{margin-top:4px;padding:0 18px}
.plano-mais summary{list-style:none;cursor:pointer;padding:10px 0;font-size:13.5px;font-weight:600;color:var(--ouro-texto);border-top:1px solid var(--borda);text-align:center}
.plano-mais summary::-webkit-details-marker{display:none}
.plano-mais .menos{display:none}
.plano-mais[open] .mais{display:none}
.plano-mais[open] .menos{display:inline}
.plano-mais ul{list-style:none;margin:0;padding:0}
.plano-mais li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--borda);font-size:13.5px}
.plano-mais li span{color:var(--texto-2)}
.plano-mais li b{font-weight:600;text-align:right;white-space:nowrap}
.plano-acao{margin-top:auto;padding:16px 18px 18px}
.plano-acao .btn{width:100%;justify-content:center}
.avulso{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.avulso .campo{margin:0;min-width:200px}
.avulso input{font:inherit;width:100%}
.avulso-total{display:flex;flex-direction:column;min-width:170px}
.avulso-total strong{font-size:22px;font-weight:600;letter-spacing:-.02em}
.avulso-total span{font-size:12.5px;color:var(--texto-2)}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:12.5px;font-weight:600;color:var(--texto-2);padding:0 12px 10px;border-bottom:1px solid var(--borda-forte)}
.tabela td{padding:14px 12px;border-bottom:1px solid var(--borda);vertical-align:top}
.tabela th:first-child,.tabela td:first-child{padding-left:0}
.tabela th:last-child,.tabela td:last-child{padding-right:0;text-align:right}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela tr:last-child td{border-bottom:0;padding-bottom:0}
.situacao{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.situacao i{width:8px;height:8px;border-radius:50%;background:var(--texto-3);display:inline-block}
.situacao.ok i{background:var(--selo)}
.situacao.espera i{background:var(--ouro)}
.situacao.erro i{background:var(--risco)}
.tabela .nota{display:block;margin-top:3px;font-weight:400;font-size:13px;color:var(--texto-2);max-width:46ch}
.tabela a{color:var(--texto);text-underline-offset:3px}
.fin-grade{display:grid;gap:20px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.fin-resumo dl{margin:0}
.fin-linha{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px;border-bottom:1px solid var(--borda)}
.fin-linha span{color:var(--texto-2)}
.fin-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 4px}
.fin-total span{font-size:14px;color:var(--texto-2)}
.fin-total strong{font-size:26px;font-weight:700;letter-spacing:-.03em}
.fin-resumo .btn{width:100%;justify-content:center;margin-top:12px}
.fin-nota{margin:12px 0 0;font-size:12.5px;color:var(--texto-2)}
.fin-meios{border:0;margin:0 0 14px;padding:0;display:grid;gap:10px}
.fin-meios legend{font-size:13px;font-weight:600;margin-bottom:8px;padding:0}
.fin-meio{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--borda-forte);border-radius:var(--raio);background:var(--superficie);cursor:pointer}
.fin-meio:has(input:checked){border-color:var(--texto);background:var(--superficie-2)}
.fin-meio:has(input:disabled){cursor:not-allowed;opacity:.65}
.fin-meio input{margin-top:3px}
.fin-meio b{display:block;font-size:14px}
.fin-meio small{display:block;margin-top:2px;font-size:12.5px;color:var(--texto-2);line-height:1.5}
.fin-form{display:grid;gap:14px}
.fin-form .campo{margin:0}
.fin-form input,.fin-form select{font:inherit;width:100%}
.fin-duas{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.fin-trio{display:grid;gap:14px;grid-template-columns:140px 1fr 90px}
.fin-escolha{display:flex;gap:22px;flex-wrap:wrap}
.fin-escolha label{display:flex;gap:8px;align-items:center;font-size:14px;width:auto;white-space:nowrap}
.fin-escolha input[type=radio]{width:auto;flex:none;margin:0}
.fin-voltar{display:inline-flex;margin-bottom:14px;font-size:14px;color:var(--texto-2);text-underline-offset:3px}
.fin-espera{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie-2);margin-bottom:20px}
.fin-espera i{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid var(--ouro);border-right-color:transparent;animation:fin-gira 1s linear infinite}
.fin-espera p{margin:0;font-size:14px}
.fin-espera p b{display:block;margin-bottom:2px}
@keyframes fin-gira{to{transform:rotate(360deg)}}
@media (max-width:1100px){.planos{grid-template-columns:repeat(2,minmax(0,1fr))}.fat-grade,.fin-grade{grid-template-columns:1fr}}
@media (max-width:620px){.planos{grid-template-columns:1fr}.fat-saldo{grid-template-columns:1fr}.fin-duas,.fin-trio{grid-template-columns:1fr}.tabela .esconde{display:none}}

.pass{display:flex;gap:0;margin:0 0 20px;padding:0;list-style:none;align-items:center;flex-wrap:wrap}
.pass li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--texto-2)}
.pass li+li::before{content:"";display:inline-block;width:44px;height:1px;background:var(--borda-forte);margin:0 14px}
.pass b{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--superficie-2);border:1px solid var(--borda-forte);color:var(--texto-2)}
.pass .feito b{background:var(--mata-2);border-color:var(--mata-2);color:var(--branco)}
.pass .atual{color:var(--texto);font-weight:600}
.pass .atual b{background:var(--ouro);border-color:var(--ouro);color:var(--sobre-ouro)}
.meios{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--borda-forte);border-radius:var(--raio);overflow:hidden;margin-bottom:16px}
.meios span{padding:12px 14px;text-align:center;font-size:14px;font-weight:600;color:var(--texto-2);background:var(--superficie-2);border-left:1px solid var(--borda-forte)}
.meios span:first-child{border-left:0}
.meios .sel{background:var(--superficie);color:var(--texto);box-shadow:inset 0 -2px 0 var(--ouro)}
.pix{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.pix p{margin:0 0 10px;font-size:14px}
.pix code{display:block;padding:10px 12px;border:1px solid var(--borda);border-radius:8px;background:var(--superficie-2);font-size:12.5px;word-break:break-all}

.fat-bloco .btn[disabled],.plano-acao .btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.tabela-rolagem{overflow-x:auto}
.fin-bloco-vazio{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fin-bloco-vazio p{margin:0;font-size:14px;color:var(--texto-2)}
.fin-alternativa{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--borda);font-size:13.5px;color:var(--texto-2)}
.fin-alternativa form{display:inline}
.fin-alternativa button{font:inherit;background:none;border:0;padding:0;color:var(--texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fin-resultado{padding:14px 16px;border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie-2);margin-bottom:16px}
.fin-resultado b{display:block;margin-bottom:2px}
.fin-resultado p{margin:0;font-size:14px;color:var(--texto-2)}
.fin-resultado.ok{border-color:var(--selo);background:var(--selo-fundo)}
.fin-resultado.ok p,.fin-resultado.ok b{color:var(--selo)}
.fin-resultado.erro{border-color:var(--risco);background:var(--risco-fundo)}
.fin-resultado.erro p,.fin-resultado.erro b{color:var(--risco)}
.pix-copia{display:flex;gap:8px;align-items:stretch}
.pix-copia input{flex:1;min-width:0;font:inherit;font-size:12.5px;padding:8px 10px;border:1px solid var(--borda);border-radius:8px;background:var(--superficie-2);color:var(--texto)}
.pix-qr-img{width:200px;height:200px;border:1px solid var(--borda-forte);border-radius:8px;background:var(--branco)}
[hidden]{display:none !important}
.fat-secao-sub-curto{margin-bottom:14px}
.fat-nota-topo{margin:12px 0 0}
.botoes-topo{margin-top:14px}
.fin-coluna{display:grid;gap:16px;min-width:0}
.fin-linha dt{color:var(--texto-2);margin:0}
.fin-linha dd{margin:0;font-weight:600;text-align:right}
.fin-voltar{display:inline-flex;align-items:center;gap:6px}
.fin-voltar .ico{width:14px;height:14px}
.fat-bloco-largo{max-width:760px}
.fin-trio-uf{grid-template-columns:1fr 1fr 90px}
.campo-senha{max-width:320px}
.fin-escolha{border:0;margin:0;padding:0}
.fin-escolha legend{font-size:13px;color:var(--texto-2);padding:0;margin-bottom:8px}

/* Troca de organizacao na lateral: o mesmo vidro do resto da lateral (translucido sobre o verde-mata), contorno fino e sem caixa dentro de caixa. */
.seletor-organizacao{gap:8px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:calc(var(--raio) + 2px);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.seletor-organizacao label{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lateral-item)}
.seletor-organizacao select,.seletor-organizacao .sel-btn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:var(--lateral-item-hover)}
.seletor-organizacao .sel-btn:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.seletor-organizacao .sel-btn:focus-visible,.seletor-organizacao .sel-btn[aria-expanded="true"]{border-color:var(--ouro)}
.seletor-organizacao .btn{justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--lateral-item-hover);box-shadow:none}
.seletor-organizacao .btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}

/* Jornada do signatario no celular: o indicador de etapas cabia so em telas largas (rotulos nowrap + separadores de 22px = "Assinatura" cortado).
   Em tela estreita os separadores esticam no espaco que sobra (min. 8px) e o resto quebra em vez de cortar. O link discreto (ex. "Ainda nao recebeu?")
   alinha icone e texto mesmo quando o texto quebra em duas linhas. */
.link-sutil{display:inline-flex;align-items:center;gap:6px;text-align:left}
.link-sutil svg{flex:none}
@media(max-width:480px){
  .etapas{flex-wrap:nowrap}
  .etapa{gap:5px;font-size:11.5px}
  .etapa:not(:last-child){flex:1 1 auto}
  .etapa:not(:last-child)::after{flex:1 1 6px;width:auto;min-width:6px;margin:0 5px}
}
@media(max-width:340px){.etapas{flex-wrap:wrap;row-gap:8px}}

/* ---------------------------------------------------------------------------
   Painel da Shield (administração): menu lateral, login, início, organização e planos.
   Só variáveis do tema (nada de cor literal); o admin não carrega JavaScript, então tudo aqui é CSS puro. */
.adm-lateral{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
.adm-selo{margin:-12px 8px 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lateral-titulo)}
.adm-quem{cursor:default}
.adm-quem:hover{background:none;color:var(--lateral-rodape)}
.admin-principal{padding:26px 30px 44px}
.admin-principal>*:not(.topo){max-width:1120px}
.admin-principal .topo{padding-right:30px}
.admin-principal .dois{grid-template-columns:repeat(2,minmax(0,1fr))}

.adm-entrar-pagina{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 0}
.admin-caixa{max-width:400px}

.adm-busca{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.adm-busca .botoes{margin:0}
.adm-atalhos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.adm-atalho{display:flex;align-items:center;gap:13px;padding:16px;border-radius:16px;text-decoration:none;
  background:var(--vidro);border:1px solid var(--vidro-borda);box-shadow:var(--sombra);transition:border-color .15s}
.adm-atalho:hover{border-color:var(--ouro)}
.adm-atalho>span:last-child{min-width:0}
.adm-atalho strong{display:block;font-size:15px}
.adm-atalho .painel-sub{display:block;margin:2px 0 0}

.adm-chip{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.6;
  background:var(--superficie-2);border:1px solid var(--borda);color:var(--texto-2)}
.adm-chip-ok{background:var(--selo-fundo);border-color:transparent;color:var(--selo)}
.adm-chip-off{background:var(--risco-fundo);border-color:transparent;color:var(--risco)}
.adm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px}

.adm-plano{flex-wrap:wrap;align-items:flex-start}
.adm-plano-dados{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px}
.adm-plano-acao{flex:1 1 340px;min-width:0}
.adm-plano-acao .botoes{margin-top:0}

.adm-reauth-titulo{margin:8px 0 -4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.adm-colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.adm-coluna{display:flex;flex-direction:column;gap:18px;min-width:0}
.admin-principal .adm-coluna>.cartao{margin:0}
.adm-mais{color:var(--selo)}
.adm-menos{color:var(--risco)}

@media(max-width:1100px){.adm-colunas{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  .adm-app{grid-template-columns:minmax(0,1fr)}
  /* a regra do painel dos clientes (<=900px) esconde .grupo e .lateral-rodape; no admin o menu precisa continuar visível */
  .adm-lateral .grupo,.adm-lateral .lateral-rodape{display:flex}
  .adm-lateral{position:static;height:auto;overflow:visible;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px}
  .adm-lateral .marca{padding:0}
  .adm-lateral .marca-img{max-width:132px}
  .adm-selo{display:none}
  .adm-itens{order:3;flex:1 1 100%;flex-direction:row;gap:4px;overflow-x:auto}
  .adm-itens .item{flex:none;white-space:nowrap;padding:9px 12px}
  .adm-rodape{order:2;margin:0 0 0 auto;flex-direction:row;align-items:center;gap:6px}
  .adm-quem{padding:0}
  .adm-rodape .item-sair{width:auto;padding:9px 10px}
  .admin-principal{padding:18px 16px 36px}
  .admin-principal .topo{margin:-18px -16px 0;padding:16px 16px 12px;position:static}
  .admin-principal .btn{min-height:42px}
}
@media(max-width:560px){
  .admin-principal .dois,.adm-atalhos,.adm-busca{grid-template-columns:minmax(0,1fr)}
  .adm-busca .botoes .btn{flex:1}
  .adm-quem .conta-rotulo{display:none}
}
@media(max-width:380px){
  .adm-lateral{padding:10px 12px}
  .adm-itens{gap:0}
  .adm-itens .item{padding:9px 7px;gap:6px;font-size:13.5px}
}

/* ---------------------------------------------------------------------------
   Painel dos clientes no celular (<=900px): barra fixa no topo (logo com link para o início, botão do menu e, no canto, o botão de
   tema) e o menu abre num painel que desliza da esquerda, por baixo da barra, com um fundo que fecha ao tocar. Sem JavaScript: o
   checkbox (.menu-marcador) guarda o estado e os rótulos (.menu-botao, .menu-fundo) fazem de botões. No desktop o painel some da
   estrutura (display:contents) e o menu lateral continua como sempre foi. */
.marca-link{text-decoration:none;color:inherit}
.menu-marcador,.menu-botao,.menu-fundo{display:none}
.lateral-cli .menu-painel{display:contents}
.lateral-cli .menu-painel>*{position:relative;z-index:1}
@media(max-width:900px){
  .app{grid-template-rows:auto minmax(0,1fr)}
  .lateral-cli{position:sticky;top:0;z-index:40;align-self:start;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;
    overflow:visible;height:64px;padding:12px 66px 12px 14px}
  .lateral-cli .marca{padding:0}
  .lateral-cli .marca-img{max-width:132px}
  /* o botão de tema é fixo no canto: mesma altura da barra, centro alinhado ao do botão do menu, acima da barra */
  .alterna-tema{top:14px;z-index:50}
  .menu-botao{display:inline-grid;place-items:center;width:40px;height:40px;margin-left:auto;border:0;background:none;
    border-radius:10px;color:var(--lateral-item);cursor:pointer}
  .menu-botao:hover{color:var(--lateral-item-hover)}
  .menu-marcador{display:block;position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
  .menu-marcador:focus-visible+.menu-botao{outline:2px solid var(--ouro);outline-offset:2px}
  .menu-ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .menu-ico-fecha{display:none}
  .menu-marcador:checked+.menu-botao .menu-ico-abre{display:none}
  .menu-marcador:checked+.menu-botao .menu-ico-fecha{display:block}
  .lateral-cli>.menu-fundo{position:fixed;top:64px;right:0;bottom:0;left:0;z-index:34;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
    display:block;transition:opacity .2s}
  .menu-marcador:checked~.menu-fundo{opacity:1;pointer-events:auto}
  .lateral-cli>.menu-painel{display:flex;flex-direction:column;gap:20px;position:fixed;top:64px;bottom:0;left:0;z-index:35;
    width:min(300px,84vw);padding:18px 14px 28px;overflow-y:auto;box-shadow:12px 0 32px -16px rgba(0,0,0,.6);
    background:linear-gradient(168deg,var(--mata-3) 0%,var(--mata-2) 42%,var(--mata) 100%);
    transform:translateX(-104%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  .menu-marcador:checked~.menu-painel{transform:none;visibility:visible;transition:transform .22s ease}
  .lateral-cli .menu-painel .grupo,.lateral-cli .menu-painel .lateral-rodape{display:flex}
  .lateral-cli .menu-painel .lateral-rodape{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
  /* rolagem lateral: o cabeçalho (.topo) tinha margem negativa de 30px e o respiro do conteúdo no celular é de 18px; a barra do menu
     já é fixa, então o cabeçalho deixa de ser "pegajoso" (ficaria escondido por baixo dela) e não reserva mais o canto do tema */
  .principal .topo{margin:-20px -18px 0;padding:16px 18px 12px;position:static;flex-wrap:wrap}
  .principal .topo>div:first-child{flex:1 1 200px;min-width:0}
  /* ações do cabeçalho: em uma linha cada botão, abaixo do título e centralizadas (Membros, Pastas, Todos os documentos...) */
  .principal .topo-acoes{flex:1 1 100%;justify-content:center}
  .principal .topo-acoes .btn,.principal .topo>.btn{flex:1 1 auto;white-space:nowrap}
  .principal .topo>.btn{flex:1 1 100%}
  /* o popover de gerenciar (editar/sair) precisa ficar acima do bloco que vem logo abaixo: o bloco aberto sobe de camada */
  .painel:has(.pasta-gerir[open]){z-index:6}
}

/* Tela pública de validação no celular: logo, botão e título centralizados; dados um abaixo do outro */
@media(max-width:640px){
  .validacao{padding:14px 14px 32px}
  .validacao-topo{flex-direction:column;align-items:center;gap:12px;padding-right:0}
  .validacao-topo .btn{flex:none;white-space:nowrap}
  .validacao-titulo{text-align:center}
  .validacao-dados{grid-template-columns:minmax(0,1fr);gap:0}
  .validacao-dados dt{margin-top:12px;font-size:12px}
  .validacao-dados dt::after{content:":"}
  .validacao-dados dt:first-child{margin-top:0}
  .validacao-dados dd{margin-top:2px}
}

/* Contatos: o campo de busca encolhe e o botão fica dentro do bloco; Faturamento: bairro sozinho, cidade e UF lado a lado */
@media(max-width:620px){
  .busca .campo{min-width:0}
  .busca .campo input{width:100%;min-width:0}
  .busca .btn{flex:none}
  .fin-trio-uf{grid-template-columns:minmax(0,1fr) 96px}
  .fin-trio-uf>:first-child{grid-column:1/-1}
}

/* Trilha de eventos e extrato no celular: sem corte nem rolagem lateral na trilha; extrato com colunas mais enxutas */
@media(max-width:620px){
  .tabela-eventos,.tabela-eventos tbody,.tabela-eventos tr,.tabela-eventos td{display:block;width:100%}
  .tabela-eventos thead{display:none}
  .tabela-eventos tr{padding:11px 18px;border-bottom:1px solid var(--borda)}
  .tabela-eventos tr:last-child{border-bottom:0}
  .tabela-eventos td{padding:0;border:0;overflow-wrap:anywhere}
  .tabela-eventos td:nth-child(1){font-size:12px;color:var(--texto-3)}
  .tabela-eventos td:nth-child(2){font-weight:600;margin-top:2px}
  .tabela-eventos td:nth-child(3){color:var(--texto-2);margin-top:1px}
  .tabela{font-size:13px}
  .tabela th{padding:0 6px 8px;font-size:12px}
  .tabela td{padding:11px 6px}
  .tabela th:first-child,.tabela td:first-child{padding-left:0;width:64px}
  .tabela th:last-child,.tabela td:last-child{padding-right:0}
  .tabela .num{width:1%;white-space:nowrap}
  .tabela .nota{max-width:none;font-size:12px;overflow-wrap:break-word}
  .tabela th.num{font-size:0}
  .tabela th.num::after{content:"Docs";font-size:12px}
}
/* Popup "Confirme sua senha" (confirmar-senha.js): <dialog> nativo no centro, fundo escurecido e desfocado */
.senha-dialogo{width:min(420px,calc(100vw - 32px));margin:auto;padding:0;border:1px solid var(--borda);border-radius:16px;background:var(--superficie);color:var(--texto);box-shadow:var(--sombra);animation:legal-sobe .18s ease}
.senha-dialogo::backdrop{background:color-mix(in srgb,var(--texto) 45%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:legal-fade .15s ease}
.senha-dialogo-form{display:flex;flex-direction:column;gap:14px;padding:22px}
.senha-dialogo-titulo{margin:0;font-size:18px}
.senha-dialogo-texto{margin:0;font-size:14px;line-height:1.5;color:var(--texto-2)}
.senha-dialogo-botoes{display:flex;justify-content:flex-end;gap:10px;margin:0}
.senha-dialogo .campo{margin:0}
.senha-dialogo .aviso{margin:0}
@media (prefers-reduced-motion:reduce){.senha-dialogo,.senha-dialogo::backdrop{animation:none}}
/* Painel da Shield: edicao de plano e de item opcional dentro da linha (details) */
.adm-editar{flex:1 1 100%;min-width:0}
.adm-editar>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none}
.adm-editar>summary::-webkit-details-marker{display:none}
.adm-editar[open]>summary{margin-bottom:10px}
.adm-editar .grade{margin-top:4px}