/* Painel de edição — mesma paleta do site, mas com alvos maiores, contraste
   mais alto e nenhum efeito decorativo. Quem usa isto é uma pessoa só, no
   celular ou no notebook, para trocar um parágrafo. */
:root{
  --navy-900:#0e1730; --navy-700:#1f2745;
  --gold:#c9a87c; --gold-dark:#8a6a3b;
  --cream:#f4f1ec; --paper:#fff;
  --ink:#1a2340; --ink-soft:#5b6480;
  --line:#dcd8cf; --ok:#1f7a4d; --err:#a33326;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Libre Baskerville",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
/* O atributo `hidden` vale display:none pela folha do navegador, que qualquer
   seletor de classe derruba. `.gate{display:grid}` fazia exatamente isso: o
   painel abria atrás da tela de login, que continuava por cima. Esta regra
   devolve ao `hidden` o poder de esconder. */
[hidden]{display:none !important}
body{margin:0; font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--ink); background:var(--cream)}
img{display:block; max-width:100%}

.btn{
  appearance:none; border:0; border-radius:3px; cursor:pointer;
  background:var(--navy-900); color:#fff; padding:.95em 1.9em;
  font:600 .95rem/1 var(--sans); transition:background .2s, opacity .2s;
}
.btn:hover:not(:disabled){background:var(--navy-700)}
.btn:disabled{opacity:.4; cursor:default}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.btn--full{width:100%}

/* ---------------- login ---------------- */
.gate{min-height:100svh; display:grid; place-items:center; padding:1.5rem}
.gate__box{width:100%; max-width:420px; background:var(--paper); padding:clamp(1.8rem,5vw,2.8rem); border-radius:4px; box-shadow:0 20px 60px -30px rgba(14,23,48,.5)}
.gate__logo{height:64px; width:auto; margin:0 auto 1.6rem}
.gate__box h1{font-family:var(--serif); font-weight:400; font-size:1.5rem; margin:0 0 .4rem; text-align:center}
.gate__hint{margin:0 0 1.8rem; text-align:center; color:var(--ink-soft); font-size:.95rem}
.gate__box .field{margin-bottom:1.3rem}
.gate__back{display:block; margin-top:1.4rem; text-align:center; color:var(--ink-soft); font-size:.9rem}

/* ---------------- topo ---------------- */
.topbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:1rem;
  padding:.9rem clamp(1rem,4vw,2.5rem); background:var(--paper); border-bottom:1px solid var(--line);
}
.topbar__logo{height:38px; width:auto}
.topbar__title{display:flex; flex-direction:column; line-height:1.25; margin-right:auto}
.topbar__title strong{font-size:1rem}
.topbar__title span{font-size:.82rem; color:var(--ink-soft)}
.topbar__link{
  background:none; border:0; font:500 .9rem var(--sans); color:var(--gold-dark);
  text-decoration:none; cursor:pointer; padding:.5rem .2rem; white-space:nowrap;
}
.topbar__link:hover{text-decoration:underline}
.topbar__link--plain{color:var(--ink-soft)}
@media (max-width:620px){ .topbar__title span{display:none} }

/* ---------------- folha de edição ---------------- */
.sheet{max-width:820px; margin:0 auto; padding:clamp(1.2rem,4vw,2.5rem) clamp(1rem,4vw,2.5rem) 8rem}

.group{background:var(--paper); border:1px solid var(--line); border-radius:4px; margin-bottom:1.2rem; overflow:hidden}
.group__head{
  width:100%; display:flex; align-items:center; gap:.9rem; text-align:left;
  background:none; border:0; padding:1.15rem 1.3rem; cursor:pointer; font:inherit;
}
.group__head:hover{background:#faf8f5}
.group__head:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
.group__num{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy-900); color:var(--gold); font-size:.85rem; font-weight:600;
}
.group__label{flex:1}
.group__label strong{display:block; font-size:1.02rem}
.group__label span{display:block; font-size:.85rem; color:var(--ink-soft)}
.group__chev{flex:none; transition:transform .25s ease; color:var(--ink-soft)}
.group[open] .group__chev{transform:rotate(180deg)}
.group__body{padding:0 1.3rem 1.4rem; display:grid; gap:1.5rem}

.field{display:block}
.field__label{display:block; font-weight:600; font-size:.92rem; margin-bottom:.15rem}
.field__help{display:block; font-size:.83rem; color:var(--ink-soft); margin-bottom:.5rem}
.field input[type=text],.field input[type=password],.field textarea{
  width:100%; font:inherit; color:var(--ink); background:#fdfcfa;
  border:1px solid var(--line); border-radius:3px; padding:.75rem .9rem;
  transition:border-color .15s, box-shadow .15s; resize:vertical;
}
.field textarea{min-height:7.5rem; line-height:1.55}
.field input:focus,.field textarea:focus{
  outline:0; border-color:var(--gold-dark); box-shadow:0 0 0 3px rgba(138,106,59,.18);
}
.field--changed input,.field--changed textarea{border-color:var(--gold-dark); background:#fffdf7}
.field__foot{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.35rem; min-height:1.2rem}
.field__reset{
  background:none; border:0; padding:0; font:500 .8rem var(--sans);
  color:var(--gold-dark); cursor:pointer; text-decoration:underline;
}
.field__reset[hidden]{display:none}
.field__count{font-size:.78rem; color:var(--ink-soft)}

/* foto da equipe */
.photo{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.photo img{width:74px; height:74px; border-radius:50%; object-fit:cover; background:var(--navy-900); border:1px solid var(--line)}
.photo__actions{display:flex; flex-direction:column; gap:.25rem}
.photo__btn{
  background:none; border:1px solid var(--line); border-radius:3px; padding:.5rem .9rem;
  font:500 .85rem var(--sans); color:var(--ink); cursor:pointer;
}
.photo__btn:hover{border-color:var(--gold-dark); color:var(--gold-dark)}
.photo__note{font-size:.8rem; color:var(--ink-soft)}
.photo input[type=file]{display:none}

/* ---------------- barra de salvar ---------------- */
.savebar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; gap:1rem; justify-content:flex-end;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
}
.savebar__status{margin-right:auto; font-size:.9rem; color:var(--ink-soft)}
.savebar__status.is-dirty{color:var(--gold-dark); font-weight:600}
.savebar__status.is-ok{color:var(--ok); font-weight:600}
.savebar__status.is-err{color:var(--err); font-weight:600}

.msg{margin:.6rem 0 0; font-size:.9rem}
.msg--error{color:var(--err)}