/* =========================================================
   MONTABIZ — Sistema visual único (3 personalidades)
   -----------------------------------------------------------
   Camada compartilhada por Delivery (/c/), Agendamento (/a/),
   Serviços Profissionais (/p/) e pelo painel do assinante.

   Regra de convivência: este arquivo declara SOMENTE custom
   properties (prefixo --mb-), ajustes globais de elemento e
   utilitários com prefixo .mb-. Nenhum nome de componente já
   usado por cardapio.css, profissional.css ou painel.css é
   redefinido aqui — carregar o sistema nunca sobrescreve uma
   tela existente, só dá vocabulário para ela.

   Ordem de carga obrigatória:
   1) css/sistema.css
   2) css/da-tela.css
   3) <style> do tema da conta (loja_tema_css / _painel_css)

   A personalidade entra por data-mb no <html>:
   delivery | agendamento | servicos | admin
   ========================================================= */

:root{
  /* ---- Movimento ---- */
  --mb-ease:cubic-bezier(.22,.61,.36,1);
  --mb-ease-saida:cubic-bezier(.16,1,.3,1);
  --mb-ease-suave:cubic-bezier(.4,0,.2,1);
  --mb-t-rapida:.14s;
  --mb-t:.22s;
  --mb-t-lenta:.36s;

  /* ---- Tinta da sombra: cada modalidade recolore abaixo ----
     Sombra premium não é preta: é a cor do ambiente, escurecida. */
  --mb-sombra-rgb:38,26,16;

  /* ---- Elevação em camadas ----
     Duas camadas por nível (contato curto + difusão longa) é o
     que separa "cartão desenhado" de "cartão apoiado". */
  --mb-e1:0 1px 2px rgba(var(--mb-sombra-rgb),.05),
          0 2px 6px -2px rgba(var(--mb-sombra-rgb),.06);
  --mb-e2:0 1px 2px rgba(var(--mb-sombra-rgb),.05),
          0 8px 20px -8px rgba(var(--mb-sombra-rgb),.12);
  --mb-e3:0 1px 2px rgba(var(--mb-sombra-rgb),.06),
          0 16px 34px -14px rgba(var(--mb-sombra-rgb),.18);
  --mb-e4:0 2px 4px rgba(var(--mb-sombra-rgb),.07),
          0 30px 64px -24px rgba(var(--mb-sombra-rgb),.28);
  --mb-e5:0 3px 6px rgba(var(--mb-sombra-rgb),.09),
          0 48px 96px -32px rgba(var(--mb-sombra-rgb),.36);

  /* Fio de luz no topo da superfície: acabamento de peça física. */
  --mb-fio:inset 0 1px 0 rgba(255,255,255,.72);
  --mb-fio-escuro:inset 0 1px 0 rgba(255,255,255,.10);

  /* ---- Raios ---- */
  --mb-r-xs:8px; --mb-r-sm:11px; --mb-r-md:14px;
  --mb-r-lg:18px; --mb-r-xl:22px; --mb-r-2xl:28px;
  --mb-r-pill:999px;

  /* ---- Tipografia ---- */
  --mb-ls-titulo:-.022em;
  --mb-ls-rotulo:.14em;
  --mb-medida:68ch;

  /* ---- Toque e foco ---- */
  --mb-toque:44px;
  --mb-foco-largura:3px;
  --mb-foco-recuo:2px;

  /* ---- Acento da modalidade (a conta sobrescreve via --loja) ---- */
  --mb-acento:#ef4b12;
  --mb-acento-escuro:#c93c07;
}

/* =========================================================
   PERSONALIDADES
   Mesma gramática, sotaques diferentes. O que muda é a
   temperatura da sombra, a generosidade do raio e o ritmo
   da animação — nunca a estrutura.
   ========================================================= */

/* Delivery: apetite. Sombra quente, cantos generosos, resposta rápida. */
[data-mb="delivery"]{
  --mb-sombra-rgb:54,31,14;
  --mb-r-cartao:var(--mb-r-xl);
  --mb-t:.20s;
  --mb-superficie-brilho:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,0) 62%);
}

/* Agendamento: serenidade. Sombra fria, cantos calmos, resposta suave. */
[data-mb="agendamento"]{
  --mb-sombra-rgb:26,36,50;
  --mb-r-cartao:var(--mb-r-lg);
  --mb-t:.24s;
  --mb-ease:cubic-bezier(.33,.9,.35,1);
  --mb-superficie-brilho:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,0) 58%);
}

/* Serviços: credibilidade. Sombra neutra profunda, cantos sóbrios. */
[data-mb="servicos"]{
  --mb-sombra-rgb:20,26,33;
  --mb-r-cartao:var(--mb-r-md);
  --mb-t:.18s;
  --mb-superficie-brilho:none;
}

/* Painel do ADM: neutro, sem sotaque comercial. */
[data-mb="admin"]{
  --mb-sombra-rgb:32,28,26;
  --mb-r-cartao:var(--mb-r-lg);
}

/* =========================================================
   AJUSTES GLOBAIS
   Valem para qualquer tela que carregue o sistema.
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}

/* Texto equilibrado: título não quebra deixando uma palavra órfã,
   parágrafo não termina com linha de uma sílaba. Progressivo — quem
   não suporta simplesmente ignora. */
h1,h2,h3,.mb-equilibrio{text-wrap:balance}
p,li,.mb-fluido{text-wrap:pretty}

/* Números de preço, horário e código sempre alinhados na vertical. */
.mb-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

::selection{
  background:color-mix(in srgb,var(--loja,var(--mb-acento)) 22%,transparent);
  color:inherit;
}

/* Barra de rolagem discreta, no tom da conta. */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--loja,var(--mb-acento)) 30%,transparent) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--loja,var(--mb-acento)) 26%,transparent);
  border-radius:var(--mb-r-pill);
  border:2px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--loja,var(--mb-acento)) 42%,transparent);background-clip:content-box}

/* Imagem sem “pulo” de layout enquanto carrega. */
img{background-color:color-mix(in srgb,currentColor 5%,transparent)}

/* =========================================================
   UTILITÁRIOS DO SISTEMA (prefixo .mb-)
   ========================================================= */

/* Esqueleto de carregamento — usado no lugar de imagem em branco. */
.mb-sk{
  position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--mb-acento) 5%,#f1ece7);
}
.mb-sk::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  animation:mb-brilho 1.35s var(--mb-ease-suave) infinite;
}
@keyframes mb-brilho{100%{transform:translateX(100%)}}

/* Realce sutil que dá volume a uma superfície branca. */
.mb-superficie{box-shadow:var(--mb-e2),var(--mb-fio)}
.mb-superficie--alta{box-shadow:var(--mb-e4),var(--mb-fio)}

/* Alvo de toque mínimo garantido sem mexer no desenho. */
.mb-toque{min-height:var(--mb-toque);min-width:var(--mb-toque)}

/* Rótulo em versalete — abre seção sem competir com o título. */
.mb-rotulo{
  font-size:11px;font-weight:800;line-height:1;
  letter-spacing:var(--mb-ls-rotulo);text-transform:uppercase;
  color:var(--suave,var(--tinta-fraca,#7b6a5c));
}

/* Só para leitor de tela. */
.mb-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

/* Quem pediu menos movimento recebe a interface inteira parada.
   Vale para as 3 vitrines e para o painel de uma vez só. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .mb-sk::after{display:none}
}

/* Contraste alto: some com efeito e volta a borda sólida. */
@media (prefers-contrast:more){
  .mb-superficie,.mb-superficie--alta{box-shadow:none;outline:1px solid currentColor;outline-offset:-1px}
}

/* Impressão: papel não tem sombra nem fundo colorido. */
@media print{
  *{box-shadow:none!important;text-shadow:none!important}
  .mb-sk::after{display:none}
}


/* Navegação por teclado e foco previsível. */
.skip-link{position:fixed;left:12px;top:12px;z-index:99999;transform:translateY(-180%);background:#111;color:#fff;padding:10px 14px;border-radius:10px;font-weight:800;text-decoration:none;box-shadow:0 8px 25px rgba(0,0,0,.22)}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--loja,var(--mb-acento,#ef4b12)) 72%,#000);outline-offset:3px}
[aria-current="page"]{text-decoration-thickness:2px}
@media (max-width:640px){button,.btn,input,select,textarea{min-height:44px}.topo__acoes .btn{min-height:40px}}


/* =========================================================
   V026.4 — contrato responsivo compartilhado
   ========================================================= */
html,body{max-width:100%;min-width:0}
body{overflow-wrap:break-word}
img,svg,video,canvas,iframe{max-width:100%}
input,select,textarea,button{max-width:100%}
:where(main,section,article,aside,header,footer,nav,form,fieldset,div){min-width:0}
@supports (width:100dvw){.mb-vw{max-width:100dvw}}
@media(max-width:820px){
  :where(input,select,textarea){font-size:16px}
  :where(button,a,input,select,summary){touch-action:manipulation}
}
