:root{
  --fundo:#faf8f5; --papel:#fff; --linha:#e6e0d7; --tinta:#2a2320;
  --suave:#857a70; --acento:#8a4b2a; --ok:#2f7a4f; --alerta:#9a6a12;
  --ui:"Jost","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font-family:var(--ui); font-size:14px; -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}

/* ── topo ─────────────────────────────────────────────── */
.topo{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 20px;
  background:var(--papel); border-bottom:1px solid var(--linha);
}
.topo__marca{font-weight:500; letter-spacing:.02em}
.topo__acoes{display:flex; align-items:center; gap:10px}
.estado{font-size:12.5px; color:var(--suave)}
.estado.is-ok{color:var(--ok)}
.estado.is-alerta{color:var(--alerta)}
.bt{
  padding:9px 18px; border-radius:999px; cursor:pointer;
  font-size:13px; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--tinta); background:transparent;
  transition:background .15s, color .15s, opacity .15s;
}
.bt--cheio{background:var(--tinta); color:#fff}
.bt--fantasma:hover{background:#efe9e1}
.bt:disabled{opacity:.35; cursor:not-allowed}

/* ── estrutura ────────────────────────────────────────── */
.palco{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); min-height:calc(100vh - 57px)}
@media (max-width:980px){ .palco{grid-template-columns:1fr} }

.painel{border-right:1px solid var(--linha); background:var(--papel); overflow-y:auto; max-height:calc(100vh - 57px)}
@media (max-width:980px){ .painel{max-height:none; border-right:0; border-bottom:1px solid var(--linha)} }

.grupo{border-bottom:1px solid var(--linha)}
.grupo > summary{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; cursor:pointer; font-weight:500; list-style:none;
}
.grupo > summary::-webkit-details-marker{display:none}
.grupo > summary:hover{background:#faf7f3}
.grupo__n{
  display:grid; place-items:center; width:22px; height:22px; flex:none;
  border-radius:50%; background:var(--tinta); color:#fff; font-size:12px;
}
.grupo__corpo{padding:4px 20px 20px; display:flex; flex-direction:column; gap:14px}
.grupo hr{border:0; border-top:1px solid var(--linha); margin:2px 0}

label{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:500}
label small{font-weight:400; color:var(--suave); font-size:12px}
input[type=text],input:not([type]),textarea,input[type=file]{
  padding:9px 11px; border:1px solid var(--linha); border-radius:8px;
  background:var(--fundo); font-weight:400;
}
textarea{resize:vertical; line-height:1.5}
input:focus,textarea:focus{outline:2px solid var(--acento); outline-offset:1px; border-color:transparent}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.aviso{padding:9px 11px; border-radius:8px; background:#fdf4e3; color:var(--alerta); font-size:12.5px; line-height:1.45}
.nota{margin:0; font-size:12.5px; color:var(--suave); line-height:1.5}
.ligacao{border:0; background:none; padding:0; color:var(--acento); text-decoration:underline; cursor:pointer}

/* ── largar fotos ─────────────────────────────────────── */
.largar{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:24px 16px; border:1.5px dashed var(--linha); border-radius:12px; background:var(--fundo);
}
.largar.is-sobre{border-color:var(--acento); background:#fbf2ec}
.largar small{color:var(--suave); font-size:12px; margin-top:4px}

.progresso{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--suave)}
.progresso__barra{flex:1; height:4px; border-radius:2px; background:var(--linha); overflow:hidden}
.progresso__barra::after{content:""; display:block; height:100%; width:var(--p,0%); background:var(--acento); transition:width .2s}

/* ── grelha de fotos ──────────────────────────────────── */
.grelha{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.cartao{position:relative; border-radius:8px; overflow:hidden; background:#eee}
.cartao__foto{
  aspect-ratio:4/5; background-size:cover; background-position:50% 50%;
  cursor:grab; touch-action:none;
}
.cartao__foto:active{cursor:grabbing}
.cartao__barra{
  position:absolute; inset:auto 0 0 0; display:flex; gap:2px; padding:4px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
}
.cartao__barra button{
  flex:1; border:0; background:rgba(255,255,255,.9); border-radius:4px;
  font-size:11px; line-height:1.6; cursor:pointer; padding:1px 0;
}
.cartao__barra button:hover{background:#fff}
.cartao__selo{
  position:absolute; top:5px; left:5px; padding:2px 7px; border-radius:999px;
  background:var(--tinta); color:#fff; font-size:10.5px; letter-spacing:.04em;
}
.cartao.is-capa{outline:2px solid var(--acento); outline-offset:-2px}
.cartao.is-fecho{outline:2px solid #3b6ea5; outline-offset:-2px}

/* ── pré-visualização ─────────────────────────────────── */
.previa{display:flex; flex-direction:column; background:#efeae3; min-height:420px}
.previa__barra{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--linha); background:var(--papel);
}
.previa__aparelhos{display:flex; gap:4px}
.aba{
  padding:6px 14px; border:1px solid var(--linha); background:var(--papel);
  border-radius:999px; font-size:12.5px; cursor:pointer;
}
.aba.is-on{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.previa__peso{font-size:12.5px; color:var(--suave)}
.previa__moldura{flex:1; display:grid; place-items:center; padding:20px; overflow:auto; position:relative}
#previa{
  width:390px; height:100%; min-height:640px; max-height:calc(100vh - 140px);
  border:1px solid var(--linha); border-radius:10px; background:#17120f;
  box-shadow:0 10px 40px rgba(0,0,0,.12); transition:width .2s;
}
.previa__vazio{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--suave); background:#efeae3; pointer-events:none;
}
.previa__vazio[hidden]{display:none}

/* ── paletas ──────────────────────────────────────────── */
.paletas{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.paleta{
  border:1px solid var(--linha); border-radius:9px; padding:0; overflow:hidden;
  background:none; cursor:pointer; text-align:left;
}
.paleta.is-on{outline:2px solid var(--acento); outline-offset:-1px; border-color:transparent}
.paleta__amostra{display:flex; height:34px}
.paleta__amostra i{flex:1}
.paleta__amostra i:first-child{flex:2.2}
.paleta__nome{display:block; padding:4px 6px 5px; font-size:11.5px; color:var(--suave)}
.paleta.is-on .paleta__nome{color:var(--tinta); font-weight:500}

.custom{border:1px solid var(--linha); border-radius:9px}
.custom > summary{padding:9px 12px; cursor:pointer; font-size:13px; font-weight:500; list-style:none}
.custom > summary::-webkit-details-marker{display:none}
.custom > summary::before{content:"▸ "; color:var(--suave)}
.custom[open] > summary::before{content:"▾ "}
.custom__corpo{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:4px 12px 12px}
.custom .nota{padding:0 12px 10px; margin:0}
.custom .aviso{margin:0 12px 12px}
label.cor{font-size:12px; gap:6px}
label.cor input[type=color]{
  width:100%; height:34px; padding:2px; border:1px solid var(--linha);
  border-radius:7px; background:var(--fundo); cursor:pointer;
}

/* ── marca da Doppio no topo ──────────────────────────── */
.topo__marca{display:flex; align-items:center; gap:10px}
.topo__logo{height:26px; width:auto; display:block}
.topo__onde{font-size:13px; color:var(--suave); font-weight:400}
.topo__quem{font-size:12.5px; color:var(--suave)}

/* ── ecrãs simples (entrar, páginas, admin) ───────────── */
.folha{max-width:820px; margin:0 auto; padding:40px 20px 64px}
.folha--estreita{max-width:420px; padding-top:9vh}
.folha h1{font-size:22px; font-weight:500; margin:0 0 6px; letter-spacing:.01em}
.folha p.intro{margin:0 0 24px; color:var(--suave); line-height:1.55}
.cartaz{background:var(--papel); border:1px solid var(--linha); border-radius:14px; padding:26px}
.cartaz .bt{width:100%; justify-content:center; margin-top:4px}
.recado{margin-top:14px; padding:11px 13px; border-radius:9px; font-size:13px; line-height:1.5}
.recado--erro{background:#fdeceb; color:#8a2b22}
.recado--ok{background:#eaf5ee; color:#1f6b40}
.recado--aviso{background:#fdf4e3; color:var(--alerta)}

/* ── lista de páginas ─────────────────────────────────── */
.listaCabeca{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px}
.contador{font-size:13px; color:var(--suave)}
.paginas{display:flex; flex-direction:column; gap:10px}
.cartaoPagina{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--papel); border:1px solid var(--linha); border-radius:12px; padding:16px 18px;
}
.cartaoPagina__corpo{flex:1; min-width:200px}
.cartaoPagina__titulo{font-weight:500; margin:0 0 3px}
.cartaoPagina__url{margin:0; font-size:12.5px; color:var(--suave); word-break:break-all}
.selo{font-size:11.5px; padding:3px 9px; border-radius:999px; white-space:nowrap}
.selo--viva{background:#eaf5ee; color:#1f6b40}
.selo--rascunho{background:#f0ece6; color:var(--suave)}
.acoes{display:flex; gap:6px; flex-wrap:wrap}
.acoes .bt{padding:7px 13px; font-size:12.5px}
.vazio{text-align:center; padding:50px 20px; color:var(--suave); background:var(--papel); border:1px dashed var(--linha); border-radius:14px}

/* ── tabela do painel ─────────────────────────────────── */
.tabela{width:100%; border-collapse:collapse; background:var(--papel); border:1px solid var(--linha); border-radius:12px; overflow:hidden}
.tabela th,.tabela td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--linha); font-size:13px; vertical-align:top}
.tabela th{font-weight:500; color:var(--suave); font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.tabela tr:last-child td{border-bottom:0}
.tabela .bt{padding:5px 11px; font-size:12px}
.inativo{opacity:.5}
.subpaginas{margin:6px 0 0; padding:0; list-style:none; font-size:12px; color:var(--suave)}

/* ── logótipo escolhido ───────────────────────────────── */
.logoAtual{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--linha); border-radius:9px; background:var(--fundo);
}
.logoAtual img{
  height:34px; max-width:120px; object-fit:contain;
  /* xadrez discreto, para se ver se o fundo é mesmo transparente */
  background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%),
                   linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%);
  background-size:10px 10px; background-position:0 0,5px 5px;
}
.logoAtual span{display:block; font-size:12.5px; color:var(--suave); margin-bottom:2px; word-break:break-all}