:root{--ink:#0F1115;--ink2:#1B1E24;--bg:#F4F5F7;--card:#fff;--linha:#E3E5E8;--texto:#202124;--mudo:#5F6368;--azul:#0B6BE0;--azul-esc:#0B57B8;--azul-claro:#E8F0FE;--verde:#12A150;--verde-claro:#E6F4EA;--amarelo:#B06A00;--amarelo-claro:#FEF3DC;--vermelho:#C5221F;--vermelho-claro:#FCE8E6;--raio:14px;--sombra:0 1px 2px rgba(60,64,67,.12),0 1px 3px rgba(60,64,67,.08)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--texto);background:var(--bg)}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.01em}h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}
p{margin:0}a{color:var(--azul-esc)}button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* layout */
.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.lateral{background:var(--ink);color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.marca{display:flex;align-items:center;gap:10px;padding:6px 10px 16px;font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.marca i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--azul),#7C5CFC);display:grid;place-items:center;font-style:normal;font-size:.95rem}
.grupo-nav{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#8B9099;padding:14px 10px 4px}
.lateral a.nav{display:flex;align-items:center;gap:11px;min-height:42px;padding:0 12px;border-radius:11px;color:#D7DAE0;text-decoration:none;font-weight:500}
.lateral a.nav svg{width:19px;height:19px;flex:none;opacity:.85}
.lateral a.nav:hover{background:rgba(255,255,255,.07);color:#fff}
.lateral a.nav[aria-current="page"]{background:#fff;color:var(--ink);font-weight:700}
.lateral .rodape{margin-top:auto;padding:12px 10px 4px;font-size:.8rem;color:#8B9099}
.principal{min-width:0;display:flex;flex-direction:column}
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 28px;background:rgba(244,245,247,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.topo h1{margin-right:auto}
.menu-bt{display:none}
.conteudo{padding:24px 28px 80px;max-width:1240px;width:100%}
.selo{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}
.selo.ok{background:var(--verde-claro);color:#0D6B34}.selo.av{background:var(--amarelo-claro);color:var(--amarelo)}.selo.er{background:var(--vermelho-claro);color:var(--vermelho)}.selo.in{background:var(--azul-claro);color:var(--azul-esc)}.selo.cz{background:#EEF0F3;color:#454B54}
/* botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:11px;border:1px solid var(--linha);background:#fff;font-weight:600;cursor:pointer;text-decoration:none;color:var(--texto);transition:background-color .15s,box-shadow .15s,transform .1s}
.bt:hover{background:#F8F9FA}.bt:active{transform:scale(.98)}
.bt.pri{background:var(--azul);border-color:var(--azul);color:#fff}.bt.pri:hover{background:var(--azul-esc)}
.bt.esc{background:var(--ink);border-color:var(--ink);color:#fff}.bt.esc:hover{background:var(--ink2)}
.bt.perigo{color:var(--vermelho);border-color:#F0C4C2}.bt.perigo:hover{background:var(--vermelho-claro)}
.bt.peq{min-height:34px;padding:0 11px;font-size:.88rem}.bt[disabled]{opacity:.5;cursor:not-allowed}
.bt svg{width:17px;height:17px}
/* cartões e grades */
.cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:20px}
.cartao>h2{margin-bottom:4px}.cartao>.sub{color:var(--mudo);margin-bottom:16px;font-size:.92rem}
.grade{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pilha{display:grid;gap:16px}.linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.espaco{flex:1}
.kpi{padding:18px}.kpi .n{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}.kpi .r{color:var(--mudo);font-size:.88rem}
.barra{height:8px;border-radius:99px;background:#E8EAED;overflow:hidden;margin-top:8px}.barra i{display:block;height:100%;background:var(--azul);border-radius:99px}
/* campos */
.campo{display:grid;gap:5px}.campo>label,.campo>.rot{font-weight:600;font-size:.88rem}
.campo .dica{color:var(--mudo);font-size:.82rem}
.campo input[type=text],.campo input[type=url],.campo input[type=number],.campo input[type=date],.campo input[type=password],.campo input[type=email],.campo input[type=tel],.campo select,.campo textarea,.in{width:100%;min-height:42px;padding:9px 12px;border:1.5px solid #C9CDD2;border-radius:10px;background:#fff}
.campo textarea{min-height:92px;resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px var(--azul-claro)}
.contador{font-size:.78rem;color:var(--mudo);text-align:right}.contador.ok{color:#0D6B34}.contador.av{color:var(--amarelo)}.contador.er{color:var(--vermelho)}
.chave{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:36px}
.chave input{position:absolute;opacity:0;width:1px;height:1px}
.chave .tr{width:42px;height:24px;border-radius:99px;background:#BFC4CB;position:relative;transition:background .15s;flex:none}
.chave .tr::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.chave input:checked+.tr{background:var(--verde)}.chave input:checked+.tr::after{transform:translateX(18px)}
.chave input:focus-visible+.tr{outline:3px solid var(--azul);outline-offset:2px}
.cor{display:flex;gap:8px;align-items:center}.cor input[type=color]{width:46px;height:42px;padding:2px;border:1.5px solid #C9CDD2;border-radius:10px;background:#fff;cursor:pointer}
.radios{display:flex;gap:8px;flex-wrap:wrap}.radios label{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1.5px solid #C9CDD2;border-radius:10px;cursor:pointer;font-weight:600;background:#fff}
.radios input{accent-color:var(--azul)}.radios label:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
/* tabelas */
.tabela{width:100%;border-collapse:collapse}.tabela th{text-align:left;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mudo);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tabela td{padding:10px;border-bottom:1px solid #EEF0F2;vertical-align:middle}.tabela tr:last-child td{border-bottom:0}.tabela tr:hover td{background:#FAFBFC}
.tabela .num{width:80px}.rolagem{overflow-x:auto}
.grupo-linha td{background:#F4F5F7;font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mudo)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem}
/* abas */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha);margin-bottom:18px;overflow-x:auto}
.abas button{min-height:44px;padding:0 16px;border:0;border-bottom:3px solid transparent;background:transparent;font-weight:600;color:var(--mudo);cursor:pointer;white-space:nowrap}
.abas button[aria-selected="true"]{color:var(--azul-esc);border-bottom-color:var(--azul)}
/* toasts e modal */
#avisos{position:fixed;right:20px;bottom:20px;z-index:100;display:grid;gap:10px;max-width:min(420px,calc(100vw - 40px))}
.aviso{background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.28);animation:sobe .25s ease both}.aviso.er{background:var(--vermelho)}.aviso.ok{background:#0D6B34}
@keyframes sobe{from{transform:translateY(10px);opacity:0}}
dialog{border:0;border-radius:18px;padding:0;max-width:min(680px,calc(100vw - 32px));width:100%;box-shadow:0 24px 64px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(15,17,21,.55)}
dialog .md{padding:22px;display:grid;gap:16px}dialog .md-rod{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
/* editor de texto rico */
.rt{border:1.5px solid #C9CDD2;border-radius:12px;background:#fff;overflow:hidden}.rt:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro)}
.rt-barra{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:#F8F9FA;border-bottom:1px solid var(--linha);position:sticky;top:60px;z-index:5}
.rt-barra button,.rt-barra select{min-height:34px;min-width:34px;padding:0 9px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;font-weight:600;font-size:.88rem}
.rt-barra button:hover,.rt-barra select:hover{background:#E8EAED}.rt-barra button[aria-pressed="true"]{background:var(--azul-claro);color:var(--azul-esc)}
.rt-barra .sep{width:1px;background:var(--linha);margin:4px 4px}
.rt-area{min-height:380px;max-height:70vh;overflow:auto;padding:22px 26px;font-size:1.02rem;line-height:1.75}
.rt-area:focus{outline:none}.rt-area>*+*{margin-top:14px}.rt-area h2{font-size:1.6rem;margin-top:28px}.rt-area h3{font-size:1.3rem;margin-top:22px}.rt-area h4{font-size:1.1rem}
.rt-area img{max-width:100%;height:auto;border-radius:10px}.rt-area blockquote{margin-left:0;padding:8px 16px;border-left:4px solid var(--verde);background:#F6F8F6}
.rt-area table{border-collapse:collapse;width:100%}.rt-area th,.rt-area td{border:1px solid var(--linha);padding:8px 10px;text-align:left}.rt-area th{background:#F4F5F7}
.rt-area .resposta-direta{padding:12px 16px;border-left:4px solid var(--verde);background:#F1F8F3;font-weight:600;border-radius:0 10px 10px 0}
.rt-area .aviso-artigo{padding:12px 16px;border-left:4px solid var(--azul);background:var(--azul-claro);border-radius:0 10px 10px 0}
.rt-fonte{width:100%;min-height:380px;border:0;padding:16px;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
.rt-rodape{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--linha);background:#F8F9FA;color:var(--mudo);font-size:.82rem}
/* mídia e diversos */
.midia-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.midia-item{border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:#fff;display:grid}.midia-item img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#EEF0F2}.midia-item .m{padding:10px;display:grid;gap:6px;font-size:.85rem}
.soltar{border:2px dashed #BFC4CB;border-radius:14px;padding:26px;text-align:center;color:var(--mudo);background:#fff;cursor:pointer}.soltar.sobre{border-color:var(--azul);background:var(--azul-claro)}
.serp{border:1px solid var(--linha);border-radius:12px;padding:14px 16px;background:#fff;max-width:640px}.serp .u{color:#188038;font-size:.82rem}.serp .t{color:#1a0dab;font-size:1.15rem;margin:2px 0;font-weight:500}.serp .d{color:#4d5156;font-size:.9rem}
.bloco{border:1px solid var(--linha);border-radius:12px;background:#fff}.bloco>.cab{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#F8F9FA;border-bottom:1px solid var(--linha);border-radius:12px 12px 0 0;font-weight:700}.bloco>.corpo{padding:16px;display:grid;gap:14px}
.vazio{padding:30px;text-align:center;color:var(--mudo)}.aviso-caixa{padding:12px 16px;border-radius:12px;font-size:.92rem}.aviso-caixa.av{background:var(--amarelo-claro);color:#6B4300}.aviso-caixa.in{background:var(--azul-claro);color:#0B3F85}.aviso-caixa.er{background:var(--vermelho-claro);color:#8C1411}.aviso-caixa.ok{background:var(--verde-claro);color:#0D5E2E}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}.checklist li{display:flex;gap:10px;align-items:flex-start}.checklist .bola{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:#EEF0F3;color:#454B54}.checklist .bola.ok{background:var(--verde);color:#fff}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 400px at 80% 0,#E8F0FE,transparent 60%),var(--bg)}.login .cartao{width:min(420px,100%);padding:30px;display:grid;gap:16px}
.pre{background:#0F1115;color:#E6E8EB;border-radius:12px;padding:14px 16px;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;overflow:auto;max-height:340px;white-space:pre-wrap;word-break:break-word}
.fl-prev{position:relative;height:200px;border:1px solid var(--linha);border-radius:14px;background:linear-gradient(180deg,#fff,#EEF2F7)}.fl-prev i{position:absolute;bottom:14px;width:46px;height:46px;border-radius:50%;box-shadow:0 6px 16px rgba(0,0,0,.25)}
@media (max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.app{grid-template-columns:1fr}.lateral{position:fixed;inset:0 auto 0 0;width:280px;z-index:60;transform:translateX(-100%);transition:transform .2s}.lateral.aberta{transform:none}.menu-bt{display:inline-flex}.g2,.g3,.g4{grid-template-columns:1fr}.conteudo{padding:18px 16px 80px}.topo{padding:10px 16px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* correções de largura: itens de grade podem encolher e tabelas largas rolam dentro do cartão */
.pilha>*,.grade>*,.cartao,.bloco,.corpo,.campo{min-width:0}
.conteudo,.principal{min-width:0;max-width:100%}
.cartao .rolagem{max-width:100%}
@media (max-width:860px){
  .topo{flex-wrap:wrap;gap:8px}.topo h1{order:5;flex:1 1 100%;font-size:1.2rem}.menu-bt{order:0}#estado{order:1;margin-left:auto}.topo .bt{order:2;padding:0 12px;min-height:38px}
  .bloco>.corpo[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .rt-barra{top:0}.abas{margin-left:-2px}.linha{gap:8px}
  .tabela td,.tabela th{padding:8px 6px}
}
.chave{position:relative}   /* o checkbox invisível fica dentro do próprio interruptor e não estoura a largura */