/* Cacau Vanilla | CRM Food Service: tokens e componentes comuns ao painel e ao portal */
:root{
  --cacao:#3c1e0f;--cacao-deep:#2b160d;--night:#1f0f07;--cacao-2:#5a3220;
  --cream:#f3eee5;--paper:#faf7f0;--card:#fffdf9;--sand:#e2d4bd;--sand-2:#efe6d6;
  --gold:#c9a46a;--gold-soft:#e6cfa4;--gold-deep:#a8823f;--olive:#696d45;--olive-soft:#e4e5d3;
  --ink:#3c291f;--muted:#7a6a5e;--faint:#a8998b;--line:rgba(60,30,15,.12);--line-2:rgba(60,30,15,.2);
  --ok:#5f6b3a;--ok-bg:#e8ead8;--warn:#9a6a1f;--warn-bg:#f5e8cf;--bad:#a4452c;--bad-bg:#f6dfd6;--info:#5a3220;--info-bg:#efe3d6;
  --display:'Cormorant Garamond',Georgia,serif;--body:'DM Sans',system-ui,sans-serif;
  --r:16px;--r-sm:10px;--shadow:0 1px 2px rgba(43,22,13,.05),0 8px 24px rgba(43,22,13,.06);--shadow-lg:0 24px 70px rgba(31,15,7,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.num{font-variant-numeric:tabular-nums lining-nums}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid transparent;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s,color .2s}
.btn svg{width:17px;height:17px;flex:none}
.btn:active{transform:translateY(1px)}
.btn.dark{background:var(--cacao);color:var(--cream)}.btn.dark:hover{background:var(--cacao-deep);box-shadow:0 8px 20px rgba(43,22,13,.25)}
.btn.gold{background:var(--gold);color:var(--night)}.btn.gold:hover{background:var(--gold-soft)}
.btn.line{border-color:var(--line-2);background:transparent}.btn.line:hover{border-color:var(--cacao);background:var(--card)}
.btn.soft{background:var(--sand-2);color:var(--cacao)}.btn.soft:hover{background:var(--sand)}
.btn.wa{background:#1f7a4d;color:#fff}.btn.wa:hover{background:#17663f;box-shadow:0 8px 20px rgba(23,102,63,.25)}
.btn.ghost{background:transparent;color:var(--muted);padding:0 10px}.btn.ghost:hover{color:var(--cacao);background:var(--sand-2)}
.btn.danger{color:var(--bad);border-color:rgba(164,69,44,.3);background:transparent}.btn.danger:hover{background:var(--bad-bg)}
.btn.sm{min-height:34px;padding:0 13px;font-size:13px}.btn.sm svg{width:15px;height:15px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.icon-btn{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--cacao)}
.icon-btn:hover{border-color:var(--cacao)}.icon-btn svg{width:18px;height:18px}

/* pílulas de status */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--sand-2);color:var(--cacao)}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.pill.plain::before{display:none}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}.pill.gold{background:#f3e5c8;color:#7d5c22}.pill.dark{background:var(--cacao);color:var(--cream)}
.pill.mute{background:#ece6dd;color:var(--muted)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--olive-soft);color:var(--olive)}

/* formulários */
.field{display:grid;gap:6px}
.field>span{font-size:12.5px;font-weight:600;color:var(--muted)}
.input,select.input,textarea.input{width:100%;min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);outline:none;transition:border-color .2s,box-shadow .2s}
textarea.input{min-height:120px;resize:vertical;line-height:1.55}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,164,106,.18)}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--sand-2);gap:2px}
.seg button{border:0;background:transparent;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--cacao);box-shadow:0 1px 3px rgba(43,22,13,.12)}
.toggle{position:relative;width:42px;height:24px;flex:none}
.toggle input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.toggle span{position:absolute;inset:0;border-radius:999px;background:var(--sand);transition:background .2s}
.toggle span::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.toggle input:checked+span{background:var(--olive)}.toggle input:checked+span::after{transform:translateX(18px)}

/* quantidade */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;background:var(--card);height:38px}
.qty button{width:36px;height:36px;border:0;background:transparent;border-radius:50%;cursor:pointer;font-size:18px;color:var(--cacao);display:grid;place-items:center}
.qty button:hover{background:var(--sand-2)}
.qty input{width:44px;border:0;background:transparent;text-align:center;font-weight:700;outline:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}

/* toast */
.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:grid;gap:8px;z-index:200;pointer-events:none}
.toast{background:var(--night);color:var(--cream);padding:12px 18px;border-radius:12px;font-size:14px;box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:center;animation:toast .35s var(--ease)}
.toast svg{width:18px;height:18px;color:var(--gold)}
.toast.erro{background:var(--bad)}
@keyframes toast{from{opacity:0;transform:translateY(10px)}}

/* progresso para o pedido mínimo */
.minbar{height:8px;border-radius:999px;background:var(--sand);overflow:hidden}
.minbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-deep));transition:width .4s var(--ease)}
.minbar.ok i{background:linear-gradient(90deg,#8a9256,var(--olive))}

.skeleton{background:linear-gradient(90deg,var(--sand-2),#f7f1e6,var(--sand-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}