/* ══════════════════════════════════════════════════════════
   MEU VUCAFOOD: COMPONENTES DO PAINEL
   Depende de tokens.css. Prefixo de classe `mv-`.
   Gatilho de JS e sempre classe `js-`, nunca a classe visual.
══════════════════════════════════════════════════════════ */

/* ── Reset curto ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--mv-fonte);
  font-size: var(--mv-t-base);
  line-height: var(--mv-altura-linha);
  color: var(--mv-texto);
  background: var(--mv-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--mv-marca-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p { margin: 0; }
img, svg { display: block; }
:focus-visible { outline: none; box-shadow: var(--mv-foco); border-radius: var(--mv-raio-sm); }

/* ── Tipografia ─────────────────────────────────────────── */
.mv-h1 { font-size: var(--mv-t-2xl); font-weight: var(--mv-peso-forte); line-height: var(--mv-altura-titulo); letter-spacing: -.01em; }
.mv-h2 { font-size: var(--mv-t-xl); font-weight: var(--mv-peso-forte); line-height: var(--mv-altura-titulo); }
.mv-h3 { font-size: var(--mv-t-lg); font-weight: var(--mv-peso-semi); line-height: 1.3; }
.mv-meta { font-size: var(--mv-t-sm); color: var(--mv-texto-suave); }
.mv-texto-2 { color: var(--mv-texto-2); }
.mv-num { font-variant-numeric: tabular-nums; }
.mv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* Textura de grain do VucaFood (banner de boas-vindas): usar em todo bloco vermelho cheio */
.mv-grain { position: relative; overflow: hidden; }
.mv-grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mv-grain > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════
   SHELL: sidebar fixa no desktop, barra inferior no celular
══════════════════════════════════════════════════════════ */
.mv-shell { min-height: 100%; display: flex; }

.mv-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: var(--mv-z-sidebar);
  width: var(--mv-sidebar-l);
  background: var(--mv-marca);
  color: #fff;
  display: flex; flex-direction: column;
  padding: var(--mv-e-4) var(--mv-e-3);
  gap: var(--mv-e-2);
}
.mv-sidebar__logo { display: flex; align-items: center; height: 44px; padding: 0 var(--mv-e-2); margin-bottom: var(--mv-e-3); }
.mv-sidebar__grupo { font-size: var(--mv-t-xs); font-weight: var(--mv-peso-semi); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); padding: var(--mv-e-4) var(--mv-e-2) var(--mv-e-1); }
.mv-nav { display: flex; flex-direction: column; gap: 2px; }
.mv-nav__item {
  display: flex; align-items: center; gap: var(--mv-e-3);
  height: 40px; padding: 0 var(--mv-e-3);
  border-radius: var(--mv-raio-sm);
  color: rgba(255,255,255,.88); font-weight: var(--mv-peso-medio);
  transition: background var(--mv-dur) var(--mv-ease), color var(--mv-dur) var(--mv-ease);
}
.mv-nav__item:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.mv-nav__item.is-ativo { background: #fff; color: var(--mv-marca-texto); font-weight: var(--mv-peso-semi); box-shadow: var(--mv-sombra-1); }
.mv-nav__item svg { width: 20px; height: 20px; flex: none; color: rgba(255,255,255,.8); }
.mv-nav__item.is-ativo svg { color: var(--mv-marca); }
.mv-nav__badge { margin-left: auto; }
.mv-sidebar .mv-badge--ok { background: rgba(255,255,255,.18); color: #fff; }
.mv-sidebar__rodape { margin-top: auto; border-top: 1px solid rgba(255,255,255,.2); padding-top: var(--mv-e-3); }

/* Conta (rodape da sidebar) */
.mv-conta { display: flex; align-items: center; gap: var(--mv-e-3); padding: var(--mv-e-2); border-radius: var(--mv-raio-sm); width: 100%; text-align: left; color: #fff; }
.mv-conta:hover { background: rgba(255,255,255,.14); }
.mv-conta__nome { font-weight: var(--mv-peso-semi); font-size: var(--mv-t-sm); line-height: 1.2; }
.mv-conta__plano { font-size: var(--mv-t-xs); color: rgba(255,255,255,.7); }
.mv-avatar { width: 36px; height: 36px; border-radius: var(--mv-raio-sm); background: #fff; color: var(--mv-marca-texto); display: grid; place-items: center; font-weight: var(--mv-peso-forte); font-size: var(--mv-t-sm); flex: none; overflow: hidden; }
.mv-avatar img { width: 100%; height: 100%; object-fit: cover; }

.mv-main { flex: 1; min-width: 0; margin-left: var(--mv-sidebar-l); display: flex; flex-direction: column; }

.mv-topbar {
  position: sticky; top: 0; z-index: var(--mv-z-topbar);
  height: var(--mv-topbar-a);
  background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--mv-borda);
  display: flex; align-items: center; gap: var(--mv-e-3);
  padding: 0 var(--mv-margem);
}
.mv-topbar__titulo { font-weight: var(--mv-peso-semi); font-size: var(--mv-t-md); }
.mv-topbar__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--mv-e-2); }
.mv-topbar__logo { display: none; }

.mv-conteudo { width: 100%; max-width: var(--mv-conteudo-max); margin: 0 auto; padding: var(--mv-e-6) var(--mv-margem) var(--mv-e-12); }

/* Cabecalho de pagina */
.mv-pagina { display: flex; align-items: flex-start; gap: var(--mv-e-4); margin-bottom: var(--mv-e-6); flex-wrap: wrap; }
.mv-pagina__texto { flex: 1; min-width: 240px; }
.mv-pagina__sub { color: var(--mv-texto-suave); margin-top: var(--mv-e-1); }
.mv-pagina__acoes { display: flex; gap: var(--mv-e-2); align-items: center; }

/* Mobile: sidebar vira barra inferior; topbar mostra a marca */
.mv-bottom-nav { display: none; }
@media (max-width: 899px) {
  :root { --mv-margem: 16px; }
  .mv-sidebar { display: none; }
  .mv-main { margin-left: 0; }
  .mv-topbar__logo { display: flex; }
  .mv-topbar__titulo { display: none; }
  .mv-conteudo { padding-bottom: calc(72px + var(--mv-e-6)); }
  .mv-bottom-nav {
    position: fixed; inset: auto 0 0 0; z-index: var(--mv-z-sidebar);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: 64px; padding-bottom: env(safe-area-inset-bottom);
    background: var(--mv-marca); border-top: 0; box-shadow: 0 -4px 16px rgba(24,24,27,.12);
  }
  .mv-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: var(--mv-peso-medio); color: rgba(255,255,255,.75); }
  .mv-bottom-nav__item svg { width: 22px; height: 22px; }
  .mv-bottom-nav__item.is-ativo { color: #fff; font-weight: var(--mv-peso-semi); }
  .mv-bottom-nav__item.is-ativo svg { color: #fff; }
  .mv-bottom-nav__item.is-ativo::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: #fff; }
  .mv-bottom-nav__item { position: relative; }
}

/* ══════════════════════════════════════════════════════════
   BOTOES
══════════════════════════════════════════════════════════ */
.mv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mv-e-2);
  height: var(--mv-controle-a); padding: 0 var(--mv-e-4);
  border-radius: var(--mv-raio-sm); border: 1px solid transparent;
  font-size: var(--mv-t-base); font-weight: var(--mv-peso-semi); line-height: 1; white-space: nowrap;
  transition: background var(--mv-dur) var(--mv-ease), border-color var(--mv-dur) var(--mv-ease), color var(--mv-dur) var(--mv-ease), transform var(--mv-dur) var(--mv-ease);
  text-decoration: none;
}
.mv-btn:hover { text-decoration: none; }
.mv-btn:active { transform: translateY(1px); }
.mv-btn svg { width: 18px; height: 18px; }
.mv-btn:disabled, .mv-btn.is-desabilitado { opacity: .5; cursor: not-allowed; transform: none; }

.mv-btn--primario { background: var(--mv-marca); color: var(--mv-texto-inverso); }
.mv-btn--primario:hover { background: var(--mv-marca-hover); }
.mv-btn--primario:active { background: var(--mv-marca-ativa); }

.mv-btn--secundario { background: var(--mv-superficie); color: var(--mv-texto); border-color: var(--mv-borda-forte); }
.mv-btn--secundario:hover { background: var(--mv-superficie-2); border-color: var(--mv-texto-fraco); }

.mv-btn--fantasma { background: transparent; color: var(--mv-texto-2); }
.mv-btn--fantasma:hover { background: var(--mv-superficie-2); color: var(--mv-texto); }

.mv-btn--perigo { background: var(--mv-superficie); color: var(--mv-erro); border-color: var(--mv-borda-forte); }
.mv-btn--perigo:hover { background: var(--mv-erro-fundo); border-color: var(--mv-erro); }

.mv-btn--sm { height: var(--mv-controle-a-sm); padding: 0 var(--mv-e-3); font-size: var(--mv-t-sm); }
.mv-btn--lg { height: var(--mv-controle-a-lg); padding: 0 var(--mv-e-6); font-size: var(--mv-t-md); }
.mv-btn--icone { width: var(--mv-controle-a); padding: 0; }
.mv-btn--icone.mv-btn--sm { width: var(--mv-controle-a-sm); }
.mv-btn--bloco { width: 100%; }

/* ══════════════════════════════════════════════════════════
   FORMULARIO
══════════════════════════════════════════════════════════ */
.mv-campo { display: flex; flex-direction: column; gap: 6px; }
.mv-campo__label { font-size: var(--mv-t-sm); font-weight: var(--mv-peso-semi); color: var(--mv-texto-2); }
.mv-campo__label small { font-weight: var(--mv-peso-regular); color: var(--mv-texto-suave); }
.mv-campo__ajuda { font-size: var(--mv-t-xs); color: var(--mv-texto-suave); }
.mv-campo__erro { font-size: var(--mv-t-xs); color: var(--mv-erro); }
.mv-campo.is-erro .mv-input { border-color: var(--mv-erro); }
.mv-campo.is-erro .mv-input:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .2); }

.mv-input {
  width: 100%; height: var(--mv-controle-a); padding: 0 var(--mv-e-3);
  background: var(--mv-superficie); border: 1px solid var(--mv-borda-forte); border-radius: var(--mv-raio-sm);
  font-size: var(--mv-t-md); color: var(--mv-texto);
  transition: border-color var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease);
}
.mv-input::placeholder { color: var(--mv-texto-fraco); }
.mv-input:hover { border-color: var(--mv-texto-fraco); }
.mv-input:focus { outline: none; border-color: var(--mv-marca); box-shadow: var(--mv-foco); }
.mv-input:disabled { background: var(--mv-superficie-2); color: var(--mv-texto-suave); cursor: not-allowed; }
textarea.mv-input { height: auto; min-height: 96px; padding: var(--mv-e-3); resize: vertical; line-height: var(--mv-altura-linha); }
select.mv-input { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

/* Input com icone (busca) */
.mv-input-icone { position: relative; }
.mv-input-icone svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mv-texto-suave); pointer-events: none; }
.mv-input-icone .mv-input { padding-left: 38px; }

/* Prefixo (R$) */
.mv-input-grupo { display: flex; }
.mv-input-grupo__prefixo { display: flex; align-items: center; padding: 0 var(--mv-e-3); background: var(--mv-superficie-2); border: 1px solid var(--mv-borda-forte); border-right: 0; border-radius: var(--mv-raio-sm) 0 0 var(--mv-raio-sm); color: var(--mv-texto-suave); font-size: var(--mv-t-sm); }
.mv-input-grupo .mv-input { border-radius: 0 var(--mv-raio-sm) var(--mv-raio-sm) 0; }

/* Switch (ativo/pausado) */
.mv-switch { position: relative; display: inline-flex; align-items: center; gap: var(--mv-e-2); cursor: pointer; user-select: none; }
.mv-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mv-switch__trilho { width: 40px; height: 24px; border-radius: var(--mv-raio-pill); background: var(--mv-borda-forte); position: relative; transition: background var(--mv-dur) var(--mv-ease); flex: none; }
.mv-switch__trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--mv-sombra-1); transition: transform var(--mv-dur) var(--mv-ease); }
.mv-switch input:checked + .mv-switch__trilho { background: var(--mv-ok); }
.mv-switch input:checked + .mv-switch__trilho::after { transform: translateX(16px); }
.mv-switch input:focus-visible + .mv-switch__trilho { box-shadow: var(--mv-foco); }
.mv-switch__texto { font-size: var(--mv-t-sm); color: var(--mv-texto-2); }

/* Grade de formulario */
.mv-form { display: grid; gap: var(--mv-e-4); }
.mv-form--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 599px) { .mv-form--2 { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   CARD, TABELA, LISTA
══════════════════════════════════════════════════════════ */
.mv-card { background: var(--mv-superficie); border: 1px solid var(--mv-borda); border-radius: var(--mv-raio-md); box-shadow: var(--mv-sombra-1); }
.mv-card__cabecalho { display: flex; align-items: center; gap: var(--mv-e-3); padding: var(--mv-e-4) var(--mv-e-5); border-bottom: 1px solid var(--mv-borda); }
.mv-card__cabecalho .mv-h3 { flex: 1; }
.mv-card__corpo { padding: var(--mv-e-5); }
.mv-card__rodape { padding: var(--mv-e-3) var(--mv-e-5); border-top: 1px solid var(--mv-borda); display: flex; justify-content: flex-end; gap: var(--mv-e-2); background: var(--mv-superficie-2); border-radius: 0 0 var(--mv-raio-md) var(--mv-raio-md); }

/* Barra de ferramentas da lista (busca + filtros) */
.mv-barra { display: flex; gap: var(--mv-e-2); align-items: center; padding: var(--mv-e-3) var(--mv-e-4); border-bottom: 1px solid var(--mv-borda); flex-wrap: wrap; }
.mv-barra .mv-input-icone { flex: 1; min-width: 200px; }
.mv-barra select.mv-input { width: auto; }

/* Tabela */
.mv-tabela-wrap { overflow-x: auto; }
.mv-tabela { width: 100%; border-collapse: collapse; font-size: var(--mv-t-base); }
.mv-tabela th { text-align: left; font-size: var(--mv-t-xs); font-weight: var(--mv-peso-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--mv-texto-suave); background: var(--mv-superficie-2); padding: var(--mv-e-3) var(--mv-e-4); border-bottom: 1px solid var(--mv-borda); white-space: nowrap; }
.mv-tabela td { padding: var(--mv-e-3) var(--mv-e-4); border-bottom: 1px solid var(--mv-borda); vertical-align: middle; }
.mv-tabela tr:last-child td { border-bottom: 0; }
.mv-tabela tbody tr:hover { background: var(--mv-marca-clara); }
.mv-tabela th.is-num, .mv-tabela td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.mv-tabela td.is-acoes { text-align: right; white-space: nowrap; }
.mv-tabela .mv-arrastar { color: var(--mv-texto-fraco); cursor: grab; width: 20px; }

/* Produto na tabela: foto + nome + descricao */
.mv-produto { display: flex; align-items: center; gap: var(--mv-e-3); min-width: 0; }
.mv-produto__foto { width: 48px; height: 48px; border-radius: var(--mv-raio-sm); background: var(--mv-superficie-2); border: 1px solid var(--mv-borda); object-fit: cover; flex: none; display: grid; place-items: center; color: var(--mv-texto-fraco); }
.mv-produto__foto svg { width: 20px; height: 20px; }
.mv-produto__nome { font-weight: var(--mv-peso-semi); line-height: 1.25; }
.mv-produto__desc { font-size: var(--mv-t-sm); color: var(--mv-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }

/* Categoria (agrupador na lista) */
.mv-categoria { display: flex; align-items: center; gap: var(--mv-e-3); padding: var(--mv-e-3) var(--mv-e-4); background: var(--mv-superficie-2); border-bottom: 1px solid var(--mv-borda); }
.mv-categoria__nome { font-weight: var(--mv-peso-forte); font-size: var(--mv-t-md); }
.mv-categoria__qtd { font-size: var(--mv-t-sm); color: var(--mv-texto-suave); white-space: nowrap; }
.mv-categoria__acoes { margin-left: auto; display: flex; gap: var(--mv-e-1); }

/* Lista mobile (a tabela vira cards abaixo de 700px) */
@media (max-width: 699px) {
  .mv-tabela thead { display: none; }
  .mv-tabela, .mv-tabela tbody, .mv-tabela tr, .mv-tabela td { display: block; }
  .mv-tabela tr { display: grid; grid-template-columns: 1fr auto; gap: var(--mv-e-1) var(--mv-e-3); padding: var(--mv-e-3) var(--mv-e-4); border-bottom: 1px solid var(--mv-borda); }
  .mv-tabela td { padding: 0; border: 0; }
  .mv-tabela td.is-principal { grid-column: 1 / -1; }
  .mv-tabela td.is-oculto-mobile { display: none; }
  .mv-tabela td.is-num { text-align: left; font-weight: var(--mv-peso-semi); }
  .mv-tabela td.is-acoes { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .mv-produto__desc { white-space: normal; max-width: none; }
}

/* ══════════════════════════════════════════════════════════
   BADGE, CHIP, TABS, ESTADO VAZIO, TOAST, MODAL
══════════════════════════════════════════════════════════ */
.mv-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--mv-raio-pill); font-size: var(--mv-t-xs); font-weight: var(--mv-peso-semi); white-space: nowrap; }
.mv-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mv-badge--ok { background: var(--mv-ok-fundo); color: var(--mv-ok); }
.mv-badge--alerta { background: var(--mv-alerta-fundo); color: var(--mv-alerta); }
.mv-badge--erro { background: var(--mv-erro-fundo); color: var(--mv-erro); }
.mv-badge--info { background: var(--mv-info-fundo); color: var(--mv-info); }
.mv-badge--neutro { background: var(--mv-superficie-2); color: var(--mv-texto-suave); border: 1px solid var(--mv-borda); }
.mv-badge--marca { background: var(--mv-marca-suave); color: var(--mv-marca-texto); }
.mv-badge--sem-ponto::before { display: none; }
.mv-badge--contador { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; background: var(--mv-marca); color: #fff; }

.mv-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--mv-raio-pill); border: 1px solid var(--mv-borda-forte); background: var(--mv-superficie); font-size: var(--mv-t-sm); font-weight: var(--mv-peso-medio); color: var(--mv-texto-2); white-space: nowrap; }
.mv-chip:hover { border-color: var(--mv-texto-fraco); }
.mv-chip.is-ativo { background: var(--mv-marca-suave); border-color: var(--mv-marca); color: var(--mv-marca-texto); }
.mv-chips { display: flex; gap: var(--mv-e-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mv-chips::-webkit-scrollbar { display: none; }

.mv-tabs { display: flex; gap: var(--mv-e-1); border-bottom: 1px solid var(--mv-borda); }
.mv-tab { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: var(--mv-peso-medio); color: var(--mv-texto-suave); }
.mv-tab:hover { color: var(--mv-texto); }
.mv-tab.is-ativo { color: var(--mv-marca-texto); border-color: var(--mv-marca); font-weight: var(--mv-peso-semi); }

.mv-vazio { text-align: center; padding: var(--mv-e-12) var(--mv-e-6); color: var(--mv-texto-suave); }
.mv-vazio svg { width: 48px; height: 48px; margin: 0 auto var(--mv-e-4); color: var(--mv-texto-fraco); }
.mv-vazio__titulo { font-weight: var(--mv-peso-semi); color: var(--mv-texto); font-size: var(--mv-t-lg); margin-bottom: var(--mv-e-1); }
.mv-vazio .mv-btn { margin-top: var(--mv-e-5); }

/* Aviso em bloco (ex.: cardapio ainda nao publicado) */
.mv-aviso { display: flex; gap: var(--mv-e-3); padding: var(--mv-e-3) var(--mv-e-4); border-radius: var(--mv-raio-md); border: 1px solid; font-size: var(--mv-t-sm); }
.mv-aviso svg { width: 20px; height: 20px; flex: none; }
.mv-aviso--alerta { background: var(--mv-alerta-fundo); border-color: #f1dca3; color: var(--mv-alerta); }
.mv-aviso--info { background: var(--mv-info-fundo); border-color: #c7d9fb; color: var(--mv-info); }
.mv-aviso--erro { background: var(--mv-erro-fundo); border-color: #f3c3bf; color: var(--mv-erro); }
.mv-aviso strong { font-weight: var(--mv-peso-semi); }

.mv-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--mv-z-toast); display: flex; align-items: center; gap: var(--mv-e-3); padding: 12px 16px; border-radius: var(--mv-raio-md); background: var(--mv-preto); color: #fff; font-size: var(--mv-t-sm); font-weight: var(--mv-peso-medio); box-shadow: var(--mv-sombra-3); max-width: calc(100vw - 32px); }
.mv-toast svg { width: 18px; height: 18px; color: #4ade80; }
@media (max-width: 899px) { .mv-toast { bottom: calc(64px + 16px + env(safe-area-inset-bottom)); } }

.mv-overlay { position: fixed; inset: 0; z-index: var(--mv-z-overlay); background: rgba(11, 11, 13, .45); display: flex; align-items: center; justify-content: center; padding: var(--mv-e-4); }
.mv-modal { position: relative; z-index: var(--mv-z-modal); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--mv-superficie); border-radius: var(--mv-raio-md); box-shadow: var(--mv-sombra-3); }
.mv-modal__cabecalho { display: flex; align-items: center; gap: var(--mv-e-3); padding: var(--mv-e-4) var(--mv-e-5); border-bottom: 1px solid var(--mv-borda); }
.mv-modal__cabecalho .mv-h3 { flex: 1; }
.mv-modal__corpo { padding: var(--mv-e-5); overflow-y: auto; }
.mv-modal__rodape { padding: var(--mv-e-3) var(--mv-e-5); border-top: 1px solid var(--mv-borda); display: flex; justify-content: flex-end; gap: var(--mv-e-2); }
@media (max-width: 599px) {
  .mv-overlay { align-items: flex-end; padding: 0; }
  .mv-modal { max-width: none; max-height: 92vh; border-radius: var(--mv-raio-lg) var(--mv-raio-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .mv-modal__rodape { flex-direction: column-reverse; }
  .mv-modal__rodape .mv-btn { width: 100%; height: var(--mv-controle-a-lg); }
}

/* Dropdown de acoes (⋯) */
.mv-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px; background: var(--mv-superficie); border: 1px solid var(--mv-borda); border-radius: var(--mv-raio-md); box-shadow: var(--mv-sombra-2); padding: 6px; z-index: var(--mv-z-modal); }
.mv-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--mv-raio-sm); font-size: var(--mv-t-sm); color: var(--mv-texto-2); text-align: left; }
.mv-menu__item:hover { background: var(--mv-superficie-2); color: var(--mv-texto); }
.mv-menu__item.is-perigo { color: var(--mv-erro); }
.mv-menu__item svg { width: 16px; height: 16px; }

/* Utilitarios */
.mv-linha { display: flex; align-items: center; gap: var(--mv-e-2); }
.mv-espaco { flex: 1; }
.mv-mt-4 { margin-top: var(--mv-e-4); }
.mv-mt-6 { margin-top: var(--mv-e-6); }
.mv-oculto-mobile { }
@media (max-width: 899px) { .mv-oculto-mobile { display: none !important; } }
@media (min-width: 900px) { .mv-so-mobile { display: none !important; } }

/* ══════════════════════════════════════════════════════════
   A CARA DO VUCAFOOD: icones chapados (sprite assets/img/icones.svg),
   saudacao, tile de categoria, cards de resumo
══════════════════════════════════════════════════════════ */
.mv-ico { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -.12em; flex: none; }
.mv-saudacao { display: flex; align-items: center; gap: var(--mv-e-2); }
.mv-saudacao__aceno { font-size: .85em; color: var(--mv-marca); transform-origin: 30% 80%; animation: mvAceno 2.4s ease-in-out 1; }
@keyframes mvAceno { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-6deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-3deg); } 75% { transform: rotate(6deg); } }
.mv-tile { width: 32px; height: 32px; border-radius: var(--mv-raio-sm); background: var(--mv-marca-suave); color: var(--mv-marca); display: grid; place-items: center; font-size: 18px; flex: none; }
.mv-tile--lg { width: 64px; height: 64px; border-radius: var(--mv-raio-md); font-size: 32px; margin: 0 auto var(--mv-e-4); background: var(--mv-superficie-2); color: var(--mv-texto-fraco); }
.mv-resumo-card { position: relative; overflow: hidden; }
.mv-resumo-card__ico { position: absolute; right: 14px; top: 14px; font-size: 26px; color: var(--mv-texto-fraco); }
.mv-resumo-card--marca { background: var(--mv-marca); color: #fff; border-color: var(--mv-marca); }
.mv-resumo-card--marca .mv-meta { color: rgba(255,255,255,.8); }
.mv-resumo-card--marca .mv-resumo-card__ico { color: rgba(255,255,255,.85); }