:root{ --papel:#f4f0e9; --tinta:#1d1a16; --azul:#86683a; --azul-claro:#f1e8d8; --ouro:#b28e58; --cinza:#8a847a; --ok:#2e7d4f; --ok-claro:#e2f3e8; --nao:#8a8f99; --nao-claro:#eceef1; --pend:#b8975a; --pend-claro:#f6efe0; --serif:'Cormorant Garamond',Georgia,serif; --sans:Jost,-apple-system,system-ui,sans-serif; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:inherit}
h1,h2{font-family:var(--serif);font-weight:500;margin:0}

/* login: cartão de papelaria sobre o salão */
.entrar{position:relative;min-height:100dvh;display:grid;place-items:center;overflow:hidden;isolation:isolate;
  padding:max(28px,env(safe-area-inset-top)) 20px max(56px,calc(env(safe-area-inset-bottom) + 44px));background:#11161d}
.entrar[hidden]{display:none}
.entrar-fundo{position:absolute;inset:-30px;z-index:-2}
.entrar-fundo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.04)}
.entrar::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(80% 65% at 50% 48%,rgba(20,14,8,0),rgba(20,14,8,.28) 70%,rgba(14,10,6,.58)),
  linear-gradient(180deg,rgba(14,10,6,.22),rgba(14,10,6,0) 30%,rgba(14,10,6,.32))}

.cartao{position:relative;width:min(100%,372px);background:#fffdf8;border-radius:3px;padding:44px 32px 30px;text-align:center;color:var(--tinta);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.75),0 18px 40px -22px rgba(0,0,0,.5);animation:cartao-surge .9s cubic-bezier(.2,.7,.2,1) both}
.cartao::before,.cartao::after{content:"";position:absolute;pointer-events:none;border:1px solid var(--ouro)}
.cartao::before{inset:10px;opacity:.38}
.cartao::after{inset:14px;opacity:.14}
.cartao>*{animation:item-surge .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms + 200ms)}
@keyframes cartao-surge{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes item-surge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cartao-mono{display:block;height:86px;width:auto;margin:0 auto 14px}
.cartao-titulo{margin:0;font:italic 500 2.2rem/1.05 var(--serif);letter-spacing:.005em}
.cartao-filete{display:flex;align-items:center;justify-content:center;gap:10px;width:60%;margin:16px auto 11px}
.cartao-filete span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(178,142,88,.75))}
.cartao-filete span:last-child{background:linear-gradient(90deg,rgba(178,142,88,.75),transparent)}
.cartao-filete svg{width:7px;height:7px;fill:var(--ouro);opacity:.9}
.cartao-data{margin:0 0 32px;font:600 .84rem/1 var(--serif);letter-spacing:.36em;text-indent:.36em;color:var(--azul)}

.cartao-rotulo{display:block;margin-bottom:4px;font:600 .74rem/1 var(--serif);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#6b7078}
.cartao-campo{position:relative;margin:0 0 18px}
.cartao-campo input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid rgba(20,22,26,.5);border-radius:0;background:transparent;
  padding:10px 42px;font:500 1.4rem/1.25 var(--serif);letter-spacing:.14em;text-align:center;color:var(--tinta);outline:none;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.cartao-campo input:focus{border-bottom-color:var(--azul);box-shadow:0 1px 0 var(--azul)}
.cartao-olho{position:absolute;right:0;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;
  border:0;background:none;padding:0;color:#7b808a;cursor:pointer}
.cartao-olho svg{width:20px;height:20px}
.cartao-olho .olho-fechado{display:none}
.cartao-olho[aria-pressed="true"] .olho-aberto{display:none}
.cartao-olho[aria-pressed="true"] .olho-fechado{display:block}

.cartao-lembrar{display:inline-flex;align-items:center;gap:9px;margin:0 0 24px;font:500 1rem/1 var(--serif);color:#4a4f58;cursor:pointer;user-select:none;-webkit-user-select:none}
.cartao-lembrar input{position:absolute;opacity:0;pointer-events:none}
.caixinha{width:15px;height:15px;border:1px solid rgba(134,104,58,.7);border-radius:2px;display:grid;place-items:center;transition:background .15s,border-color .15s}
.cartao-lembrar input:checked+.caixinha{background:var(--azul);border-color:var(--azul)}
.cartao-lembrar input:checked+.caixinha::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:translateY(-1px) rotate(45deg)}
.cartao-lembrar input:focus-visible+.caixinha{outline:2px solid rgba(134,104,58,.35);outline-offset:2px}

.cartao-entrar{position:relative;display:block;width:100%;height:52px;border:0;border-radius:2px;overflow:hidden;cursor:pointer;color:#fff;
  font:600 .95rem/1 var(--serif);letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;
  background:linear-gradient(180deg,#38332c 0%,#1d1a16 44%,#151310 56%,#1d1a16 100%);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16)}
.cartao-entrar::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);
  transform:translateX(-110%);animation:cetim 1.7s cubic-bezier(.4,0,.2,1) 1.3s both}
@keyframes cetim{to{transform:translateX(110%)}}
.cartao-entrar:active{transform:translateY(1px)}
.cartao-entrar:disabled{opacity:.72;cursor:default}

.cartao-erro{margin:16px 0 0;font:italic 500 1.08rem/1.35 var(--serif);color:#8c2f39}
.cartao-erro[hidden]{display:none}
.cartao.tremer{animation:tremer .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes tremer{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

.entrar-rodape{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));margin:0;text-align:center;
  font:italic 500 1.05rem/1 var(--serif);letter-spacing:.06em;color:rgba(255,253,248,.7)}

@media (prefers-reduced-motion:reduce){.cartao,.cartao>*,.cartao-entrar::after,.cartao.tremer{animation:none!important}}

/* painel */
.painel{max-width:860px;margin:0 auto;padding:18px 16px 60px}
.painel[hidden]{display:none}
.topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.topo h1{font-size:1.9rem;line-height:1}
.topo h1 span{font-style:italic;font-weight:400;color:var(--cinza)}
.sub{margin:.25rem 0 0;color:var(--cinza);font-size:.85rem;letter-spacing:.06em}
.topo-acoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn-leve{background:#fff;border:1px solid #d6d9de;border-radius:999px;padding:.45rem .8rem;font-size:.8rem;cursor:pointer;color:var(--tinta)}
.btn-leve:active{background:#eef0f3}

.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.num{background:#fff;border-radius:16px;padding:14px 14px 12px;box-shadow:0 1px 2px rgba(20,22,26,.06)}
.num b{display:block;font-family:var(--serif);font-size:2rem;line-height:1;font-weight:500;font-variant-numeric:lining-nums}
.num small{display:block;color:var(--cinza);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.35rem}
.num.ok b{color:var(--ok)} .num.nao b{color:var(--nao)} .num.pend b{color:var(--pend)}
.num .det{font-size:.78rem;color:var(--cinza);margin-top:.35rem;line-height:1.35}

.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.segmentos{display:flex;background:#fff;border:1px solid #d6d9de;border-radius:999px;padding:3px;gap:2px}
.segmentos button{border:0;background:transparent;border-radius:999px;padding:.4rem .7rem;font-size:.78rem;cursor:pointer;color:var(--tinta);white-space:nowrap}
.segmentos button.ativo{background:var(--tinta);color:#fff}
.busca{flex:1 1 180px;min-width:160px;padding:.55rem .9rem;border:1px solid #d6d9de;border-radius:999px;font-size:.9rem;outline:none;background:#fff}
.busca:focus{border-color:var(--azul)}

.lista{display:grid;gap:10px}
.convite{background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 1px 2px rgba(20,22,26,.06)}
.convite-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;font-weight:600;letter-spacing:.08em}
.lado{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);margin-left:8px}
.convite-acoes{display:flex;gap:6px}
.pessoas{display:flex;flex-wrap:wrap;gap:6px}
.pessoa{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:.38rem .7rem .38rem .55rem;font-size:.86rem;border:0;cursor:pointer;background:var(--pend-claro);color:#6b5a2f}
.pessoa::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pend)}
.pessoa.confirmado{background:var(--ok-claro);color:#1f5a38}.pessoa.confirmado::before{background:var(--ok)}
.pessoa.nao_vai{background:var(--nao-claro);color:#4b4f57;text-decoration:line-through}.pessoa.nao_vai::before{background:var(--nao)}
.pessoa .cat{font-size:.68rem;opacity:.7}
.convite-quando{font-size:.74rem;color:var(--cinza);margin-top:8px}
.vazio{color:var(--cinza);text-align:center;padding:30px 0}

.recentes{margin-top:26px}
.recentes h2{font-size:1.3rem;margin-bottom:8px}
.recentes ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.recentes li{background:#fff;border-radius:12px;padding:.6rem .8rem;font-size:.85rem;display:flex;justify-content:space-between;gap:10px}
.recentes time{color:var(--cinza);white-space:nowrap;font-size:.78rem}
.rodape{color:var(--cinza);font-size:.75rem;text-align:center;margin-top:26px}

/* folha de ações */
.folha{position:fixed;inset:0;background:rgba(20,22,26,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.folha[hidden]{display:none}
.folha-caixa{width:min(100%,480px);max-height:94dvh;overflow-y:auto;background:#fff;border-radius:22px 22px 0 0;padding:20px 18px max(18px,env(safe-area-inset-bottom))}
.folha-nome{font-family:var(--serif);font-size:1.5rem;margin:0}
.folha-meta{margin:.2rem 0 1rem;color:var(--cinza);font-size:.85rem}
.folha-acoes{display:grid;gap:8px;margin-bottom:14px}
.folha-acoes button{padding:.85rem;border:1px solid #d6d9de;border-radius:12px;background:#fff;font-size:.95rem;cursor:pointer}
.folha-acoes button.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.folha-acoes button.nao{background:var(--nao);border-color:var(--nao);color:#fff}
.folha-nome-editar{display:flex;gap:6px;margin-bottom:10px}
.folha-nome-editar input{flex:1;padding:.7rem .8rem;border:1px solid #d6d9de;border-radius:12px;font-size:.95rem;outline:none}
.folha-nome-editar button{padding:.7rem .9rem;border:1px solid #d6d9de;border-radius:12px;background:#fff;cursor:pointer;white-space:nowrap}
.folha-fechar{width:100%;padding:.7rem;border:0;background:transparent;color:var(--cinza);cursor:pointer;font-size:.9rem}

.aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:.6rem 1rem;border-radius:999px;font-size:.85rem;z-index:30;max-width:90vw}
.aviso[hidden]{display:none}
.pessoa{flex-direction:row;align-items:baseline}
.pessoa .pnome{font-weight:500}
.pessoa .pcod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;opacity:.75;letter-spacing:.04em}

/* contagem do buffet: inteira 1, meia 0,5, criança 0 — por categoria e por lado */
.buffet{background:#fff;border-radius:16px;padding:16px 16px 12px;box-shadow:0 1px 2px rgba(20,22,26,.06);margin-bottom:14px}
.buffet-topo{display:flex;align-items:flex-end;gap:14px;margin-bottom:10px}
.buffet-num{flex:none}
.buffet-num small{display:block;color:var(--cinza);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem;white-space:nowrap}
.buffet-num b{display:block;font-family:var(--serif);font-size:2.6rem;line-height:.9;font-weight:500;color:var(--azul);font-variant-numeric:lining-nums}
.buffet-topo p{margin:0;color:var(--cinza);font-size:.78rem;line-height:1.4}
.buffet-topo p b{color:var(--tinta);font-weight:600}
.buffet-tab{width:100%;border-collapse:collapse}
.buffet-tab th,.buffet-tab td{padding:.5rem .35rem;text-align:right;font-weight:400;vertical-align:baseline}
.buffet-tab th:first-child{text-align:left;padding-left:.2rem}
.buffet-tab thead th{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);font-weight:500;padding-bottom:.3rem}
.buffet-tab tbody tr{border-top:1px solid #efe9df;cursor:pointer;-webkit-tap-highlight-color:transparent}
.buffet-tab tbody tr:active,.buffet-tab tbody tr.ativo{background:var(--azul-claro)}
.buffet-tab tbody th{font-size:.92rem;font-weight:500}
.buffet-tab small{color:var(--cinza);font-size:.72rem;font-weight:400;margin-left:.2rem}
.buffet-tab td{font-family:var(--serif);font-size:1.2rem;font-variant-numeric:lining-nums tabular-nums;width:6.2rem}
.buffet-tab tfoot tr.total{border-top:1.5px solid var(--ouro)}
.buffet-tab tfoot tr.total th{font-size:.92rem;font-weight:600}
.buffet-tab tfoot tr.total td{font-weight:600;color:var(--azul)}
.buffet-tab tfoot tr.por-lado th,.buffet-tab tfoot tr.por-lado td{padding-top:.25rem;padding-bottom:.25rem}
.buffet-tab tfoot tr.por-lado th{padding-left:1rem;color:var(--cinza);font-size:.82rem;font-weight:400;white-space:nowrap}
.buffet-tab tfoot tr.por-lado td{font-size:1.02rem;color:var(--cinza)}
.buffet-nota{margin:.7rem 0 0;padding-top:.6rem;border-top:1px dashed #e6dfd3;font-size:.78rem;color:var(--cinza);line-height:1.4}
.buffet-nota b{color:var(--tinta);font-family:var(--serif);font-size:1rem;font-variant-numeric:lining-nums}
.chip-cat{border:0;border-radius:999px;background:var(--azul);color:#fff;padding:.5rem .85rem;font-size:.8rem;cursor:pointer;white-space:pre}
.chip-cat[hidden]{display:none}

/* folha: categoria da pessoa */
.folha-cat{margin:0 0 14px}
.folha-rotulo{margin:0 0 6px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.segmentos-cat{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.segmentos-cat button{padding:.7rem .4rem;border:1px solid #d6d9de;border-radius:12px;background:#fff;font-size:.9rem;cursor:pointer;color:var(--tinta)}
.segmentos-cat button small{display:block;font-size:.7rem;color:var(--cinza);margin-top:.15rem}
.segmentos-cat button.ativo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.segmentos-cat button.ativo small{color:rgba(255,255,255,.7)}