/* Pauta SBI — identidade da Associacao, legivel no celular e no sol. */

:root{
  --ground:#eef1e8; --surface:#ffffff; --surface-2:#f6f8f2;
  --ink:#16201a; --muted:#5b6b5f; --line:#d9e0d1;
  --accent:#4f7d1b; --accent-forte:#14532b; --accent-soft:#e6efd8;
  --pend:#b7791f; --pend-bg:#fdf3e0;
  --ok:#2f7a3e; --ok-bg:#e4f2e3;
  --alerta:#b3332b; --alerta-bg:#fbe9e7;
  --raio:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0f130e; --surface:#181e17; --surface-2:#1f271e;
    --ink:#e7ede3; --muted:#93a394; --line:#2b342a;
    --accent:#9ccc52; --accent-forte:#9ccc52; --accent-soft:#23301a;
    --pend:#e0b050; --pend-bg:#2e2512;
    --ok:#7fc98b; --ok-bg:#1b2c1d;
    --alerta:#f0958c; --alerta-bg:#331916;
  }
}
:root[data-theme="dark"]{
  --ground:#0f130e; --surface:#181e17; --surface-2:#1f271e;
  --ink:#e7ede3; --muted:#93a394; --line:#2b342a;
  --accent:#9ccc52; --accent-forte:#9ccc52; --accent-soft:#23301a;
  --pend:#e0b050; --pend-bg:#2e2512;
  --ok:#7fc98b; --ok-bg:#1b2c1d;
  --alerta:#f0958c; --alerta-bg:#331916;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px; line-height:1.6;
}
body.centrado{display:grid; place-items:center; min-height:100dvh; padding:24px 16px}

h1,h2,h3{font-family:"Archivo",sans-serif; letter-spacing:-.01em; text-wrap:balance; margin:0}
h1{font-weight:800; font-size:clamp(23px,5vw,31px)}
h2{font-weight:600; font-size:20px}
h3{font-weight:600; font-size:16px}
p{margin:0 0 12px}
a{color:var(--accent-forte)}
.sub{color:var(--muted); font-size:15px}
.mono{font-variant-numeric:tabular-nums}

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.marca{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; font-family:"Archivo",sans-serif; font-weight:600}
.marca img{width:34px; height:auto; display:block}
.topo-acoes{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.topo-acoes form{margin:0}

/* ---------- blocos ---------- */
.faixa{max-width:860px; margin:0 auto; padding:22px 16px 80px}
.cartao{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--raio);
  padding:18px 16px; margin-bottom:18px;
}
.entrar{max-width:380px; text-align:center}
.entrar img{margin:0 auto 10px; display:block}
.entrar label{display:block; text-align:left; margin:18px 0 12px; font-size:14px; color:var(--muted)}
.entrar input{width:100%; margin-top:6px}
.entrar button{width:100%}

/* ---------- controles ---------- */
button, .botao{
  font:inherit; font-weight:600; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink);
  padding:10px 14px; min-height:44px; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center; gap:7px;
}
button:hover, .botao:hover{border-color:var(--accent)}
button.primario{background:var(--accent-forte); border-color:var(--accent-forte); color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) button.primario{color:#0f130e} }
button.discreto{background:transparent}
button.perigo{color:var(--alerta); border-color:var(--alerta)}
button:disabled{opacity:.5; cursor:default}
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}

input[type=text], input[type=date], input[type=password], textarea, select{
  font:inherit; width:100%; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:44px;
}
textarea{line-height:1.6; resize:vertical; min-height:120px}
label.campo{display:block; margin-bottom:14px}
label.campo > span{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:5px}
.linha{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ---------- chips e estado ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; border:1px solid currentColor;
}
.chip.rascunho{background:var(--surface-2); color:var(--muted)}
.chip.em-aprovacao{background:var(--pend-bg); color:var(--pend)}
.chip.aprovada{background:var(--ok-bg); color:var(--ok)}
.chip.publicada{background:var(--accent-soft); color:var(--accent)}

.rotulo{
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:22px 0 9px;
}

/* ---------- abas ---------- */
.abas{display:flex; gap:6px; margin:18px 0 14px; flex-wrap:wrap}
.abas button{flex:1 1 auto; min-width:110px}
.abas button[aria-selected=true]{background:var(--accent-forte); border-color:var(--accent-forte); color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .abas button[aria-selected=true]{color:#0f130e} }

/* ---------- texto pronto para copiar ---------- */
.texto-pronto{
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:14px 15px; white-space:pre-wrap; font-size:15px; line-height:1.62;
}
.texto-pronto.zap{border-left:3px solid var(--accent)}
.contador{font-size:12.5px; color:var(--muted); margin-top:6px}

/* artigo renderizado, como o Nucleo vai ler */
.artigo{font-size:16.5px; line-height:1.68}
.artigo h3,.artigo h4,.artigo h5{font-family:"Archivo",sans-serif; font-weight:600; margin:22px 0 8px}
.artigo h3{font-size:19px}
.artigo h4{font-size:17px}
.artigo p{margin:0 0 14px}
.artigo ul{margin:0 0 14px; padding-left:22px}
.artigo li{margin-bottom:6px}
.artigo img{max-width:100%}
.artigo.previa{
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:14px 15px;
}
.contador.estourou{color:var(--alerta); font-weight:600}

/* ---------- carrossel ---------- */
.carrossel{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:10px; margin-inline:-16px; padding-inline:16px;
}
.lamina{flex:0 0 auto; scroll-snap-align:center; width:min(78vw,300px)}
.lamina canvas{
  width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-2);
}
.lamina .legenda-lamina{font-size:11.5px; color:var(--muted); text-align:center; margin-top:6px}
.aviso-corte{
  background:var(--pend-bg); color:var(--pend); border:1px solid currentColor;
  border-radius:8px; padding:8px 10px; font-size:13px; margin-top:8px;
}

.editor-lamina{
  border:1px solid var(--line); border-radius:10px; padding:14px 14px 4px;
  margin-bottom:12px; background:var(--surface-2);
}
.editor-lamina header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.editor-lamina header .n{font-family:"Archivo",sans-serif; font-weight:600}

/* ---------- imagens ---------- */
.galeria{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.galeria figure{margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface-2)}
.galeria img{width:100%; height:120px; object-fit:cover; display:block}
.galeria figcaption{padding:7px 9px; font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; justify-content:space-between}
.galeria .marca-capa{color:var(--accent); font-weight:600}
.solta{
  border:2px dashed var(--line); border-radius:10px; padding:20px; text-align:center;
  color:var(--muted); font-size:14px;
}
.solta.sobre{border-color:var(--accent); background:var(--accent-soft)}

/* ---------- aprovacao ---------- */
.resposta{
  border:1px solid var(--line); border-left-width:3px; border-radius:10px;
  padding:12px 14px; margin-bottom:10px; background:var(--surface-2);
}
.resposta.aprovo{border-left-color:var(--ok)}
.resposta.ajuste{border-left-color:var(--pend)}
.resposta .quem{font-weight:600}
.resposta .quando{font-size:12.5px; color:var(--muted)}
.resposta .comentario{margin-top:6px; white-space:pre-wrap}
.placar{font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:99px}
.placar.aprovo{background:var(--ok-bg); color:var(--ok)}
.placar.ajuste{background:var(--pend-bg); color:var(--pend)}

/* ---------- lista de pautas ---------- */
.lista{display:grid; gap:12px}
.lista a.item{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--raio); padding:14px 16px;
}
.lista a.item:hover{border-color:var(--accent)}
.lista .item h2{margin-bottom:4px}

/* ---------- avisos ---------- */
.erro{background:var(--alerta-bg); color:var(--alerta); border:1px solid currentColor; border-radius:8px; padding:10px 12px; font-size:14px}
.ok{background:var(--ok-bg); color:var(--ok); border:1px solid currentColor; border-radius:8px; padding:10px 12px; font-size:14px}
.salvando{font-size:13px; color:var(--muted); min-width:74px; text-align:right}

@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* ---------- faixa de cada peca ----------
   Uma cor por canal, para separar as tres pecas quando estao empilhadas.
   Site no verde da SBI, WhatsApp no verde-agua, Instagram no magenta,
   aprovacao no ambar do chip "Em aprovacao". */
.peca{--peca-cor:#14532b; --peca-fundo:#e3efe0; margin-bottom:28px; border-top:4px solid var(--peca-cor)}
.peca-site{--peca-cor:#14532b; --peca-fundo:#e3efe0}
.peca-whatsapp{--peca-cor:#0d6660; --peca-fundo:#d9f0ef}
.peca-instagram{--peca-cor:#a2285f; --peca-fundo:#f7e1ec}
.peca-aprovacao{--peca-cor:#8a5a12; --peca-fundo:#fdf0d8}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .peca-site{--peca-cor:#9ccc52; --peca-fundo:#1d3321}
  :root:not([data-theme="light"]) .peca-whatsapp{--peca-cor:#6fd3c8; --peca-fundo:#13302f}
  :root:not([data-theme="light"]) .peca-instagram{--peca-cor:#f08cbb; --peca-fundo:#351a28}
  :root:not([data-theme="light"]) .peca-aprovacao{--peca-cor:#e8b25a; --peca-fundo:#33260f}
}
:root[data-theme="dark"] .peca-site{--peca-cor:#9ccc52; --peca-fundo:#1d3321}
:root[data-theme="dark"] .peca-whatsapp{--peca-cor:#6fd3c8; --peca-fundo:#13302f}
:root[data-theme="dark"] .peca-instagram{--peca-cor:#f08cbb; --peca-fundo:#351a28}
:root[data-theme="dark"] .peca-aprovacao{--peca-cor:#e8b25a; --peca-fundo:#33260f}

.peca-cabeca{
  margin:-18px -16px 18px; padding:14px 16px 13px;
  background:var(--peca-fundo); border-bottom:1px solid var(--line);
  border-radius:8px 8px 0 0; /* raio interno do cartao, abaixo da borda de 4px */
}
.peca-cabeca h2{
  color:var(--peca-cor); font-weight:800; font-size:23px; letter-spacing:-.015em; margin:2px 0 3px;
}
.peca-num{
  display:block; font-family:"Archivo",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--peca-cor); opacity:.85;
}
.peca-destino{display:block; font-size:14px; color:var(--muted)}
/* A borda da mensagem acompanha a cor do canal, nao a do site. */
.peca .texto-pronto.zap{border-left-color:var(--peca-cor)}