/* Qorum: sistema visual do site (home, recursos, templates, docs, demo, painel). */
:root{
  --tinta:#1d1638;--fundo:#fcfbff;--sup:#ffffff;--lavanda:#f1edfc;--suave:#6c6888;--linha:#e6e1f3;
  --violeta:#6b2fe0;--violeta-forte:#5a22c9;--ceu:#2a8ad8;--ok:#13804b;--erro:#c62f3b;--aviso:#a35f00;
  --ok-f:#e3f6ec;--erro-f:#fde8ea;--aviso-f:#fff3dc;
  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:8px;--rc:14px;--sombra:0 1px 2px rgba(29,22,56,.06),0 10px 30px -12px rgba(29,22,56,.18);
  /* nomes antigos usados no painel/widget de prévia */
  --a:var(--violeta);--b:var(--ceu);--papel:var(--sup);--borda:var(--linha);--marca:var(--lavanda);--elev:var(--sombra);
  color-scheme:light;
}
:root[data-theme=dark]{
  --tinta:#efedf8;--fundo:#13101f;--sup:#1b1730;--lavanda:#221d3b;--suave:#a7a2c2;--linha:#2e2848;
  --violeta:#9b6dff;--violeta-forte:#b08cff;--ceu:#57b1f0;--ok:#4cc488;--erro:#ff7a85;--aviso:#f2b04a;
  --ok-f:#173326;--erro-f:#3a1a22;--aviso-f:#3a2c14;--sombra:0 1px 2px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.6);color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --tinta:#efedf8;--fundo:#13101f;--sup:#1b1730;--lavanda:#221d3b;--suave:#a7a2c2;--linha:#2e2848;
  --violeta:#9b6dff;--violeta-forte:#b08cff;--ceu:#57b1f0;--ok:#4cc488;--erro:#ff7a85;--aviso:#f2b04a;
  --ok-f:#173326;--erro-f:#3a1a22;--aviso-f:#3a2c14;--sombra:0 1px 2px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.6);color-scheme:dark;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--fundo);color:var(--tinta);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--violeta);text-underline-offset:3px}
a:hover{color:var(--violeta-forte)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--violeta);outline-offset:2px;border-radius:4px}
code,pre,kbd{font-family:var(--mono)}
.cx{max-width:1180px;margin:0 auto;padding:0 20px}
.suave{color:var(--suave)}
.mono{font-family:var(--mono)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-.025em;margin:0;font-weight:700}
h1{font-size:clamp(40px,6.4vw,74px);letter-spacing:-.035em}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:21px;letter-spacing:-.015em}
p{margin:0 0 1em}
.lead{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--suave);max-width:58ch}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer;
  font:600 15px/1 var(--sans);text-decoration:none;padding:13px 18px;border:1px solid var(--linha);border-radius:var(--r);
  background:var(--sup);color:var(--tinta);transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--suave);color:var(--tinta)}
.btn[disabled]{opacity:.5;cursor:default}
.btn-pri{background:var(--violeta);border-color:var(--violeta);color:#fff}
.btn-pri:hover{background:var(--violeta-forte);border-color:var(--violeta-forte);color:#fff}
:root[data-theme=dark] .btn-pri,:root[data-theme=dark] .btn-pri:hover{color:#160f2b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .btn-pri{color:#160f2b}}
.btn-perigo{background:var(--erro);border-color:var(--erro);color:#fff}
.btn-peq{padding:9px 13px;font-size:14px}
.btn-fantasma{border-color:transparent;background:transparent}
.btn-fantasma:hover{background:var(--lavanda);border-color:transparent}
.linha-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* topo */
.topo{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--fundo) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linha)}
.topo .cx{display:flex;align-items:center;gap:22px;height:66px}
.logo{display:flex;align-items:center;gap:10px;font:700 21px/1 var(--display);letter-spacing:-.02em;color:var(--tinta);text-decoration:none;white-space:nowrap}
.logo img{width:30px;height:30px}
.logo:hover{color:var(--tinta)}
.nav{display:flex;gap:4px;align-items:center;flex:1}
.nav a.item{font:500 15px/1 var(--sans);color:var(--suave);text-decoration:none;padding:9px 11px;border-radius:var(--r);white-space:nowrap}
.nav a.item:hover{color:var(--tinta);background:var(--lavanda)}
.nav a.item[aria-current=page]{color:var(--tinta);font-weight:600}
.nav .direita{margin-left:auto;display:flex;gap:8px;align-items:center}
.botao-menu{display:none;margin-left:auto}
.tema{width:40px;height:40px;padding:0}
.tema svg{width:18px;height:18px}
@media (max-width:920px){
  .botao-menu{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;align-items:stretch;gap:0;
    background:var(--sup);border-bottom:1px solid var(--linha);box-shadow:var(--sombra);padding:8px 20px 18px}
  .nav.aberto{display:flex}
  .nav a.item{padding:14px 4px;border-bottom:1px solid var(--linha);border-radius:0}
  .nav .direita{margin:14px 0 0;flex-wrap:wrap}
}

/* superfícies */
.janela{background:var(--sup);border:1px solid var(--linha);border-radius:var(--rc);box-shadow:var(--sombra);min-width:0;overflow:hidden}
.barra{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--linha);font:600 15px/1.2 var(--sans);white-space:nowrap;overflow:hidden}
.barra i{display:none}
.barra span{overflow:hidden;text-overflow:ellipsis}
.miolo{padding:20px}

/* formulários */
label.campo{display:block;margin-bottom:16px}
label.campo>span{display:block;font:600 14px/1.4 var(--sans);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],input[type=number],textarea,select{
  width:100%;font:15px/1.4 var(--sans);color:var(--tinta);background:var(--sup);border:1px solid var(--linha);
  border-radius:var(--r);padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--violeta);box-shadow:0 0 0 3px color-mix(in srgb,var(--violeta) 22%,transparent)}
textarea{resize:vertical;min-height:90px}
.ajuda{font-size:13.5px;color:var(--suave);margin-top:5px}

/* código */
pre.codigo{position:relative;margin:14px 0 20px;padding:16px 18px;overflow:auto;font-size:13.5px;line-height:1.65;
  background:var(--lavanda);border:1px solid var(--linha);border-radius:var(--r);max-width:100%;tab-size:2}
pre.codigo .copiar{position:absolute;top:8px;right:8px;font:600 12px var(--sans);padding:6px 9px;border-radius:6px;border:1px solid var(--linha);
  background:var(--sup);color:var(--suave);cursor:pointer;opacity:0;transition:opacity .15s}
pre.codigo:hover .copiar,pre.codigo .copiar:focus{opacity:1}
@media (hover:none){pre.codigo .copiar{opacity:1}}
.codigo .c{color:var(--suave)}.codigo .s{color:var(--ok)}.codigo .k{color:var(--violeta)}
:not(pre)>code{background:var(--lavanda);border:1px solid var(--linha);padding:1px 6px;border-radius:5px;font-size:.88em;white-space:nowrap}
.abas-cod{display:flex;gap:2px;margin:18px 0 -8px;flex-wrap:wrap}
.abas-cod button{font:600 13px var(--sans);padding:8px 12px;border:1px solid transparent;border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  background:transparent;color:var(--suave);cursor:pointer}
.abas-cod button[aria-selected=true]{background:var(--lavanda);border-color:var(--linha);color:var(--tinta)}

/* etiquetas */
.etiqueta{display:inline-block;font:600 12.5px/1 var(--sans);padding:5px 8px;border-radius:6px;background:var(--lavanda);color:var(--tinta);white-space:nowrap}
.etiqueta.get,.etiqueta.ok{background:var(--ok-f);color:var(--ok)}
.etiqueta.post{background:color-mix(in srgb,var(--violeta) 16%,transparent);color:var(--violeta)}
.etiqueta.put,.etiqueta.aviso{background:var(--aviso-f);color:var(--aviso)}
.etiqueta.del,.etiqueta.erro{background:var(--erro-f);color:var(--erro)}

/* tabelas */
table.tab{width:100%;border-collapse:collapse;font-size:15px}
table.tab th,table.tab td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linha);vertical-align:top}
table.tab th{font:600 14px var(--sans);color:var(--suave)}
.rolar-x{overflow-x:auto;max-width:100%}

/* avisos dentro do texto */
.nota{border-left:3px solid var(--violeta);background:var(--lavanda);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin:18px 0}
.nota p:last-child{margin:0}
.nota strong:first-child{display:block;margin-bottom:2px}
.nota.atencao{border-left-color:var(--aviso);background:var(--aviso-f)}
.nota.perigo{border-left-color:var(--erro);background:var(--erro-f)}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:999;background:var(--tinta);color:var(--fundo);
  font:500 14px/1.4 var(--sans);padding:11px 16px;border-radius:var(--r);box-shadow:var(--sombra);max-width:calc(100vw - 32px)}
.toast.erro{background:var(--erro);color:#fff}

/* rodapé */
.rodape{border-top:1px solid var(--linha);margin-top:96px;padding:40px 0 48px}
.rodape .cx{display:flex;gap:28px;justify-content:space-between;flex-wrap:wrap}
.rodape nav{display:flex;gap:44px;flex-wrap:wrap}
.rodape h4{font:600 14px var(--sans);margin:0 0 10px;letter-spacing:0}
.rodape nav a{display:block;color:var(--suave);text-decoration:none;font-size:15px;padding:3px 0}
.rodape nav a:hover{color:var(--tinta)}
.rodape .marca-rod{max-width:300px;color:var(--suave);font-size:15px}
.rodape .marca-rod .logo{margin-bottom:10px}

/* utilidades de grade (painel) */
.grade{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
[hidden]{display:none!important}

/* ---------- documentação ---------- */
.doc{display:grid;grid-template-columns:240px minmax(0,1fr) 210px;gap:48px;padding-top:36px}
.doc-lado{position:sticky;top:90px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;padding-bottom:24px}
.doc-lado h4{font:600 13.5px var(--sans);color:var(--suave);margin:20px 0 6px;letter-spacing:0}
.doc-lado h4:first-child{margin-top:0}
.doc-lado a{display:block;color:var(--tinta);text-decoration:none;font-size:15px;padding:6px 10px;border-radius:var(--r)}
.doc-lado a:hover{background:var(--lavanda)}
.doc-lado a[aria-current=page]{background:var(--lavanda);color:var(--violeta);font-weight:600}
.doc-indice{position:sticky;top:90px;align-self:start;font-size:14px}
.doc-indice h4{font:600 13.5px var(--sans);color:var(--suave);margin:0 0 8px;letter-spacing:0}
.doc-indice a{display:block;color:var(--suave);text-decoration:none;padding:4px 0 4px 12px;border-left:2px solid var(--linha)}
.doc-indice a.sub{padding-left:24px}
.doc-indice a.ativo{color:var(--violeta);border-left-color:var(--violeta)}
.artigo{max-width:74ch;font-size:17px;line-height:1.7}
.artigo>h1{font-size:clamp(34px,4.4vw,48px);margin-bottom:14px}
.artigo>.lead{margin-bottom:34px}
.artigo h2{font-size:28px;margin:52px 0 14px;scroll-margin-top:90px}
.artigo h3{font-size:20px;margin:34px 0 10px;scroll-margin-top:90px}
.artigo ul,.artigo ol{padding-left:22px;margin:0 0 1em}
.artigo li{margin:6px 0}
.artigo table.tab{font-size:15px;margin:8px 0 20px}
.passos{counter-reset:passo;list-style:none;padding:0!important}
.passos>li{counter-increment:passo;position:relative;padding:0 0 18px 48px;margin:0!important}
.passos>li::before{content:counter(passo);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:8px;
  background:var(--violeta);color:#fff;font:700 15px/30px var(--display);text-align:center}
.passos>li>strong{display:block;font-size:17px}
.ep{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:40px 0 8px;scroll-margin-top:90px}
.ep code{font-size:15px;background:none;border:0;padding:0;white-space:normal;font-weight:600}
.doc-nav{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--linha);flex-wrap:wrap}
.doc-nav a{display:block;text-decoration:none;padding:14px 16px;border:1px solid var(--linha);border-radius:var(--r);min-width:220px;color:var(--tinta)}
.doc-nav a:hover{border-color:var(--violeta)}
.doc-nav small{display:block;color:var(--suave);font-size:13px}
.doc-nav .prox{text-align:right;margin-left:auto}
.doc-menu-cel{display:none}
@media (max-width:1180px){.doc{grid-template-columns:230px minmax(0,1fr)}.doc-indice{display:none}}
@media (max-width:860px){
  .doc{grid-template-columns:minmax(0,1fr);gap:0;padding-top:20px}
  .doc-lado{display:none}
  .doc-menu-cel{display:block;margin-bottom:24px}
}
.pular:focus{left:16px!important;top:10px;z-index:200;background:var(--violeta);color:#fff;padding:10px 14px;border-radius:var(--r)}

/* lista de escolha (substitui a lista nativa do navegador) */
.qsel{position:relative;display:block;width:100%}
.qsel.qsel-curto{display:inline-block;width:auto;min-width:150px}
.qsel>select{display:none}
.qsel-botao{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font:15px/1.4 var(--sans);color:var(--tinta);
  background:var(--sup);border:1px solid var(--linha);border-radius:var(--r);padding:10px 12px;cursor:pointer;text-align:left;white-space:nowrap}
.qsel-botao span{overflow:hidden;text-overflow:ellipsis}
.qsel-botao:hover{border-color:var(--suave)}
.qsel-botao[aria-expanded=true]{border-color:var(--violeta);box-shadow:0 0 0 3px color-mix(in srgb,var(--violeta) 22%,transparent)}
.qsel-botao svg{width:16px;height:16px;flex:none;color:var(--suave);transition:transform .15s}
.qsel-botao[aria-expanded=true] svg{transform:rotate(180deg)}
.qsel-lista{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);min-width:180px;background:var(--sup);border:1px solid var(--linha);
  border-radius:var(--rc);box-shadow:var(--sombra);padding:6px;max-height:340px;overflow:auto;outline:none}
.qsel-grupo{font:600 13px/1.3 var(--sans);color:var(--suave);padding:10px 10px 4px}
.qsel-grupo:first-child{padding-top:4px}
.qsel-op{padding:9px 10px;border-radius:6px;cursor:pointer;font-size:15px;color:var(--tinta)}
.qsel-op.ativo{background:var(--lavanda)}
.qsel-op[aria-selected=true]{color:var(--violeta);font-weight:600}
.qsel-op[aria-disabled=true]{opacity:.45;cursor:default}
.eu-topo{font:500 14px var(--sans);color:var(--tinta);padding:0 6px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}

/* fundo com brilho e partículas (todas as páginas, vem no topo.html/painel.html): fica atrás de tudo */
.fundo-brilho{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 520px at 8% -12%,color-mix(in srgb,var(--violeta) 17%,transparent),transparent 70%),
    radial-gradient(760px 460px at 104% -6%,color-mix(in srgb,var(--ceu) 11%,transparent),transparent 70%)}
#particulas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* interruptor de idioma PT | EN */
.idioma{display:inline-flex;align-items:stretch;height:40px;border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;flex:none}
.idioma a{display:flex;align-items:center;padding:0 11px;font:600 13px/1 var(--sans);color:var(--suave);text-decoration:none;letter-spacing:.02em}
.idioma a+a{border-left:1px solid var(--linha)}
.idioma a:hover{color:var(--tinta);background:var(--lavanda)}
.idioma a[aria-current]{background:var(--violeta);color:#fff;cursor:default}
:root[data-theme=dark] .idioma a[aria-current]{color:#160f2b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .idioma a[aria-current]{color:#160f2b}}


/* ---------- celular: nada passa da largura da tela (09/11) ----------
   grade de 1 coluna com "1fr" crescia até o tamanho do maior código/tabela e o navegador tirava o zoom */
.artigo,.palco,.opcoes,.janela,main,section{min-width:0}
pre.codigo{max-width:100%}
img,video,iframe{max-width:100%}
body{overflow-x:clip}
@media (max-width:860px){
  :not(pre)>code{white-space:normal;overflow-wrap:anywhere}
  table.tab{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .doc-nav a{min-width:0;flex:1 1 100%}
  .artigo{font-size:16px;max-width:100%}
  .artigo h2{font-size:24px}
  .artigo,.artigo p,.artigo li{overflow-wrap:anywhere}
}