/* ===== Base ===== */
:root {
  --brand: #e11d48;
  --brand-rgb: 225, 29, 72;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --sidebar-w: 268px;
}
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
.tiny { font-size: .72rem; }
.min-w-0 { min-width: 0; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-brand:hover, .btn-brand:focus { background: rgba(var(--brand-rgb), .88); border-color: transparent; color: #fff; }
.btn-outline-brand { border-color: rgba(var(--brand-rgb), .4); color: var(--brand); background: rgba(var(--brand-rgb), .05); font-weight: 600; }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
.text-brand { color: var(--brand) !important; }
.bg-brand-soft { background: rgba(var(--brand-rgb), .08) !important; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.auth-bg { background: radial-gradient(circle at 20% 10%, rgba(var(--brand-rgb), .12), transparent 40%), radial-gradient(circle at 90% 90%, rgba(15, 23, 42, .08), transparent 40%), #f8fafc; }
.brand-logo { width: 54px; height: 54px; border-radius: 16px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 10px 24px rgba(var(--brand-rgb), .35); }
.brand-logo.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 1rem; box-shadow: none; }

/* ===== Painel ===== */
.sidebar { width: var(--sidebar-w); background: #fff; border-right: 1px solid var(--line); }
@media (min-width: 992px) { .sidebar { position: fixed; inset: 0 auto 0 0; } .content { margin-left: var(--sidebar-w); } }
.sidebar-inner { display: flex; flex-direction: column; height: 100%; padding: 1rem; overflow-y: auto; }
.sidebar-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ink); text-decoration: none; font-size: 1.1rem; margin-bottom: 1rem; }
.rest-card { display: flex; gap: .65rem; align-items: center; padding: .6rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.rest-avatar { width: 38px; height: 38px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.rest-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rest-avatar.sm { width: 30px; height: 30px; border-radius: 50%; font-size: .8rem; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin: .9rem .6rem .25rem; }
.sidebar .nav-link { display: flex; align-items: center; gap: .65rem; color: #334155; font-size: .88rem; font-weight: 500; padding: .55rem .7rem; border-radius: 10px; }
.sidebar .nav-link i { font-size: 1.05rem; color: var(--muted); }
.sidebar .nav-link:hover { background: var(--bg); }
.sidebar .nav-link.active { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(var(--brand-rgb), .3); }
.sidebar .nav-link.active i { color: #fff; }
.nav-badge { background: #dcfce7; color: #15803d; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.nav-link.active .nav-badge { background: rgba(255, 255, 255, .25); color: #fff; }
.user-chip { display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: 12px; border: 1px solid var(--line); }
.topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.content-inner { padding: 1.5rem; max-width: 1280px; }
@media (max-width: 575px) { .content-inner { padding: 1rem; } }

.page-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.page-head p { color: var(--muted); margin: .2rem 0 0; font-size: .92rem; }

.card { border: 1px solid var(--line); border-radius: 16px; }
.card-soft { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem; height: 100%; }
.kpi .kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-bottom: .6rem; }
.kpi .kpi-val { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.kpi .kpi-lbl { color: var(--muted); font-size: .8rem; margin-top: .3rem; }
.hero-banner { border-radius: 20px; padding: 1.6rem; color: #fff; background: linear-gradient(120deg, var(--brand), #1e1b4b); position: relative; overflow: hidden; }
.hero-banner h2 { font-weight: 800; }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: #cbd5e1; }
.table > :not(caption) > * > * { padding: .75rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.thumb { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--bg); }
.chip-toggle .btn { border-radius: 999px; font-size: .8rem; }
.btn-check:checked + .btn-outline-secondary { background: rgba(var(--brand-rgb), .1); color: var(--brand); border-color: var(--brand); }

/* Chamados */
.call-card { border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 1rem; display: flex; gap: 1rem; align-items: center; animation: pop .35s ease; }
.call-card.pending { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .08); }
.call-card .table-no { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; background: var(--brand); color: #fff; flex-shrink: 0; }
.call-card.attending .table-no { background: #f59e0b; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* Editor de produto */
.phone-preview { width: 220px; aspect-ratio: 9/16; border-radius: 28px; border: 8px solid #0f172a; overflow: hidden; position: relative; background: #0f172a; margin: 0 auto; box-shadow: 0 20px 40px rgba(15, 23, 42, .25); }
.phone-preview img, .phone-preview video, .phone-preview iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.phone-preview .overlay { position: absolute; inset: auto 0 0 0; padding: 1rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.var-row { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .75rem; }

/* QR impressão */
.qr-card { border: 2px dashed var(--line); border-radius: 18px; padding: 1.2rem; text-align: center; background: #fff; break-inside: avoid; }
.qr-card .qr-box { display: inline-block; padding: 10px; background: #fff; border-radius: 12px; }
@media print {
  .no-print, .sidebar, .topbar { display: none !important; }
  .content { margin: 0 !important; }
  body { background: #fff; }
  .qr-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }

/* Roleta (avaliação) */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-input input { display: none; }
.star-input label { font-size: 1.6rem; color: #cbd5e1; cursor: pointer; line-height: 1; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #f59e0b; }
.nps-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.nps-scale input { display: none; }
.nps-scale label { text-align: center; padding: .45rem 0; border-radius: 8px; border: 1px solid var(--line); font-weight: 600; font-size: .85rem; cursor: pointer; }
.nps-scale input:checked + label { background: var(--brand); color: #fff; border-color: var(--brand); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 4px; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: livepulse 1.6s infinite; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.nav-pills .nav-link { color: #334155; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--brand); color: #fff; }
.nav-tabs .nav-link.active { color: var(--brand); font-weight: 600; }
.nav-tabs .nav-link { color: #475569; }
.dropdown-item:active { background: var(--brand); }

/* Avatar da marca em formato squircle (ícone de app) — usado no painel e nas páginas públicas */
:root { --squircle: polygon(100% 50%, 99.92% 68.84%, 99.69% 74.82%, 99.31% 79.12%, 98.77% 82.55%, 98.07% 85.43%, 97.20% 87.89%, 96.17% 90.03%, 94.94% 91.90%, 93.53% 93.53%, 91.90% 94.94%, 90.03% 96.17%, 87.89% 97.20%, 85.43% 98.07%, 82.55% 98.77%, 79.12% 99.31%, 74.82% 99.69%, 68.84% 99.92%, 50% 100%, 31.16% 99.92%, 25.18% 99.69%, 20.88% 99.31%, 17.45% 98.77%, 14.57% 98.07%, 12.11% 97.20%, 9.97% 96.17%, 8.10% 94.94%, 6.47% 93.53%, 5.06% 91.90%, 3.83% 90.03%, 2.80% 87.89%, 1.93% 85.43%, 1.23% 82.55%, 0.69% 79.12%, 0.31% 74.82%, 0.08% 68.84%, 0% 50%, 0.08% 31.16%, 0.31% 25.18%, 0.69% 20.88%, 1.23% 17.45%, 1.93% 14.57%, 2.80% 12.11%, 3.83% 9.97%, 5.06% 8.10%, 6.47% 6.47%, 8.10% 5.06%, 9.97% 3.83%, 12.11% 2.80%, 14.57% 1.93%, 17.45% 1.23%, 20.88% 0.69%, 25.18% 0.31%, 31.16% 0.08%, 50% 0%, 68.84% 0.08%, 74.82% 0.31%, 79.12% 0.69%, 82.55% 1.23%, 85.43% 1.93%, 87.89% 2.80%, 90.03% 3.83%, 91.90% 5.06%, 93.53% 6.47%, 94.94% 8.10%, 96.17% 9.97%, 97.20% 12.11%, 98.07% 14.57%, 98.77% 17.45%, 99.31% 20.88%, 99.69% 25.18%, 99.92% 31.16%); }
.pub-logo-shape { width: 100%; height: 100%; padding: 2px; clip-path: var(--squircle); background: color-mix(in srgb, var(--brand) 35%, #f9b444); }
.pub-logo-inner { width: 100%; height: 100%; clip-path: var(--squircle); background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 2.8rem; font-weight: 800; overflow: hidden; }
.pub-logo-inner img { width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* Roleta de prêmios (assets/js/wheel.js) */
.wheel2 { position: relative; width: min(300px, 82vw); aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .25)); }
.wheel2-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wheel2-rim { fill: #111827; stroke: color-mix(in srgb, var(--brand) 55%, #f59e0b); stroke-width: 4; }
.wheel2 .bulb { fill: #fde68a; }
.wheel2 .bulb.b1 { animation: bulb 1.2s steps(1) infinite; }
.wheel2 .bulb.b2 { animation: bulb 1.2s steps(1) infinite .6s; }
.wheel2.spinning .bulb.b1, .wheel2.spinning .bulb.b2 { animation-duration: .25s; }
.wheel2.spinning .bulb.b2 { animation-delay: .125s; }
@keyframes bulb { 0% { fill: #fde68a; filter: drop-shadow(0 0 4px #fbbf24); } 50% { fill: #78350f; filter: none; } }
.wheel2 .slice { stroke: none; }
.wheel2 .divider { stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.wheel2 .slice-label { font: 700 12px/1 "Inter", system-ui, sans-serif; letter-spacing: .01em; pointer-events: none; }
.wheel2-pointer { fill: #fff; stroke: #111827; stroke-width: 2.5; transform-origin: 160px 10px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.wheel2-pointer .ptr-dot { fill: var(--brand); stroke: none; }
.wheel2-pointer.kick { animation: kick .14s ease-out; }
@keyframes kick { 30% { transform: rotate(-16deg); } 100% { transform: rotate(0); } }
.wheel2-hub { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--brand) 55%, #fff), var(--brand) 60%, color-mix(in srgb, var(--brand) 70%, #000));
  color: #fff; font-weight: 900; font-size: clamp(.7rem, 3.4vw, .95rem); letter-spacing: .06em; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 -4px 8px rgba(0, 0, 0, .2);
  animation: hub-pulse 1.4s ease-in-out infinite; cursor: pointer; padding: 0; }
.wheel2-hub:disabled { animation: none; cursor: default; }
.wheel2.done .wheel2-hub span { visibility: hidden; }
@keyframes hub-pulse { 50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 10px rgba(var(--brand-rgb), .18), 0 6px 18px rgba(0, 0, 0, .35); } }
.wheel-stage { border-radius: 24px; padding: 1.4rem 1rem 1.2rem; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--brand) 30%, #1f2937), #0b1120 75%); color: #fff; }
.wheel-hint { font-size: .85rem; opacity: .8; }
.prize-ticket { position: relative; margin: 1rem auto 0; max-width: 300px; background: #fff; color: var(--ink); border-radius: 16px; padding: 1rem; border: 2px dashed color-mix(in srgb, var(--brand) 60%, #fff); animation: pop .35s ease; }
.prize-ticket::before, .prize-ticket::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #0b1120; transform: translateY(-50%); }
.prize-ticket::before { left: -11px; } .prize-ticket::after { right: -11px; }
.prize-ticket .code { font: 800 1.6rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--brand); letter-spacing: .08em; }
.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2000; }