/* =========================================================
   Administração — Cardápio Jangada
   Mesma identidade "Sea Glass" da tela do cliente: vidro fosco,
   fundo em malha de gradientes e micro-interações com mola.
   ========================================================= */
:root {
  --deep: #0B3D4C; --ocean: #1391AB; --aqua: #3FC7D4;
  --coral: #FF7E67; --coral-dk: #E85F45;
  --salt: #EEF5F5; --sand: #E9E0D3;
  --ink: #0F2830; --ink-soft: #5C777F;
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .84);
  --glass-br: rgba(255, 255, 255, .55);
  --linha: rgba(11, 61, 76, .10);
  --ok: #15956B; --perigo: #E5484D;
  --r-lg: 22px; --r-md: 16px; --r-sm: 11px;
  --sh-1: 0 2px 10px rgba(11, 61, 76, .05);
  --sh-2: 0 10px 30px -8px rgba(11, 61, 76, .16);
  --sh-3: 0 26px 60px -18px rgba(11, 61, 76, .32);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: 'Outfit', system-ui, -apple-system, sans-serif;
  --mono: 'Space Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.6;
  background-color: var(--salt);
  background-image:
    radial-gradient(at 6% 2%, rgba(63, 199, 212, .20) 0px, transparent 44%),
    radial-gradient(at 94% 10%, rgba(255, 126, 103, .14) 0px, transparent 42%),
    radial-gradient(at 80% 92%, rgba(19, 145, 171, .14) 0px, transparent 46%);
  background-attachment: fixed;
  min-height: 100vh;
}
::selection { background: var(--coral); color: #fff; }
.oculto { display: none !important; }
[hidden] { display: none !important; }
.app { min-height: 100vh; }

/* -------------------------------- Login -------------------------------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box {
  width: 100%; max-width: 380px; padding: 40px 32px; text-align: center;
  background: var(--glass-strong); border: 1px solid var(--glass-br); border-radius: 26px;
  backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--sh-3);
}
/* O logo é branco: fica sobre uma placa escura, preservando a vela laranja */
.login-logo {
  display: block; width: 168px; max-width: 76%; height: auto; margin: 0 auto 24px;
  padding: 18px 22px; border-radius: 18px; box-sizing: content-box;
  background: linear-gradient(140deg, #072B37, var(--deep) 62%, var(--ocean));
  box-shadow: var(--sh-2);
}
.login-box h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--deep); }
.login-box p { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 24px; }
.login-box input {
  width: 100%; padding: 14px 18px; margin-bottom: 12px; border-radius: 999px;
  border: 1px solid var(--glass-br); background: rgba(255, 255, 255, .8);
  font: inherit; font-size: 15px; color: var(--ink); outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.login-box input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(63, 199, 212, .18); }
.login-box button {
  width: 100%; padding: 14px; border: none; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--deep), var(--ocean));
  box-shadow: 0 10px 24px -8px rgba(19, 145, 171, .7);
  transition: transform .3s var(--spring), box-shadow .3s;
}
.login-box button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(19, 145, 171, .8); }
.login-erro { display: block; margin-top: 12px; font-size: 13px; color: var(--perigo); min-height: 18px; }

/* -------------------------------- Topo -------------------------------- */
/* Cabeçalho + abas num só bloco fixo: nada de `top` calculado à mão, e o
   conteúdo da página nunca aparece por baixo das abas ao rolar. */
.topo-fixo { position: sticky; top: 0; z-index: 60; }
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; color: #fff;
  background: linear-gradient(140deg, #072B37, var(--deep) 62%, var(--ocean));
}
.topo-esq { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topo-logo { width: 104px; height: auto; flex: 0 0 auto; }
.topo-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topo-txt strong { font-size: 15px; font-weight: 700; }
.topo-txt small { font-size: 11.5px; opacity: .7; }
.topo-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.selo-pendente {
  padding: 5px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  background: rgba(255, 193, 84, .2); color: #FFD489; border: 1px solid rgba(255, 193, 84, .45);
}

/* -------------------------------- Botões -------------------------------- */
.btn {
  padding: 9px 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .3s var(--spring);
}
.topo .btn-ghost { color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); }
.topo .btn-ghost:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-ghost { color: var(--deep); background: rgba(255, 255, 255, .8); border-color: var(--glass-br); box-shadow: var(--sh-1); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn-primario {
  color: #fff; background: linear-gradient(135deg, var(--coral), var(--coral-dk));
  box-shadow: 0 8px 22px -6px rgba(255, 126, 103, .65);
}
.btn-primario:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(255, 126, 103, .8); }
.btn-publicar { color: #fff; background: linear-gradient(135deg, var(--coral), var(--coral-dk)); box-shadow: 0 8px 22px -8px rgba(255, 126, 103, .8); }
.btn-publicar:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

/* -------------------------------- Abas -------------------------------- */
/* A barra ocupa a largura toda (fundo opaco) e as abas ficam alinhadas ao conteúdo */
.abas-barra {
  background: rgba(238, 245, 245, .94); backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--linha); box-shadow: 0 10px 26px -22px rgba(11, 61, 76, .9);
}
.abas {
  display: flex; gap: 6px; padding: 10px 24px 0; max-width: 1180px; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  padding: 10px 20px; border: none; border-radius: 999px 999px 0 0; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-soft);
  background: transparent; transition: all .28s var(--ease);
}
.aba:hover { color: var(--deep); background: rgba(255, 255, 255, .5); }
.aba.ativo { color: var(--deep); background: var(--glass-strong); box-shadow: 0 -4px 16px -10px rgba(11, 61, 76, .5); }

/* -------------------------------- Conteúdo -------------------------------- */
.conteudo { max-width: 1180px; margin: 0 auto; padding: 20px 24px 60px; }
.barra-acoes {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px; margin-bottom: 12px; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--glass-br);
  backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--sh-1);
}
.barra-acoes > input[type="search"] {
  flex: 1; min-width: 200px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--glass-br); background: rgba(255, 255, 255, .82);
  font: inherit; font-size: 14.5px; color: var(--ink); outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.barra-acoes > input[type="search"]:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(63, 199, 212, .16); }
.barra-botoes { display: flex; gap: 8px; }

/* Filtro de loja: só nas abas cujo conteúdo é de uma loja */
.filtro-loja {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .82); border: 1px solid var(--glass-br);
}
.filtro-loja > span { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.filtro-loja select {
  border: none; background: transparent; font: inherit; font-weight: 600; font-size: 13.5px;
  color: var(--deep); cursor: pointer; outline: none; padding: 5px 2px;
}

.dica-aba {
  margin: 0 0 18px; padding: 11px 18px; border-radius: var(--r-md);
  font-size: 12.5px; color: var(--ink-soft);
  background: rgba(63, 199, 212, .10); border: 1px solid rgba(63, 199, 212, .28);
}
.dica-aba kbd {
  font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--linha); color: var(--deep);
}
.dica-aba strong { color: var(--deep); }

.lista { display: flex; flex-direction: column; gap: 16px; }
.linhas { display: flex; flex-direction: column; gap: 9px; }
.vazio { padding: 56px 20px; text-align: center; color: var(--ink-soft); font-size: 14.5px; }

/* -------------------------------- Linha genérica de listagem -------------------------------- */
.linha {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .82); border: 1px solid var(--glass-br); box-shadow: var(--sh-1);
  transition: transform .28s var(--spring), box-shadow .28s, border-color .25s, opacity .25s;
}
.linha:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--aqua); }
/* Item desligado fica bem apagado: dá para ver de longe o que saiu do cardápio */
.linha.inativo { opacity: .42; background: rgba(255, 255, 255, .5); }
.linha.inativo:hover { opacity: .85; }

.linha-thumb {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 10px; overflow: hidden;
  background: var(--sand); color: var(--deep); font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.linha-thumb.larga { width: 88px; height: 52px; }
.linha-thumb.icone { background: rgba(19, 145, 171, .1); color: var(--ocean); font-size: 20px; }
.linha-thumb img { width: 100%; height: 100%; object-fit: cover; }
.linha-thumb .ic-img { width: 22px; height: 22px; }
.thumb-vazia { opacity: .45; }

.linha-avatar {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; letter-spacing: .04em;
  background: linear-gradient(140deg, var(--deep), var(--ocean));
}

.linha-corpo { flex: 1; min-width: 0; }
.linha-nome {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.linha-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-soft);
}
.linha-meta .sep { opacity: .45; }
.linha-meta code, .linha-nome code {
  font-family: var(--mono); font-size: 10px; padding: 1px 7px; border-radius: 5px;
  background: rgba(19, 145, 171, .1); color: var(--deep);
}
.linha-meta code.alerta { background: rgba(229, 72, 77, .13); color: var(--perigo); }
.linha-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.preco { font-weight: 700; color: var(--deep); font-size: 12.5px; }
.preco-fallback { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.preco-fallback em { font-style: normal; opacity: .7; font-size: 10px; }
.alerta-txt { color: var(--coral-dk); font-weight: 600; }
.rotulo { font-size: 11px; color: var(--ink-soft); }

.ic-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--glass-br); cursor: pointer;
  background: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; transition: all .25s var(--spring);
}
.ic-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-1); color: var(--deep); }
.ic-btn.perigo:hover { background: rgba(229, 72, 77, .12); color: var(--perigo); }

.chip-tag { display: inline-flex; align-items: center; color: var(--ocean); font-size: 13px; }
.chip-tag .ic-img { width: 14px; height: 14px; }
.chips-loja { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.chip-loja {
  padding: 2px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  background: rgba(19, 145, 171, .1); color: var(--deep);
}
.chip-loja.grupo { background: rgba(255, 126, 103, .13); color: var(--coral-dk); }
.chip-area {
  padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 600;
  background: rgba(11, 61, 76, .07); color: var(--ink-soft);
}
.selo-inativo {
  padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700;
  background: rgba(229, 72, 77, .12); color: var(--perigo);
}
.selo-ok {
  padding: 3px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: rgba(21, 149, 107, .13); color: var(--ok);
}

/* Interruptor do item: liga e desliga no ato, sem depender de publicação */
.switch-mini {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px;
  border-radius: 999px; border: 1px solid var(--linha); cursor: pointer;
  background: rgba(229, 72, 77, .08); font: inherit; font-size: 10.5px; font-weight: 700;
  color: var(--perigo); transition: all .25s var(--ease);
}
.switch-mini .switch-bola { width: 14px; height: 14px; border-radius: 50%; background: var(--perigo); transition: background .25s; }
.switch-mini.on { background: rgba(21, 149, 107, .12); color: var(--ok); }
.switch-mini.on .switch-bola { background: var(--ok); }
.switch-mini:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }

/* -------------------------------- Aba Produtos: grupos de variação -------------------------------- */
.grupo-prod { display: flex; flex-direction: column; gap: 6px; }
.grupo-prod.com-variacao {
  padding: 10px; border-radius: var(--r-lg);
  background: rgba(19, 145, 171, .05); border: 1px dashed rgba(19, 145, 171, .3);
}
.grupo-prod-cab { display: flex; align-items: center; gap: 9px; padding: 2px 6px 6px; flex-wrap: wrap; }
.grupo-prod-tag {
  padding: 2px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(19, 145, 171, .14); color: var(--ocean);
}
.grupo-prod-cab strong { font-size: 13px; color: var(--deep); }
.grupo-prod-cab small { font-size: 11px; color: var(--ink-soft); }

/* -------------------------------- Aba Grupo de Navegação -------------------------------- */
.grupo-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--glass-strong); border: 1px solid var(--glass-br); box-shadow: var(--sh-1);
}
.grupo-cab h2 { font-size: 19px; font-weight: 800; color: var(--deep); letter-spacing: -.01em; }
.grupo-cab p { font-size: 13px; color: var(--ink-soft); }
.grupo-nav .linha-nome { font-size: 16px; }

.cat-bloco {
  border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-br);
  backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--sh-1);
  margin-left: calc(var(--nivel, 0) * 22px);
  transition: box-shadow .3s, border-color .25s, background .25s;
}
.cat-bloco.inativo { opacity: .62; }
.cat-bloco.alvo { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(63, 199, 212, .26), var(--sh-2); background: rgba(255, 255, 255, .78); }
.cat-bloco.alvo-copia { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(21, 149, 107, .24), var(--sh-2); }
.cat-bloco.arrastando { opacity: .4; }

/* Pistas ao arrastar uma categoria */
.cat-bloco.cat-antes { box-shadow: 0 -4px 0 var(--ocean), var(--sh-1); }
.cat-bloco.cat-depois { box-shadow: 0 4px 0 var(--ocean), var(--sh-1); }
.cat-bloco.cat-dentro {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 126, 103, .28), var(--sh-2);
  background: rgba(255, 255, 255, .8);
}
.cat-bloco.cat-dentro > .cat-cab::after {
  content: 'vira subcategoria'; margin-left: auto; padding: 3px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--coral); white-space: nowrap;
}

.cat-cab {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--linha); cursor: grab;
}
.cat-cab:active { cursor: grabbing; }
.cat-toggle {
  width: 26px; height: 26px; flex: 0 0 auto; border: none; border-radius: 8px; cursor: pointer;
  background: rgba(11, 61, 76, .07); color: var(--deep); font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .25s;
}
.cat-toggle:hover { background: rgba(11, 61, 76, .14); }
.cat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.cat-txt strong { font-size: 16px; font-weight: 700; color: var(--deep); letter-spacing: -.01em; }
.cat-txt small { font-size: 11.5px; color: var(--ink-soft); }
.cat-acoes { display: flex; gap: 6px; flex: 0 0 auto; }

.cat-itens { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-height: 62px; transition: background .25s; }
.cat-bloco.fechada .cat-itens, .cat-bloco.fechada .cat-filhas { display: none; }
.cat-vazia {
  padding: 14px; border-radius: var(--r-md); text-align: center; font-size: 12.5px; color: var(--ink-soft);
  border: 1.5px dashed rgba(11, 61, 76, .18); background: rgba(255, 255, 255, .4);
}
.cat-filhas { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }

.alca { flex: 0 0 auto; color: rgba(11, 61, 76, .3); font-size: 13px; cursor: grab; letter-spacing: -2px; }
.prod[draggable="true"]:active { cursor: grabbing; }
.prod.arrastando { opacity: .4; }
.prod.solto-antes { box-shadow: 0 -3px 0 var(--ocean), var(--sh-1); }
.prod.solto-depois { box-shadow: 0 3px 0 var(--ocean), var(--sh-1); }

/* -------------------------------- Aba Produtos por Loja -------------------------------- */
/* Aqui a categoria não se arrasta: o cabeçalho é só um agrupador com o
   atalho de ligar/desligar a categoria inteira naquela loja. */
.cat-cab.sem-arraste { cursor: default; }
.btn-mini { padding: 5px 12px; font-size: 12px; }
.selo-excecao {
  padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; cursor: help;
  background: rgba(255, 193, 84, .22); color: #8A6100; border: 1px solid rgba(255, 193, 84, .5);
}

/* -------------------------------- Tabela (lista de preço) -------------------------------- */
.tabela-bloco {
  border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-br);
  backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--sh-1); overflow: hidden;
}
.tabela-cab { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.tabela-cab h3 { font-size: 16px; font-weight: 700; color: var(--deep); }
.tabela-cab small { font-size: 11.5px; color: var(--ink-soft); }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  padding: 9px 18px; text-align: left; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(255, 255, 255, .5);
}
.tabela td { padding: 9px 18px; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover { background: rgba(255, 255, 255, .55); }
.tabela tr.inativo { opacity: .45; }
.tabela .cod { width: 1%; white-space: nowrap; }
.tabela .cod code { font-family: var(--mono); font-size: 10px; padding: 1px 7px; border-radius: 5px; background: rgba(19, 145, 171, .1); color: var(--deep); }
.tabela .val { width: 1%; white-space: nowrap; }
.tabela .acoes { width: 1%; white-space: nowrap; text-align: right; }
.tabela .acoes .ic-btn { display: inline-flex; }

/* -------------------------------- Configurações -------------------------------- */
.sub-abas {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px;
  padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .6);
  border: 1px solid var(--glass-br); width: fit-content; max-width: 100%;
}
.sub-aba {
  padding: 8px 18px; border: none; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-soft);
  background: transparent; transition: all .25s var(--ease);
}
.sub-aba:hover { color: var(--deep); background: rgba(255, 255, 255, .7); }
.sub-aba.ativo { color: #fff; background: linear-gradient(135deg, var(--deep), var(--ocean)); box-shadow: var(--sh-1); }
.sub-corpo { display: flex; flex-direction: column; gap: 12px; }

.loja-card {
  padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--glass-strong); border: 1px solid var(--glass-br); box-shadow: var(--sh-1);
}
.loja-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.loja-cab h3 { font-size: 16.5px; font-weight: 700; color: var(--deep); }
.loja-cab small { flex: 1; font-size: 11.5px; color: var(--ink-soft); }
.loja-pref { display: flex; flex-direction: column; gap: 4px; }
.loja-pref > strong { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--deep); }

/* -------------------------------- Publicação -------------------------------- */
.pub-lojas { display: flex; flex-direction: column; gap: 10px; }
.pub-loja {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-br);
}
.pub-loja.pendente { background: rgba(255, 193, 84, .12); border-color: rgba(255, 193, 84, .5); }
.pub-loja-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.pub-loja-txt strong { font-size: 14.5px; color: var(--deep); }
.pub-loja-txt small { font-size: 11.5px; color: var(--ink-soft); }

/* -------------------------------- Modal -------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(7, 43, 55, .5); backdrop-filter: blur(6px);
}
.modal.aberto { display: flex; }
.modal-box {
  width: 100%; max-width: 720px; max-height: 90dvh; display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--glass-br); border-radius: 26px;
  backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--sh-3); overflow: hidden;
}
.modal-estreito { max-width: 480px; }
.modal-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid var(--linha);
}
.modal-cab h2 { font-size: 19px; font-weight: 800; color: var(--deep); letter-spacing: -.01em; }
.modal-x {
  width: 34px; height: 34px; border: none; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
  background: rgba(11, 61, 76, .07); color: var(--ink-soft); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .3s var(--spring);
}
.modal-x:hover { transform: rotate(90deg); background: var(--coral); color: #fff; }
.form, .dados-corpo { flex: 1; overflow-y: auto; padding: 24px; }
.modal-rodape {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--linha); background: rgba(255, 255, 255, .6);
}
.dados-info { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; }
.dados-corpo .btn-primario { margin-top: 6px; }

/* -------------------------------- Campos -------------------------------- */
.campo { margin-bottom: 18px; }
.campo > label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--deep); }
.campo > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--deep); }
.req { color: var(--coral-dk); }
.campo input[type="text"], .campo input[type="number"], .campo input[type="email"],
.campo input[type="password"], .campo input[type="date"], .campo select, .campo textarea {
  width: 100%; padding: 11px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--glass-br); background: rgba(255, 255, 255, .85);
  font: inherit; font-size: 14px; color: var(--ink); outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(63, 199, 212, .16); }
.campo input[readonly] { background: rgba(11, 61, 76, .05); color: var(--ink-soft); }
.campo-erro { border-color: var(--perigo) !important; box-shadow: 0 0 0 4px rgba(229, 72, 77, .14) !important; }
.msg-erro { margin-top: 5px; font-size: 11.5px; color: var(--perigo); }
.campo-dica { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }

.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mini-campo > span { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.mini-campo input {
  width: 100%; padding: 9px 13px; border-radius: 9px;
  border: 1px solid var(--glass-br); background: rgba(255, 255, 255, .85);
  font: inherit; font-size: 13.5px; color: var(--ink); outline: none;
}
.mini-campo input:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(63, 199, 212, .16); }

/* Texto rico */
.rich {
  border: 1px solid var(--glass-br); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .85); overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.rich:focus-within { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(63, 199, 212, .16); }
.rich-toolbar {
  display: flex; align-items: center; gap: 2px; padding: 5px 8px;
  border-bottom: 1px solid var(--linha); background: rgba(238, 245, 245, .7);
}
.rich-toolbar button {
  width: 28px; height: 26px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--ink-soft); font-size: 12.5px; transition: all .2s;
}
.rich-toolbar button:hover { background: rgba(255, 255, 255, .95); color: var(--deep); }
.rich-toolbar button.ativo { background: var(--deep); color: #fff; }
.rich-sep { width: 1px; height: 17px; margin: 0 4px; background: var(--linha); }
.rich-editor { min-height: 62px; padding: 11px 15px; font-size: 14px; line-height: 1.6; outline: none; }
.rich.uma-linha .rich-editor { min-height: auto; white-space: nowrap; overflow-x: auto; }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--ink-soft); opacity: .55; }

/* Caixas de seleção em grade (tags, lojas, permissões) */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check-op {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--glass-br); background: rgba(255, 255, 255, .8); cursor: pointer;
  font-size: 13px; color: var(--ink); transition: all .25s var(--spring);
}
.check-op:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.check-op input { display: none; }
.check-op.marcado { background: linear-gradient(135deg, var(--deep), var(--ocean)); border-color: transparent; color: #fff; }
.check-op.marcado .ic-img { color: #fff; }
.check-op .ic-img { width: 15px; height: 15px; }

.switch { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 14px; color: var(--ink); }
.switch input { width: 18px; height: 18px; accent-color: var(--ocean); cursor: pointer; }

.radio-linha { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13.5px; }
.radio-linha input { accent-color: var(--ocean); margin-right: 5px; }

.opcao-radio {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; margin-bottom: 8px;
  border: 1px solid var(--glass-br); border-radius: var(--r-md); cursor: pointer;
  background: rgba(255, 255, 255, .7); transition: all .25s var(--spring);
}
.opcao-radio:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.opcao-radio input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ocean); cursor: pointer; }
.opcao-radio:has(input:checked) { border-color: var(--ocean); background: rgba(19, 145, 171, .09); }
.opcao-radio.bloqueado { opacity: .6; cursor: default; }
.opcao-corpo { display: flex; flex-direction: column; gap: 2px; }
.opcao-corpo strong { font-size: 14px; font-weight: 700; color: var(--deep); }
.opcao-corpo small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* Grade de permissões do perfil */
.perm-grade { display: flex; flex-direction: column; gap: 12px; }
.perm-area { padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .6); border: 1px solid var(--glass-br); }
.perm-area-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.perm-area-cab strong { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--deep); }
.link-mini { border: none; background: none; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--ocean); text-decoration: underline; }
.link-mini:hover { color: var(--deep); }
.perm-itens { display: flex; flex-wrap: wrap; gap: 6px; }
.check-op.perm { padding: 5px 12px; font-size: 12.5px; }

/* Adicionar itens a uma categoria */
.add-itens { display: flex; flex-direction: column; gap: 12px; }
.add-itens input[type="search"] {
  width: 100%; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--glass-br); background: rgba(255, 255, 255, .85);
  font: inherit; font-size: 14px; outline: none;
}
.add-itens input[type="search"]:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(63, 199, 212, .16); }
.add-lista { display: flex; flex-direction: column; gap: 7px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.add-linha {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .75); border: 1px solid var(--glass-br);
}

/* Busca de ícones */
.icone-atual { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.icone-previa {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px;
  background: rgba(19, 145, 171, .1); color: var(--ocean);
  display: flex; align-items: center; justify-content: center;
}
.icone-previa .ic-img { width: 24px; height: 24px; }
.icone-atual input { flex: 1; min-width: 0; }
.icone-busca { display: flex; gap: 8px; }
.icone-busca input {
  flex: 1; min-width: 0; padding: 11px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--glass-br); background: rgba(255, 255, 255, .85);
  font: inherit; font-size: 14px; outline: none;
}
.icone-busca input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(63, 199, 212, .16); }
.icone-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; margin-top: 12px; }
.icone-grade:empty { display: none; }
.icone-op {
  aspect-ratio: 1; border: 1px solid var(--glass-br); border-radius: var(--r-sm); cursor: pointer;
  background: rgba(255, 255, 255, .8); color: var(--deep);
  display: flex; align-items: center; justify-content: center; transition: all .25s var(--spring);
}
.icone-op .ic-img { width: 24px; height: 24px; }
.icone-op:hover { transform: translateY(-2px); border-color: var(--aqua); box-shadow: var(--sh-2); }
.icone-op.sel { background: linear-gradient(135deg, var(--deep), var(--ocean)); border-color: transparent; color: #fff; }
.icone-aviso { grid-column: 1 / -1; padding: 14px; text-align: center; font-size: 12.5px; color: var(--ink-soft); }
.icone-aviso.erro { color: var(--perigo); }

/* -------------------------------- Ícones -------------------------------- */
.ic { display: inline-block; flex: 0 0 auto; line-height: 1; vertical-align: -.15em; }
.ic-emoji { width: auto; height: auto; }
.ic-img { width: 1em; height: 1em; background: var(--ic-url) no-repeat center / contain; }
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .ic-img { background: currentColor; -webkit-mask: var(--ic-url) no-repeat center / contain; mask: var(--ic-url) no-repeat center / contain; }
}

/* -------------------------------- Toast -------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translate(-50%, 20px);
  padding: 13px 24px; border-radius: 999px; opacity: 0; pointer-events: none;
  font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--deep), var(--ocean));
  box-shadow: var(--sh-3); transition: opacity .3s, transform .35s var(--spring);
}
.toast.mostrar { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: linear-gradient(135deg, #C13237, var(--perigo)); }

/* -------------------------------- Responsivo -------------------------------- */
@media (max-width: 820px) {
  body { overflow-x: hidden; }
  /* Topo compacto para o bloco fixo não comer a tela (sticky só funciona
     dentro do próprio pai — por isso o bloco inteiro continua fixo). */
  .topo { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .topo-logo { width: 88px; }
  .topo-acoes { gap: 6px; }
  .topo .btn { padding: 7px 13px; font-size: 12.5px; }
  .selo-pendente { font-size: 10px; }
  .abas { padding: 8px 16px 0; }
  .conteudo { padding: 16px 16px 48px; }
  .barra-acoes { padding: 12px; }
  .barra-botoes { width: 100%; flex-wrap: wrap; }
  .barra-botoes .btn { flex: 1 1 auto; justify-content: center; }
  .filtro-loja { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .grade-2 { grid-template-columns: 1fr; }
  .cat-bloco { margin-left: calc(var(--nivel, 0) * 10px); }
  .cat-cab { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }
  .cat-acoes { width: 100%; justify-content: flex-end; }
  .cat-itens { padding: 10px; }
  .linha { flex-wrap: wrap; padding: 10px; gap: 10px; }
  .linha-corpo { flex-basis: calc(100% - 110px); }
  /* a coluna da direita desce para a linha de baixo, sem recuo que estoure a largura */
  .linha-acoes { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .modal { padding: 0; }
  .modal-box { max-height: 100dvh; height: 100%; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}