/* Medidas em rem: a opção "Letra maior" aumenta tudo proporcionalmente. */
:root {
  --fundo: #f3f5f7;
  --superficie: #ffffff;
  --superficie-2: #f6f8fb;
  --superficie-3: #e9eef4;
  --borda: #d7dee7;
  --borda-forte: #b6c2cf;
  --texto: #14202c;
  --texto-2: #4b5b6b;
  --texto-3: #8593a1;
  --primaria: #1b5fae;
  --primaria-forte: #144b8a;
  --primaria-suave: #e4eefa;
  --sobre-primaria: #ffffff;
  --ok: #157244;
  --ok-forte: #0f5c36;
  --ok-suave: #e1f3e9;
  --sobre-ok: #ffffff;
  --aviso: #885600;
  --aviso-suave: #fff1d0;
  --perigo: #bd2a1c;
  --perigo-suave: #fdeae8;
  --foco: #2f7de1;
  --menu: #1e242b;
  --menu-texto: #c9d0d8;
  --menu-ativo-fundo: #ffffff;
  --menu-ativo-texto: #1e242b;
  --sombra: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 14px rgba(16, 32, 48, .06);
  --raio: .8rem;
  --toque: 2.875rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f151c;
    --superficie: #17202a;
    --superficie-2: #1c2632;
    --superficie-3: #24303d;
    --borda: #2c3a49;
    --borda-forte: #3d4e60;
    --texto: #e8eef4;
    --texto-2: #a3b2c1;
    --texto-3: #74859a;
    --primaria: #5aa6e6;
    --primaria-forte: #7ab8ee;
    --primaria-suave: #1b3348;
    --sobre-primaria: #08131e;
    --ok: #46c07f;
    --ok-forte: #64d295;
    --ok-suave: #173327;
    --sobre-ok: #06170e;
    --aviso: #e8ad3f;
    --aviso-suave: #35290f;
    --perigo: #f2766b;
    --perigo-suave: #3a1d1a;
    --foco: #8cc4ff;
    --menu: #0b1118;
    --menu-texto: #aebdcc;
    --menu-ativo-fundo: rgba(255, 255, 255, .14);
    --menu-ativo-texto: #ffffff;
    --sombra: 0 1px 2px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 16px; }
html.letra-grande { font-size: 18.5px; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.25; margin: 0; }
p { margin: 0; }
a { color: var(--primaria); }
small, .suave { color: var(--texto-2); }
b, strong { font-weight: 700; }
kbd {
  font: .72rem/1 ui-monospace, monospace; padding: .15rem .35rem; border-radius: .25rem;
  border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-2);
}
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -.25em; }
.ic-grande { width: 3rem; height: 3rem; color: var(--texto-3); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ===================== Layout ===================== */
.layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
/* Menu lateral: fundo em degradê da cor da marca (não uma cor chapada) e cada item como um botão destacado do fundo */
.layout { transition: grid-template-columns .2s ease; }
.menu {
  color: #dfe6ee;
  background:
    radial-gradient(130% 55% at 0% 0%, color-mix(in srgb, var(--menu), #ffffff 16%) 0%, transparent 60%),
    radial-gradient(90% 40% at 100% 100%, color-mix(in srgb, var(--menu), #ffffff 8%) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--menu), #ffffff 3%) 0%, color-mix(in srgb, var(--menu), #000000 35%) 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
.marca { display: flex; align-items: center; gap: .65rem; padding: 1.1rem 1rem .8rem; font-weight: 700; font-size: 1.05rem; color: #fff; }
.marca-link { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.marca-ic { width: 2.3rem; height: 2.3rem; border-radius: .7rem; background: rgba(255, 255, 255, .14); display: grid; place-items: center; flex-shrink: 0; }
.icone-menu { display: none; width: 2.5rem; height: 2.5rem; border-radius: .7rem; object-fit: contain; background: #fff; flex-shrink: 0; }
/* No estilo do iPhone: os itens ficam em grupos de vidro (como nos Ajustes), cada um com o ícone num quadradinho
   de cantos arredondados e uma linha fina entre eles; o da tela aberta fica branco */
.menu nav { display: flex; flex-direction: column; padding: .2rem .75rem 1rem; flex: 1; }
.grupo-menu {
  display: flex; flex-direction: column; padding: .3rem; border-radius: 1.15rem;
  background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.grupo-menu + .grupo-menu { margin-top: .75rem; }
.menu nav a {
  position: relative; display: flex; align-items: center; gap: .75rem; color: #f2f5f9; text-decoration: none; font-weight: 550;
  padding: .42rem .5rem; border-radius: .85rem; min-height: 2.75rem;
  transition: background .15s, transform .1s;
}
.menu nav a + a::before { content: ''; position: absolute; top: 0; left: 3.15rem; right: .6rem; height: 1px; background: rgba(255, 255, 255, .1); }
.menu nav a:hover::before, .menu nav a:hover + a::before, .menu nav a.ativo::before, .menu nav a.ativo + a::before { opacity: 0; }
.menu nav a .ic {
  width: 1.9rem; height: 1.9rem; padding: .37rem; box-sizing: border-box; border-radius: .55rem; flex-shrink: 0; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.menu nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.menu nav a:active { transform: scale(.98); background: rgba(255, 255, 255, .14); }
.menu nav a.ativo { background: #ffffff; color: var(--menu); font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.menu nav a.ativo .ic { background: var(--menu); box-shadow: none; }
.rotulo-menu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .grupo-titulo { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .55); padding: 1.1rem .85rem .4rem; }
.menu-rodape { padding: .4rem .75rem .9rem; }
.menu-rodape button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .65rem;
  color: #fff; width: 100%; padding: .5rem .6rem; border-radius: 1.15rem;
  background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.menu-rodape button:hover { background: rgba(255, 255, 255, .13); }
.menu-rodape button:active { transform: scale(.98); }
.menu-rodape button:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.menu-rodape button .rotulo-menu, .menu-rodape button > span:last-child { display: flex; flex-direction: column; line-height: 1.25; font-weight: 600; min-width: 0; }
.menu-rodape button small { color: rgba(255, 255, 255, .7); font-weight: 400; font-size: .8rem; }
/* Avatar: foto de perfil ou as iniciais */
.avatar {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; flex-shrink: 0; object-fit: cover; display: inline-grid; place-items: center;
  background: var(--marca-destaque, var(--primaria)); color: var(--sobre-destaque, #fff); font-weight: 750; font-size: .9rem; letter-spacing: .02em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.avatar.grande { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; box-shadow: 0 0 0 3px var(--superficie), 0 0 0 4px var(--borda-forte); }
.avatar.medio { width: 2.9rem; height: 2.9rem; font-size: 1.05rem; box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--borda); }
.avatar.pequeno { width: 1.9rem; height: 1.9rem; font-size: .75rem; box-shadow: none; }
.avatar-menu { display: contents; }
.conta-topo { display: flex; gap: 1rem; align-items: center; }
.conta-topo p { margin: 0 0 .5rem; }
/* Menu recolhido (computador): só os ícones, o nome aparece ao passar o mouse */
@media (min-width: 861px) {
  .layout.menu-recolhido { grid-template-columns: 4.9rem minmax(0, 1fr); }
  .layout.menu-recolhido .marca { justify-content: center; padding: 1rem .5rem .7rem; }
  .layout.menu-recolhido .marca-link { justify-content: center; flex: none; }
  .layout.menu-recolhido .marca-link > :not(.icone-menu):not(.marca-ic) { display: none; }
  .layout.menu-recolhido .logo-menu, .layout.menu-recolhido .marca-link .rotulo-menu { display: none; }
  .layout.menu-recolhido .icone-menu { display: grid; }
  .layout.menu-recolhido .menu nav { padding: .2rem .55rem 1rem; }
  .layout.menu-recolhido .grupo-menu { padding: .25rem; border-radius: 1rem; }
  .layout.menu-recolhido .menu nav a { justify-content: center; padding: .38rem; }
  .layout.menu-recolhido .menu nav a::before, .layout.menu-recolhido .menu nav a .rotulo-menu { display: none; }
  .layout.menu-recolhido .menu nav a .contador { position: absolute; top: -.2rem; right: -.2rem; margin: 0; }
  .layout.menu-recolhido .menu .grupo-titulo { font-size: 0; padding: 0; height: .75rem; }
  .layout.menu-recolhido .menu-rodape { padding: .4rem .55rem .9rem; }
  .layout.menu-recolhido .menu-rodape button { justify-content: center; padding: .4rem; }
  .layout.menu-recolhido .menu-rodape .rotulo-menu { display: none; }
  .layout.menu-recolhido .barra-total-movel { left: 4.9rem; }
}
/* Botão de recolher o menu: fica no topo da tela, ao lado do título (só no computador; no celular o menu abre pelo ☰) */
.recolher-menu {
  all: unset; box-sizing: border-box; cursor: pointer; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: .8rem;
  display: grid; place-items: center; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--borda);
  transition: color .15s, border-color .15s, transform .1s;
}
.recolher-menu .ic { width: 1.3rem; height: 1.3rem; }
.recolher-menu:hover { color: var(--texto); border-color: var(--borda-forte); }
.recolher-menu:active { transform: scale(.95); }
.recolher-menu:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (max-width: 860px) { .recolher-menu { display: none; } }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: center; gap: .8rem; padding: .85rem 1.75rem;
  background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 10;
}
.topo-titulo { flex: 1; min-width: 0; }
.topo h1 { font-size: 1.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-titulo p { font-size: .9rem; color: var(--texto-2); }
.chip-caixa {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 99px;
  font-weight: 650; font-size: .88rem; text-decoration: none; white-space: nowrap;
}
.chip-caixa.aberto { background: var(--ok-suave); color: var(--ok); }
.chip-caixa.fechado { background: var(--aviso-suave); color: var(--aviso); }
.chip-caixa .ponto { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.menu-botao { display: none; }
.menu-fundo { display: none; }
#conteudo { padding: 1.5rem 1.75rem 3rem; }
.pagina { display: flex; flex-direction: column; gap: 1.1rem; max-width: 88rem; }
.nav-inferior { display: none; }

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: fixed; inset: 0 auto 0 0; width: min(18rem, 85vw); z-index: 50;
    transform: translateX(-100%); transition: transform .2s; visibility: hidden;
  }
  .layout.menu-aberto .menu { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .layout.menu-aberto .menu-fundo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 45; }
  .menu-botao {
    all: unset; display: grid; place-items: center; cursor: pointer; width: 2.6rem; height: 2.6rem; border-radius: .6rem;
  }
  .menu-botao .ic { width: 1.5rem; height: 1.5rem; }
  .topo { padding: .55rem .8rem; gap: .5rem; }
  .topo h1 { font-size: 1.15rem; }
  .topo-titulo p { display: none; }
  .botao-ajuda span { display: none; }
  .botao-ajuda { padding: 0; width: var(--toque); }
  #conteudo { padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); }
  .nav-inferior {
    display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--superficie); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-inferior a, .nav-inferior button {
    all: unset; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    font-size: .74rem; font-weight: 600; color: var(--texto-2); min-height: 3.9rem; cursor: pointer; text-align: center;
  }
  .nav-inferior .ic { width: 1.5rem; height: 1.5rem; }
  .nav-inferior .ativo { color: var(--primaria); }
}
@media (max-width: 420px) {
  .chip-caixa { padding: .4rem .6rem; font-size: .8rem; }
}

/* ===================== Botões ===================== */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .95rem; min-height: var(--toque); padding: .5rem 1.05rem;
  border-radius: .65rem; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s;
}
.botao:hover { background: var(--superficie-2); border-color: var(--texto-3); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.botao.primario:hover { background: var(--primaria-forte); border-color: var(--primaria-forte); }
.botao.sucesso { background: var(--ok); border-color: var(--ok); color: var(--sobre-ok); }
.botao.sucesso:hover { background: var(--ok-forte); border-color: var(--ok-forte); }
.botao.perigo { color: var(--perigo); }
.botao.perigo.cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.botao.pequeno { min-height: 2.3rem; padding: .3rem .75rem; font-size: .875rem; }
.botao.grande { min-height: 3.5rem; padding: .75rem 1.35rem; font-size: 1.1rem; border-radius: .8rem; }
.botao.bloco { width: 100%; }
.botao.link { border-color: transparent; background: none; min-height: 2.3rem; padding: .3rem .5rem; color: var(--primaria); }
.botao.link:hover { text-decoration: underline; background: none; }
.botao.link.perigo { color: var(--perigo); }
.botoes { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ===================== Formulários ===================== */
label { font-size: .92rem; font-weight: 600; color: var(--texto); }
.campo { display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; font-weight: 600; color: var(--texto); }
/* Campo de formulário: título com "(opcional)" ao lado, a caixa embaixo e, por último, a dica explicativa.
   Assim a caixa fica sempre na mesma altura, tenha o campo dica ou não. */
label:not(.check):not(.opcao-cartao):not(.botao):not(.opcao-atalho):not(.interruptor):not(.modelo-pagina) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .35rem; }
label > small.dica-campo { grid-row: 3; }
/* Campos lado a lado dividem as mesmas linhas (título, caixa, dica): as caixas ficam alinhadas */
.linha2 > label:not(.check), .linha3 > label:not(.check), .linha2 > .campo, .linha3 > .campo {
  grid-row: span 3; grid-template-rows: subgrid; row-gap: .35rem;
}
.linha2 > .campo, .linha3 > .campo { display: grid; align-content: start; }
.valor-campo {
  display: flex; align-items: center; min-height: var(--toque); padding: .4rem .8rem; border-radius: .6rem;
  border: 1px dashed var(--borda-forte); background: var(--superficie-2); font-size: .95rem; line-height: 1.25;
}
.rotulo { font-size: .92rem; font-weight: 600; }
label small, .campo small, .ajuda-campo { font-weight: 400; font-size: .82rem; color: var(--texto-2); }
label.check { display: flex; flex-direction: row; align-items: flex-start; gap: .65rem; font-weight: 500; font-size: .95rem; cursor: pointer; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: .6rem; padding: .55rem .8rem; width: 100%; min-width: 0; min-height: var(--toque);
}
textarea { resize: vertical; min-height: 4.5rem; }
input[type=checkbox], input[type=radio] { width: 1.3rem; height: 1.3rem; min-height: 0; margin: .1rem 0 0; accent-color: var(--primaria); flex-shrink: 0; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--foco); outline-offset: -1px; border-color: var(--primaria); }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:disabled { background: var(--superficie-2); color: var(--texto-2); }
.campo-rs { position: relative; display: flex; }
.campo-rs > span { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--texto-2); font-weight: 600; pointer-events: none; }
.campo-rs > input { padding-left: 2.35rem; }
.grupo { display: flex; gap: .5rem; }
.grupo > input { flex: 1; }
.form { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.linha3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 560px) { .linha2, .linha3 { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem 1rem; margin: 0; display: grid; gap: .9rem; min-width: 0; }
legend { font-weight: 700; padding: 0 .4rem; }
.erro-form {
  background: var(--perigo-suave); color: var(--perigo); border-radius: .6rem; padding: .7rem .9rem;
  font-weight: 600; display: flex; gap: .55rem; align-items: flex-start;
}

.segmentado {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem;
  background: var(--superficie-3); border-radius: .7rem; padding: .25rem;
}
.segmentado button {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .4rem .5rem; min-height: 2.5rem; border-radius: .5rem; font-weight: 600; font-size: .9rem;
  color: var(--texto-2); cursor: pointer; line-height: 1.2;
}
.segmentado button:hover { color: var(--texto); }
.segmentado button[aria-pressed=true] { background: var(--superficie); color: var(--primaria); box-shadow: var(--sombra); }
.segmentado button:focus-visible { outline: 3px solid var(--foco); }
.segmentado.pequeno { flex: 0 0 6.5rem; }

.opcoes-cartao { display: grid; gap: .6rem; }
.opcao-cartao {
  display: flex; flex-direction: row; align-items: flex-start; gap: .75rem; padding: .85rem 1rem;
  border: 2px solid var(--borda); border-radius: var(--raio); cursor: pointer; font-weight: 500;
}
.opcao-cartao:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.opcao-cartao strong { display: block; }
.opcao-cartao small { font-size: .85rem; }

/* ===================== Cartões, tabelas, etiquetas ===================== */
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1.1rem;
}
.card > h2, .secao-titulo { font-size: 1.08rem; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.card.sem-padding { padding: 0; overflow: hidden; }
.card.sem-padding > h2 { padding: 1rem 1.1rem 0; }
.cabecalho-card { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.1rem 0; }
.cabecalho-card h2 { font-size: 1.08rem; }

.barra { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.barra > input[type=search], .barra .busca-simples { flex: 1 1 16rem; max-width: 26rem; }
.barra label:not(.check) { width: auto; }
.barra .espaco { flex: 1; }
.periodos { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Filtros como botões (o escolhido fica marcado) */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filtros .botao[aria-pressed="true"] { background: var(--superficie-3); border-color: var(--texto-2); color: var(--texto); font-weight: 700; }
.filtros .botao .contagem-filtro { font-size: .78rem; font-weight: 700; color: var(--texto-2); background: var(--superficie-3); border-radius: 99px; padding: .05rem .45rem; }
.filtros .botao[aria-pressed="true"] .contagem-filtro { background: var(--superficie); }
.periodo { display: flex; flex-direction: column; gap: .7rem; }
.periodo-datas { display: flex; flex-wrap: wrap; gap: .7rem; }
.periodo-datas label { flex: 0 1 11rem; }
#filtro .busca-simples { max-width: 34rem; }
.filtros.opcionais .dica { margin-right: .2rem; }
.posicao { display: inline-block; min-width: 1.9rem; color: var(--texto-3); font-size: .85rem; font-variant-numeric: tabular-nums; }
.ver-mais { display: flex; justify-content: center; padding: .8rem; border-top: 1px solid var(--borda); }
.busca-com-botao { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
/* Produtos: sugestões para começar o cadastro (marca, põe o preço e cadastra de uma vez) */
.sug-lista { display: flex; flex-direction: column; gap: 1.1rem; }
.sug-grupo h3 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); margin: 0 0 .45rem; }
.sug-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .45rem; align-items: start; }
.sug-item { border: 1px solid var(--borda); border-radius: .75rem; padding: .55rem .75rem; background: var(--superficie); }
.sug-item.marcado { border-color: var(--ok); background: var(--ok-suave); }
.sug-item.ja { opacity: .6; }
.sug-item label.check { align-items: center; }
.sug-item label.check > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sug-item label.check small { color: var(--texto-2); font-weight: 400; font-size: .8rem; }
.sug-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .6rem; }
.sug-acoes { position: sticky; bottom: 0; z-index: 1; background: var(--superficie); border-top: 1px solid var(--borda); padding: .75rem 0 .1rem; }
@media (max-width: 560px) { .sug-acoes { gap: .35rem; } .sug-acoes [data-fechar] { display: none; } }
/* Chegou mercadoria: os 4 que mais estão faltando */
.faltando { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2); padding: .7rem .85rem; }
.faltando-topo { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.faltando-topo strong { display: inline-flex; align-items: center; gap: .4rem; color: var(--aviso); }
.faltando-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.faltando-lista li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--aviso); border-radius: .6rem; }
.faltando-lista li.zerado { border-left-color: var(--perigo); }
.fl-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fl-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.fl-nome small { color: var(--texto-2); font-size: .8rem; }
.faltando-lista li.zerado .fl-nome small { color: var(--perigo); font-weight: 600; }
.faltando-lista .botao { flex-shrink: 0; }
@media (max-width: 640px) { .faltando-lista { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1500px) { .faltando-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.busca-com-botao .busca { flex: 1 1 18rem; }

.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2);
  font-weight: 650; padding: .7rem .9rem; border-bottom: 1px solid var(--borda); background: var(--superficie-2);
}
.tabela th.num { text-align: right; }
.tabela td { padding: .7rem .9rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--superficie-2); }
.tabela tfoot td { font-weight: 700; background: var(--superficie-2); border-top: 1px solid var(--borda); }
.tabela td small { display: block; font-size: .82rem; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela .acoes .botao + .botao { margin-left: .35rem; }
.col-nome { min-width: 13rem; }

/* Em telas pequenas, cada linha da tabela vira um cartão (os rótulos vêm do cabeçalho) */
@media (max-width: 640px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tfoot { display: block; width: 100%; }
  .tabela tr { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--borda); }
  .tabela tbody tr:last-child { border-bottom: none; }
  .tabela td { display: block; padding: 0; border: none; text-align: left; min-width: 0; }
  .tabela td.num { text-align: left; white-space: normal; }
  .tabela td[data-label]::before {
    content: attr(data-label); display: block; font-size: .72rem; font-weight: 650; color: var(--texto-2);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .tabela td.celula-principal { grid-column: 1 / -1; font-size: 1.02rem; }
  .tabela td.acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; text-align: left; }
  .tabela td.acoes .botao + .botao { margin-left: 0; }
  .tabela td:empty { display: none; }
  .tabela tfoot tr { display: flex; justify-content: space-between; gap: 1rem; background: var(--superficie-2); }
  .tabela tfoot td { background: none; border: none; }
  .tabela tr.clicavel:hover td { background: none; }
  /* Item da venda no celular: nome + "Tirar" em cima, quantidade inteira, preço e total embaixo */
  .carrinho tr { grid-template-columns: 1fr auto; }
  .carrinho td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .carrinho td.acoes { grid-column: 2; grid-row: 1; justify-content: flex-end; align-items: flex-start; }
  .carrinho td:nth-child(2) { grid-column: 1 / -1; }
  .carrinho td:nth-child(4) { text-align: right; }
  .col-nome { min-width: 0; }
}

.etiqueta {
  display: inline-block; font-size: .8rem; font-weight: 650; padding: .15rem .6rem; border-radius: 99px;
  background: var(--superficie-3); color: var(--texto-2); white-space: nowrap;
}
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.aviso { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta.perigo { background: var(--perigo-suave); color: var(--perigo); }
.etiqueta.info { background: var(--primaria-suave); color: var(--primaria); }
.texto-perigo { color: var(--perigo); font-weight: 650; }
.texto-ok { color: var(--ok); font-weight: 650; }
.texto-aviso { color: var(--aviso); font-weight: 650; }

.faixa { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--raio); font-size: .95rem; }
.faixa .ic { margin-top: .1rem; }
.faixa.info { background: var(--primaria-suave); color: var(--texto); }
.faixa.info .ic { color: var(--primaria); }
.faixa.aviso { background: var(--aviso-suave); color: var(--texto); }
.faixa.aviso .ic { color: var(--aviso); }
.faixa > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.faixa.perigo { background: var(--perigo-suave); color: var(--texto); }
.faixa.perigo .ic { color: var(--perigo); }
/* aviso de conexão no topo das telas */
#faixa-conexao:empty { display: none; }
#faixa-conexao { padding: 1rem 1.75rem 0; }
#faixa-conexao .faixa { border: 1px solid var(--borda-forte); }
@media (max-width: 860px) { #faixa-conexao { padding: .8rem 1rem 0; } }

/* avisos da plataforma: modo suporte, teste grátis, mensalidade */
#faixa-plataforma:empty { display: none; }
#faixa-plataforma { padding: 1rem 1.75rem 0; display: grid; gap: .6rem; }
#faixa-plataforma .faixa { border: 1px solid var(--borda-forte); align-items: center; flex-wrap: wrap; }
#faixa-plataforma .faixa a { color: inherit; font-weight: 650; }
.faixa.suporte { background: #3b2a7a; color: #fff; border-color: #3b2a7a !important; }
.faixa.suporte .ic { color: #d9cffc; }
.faixa.suporte .botao { background: #fff; color: #3b2a7a; border-color: #fff; }
body.modo-suporte .layout { box-shadow: inset 0 4px 0 #6d4bd8; }
@media (max-width: 860px) { #faixa-plataforma { padding: .8rem 1rem 0; } }

/* Assinatura */
.lista-recursos { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .4rem 1rem; }
.lista-recursos li { display: flex; gap: .5rem; align-items: flex-start; }
.lista-recursos .ic { color: var(--ok); flex: none; margin-top: .15rem; }
/* Assinatura: o plano atual em destaque (nome, preço e situação); datas numa linha discreta e o contato no rodapé */
.plano-atual { display: flex; flex-direction: column; gap: .9rem; }
.pa-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pa-rotulo { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.pa-topo h2 { font-size: 1.45rem; margin: .1rem 0 0; }
.pa-preco { margin: 0; font-size: 2rem; font-weight: 750; letter-spacing: -.02em; line-height: 1; }
.pa-preco small { font-size: .95rem; font-weight: 500; color: var(--texto-2); margin-left: .2rem; letter-spacing: 0; }
.pa-fatos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; color: var(--texto-2); font-size: .92rem; }
.pa-fatos li { display: inline-flex; align-items: center; gap: .45rem; }
.pa-fatos .ic { width: 1.05rem; height: 1.05rem; }
.pa-fatos b { color: var(--texto); font-weight: 650; }
.pa-aviso { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .95rem; border-radius: .8rem; background: var(--superficie-2); border: 1px solid var(--borda); }
.pa-aviso > .ic { color: var(--primaria); flex: none; margin-top: .1rem; }
.pa-aviso p { margin: 0; }
.pa-aviso .botao { margin-top: .7rem; }
.pa-recursos summary { cursor: pointer; font-weight: 600; color: var(--primaria); width: fit-content; }
.pa-recursos .lista-recursos { margin-top: .7rem; }
.pa-contato { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding-top: .85rem; border-top: 1px solid var(--borda); font-size: .9rem; color: var(--texto-2); }
.pa-contato > span { margin-right: auto; }
.mensalidade + .mensalidade { border-top: 1px solid var(--borda); margin-top: 1rem; padding-top: 1rem; }
.mensalidade .etiqueta { margin-left: .3rem; }
.passos-inicio { padding-left: 1.3rem; display: grid; gap: .45rem; }
.passos-inicio a { font-weight: 600; }

/* Marca da empresa (Configurações) */
.marca-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.marca-item { display: grid; grid-template-columns: 7.5rem 1fr; gap: .9rem; align-items: start; padding: .8rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.marca-previa {
  height: 5.5rem; border-radius: .6rem; display: grid; place-items: center; overflow: hidden;
  background: repeating-conic-gradient(var(--superficie-2) 0% 25%, var(--superficie) 0% 50%) 50% / 16px 16px;
  border: 1px dashed var(--borda-forte); text-align: center;
}
.marca-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marca-previa.icone { width: 5.5rem; }
.marca-previa.abertura { height: 8rem; width: 4.5rem; }
.marca-previa.abertura img { object-fit: cover; width: 100%; height: 100%; }
.cor-campo { display: flex; align-items: center; gap: .6rem; }
.cor-campo input[type=color] { width: 3.2rem; height: var(--toque); padding: .2rem; border-radius: .6rem; cursor: pointer; flex-shrink: 0; }
@media (max-width: 420px) { .marca-item { grid-template-columns: 1fr; } }

/* Pix: QR Code sempre em fundo branco (o leitor do banco precisa de contraste) */
.pix-pagar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.pix-qr { width: 13rem; max-width: 100%; background: #fff; padding: .4rem; border-radius: var(--raio); border: 1px solid var(--borda); flex-shrink: 0; }
.pix-qr svg { display: block; width: 100%; height: auto; }
.pix-texto { flex: 1 1 14rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.pix-valor strong { font-size: 1.3rem; }
@media (max-width: 560px) { .pix-pagar { justify-content: center; } .pix-texto { align-items: stretch; } }

/* lista de preços impressa (folha A4) */
.lista-precos { font: 11px/1.35 Arial, sans-serif; color: #000; }
.lista-precos h2 { font-size: 16px; margin: 0 0 2px; }
.lista-precos p { margin: 0 0 8px; }
.lista-precos table { width: 100%; border-collapse: collapse; }
.lista-precos th, .lista-precos td { border-bottom: 1px solid #999; padding: 3px 4px; text-align: left; }
.lista-precos th { border-bottom: 2px solid #000; }
.lista-precos .num { text-align: right; white-space: nowrap; }
.lista-precos tr { break-inside: avoid; }
.lista-precos .categoria td { font-weight: 700; background: #eee; border-bottom: 1px solid #000; padding-top: 6px; }

.vazio { padding: 2.2rem 1.2rem; text-align: center; color: var(--texto-2); display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.vazio strong { color: var(--texto); font-size: 1.05rem; }
.vazio .botoes { justify-content: center; margin-top: .4rem; }
.carregando { color: var(--texto-2); padding: 1rem 0; }
.dica { font-size: .85rem; color: var(--texto-2); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }
.indicador { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; }
.indicador span { font-size: .88rem; color: var(--texto-2); font-weight: 600; }
.indicador strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.indicador small { font-size: .82rem; }

.abas { display: flex; gap: .3rem; border-bottom: 1px solid var(--borda); overflow-x: auto; overflow-y: hidden; }
.abas button {
  all: unset; cursor: pointer; padding: .7rem 1rem; font-weight: 650; color: var(--texto-2);
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.abas button.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }

/* ===================== Janelas (modais) ===================== */
dialog.modal {
  border: none; border-radius: 1rem; padding: 0; width: min(36rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem); background: var(--superficie); color: var(--texto);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
dialog.modal.largo { width: min(54rem, calc(100vw - 1.5rem)); }
dialog.modal::backdrop { background: rgba(10, 20, 30, .55); }
dialog.modal > header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); z-index: 2;
}
dialog.modal > header h2 { font-size: 1.15rem; }
.fechar {
  all: unset; cursor: pointer; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: .6rem; color: var(--texto-2);
}
.fechar:hover { background: var(--superficie-2); }
.fechar .ic { width: 1.4rem; height: 1.4rem; }
.modal-corpo { padding: 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-acoes { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; padding-top: .25rem; }
.modal-acoes .espaco { flex: 1; }
.info-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem 1rem; font-size: .95rem; }
.info-grade > div > span:first-child { display: block; font-size: .78rem; color: var(--texto-2); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 560px) {
  dialog.modal, dialog.modal.largo {
    width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 1.1rem 1.1rem 0 0; max-height: 94vh;
  }
  .modal-acoes { flex-direction: column-reverse; }
  .modal-acoes .botao { width: 100%; }
  .modal-acoes .espaco { display: none; }
}

/* ===================== Avisos rápidos ===================== */
#toasts { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 1000; max-width: calc(100vw - 2rem); }
.toast {
  background: var(--texto); color: var(--superficie); padding: .8rem 1.1rem; border-radius: .75rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: .95rem; font-weight: 600; animation: entra .2s;
}
.toast.erro { background: var(--perigo); color: #fff; }
.toast.ok { background: var(--ok); color: var(--sobre-ok); }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 860px) { #toasts { left: 1rem; right: 1rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); } }

/* ===================== Login ===================== */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login .card { width: min(28rem, 100%); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.05rem; }
.login #esqueci { align-self: center; }
.login-topo { display: flex; align-items: center; gap: .9rem; }
.login-topo h1 { font-size: 1.5rem; }
.login-ic { width: 3.2rem; height: 3.2rem; border-radius: .9rem; background: var(--primaria); color: var(--sobre-primaria); display: grid; place-items: center; flex-shrink: 0; }
.login-ic .ic { width: 1.7rem; height: 1.7rem; }
.logo-login { display: block; width: min(17rem, 85%); height: auto; margin: 0 auto .2rem; border-radius: .8rem; }
.logo-menu { display: block; width: 100%; max-width: 13.5rem; height: auto; border-radius: .5rem; }

/* ===================== Início ===================== */
/* Tons neutros; a cor aparece só no botão de vender e no que pede atenção */
.inicio { display: flex; flex-direction: column; gap: 1.1rem; }
.inicio-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.inicio-botoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.inicio-botoes .botao { color: var(--texto-2); }
.saudacao { display: flex; align-items: center; gap: .85rem; }
.atalhos-cabecalho { display: flex; justify-content: flex-end; margin-bottom: -.6rem; }
.lista-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.opcao-atalho, .form label.opcao-atalho { display: flex; flex-direction: row; align-items: center; gap: .65rem; padding: .6rem .7rem; border: 1px solid var(--borda); border-radius: .75rem; cursor: pointer; background: var(--superficie); }
.opcao-atalho:has(input:checked) { border-color: var(--ok); background: var(--ok-suave); }
.opcao-atalho input { width: 1.15rem; height: 1.15rem; flex-shrink: 0; accent-color: var(--ok); }
.opcao-atalho .circulo { width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: var(--superficie-3); color: var(--texto-2); display: grid; place-items: center; flex-shrink: 0; }
.opcao-atalho > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.opcao-atalho small { color: var(--texto-2); font-size: .8rem; }
.saudacao h2 { font-size: 1.6rem; letter-spacing: -.01em; }
.saudacao p { color: var(--texto-2); }
.saudacao p::first-letter { text-transform: uppercase; }
.resumo-dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .85rem; }
.kpi {
  display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1.1rem; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--borda); text-decoration: none; color: var(--texto);
}
a.kpi:hover { border-color: var(--borda-forte); }
.kpi span { display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 650; color: var(--texto-2); }
.kpi strong { font-size: 1.45rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.kpi small { font-size: .82rem; color: var(--texto-3); }
.kpi .ponto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--texto-3); }
.kpi .ponto.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }
.valor-oculto { letter-spacing: .08em; color: var(--texto-2); }
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 1.1rem; align-items: start; }
.inicio-principal { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
@media (max-width: 1100px) { .inicio-grade { grid-template-columns: 1fr; } .inicio-grade .atencao { order: -1; } }
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
.atalho {
  display: flex; flex-direction: column; gap: .65rem; padding: 1rem; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--borda);
  text-decoration: none; color: var(--texto); min-height: 7.6rem; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.atalho:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); transform: translateY(-1px); }
.atalho-texto { display: flex; flex-direction: column; gap: .15rem; }
.atalho .circulo { width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: var(--superficie-3); color: var(--texto-2); display: grid; place-items: center; }
.atalho:hover .circulo { color: var(--texto); }
.atalho .circulo .ic { width: 1.35rem; height: 1.35rem; }
.atalho strong { font-size: 1.05rem; line-height: 1.25; }
.atalho small { font-size: .84rem; color: var(--texto-2); }
.atalho.destaque { background: var(--ok); border-color: var(--ok); color: var(--sobre-ok); grid-column: span 2; }
.atalho.destaque:hover { background: var(--ok-forte); border-color: var(--ok-forte); }
.atalho.destaque small { color: inherit; opacity: .85; }
.atalho.destaque .circulo { background: rgba(255, 255, 255, .2); color: inherit; }
.atalho.destaque strong { font-size: 1.3rem; }
@media (max-width: 460px) {
  .atalhos { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .atalho { min-height: 6.8rem; padding: .85rem; }
}
/* Início minimizado: atalhos em uma linha compacta */
.inicio.minimizado .atalhos { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.inicio.minimizado .atalho { flex-direction: row; align-items: center; min-height: 0; padding: .6rem .75rem; gap: .65rem; grid-column: auto; }
.inicio.minimizado .atalho small { display: none; }
.inicio.minimizado .atalho strong { font-size: .98rem; }
.inicio.minimizado .atalho .circulo { width: 2.1rem; height: 2.1rem; }
.ultimas-vendas .cabecalho-card { padding: 1rem 1.1rem .4rem; }
.lista-vendas { list-style: none; margin: 0; padding: 0 0 .4rem; }
.linha-venda {
  display: flex; align-items: center; gap: .85rem; width: 100%; padding: .7rem 1.1rem; background: none; border: 0;
  border-top: 1px solid var(--borda); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.linha-venda:hover { background: var(--superficie-2); }
.linha-venda > .ic { color: var(--texto-3); flex-shrink: 0; }
.lv-num { font-size: .82rem; color: var(--texto-3); font-variant-numeric: tabular-nums; min-width: 2.6rem; }
.lv-quem { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lv-quem strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.lv-quem small { color: var(--texto-2); font-size: .82rem; }
.lv-total { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atencao h2 { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.contagem { font-size: .78rem; font-weight: 750; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 99px; background: var(--superficie-3); color: var(--texto-2); display: inline-grid; place-items: center; }
.avisos { display: flex; flex-direction: column; }
.alerta-item { display: flex; align-items: center; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--borda); }
.alerta-item:last-child { border-bottom: none; padding-bottom: 0; }
.alerta-item:first-child { padding-top: 0; }
.alerta-item .ic-aviso { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.alerta-item.amarelo .ic-aviso { background: var(--aviso-suave); color: var(--aviso); }
.alerta-item.vermelho .ic-aviso { background: var(--perigo-suave); color: var(--perigo); }
.alerta-item.info .ic-aviso, .alerta-item.azul .ic-aviso { background: var(--superficie-3); color: var(--texto-2); }
.alerta-item p { flex: 1; }
@media (max-width: 560px) { .alerta-item { flex-wrap: wrap; } .alerta-item p { flex-basis: calc(100% - 3.5rem); } .alerta-item .botao { margin-left: 3.25rem; } }
@media (max-width: 560px) {
  .inicio-botoes .botao span { display: none; }
  .resumo-dia { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .75rem .85rem; }
  .kpi strong { font-size: 1.2rem; }
}
@media (max-width: 560px) { .faixa { flex-wrap: wrap; } }
.tudo-certo { display: flex; align-items: center; gap: .6rem; color: var(--ok); font-weight: 650; }
.passos-lista { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-direction: column; }
.passo { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; }
.passo .marca-passo {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--borda-forte); display: grid; place-items: center;
  flex-shrink: 0; font-weight: 700; font-size: .85rem; color: var(--texto-2);
}
.passo.feito .marca-passo { background: var(--ok); border-color: var(--ok); color: var(--sobre-ok); }
.passo .texto { flex: 1; }
.passo.feito .texto { color: var(--texto-2); text-decoration: line-through; }
.progresso { height: .5rem; background: var(--superficie-3); border-radius: 99px; overflow: hidden; }
.progresso div { height: 100%; background: var(--ok); border-radius: 99px; }

/* ===================== Vender ===================== */
.pdv { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 1.1rem; align-items: start; }
.pdv-principal { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.pdv-lado { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5.6rem; max-height: calc(100vh - 6.6rem); overflow-y: auto; }
@media (max-width: 1100px) { .pdv { grid-template-columns: minmax(0, 1fr); } .pdv-lado { position: static; max-height: none; overflow: visible; scroll-margin-top: 5rem; } }
/* total e botões sempre à vista no rodapé do painel (no computador) */
.pdv-fechar { display: flex; flex-direction: column; gap: .8rem; position: sticky; bottom: -1.1rem; margin: 0 -1.1rem -1.1rem; padding: .2rem 1.1rem 1.1rem; background: var(--superficie); border-radius: 0 0 var(--raio) var(--raio); }
@media (max-width: 1100px) { .pdv-fechar { position: static; margin: 0; padding: 0; } }
/* Venda (painel da direita): os produtos que já estão na venda, compactos */
.venda-cabecalho h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.itens-venda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: .75rem; max-height: 46vh; overflow-y: auto; }
@media (max-width: 1100px) { .itens-venda { max-height: none; } }
.item-venda { display: flex; flex-direction: column; gap: .45rem; padding: .7rem .8rem; border-top: 1px solid var(--borda); }
.item-venda:first-child { border-top: 0; }
.iv-topo { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.iv-topo strong:first-child { font-weight: 650; line-height: 1.3; }
.iv-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-baixo { display: flex; align-items: center; gap: .55rem; }
.iv-baixo .passo-qtd button { width: 2.3rem; min-height: 2.3rem; }
.iv-baixo .passo-qtd input { width: 3.6rem; min-height: 2.3rem; }
.iv-preco { flex: 1; color: var(--texto-2); font-size: .82rem; line-height: 1.25; }
.iv-tirar { min-height: 2.3rem; padding: .2rem .45rem; }
/* Catálogo de produtos na tela de vender (como na loja online) */
.catalogo-pdv .cabecalho-card { padding-bottom: .2rem; }
.catalogo-pdv .cabecalho-card h2 { display: flex; align-items: center; gap: .45rem; }
.catalogo-pdv .cabecalho-card h2 small { font-weight: 500; font-size: .85rem; }
.categorias-pdv { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 1.1rem .2rem; scrollbar-width: none; }
.categorias-pdv::-webkit-scrollbar { display: none; }
.categorias-pdv button {
  font: inherit; font-size: .88rem; font-weight: 600; white-space: nowrap; padding: .4rem .85rem; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto-2); min-height: 2.3rem;
}
.categorias-pdv button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
/* Categoria na janela do produto: todas à vista para tocar e escolher, e o botão de criar uma nova */
.cat-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.cat-chips button {
  font: inherit; font-size: .88rem; font-weight: 600; padding: .4rem .85rem; border-radius: 99px; cursor: pointer; min-height: 2.3rem;
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto-2); display: inline-flex; align-items: center; gap: .3rem;
}
.cat-chips button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
.cat-chips .cat-nova { border-style: dashed; color: var(--primaria); border-color: var(--primaria); background: transparent; }
.cat-chips .cat-nova .ic { width: 1rem; height: 1rem; }
.cat-nova-linha { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.cat-nova-linha input { flex: 1 1 14rem; }
.catalogo { padding: .9rem 1.1rem 1.1rem; }
.catalogo.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .7rem; }
.catalogo.lista { display: flex; flex-direction: column; gap: .45rem; }
.catalogo > .vazio { grid-column: 1 / -1; }
.pdv-prod {
  position: relative; display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: .8rem; overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.pdv-prod:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.pdv-prod.na-venda { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.pp-tocar {
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; flex: 1;
  background: none; border: 0; padding: 0; width: 100%; transition: transform .08s;
}
.pp-tocar:active { transform: scale(.98); }
.pp-tocar:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; border-radius: .8rem; }
/* − 2 sc + : aparece quando o produto já está na venda */
.pp-passo {
  position: absolute; top: .4rem; left: .4rem; right: .4rem; display: flex; align-items: center; justify-content: space-between; gap: .3rem;
  pointer-events: none;
}
.pp-passo button {
  pointer-events: auto; font: inherit; font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.pp-passo .pp-menos { background: var(--superficie); color: var(--perigo); border: 1px solid var(--borda-forte); }
.pp-passo .pp-menos .ic { width: 1rem; height: 1rem; }
.pp-passo .pp-mais { background: var(--ok); color: var(--sobre-ok); }
.pp-passo button:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.pp-foto { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--superficie-2); border-bottom: 1px solid var(--borda); overflow: hidden; }
.pp-foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pp-foto .ic { width: 2.2rem; height: 2.2rem; color: var(--texto-3); }
.pp-info { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem .7rem; flex: 1; }
.pp-cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.pp-nome { font-size: .92rem; font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-preco b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pp-preco small { color: var(--texto-2); }
.pp-estoque { font-size: .78rem; color: var(--ok); font-weight: 600; }
.pp-estoque.pouco { color: var(--aviso); }
.pp-estoque.zero { color: var(--perigo); }
.pdv-prod.sem-estoque .pp-foto, .pdv-prod.sem-estoque .pp-nome { opacity: .6; }
.pp-qtd { background: var(--ok); color: var(--sobre-ok); font-size: .78rem; font-weight: 750; padding: .2rem .55rem; border-radius: 99px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); white-space: nowrap; }
.pp-add { position: absolute; top: .45rem; right: .45rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: var(--sobre-ok); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.pp-add .ic { width: 1.1rem; height: 1.1rem; }
/* lista: uma linha por produto (bom para quem tem muitos produtos sem foto) */
.catalogo.lista .pdv-prod { flex-direction: row; align-items: center; }
.catalogo.lista .pp-tocar { flex-direction: row; align-items: center; gap: .75rem; padding: .45rem .6rem; }
.catalogo.lista .pp-passo { position: static; flex-shrink: 0; padding-right: .6rem; gap: .45rem; }
.catalogo.lista .pp-foto { width: 2.9rem; height: 2.9rem; aspect-ratio: auto; border: 0; border-radius: .5rem; flex-shrink: 0; }
.catalogo.lista .pp-foto .ic { width: 1.4rem; height: 1.4rem; }
.catalogo.lista .pp-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome preco" "estoque preco"; align-items: center; column-gap: .8rem; padding: 0; }
.catalogo.lista .pp-cat { display: none; }
.catalogo.lista .pp-nome { grid-area: nome; -webkit-line-clamp: 1; }
.catalogo.lista .pp-preco { grid-area: preco; text-align: right; }
.catalogo.lista .pp-estoque { grid-area: estoque; }
.catalogo.lista .pp-qtd { box-shadow: none; }
.catalogo.lista .pp-add { position: static; flex-shrink: 0; order: 4; }
@media (max-width: 520px) {
  .catalogo { padding: .7rem; }
  .catalogo.grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}
.pdv-lado details { border: 1px solid var(--borda); border-radius: .7rem; }
.pdv-lado summary {
  cursor: pointer; font-weight: 600; font-size: .95rem; padding: .7rem .85rem; display: flex; align-items: center; gap: .5rem;
  list-style: none; min-height: var(--toque);
}
.pdv-lado summary::-webkit-details-marker { display: none; }
.pdv-lado summary::after { content: '+'; margin-left: auto; font-size: 1.3rem; color: var(--texto-2); line-height: 1; }
.pdv-lado details[open] summary::after { content: '−'; }
.det-corpo { display: flex; flex-direction: column; gap: .8rem; padding: 0 .85rem .85rem; }
.det-corpo .det-corpo { padding: 0; }
.busca { position: relative; }
.busca .ic-busca { position: absolute; left: 1rem; top: 1.05rem; width: 1.45rem; height: 1.45rem; color: var(--texto-2); pointer-events: none; z-index: 1; }
.busca-input {
  font-size: 1.15rem; padding: .8rem 1rem .8rem 3.1rem; min-height: 3.6rem; border-width: 2px; border-radius: .8rem;
  box-shadow: var(--sombra);
}
.busca-simples { position: relative; }
.busca-simples .ic-busca { top: .75rem; left: .8rem; width: 1.25rem; height: 1.25rem; }
.busca-simples input { padding-left: 2.6rem; }
.sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 30; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: .8rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  max-height: min(26rem, 60vh); overflow-y: auto;
}
.sug {
  all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .7rem 1rem; min-height: 3.4rem; cursor: pointer; border-bottom: 1px solid var(--borda);
}
.sug:last-child { border-bottom: none; }
.sug small { display: block; color: var(--texto-2); font-size: .82rem; }
.sug:hover, .sug.ativa { background: var(--primaria-suave); }
.sug-vazio { padding: .9rem 1rem; color: var(--texto-2); }
.sug-novo { color: var(--primaria); font-weight: 650; justify-content: flex-start; }
.vazio-pdv { padding: 1.6rem 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.vazio-pdv ol { text-align: left; margin: 0; padding-left: 1.3rem; color: var(--texto-2); display: flex; flex-direction: column; gap: .3rem; }
.passo-qtd { display: inline-flex; align-items: stretch; border: 1px solid var(--borda-forte); border-radius: .6rem; overflow: hidden; background: var(--superficie); vertical-align: middle; }
.passo-qtd button {
  all: unset; width: 2.6rem; min-height: 2.6rem; display: grid; place-items: center; cursor: pointer;
  font-size: 1.35rem; font-weight: 700; color: var(--primaria);
}
.passo-qtd button:hover { background: var(--primaria-suave); }
.passo-qtd button:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.passo-qtd input {
  border: none; border-radius: 0; width: 4.4rem; text-align: center; min-height: 2.6rem; padding: .3rem;
  border-left: 1px solid var(--borda); border-right: 1px solid var(--borda); font-weight: 650;
}
.passo-qtd input:focus { outline-offset: -3px; }
.unidade { color: var(--texto-2); font-size: .85rem; margin-left: .4rem; }
.input-qtd { width: 6rem; text-align: right; }
.totais { border-top: 1px solid var(--borda); padding-top: .8rem; display: flex; flex-direction: column; gap: .25rem; font-size: .95rem; }
.totais div { display: flex; justify-content: space-between; }
.totais .total { font-size: 1.9rem; font-weight: 800; padding-top: .3rem; }
.acoes-pdv { display: flex; flex-direction: column; gap: .55rem; }
.so-largo { display: inline; }
.espaco-barra { display: none; }
.barra-total-movel { display: none; }
@media (max-width: 1100px) {
  .espaco-barra { display: block; height: 4.5rem; }
  .barra-total-movel {
    display: flex; align-items: center; gap: .8rem; position: fixed; left: 15.5rem; right: 0; bottom: 0; z-index: 15;
    padding: .65rem 1rem; background: var(--superficie); border-top: 1px solid var(--borda); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  }
  .barra-total-movel > div, .barra-total-movel .ver-venda { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
  .ver-venda { all: unset; cursor: pointer; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
  .ver-venda small { display: inline-flex; align-items: center; gap: .3rem; color: var(--texto-2); }
  .ver-venda small .ic { width: .95rem; height: .95rem; }
  .barra-total-movel strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
}
@media (max-width: 860px) {
  .barra-total-movel { left: 0; bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
  .espaco-barra { height: 5rem; }
}
@media (max-width: 640px) { .so-largo { display: none; } }
@media (hover: none) { .so-teclado { display: none; } }

/* Pagamento */
.pag-total { text-align: center; color: var(--texto-2); font-weight: 600; }
.pag-total strong { display: block; font-size: 2.5rem; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1.15; }
.pergunta { font-size: 1.1rem; font-weight: 700; text-align: center; }
.formas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .65rem; }
.forma {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  padding: .9rem .5rem; min-height: 6.2rem; border: 2px solid var(--borda); border-radius: .9rem; background: var(--superficie);
  cursor: pointer; font-weight: 700; text-align: center; line-height: 1.25;
}
.forma .ic { width: 2.1rem; height: 2.1rem; color: var(--primaria); }
.forma:hover { border-color: var(--primaria); background: var(--primaria-suave); }
.forma:focus-visible { outline: 3px solid var(--foco); }
@media (max-width: 420px) { .formas-grade { grid-template-columns: 1fr 1fr; } }
.voltar { align-self: flex-start; }
.forma-escolhida { display: flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; }
.forma-escolhida .ic { width: 1.8rem; height: 1.8rem; color: var(--primaria); }
.campo-grande input { font-size: 1.7rem; min-height: 3.8rem; font-weight: 700; text-align: center; }
.campo-grande .campo-rs > span { font-size: 1.2rem; }
[data-gaveta-vazia] { align-self: flex-start; justify-self: start; width: auto; }
.notas-rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; }
.troco-box { text-align: center; padding: .9rem; border-radius: .8rem; background: var(--superficie-2); font-weight: 700; font-size: 1.05rem; }
.troco-box strong { display: block; font-size: 2.2rem; line-height: 1.2; }
.troco-box.ok { background: var(--ok-suave); color: var(--ok); }
.troco-box.falta { background: var(--perigo-suave); color: var(--perigo); }
.pag-linha { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .5rem; align-items: center; }
.pag-linha label { font-size: .95rem; }
@media (max-width: 460px) { .pag-linha { grid-template-columns: 1fr auto; } .pag-linha label { grid-column: 1 / -1; } }
.sucesso-ic { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--ok-suave); color: var(--ok); display: grid; place-items: center; margin: 0 auto; }
.sucesso-ic .ic { width: 2.3rem; height: 2.3rem; }
.centro { text-align: center; }

.barras { display: flex; flex-direction: column; gap: .45rem; }
.barra-item { display: grid; grid-template-columns: 5.5rem 1fr 7rem; gap: .65rem; align-items: center; font-size: .9rem; }
.barra-item .trilho { height: .9rem; background: var(--superficie-3); border-radius: .3rem; overflow: hidden; }
.barra-item .preenchido { height: 100%; background: var(--primaria); border-radius: .3rem; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 900px) { .grade-2 { grid-template-columns: 1fr; } }

/* Caixa */
.caixa-status { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.caixa-status .circulo { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.caixa-status .circulo .ic { width: 1.6rem; height: 1.6rem; }
.caixa-status.aberto .circulo { background: var(--ok-suave); color: var(--ok); }
.caixa-status.fechado .circulo { background: var(--aviso-suave); color: var(--aviso); }
.caixa-status > div { flex: 1; min-width: 12rem; }
.caixa-status h2 { font-size: 1.25rem; }
.gaveta { text-align: center; padding: 1rem; background: var(--superficie-2); border-radius: var(--raio); }
.gaveta span { color: var(--texto-2); font-weight: 600; }
.gaveta strong { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; }

/* Ajuda */
.ajuda { display: flex; flex-direction: column; gap: .6rem; }
.ajuda details { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.ajuda summary {
  cursor: pointer; padding: .95rem 1.1rem; font-weight: 700; font-size: 1.02rem; list-style: none;
  display: flex; align-items: center; gap: .75rem; min-height: 3.4rem;
}
.ajuda summary::-webkit-details-marker { display: none; }
.ajuda summary .ic { color: var(--primaria); width: 1.4rem; height: 1.4rem; }
.ajuda summary::after { content: '+'; margin-left: auto; font-size: 1.4rem; color: var(--texto-2); line-height: 1; }
.ajuda details[open] summary::after { content: '−'; }
.ajuda .resposta { padding: 0 1.1rem 1.1rem 3.25rem; }
.ajuda ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
@media (max-width: 560px) { .ajuda .resposta { padding-left: 1.1rem; } }

/* ===================== Impressão (comprovante) ===================== */
#impressao { display: none; }
.recibo { font: 13px/1.4 ui-monospace, "Courier New", monospace; color: #000; max-width: 80mm; margin: 0 auto; }
.recibo h2 { font-size: 16px; text-align: center; margin: 0; }
.recibo h3 { font-size: 14px; text-align: center; margin: 8px 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 4px 0; }
.recibo .centro { text-align: center; }
.recibo p { margin: 2px 0; }
.recibo table { width: 100%; border-collapse: collapse; }
.recibo td { vertical-align: top; padding: 1px 0; }
.recibo .linha-total { border-top: 1px dashed #000; margin-top: 6px; padding-top: 4px; }
.recibo .linha-total div { display: flex; justify-content: space-between; }
.recibo .grande { font-size: 16px; font-weight: 700; }
.recibo .rodape { margin-top: 10px; text-align: center; border-top: 1px dashed #000; padding-top: 6px; }
@media print {
  @page { margin: 6mm; }
  html, html.letra-grande { font-size: 16px; }
  body { background: #fff; }
  body > *:not(#impressao) { display: none !important; }
  #impressao { display: block; }
}
.card > .info-grade + .grade-2 { margin-top: 1.25rem; }

/* ===================== Configurações em abas ===================== */
.abas-config {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: .3rem; margin-bottom: 1.1rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.abas-config a {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border-radius: .6rem; white-space: nowrap;
  color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: .92rem; min-height: 2.6rem;
}
.abas-config a:hover { background: var(--superficie-2); color: var(--texto); }
.abas-config a.ativa { background: var(--superficie-3); color: var(--texto); font-weight: 700; box-shadow: inset 0 -2px 0 var(--primaria); }
.campo-prefixo { display: flex; align-items: stretch; border: 1px solid var(--borda-forte); border-radius: .65rem; overflow: hidden; background: var(--superficie); }
.campo-prefixo > span { display: flex; align-items: center; padding: 0 .2rem 0 .75rem; color: var(--texto-2); background: var(--superficie-2); white-space: nowrap; font-size: .92rem; }
.campo-prefixo input { border: 0; border-radius: 0; min-width: 0; flex: 1; }
.campo-prefixo:focus-within { outline: 3px solid var(--foco); outline-offset: 1px; }
.link-externo { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .9rem; font-weight: 600; width: fit-content; }
.endereco-loja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .endereco-loja { grid-template-columns: 1fr; } }
.endereco-campos { display: flex; flex-direction: column; gap: .85rem; }
.campo-cep input { max-width: 11rem; }
.linha-rua { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: .7rem; }
.endereco-mapa { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie-2); }
.mapa.mapa-pequeno { height: 17rem; }
.endereco-previa { display: flex; align-items: flex-start; gap: .5rem; color: var(--texto-2); font-size: .92rem; background: var(--superficie-2); border-radius: .6rem; padding: .6rem .8rem; }
.endereco-previa b { color: var(--texto); }
/* Horário de funcionamento por dia */
.horario { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.horario-dia { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: .55rem .9rem; border-top: 1px solid var(--borda); background: var(--superficie); }
.horario-dia:first-child { border-top: 0; }
.horario-dia.fechado { background: var(--superficie-2); }
.horario-horas { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.horario-horas input { width: 8rem; min-height: 2.5rem; }
.horario-horas span { color: var(--texto-2); }
.horario-fechado { display: none; color: var(--texto-3); font-weight: 600; }
.horario-dia.fechado .horario-horas { display: none; }
.horario-dia.fechado .horario-fechado { display: block; }
@media (max-width: 520px) { .horario-dia { grid-template-columns: 1fr; gap: .4rem; } }
.interruptor, .form label.interruptor { display: inline-flex; flex-direction: row; align-items: center; gap: .6rem; cursor: pointer; width: auto; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trilho-interruptor { width: 2.6rem; height: 1.5rem; border-radius: 99px; background: var(--borda-forte); position: relative; transition: background .15s; flex-shrink: 0; }
.trilho-interruptor::after { content: ''; position: absolute; top: .18rem; left: .18rem; width: 1.14rem; height: 1.14rem; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.interruptor input:checked + .trilho-interruptor { background: var(--ok); }
.interruptor input:checked + .trilho-interruptor::after { transform: translateX(1.1rem); }
.interruptor input:focus-visible + .trilho-interruptor { outline: 3px solid var(--foco); outline-offset: 2px; }
/* Página da loja com IA: escolha do estilo, editor e prévia */
.modelos-pagina { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.modelo-pagina { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--borda-forte); border-radius: .7rem; cursor: pointer; background: var(--superficie); }
.modelo-pagina span { display: flex; flex-direction: column; }
.modelo-pagina small { color: var(--texto-2); font-size: .82rem; }
.modelo-pagina:has(input:checked) { border-color: var(--texto-2); background: var(--superficie-3); }
.pagina-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.2rem; align-items: start; border-top: 1px solid var(--borda); padding-top: 1rem; }
@media (max-width: 1000px) { .pagina-editor { grid-template-columns: 1fr; } }
.pagina-previa { position: sticky; top: 5.5rem; border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: .7rem; background: var(--fundo); }
.pagina-previa > .dica { display: block; margin-bottom: .5rem; }
.linha-destaque { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .6rem; }
/* A página em si (sistema e loja online) */
.pagina-loja { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.2rem; }
.pl-topo { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.6rem 1.4rem; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); }
.pl-topo h2 { font-size: clamp(1.4rem, 3.5vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; }
.pl-topo p { color: var(--texto-2); max-width: 46rem; font-size: 1.03rem; }
.pl-selo { font-size: .8rem; font-weight: 750; padding: .2rem .65rem; border-radius: 99px; background: var(--marca-destaque, var(--primaria)); color: var(--sobre-destaque, var(--sobre-primaria)); }
.pl-destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem; }
.pl-destaque { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem .9rem; border-radius: .75rem; background: var(--superficie); border: 1px solid var(--borda); }
.pl-destaque div { display: flex; flex-direction: column; gap: .15rem; }
.pl-destaque small { color: var(--texto-2); font-size: .86rem; }
.pl-ic { width: 2.3rem; height: 2.3rem; border-radius: .65rem; background: var(--superficie-3); color: var(--marca-principal, var(--texto)); display: grid; place-items: center; flex-shrink: 0; }
.pl-titulo-vitrine { font-size: 1.1rem; }
.pl-vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.pl-produto { display: flex; flex-direction: column; gap: .3rem; padding: .6rem; border: 1px solid var(--borda); border-radius: .7rem; background: var(--superficie); font-size: .85rem; }
.pl-foto { aspect-ratio: 1; border-radius: .5rem; background: var(--superficie-3); display: grid; place-items: center; overflow: hidden; color: var(--texto-3); }
.pl-foto img { width: 100%; height: 100%; object-fit: cover; }
.pl-rodape { text-align: center; color: var(--texto-2); font-weight: 600; }
.modelo-promocao .pl-topo { background: var(--marca-principal, var(--menu)); border-color: transparent; color: #fff; }
.modelo-promocao .pl-topo p { color: rgba(255, 255, 255, .85); }
.modelo-moderno .pl-topo { background: transparent; border: 0; padding: .6rem 0; }
.modelo-moderno .pl-destaque { border: 0; background: var(--superficie-2); }
.modelo-obra .pl-topo { border-left: 5px solid var(--marca-destaque, var(--primaria)); }
/* Aberto agora (loja online) */
.aberto-agora { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .92rem; margin: 0 0 .9rem; flex-wrap: wrap; }
.aberto-agora i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--texto-3); }
.aberto-agora.sim { color: var(--ok); }
.aberto-agora.sim i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }
.aberto-agora.nao { color: var(--texto-2); }
.aberto-agora small { font-weight: 400; color: var(--texto-2); }
/* Escolha do plano (Assinatura) */
.planos-escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem; margin-top: .9rem; }
.plano-escolha { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem; border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); }
.plano-escolha.atual { border-color: var(--ok); }
.plano-escolha.pedido { box-shadow: 0 0 0 3px var(--primaria-suave); border-color: var(--primaria); }
.pe-topo { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.pe-preco { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pe-preco small { font-size: .85rem; font-weight: 500; color: var(--texto-2); }
.plano-escolha .lista-recursos { margin: 0; }
.plano-escolha [data-trocar] { margin-top: auto; }

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

/* ===================== Quadro de orçamentos (Kanban) ===================== */
.quadro { display: grid; grid-template-columns: repeat(var(--colunas, 5), minmax(15rem, 1fr)); gap: .85rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.quadro-coluna { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); display: flex; flex-direction: column; min-height: 12rem; transition: border-color .12s, background .12s; }
.quadro-coluna.alvo { border-color: var(--texto-2); border-style: dashed; background: var(--superficie-3); }
.quadro-coluna header { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-bottom: 1px solid var(--borda); }
.quadro-coluna header div { display: flex; flex-direction: column; line-height: 1.25; }
.quadro-coluna header small { color: var(--texto-2); font-size: .8rem; }
.quadro-ic { width: 2rem; height: 2rem; border-radius: .55rem; background: var(--superficie); color: var(--texto-2); display: grid; place-items: center; flex-shrink: 0; }
.quadro-coluna[data-coluna="convertido"] .quadro-ic { color: var(--ok); }
.quadro-coluna[data-coluna="cancelado"] .quadro-ic { color: var(--perigo); }
.quadro-cartoes { display: flex; flex-direction: column; gap: .55rem; padding: .7rem; max-height: 70vh; overflow-y: auto; }
.quadro-cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: .7rem; padding: .7rem .8rem;
  display: flex; flex-direction: column; gap: .2rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.quadro-cartao[draggable="true"] { cursor: grab; }
.quadro-cartao:hover { border-color: var(--borda-forte); }
.quadro-cartao.arrastando { opacity: .45; }
.quadro-cartao.vencido { border-left: 3px solid var(--perigo); }
.qc-topo { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.qc-topo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-num { font-size: .78rem; color: var(--texto-3); }
.qc-valor { font-weight: 750; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.quadro-cartao small { color: var(--texto-2); font-size: .8rem; }
.qc-mover select { margin-top: .35rem; min-height: 2.1rem; padding: .2rem .5rem; font-size: .84rem; }
.quadro-vazio { color: var(--texto-3); font-size: .86rem; text-align: center; padding: 1.2rem .5rem; }
@media (hover: hover) and (pointer: fine) { .qc-mover { display: none; } .quadro-cartao:focus-within .qc-mover, .quadro-cartao:hover .qc-mover { display: block; } }

/* ===================== Pedidos do site, fotos e contadores ===================== */
.contador {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 99px;
  background: var(--perigo); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1;
}
.menu nav a .contador { margin-left: auto; }
.nav-inferior button { position: relative; }
.nav-inferior .contador { position: absolute; top: .35rem; left: calc(50% + .45rem); }
.chip-pedidos {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 99px;
  font-weight: 650; font-size: .88rem; text-decoration: none; white-space: nowrap;
  background: var(--primaria); color: var(--sobre-primaria); animation: pulsa 2s infinite;
}
@keyframes pulsa { 50% { box-shadow: 0 0 0 5px var(--primaria-suave); } }
@media (max-width: 560px) { .chip-pedidos span { display: none; } .chip-pedidos { padding: .45rem .6rem; } }
.com-miniatura { display: flex; align-items: center; gap: .7rem; }
.miniatura {
  width: 2.6rem; height: 2.6rem; border-radius: .5rem; border: 1px solid var(--borda); background: #fff; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden; color: var(--texto-3);
}
.miniatura img { width: 100%; height: 100%; object-fit: contain; }
.foto-produto { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.foto-previa {
  width: 6.5rem; height: 6.5rem; border-radius: .7rem; border: 1px dashed var(--borda-forte); background: #fff;
  display: grid; place-items: center; overflow: hidden; color: var(--texto-3); flex-shrink: 0;
}
.foto-previa img { width: 100%; height: 100%; object-fit: contain; }
.foto-previa .ic { width: 2rem; height: 2rem; }
label.botao { flex-direction: row; font-size: .875rem; color: var(--texto); }

/* ===================== Endereço, mapa e entregas ===================== */
.endereco { display: grid; gap: .9rem; }
fieldset.sem-borda { border: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .9rem; }
.mapa { height: min(55vh, 28rem); min-height: 16rem; background: var(--superficie-2); z-index: 0; }
.mapa-pequeno { height: 17rem; min-height: 0; border-radius: var(--raio); border: 1px solid var(--borda); }
.barra-mapa { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem 1rem; border-top: 1px solid var(--borda); }
.barra-mapa .espaco { flex: 1; }
.leaflet-container { font: inherit; }
.leaflet-popup-content { font-size: .9rem; line-height: 1.4; }
/* marcador numerado (gota) */
.pino { background: none; border: none; }
.pino span {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #1b5fae; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.pino b { transform: rotate(45deg); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; }
.pino b .ic { width: 17px; height: 17px; stroke-width: 2.4; }
.pino.saiu span { background: #c77700; }
.pino.loja span { background: #157244; }
.pino.casa span { background: #bd2a1c; }
/* ponto aproximado (só a rua ou o bairro): marcador mais claro, com borda tracejada */
.pino.aproximado span { opacity: .78; border-style: dashed; }
/* entregador a caminho */
.veiculo { background: none; border: none; }
.veiculo span {
  position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 50%;
  background: #c77700; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.veiculo span .ic { width: 20px; height: 20px; color: #fff; }
.veiculo.eu span { background: #1b5fae; }
.veiculo .rumo { position: absolute; inset: 0; }
.veiculo .rumo::before {
  content: ''; position: absolute; left: 50%; top: -7px; margin-left: -7px;
  border: 7px solid transparent; border-bottom: 10px solid #c77700; border-top: 0;
}
.veiculo.eu .rumo::before { border-bottom-color: #1b5fae; }
@media (prefers-reduced-motion: no-preference) {
  .veiculo span::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #c77700; animation: onda 2s ease-out infinite;
  }
  .veiculo.eu span::after { border-color: #1b5fae; }
}
@keyframes onda { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.voce-aqui { background: none; border: none; }
.voce-aqui span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #1b73e8; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(27, 115, 232, .35), 0 1px 4px rgba(0, 0, 0, .4); }
.rotulo-mapa { font-weight: 700; font-size: .8rem; }

/* GPS do entregador (tela de entregas) */
.gps { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.gps > div { flex: 1 1 16rem; min-width: 0; }
.gps strong { display: block; }
.gps .luz { width: .8rem; height: .8rem; border-radius: 50%; background: var(--texto-3); flex-shrink: 0; }
.gps.ligado { border-color: var(--ok); background: var(--ok-suave); }
.gps.ligado .luz { background: var(--ok); box-shadow: 0 0 0 4px rgba(21, 114, 68, .2); }
.lista-entregas { display: flex; flex-direction: column; gap: .9rem; }
.entrega { display: flex; flex-direction: column; gap: .65rem; }
.entrega .botoes .botao { flex: 1 1 auto; }
.entrega-topo { display: flex; align-items: center; gap: .75rem; }
.entrega-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entrega-quem strong { font-size: 1.1rem; }
.numero-entrega {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria);
  display: grid; place-items: center; font-weight: 800; flex-shrink: 0;
}
.entrega-endereco { display: flex; gap: .55rem; align-items: flex-start; font-size: 1.05rem; }
.entrega-endereco .ic { color: var(--primaria); margin-top: .15rem; }
@media (max-width: 560px) { .entrega .botoes .botao { flex: 1 1 45%; } }

/* Nota fiscal */
.notas-venda { border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem 1rem; display: grid; gap: .6rem; }
.notas-venda > strong { display: flex; align-items: center; gap: .45rem; }
.nota-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding-top: .5rem; border-top: 1px solid var(--borda); }
.nota-linha .nota-nome { font-weight: 650; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nota-linha small { flex-basis: 100%; }
.nota-linha .botoes { margin-left: auto; }
.cpf-nota { margin-bottom: .2rem; }
.fiscal-produto { border: 1px solid var(--borda); border-radius: var(--raio); padding: .2rem 1rem .8rem; }
.fiscal-produto summary { cursor: pointer; font-weight: 650; padding: .6rem 0; display: flex; align-items: center; gap: .45rem; }
.fiscal-produto[open] summary { margin-bottom: .4rem; }
.fiscal-produto > * + * { margin-top: .8rem; }
.indicador strong.indicador-menor { font-size: 1.15rem; }
.tabela-clicavel tbody tr { cursor: pointer; }
.tabela-clicavel tbody tr:hover, .tabela-clicavel tbody tr:focus-visible { background: var(--superficie-2); outline: none; }

/* Simulador de cores com IA (cores.js) */
.cores { display: grid; gap: 1.1rem; }
.cores-envio h2 { display: flex; align-items: center; gap: .5rem; }
.cores-quadros { display: flex; gap: .5rem; flex-wrap: wrap; }
.cores-quadros img { width: 7rem; height: 5rem; object-fit: cover; border-radius: .5rem; border: 1px solid var(--borda); }
.cores-quadros-pequenos { margin-top: .6rem; }
.cores-quadros-pequenos button { padding: 0; border: 2px solid transparent; border-radius: .6rem; background: none; cursor: pointer; }
.cores-quadros-pequenos button[aria-pressed="true"] { border-color: var(--primaria); }
.cores-quadros-pequenos img { width: 4.5rem; height: 3.2rem; }
.cores-medidas { border: 1px solid var(--borda); border-radius: var(--raio); padding: .2rem 1rem .8rem; }
.cores-medidas summary { cursor: pointer; font-weight: 650; padding: .6rem 0; }
.cores-medidas > * + * { margin-top: .7rem; }
.cores-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 960px) { .cores-grade { grid-template-columns: minmax(0, 1fr); } }
.cores-imagem { display: grid; gap: .8rem; position: sticky; top: 5rem; }
@media (max-width: 960px) { .cores-imagem { position: static; } }
.cores-imagem canvas { width: 100%; height: auto; border-radius: .7rem; cursor: crosshair; touch-action: manipulation; background: var(--superficie-3); }
.cores-ferramentas { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; }
.cores-precisao { display: flex !important; align-items: center; gap: .5rem; font-size: .9rem; grid-template-columns: none !important; }
.cores-info { display: grid; gap: 1.1rem; min-width: 0; }
.cores-info h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.cores-info h3:not(:first-child) { margin-top: 1rem; }
.cores-paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .6rem; }
.cores-amostra { display: flex !important; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .45rem; border: 2px solid var(--borda);
  border-radius: .7rem; background: var(--superficie); color: var(--texto); cursor: pointer; text-align: left; font: inherit; }
.cores-amostra[aria-pressed="true"] { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
.cores-amostra span { width: 100%; height: 2.6rem; border-radius: .45rem; border: 1px solid rgba(0, 0, 0, .12); }
.cores-amostra b { font-size: .85rem; line-height: 1.2; }
.cores-amostra small { color: var(--texto-2); font-size: .75rem; }
.cores-outra input[type="color"] { width: 100%; height: 2.6rem; border: 0; padding: 0; background: none; cursor: pointer; }
.cores-problemas, .cores-passos { padding-left: 1.2rem; display: grid; gap: .4rem; margin: .4rem 0 0; }
.cores-problemas { list-style: none; padding-left: 0; }
.cores-produtos small { display: block; }
.cores-total { display: flex; justify-content: space-between; align-items: baseline; margin: .6rem 0; font-size: 1.05rem; }
.cores-convite { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--texto); margin-bottom: 1rem;
  border: 2px solid var(--marca-destaque, var(--primaria)); }
.cores-convite span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.cores-convite small { color: var(--texto-2); }
.cores-convite-ic { width: 3rem; height: 3rem; border-radius: .8rem; background: var(--primaria-suave); color: var(--primaria); display: grid; place-items: center; flex: none; }
.cores-convite-ic .ic { width: 1.6rem; height: 1.6rem; }
@media (max-width: 560px) { .cores-convite { flex-wrap: wrap; } .cores-convite .botao { width: 100%; } }
.nome-com-avatar { display: inline-flex; align-items: center; gap: .55rem; }