/* gd-ferramentas.css — folha de estilos das ferramentas editoriais
   Periódico Eletrônico · desenvolvido por GeniusDesign */

/* ============ tokens ============ */
:root{
  --bg:#f4f6fa; --surface:#fff; --surface-2:#eef1f7;
  --ink:#1d2d55; --ink-soft:#3b4c78; --text:#253035; --muted:#63707f;
  --border:#dbe1ec; --border-strong:#c3ccdd;
  --accent:#0f8079; --accent-bright:#21cdc0; --accent-wash:#e3f7f4;
  --link:#3f6ba8;
  --ok:#1a7a58; --ok-wash:#e2f4ec; --warn:#8f5c15; --warn-wash:#fbf0dd;
  --crit:#a53d3d; --crit-wash:#f8e6e6;
  --logo-gray:#808080; --logo-blue:#5e8abd; --logo-gd:#009999;
  --shadow:0 1px 2px rgba(29,45,85,.06), 0 10px 30px rgba(29,45,85,.07);
  --radius:12px; --radius-sm:8px;
  --font-ui:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-doc:"Noto Serif",Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* medidas da página — sobrescreva no <style> da ferramenta */
  --wrap-max:1240px; --col-left:1fr; --col-right:1fr;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1524; --surface:#161f31; --surface-2:#1d2840;
    --ink:#dce6f6; --ink-soft:#a9bcdb; --text:#dfe6f0; --muted:#94a4bb;
    --border:#2a3550; --border-strong:#3d4b71;
    --accent:#3fd9cb; --accent-bright:#21cdc0; --accent-wash:#123330;
    --link:#8ab3e6;
    --ok:#4fc79b; --ok-wash:#13322a; --warn:#d9a24a; --warn-wash:#33280f;
    --crit:#e58c8c; --crit-wash:#3a1f1f;
    --logo-gray:#b9c5d8; --logo-blue:#8ab3e6; --logo-gd:#21cdc0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0f1524; --surface:#161f31; --surface-2:#1d2840;
  --ink:#dce6f6; --ink-soft:#a9bcdb; --text:#dfe6f0; --muted:#94a4bb;
  --border:#2a3550; --border-strong:#3d4b71;
  --accent:#3fd9cb; --accent-bright:#21cdc0; --accent-wash:#123330;
  --link:#8ab3e6;
  --ok:#4fc79b; --ok-wash:#13322a; --warn:#d9a24a; --warn-wash:#33280f;
  --crit:#e58c8c; --crit-wash:#3a1f1f;
  --logo-gray:#b9c5d8; --logo-blue:#8ab3e6; --logo-gd:#21cdc0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.35);
}

/* ============ base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
:target{scroll-margin-top:1.2rem}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:16px; line-height:1.55}
h1,h2,h3{font-family:var(--font-ui); color:var(--ink); text-wrap:balance; margin:0}
a{color:var(--link)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent-bright); outline-offset:2px; border-radius:4px}
.wrap{width:min(100% - 2.5rem, var(--wrap-max)); margin-inline:auto}
.eyebrow{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--accent); margin:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ============ cabeçalho e marca ============ */
.masthead{background:var(--surface); border-bottom:1px solid var(--border); padding:1.6rem 0 1.5rem}
.masthead .wrap{display:flex; gap:1.5rem; align-items:flex-end; flex-wrap:wrap; justify-content:space-between}
.masthead .wrap.brandbar{align-items:center; padding-bottom:.9rem; margin-bottom:1rem; border-bottom:1px solid var(--border)}
.masthead h1{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem); font-weight:800; letter-spacing:-.02em; margin:.25rem 0 .35rem}
.lede{margin:0; color:var(--muted); max-width:64ch; font-size:.95rem}
.masthead-actions{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; transition:opacity .15s}
.brand:hover{opacity:.72}
.logo-journal{height:38px; width:auto; display:block}
.logo-gd{height:19px; width:auto; display:block}
.by{font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; font-weight:800; color:var(--muted); white-space:nowrap}
@media (max-width:560px){ .logo-journal{height:29px} .logo-gd{height:15px} .by{display:none} }
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:0;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
.crumbs a{color:var(--accent); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--border-strong)}
.crumbs [aria-current]{color:var(--muted)}

/* ============ botões ============ */
.btn{display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border-strong); background:var(--surface);
  color:var(--ink); border-radius:var(--radius-sm); padding:.45rem .8rem; font-size:.88rem; font-weight:700;
  cursor:pointer; transition:background .15s, border-color .15s, transform .06s; text-decoration:none}
.btn:hover{background:var(--surface-2); border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.btn-primary:hover{background:var(--ink-soft); border-color:var(--ink-soft); color:var(--surface)}
.btn-ghost{border-color:transparent; background:transparent; color:var(--muted); font-weight:600}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink); border-color:transparent}
.btn-sm{padding:.25rem .55rem; font-size:.78rem}
.btn-icon{padding:.25rem .45rem; font-size:.9rem; line-height:1; min-width:2rem; justify-content:center}
.btn[disabled]{opacity:.4; cursor:not-allowed}

/* ============ painéis e grade de trabalho ============ */
.workspace{display:grid; gap:1.5rem; align-items:start;
  grid-template-columns:minmax(0,var(--col-left)) minmax(0,var(--col-right)); padding:1.5rem 0 3rem}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.panel + .panel{margin-top:1.1rem}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  padding:.9rem 1.1rem; border-bottom:1px solid var(--border)}
.panel-head h2{font-size:1rem; font-weight:800; letter-spacing:-.01em}
.panel-head .count{color:var(--muted); font-weight:600; font-size:.85rem; font-variant-numeric:tabular-nums}
.panel-body{padding:1.1rem}
.output{position:sticky; top:1rem}
@media (max-width:1040px){ .workspace{grid-template-columns:1fr} .output{position:static} }

/* ============ barra de opções ============ */
.options{display:flex; flex-wrap:wrap; gap:.4rem .5rem; padding:.7rem 1.1rem;
  border-bottom:1px solid var(--border); background:var(--surface-2)}
.opt{display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); padding:.28rem .6rem; border-radius:999px; cursor:pointer}
.opt:hover{border-color:var(--accent)}
.opt input{accent-color:var(--accent); margin:0}
.opt:has(input:checked){color:var(--ink); border-color:var(--accent); background:var(--accent-wash)}

/* ============ campos de formulário ============ */
.field{display:grid; gap:.22rem; min-width:0}
.field > label{font-size:.76rem; font-weight:700; color:var(--ink-soft); letter-spacing:.01em}
/* :not() é essencial — sem ele, caixas de seleção e botões de opção dentro de um
   .field recebiam width:100%, moldura e padding de campo de texto, e o rótulo
   ao lado transbordava para fora da caixa */
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea, .field select{width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:.4rem .6rem; font-size:.9rem}
.field textarea{resize:vertical; min-height:4.5rem; line-height:1.5}
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field textarea:focus, .field select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-wash)}
.field .help{font-size:.74rem; color:var(--muted)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.grid3{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:.6rem}
@media (max-width:620px){ .grid2,.grid3{grid-template-columns:1fr} }
.choices{display:grid; gap:.3rem}
.choice{display:grid; grid-template-columns:auto 1fr; gap:.55rem; align-items:start;
  padding:.45rem .6rem; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer}
.choice:hover{border-color:var(--accent)}
.choice:has(input:checked){border-color:var(--accent); background:var(--accent-wash)}
.choice input{accent-color:var(--accent); margin:.3rem 0 0; flex:none}
/* .choices serve tanto para escolha única (radio) quanto múltipla (checkbox) */
.choices.multi .choice{padding:.4rem .6rem}
.choice b{display:block; font-size:.87rem; font-weight:700; color:var(--ink)}
.choice span{font-size:.77rem; color:var(--muted); line-height:1.45}
.sub{display:grid; gap:.6rem; padding:.7rem .75rem; margin-left:.2rem; border-left:3px solid var(--accent);
  background:var(--surface-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.tagset{display:flex; flex-wrap:wrap; gap:.3rem}
.tag{display:inline-flex; align-items:center; gap:.35rem; font-size:.79rem; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); padding:.2rem .55rem; border-radius:999px; cursor:pointer}
.tag input{accent-color:var(--accent); margin:0}
.tag:has(input:checked){color:var(--ink); border-color:var(--accent); background:var(--accent-wash)}
.inline-check{display:inline-flex; align-items:center; gap:.4rem; font-size:.83rem; font-weight:600; color:var(--ink-soft); cursor:pointer}
.inline-check input{accent-color:var(--accent); margin:0}
.empty{text-align:center; padding:1.8rem 1rem; color:var(--muted); border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm); font-size:.9rem}

/* ============ abas e área de saída ============ */
.tabs{display:flex; gap:.15rem; padding:.6rem 1.1rem 0; flex-wrap:wrap; border-bottom:1px solid var(--border)}
.tab{border:1px solid transparent; border-bottom:0; background:transparent; color:var(--muted); padding:.35rem .7rem;
  font-size:.82rem; font-weight:700; cursor:pointer; border-radius:var(--radius-sm) var(--radius-sm) 0 0; margin-bottom:-1px}
.tab:hover{color:var(--ink); background:var(--surface-2)}
.tab[aria-selected="true"]{background:var(--surface); border-color:var(--border); color:var(--ink); border-bottom:1px solid var(--surface)}
.view{padding:1.1rem}
.doc{font-family:var(--font-doc); font-size:.94rem; line-height:1.68; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.1rem; max-height:28rem; overflow:auto}
.doc p{margin:0 0 .7rem}
.doc p:last-child{margin-bottom:0}
.doc .nm{font-weight:600; color:var(--ink)}
.doc ul{margin:0; padding-left:1.1rem}
.doc li{margin-bottom:.4rem}
pre.code{font-family:var(--font-mono); font-size:.76rem; line-height:1.55; margin:0; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:.9rem; overflow:auto; max-height:28rem;
  white-space:pre; color:var(--text)}
.view-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; align-items:center}
.note{font-size:.78rem; color:var(--muted); margin:.7rem 0 0; max-width:70ch}
.copied{font-size:.8rem; font-weight:700; color:var(--ok)}

/* ============ verificações ============ */
.checks{border-top:1px solid var(--border); padding:.8rem 1.1rem; display:grid; gap:.35rem}
.check{display:flex; gap:.5rem; font-size:.82rem; align-items:flex-start; color:var(--muted)}
.check b{font-weight:800; flex:none}
.check.warn{color:var(--warn)}
.check.crit{color:var(--crit)}
.check.ok{color:var(--ok)}

/* ============ rodapé ============ */
/* separa a área de trabalho da seção "sobre" — a cor vem do token, senão
   a linha fica clara demais sobre o fundo escuro do tema noturno */
.wrap.divider{border-top:1px solid var(--border); padding-top:3rem; margin-top:2.5rem}
footer.site{border-top:1px solid var(--border); background:var(--surface); padding:1.4rem 0; font-size:.82rem; color:var(--muted)}
footer.site .wrap{display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap}
/* crédito padrão — obrigatório em toda ferramenta, sempre em uma única linha */
footer.site .wrap.credits{justify-content:center; align-items:center; gap:.2rem .55rem;
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--border); font-size:.78rem; text-align:center}
.credits b{font-weight:800; color:var(--ink-soft)}
.credits a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border)}
.credits a:hover{color:var(--accent); border-color:var(--accent)}
.credits .sep{color:var(--border-strong)}

/* ============ impressão ============ */
@media print{
  .masthead-actions,.options,.tabs,.view-actions,.checks,.builder,footer.site,.brandbar .brand-gd{display:none}
  body{background:#fff}
  .panel{box-shadow:none; border:0}
  .doc{max-height:none; border:0; background:#fff}
}

/* ============ seção "sobre" e perguntas frequentes ============ */
.about{margin:0 0 3rem; scroll-margin-top:1.2rem}
.about .panel-body{display:grid; gap:1.1rem}
.about p{margin:0; font-size:.92rem; line-height:1.68; color:var(--muted)}
.about p strong, .about p b{color:var(--ink)}
.faq{display:grid; gap:.5rem}
.faq details{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg)}
.faq details[open]{border-color:var(--accent)}
.faq summary{cursor:pointer; font-weight:800; color:var(--ink); font-size:.9rem; padding:.6rem .8rem;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-weight:800; font-size:1.1rem; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 .8rem .75rem; margin:0; font-size:.88rem; color:var(--muted); line-height:1.62;}
.faq .a a{color:var(--accent)}