/* Painel da Salgados Vitória — mesma paleta do site (as variáveis guardam o nome do Livre Pão, de onde veio), mas denso e funcional. */

:root{
  --verde:#6e0d10;
  --verde-claro:#8f1a1d;
  --verde-fraco:#8a6115;
  --creme:#fff8f0;
  --papel:#fbf5ee;
  --branco:#fffdf8;
  --tinta:#2a1210;
  --tinta-fraca:#6e5550;
  --linha:rgba(110,13,16,.2);
  --perigo:#a4442f;
  --ok:#3f7a3f;
  --sombra:0 14px 34px -24px rgba(42,18,16,.6);
}

/* o atributo hidden tem que ganhar de qualquer display: — sem isso, elemento
   escondido por JS continua na tela (bug chato de achar) */
[hidden]{display:none!important}

*{box-sizing:border-box}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 15px/1.55 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:600;line-height:1.15;margin:0}
h2{font-size:1.9rem}
h3{font-size:1.25rem}
img{display:block;max-width:100%}
input,textarea,select,button{font:inherit;color:inherit}

.dica{margin:.35rem 0 0;font-size:.84rem;font-weight:300;color:var(--tinta-fraca)}

/* ---------- botões ---------- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.05rem;border-radius:999px;border:1px solid var(--linha);
  background:var(--branco);color:var(--verde);cursor:pointer;
  font-size:.88rem;font-weight:500;text-decoration:none;transition:.16s;
}
.bt:hover{background:rgba(110,13,16,.08);border-color:var(--verde-fraco)}
.bt:disabled{opacity:.45;cursor:not-allowed}
.bt--cheio{background:var(--verde);color:var(--creme);border-color:var(--verde)}
.bt--cheio:hover{background:var(--verde-claro);border-color:var(--verde-claro)}
.bt--fantasma{background:transparent}
.bt--perigo{color:var(--perigo);border-color:rgba(164,68,47,.35)}
.bt--perigo:hover{background:rgba(164,68,47,.09)}
.bt--largo{width:100%;margin-top:.7rem}
.redondo{
  width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--linha);
  background:var(--branco);color:var(--verde-claro);cursor:pointer;line-height:1;
  display:grid;place-items:center;transition:.16s;
}
.redondo:hover:not(:disabled){background:rgba(110,13,16,.1);color:var(--verde)}
.redondo:disabled{opacity:.3;cursor:not-allowed}

/* ---------- campos ---------- */
.campo{display:block;margin-bottom:.9rem}
.campo>span{
  display:block;margin-bottom:.3rem;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--verde-fraco);font-weight:500;
}
.campo small{display:block;margin-top:.3rem;font-size:.78rem;font-weight:300;color:var(--tinta-fraca);text-transform:none;letter-spacing:0}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.62rem .8rem;border:1px solid var(--linha);border-radius:10px;
  background:var(--branco);outline:none;transition:.16s;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  border-color:var(--verde-claro);box-shadow:0 0 0 3px rgba(111,130,71,.15);
}
.campo textarea{resize:vertical;line-height:1.5}
.campo--curto{max-width:90px}
.dupla{display:flex;gap:.8rem}
.dupla>.campo{flex:1}
.chave{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 1rem;cursor:pointer;font-size:.9rem}
.chave input{width:18px;height:18px;accent-color:var(--verde)}

/* ---------- entrada ---------- */
.entrada{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}
.entrada__caixa{
  width:min(380px,100%);background:var(--branco);border:1px solid var(--linha);
  border-radius:18px;padding:2.2rem 1.8rem;box-shadow:var(--sombra);text-align:center;
}
/* a logo agora ja vem com disco verde, nao precisa mais do filtro */
.entrada__logo{width:82px;margin:0 auto 1rem}
.entrada__sub{margin:.4rem 0 1.6rem;font-size:.88rem;font-weight:300;color:var(--tinta-fraca)}
.entrada .campo{text-align:left}
.entrada .bt{width:100%}

/* ---------- cabeçalho ---------- */
.cabeca{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.7rem 1.1rem;background:rgba(251,248,242,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.cabeca__marca{display:flex;align-items:center;gap:.5rem;font-family:"Playfair Display",serif;font-size:1.15rem}
.cabeca__marca img{width:30px}
.cabeca__lado{display:flex;gap:.45rem;margin-left:auto}
.abas{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{
  flex:none;padding:.5rem .9rem;border:none;border-radius:999px;background:transparent;
  color:var(--tinta-fraca);cursor:pointer;font-size:.88rem;white-space:nowrap;transition:.16s;
}
.aba:hover{background:rgba(110,13,16,.08);color:var(--verde)}
.aba.ativa{background:var(--verde);color:var(--creme)}

.folha{max-width:940px;margin:0 auto;padding:1.6rem 1.1rem 7rem}
.pagina{display:none}
.pagina.ativa{display:block}
.titulo-linha{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}

.cartao{
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  padding:1.2rem 1.15rem;margin-top:1rem;
}
.cartao h3{margin-bottom:.9rem}

/* ---------- categorias ---------- */
.categoria-bloco{
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  margin-bottom:.7rem;overflow:hidden;
}
.cat-linha{display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem}
.cat-abrir{
  flex:1;display:flex;align-items:center;gap:.7rem;min-width:0;
  background:none;border:none;cursor:pointer;text-align:left;padding:.2rem;
}
.seta{color:var(--verde-fraco);transition:transform .2s;font-size:1.2rem;flex:none}
.categoria-bloco.aberta .seta{transform:rotate(90deg)}
.cat-nome{font-family:"Playfair Display",serif;font-size:1.3rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-acoes,.prod-acoes{display:flex;align-items:center;gap:.35rem;flex:none}
.mini{width:42px;height:42px;flex:none;border-radius:9px;object-fit:cover;border:1px solid var(--linha);background:rgba(110,13,16,.06)}
.mini--vazia{display:block;background:repeating-linear-gradient(45deg,rgba(110,13,16,.05) 0 6px,transparent 6px 12px)}
.pastilha{
  flex:none;padding:.18rem .55rem;border-radius:999px;background:rgba(110,13,16,.1);
  color:var(--verde);font-size:.7rem;letter-spacing:.04em;
}
.pastilha--off{background:rgba(164,68,47,.12);color:var(--perigo)}

.cat-corpo{display:none;padding:0 .7rem .8rem;border-top:1px solid var(--linha)}
.categoria-bloco.aberta .cat-corpo{display:block}
.prod-linha{
  display:flex;align-items:center;gap:.7rem;padding:.55rem .2rem;
  border-bottom:1px dashed var(--linha);
}
.prod-linha:last-child{border-bottom:none}
.prod-linha.off{opacity:.55}
.prod-texto{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.prod-texto strong{font-weight:500}
.prod-peso{font-size:.76rem;color:var(--tinta-fraca)}
.prod-preco{font-family:"Playfair Display",serif;font-size:1.15rem;font-weight:600;color:var(--verde);white-space:nowrap}

/* ---------- foto ---------- */
/* o quadro tem a proporção real do site: o que ela enquadra aqui é o que sai lá */
.foto-edita{margin-bottom:1.2rem}
.foto-quadro{
  position:relative;width:100%;border-radius:12px;overflow:hidden;
  border:1px solid var(--linha);cursor:crosshair;touch-action:none;background:rgba(110,13,16,.06);
}
.foto-quadro img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.foto-vazia{
  display:grid;place-items:center;width:100%;border-radius:12px;border:1px dashed var(--linha);
  font-size:.82rem;color:var(--verde-fraco);
  background:repeating-linear-gradient(45deg,rgba(110,13,16,.04) 0 7px,transparent 7px 14px);
}
.foto-edita__acoes{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
/* flex proporcional à razão de cada quadro: 4:3 e 1:1 lado a lado ficam da mesma altura */
.foto-vistas{display:flex;gap:.6rem;align-items:flex-start}
.foto-vista{margin:0;min-width:0}
.foto-vista figcaption{margin-top:.3rem;font-size:.74rem;color:var(--verde-fraco);text-align:center}
.foto-edita__dica{margin:.5rem 0 0;font-size:.8rem;color:var(--verde-fraco)}
/* ficha da foto: como deve ser, tamanho da atual e o pedido pra IA */
.ficha{margin-top:.7rem;padding:.7rem .85rem;border:1px solid var(--linha);border-radius:12px;font-size:.84rem}
.ficha p{margin:0 0 .35rem}
.ficha small{display:block;margin-top:.4rem;font-size:.74rem;color:var(--verde-fraco)}
.ficha__esta{color:#2f6b2f}
.ficha__esta--ruim{color:#a3461a;font-weight:600}
.bt--mini{padding:.35rem .8rem;font-size:.8rem}

.passo-edita{border-top:1px dashed var(--linha);padding-top:1rem;margin-top:1rem}
.passo-edita:first-child{border-top:none;padding-top:0;margin-top:0}

/* ---------- barra de salvar ---------- */
.salvar{
  position:fixed;left:50%;translate:-50% 0;bottom:max(1rem,env(safe-area-inset-bottom));z-index:50;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;
  padding:.7rem .8rem .7rem 1.2rem;border-radius:999px;
  background:var(--branco);border:1px solid var(--verde-fraco);box-shadow:0 18px 40px -18px rgba(42,18,16,.65);
  font-size:.88rem;max-width:calc(100vw - 2rem);
  animation:sobe .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes sobe{from{opacity:0;translate:-50% 18px}}

/* ---------- folha de edição ---------- */
.veu{position:fixed;inset:0;z-index:60;background:rgba(30,36,18,.45);backdrop-filter:blur(3px)}
.editor{
  position:fixed;top:0;right:0;z-index:70;height:100dvh;width:min(460px,100vw);
  background:var(--papel);display:flex;flex-direction:column;
  translate:100% 0;transition:translate .3s cubic-bezier(.3,.8,.3,1);
  box-shadow:-20px 0 50px -30px rgba(30,36,18,.8);
}
.editor.aberto{translate:0 0}
.editor__topo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.2rem .9rem;border-bottom:1px solid var(--linha);
}
.editor__corpo{flex:1;overflow-y:auto;padding:1.2rem}
.editor__pe{
  display:flex;gap:.6rem;justify-content:space-between;
  padding:.9rem 1.2rem max(.9rem,env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);background:var(--branco);
}

/* ---------- confirmação ---------- */
.confirma{
  position:fixed;z-index:80;left:50%;top:50%;translate:-50% -50%;
  width:min(420px,calc(100vw - 2rem));background:var(--branco);
  border:1px solid var(--linha);border-radius:16px;padding:1.5rem;
  box-shadow:0 30px 60px -30px rgba(30,36,18,.8);
  opacity:0;pointer-events:none;transition:opacity .18s,translate .18s;
}
.confirma.aberto{opacity:1;pointer-events:auto}
.confirma p{margin:.6rem 0 1.4rem;font-size:.9rem;font-weight:300;color:var(--tinta-fraca);line-height:1.6}
.confirma__botoes{display:flex;gap:.6rem;justify-content:flex-end}

/* ---------- avisos ---------- */
.avisos{
  position:fixed;z-index:90;left:50%;translate:-50% 0;top:1rem;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;
  width:min(440px,calc(100vw - 2rem));
}
.aviso{
  padding:.65rem 1.1rem;border-radius:999px;background:var(--tinta);color:var(--creme);
  font-size:.86rem;box-shadow:0 14px 30px -16px rgba(0,0,0,.6);
  animation:desce .2s cubic-bezier(.2,.8,.3,1);max-width:100%;text-align:center;
}
.aviso--ok{background:var(--ok)}
.aviso--erro{background:var(--perigo)}
.aviso.saindo{opacity:0;transition:opacity .3s}
@keyframes desce{from{opacity:0;transform:translateY(-12px)}}

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

@media (max-width:720px){
  .cabeca{gap:.6rem}
  .cabeca__lado{width:100%;margin-left:0;justify-content:flex-end}
  .abas{order:3;width:100%}
  .titulo-linha{flex-direction:column;align-items:stretch}
  .prod-linha{flex-wrap:wrap}
  .prod-preco{order:3}
  .prod-acoes{margin-left:auto}
  .foto-grande .foto-edita img,.foto-grande .foto-vazia{width:150px;height:100px}
}