/* Ajustes da versão PHP: as telas usam a mesma folha do protótipo (plataforma.css); aqui ficam só as diferenças de marcação. */
form.inline{display:inline-flex;margin:0}
.flash{margin-top:14px}
/* abas em link (Configurações, entrada da entidade): o mesmo visual dos botões do protótipo; em tela estreita, quebram em linhas */
.abas{flex-wrap:wrap;gap:4px}
.abas a{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;flex:1 1 auto;padding:10px;border-radius:9px;font-weight:700;color:var(--muted)}
.abas a.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow)}
.abas a:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
/* janelas nativas (dialog) com o mesmo visual das janelas do protótipo */
dialog.help-dlg,dialog.dlg{border:0;padding:0;background:transparent;max-width:min(680px,94vw);width:100%;max-height:92vh;overflow:visible}
dialog.help-dlg::backdrop,dialog.dlg::backdrop{background:rgba(8,9,40,.55)}
dialog .help-modal,dialog .modal{background:var(--surface);color:var(--text);border-radius:18px;box-shadow:var(--shadow-2);max-height:90vh;overflow:auto;width:100%}
dialog .modal{max-width:none}
/* Sim/Não e meses: rádios e caixas de verdade, com o mesmo desenho dos botões */
.seg-b{display:flex;align-items:center;justify-content:center;position:relative}
.seg-b input,.mes input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg-b:has(input:checked){background:var(--brand);border-color:var(--brand);color:#fff}
.seg-b:has(input:focus-visible),.mes:has(input:focus-visible){outline:3px solid var(--foco,#ffb000);outline-offset:2px}
.seg-b:has(input:disabled),.mes:has(input:disabled){cursor:default;opacity:.85}
.mes{display:flex;align-items:center;justify-content:center;position:relative}
.mes:has(input:checked){background:var(--verde);border-color:var(--verde);color:#fff}
.sem-r{color:inherit;font:inherit}
.sem-na summary{cursor:pointer;list-style:none;margin:6px 0}
.sem-na summary::-webkit-details-marker{display:none}
/* Prefeitura */
.pf-grid{display:block;max-width:980px;margin:0 auto}
.acao-d{margin-top:10px}
.acao-d:not([open]){display:inline-block;border:0;padding:0;background:none;box-shadow:none;margin:10px 8px 0 0}
.acao-d>summary{list-style:none;display:inline-flex;cursor:pointer}
.acao-d>summary::-webkit-details-marker{display:none}
.acao-d[open]>summary{margin-bottom:12px}
.in-dias{width:80px}
.cl-form{gap:6px}
.login-srv{max-width:420px}
.segredo{word-break:break-all;user-select:all}
.texto-longo h2{font-size:1.15rem;margin:22px 0 8px}
.texto-longo ul{padding-left:20px}
/* página de documento (ver, imprimir, Word) */
.doc-pagina{background:var(--bg)}
.doc-barra{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 0}
.doc-barra-in{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#print-root.tela{display:flex;flex-direction:column;gap:22px;padding:22px 12px 60px}
@media print{.doc-barra{display:none!important}#print-root.tela{display:block;padding:0}}
.tut-indice a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit}
.fx-no.on .fx-seta-ic{transform:rotate(180deg)}
.fx-seta-ic{display:inline-flex;transition:transform .15s}
[hidden]{display:none!important}
/* segundo fator e acesso das entidades */
.qr-caixa{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:8px 0 16px}
.qr{width:200px;height:200px;background:#fff;border-radius:12px;padding:6px;border:1px solid var(--line)}
.qr svg{width:100%;height:100%;display:block}
.qr-chave{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 200px}
.rec-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:12px 0 18px}
.rec-lista li{text-align:center;font-size:15px;padding:8px}
.codigo-novo{border:2px solid var(--brand)}
.codigo-grande{display:inline-block;font-size:30px;letter-spacing:.12em;padding:10px 18px;margin:6px 0 10px;user-select:all}
.acesso-form{margin:8px 0}
.acesso-form .chk,.acesso-livre .chk{margin:6px 0}
.acoes-srv{white-space:normal}
.acoes-srv form{margin:2px}

/* SaaS: sigla do cliente no topo, avisos do estado de acesso e tela de bloqueio */
.marca-sigla{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:2px solid rgba(255,255,255,.85);color:#fff;font-weight:800;font-size:17px;letter-spacing:.04em;flex:none}
.aviso-saas{font-size:14px;line-height:1.45;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.aviso-saas .wrap{display:flex;gap:8px;align-items:flex-start}
.aviso-saas svg{flex:none;margin-top:2px}
.aviso-aviso{background:#fff4d6;color:#5c4300}
.aviso-leitura{background:#fde7e4;color:#7a1d12}
.aviso-suporte{background:#e6efff;color:#163a7a}
.saas-bloq{max-width:640px;margin:48px auto;text-align:center;padding:36px 28px}
.saas-bloq-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fde7e4;color:#7a1d12;margin-bottom:8px}
.saas-bloq h1{margin:6px 0 10px}

/* segurança (03/11/2026): campo curto dentro do texto de ajuda (validade da chave da API) */
.campo-curto{width:6.5em;display:inline-block;padding:2px 6px;margin:0 4px}

/* ciência dos Termos de Uso e do Aviso de Privacidade (03/11/2026): abas feitas com rádio, sem JavaScript, dentro do formulário */
/* min-width:0: dentro do formulário em grade (.pilha), o bloco não pode alargar a coluna além da tela do celular */
.termos-bloco{border:1.5px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--surface);margin:6px 0;min-width:0}
.termos-t{font-size:1.05rem;margin:0 0 10px}
.termos-abas{display:flex;flex-wrap:wrap;gap:4px;background:var(--surface-2);border-radius:12px;padding:4px}
.termos-abas .ta-r{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.termos-abas .ta-l{flex:1 1 auto;text-align:center;padding:9px 10px;border-radius:9px;font-weight:700;cursor:pointer;color:var(--muted);font-size:.92rem}
.termos-abas .ta-r:checked + .ta-l{background:var(--surface);color:var(--brand);box-shadow:var(--shadow)}
.termos-abas .ta-r:focus-visible + .ta-l{outline:3px solid var(--foco);outline-offset:2px}
.termos-abas .ta-p{display:none;flex-basis:100%;min-width:0;max-width:100%;max-height:340px;overflow:auto;background:var(--surface);border-radius:10px;padding:12px 14px;margin-top:4px;line-height:1.5}
.termos-abas .ta-p:focus-visible{outline:3px solid var(--foco)}
.ta-r-resumo:checked ~ .ta-p-resumo,.ta-r-termos:checked ~ .ta-p-termos,.ta-r-privacidade:checked ~ .ta-p-privacidade,.ta-r-dados:checked ~ .ta-p-dados,.ta-r-sigilo:checked ~ .ta-p-sigilo{display:block}
.termos-caixas{display:grid;gap:8px;margin-top:12px}
.termo-doc h3{font-size:1rem;margin:14px 0 6px}.termo-doc ul{margin:4px 0 8px 18px;padding:0}.termo-doc li{margin:3px 0}
.termo-versao{font-size:.85rem;color:var(--muted);margin:0 0 6px}
/* e-mail do encarregado e endereços longos quebram no celular em vez de abrir rolagem lateral */
.termos-abas .ta-p,.termo-doc{overflow-wrap:anywhere}
.termo-dl{margin:4px 0}.termo-dl dt{font-weight:700;margin-top:6px}.termo-dl dd{margin:0}
.termo-resumo{margin:0 0 8px 18px;padding:0}.termo-resumo li{margin:6px 0}
.termos-tbl table{font-size:.85rem}.termos-tbl td{vertical-align:top}
.termos-pagina .termo-doc{max-width:none}
/* tabela de dados e prazos empilhada: dentro das abas (cartão estreito) e em tela pequena, cada dado vira um bloco com o nome de cada coluna */
.ta-p .termos-tbl table,.ta-p .termos-tbl tbody,.ta-p .termos-tbl tr,.ta-p .termos-tbl td{display:block;width:auto}
.ta-p .termos-tbl thead{display:none}
.ta-p .termos-tbl tr{border-bottom:1px solid var(--line);padding:8px 0}
.ta-p .termos-tbl td{border:0;padding:2px 0}
.ta-p .termos-tbl td[data-rot]::before{content:attr(data-rot) ": ";font-weight:700;color:var(--muted)}
@media (max-width:700px){.termos-tbl table,.termos-tbl tbody,.termos-tbl tr,.termos-tbl td{display:block;width:auto}.termos-tbl thead{display:none}.termos-tbl tr{border-bottom:1px solid var(--line);padding:8px 0}.termos-tbl td{border:0;padding:2px 0}.termos-tbl td[data-rot]::before{content:attr(data-rot) ": ";font-weight:700;color:var(--muted)}}
/* Minha entidade: as abas usam o desenho das etapas do plano, também como link (na lista de emendas não há formulário) */
.stepper a{flex:0 0 auto;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 14px 6px 6px;font-weight:700;font-size:.9rem;min-height:44px;text-decoration:none}
.stepper a.st-ok .st-n{background:var(--verde);color:#fff}
.stepper a.st-pendente .st-n{background:var(--cinza-soft);color:var(--cinza);box-shadow:inset 0 0 0 2px var(--line-2)}
.stepper a.st-bloqueio .st-n{background:var(--vermelho);color:#fff}
.stepper a.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.stepper a.on .st-n{background:var(--brand);color:#fff;box-shadow:none}
.stepper a:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.abas-ent{margin:4px 0 14px}
.emenda-plano{margin-bottom:12px}
.emenda-plano>summary{cursor:pointer;font-weight:700;padding:10px 14px}
.login-email{display:block;margin-top:2px}
.login-regra{margin:12px 0 0;color:var(--muted)}
.demo-gestao{margin:12px 0 0;color:var(--muted)}
@media (max-width:700px){.login-tbl{overflow-x:visible}.login-tbl table,.login-tbl tbody,.login-tbl tr,.login-tbl td{display:block;width:auto}.login-tbl thead{display:none}.login-tbl tr{border-bottom:1px solid var(--line);padding:10px 0}.login-tbl td{border:0;padding:4px 12px}.login-tbl td[data-rot]::before{content:attr(data-rot) ": ";font-weight:700;color:var(--muted)}}
.lista-pend{margin:6px 0 0;padding-left:20px}