/* Interface do sistema. As cores vêm de negrone-tokens.css (cópia de Desktop\marketing; fonte única da marca).
   Regras do guia: estado nunca só por cor (ícone ou texto junto); ação destrutiva só com contorno. */
/* Fontes hospedadas aqui (licença OFL; textos em fonts/). Sem chamada ao Google Fonts. */
@font-face { font-family: "Inter"; src: url("fonts/Inter-latin.2ff6bf91e4f1.woff2") format("woff2"), url("fonts/Inter-variable.bff0f6e3b9e2.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-latin.924e08df6831.woff2") format("woff2"), url("fonts/Fraunces-variable.df89c7ab0af2.ttf") format("truetype"); font-weight: 500 700; font-style: normal; font-display: swap; }
/* Âmbar vivo para traços de gráfico (taça, termômetro): 3:1 contra o fundo claro; o tom escuro --warning fica para texto. */
:root { --sombra: rgb(0 0 0 / .55); --warning-grafico: #D9730D; --papel: #FFFFFF; --papel-tinta: #111111; --papel-linha: #BDBDBD; --papel-cabec: #ECECEC; --papel-grupo: #D9D9D9; --papel-mudo: #777777; --papel-mudo-2: #444444; }
:root[data-theme="dark"] { --warning-grafico: var(--warning); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warning-grafico: var(--warning); } }
* { box-sizing: border-box; }
html { color-scheme: light dark; }
/* Sem barra de rolagem visível na página inteira (pedido do dono); a rolagem continua por mouse, teclado e toque. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; font: 16px/1.5 Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h2 { font-size: 1.1rem; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.pular:focus { left: 8px; }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px 20px; padding: 10px 20px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.marca { font: 700 1.5rem Fraunces, Georgia, serif; color: var(--text); text-decoration: none; text-transform: lowercase; display: inline-flex; align-items: center; gap: .4em; letter-spacing: -.01em; }
.marca .taca-marca { width: 1.2em; height: auto; color: var(--ptext); }
.topo nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.topo nav::-webkit-scrollbar { display: none; }
.topo nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; color: var(--text-muted); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.topo nav a:hover { background: var(--surface-2); color: var(--text); }
.topo nav a[aria-current="page"] { background: var(--nav-bg); color: var(--nav-fg); box-shadow: inset 0 -3px 0 var(--nav-ul); }
.usuario { display: flex; align-items: center; gap: 10px; }
.r-curto { display: none; }
.empresa { color: var(--text-muted); font-size: .9rem; max-width: clamp(80px, 11vw, 300px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.tema:hover { background: var(--surface-2); }
@media (max-width: 900px) {
  .topo { flex-wrap: wrap; padding: 10px 14px; }
  .topo nav { order: 3; flex-basis: 100%; }
  .empresa { display: none; }
}
/* "Ajustes" (desktop) / "Mais" (celular): Fornecedores, Equipe, Funções, Configurações; no celular também tema e Sair */
.mais { display: block; position: relative; }
.mais summary { list-style: none; cursor: pointer; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--text); }
.mais summary::-webkit-details-marker { display: none; }
.mais summary:hover, .mais[open] summary { background: var(--surface-2); }
.mais-painel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 6px; box-shadow: 0 18px 40px -18px var(--sombra); z-index: 40; display: grid; gap: 2px; }
.mais-painel a, .mais-painel button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 500 1rem Inter, system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.mais-painel a:hover, .mais-painel button:hover { background: var(--surface-2); }
.mais-painel a[aria-current="page"] { color: var(--link); font-weight: 600; }
.mais-painel form { margin: 0; }
.mais-painel .so-mobile { display: none; }
.mais-painel .separador { height: 1px; background: var(--border); margin: 4px 6px; }

/* Celular: a mesma barra de navegação fica fixa embaixo; Fornecedores, tema e Sair vão para o menu "Mais". */
@media (max-width: 640px) {
  /* sem backdrop-filter: ele faria a barra fixa de baixo se prender ao topo em vez da tela */
  .topo { flex-wrap: nowrap; justify-content: space-between; padding: 8px 14px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .empresa { display: inline-block; flex: 1; text-align: right; }
  .usuario .tema, .usuario .form-sair { display: none; }
  .usuario .tema.ap-btn { display: grid; }
  .usuario { flex: 1; min-width: 0; justify-content: flex-end; }
  .mais summary { width: 44px; padding: 0; justify-content: center; border-radius: 50%; font-size: 1.2rem; }
  .mais summary .txt { display: none; }
  .mais-painel .so-mobile { display: flex; }
  .r-longo { display: none; }
  .r-curto { display: block !important; }

  .topo nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; order: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; overflow: visible; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }
  .topo nav a { flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 1px; border-radius: 12px; font-size: .68rem; line-height: 1.15; text-align: center; background: transparent; color: var(--text-muted); }
  .topo nav a .i { font-size: 1.35rem; }
  .topo nav a[aria-current="page"] { background: var(--nav-bg); color: var(--nav-fg); font-weight: 600; box-shadow: inset 0 -3px 0 var(--nav-ul); }
  .topo nav a.so-desktop { display: none; }
}

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: 999px; background: var(--primary); color: var(--on-primary); font: 600 .95rem Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn:active { transform: none; }
.btn.sec { background: transparent; color: var(--text); border-color: var(--border); box-shadow: none; }
.btn.sec:hover { background: var(--surface-2); }
.btn.perigo { background: transparent; color: var(--danger); border-color: var(--danger); box-shadow: none; }
.btn.perigo:hover { background: var(--danger-bg); }
.btn.pequeno { padding: 7px 14px; font-size: .88rem; min-height: 44px; }

/* Cabeçalho de página */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho p { margin: 4px 0 0; color: var(--text-muted); }
.filtro { display: flex; gap: 8px; margin-bottom: 14px; }
.filtro .busca { position: relative; flex: 1; }
.filtro .busca .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.filtro input { padding-left: 40px; }

/* Campos */
input, select, textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; font: inherit; background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primary); }
.form { background: var(--surface); padding: 22px; border-radius: 20px; border: 1px solid var(--border); max-width: 680px; }
.form.largo { max-width: none; }
.form .campos { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 18px; }
.campo { margin: 0; }
.campo label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; }
.campo input[aria-invalid="true"], .campo.invalido input, .campo.invalido select { border-color: var(--danger); }
.acoes-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.erro, .ruim { color: var(--danger); }
small.erro { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-size: .85rem; }
.errorlist { list-style: none; padding: 0; margin: 0 0 12px; color: var(--danger); font-size: .9rem; }

/* Mensagens */
.alerta { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; background: var(--success-bg); color: var(--success); font-weight: 500; animation: entra .35s ease; }
.alerta.error { background: var(--danger-bg); color: var(--danger); }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

/* Tabelas */
.tabela { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; }
th { background: var(--surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr:last-child td, table > tr:last-child td { border-bottom: 0; }
tbody tr, table > tr { transition: background .12s; }
tbody tr:hover, table > tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td input, td select { min-width: 110px; }
td strong.nome { font-weight: 600; }
.sub { display: block; color: var(--text-muted); font-size: .82rem; }
.acoes { text-align: right; }
.acao { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border); color: var(--text); text-decoration: none; font-size: .85rem; font-weight: 600; margin-left: 6px; background: transparent; }
.acao:hover { background: var(--surface-2); }
.acao.perigo { color: var(--danger); border-color: var(--danger); }
.acao.perigo:hover { background: var(--danger-bg); }
.acao.ok { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.acao.ok:hover { background: var(--primary-hover); }

/* Cartões e painel */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px; }
.card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card p { margin: .4rem 0; }
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.kpi .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.kpi .valor { font: 700 1.9rem Fraunces, Georgia, serif; line-height: 1; }
.kpi .rotulo { color: var(--text-muted); font-size: .88rem; margin-top: 4px; }
.kpi.ok .ico { background: var(--success-bg); color: var(--success); }
.kpi.alerta-kpi .ico { background: var(--danger-bg); color: var(--danger); }
.kpi.neutro .ico { background: var(--info-bg); color: var(--info); }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.lista-simples li:last-child { border-bottom: 0; }
.vazio { color: var(--text-muted); }
.vazio-bom { display: flex; gap: 8px; align-items: center; color: var(--success); font-weight: 500; }
.estado-vazio { text-align: center; padding: 48px 20px; background: var(--surface); border: 1.5px dashed var(--border); border-radius: 20px; }
.estado-vazio .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); display: inline-grid; place-items: center; font-size: 1.6rem; color: var(--text-muted); margin-bottom: 12px; }
.estado-vazio p { margin: 0 0 16px; color: var(--text-muted); }
.paginacao { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 8px; }

/* Selo e barra de margem */
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.st-pedido { color: var(--info); background: var(--info-bg); }
.st-recebida { color: var(--success); background: var(--success-bg); }
.barra { display: block; position: relative; width: 96px; height: 6px; border-radius: 999px; margin-top: 6px; background: var(--track); }
.drinks-lista .barra, .tabela .c-margem .barra { height: 10px; width: 130px; margin-top: 8px; }
.barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--bar); border-radius: inherit; animation: cresce .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cresce { from { width: 0; } }
.barra.larga { width: 100%; max-width: 220px; }
.barra.margem-baixa::after { background: var(--danger); }
/* Largura da barra em passos de 5% (classe w0 a w20): evita style inline nos templates. */
.w0{--p:0%}.w1{--p:5%}.w2{--p:10%}.w3{--p:15%}.w4{--p:20%}.w5{--p:25%}.w6{--p:30%}.w7{--p:35%}.w8{--p:40%}.w9{--p:45%}.w10{--p:50%}
.w11{--p:55%}.w12{--p:60%}.w13{--p:65%}.w14{--p:70%}.w15{--p:75%}.w16{--p:80%}.w17{--p:85%}.w18{--p:90%}.w19{--p:95%}.w20{--p:100%}

/* Passo a passo (bar novo) */
.boas-vindas { margin-bottom: 18px; }
.boas-vindas p { margin: 6px 0 0; color: var(--text-muted); }
.progresso { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; font-size: .9rem; }
.passos { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.passo { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px; }
.passo .num-passo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 1.1rem Fraunces, Georgia, serif; background: var(--accent); color: var(--on-accent); grid-row: span 2; }
.passo.feito .num-passo { background: var(--success-bg); color: var(--success); }
.passo h2 { margin: 0; font-size: 1.1rem; }
.passo p { margin: 0; color: var(--text-muted); font-size: .92rem; grid-column: 2; }
.passo .conta { font-size: .85rem; font-weight: 600; color: var(--text-muted); display: block; margin-top: 4px; }
.passo .btn { grid-column: 3; grid-row: 1 / span 2; }
.passo .feito-selo { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 640px) {
  .passo { grid-template-columns: auto 1fr; }
  .passo .btn, .passo .feito-selo { grid-column: 1 / -1; grid-row: auto; width: 100%; min-height: 44px; }
  .passo p { grid-column: 1 / -1; }
}

/* Início com 3+ drinks */
.resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px; margin-bottom: 20px; }
.resumo .grande { font: 700 2.2rem Fraunces, Georgia, serif; line-height: 1; }
.resumo .rotulo { color: var(--text-muted); font-size: .9rem; margin-top: 4px; }
.atencao { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.atencao li { display: flex; align-items: stretch; gap: 8px; }
.linha-link { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--text); text-decoration: none; }
.linha-link:hover { border-color: var(--accent); background: var(--surface-2); }
.linha-link .detalhe { display: block; color: var(--text-muted); font-size: .85rem; }
.linha-link .i.seta { color: var(--text-muted); }
.atencao .btn { min-height: 56px; border-radius: 16px; }
/* alerta com ação (Comprar) fica num cartão só: o link da linha perde a borda própria */
.atencao li.alerta-card { align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 4px 8px 4px 0; }
.atencao li.alerta-card .linha-link { border: 0; background: none; border-radius: 16px 0 0 16px; }
.atencao li.alerta-card .linha-link:hover { background: var(--surface-2); }
.atencao li.alerta-card .btn { min-height: 44px; border-radius: 999px; padding: 8px 18px; }
h2.secao { margin: 0 0 10px; }

/* Filtros em chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: transparent; color: var(--text); font: 600 .9rem Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.chip:hover { background: var(--surface-2); }
.chip[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.tique { position: absolute; top: -4px; bottom: -4px; left: var(--p, 0%); width: 3px; margin-left: -1px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 1.5px var(--surface); }
.legenda-barra { margin: 0 0 12px; color: var(--text-muted); font-size: .85rem; display: flex; align-items: center; gap: 8px; }
.legenda-barra .tique-amostra { display: inline-block; width: 3px; height: 14px; border-radius: 2px; background: var(--text); }

/* Drinks: informação do celular fica escondida no desktop */
.so-celular { display: none; }
/* Menu "⋯" das linhas: o painel abre ao lado do botão, dentro da altura da linha (a tabela corta o que passa dela) */
.menu-acoes { display: inline-block; position: relative; }
.menu-acoes summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; color: var(--text); }
.menu-acoes summary::-webkit-details-marker { display: none; }
.menu-acoes summary:hover, .menu-acoes[open] summary { background: var(--surface-2); }
.menu-acoes .painel { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); z-index: 10; display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; box-shadow: 0 12px 30px -14px var(--sombra); }
.menu-acoes .painel .acao { margin: 0; min-height: 44px; white-space: nowrap; }
.acoes { white-space: nowrap; }
.acoes .acao.ok { margin-right: 6px; }
@media (max-width: 640px) {
  .so-celular { display: block; }
  .so-desktop-celular { display: none; }
  .drinks-lista { border: 0; background: none; overflow: visible; }
  .drinks-lista table, .drinks-lista tbody { display: block; }
  .drinks-lista thead { display: none; }
  .drinks-lista tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome selo" "nome menu"; gap: 4px 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
  .drinks-lista tr[hidden] { display: none; }
  .drinks-lista td { display: block; padding: 0; border: 0; white-space: normal; }
  .drinks-lista td.c-nome { grid-area: nome; }
  .drinks-lista td.c-margem { grid-area: selo; justify-self: end; }
  .drinks-lista td.c-margem .barra { display: none; }
  .drinks-lista td.c-info { grid-area: info; }
  .drinks-lista td.c-acoes { grid-area: menu; justify-self: end; position: relative; }
  .drinks-lista td.so-desktop-celular { display: none; }
  .responsiva td.acoes { overflow: visible; }
}
.c-info .sub { margin: 0; }
.alerta-vazio[hidden] { display: none; }
/* Ficha técnica: formulário + painel de resultado */
.ficha { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.ficha .form-ficha { grid-column: 1; grid-row: 1; max-width: none; }
.painel-resultado { grid-column: 2; grid-row: 1; position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px; display: grid; gap: 10px; }
.topo-painel { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tag-estimativa { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--info); background: var(--info-bg); padding: 3px 10px; border-radius: 999px; }
.res { margin: 0; display: grid; gap: 6px; }
.res > div { display: flex; justify-content: space-between; gap: 12px; }
.res dt { color: var(--text-muted); }
.res dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-selo .selo { font-size: 1.15rem; padding: 6px 14px; }
.msg-margem { margin: 0; font-weight: 500; }
.sugestao { margin: 0; font-weight: 600; color: var(--text); }
.sugestao:empty, .msg-margem:empty { display: none; }
.nota-painel { margin: 0; font-size: .8rem; color: var(--text-muted); }
.linhas-ficha { display: grid; gap: 10px; margin: 10px 0 14px; }
.lf-cab, .linha-ficha { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(70px, .6fr) 44px; gap: 10px; align-items: start; }
.lf-cab { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.linha-ficha[hidden] { display: none; }
.com-unidade { position: relative; }
.com-unidade input { padding-right: 48px; }
.com-unidade .unidade { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .9rem; pointer-events: none; }
.lf-custo { align-self: center; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lf-rem { align-self: start; }
.lf-rem .acao { margin: 0; width: 44px; height: 44px; padding: 0; justify-content: center; }
.res-principal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.res-sobra .rot { color: var(--text-muted); margin-right: 6px; }
.res-sobra strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ver-detalhes { display: none; margin-left: auto; min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--link); font: 600 .9rem Inter, system-ui, sans-serif; cursor: pointer; text-decoration: underline; }
@media (max-width: 900px) {
  /* Faixa compacta e fixa: selo e sobra sempre visíveis; custo, preço e dica ficam em "Ver detalhes". */
  .ficha { grid-template-columns: 1fr; }
  .painel-resultado { grid-column: 1; grid-row: 1; top: 112px; z-index: 5; padding: 10px 14px; gap: 4px; box-shadow: 0 10px 24px -18px var(--sombra); }
  .ficha .form-ficha { grid-column: 1; grid-row: 2; }
  .ver-detalhes { display: inline-block; }
  .res-detalhes { display: none; }
  .painel-resultado.aberto .res-detalhes { display: grid; gap: 8px; }
  .msg-margem { font-size: .88rem; }
}
@media (max-width: 640px) { .painel-resultado { top: 62px; } }
@media (max-width: 640px) {
  .lf-cab { display: none; }
  .linha-ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "ing ing rem" "qtd custo custo"; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
  .lf-ing { grid-area: ing; } .lf-qtd { grid-area: qtd; } .lf-custo { grid-area: custo; } .lf-rem { grid-area: rem; }
}

.nowrap { white-space: nowrap; }
.sem-sublinhado { text-decoration: none; }
a.tema { display: grid; place-items: center; text-decoration: none; }
a.tema[aria-current="page"] { background: var(--surface-2); }
.impacto { margin-bottom: 14px; }
.impacto a { color: var(--text); text-decoration: none; }
.impacto a:hover { color: var(--link); text-decoration: underline; }
.de-para { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.espaco-acima { margin-top: 10px; }
.sem-margem-topo { margin-top: 0; }
.erros-form { margin-bottom: 12px; }
.estado-vazio h2 { margin-bottom: 6px; }
[hidden] { display: none !important; }

/* Login */
body.login-page { min-height: 100vh; }
.login { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 24px 0; }
.login .caixa { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 32px 28px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--brand-vermouth) 45%, transparent); }
.login .marca { font-size: 2.2rem; margin-bottom: 4px; }
.login p.lead { color: var(--text-muted); margin: 0 0 22px; }
.login .btn { width: 100%; margin-top: 6px; padding: 12px; }
.login .campo { margin-bottom: 14px; }

/* Fundo suave */
body::before { content: ""; position: fixed; z-index: -1; width: 520px; height: 520px; border-radius: 50%; background: var(--brand-red); filter: blur(110px); opacity: .1; top: -180px; right: -140px; pointer-events: none; }

@media (max-width: 640px) {
  main { padding: 16px 12px calc(88px + env(safe-area-inset-bottom, 0px)); }
  th, td { padding: 10px 12px; }
  .filtro .btn { display: none; }

  /* Tabelas viram cartões no celular: cada linha é um cartão, cada célula mostra seu rótulo (data-label). */
  .responsiva { border: 0; background: none; overflow: visible; }
  .responsiva table, .responsiva tbody { display: block; }
  .responsiva thead { display: none; }
  .responsiva tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px 14px; margin-bottom: 10px; }
  .responsiva tr:hover { background: var(--surface); }
  .responsiva td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border: 0; white-space: normal; text-align: right; }
  .responsiva td::before { content: attr(data-label); flex: 0 1 46%; min-width: 0; color: var(--text-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  .responsiva td:first-child { font-size: 1.05rem; padding-top: 2px; }
  .responsiva td.acoes { justify-content: flex-end; border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 12px; flex-wrap: wrap; }
  .responsiva td.acoes::before, .responsiva td:empty { display: none; }
  .responsiva td > select, .responsiva td > input:not([type=checkbox]) { flex: 1; min-width: 0; }
  .responsiva td small.erro { flex-basis: 100%; }
  .responsiva td:has(small.erro) { flex-wrap: wrap; }
  .barra { margin-left: auto; }
}
/* ===== Eventos ===== */
.voltar { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--link); font-weight: 600; text-decoration: none; }
.voltar .i { transform: rotate(180deg); }
.cab-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cab-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.cab-card h2 { margin: 0; }
.ev-orcamento { color: var(--info); background: var(--info-bg); }
.ev-confirmado { color: var(--success); background: var(--success-bg); }
.ev-realizado { color: var(--text-muted); background: var(--surface-2); }
.ev-cancelado { color: var(--danger); background: var(--danger-bg); }
.evs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ev-item[hidden] { display: none; }
.ev { display: grid; gap: 10px; height: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 16px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.ev:hover { border-color: var(--accent); transform: translateY(-2px); }
.ev.prox { border-color: var(--ptext); box-shadow: 0 0 0 1px var(--ptext); }
.ev .l1 { display: flex; gap: 12px; align-items: center; }
.ev .data { display: grid; justify-items: center; background: var(--surface-2); border-radius: 14px; padding: 6px 12px; min-width: 58px; }
.ev .data b { font: 700 1.5rem Fraunces, Georgia, serif; line-height: 1; }
.ev .data span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.ev .t { display: grid; min-width: 0; }
.ev .t b { font: 700 1.08rem Fraunces, Georgia, serif; overflow-wrap: anywhere; }
.ev .t span:not(.sr) { font-size: .86rem; color: var(--text-muted); }
.ev .l2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--border); padding-top: 10px; }
.res-ev { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-ev .rot { color: var(--text-muted); font-size: .84rem; }
.aviso-dias { width: fit-content; color: var(--warning); background: var(--warning-bg); padding: 3px 12px; border-radius: 999px; font-weight: 600; font-size: .84rem; }
.aviso-dias[hidden] { display: none; }

.det { display: grid; gap: 16px; }
.det-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
@media (min-width: 760px) {
  .det { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .res-col { position: sticky; top: 76px; }
}
.resultado { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 18px; display: grid; gap: 12px; }
.res-topo { display: flex; gap: 14px; align-items: center; }
.copo { width: 64px; height: auto; flex: none; }
.copo-vidro { fill: var(--surface-2); }
.copo-liquido { fill: var(--warning); transition: fill .3s; }
.copo[data-faixa="baixa"] .copo-liquido { fill: var(--danger); }
.copo[data-faixa="media"] .copo-liquido { fill: var(--warning-grafico); }
.copo[data-faixa="alta"] .copo-liquido { fill: var(--success); }
.copo-borda { fill: none; stroke: var(--text); stroke-opacity: .55; stroke-width: 2; stroke-linejoin: round; }
.copo-laranja { fill: var(--accent); }
.rot-res { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rot-res.rot-perdendo, .rot-res.rot-abaixo_da_minima { color: var(--danger); }
.rot-res.rot-abaixo_da_meta { color: var(--warning); }
.rot-res.rot-na_meta { color: var(--success); }
.grande-res { font: 700 1.9rem Fraunces, Georgia, serif; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.msg-res { margin: 0; font-weight: 500; }
.kvs { margin: 0; display: grid; }
.kvs > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.kvs > div:last-child { border: 0; }
.kvs dt { color: var(--text-muted); }
.kvs dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.simulador { display: grid; gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.simulador label { font-weight: 600; font-size: .9rem; }
.simulador input[type=range] { width: 100%; height: 44px; padding: 0; border: 0; accent-color: var(--primary); background: none; }
.nao-salva { margin-left: 6px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--info); background: var(--info-bg); padding: 2px 8px; border-radius: 999px; }
.sim-valor { min-height: 1.3em; color: var(--text-muted); font-size: .9rem; }
.sim-valor:empty { display: none; }
.link-sim { font-size: .88rem; }

.abas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.abas::-webkit-scrollbar { display: none; }
.abas button { flex: none; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: 600 .9rem Inter, system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.abas button:hover { background: var(--surface-2); }
.abas button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.contagem { background: var(--danger-bg); color: var(--danger); border: 1px solid currentColor; border-radius: 999px; font-size: .75rem; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.painel-aba { display: grid; gap: 12px; min-width: 0; align-content: start; }
.painel-aba .tabela { margin-bottom: 0; }
.stp-lista { list-style: none; margin: 0; padding: 0; }
.stp { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.stp:last-child { border: 0; }
.stp b { display: block; }
.stp span { font-size: .84rem; color: var(--text-muted); }
.qtd-fixa { font: 700 1.4rem Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; }
.dica { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border-radius: 14px; padding: 10px 14px; font-size: .9rem; margin: 0 0 14px; }
.dica .i { margin-top: 3px; color: var(--info); }
.painel-aba .dica { margin: 0; }
.camadas { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.camadas i { display: block; height: 100%; flex: 0 1 0; }
.g0{flex-grow:0}.g1{flex-grow:1}.g2{flex-grow:2}.g3{flex-grow:3}.g4{flex-grow:4}.g5{flex-grow:5}.g6{flex-grow:6}.g7{flex-grow:7}.g8{flex-grow:8}.g9{flex-grow:9}.g10{flex-grow:10}
.g11{flex-grow:11}.g12{flex-grow:12}.g13{flex-grow:13}.g14{flex-grow:14}.g15{flex-grow:15}.g16{flex-grow:16}.g17{flex-grow:17}.g18{flex-grow:18}.g19{flex-grow:19}.g20{flex-grow:20}
.c-ing { background: var(--layer-1); } .c-eq { background: var(--layer-2); } .c-ex { background: var(--layer-3); } .c-ou { background: var(--layer-other); } .c-im { background: var(--text-muted); }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legenda li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: 8px; }
.legenda s { width: 12px; height: 12px; border-radius: 4px; display: inline-block; text-decoration: none; }
.qtd-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.qtd-stepper button { width: 44px; height: 44px; border: 0; background: var(--surface-2); color: var(--text); font-size: 1.3rem; cursor: pointer; }
.qtd-stepper button:hover { background: var(--border); }
.qtd-stepper input { width: 84px; border: 0; border-radius: 0; text-align: center; font-weight: 700; min-width: 0; }
.responsiva td .qtd-stepper { flex: 1; justify-content: space-between; }
@media (max-width: 759px) {
  .res-col { order: -1; position: sticky; top: 112px; z-index: 5; }
  .resultado { padding: 10px 14px; gap: 6px; box-shadow: 0 10px 24px -18px var(--sombra); }
  .copo { width: 46px; }
  .grande-res { font-size: 1.4rem; margin-bottom: 2px; }
  .res-detalhes { display: none; }
  .resultado.aberto .res-detalhes { display: grid; gap: 10px; }
  .ver-detalhes-ev { display: inline-block; }
}
@media (min-width: 760px) { .ver-detalhes-ev { display: none; } }
@media (min-width: 760px) and (max-width: 1040px) { .res-col { top: 124px; } }
@media (max-width: 640px) { .res-col { top: 62px; } }

/* Lista para imprimir: papel branco, preto sobre branco, igual em qualquer tema */
.pagina-folha { max-width: 920px; }
.barra-folha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.folha { background: var(--papel); color: var(--papel-tinta); border-radius: 8px; padding: clamp(16px, 4vw, 34px); box-shadow: 0 24px 50px -28px var(--sombra); display: grid; gap: 14px; font-family: Inter, system-ui, sans-serif; }
.folha h1, .folha h2 { font-family: Fraunces, Georgia, serif; color: var(--papel-tinta); margin: 0; }
.folha h1 { font-size: 1.6rem; }
.folha h2 { font-size: 1.15rem; border-bottom: 2px solid var(--papel-tinta); padding-bottom: 4px; margin-top: 6px; }
.folha p { margin: 2px 0; }
.folha-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.folha-marca { font: 700 1.3rem Fraunces, Georgia, serif; text-transform: lowercase; }
.folha table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.folha th { background: var(--papel-cabec); color: var(--papel-tinta); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.folha th, .folha td { border: 1px solid var(--papel-linha); padding: 8px 10px; text-align: left; white-space: normal; }
.folha tr.grupo th { background: var(--papel-grupo); font-size: .8rem; }
.folha td.num, .folha th.num { text-align: right; }
.folha .cx-col { text-align: center; width: 76px; }
.folha .em-col { width: 90px; }
.cx { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--papel-tinta); border-radius: 4px; vertical-align: middle; }
.em { display: block; min-height: 22px; border-bottom: 1px solid var(--papel-mudo); }
.linha-selo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.texto-selo { color: var(--text-muted); font-size: .85rem; }
.dica-rolagem { display: none; margin: 0 0 10px; gap: 8px; align-items: flex-start; color: var(--text-muted); font-size: .86rem; }
@media (max-width: 640px) { .dica-rolagem { display: flex; } }
.folha-tabela { overflow-x: auto; }
.folha-tabela table { min-width: 560px; }
@media print { .folha-tabela { overflow: visible; } .folha-tabela table { min-width: 0; } }
.folha-rodape { font-size: .8rem; color: var(--papel-mudo-2); border-top: 1px solid var(--papel-linha); padding-top: 8px; }
@page { margin: 12mm; }
@media print {
  html, body { background: var(--papel) !important; }
  body::before { display: none; }
  .topo, .pular, .nao-imprimir, .alerta { display: none !important; }
  main, .pagina-folha { max-width: none; padding: 0 !important; }
  .folha { box-shadow: none; border-radius: 0; padding: 0; }
  .folha tr { break-inside: avoid; }
  .folha h2 { break-after: avoid; }
}

.resumo-estoque { margin: 0 0 14px; color: var(--text-muted); }
.resumo-estoque strong { color: var(--text); }
tr.grupo-dia th { background: var(--surface-2); color: var(--text); font-size: .82rem; letter-spacing: 0; padding: 8px 16px; }
tr.grupo-dia th::first-letter { text-transform: uppercase; }
@media (max-width: 640px) {
  .responsiva tr.grupo-dia { background: none; border: 0; padding: 4px 2px 0; margin: 10px 0 2px; }
  .responsiva tr.grupo-dia th { display: block; background: none; padding: 0; font: 600 .95rem Fraunces, Georgia, serif; }
}

/* Fase 1 visual: taça nos cartões, termômetro de margem, simulador e camadas de custo */
.copo.mini { width: 34px; }
.com-copo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.com-copo > span { display: grid; min-width: 0; }
.resumo-medidor { display: grid; justify-items: center; text-align: center; gap: 2px; flex: 1 1 260px; }
.termometro { width: min(100%, 300px); }
.termometro svg { width: 100%; height: auto; display: block; }
.gauge-fundo, .gauge-valor { fill: none; stroke-width: 16; stroke-linecap: round; }
.gauge-fundo { stroke: var(--surface-2); }
.gauge-valor { stroke: var(--bar); transition: stroke-dasharray .8s cubic-bezier(.2,.7,.2,1), stroke .3s; }
.termometro[data-faixa="baixa"] .gauge-valor { stroke: var(--danger); }
.termometro[data-faixa="media"] .gauge-valor { stroke: var(--bar); }
.termometro[data-faixa="alta"] .gauge-valor { stroke: var(--bar); }
.gauge-ponto { stroke: var(--surface); stroke-width: 3; fill: var(--accent); }
.termometro[data-faixa="baixa"] .gauge-ponto { fill: var(--danger); }
.termometro[data-faixa="media"] .gauge-ponto { fill: var(--warning); }
.termometro[data-faixa="alta"] .gauge-ponto { fill: var(--success); }
.gauge-tique { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.gauge-rotulo { font: 500 11px Inter, system-ui, sans-serif; fill: var(--text-muted); }
.gauge-texto { font: 700 34px Fraunces, Georgia, serif; fill: var(--text); }
.res-selo { display: flex; align-items: center; gap: 14px; }
.painel-resultado .copo { width: 64px; flex: none; }
.painel-resultado .res-selo .selo { font-size: 1.45rem; padding: 6px 16px; }
.painel-resultado .res-principal { align-items: center; }
.painel-resultado .sugestao { border-top: 1px solid var(--border); padding-top: 10px; }
.painel-resultado .res-numeros { border-top: 1px solid var(--border); padding-top: 8px; }
@media (max-width: 900px) {
  .painel-resultado .copo { width: 44px; }
  .painel-resultado .res-selo .selo { font-size: 1.1rem; padding: 4px 12px; }
}
.simulador-ficha { display: grid; gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.simulador-ficha label { font-weight: 600; font-size: .9rem; }
.simulador-ficha input[type=range] { width: 100%; height: 44px; padding: 0; border: 0; accent-color: var(--primary); background: none; }
.sim-saida { min-height: 1.3em; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sim-saida:empty { display: none; }
.camadas-custo { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.camadas-custo h3 { font: 700 .95rem Fraunces, Georgia, serif; margin: 0; }
.camadas-custo:not([data-tem]) { display: none; }
.cor-1 { background: var(--layer-1); } .cor-2 { background: var(--layer-2); } .cor-3 { background: var(--layer-3); } .cor-4 { background: var(--layer-other); }
.legenda .nome-ing { overflow-wrap: anywhere; }
.mais-pesado { margin: 0; font-size: .86rem; color: var(--text-muted); }

/* Proposta ao cliente: opções + folha A4 (papel e capa na cor da marca do bar) */
.proposta-grade { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .proposta-grade { grid-template-columns: 340px minmax(0, 1fr); } .proposta-opcoes { position: sticky; top: 76px; } }
.proposta-opcoes form { display: grid; gap: 4px; }
.tog { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: .95rem; cursor: pointer; }
.tog input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.tog input:disabled + * , .tog:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.a4 { background: var(--papel); color: var(--papel-tinta); border-radius: 8px; box-shadow: 0 24px 50px -28px var(--sombra); overflow: hidden; display: grid; font-family: Inter, system-ui, sans-serif; }
.a4-capa { background: var(--cor-marca, var(--brand-red)); color: var(--on-primary); padding: clamp(18px, 4vw, 32px); display: grid; gap: 6px; }
.a4-logo { max-width: 160px; max-height: 80px; background: var(--papel); border-radius: 10px; padding: 6px; justify-self: start; }
.a4-bar { font: 700 1.2rem Fraunces, Georgia, serif; }
.a4-sub { font-size: .85rem; opacity: .9; }
.a4-capa h2, .a4-capa .a4-evento { font-family: Fraunces, Georgia, serif; font-weight: 700; line-height: 1.15; font-size: clamp(1.4rem, 3.5vw, 2rem); color: inherit; margin: 0; }
.a4-det { font-size: .92rem; }
.a4-corpo { padding: clamp(16px, 4vw, 32px); display: grid; gap: 14px; }
.a4-corpo h3 { font-family: Fraunces, Georgia, serif; margin: 0; padding-bottom: 4px; border-bottom: 2px solid var(--accent); color: var(--papel-tinta); }
.a4-corpo table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.a4-corpo th { background: var(--papel-cabec); color: var(--papel-tinta); }
.a4-corpo th, .a4-corpo td { border: 1px solid var(--papel-linha); padding: 8px 10px; text-align: left; white-space: normal; }
.a4-corpo td.num, .a4-corpo th.num { text-align: right; }
.a4-lista { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.a4-para, .a4-peq { margin: 0; font-size: .9rem; }
.a4-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--papel-cabec); border-radius: 12px; padding: 12px 16px; }
.a4-total b { font: 700 1.6rem Fraunces, Georgia, serif; }
.a4-rod { margin: 0; font-size: .78rem; color: var(--papel-mudo-2); }

/* Formulários com campos lado a lado (Equipe) e aviso de margem */
.linha-campos { display: grid; gap: 14px 16px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 640px) { .linha-campos { grid-template-columns: 1fr 1fr; } }
.linha-campos .campo { margin: 0; }
.pix-linha { display: flex; gap: 8px; align-items: stretch; }
.pix-linha input { flex: 1; min-width: 0; }
.pix-linha .btn { flex: none; }
@media print { .dado-privado { display: none !important; } }
.form-linha { display: inline; margin: 0; }
.alerta-margem { display: grid; gap: 8px; border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; background: var(--danger-bg); color: var(--text); border: 1.5px solid var(--danger); }
.alerta-margem h2 { margin: 0; font-size: 1.05rem; color: var(--danger); display: flex; gap: 8px; align-items: center; }
.alerta-margem p { margin: 0; }
.alerta-margem .acoes-form { margin-top: 4px; }
.selo-caiu { margin-right: 4px; }
.aviso-abaixo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.aviso-abaixo a { color: inherit; }
.aviso-abaixo[hidden] { display: none; }
.texto-copia { width: 100%; min-height: 160px; margin-top: 10px; font: .9rem/1.45 ui-monospace, Consolas, monospace; }

/* Grupos do formulário de Configurações */
.grupo-form { border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px 16px; margin: 0 0 16px; min-width: 0; }
.grupo-form legend { font: 700 1.05rem Fraunces, Georgia, serif; padding: 0 8px; }
.grupo-form > .ajuda { margin: 0 0 12px; }

/* Margem alvo (padrão do bar e do evento) */
.entrada-pct { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; max-width: 180px; }
.entrada-pct:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent); }
.entrada-pct input { border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 44px; font-variant-numeric: tabular-nums; }
.entrada-pct input:focus { box-shadow: none; }
.entrada-pct input:disabled { background: var(--surface-2); color: var(--text-muted); }
.entrada-pct span { padding: 0 12px; color: var(--text-muted); font-weight: 600; }
.ajuda { margin: 4px 0 0; font-size: .84rem; color: var(--text-muted); }
.efeito { background: var(--surface-2); border-radius: 16px; padding: 14px; display: grid; gap: 8px; margin-top: 10px; }
.efeito .kv { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.efeito .faixas { display: grid; gap: 6px; font-size: .88rem; }
.efeito .faixas > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alternar-simples { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .92rem; cursor: pointer; }
.alternar-simples input { width: 22px; height: 22px; accent-color: var(--primary); }
.campo-meta-evento .ajuda + .erro:not([hidden]), .campo-meta .erro:not([hidden]) { margin-top: 4px; }
[data-meta-erro] { display: flex; gap: 6px; align-items: center; margin: 4px 0 0; font-size: .85rem; font-weight: 500; color: var(--danger); }
[data-meta-erro][hidden] { display: none; }

/* Realizar no celular: cada item vira um cartão (nome + previsto em cima; Consumido | Perdido lado a lado) */
.diff { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: .8rem; color: var(--text-muted); }
.diff:empty { display: none; }
.resumo-realizar.ok { color: var(--text-muted); font-weight: 500; }
@media (max-width: 640px) {
  .realizar-lista tr[data-saldo] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .realizar-lista td.so-desktop-celular { display: none; }
  .realizar-lista td.r-item { display: block; grid-column: 1 / -1; text-align: left; }
  .realizar-lista td.r-item::before { display: none; }
  .realizar-lista td.r-item .nome { display: block; font-size: 1.05rem; }
  .realizar-lista td.r-campo { display: block; text-align: left; padding: 0; }
  .realizar-lista td.r-campo::before { display: block; margin-bottom: 4px; }
  .realizar-lista td.r-campo .com-unidade { width: 100%; }
  .realizar-lista td.r-campo input { width: 100%; }
}

/* Realizar evento e previsto × real */
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[disabled]:hover { background: transparent; transform: none; box-shadow: none; }
.motivo-realizar { margin: 4px 0 0; }
.aviso-saldo { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.aviso-saldo[hidden] { display: none; }
.resumo-realizar { margin: 0 0 12px; color: var(--danger); font-weight: 600; min-height: 1.4em; }
.resumo-realizar:empty { display: none; }
.painel-aba h3 { margin: 6px 0 0; font-size: 1rem; }

/* Configurações: logo (arquivo), remover logo e cor da marca */
.rotulo-campo { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.arquivo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.arquivo-linha .btn { min-height: 44px; }
.arquivo-nome { color: var(--text-muted); font-size: .9rem; overflow-wrap: anywhere; }
.campo-arquivo:has(input[type=file]:focus-visible) .arquivo-linha .btn { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.previa-logo { display: block; margin-top: 10px; max-width: 220px; max-height: 120px; border: 1px solid var(--border); border-radius: 12px; background: var(--papel); padding: 8px; }
.previa-logo[hidden], .aviso-arquivo[hidden] { display: none; }
.logo-atual { margin-top: 10px; }
.logo-atual .previa-logo { margin-top: 0; }
.aviso-arquivo { margin: 8px 0 0; color: var(--warning); font-weight: 600; font-size: .9rem; }
.alternar { position: relative; display: inline-block; cursor: pointer; }
.alternar input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.alternar .btn { min-height: 44px; pointer-events: none; }
.alternar input:focus-visible + .btn { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.alternar input:checked + .btn { background: var(--danger-bg); }
.marca-remover { display: none; font-weight: 500; }
.alternar input:checked + .btn .marca-remover { display: inline; }
.cor-linha { display: flex; align-items: center; gap: 12px; }
.cor-linha input[type=color] { width: 64px; height: 44px; padding: 4px; border-radius: 12px; cursor: pointer; }
.amostra-cor { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--primary); flex: none; }
.codigo-cor { font: 600 .95rem ui-monospace, Consolas, monospace; color: var(--text); background: var(--surface-2); padding: 4px 10px; border-radius: 8px; }

/* Login com o logo definitivo (a versão escura troca sozinha com o tema) */
.logo-login { margin: 0 0 8px; line-height: 0; }
.logo-login img { width: 100%; max-width: 230px; height: auto; }
.logo-login .logo-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-login .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-login .logo-escuro { display: block; }
}
:root[data-theme="dark"] .logo-login .logo-claro { display: none; }
:root[data-theme="dark"] .logo-login .logo-escuro { display: block; }
:root[data-theme="light"] .logo-login .logo-claro { display: block; }
:root[data-theme="light"] .logo-login .logo-escuro { display: none; }
.com-senha { position: relative; }
.com-senha input { padding-right: 96px; }
.mostrar-senha { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--link); font: 600 .88rem Inter, system-ui, sans-serif; cursor: pointer; }
.mostrar-senha:hover { background: var(--surface-2); }
.ajuda-login { margin: 16px 0 0; text-align: center; color: var(--text-muted); font-size: .88rem; }

/* Páginas de erro (403, 404, 500) */
.pagina-erro { max-width: 520px; margin: 0 auto; padding: 56px 16px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.pagina-erro .copo { width: 84px; }
.codigo-erro { margin: 0; font: 700 .9rem Inter, system-ui, sans-serif; letter-spacing: .14em; color: var(--text-muted); }
.pagina-erro h1 { margin: 0; }
.pagina-erro p { margin: 0; color: var(--text-muted); }
.pagina-erro .btn { margin-top: 12px; }

/* ===== Login "ousado" (tela dividida) ===== */
main.login-pagina { max-width: none; padding: 0; }
body:has(.lo)::before { display: none; }
.lo { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.lo-hero { position: relative; overflow: hidden; color: var(--on-primary); display: grid; gap: 14px; align-content: start; padding: 28px 24px 64px;
  background: linear-gradient(165deg, var(--brand-red) 0%, color-mix(in srgb, var(--brand-red) 55%, var(--brand-vermouth)) 55%, var(--brand-vermouth) 100%); }
.lo-hero::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--accent); opacity: .18; filter: blur(70px); right: -120px; bottom: -140px; }
.lo-hero > * { position: relative; }
.lo-marca { display: inline-flex; align-items: center; gap: 10px; }
.lo-marca b { font: 700 1.7rem Fraunces, Georgia, serif; text-transform: lowercase; letter-spacing: -.01em; }
.taca-marca { width: 34px; height: auto; flex: none; }
.lo-frase { margin: 0; font: 700 1.6rem/1.1 Fraunces, Georgia, serif; max-width: 14ch; text-wrap: balance; }
.lo-arte, .lo-mini { display: none; }
.lo-form { position: relative; margin-top: -34px; background: var(--bg); border-radius: 30px 30px 0 0; padding: 28px 22px 32px; display: grid; gap: 18px; align-content: start; }
.lo-form h1 { font-size: 1.7rem; margin: 0; }
.lo-cab p { margin: 6px 0 0; color: var(--text-muted); }
.lo-form form { display: grid; gap: 16px; }
.lo-form input { min-height: 54px; border-radius: 14px; padding: 12px 14px; }
.lo-form .campo { margin: 0; }
.lo-form .btn.go { min-height: 56px; font-size: 1rem; width: 100%; box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--primary) 80%, transparent); }
.btn.go[aria-busy="true"] { opacity: .85; pointer-events: none; }
.gira { width: 18px; height: 18px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--on-primary) 40%, transparent); border-top-color: var(--on-primary); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.lo-form .ajuda-login { margin: 0; }
.lo-c { display: flex; justify-content: space-between; gap: 10px; background: color-mix(in srgb, var(--on-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--on-primary) 22%, transparent); border-radius: 14px; padding: 9px 14px; font-size: .9rem; backdrop-filter: blur(6px); }
.lo-c b { display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.lo-mini small { opacity: .95; font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
@media (min-width: 720px) {
  .lo { grid-template-columns: 1.1fr 1fr; grid-template-rows: none; }
  .lo-hero { padding: 44px; align-content: space-between; min-height: 100vh; }
  .lo-frase { font-size: clamp(2.2rem, 4.2vw, 3.4rem); max-width: 12ch; }
  .lo-arte { display: block; position: absolute; right: -40px; bottom: 30px; width: min(42%, 300px); opacity: .95; color: var(--on-primary); }
  .lo-arte .taca-marca { width: 100%; }
  .lo-mini { display: grid; gap: 8px; position: relative; max-width: 300px; }
  .lo-form { margin-top: 0; border-radius: 0; padding: 56px; align-content: center; }
}

/* ===== Início "sóbrio" com termômetro grande e carrossel de eventos ===== */
/* Início compacto, sem rolagem a partir de 700 px de altura (altura em dvh; grade com minmax(0,1fr)). */
main:has(.ini-app) { padding-block: 12px; }
.ini-app { --ini-topo: 66px; display: grid; gap: 12px; height: calc(100dvh - var(--ini-topo) - 24px); min-height: 0; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.ini-cab { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.ini-titulo { min-width: 0; }
.ini-cab h1 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-resumo { margin: 2px 0 0; color: var(--text-muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-resumo b { color: var(--text); }
.ini-atalhos { display: flex; gap: 8px; flex: none; }
.ini-esq { min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.ini-medidor { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 14px; text-align: center; }
.ini-medidor .termometro { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.ini-medidor .termometro svg { width: 100%; height: 100%; max-height: 100%; }
.ini-medidor .rotulo { color: var(--text-muted); font-size: .82rem; }
.ini-kpis { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ini-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.ini-rotulo { font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-valor { font: 700 1.6rem/1.05 Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ini-det { font-size: .8rem; color: var(--text-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-det .selo { font-size: .78rem; padding: 1px 8px; }
.mes-ref::first-letter { text-transform: uppercase; }
@media (max-width: 420px) { .ini-atalhos .btn span { text-transform: capitalize; } .ini-atalhos .pref { display: none; } .ini-atalhos .btn .i { display: none; } }
.ini-dir { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.ini-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ini-sec h2 { font-size: 1.05rem; }
.ini-sec a { font-weight: 600; font-size: .85rem; white-space: nowrap; }
.exige-lista { display: grid; gap: 8px; grid-auto-rows: minmax(0, 92px); align-content: start; min-height: 0; }
.exige-item { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 8px 12px; min-height: 0; min-width: 0; }
.exige-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.exige-t { flex: 1; min-width: 0; display: grid; gap: 0; color: var(--text); }
.exige-t b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.2; }
.exige-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exige-completa { grid-auto-rows: auto; max-width: 760px; }
.exige-completa .exige-t b { display: block; -webkit-line-clamp: unset; }
.exige-t span { font-size: .8rem; }
.exige-r { background: var(--danger-bg); color: var(--danger); }
.exige-a { background: var(--warning-bg); color: var(--warning); }
.exige-i { background: var(--info-bg); color: var(--info); }
.exige-item .btn { min-height: 44px; flex: none; }
.ini-base { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.ini-evs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: stretch; }
.cartao-ev { display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 8px 10px; color: var(--text); text-decoration: none; transition: border-color .15s; }
.cartao-ev:hover { border-color: var(--accent); }
.cev-dia i { font: 700 1.35rem/1.05 Fraunces, Georgia, serif; font-style: normal; background: var(--accent); color: var(--on-accent); border-radius: 12px; padding: 3px 9px; display: grid; justify-items: center; flex: none; }
.cev-dia i small { font: 600 .58rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.cev-txt { display: grid; min-width: 0; }
.cev-txt b { font: 700 .92rem Fraunces, Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cev-txt .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; }
.ini-mais { display: grid; place-items: center; border: 1.5px dashed var(--border); border-radius: 16px; padding: 0 14px; font-weight: 600; font-size: .85rem; white-space: nowrap; text-decoration: none; }
.ini-mais.so-tablet { display: none; }
.ini-sec a.so-celular-ver { display: none; }
.ini-rodape { display: flex; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: .82rem; }
.ini-rodape span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1099px) { .ini-app { --ini-topo: 118px; } }
@media (min-width: 1700px) { .ini-app { gap: 16px; } .ini-valor { font-size: 2rem; } .ini-cab h1 { font-size: 2rem; } .exige-t b { font-size: 1.02rem; } .cev-txt b { font-size: 1.02rem; } }
@media (min-width: 700px) and (max-width: 1099px) {
  .ini-app { grid-template-rows: auto minmax(0, 1.1fr) auto auto; }
  .ini-esq { display: contents; }
  .ini-medidor { grid-column: 1; grid-row: 2; }
  .ini-kpis { grid-column: 1 / -1; grid-row: 3; }
  .ini-dir { grid-column: 2; grid-row: 2; }
  .ini-base { grid-row: 4; }
  .ini-evs { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .ini-evs .ev-3 { display: none; }
  .ini-mais.so-tablet { display: grid; }
  .ini-cab { flex-wrap: wrap; }
}
@media (max-height: 699px) { .ini-app { height: auto; } }
@media (max-width: 699px) {
  main:has(.ini-app) { padding-block: 12px calc(88px + env(safe-area-inset-bottom, 0px)); }
  .ini-app { display: flex; flex-direction: column; height: auto; gap: 10px; }
  .ini-cab { flex-direction: column; align-items: stretch; gap: 8px; }
  .ini-resumo { white-space: normal; }
  .ini-atalhos .btn { flex: 1; padding-inline: 8px; min-height: 44px; }
  .ini-atalhos { gap: 6px; }
  .ini-atalhos .btn { font-size: .8rem; gap: 4px; white-space: nowrap; flex: 1 1 0; min-width: 0; padding-inline: 6px; }
  .ini-esq { display: flex; flex-direction: column; gap: 8px; }
  .ini-medidor { height: 30dvh; padding: 6px 10px; flex: none; }
  .ini-medidor .rotulo { display: none; }
  .ini-kpis { gap: 6px; }
  .ini-kpi { padding: 8px; }
  .ini-valor { font-size: 1.25rem; }
  .ini-det { display: none; }
  .exige-item { flex-wrap: wrap; }
  .exige-t { flex: 1 1 calc(100% - 48px); }
  .exige-item .btn { flex: 1 1 100%; }
  .ini-atalhos { gap: 6px; min-width: 0; }
  .ini-rotulo { font-size: .6rem; letter-spacing: .04em; }
  .ini-dir { display: flex; flex-direction: column; }
  .exige-lista { grid-auto-rows: auto; }
  .exige-lista .exige-item:nth-child(n+3) { display: none; }
  .ini-sec a.so-celular-ver { display: inline; }
  .ini-evs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scrollbar-width: none; }
  .ini-evs::-webkit-scrollbar { display: none; }
  .ini-mais.so-tablet { display: grid; }
}
@media (prefers-reduced-motion: no-preference) {
  .anim { animation: sobe .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes sobe { from { opacity: 0; transform: translateY(10px); } }
}

/* ===== Configurações: mesma largura e alinhamento das outras telas, duas colunas no desktop ===== */
.form.form-config { max-width: none; display: grid; gap: 16px; }
.form-config .erros-form, .form-config .acoes-form { grid-column: 1 / -1; }
.form-config .grupo-form { margin: 0; align-self: start; }
@media (min-width: 900px) { .form.form-config { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Ajustes da revisão de UX */
@media (max-width: 640px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; }
  /* alerta de estoque: tudo dentro do mesmo cartão; texto em cima, Comprar compacto embaixo à direita */
  .atencao li.alerta-card { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .atencao li.alerta-card .btn { align-self: flex-end; margin: 0 12px 0 0; min-height: 44px; padding: 8px 18px; border-radius: 999px; }
  .linha-link { flex-wrap: wrap; row-gap: 4px; }
  .linha-link > span:first-child { flex: 1 1 100%; min-width: 0; }
  .linha-link > span:last-child { margin-left: auto; }
}
@media (min-width: 641px) and (max-width: 1040px) {
  /* a barra do topo passa para uma segunda linha antes de cortar algum item */
  .topo { flex-wrap: wrap; }
  .topo nav { order: 3; flex-basis: 100%; }
  .empresa { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Importar nota fiscal (fluxo 4) */
.passos-nota { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.passos-nota li { font-size: .84rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.passos-nota li[aria-current="step"] { background: var(--text); color: var(--bg); }
.nota-envio { max-width: 680px; display: grid; gap: 14px; }
.soltar { position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 32px 16px; border: 2px dashed var(--border); border-radius: 18px; cursor: pointer; }
.soltar:hover, .soltar.sobre, .soltar:focus-within { border-color: var(--accent); background: var(--surface-2); }
.soltar input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.soltar .i { width: 2rem; height: 2rem; color: var(--text-muted); }
.nome-arquivo { font-weight: 600; min-height: 1.4em; overflow-wrap: anywhere; }
.nota-resumo { margin-bottom: 10px; }
.nota-forn { margin-bottom: 12px; }
.nota-ing { display: grid; gap: 6px; justify-items: start; }
.nota-ing select { min-width: 150px; max-width: 200px; }
.nota-tabela th { white-space: normal; }
.nota-tabela th, .nota-tabela td { padding: 10px 8px; }
.nota-tabela td input[type=number] { min-width: 70px; max-width: 90px; }
.nota-tabela .acoes .btn { white-space: nowrap; }
.nota-forn { align-items: flex-start; }
.nota-forn span { min-width: 0; }
.nota-tabela tr.ignorada td:not(.acoes) { opacity: .5; }
.aviso-fator { display: flex; gap: 4px; align-items: center; color: var(--warning); margin-top: 4px; white-space: normal; }
.nota-tabela td { white-space: normal; }
.nota-impacto { margin: 14px 0; }
.nota-impacto h2 { display: flex; gap: 8px; align-items: center; color: var(--danger); }
.nota-tabela .btn[disabled], .acoes-form .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 640px) { .nota-tabela td:first-child { display: block; text-align: left; } .nota-tabela td:first-child::before { display: none; } .nota-resumo { flex-direction: column; align-items: flex-start; } .nota-resumo .selo { white-space: normal; } .nota-tabela td input[type=number] { max-width: 130px; width: 130px; text-align: right; } .nota-ing select { min-width: 0; width: 100%; } .nota-tabela td .nota-ing { justify-items: end; width: 100%; } }
.como-resolver { font-size: .9rem; }
.como-resolver summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.como-resolver ul { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--text-muted); }
.nota-novo { display: grid; gap: 8px; width: 100%; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); text-align: left; }
.nota-novo[hidden] { display: none; }
.nota-novo label { display: grid; gap: 3px; font-size: .8rem; font-weight: 600; }
.nota-novo input, .nota-novo select { min-width: 0; width: 100%; max-width: none; }
.nota-simulacao { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.nota-simulacao .lista-simples li { padding: 8px 0; }
.nota-cancelar { display: grid; gap: 10px; align-items: start; max-width: 560px; margin-top: 10px; }
.nota-cancelar[hidden] { display: none; }
[data-erro-confirmar] { margin-top: 12px; }
/* Pedido sugerido (fluxo 2) */
.pedido-grupo { margin-bottom: 14px; }
.pedido-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.pedido-tabela td { white-space: normal; }
.pedido-tabela tr.ignorada td:not([data-label="Embalagens"]) { opacity: .5; }
.pedido-tabela .selo { white-space: normal; text-align: left; }
.pedido-tabela .qtd-stepper input { width: 64px; }
@media (max-width: 640px) { .pedido-tabela td:first-child { display: block; text-align: left; } .pedido-tabela td:first-child::before { display: none; } .pedido-tabela .selo { text-align: left; } }

/* alvos de toque de 44 px */
.marca, .ini-sec a, .pular { min-height: 44px; display: inline-flex; align-items: center; }

.btn { min-height: 44px; }
.qtd-stepper button { min-width: 44px; }
.tog { min-height: 44px; }
.link-sim { display: inline-flex; align-items: center; min-height: 44px; }

/* Base dos relatórios: pergunta, período + CSV, resumo, gráfico de um tom, tabela. Só tokens; largura/altura por classe (passos de 5%). */
:root { --bar-2: color-mix(in srgb, var(--bar) 35%, var(--track)); }
.rel-perg { display: grid; gap: 4px; margin-bottom: 14px; } .rel-perg p { margin: 0; color: var(--text-muted); max-width: 62ch; }
.rel-filtros { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.seg { display: inline-flex; background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-op { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--text-muted); font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.seg-op:hover { background: var(--surface-2); color: var(--text); }
.seg-op[aria-current="true"] { background: var(--primary); color: var(--on-primary); }
.rel-datas { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; } .rel-datas .campo { margin: 0; }
.rel-resumo { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; } .rel-resumo:empty { display: none; }
.rel-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; display: grid; gap: 3px; min-width: 0; }
.rel-kpi-l { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.rel-kpi-v { font: 700 1.8rem/1.05 Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; } .rel-kpi-d { font-size: .84rem; color: var(--text-muted); }
.card-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.rel-hb { display: grid; gap: 10px; } .rel-hb-row { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .9rem; }
.rel-hb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .rel-hb-v { font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.rel-trilho { position: relative; display: block; height: 12px; background: var(--track); border-radius: 99px; }
.rel-trilho i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 99px; background: var(--bar); } .rel-trilho i.al { background: var(--danger); }
.rel-trilho b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); opacity: .55; }

.rel-cols { display: flex; gap: 8px; align-items: flex-end; height: 160px; border-bottom: 1.5px solid var(--border); padding-top: 8px; }
.rel-col { flex: 1; display: grid; gap: 4px; align-content: end; justify-items: center; height: 100%; min-width: 0; }
.rel-col i { display: block; width: 100%; max-width: 54px; height: calc(var(--h, 0) * 1.05px); min-height: 2px; background: var(--bar); border-radius: 6px 6px 0 0; } .rel-col i.al { background: var(--danger); }
.rel-col span { font-size: .74rem; color: var(--text-muted); white-space: nowrap; } .rel-col em { font-style: normal; font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.h0{--h:0%} .h1{--h:5%} .h2{--h:10%} .h3{--h:15%} .h4{--h:20%} .h5{--h:25%} .h6{--h:30%} .h7{--h:35%} .h8{--h:40%} .h9{--h:45%} .h10{--h:50%} .h11{--h:55%} .h12{--h:60%} .h13{--h:65%} .h14{--h:70%} .h15{--h:75%} .h16{--h:80%} .h17{--h:85%} .h18{--h:90%} .h19{--h:95%} .h20{--h:100%}
tr.total td { font-weight: 700; background: var(--surface-2); }
@media (max-width: 560px) { .rel-hb-row { grid-template-columns: minmax(0, 1fr) auto; } .rel-hb-row .rel-trilho { grid-column: 1 / -1; grid-row: 2; } }

.rel-trilho b.m0{left:0%} .rel-trilho b.m1{left:1%} .rel-trilho b.m2{left:2%} .rel-trilho b.m3{left:3%} .rel-trilho b.m4{left:4%} .rel-trilho b.m5{left:5%} .rel-trilho b.m6{left:6%} .rel-trilho b.m7{left:7%} .rel-trilho b.m8{left:8%} .rel-trilho b.m9{left:9%} .rel-trilho b.m10{left:10%} .rel-trilho b.m11{left:11%} .rel-trilho b.m12{left:12%} .rel-trilho b.m13{left:13%} .rel-trilho b.m14{left:14%} .rel-trilho b.m15{left:15%} .rel-trilho b.m16{left:16%} .rel-trilho b.m17{left:17%} .rel-trilho b.m18{left:18%} .rel-trilho b.m19{left:19%} .rel-trilho b.m20{left:20%} .rel-trilho b.m21{left:21%} .rel-trilho b.m22{left:22%} .rel-trilho b.m23{left:23%} .rel-trilho b.m24{left:24%} .rel-trilho b.m25{left:25%} .rel-trilho b.m26{left:26%} .rel-trilho b.m27{left:27%} .rel-trilho b.m28{left:28%} .rel-trilho b.m29{left:29%} .rel-trilho b.m30{left:30%} .rel-trilho b.m31{left:31%} .rel-trilho b.m32{left:32%} .rel-trilho b.m33{left:33%} .rel-trilho b.m34{left:34%} .rel-trilho b.m35{left:35%} .rel-trilho b.m36{left:36%} .rel-trilho b.m37{left:37%} .rel-trilho b.m38{left:38%} .rel-trilho b.m39{left:39%} .rel-trilho b.m40{left:40%} .rel-trilho b.m41{left:41%} .rel-trilho b.m42{left:42%} .rel-trilho b.m43{left:43%} .rel-trilho b.m44{left:44%} .rel-trilho b.m45{left:45%} .rel-trilho b.m46{left:46%} .rel-trilho b.m47{left:47%} .rel-trilho b.m48{left:48%} .rel-trilho b.m49{left:49%} .rel-trilho b.m50{left:50%} .rel-trilho b.m51{left:51%} .rel-trilho b.m52{left:52%} .rel-trilho b.m53{left:53%} .rel-trilho b.m54{left:54%} .rel-trilho b.m55{left:55%} .rel-trilho b.m56{left:56%} .rel-trilho b.m57{left:57%} .rel-trilho b.m58{left:58%} .rel-trilho b.m59{left:59%} .rel-trilho b.m60{left:60%} .rel-trilho b.m61{left:61%} .rel-trilho b.m62{left:62%} .rel-trilho b.m63{left:63%} .rel-trilho b.m64{left:64%} .rel-trilho b.m65{left:65%} .rel-trilho b.m66{left:66%} .rel-trilho b.m67{left:67%} .rel-trilho b.m68{left:68%} .rel-trilho b.m69{left:69%} .rel-trilho b.m70{left:70%} .rel-trilho b.m71{left:71%} .rel-trilho b.m72{left:72%} .rel-trilho b.m73{left:73%} .rel-trilho b.m74{left:74%} .rel-trilho b.m75{left:75%} .rel-trilho b.m76{left:76%} .rel-trilho b.m77{left:77%} .rel-trilho b.m78{left:78%} .rel-trilho b.m79{left:79%} .rel-trilho b.m80{left:80%} .rel-trilho b.m81{left:81%} .rel-trilho b.m82{left:82%} .rel-trilho b.m83{left:83%} .rel-trilho b.m84{left:84%} .rel-trilho b.m85{left:85%} .rel-trilho b.m86{left:86%} .rel-trilho b.m87{left:87%} .rel-trilho b.m88{left:88%} .rel-trilho b.m89{left:89%} .rel-trilho b.m90{left:90%} .rel-trilho b.m91{left:91%} .rel-trilho b.m92{left:92%} .rel-trilho b.m93{left:93%} .rel-trilho b.m94{left:94%} .rel-trilho b.m95{left:95%} .rel-trilho b.m96{left:96%} .rel-trilho b.m97{left:97%} .rel-trilho b.m98{left:98%} .rel-trilho b.m99{left:99%} .rel-trilho b.m100{left:100%}
.rel-perg { display: grid; gap: 4px; margin-bottom: 14px; }
.rel-lab { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rel-grupo { display: grid; gap: 10px; margin-bottom: 18px; }
.rel-grupo-t { font: 600 .74rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rel-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rel-card { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px; color: var(--text); text-decoration: none; }
.rel-card:hover { border-color: var(--bar); }
.rel-card strong { font: 700 1.08rem Fraunces, Georgia, serif; } .rel-card span { font-size: .88rem; color: var(--text-muted); }
.rel-card .rel-ver { color: var(--ptext); font-weight: 600; font-size: .84rem; display: inline-flex; gap: 4px; align-items: center; }

.rel-dupla { display: grid; gap: 3px; min-width: 0; } .rel-dupla .rel-trilho { height: 9px; }
.rel-trilho i.pv { background: var(--bar-2); }
.rel-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--text-muted); } .rel-leg span { display: inline-flex; gap: 6px; align-items: center; } .rel-leg s { display: inline-block; width: 10px; height: 10px; border-radius: 3px; text-decoration: none; }
.lg-pv { background: var(--bar-2); } .lg-real { background: var(--bar); } .lg-al { background: var(--danger); }
.rel-det summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--link); }
.rel-det .lista-simples { min-width: 220px; }
.rel-spark { display: block; } .rel-spark polyline { fill: none; stroke: var(--bar); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rel-spark circle { fill: var(--bar); stroke: var(--surface); stroke-width: 2; }
.rel-export { margin-top: 14px; }
.tabela td { vertical-align: middle; }
@media (max-width: 640px) { .rel-resumo { gap: 8px; } .rel-kpi { padding: 12px; } .rel-kpi-v { font-size: 1.45rem; } }

@media (max-width: 699px) { .rel-perg p { display: none; } .rel-perg { margin-bottom: 8px; } }

/* Calculadora de drinks por convidado */
.calc-evento { display: grid; gap: 8px; margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); }
.calc-evento h2 { font-size: 1.05rem; }
.ce-tipo { margin: 0; font-size: .88rem; font-weight: 600; }
.ce-res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ce-total strong { font: 700 1.9rem/1 Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; }
.ce-informado { margin: 0; font-size: .92rem; }
/* Contagem de estoque (celular) */
.ct-busca { margin: 12px 0; }
.ct-vincular { display: grid; gap: 8px; margin-bottom: 12px; }
.ct-offline { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: var(--warning-bg); color: var(--warning); font-weight: 600; font-size: .9rem; margin: 10px 0; }
.ct-lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.ct-item { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; display: grid; gap: 10px; }
.ct-item[hidden] { display: none; }
.ct-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 10px; }
.ct-nome { display: grid; min-width: 0; } .ct-nome strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.ct-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ct-campo { display: grid; gap: 4px; min-width: 0; } .ct-campo label { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.ct-campo input[name=aberta] { min-height: 48px; }
.ct-form .erro { grid-column: 1 / -1; margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.ct-form .erro[hidden] { display: none; }
.ct-rodape { display: grid; gap: 10px; margin: 14px 0 6px; }
@media (max-width: 640px) { .ct-form { grid-template-columns: 1fr 1fr; } .ct-form .btn { grid-column: 1 / -1; width: 100%; } .ct-item .qtd-stepper { width: 100%; justify-content: space-between; } .ct-rodape .btn { width: 100%; } }
/* Calculadora dentro do formulário e grupo recolhido da proposta */
.campos > .calc-evento { grid-column: 1 / -1; margin: 6px 0; }
.grupo-recolhido { border: 1px solid var(--border); border-radius: 16px; padding: 4px 16px 12px; margin: 14px 0; }
.grupo-recolhido summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.grupo-recolhido .campos { margin-bottom: 0; }
/* Contagem cega */
.ct-sistema { display: none; } .ver-sistema .ct-sistema { display: inline; }
.ct-cega { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .88rem; color: var(--text-muted); margin: 0 0 10px; }
.ct-linha-erro td { background: var(--danger-bg); }
.ct-recontar { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
.ct-recontar[hidden] { display: none; }
.linkbtn { background: none; border: 0; color: var(--link); font: 600 .86rem Inter, system-ui, sans-serif; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 4px; }

/* Papéis, usuários e agenda da equipe */
.mais-quem { margin: 0; padding: 8px 12px 6px; font-weight: 600; font-size: .9rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.papeis-resumo { margin-bottom: 14px; }
.papeis-lista { margin: 0; display: grid; gap: 10px; }
.papeis-lista > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.papeis-lista dt { font-weight: 700; } .papeis-lista dd { margin: 0; color: var(--text-muted); font-size: .92rem; }
@media (max-width: 640px) { .papeis-lista > div { grid-template-columns: 1fr; } }
.ag-contar { width: 100%; min-height: 52px; margin-bottom: 14px; }
.ag-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-cartao { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; color: var(--text); text-decoration: none; }
.ag-cartao:hover { border-color: var(--accent); }
.ag-dia { display: grid; justify-items: center; min-width: 62px; padding: 8px 10px; border-radius: 16px; background: var(--accent); color: var(--on-accent); }
.ag-dia b { font: 700 1.8rem/1 Fraunces, Georgia, serif; } .ag-dia small { font: 600 .66rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ag-txt { display: grid; min-width: 0; flex: 1; } .ag-txt strong { font-size: 1.08rem; overflow-wrap: anywhere; }
.ag-seta .i { color: var(--text-muted); }
@media (max-width: 640px) { .topo nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* Ficha do drink por permissão */
.ficha.sem-margens .res-principal, .ficha.sem-margens .msg-margem, .ficha.sem-margens .sugestao, .ficha.sem-margens .simulador-ficha { display: none !important; }
.ficha.sem-custos .camadas-custo, .ficha.sem-custos .res-numeros > div:first-child { display: none !important; }
.ficha.sem-custos .lf-custo, .ficha.sem-custos .lf-cab-custo { visibility: hidden; }
.ficha-nota { grid-column: 1 / -1; }
.ficha:has(> .ficha-nota) { grid-template-columns: minmax(0, 1fr); }
/* Início sem margens: cartão "Operação de hoje" */
.ini-operacao h2 { font-size: 1.05rem; align-self: flex-start; }
.ini-op { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; flex: 1; align-items: center; }
.ini-op li { display: grid; gap: 4px; justify-items: center; text-align: center; } .ini-op .ini-valor { font-size: 2.2rem; }
.ie-valores { margin: 4px 0 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.nota-impacto-estoque { margin: 14px 0; }
.form-linha { display: inline; margin: 0; }

.ficha.sem-custos .res-sobra, .ficha.sem-custos .simulador-ficha { display: none !important; }

/* Início: duas colunas sem buracos (esq: termômetro + indicadores; dir: Exige ação + próximos eventos) */
.ini-cab { grid-area: cab; }
.ini-cab h1 { white-space: normal; overflow-wrap: anywhere; }
.ini-det { white-space: normal; overflow: visible; text-overflow: clip; }
.ini-det .selo { white-space: normal; }
.ini-det .mes-ref { display: block; }
.ini-kpis > * { min-width: 0; }
.exige-item { flex-wrap: wrap; }
.exige-t { flex: 1 1 200px; }
.exige-item .btn { flex: 0 0 auto; }
.ini-exige { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ini-eventos { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ini-rodape { grid-area: rod; }
@media (min-width: 1100px) {
  .ini-app { height: auto; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "cab cab" "esq dir" "rod rod"; align-content: start; }
  .ini-esq { grid-area: esq; display: grid; grid-template-rows: auto auto; align-content: start; gap: 10px; min-width: 0; }
  .ini-dir { grid-area: dir; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .ini-medidor { min-height: 0; }
  .ini-evs { grid-template-columns: minmax(0, 1fr); }
  .ini-evs .ev-3 { display: flex; }
  .ini-mais.so-tablet, .ini-mais { display: grid; min-height: 44px; }
  .ini-mais.so-tablet { display: none; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .ini-app { grid-template-areas: "cab cab" "med exige" "kpis kpis" "eventos eventos" "rod rod"; grid-template-rows: auto minmax(0, 1.1fr) auto auto auto; }
  .ini-esq, .ini-dir { display: contents; }
  .ini-medidor { grid-area: med; }
  .ini-kpis { grid-area: kpis; }
  .ini-exige { grid-area: exige; }
  .ini-eventos { grid-area: eventos; }
}
@media (max-width: 699px) { .ini-dir { display: contents; } }
/* Sem reticências em dado importante: quebra de linha; valores e selos nunca passam do cartão */
.ini-rotulo { white-space: normal; overflow-wrap: anywhere; }
.ini-valor { font-size: clamp(1.1rem, 1.7vw, 1.55rem); white-space: normal; overflow-wrap: anywhere; }
.ini-kpi { overflow-wrap: anywhere; }
.ini-det .selo { max-width: 100%; }
.exige-t b { -webkit-line-clamp: 3; line-clamp: 3; }
.exige-t span { white-space: normal; overflow: visible; text-overflow: clip; }
.cev-txt b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cev-txt .sub { white-space: normal; overflow: visible; text-overflow: clip; }
.ini-rodape span { white-space: normal; overflow: visible; text-overflow: clip; }
.rel-det { max-width: 100%; }
.rel-det .lista-simples { min-width: 0; }
.rel-det .lista-simples li { flex-wrap: wrap; }
.rel-det .selo { white-space: normal; }
.simulador input[type=range], .simulador-ficha input[type=range], input[type=range] { max-width: 100%; box-sizing: border-box; min-width: 0; }
/* anel de foco só para quem usa teclado */
html:not(.teclado) :focus-visible { outline: none; }
html.teclado :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (min-width: 1100px) { .ini-app { gap: 10px; } .ini-dir { gap: 10px; } .ini-medidor .termometro svg { max-height: min(40dvh, 300px); } }

@media (max-width: 699px) { .ini-valor { font-size: clamp(.9rem, 4.4vw, 1.2rem); white-space: nowrap; } .exige-item .btn { flex: 1 1 100%; } }

@media (min-width: 1700px) and (min-height: 950px) { .ini-medidor .termometro svg { max-height: min(46dvh, 440px); } .ini-app { gap: 16px; } .ini-dir { gap: 16px; } .exige-lista { grid-auto-rows: minmax(0, 110px); } }

/* ===== Início v2 (grade do Tech UI/UX): esquerda 5fr, direita 7fr; alturas em dvh/clamp, sem px fixo nas áreas principais ===== */
main:has(.in-app) { max-width: none; padding: 12px clamp(12px, 2vw, 32px); }
.in-app { --in-topo: 66px; --in-gap: clamp(8px, 1.4dvh, 16px); display: grid; gap: var(--in-gap); min-height: 0; grid-template-columns: minmax(0, 1fr); }
.in-app > * { min-width: 0; }
.in-cab { grid-area: cab; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.in-cab h1 { font-size: clamp(1.3rem, 3.2dvh, 2rem); margin: 0; white-space: normal; overflow-wrap: anywhere; }
.in-resumo { margin: 2px 0 0; font-size: .9rem; color: var(--text-muted); }
.in-atalhos { display: flex; gap: 8px; flex-wrap: wrap; }
.in-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(8px, 1.4dvh, 16px) clamp(10px, 1.2vw, 16px); min-width: 0; }
.in-esq, .in-dir { display: grid; gap: var(--in-gap); min-width: 0; min-height: 0; }
.in-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.in-sec h2 { font-size: 1.02rem; margin: 0; }
.in-sec a { font-weight: 600; font-size: .85rem; white-space: nowrap; }
.in-l { font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); overflow-wrap: anywhere; }
.in-v { font: 700 clamp(1.3rem, 3.6dvh, 2rem)/1.05 Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.in-d { font-size: .8rem; color: var(--text-muted); display: block; }
.in-d .selo { font-size: .76rem; padding: 1px 8px; max-width: 100%; white-space: normal; }
.in-leg { color: var(--text-muted); font-size: .82rem; text-align: center; }
/* termômetro */
.in-gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: clamp(190px, min(40dvh, 27vw), 440px); box-sizing: border-box; }
.in-gauge .termometro { flex: 1; min-height: 0; width: 100%; }
.in-gauge .termometro svg { width: 100%; height: 100%; display: block; }
.in-operacao { align-items: stretch; justify-content: flex-start; }
.in-op { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1; align-items: center; }
.in-op li { display: grid; gap: 4px; justify-items: center; text-align: center; }
.in-op .in-v { font-size: clamp(1.6rem, 6dvh, 2.6rem); }
/* indicadores */
.in-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--in-gap); align-items: stretch; }
.in-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 8px 12px; display: grid; gap: 2px; align-content: start; min-height: clamp(78px, 10dvh, 120px); box-sizing: border-box; }
/* exige ação */
.in-exige { display: grid; gap: 6px; align-content: start; }
.in-acoes { display: grid; gap: 6px; }
.in-ac { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 6px 12px; min-height: clamp(58px, 8.4dvh, 92px); box-sizing: border-box; }
.in-ac .btn { flex: none; min-height: 44px; }
.in-ac-t { flex: 1; min-width: 0; display: grid; color: var(--text); }
.in-ac-t b { line-height: 1.2; overflow-wrap: anywhere; }
.in-ac-t span { font-size: .8rem; overflow-wrap: anywhere; }
/* eventos */
.in-eventos { display: grid; gap: 6px; grid-template-rows: auto minmax(0, 1fr); }
.in-evl { display: grid; gap: 6px; grid-template-rows: repeat(3, minmax(0, 1fr)); min-height: 0; }
.in-ev { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 0; border: 1px solid var(--border); border-radius: 14px; padding: 4px 10px; color: var(--text); text-decoration: none; background: var(--surface-2, transparent); }
.in-ev:hover { border-color: var(--accent); }
.in-ev i { font: 700 1.3rem/1.05 Fraunces, Georgia, serif; font-style: normal; background: var(--accent); color: var(--on-accent); border-radius: 12px; padding: 3px 9px; display: grid; justify-items: center; flex: none; }
.in-ev i small { font: 600 .58rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.in-ev-t { display: grid; min-width: 0; }
.in-ev-t b { font: 700 .92rem/1.2 Fraunces, Georgia, serif; overflow-wrap: anywhere; }
.in-ev-t span { font-size: .76rem; color: var(--text-muted); overflow-wrap: anywhere; }
.in-ev-vazio { justify-content: center; border: 1.5px dashed var(--border); color: var(--text-muted); font-weight: 600; }
/* próximo evento */
.in-pe { display: grid; gap: clamp(4px, 1dvh, 10px); align-content: start; border-color: var(--accent); }
.in-pe-topo { display: flex; gap: clamp(10px, 1.4vw, 20px); align-items: center; min-width: 0; }
.in-dias { font: 700 clamp(2rem, 8dvh, 5rem)/1 Fraunces, Georgia, serif; color: var(--ptext, var(--accent)); display: grid; justify-items: center; flex: none; font-variant-numeric: tabular-nums; }
.in-dias small { font: 600 .7rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.in-pe-nome { min-width: 0; display: grid; gap: 2px; }
.in-pe-nome h3 { margin: 0; font-size: clamp(1.05rem, 2.4dvh, 1.4rem); overflow-wrap: anywhere; line-height: 1.15; }
.in-pe-nome p { margin: 0; font-size: .85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.in-pe-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.in-pe-selos .selo { white-space: normal; font-size: .76rem; }
.in-prep { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.in-prep li { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .85rem; border-top: 1px solid var(--border); padding-top: 4px; }
.in-prep li span { color: var(--text-muted); }
.in-prep li b { font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.in-pe-vazio { display: grid; gap: 8px; justify-items: start; align-content: center; }
.in-pe-vazio h2 { margin: 0; font-size: 1.1rem; }
.in-pe-vazio p { margin: 0; color: var(--text-muted); font-size: .88rem; }
.in-rodape { grid-area: rod; display: flex; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: .82rem; }
.in-rodape span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .in-atalhos .btn span { text-transform: capitalize; } .in-atalhos .pref { display: none; } .in-atalhos .btn .i { display: none; } }
/* desktop */
@media (min-width: 1100px) {
  .in-app { height: calc(100dvh - var(--in-topo) - 24px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "cab cab" "esq dir" "rod rod"; }
  .in-esq { grid-area: esq; grid-template-rows: auto minmax(0, 1fr); }
  .in-dir { grid-area: dir; grid-template-rows: auto auto minmax(0, 1fr); }
  .in-ev-t b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}
/* tablet */
@media (min-width: 700px) and (max-width: 1099px) {
  .in-app { --in-topo: 118px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cab cab" "gau exi" "gau pe" "kpi kpi" "eve eve" "rod rod"; }
  .in-esq, .in-dir { display: contents; }
  .in-gauge { grid-area: gau; height: auto; min-height: 220px; }
  .in-exige { grid-area: exi; }
  .in-pe { grid-area: pe; }
  .in-kpis { grid-area: kpi; }
  .in-eventos { grid-area: eve; }
  .in-evl { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .in-ev { padding: 8px 10px; }
  .in-prep { display: none; }
}
/* celular */
@media (max-width: 699px) {
  main:has(.in-app) { padding-block: 12px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .in-app { display: flex; flex-direction: column; }
  .in-esq, .in-dir { display: contents; }
  .in-cab { flex-direction: column; align-items: stretch; }
  .in-atalhos { flex-wrap: nowrap; }
  .in-atalhos .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 6px; font-size: .8rem; gap: 4px; }
  .in-gauge { height: 30dvh; min-height: 170px; order: 1; }
  .in-kpis { order: 2; gap: 6px; }
  .in-kpi { padding: 8px; min-height: 0; }
  .in-v { font-size: 1.25rem; }
  .in-l { font-size: .6rem; letter-spacing: .04em; }
  .in-d { font-size: .72rem; }
  .in-exige { order: 3; }
  .in-ac { flex-wrap: wrap; }
  .in-ac-t { flex: 1 1 calc(100% - 48px); }
  .in-ac .btn { flex: 1 1 100%; }
  .in-pe { order: 4; }
  .in-prep { display: none; }
  .in-eventos { order: 5; }
  .in-evl { grid-template-rows: none; }
  .in-ev { padding: 8px 10px; }
  .in-ev-vazio { display: none; }
  .in-rodape { order: 6; }
}
@media (min-width: 1700px) and (min-height: 950px) { .in-ev-t b { font-size: 1.02rem; } }.in-v { line-height: 1.15; }
.in-dias { font-size: clamp(1.8rem, 7dvh, 4.5rem); line-height: .95; }
.in-dias small { line-height: 1.2; }
.in-sec h2 { line-height: 1.25; }
.in-sec .contagem { line-height: 1.2; }.in-dias { line-height: 1.1; }
.in-dias { line-height: 1.25; padding-block: 2px; }
@media (min-width: 700px) and (max-width: 1099px) {
  .in-ac { min-height: 0; padding-block: 6px; }
  .in-kpi { min-height: 0; }
  .in-gauge { min-height: 200px; }
}@media (min-width: 700px) and (max-width: 1099px) {
  .in-acoes .in-ac:nth-child(n+3) { display: none; }
  .in-pe-selos .selo:nth-child(n+2) { display: none; }
}@media (min-width: 1100px) { .in-sec a.so-menor { display: none; } }
@media (min-width: 1100px) and (max-height: 820px) { .in-gauge { height: clamp(190px, min(35dvh, 27vw), 440px); } }
.rel-det { min-width: 0; }
.rel-det .lista-simples { width: 100%; box-sizing: border-box; }
.rel-det .lista-simples li { display: grid; gap: 2px; justify-items: start; }
.rel-det .lista-simples li > span:first-child { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.rel-det .selo { max-width: 100%; box-sizing: border-box; }@media (min-width: 641px) { .rel-det { max-width: 240px; } .rel-det .lista-simples { width: 100%; } }@media (min-width: 641px) and (max-width: 900px) { .rel-custo-tab th:nth-child(5), .rel-custo-tab td:nth-child(5), .rel-custo-tab th:nth-child(6), .rel-custo-tab td:nth-child(6) { display: none; } }/* Próximo evento: 4 linhas de preparação (rótulo | barra | estado), tipografia escalada em dvh */
.in-prep { gap: clamp(4px, 1dvh, 10px); }
.in-prep li { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) minmax(0, auto); gap: 10px; align-items: center; border-top: 0; padding-top: 0; font-size: clamp(.82rem, 1.7dvh, 1rem); }
.in-pl { color: var(--text-muted); overflow-wrap: anywhere; }
.in-bar { display: block; height: 8px; border-radius: 99px; background: var(--track, var(--border)); position: relative; overflow: hidden; }
.in-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--bar, var(--accent)); border-radius: 99px; }
.in-prep li b { font-weight: 600; text-align: right; justify-content: flex-end; flex-wrap: wrap; }
.in-pe-nome h3 { font-size: clamp(1.2rem, 3.4dvh, 2.3rem); }
.in-dias { font-size: clamp(2.4rem, 10dvh, 6rem); }
@media (max-height: 820px) { .in-dias { font-size: clamp(1.8rem, 7dvh, 4.5rem); } .in-pe-nome h3 { font-size: clamp(1.05rem, 2.4dvh, 1.4rem); } }
@media (min-width: 700px) and (max-width: 1099px) {
  .in-app { --in-gap: 8px; }
  .in-card { padding: 8px 10px; }
  .in-cab h1 { font-size: 1.35rem; }
  .in-prep { display: none; }
}
@media (max-width: 699px) { .in-prep { display: none; } }@media (max-height: 820px) { .in-prep { gap: 3px; } .in-prep li { font-size: .8rem; } .in-pe { gap: 4px; } }
@media (max-width: 699px) { .in-kpi .in-d { display: none; } }@media (min-width: 1100px) and (max-height: 820px) { .in-pe-nome h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } }
@media (min-width: 1100px) { .in-ac-t b, .in-ac-t span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .in-ac-t span { -webkit-line-clamp: 1; line-clamp: 1; } }
@media (min-width: 1100px) and (max-height: 820px) { .in-pe-nome h3 { -webkit-line-clamp: 1; line-clamp: 1; } .in-pe.in-card { padding-block: 6px; } }
.in-pe-nome h3 { line-height: 1.25; }
@media (min-width: 1100px) { .in-pe-nome h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; padding-bottom: 2px; } }
@media (min-width: 1100px) and (max-height: 820px) { .in-pe-nome h3 { -webkit-line-clamp: 1; line-clamp: 1; } }
@media (min-width: 700px) and (max-width: 1099px) { .in-resumo { display: none; } .in-gauge { min-height: 170px; } main:has(.in-app) { padding-block: 8px; } .in-cab { gap: 6px 12px; } .in-kpi { padding-block: 6px; } .in-ev { padding: 6px 10px; } }
.nota-aceite { display: flex; gap: 8px; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 600; }
.nota-aceite[hidden] { display: none; }

/* ===== Início, três estilos (UI/UX inicio-3-opcoes): A Bar ao vivo, B Editorial, C Balcão. Tudo em em/cq, só tokens de cor. ===== */
main:has(.in3) { max-width: none; padding: 12px clamp(12px, 2vw, 32px); }
.ico { color: var(--text); flex: none; display: block; }
.in3 { --i3-m: var(--text-muted); --i3-tile-bg: var(--layer-1, var(--primary-hover)); --i3-tile-fg: #fff; container-type: size; container-name: st; height: calc(100dvh - 66px - 24px); min-height: 0; font-size: 14px; line-height: 1.4; color: var(--text); }
:root[data-theme="dark"] .in3 { --i3-tile-bg: var(--nav-bg); --i3-tile-fg: var(--nav-fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in3 { --i3-tile-bg: var(--nav-bg); --i3-tile-fg: var(--nav-fg); } }
@container st (min-width: 1700px) { .i3 { font-size: 16px; } }
.i3 { height: 100%; display: grid; min-height: 0; min-width: 0; font-size: inherit; }
.in3 .i3-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 1em; padding: 1.2em; min-width: 0; display: flex; flex-direction: column; }
.i3-eyebrow { font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--i3-m); font-weight: 600; }
.i3-num { display: block; font-family: Fraunces, Georgia, serif; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.i3-muted { color: var(--i3-m); }
.i3-pill { display: inline-flex; align-items: center; gap: .35em; font-size: .82em; font-weight: 600; padding: .2em .7em; border-radius: 99px; line-height: 1.3; }
.i3-pill.ok { background: var(--success-bg); color: var(--success); }
.i3-pill.warn { background: var(--warning-bg); color: var(--warning); }
.i3-pill.bad { background: var(--danger-bg); color: var(--danger); }
.i3-pill.neu { background: var(--surface-2); color: var(--i3-m); }
.i3-meter { position: relative; height: .7em; background: var(--track); border-radius: 99px; }
.i3-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bar); border-radius: 99px; width: var(--p, 0%); }
.i3-meter u { position: absolute; top: -.3em; bottom: -.3em; width: 2px; background: var(--text); text-decoration: none; left: var(--q, 0%); }
.i3-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.i3-row { display: flex; align-items: center; gap: .8em; padding: .7em 0; border-top: 1px solid var(--border); flex: 1; min-width: 0; }
.i3-row:first-child { border-top: 0; }
.i3-row > div { min-width: 0; flex: 1; }
.i3-row b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.i3-row small { color: var(--i3-m); display: block; overflow-wrap: anywhere; }
.i3-tile { width: 4.6em; flex: none; background: var(--i3-tile-bg); color: var(--i3-tile-fg); border-radius: .8em; text-align: center; padding: .5em 0; display: flex; flex-direction: column; justify-content: center; text-decoration: none; }
.i3-tile b { font: 600 1.9em Fraunces, Georgia, serif; line-height: 1; display: block; }
.i3-tile span { font-size: .75em; letter-spacing: .1em; text-transform: uppercase; }
.in3 .btn { min-height: 44px; font-size: 1em; }
.i3 h1, .i3 h2, .i3 h3 { margin: 0; font-family: Fraunces, Georgia, serif; text-wrap: balance; overflow-wrap: anywhere; }
.i3 p { margin: 0; }
.i3-link { font-weight: 600; text-decoration: none; }
/* estilos A a I (UI/UX): convertido do protótipo por scratchpad\gen_estilos_css.py */
/* ---------- A: bar ao vivo ---------- */
.i3-A{grid-template-columns:7fr 5fr;gap:1.2em}
.i3-A>div{display:flex;flex-direction:column;gap:1.2em;min-width:0}
.i3-A .hero{flex:1;justify-content:space-between;gap:1em}
.i3-A .hero .hd{display:flex;justify-content:space-between;align-items:center}
.i3-A .hero .mid{display:flex;gap:1.4em;align-items:center}
.i3-A .hero .i3-tile{width:clamp(6em,9cqw,9em);padding:.9em 0}
.i3-A .hero .i3-tile b{font-size:clamp(2.6em,4.4cqw,4em)}
.i3-A .hero h2{font-size:clamp(1.9em,3.4cqw,3.2em);line-height:1.05}
.i3-A .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.i3-A .facts div{background:var(--surface-2);border-radius:.8em;padding:.8em 1em}
.i3-A .facts .i3-num{font-size:2em;display:block;margin-top:.3em}
.i3-A .ft{display:flex;justify-content:space-between;align-items:center;gap:1em}
.i3-A .ag{flex:none;flex-direction:row;gap:1em;align-items:stretch}
.i3-A .ag>div{flex:1;display:flex;gap:.8em;align-items:center;min-width:0}
.i3-A .kpi{justify-content:space-between;gap:.8em}
.i3-A .kpi .i3-num{font-size:clamp(3.4em,6.4cqw,6.4em)}
.i3-A .two{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
.i3-A .two .i3-card{gap:.5em;justify-content:space-between}
.i3-A .two .i3-num{font-size:2.3em}
.i3-A .acoes{flex:1}
.i3-A .acoes .i3-row{align-items:flex-start}
/* ---------- B: editorial ---------- */
.i3-B{grid-template-rows:auto minmax(0,1.25fr) minmax(0,1fr);gap:1.6em;padding:1.8em 2.4em 1.8em}
.i3-B .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:1.4em}
.i3-B .hd h1{font-size:clamp(2.2em,3.6cqw,3.6em);font-weight:600;letter-spacing:-.02em}
.i3-B .hd p{margin:.4em 0 0;color:var(--i3-m);font-size:1.1em;max-width:56ch}
.i3-B .cards{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1.2em}
.i3-B .dc{align-items:center;text-align:center;justify-content:space-between;gap:.6em;padding:1.2em 1em}
.i3-B .dc .art{width:min(100%,9em);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);flex:none}
.i3-B .dc h3{font-size:1.35em}
.i3-B .dc .i3-num{font-size:2.6em}
.i3-B .dc:nth-child(n+5){display:none}
@container st (min-width:1700px){
  .i3-B .dc .art{width:min(100%,12em)}
  .i3-B{--n:6}
  .i3-B .dc:nth-child(n+5){display:flex}
}
.i3-B .low{display:grid;grid-template-columns:1.2fr 1fr;gap:1.2em}
.i3-B .ev{justify-content:space-between;gap:.8em}
.i3-B .ev .t{display:flex;gap:1.2em;align-items:center}
.i3-B .ev h2{font-size:clamp(1.5em,2.2cqw,2.2em);line-height:1.1}
.i3-B .ev .fx{display:flex;gap:2.2em;flex-wrap:wrap}
.i3-B .ev .fx b{display:block;font:600 1.6em Fraunces,Georgia,serif}
/* ---------- C: balcão ---------- */
.i3-C{grid-template-columns:1.15fr 1fr;gap:1.4em;padding:1.6em}
.i3-C>div{display:flex;flex-direction:column;gap:1.4em;min-width:0}
.i3-C .big{flex:1;justify-content:space-between;padding:1.8em}
.i3-C .big .i3-num{font-size:clamp(5em,30cqh,17em)}
.i3-C .big .i3-meter{height:1em}
.i3-C .act{gap:1em;justify-content:space-between}
.i3-C .act h2{font-size:clamp(1.7em,2.6cqw,2.6em);line-height:1.1}
.i3-C .act .btn{padding:1.1em 1.4em;font-size:1.15em}
.i3-C .ag{flex:1;min-height:0}
.i3-C .ag .i3-row{padding:.6em 0}
.i3-C .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.i3-C .ag .i3-tile{width:4.2em}
/* ---------- vazio ---------- */
.i3-empty .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em;flex:1;min-height:0}
.i3-empty .step{background:var(--surface-2);border-radius:.9em;padding:1.2em;display:flex;flex-direction:column;justify-content:space-between;gap:.8em;align-items:flex-start}
.i3-empty .step .n{font:600 3em Fraunces,Georgia,serif;color:var(--ptext);line-height:1}
.i3-empty .step h3{font-size:1.3em}
/* ---------- estilos: miniaturas, Meu perfil, primeiro acesso ---------- */
/* ---------- celular ---------- */
@container st (max-width:700px){
  .i3-A{display:flex}
  .i3-A>div{gap:1em;display:contents}
  .i3-A .hero .mid{gap:1em}
  .i3-A .hero .i3-tile{width:5em}
  .i3-A .hero .i3-tile b{font-size:2.2em}
  .i3-A .hero h2{font-size:1.5em}
  .i3-A .facts{grid-template-columns:repeat(3,1fr);gap:.5em}
  .i3-A .facts div{padding:.6em}
  .i3-A .facts .i3-num{font-size:1.5em}
  .i3-A .ag{flex-direction:column}
  .i3-A .kpi .i3-num{font-size:3.6em}
  .i3-A .two{grid-template-columns:1fr}
  .i3-A .hero,.i3-A .acoes{flex:none}
  .i3-A .hero{order:1}
  .i3-A .kpi{order:2}
  .i3-A .two{order:3}
  .i3-A .acoes{order:4}
  .i3-A .ag{order:5}
  .i3-A .acoes .i3-row{flex:none}
  .i3-B{display:flex;padding:1em;gap:1.2em}
  .i3-B .hd{flex-direction:column;align-items:stretch}
  .i3-B .hd h1{font-size:2em}
  .i3-B .cards{grid-template-columns:1fr 1fr;gap:.8em}
  .i3-B .dc{padding:.9em .6em}
  .i3-B .dc .i3-num{font-size:2em}
  .i3-B .dc h3{font-size:1.1em}
  .i3-B .low{display:flex;flex-direction:column}
  .i3-B .ev .t{align-items:flex-start}
  .i3-B .ev h2{font-size:1.5em}
  .i3-B .ev .fx{gap:1.2em}
  .i3-C{display:flex;padding:1em;gap:1em}
  .i3-C>div{display:contents}
  .i3-C .big{padding:1.2em;gap:1em}
  .i3-C .big .i3-num{font-size:5.4em}
  .i3-C .big,.i3-C .ag{flex:none;min-height:auto}
  .i3-C .act h2{font-size:1.5em}
  .i3-C .ag .i3-row{flex:none}
  .i3-empty .steps{grid-template-columns:1fr}
  .i3-empty .step{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.8em}
  .i3-empty .step .btn{grid-column:1/-1}
  .i3-empty .step .n{font-size:2.4em}
}
/* ================= seis novos estilos ================= */
@keyframes draw{from{stroke-dasharray:0 999}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(18%,-12%)}}
@media (prefers-reduced-motion:no-preference){
  .arc{animation:draw 1s ease-out}
  .i3-D .mc{transition:transform .18s ease,box-shadow .18s ease}
  .i3-D .mc:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.14)}
  .i3-G::before{animation:drift 16s ease-in-out infinite alternate}
}
/* ---------- D · Cardápio vivo ---------- */
.i3-D{grid-template-rows:auto minmax(0,1fr);gap:1.2em}
.i3-D .strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:1.4em;align-items:center;padding:.9em 1.2em}
.i3-D .ch{display:flex;flex-direction:column;gap:.1em;min-width:0}
.i3-D .ch b{font:600 1.6em Fraunces,Georgia,serif;line-height:1.15;font-variant-numeric:tabular-nums}
.i3-D .menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1.2em;min-height:0}
.i3-D .menu.ghosts{grid-template-rows:minmax(0,1fr)}
.i3-D .mc{padding:1em 1em 1.1em;gap:.35em;text-align:center;align-items:center}
.i3-D .mc .art{flex:1;min-height:0;width:100%;position:relative}
.i3-D .mc .art svg{position:absolute;inset:0;width:100%;height:100%}
.i3-D .mc h3{font-size:1.3em;line-height:1.1}
.i3-D .mc:nth-child(n+7){display:none}
.i3-D .mc.ghost{border-style:dashed;background:transparent}
.i3-D .seal{position:absolute;top:.8em;right:.8em;width:4.5em;height:4.5em;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 .9em Fraunces,Georgia,serif;line-height:1.1;transform:rotate(8deg);border:2px solid currentColor}
.i3-D .seal i{font-style:normal;font-size:.8em}
.i3-D .seal.ok{background:var(--success-bg);color:var(--success)}
.i3-D .seal.warn{background:var(--warning-bg);color:var(--warning)}
.i3-D .seal.bad{background:var(--danger-bg);color:var(--danger)}
@container st (min-width:1700px){
  .i3-D .menu{grid-template-columns:repeat(4,minmax(0,1fr))}
  .i3-D .mc:nth-child(n+7){display:flex}
  .i3-D .mc:nth-child(n+9){display:none}
  .i3-D .menu.ghosts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container st (max-width:1099px){
  .i3-D .menu{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  .i3-D .menu.ghosts{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
  .i3-D .ch b{font-size:1.3em}
}
/* ---------- E · Termômetro herói ---------- */
.i3-E{grid-template-columns:1fr 1.7fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:1.2em}
.i3-E .rs{display:contents}
.i3-E .gc2{grid-area:1/2/3/3;align-items:center;justify-content:space-between;gap:.8em;text-align:center}
.i3-E .gzb{flex:1;min-height:0;width:100%;position:relative}
.i3-E .gz{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:1;max-width:100%}
.i3-E .gz>svg{position:absolute;inset:0;width:100%;height:100%}
.i3-E .gv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;padding:14%;text-align:center}
.i3-E .gv .i3-num{font-size:clamp(3.2em,7cqw,8em)}
.i3-E .rc{align-items:center;text-align:center;justify-content:space-between;gap:.5em}
.i3-E .rg{flex:1;min-height:0;width:100%;position:relative}
.i3-E .rg>svg{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:1;max-width:100%}
.i3-E .rv{position:absolute;inset:0;display:grid;place-items:center;font:600 clamp(1.2em,2.2cqw,2.2em) Fraunces,Georgia,serif;font-variant-numeric:tabular-nums}
.i3-E .r1{grid-area:1/1}
.i3-E .r2{grid-area:2/1}
.i3-E .r3{grid-area:1/3}
.i3-E .r4{grid-area:2/3}
@container st (max-width:1099px){
  .i3-E{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1.6fr) minmax(0,1fr)}
  .i3-E .gc2{grid-area:1/1/2/5}
  .i3-E .r1{grid-area:2/1}
  .i3-E .r2{grid-area:2/2}
  .i3-E .r3{grid-area:2/3}
  .i3-E .r4{grid-area:2/4}
  .i3-E .gv .i3-num{font-size:clamp(3em,9cqw,6em)}
}
/* ---------- F · Linha do tempo ---------- */
.i3-F{grid-template-rows:minmax(0,1.4fr) minmax(0,1fr);gap:1.2em}
.i3-F .tlc{padding:1.2em 1.4em;gap:.8em}
.i3-F .tlh{display:flex;justify-content:space-between;align-items:center;gap:1em}
.i3-F .track{flex:1;min-height:0;display:flex;position:relative;gap:.4em}
.i3-F .track::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:var(--track);border-radius:2px;transform:translateY(-1.5px)}
.i3-F .nd{flex:1;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);justify-items:center;text-align:center;gap:.5em}
.i3-F .nd.hero{flex:2.2}
.i3-F .up{align-self:end;display:flex;flex-direction:column;align-items:center;gap:.1em}
.i3-F .up b{font:600 1.5em Fraunces,Georgia,serif}
.i3-F .dn{align-self:start;display:flex;flex-direction:column;gap:.15em;min-width:0}
.i3-F small{color:var(--i3-m)}
.i3-F .dot{width:1.1em;height:1.1em;border-radius:50%;background:var(--bar);border:3px solid var(--surface);position:relative;z-index:1}
.i3-F .nd.hero .dot{width:1.5em;height:1.5em}
.i3-F .hcard{border:1px solid var(--border);border-radius:1em;padding:.8em;background:var(--surface-2);display:flex;flex-direction:column;gap:.35em;align-items:center}
.i3-F .hcard h2{font-size:1.3em;line-height:1.1}
.i3-F .dn b,.i3-F .up b{overflow-wrap:anywhere}
.i3-F .hcard.ghost{border-style:dashed;background:transparent}
.i3-F .up .i3-tile{width:3.6em;padding:.3em 0}
.i3-F .up .i3-tile b{font-size:1.5em;color:var(--tile-fg)}
.i3-F .low{display:grid;grid-template-columns:1.3fr 1fr;gap:1.2em;min-height:0}
.i3-F .ck{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:0 1.4em;flex:1;min-height:0}
.i3-F .ci{display:flex;gap:.6em;align-items:center;border-top:1px solid var(--border)}
@container st (max-width:1099px){
  .i3-F .ck{grid-template-columns:1fr}
  .i3-F .nd .up b{font-size:1.2em}
}
@container st (max-width:700px){
  .i3-F .track{flex-direction:column;gap:1.2em;flex:none}
  .i3-F .track::before{left:calc(4.2em + 1.2em + .6em);right:auto;top:0;bottom:0;width:3px;height:auto;transform:none}
  .i3-F .nd,.i3-F .nd.hero{flex:none;grid-template-columns:4.2em 1.4em minmax(0,1fr);grid-template-rows:auto;justify-items:start;text-align:left;align-items:start;column-gap:.6em}
  .i3-F .up{grid-column:1;align-self:start;align-items:flex-end;width:100%;text-align:right}
  .i3-F .dot{grid-column:2;margin-top:.3em;justify-self:center}
  .i3-F .dn{grid-column:3}
  .i3-F .hcard{align-items:flex-start;text-align:left}
  .i3-F .low{grid-template-columns:1fr}
  .i3-F .ci{padding:.5em 0}
}
/* ---------- G · Mesa de bar ---------- */
.i3-G{grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:1.2em;position:relative;isolation:isolate;
  background:radial-gradient(60% 70% at 10% 100%,rgba(232,131,58,.30),transparent 70%),radial-gradient(55% 60% at 100% 0,rgba(142,59,68,.55),transparent 70%),var(--bg)}
.i3-G::before{content:"";position:absolute;width:40%;height:46%;left:0;bottom:0;background:radial-gradient(circle,rgba(232,131,58,.22),transparent 65%);z-index:-1;pointer-events:none}
.i3-G::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.i3-G .gl{background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.i3-G .gl{justify-content:space-between;gap:.6em}
.i3-G .i3-num{font-size:clamp(3.4em,6.4cqw,7.4em)}
.i3-G .gm .i3-num{font-size:clamp(4em,8cqw,9em)}
.i3-G .sp2{flex:1;min-height:3em;width:100%;position:relative}
.i3-G .sp2>svg{position:absolute;inset:0;width:100%;height:100%}
.i3-G .i3-row .ico{width:100%;height:auto;aspect-ratio:1}
.i3-G .ga{grid-column:1/-1}
.i3-G .ga .i3-list{flex-direction:row;gap:1.2em}
.i3-G .ga .i3-row{border-top:0;align-items:flex-start;padding:.2em 0}
@container st (max-width:1099px){
  .i3-G{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .i3-G .ga{grid-column:auto}
  .i3-G .ga .i3-list{flex-direction:column;gap:0}
  .i3-G .ga .i3-row{border-top:1px solid var(--border)}
  .i3-G .ga .i3-row:first-child{border-top:0}
}
/* ---------- H · Revista ---------- */
.i3-H{grid-template-rows:auto minmax(0,1.8fr) minmax(0,1fr);gap:1.1em}
.i3-H .mast{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding-bottom:.5em;border-bottom:3px double var(--text)}
.i3-H .mt{font:700 clamp(2em,4cqw,4.4em) Fraunces,Georgia,serif;letter-spacing:-.03em;line-height:1.05;font-style:italic}
.i3-H .md{font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:var(--i3-m)}
.i3-H .top2{display:grid;grid-template-columns:1.8fr 1fr;gap:1.2em;min-height:0}
.i3-H .cov{position:relative;gap:.8em;justify-content:space-between;padding:1.6em 34% 1.6em 1.8em}
.i3-H .cov h1{font-size:clamp(1.6em,2.9cqw,3.4em);line-height:1.06;letter-spacing:-.02em}
.i3-H .lede{margin:0;color:var(--i3-m);font-size:1.05em;max-width:52ch}
.i3-H .cart{position:absolute;right:1.6em;top:50%;transform:translateY(-50%);width:26%;aspect-ratio:1}
.i3-H .cart svg{width:100%;height:100%}
.i3-H .brf .i3-row .i3-num{font-size:1.9em;min-width:3.3em;flex:none}
.i3-H .cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4em;min-height:0}
.i3-H .col{border-top:3px solid var(--text);padding-top:.6em;display:flex;flex-direction:column;gap:.35em;justify-content:space-between;min-width:0}
.i3-H .kick{font-size:.75em;letter-spacing:.14em;text-transform:uppercase;color:var(--ptext);font-weight:600}
.i3-H .col h3{font-size:1.25em;line-height:1.15}
.i3-H .big{font:600 2.2em Fraunces,Georgia,serif;font-variant-numeric:tabular-nums}
@container st (max-width:1099px){
  .i3-H .top2{grid-template-columns:1.4fr 1fr}
  .i3-H .cov{padding-right:30%}
  .i3-H .cols4{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr))}
  .i3-H .big{font-size:1.8em}
  .i3-H{grid-template-rows:auto minmax(0,1.2fr) minmax(0,1.1fr)}
}
@container st (max-width:700px){
  .i3-H .mast{flex-direction:column;gap:.3em}
  .i3-H .top2{display:flex;flex-direction:column}
  .i3-H .cov{padding:1.2em}
  .i3-H .cart{display:none}
  .i3-H .cols4{display:flex;flex-direction:column}
  .i3-H .col{gap:.5em}
}
/* ---------- I · Mapa de calor ---------- */
.i3-I{grid-template-columns:7fr 5fr;gap:1.2em}
.i3-I .pn{gap:.8em}
.i3-I .ph2{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap}
.i3-I .hwrap{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.i3-I .hg{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:.5em}
.i3-I .sg{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:.5em}
.i3-I .ht{border-radius:.8em;padding:.6em .7em;display:flex;flex-direction:column;justify-content:space-between;gap:.3em;min-width:0;background:var(--hc);color:var(--ht)}
.i3-I .ht .ico{--ink:var(--ht)}
.i3-I .ht .top{display:flex;gap:.5em;align-items:center}
.i3-I .ht .top svg{width:2.2em;height:2.2em}
.i3-I .ht b{font-weight:600;line-height:1.15}
.i3-I .ht small{display:block;opacity:.95}
.i3-I .hv{font:600 1.55em Fraunces,Georgia,serif;font-variant-numeric:tabular-nums;line-height:1.1}
.i3-I .hv2{display:block;font-weight:600;line-height:1.15}
.i3-I .h1,.i3-I .sw5.h1{--hc:var(--h1);--ht:var(--text)}
.i3-I .h2,.i3-I .sw5.h2{--hc:var(--h2);--ht:var(--text)}
.i3-I .h3,.i3-I .sw5.h3{--hc:var(--h3);--ht:var(--text)}
.i3-I .h4,.i3-I .sw5.h4{--hc:var(--h4);--ht:var(--text)}
.i3-I .h5,.i3-I .sw5.h5{--hc:var(--h5);--ht:var(--on5)}
.i3-I .ht.n{--hc:var(--surface-2);--ht:var(--text)}
.i3-I .ht.sok{--hc:var(--h2);--ht:var(--text)}
.i3-I .ht.snear{--hc:var(--h3);--ht:var(--text)}
.i3-I .ht.sbad{--hc:var(--danger-bg);--ht:var(--danger)}
.i3-I .ht.gh{--hc:transparent;border:1px dashed var(--border)}
.i3-I .lg2{display:flex;gap:.7em;flex-wrap:wrap;font-size:.8em}
.i3-I .sw5{display:inline-flex;align-items:center;gap:.3em}
.i3-I .sw5 i{width:1.7em;height:.9em;border-radius:.3em;background:var(--hc);border:1px solid var(--border)}
.i3-I .ov{position:absolute;inset:0;display:grid;place-items:center;padding:1em}
.i3-I .ovc{background:var(--surface);border:1px solid var(--border);border-radius:1em;padding:1.2em 1.4em;text-align:center;max-width:26em}
@container st (max-width:1099px){
  .i3-I{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.2fr) minmax(0,1fr)}
  .i3-I .sg{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
}
@container st (max-width:700px){
  .i3-I .pn{flex:none}
  .i3-I .hg,.i3-I .sg{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:6.6em;flex:none}
  .i3-I .ht .top svg{width:1.8em;height:1.8em}
  .i3-I .ht .top b{font-size:.85em;overflow-wrap:anywhere}
  .i3-I .hwrap{flex:none}
}
/* ---------- celular: D e E ---------- */
@container st (max-width:700px){
  .i3-D .strip{grid-template-columns:1fr 1fr;gap:.8em 1em}
  .i3-D .strip .btn{grid-column:1/-1}
  .i3-D .menu{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:15em;gap:.8em}
  .i3-D .menu.ghosts{grid-template-columns:minmax(0,1fr);grid-auto-rows:13em}
  .i3-D .mc h3{font-size:1.1em}
  .i3-E .gc2{flex:none;height:22em}
  .i3-E .rs{display:grid;grid-template-columns:1fr 1fr;gap:1em}
  .i3-E .rc{grid-area:auto;height:12em}
  .i3-G{display:flex}
  .i3-G .gl{flex:none}
  .i3-G .gm .i3-num{font-size:4.4em}
  .i3-H .cols4{gap:1em}
}
@container st (max-width:1099px){
  .i3-A{grid-template-columns:1.25fr 1fr}
  .i3-A .two{grid-template-columns:1fr}
  .i3-A .kpi .i3-num{font-size:3.2em}
  .i3-A .hero h2{font-size:1.8em}
  .i3-A .facts .i3-num{font-size:1.4em}
  .i3-A .two .i3-num{font-size:1.7em}
  .i3-C{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.8fr) minmax(0,1.3fr)}
  .i3-C .big .i3-num{font-size:clamp(5em,16cqw,9em)}
  .i3-A .ag b,.i3-A .ag small{overflow-wrap:anywhere}
  .i3-A .i3-empty .steps{grid-template-columns:minmax(0,1fr)}
  .i3-A .i3-empty .step{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.8em}
  .i3-A .i3-empty .step .btn{grid-column:1/-1}
}
.in3 { --h1: color-mix(in srgb, var(--bar) 10%, var(--surface)); --h2: color-mix(in srgb, var(--bar) 24%, var(--surface)); --h3: color-mix(in srgb, var(--bar) 40%, var(--surface)); --h4: color-mix(in srgb, var(--bar) 62%, var(--surface)); --h5: var(--bar); --on5: #fff; --spk: var(--bar); }
:root[data-theme="dark"] .in3 { --on5: #150D0F; --spk: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in3 { --on5: #150D0F; --spk: var(--accent); } }
@media (max-width: 699px) { .in3 { container-type: inline-size; height: auto; } .i3 { height: auto; } main:has(.in3) { padding-block: 12px calc(96px + env(safe-area-inset-bottom, 0px)); } }
@media (max-height: 699px) and (min-width: 700px) { .in3 { container-type: inline-size; height: auto; } .i3 { height: auto; } }
@media (prefers-reduced-motion: no-preference) { .arc { animation: i3draw 1s ease-out; } @keyframes i3draw { from { stroke-dasharray: 0 999; } } }
/* barra do Início em passos de 1%: classes p0..p100 (largura) e q0..q100 (marca da meta), sem style inline */
.p0{--p:0%}.p1{--p:1%}.p2{--p:2%}.p3{--p:3%}.p4{--p:4%}.p5{--p:5%}.p6{--p:6%}.p7{--p:7%}.p8{--p:8%}.p9{--p:9%}.p10{--p:10%}.p11{--p:11%}.p12{--p:12%}.p13{--p:13%}.p14{--p:14%}.p15{--p:15%}.p16{--p:16%}.p17{--p:17%}.p18{--p:18%}.p19{--p:19%}.p20{--p:20%}.p21{--p:21%}.p22{--p:22%}.p23{--p:23%}.p24{--p:24%}.p25{--p:25%}.p26{--p:26%}.p27{--p:27%}.p28{--p:28%}.p29{--p:29%}.p30{--p:30%}.p31{--p:31%}.p32{--p:32%}.p33{--p:33%}.p34{--p:34%}.p35{--p:35%}.p36{--p:36%}.p37{--p:37%}.p38{--p:38%}.p39{--p:39%}.p40{--p:40%}.p41{--p:41%}.p42{--p:42%}.p43{--p:43%}.p44{--p:44%}.p45{--p:45%}.p46{--p:46%}.p47{--p:47%}.p48{--p:48%}.p49{--p:49%}.p50{--p:50%}.p51{--p:51%}.p52{--p:52%}.p53{--p:53%}.p54{--p:54%}.p55{--p:55%}.p56{--p:56%}.p57{--p:57%}.p58{--p:58%}.p59{--p:59%}.p60{--p:60%}.p61{--p:61%}.p62{--p:62%}.p63{--p:63%}.p64{--p:64%}.p65{--p:65%}.p66{--p:66%}.p67{--p:67%}.p68{--p:68%}.p69{--p:69%}.p70{--p:70%}.p71{--p:71%}.p72{--p:72%}.p73{--p:73%}.p74{--p:74%}.p75{--p:75%}.p76{--p:76%}.p77{--p:77%}.p78{--p:78%}.p79{--p:79%}.p80{--p:80%}.p81{--p:81%}.p82{--p:82%}.p83{--p:83%}.p84{--p:84%}.p85{--p:85%}.p86{--p:86%}.p87{--p:87%}.p88{--p:88%}.p89{--p:89%}.p90{--p:90%}.p91{--p:91%}.p92{--p:92%}.p93{--p:93%}.p94{--p:94%}.p95{--p:95%}.p96{--p:96%}.p97{--p:97%}.p98{--p:98%}.p99{--p:99%}.p100{--p:100%}
.q0{--q:0%}.q1{--q:1%}.q2{--q:2%}.q3{--q:3%}.q4{--q:4%}.q5{--q:5%}.q6{--q:6%}.q7{--q:7%}.q8{--q:8%}.q9{--q:9%}.q10{--q:10%}.q11{--q:11%}.q12{--q:12%}.q13{--q:13%}.q14{--q:14%}.q15{--q:15%}.q16{--q:16%}.q17{--q:17%}.q18{--q:18%}.q19{--q:19%}.q20{--q:20%}.q21{--q:21%}.q22{--q:22%}.q23{--q:23%}.q24{--q:24%}.q25{--q:25%}.q26{--q:26%}.q27{--q:27%}.q28{--q:28%}.q29{--q:29%}.q30{--q:30%}.q31{--q:31%}.q32{--q:32%}.q33{--q:33%}.q34{--q:34%}.q35{--q:35%}.q36{--q:36%}.q37{--q:37%}.q38{--q:38%}.q39{--q:39%}.q40{--q:40%}.q41{--q:41%}.q42{--q:42%}.q43{--q:43%}.q44{--q:44%}.q45{--q:45%}.q46{--q:46%}.q47{--q:47%}.q48{--q:48%}.q49{--q:49%}.q50{--q:50%}.q51{--q:51%}.q52{--q:52%}.q53{--q:53%}.q54{--q:54%}.q55{--q:55%}.q56{--q:56%}.q57{--q:57%}.q58{--q:58%}.q59{--q:59%}.q60{--q:60%}.q61{--q:61%}.q62{--q:62%}.q63{--q:63%}.q64{--q:64%}.q65{--q:65%}.q66{--q:66%}.q67{--q:67%}.q68{--q:68%}.q69{--q:69%}.q70{--q:70%}.q71{--q:71%}.q72{--q:72%}.q73{--q:73%}.q74{--q:74%}.q75{--q:75%}.q76{--q:76%}.q77{--q:77%}.q78{--q:78%}.q79{--q:79%}.q80{--q:80%}.q81{--q:81%}.q82{--q:82%}.q83{--q:83%}.q84{--q:84%}.q85{--q:85%}.q86{--q:86%}.q87{--q:87%}.q88{--q:88%}.q89{--q:89%}.q90{--q:90%}.q91{--q:91%}.q92{--q:92%}.q93{--q:93%}.q94{--q:94%}.q95{--q:95%}.q96{--q:96%}.q97{--q:97%}.q98{--q:98%}.q99{--q:99%}.q100{--q:100%}
.i3-ok { color: var(--success); } .i3-warn { color: var(--warning); } .i3-bad { color: var(--danger); }
.i3-gap { margin-top: .7em; } .i3-gap-l { margin-top: .8em; font-size: 1.1em; }
.i3-A .ag > a, .i3-A .ag > div { flex: 1; display: flex; gap: .8em; align-items: center; min-width: 0; color: var(--text); text-decoration: none; }
.i3-A .ag b, .i3-A .ag small { display: block; overflow-wrap: anywhere; }
.i3-tile-s { width: 3.6em; } .i3-tile-s b { font-size: 1.5em; }
.i3-B .dc .art .ico { width: 62%; height: auto; aspect-ratio: 1; }
.i3-B .dc h3 { overflow-wrap: anywhere; }
.i3-B .cards[data-n3] { --n: 3; }
.i3-B .cards[data-n3] .dc { display: flex; }
.i3-B .low-vazio { grid-template-columns: 1fr 1fr; }
.i3-C .i3-dias { display: flex; align-items: baseline; gap: .3em; }
.i3-C .i3-dias .i3-num { font-size: clamp(5em, 30cqh, 17em); }
.i3-C .i3-dias-u { font: 600 1.8em Fraunces, Georgia, serif; }
.i3-C .i3-nome-ev { font-size: 1.3em; font-weight: 600; }
.i3-C .i3-nome-ev span { display: block; font-weight: 400; font-size: .8em; }
.i3-C .i3-row-link { color: var(--text); text-decoration: none; }
.i3-C .i3-row-link:hover b { text-decoration: underline; }
.i3 a:not(.btn) { white-space: normal; overflow-wrap: anywhere; }
.i3-A .ft .btn, .i3 .btn { white-space: normal; text-align: center; }
.com-icone { display: inline-flex; align-items: center; gap: 8px; }
.com-icone > span { min-width: 0; overflow-wrap: anywhere; }
.c-nome .ico { margin-right: 2px; }
.stp > .ico { margin-right: 4px; }


/* ===== Planos: cartões, alternância e tabela comparativa. Só tokens de cor. (gerado de planos_gen.py) ===== */
.pl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pl-ciclos{display:inline-flex;border:1.5px solid var(--border);border-radius:999px;padding:4px;gap:4px;background:var(--surface);margin:0 0 8px;flex-wrap:wrap}
.pl-ciclos button{font:600 15px Inter,system-ui,sans-serif;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--text);cursor:pointer}
.pl-ciclos button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.pl-promo{display:block;min-height:1.5em;margin:0 0 24px;color:var(--text-muted);font-weight:600}
.pl-cards{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.pl-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pl-card h3{margin:0;font-size:24px}
.pl-dest{border:2px solid var(--ptext);background:var(--surface-2);box-shadow:0 14px 28px -18px color-mix(in srgb,var(--primary) 45%,transparent)}
.pl-col-dest{background:var(--surface-2)}
.pl-tab thead th.pl-col-dest{background:var(--surface-2)}
.pl-soon-c{color:var(--warning);font-weight:600}
.pl-sub2{color:var(--text-muted);font-size:13px;min-height:1.3em}
.pl-flag{align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nav-fg);background:var(--nav-bg);border-bottom:3px solid var(--nav-ul);border-radius:10px;padding:3px 12px}
.pl-rec-selo{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nav-fg);background:var(--nav-bg);border-bottom:2px solid var(--nav-ul);border-radius:8px;padding:1px 8px;vertical-align:middle}
.pl-para{margin:0;color:var(--text-muted);min-height:3em}
.pl-linha{margin:4px 0;display:flex;flex-direction:column;gap:2px}
.pl-preco{font:700 40px/1.1 Fraunces,Georgia,serif;font-variant-numeric:tabular-nums}
.pl-sub{color:var(--text-muted);font-size:14px}
.pl-lista{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:8px;flex:1}
.pl-lista li{padding-left:26px;position:relative}
.pl-lista li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}
.pl-nota{margin:18px 0 0;color:var(--text-muted)}
.pl-tabela{margin-top:36px;overflow-x:auto}
.pl-tabela h3{margin:0 0 12px}
.pl-tab{border-collapse:separate;border-spacing:0;width:100%;min-width:620px;font-size:15px}
.pl-tab th,.pl-tab td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle;overflow-wrap:anywhere}
.pl-tab .pl-rec{text-align:left;font-weight:500;width:46%}
.pl-tab thead th{position:sticky;top:var(--pl-topo,0px);z-index:3;background:var(--bg);font:700 16px Inter,system-ui,sans-serif;border-bottom:2px solid var(--border)}
.pl-tab thead .pl-rec{z-index:4}
.pl-tab .pl-grupo th{background:var(--surface-2);text-align:left;font:700 13px Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.pl-ok{color:var(--success);font-weight:700;font-size:18px}
.pl-no{color:var(--text-muted)}
.pl-val{font-weight:600}
.pl-soon{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;color:var(--warning);background:var(--warning-bg,var(--surface-2));border-radius:999px;padding:1px 9px;white-space:nowrap}
@media (min-width:821px){.pl-tabela{overflow:visible}}
@media (max-width:820px){
  .pl-cards{grid-template-columns:1fr}
  .pl-dest{order:-1}
  .pl-para{min-height:0}
  .pl-tabela{max-height:80vh;overflow:auto}
  .pl-tab{min-width:560px}
  .pl-tab .pl-rec{position:sticky;left:0;z-index:2;background:var(--bg);width:auto;min-width:170px}
  .pl-tab .pl-grupo th{position:sticky;left:0}
  .pl-tab thead th{top:0}
  .pl-tab thead .pl-rec{z-index:5}
}

.plano-atual{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 20px;margin:0 0 18px}
.plano-atual h2{font-size:1.05rem;margin:0 0 6px}.plano-atual p{margin:4px 0}
.pl-tab thead th{top:var(--pl-topo,66px)}

.pl-tab th, .pl-tab td { white-space: normal; }
.pl-tab thead th { white-space: nowrap; }
.pl-tab .pl-grupo th { white-space: normal; }
.plano-regras { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 20px; margin: 22px 0; }
.plano-regras h2 { font-size: 1.1rem; margin: 0 0 6px; }
.plano-regras-lista { display: grid; gap: 10px; margin: 12px 0 0; }
.plano-regras-lista div { display: grid; gap: 2px; }
.plano-regras-lista dt { font-weight: 700; }
.plano-regras-lista dd { margin: 0; color: var(--text-muted); }
.i3-ptext { color: var(--ptext); }
.legenda-i { margin-top: .3em; }
.i3-G .gnome { font: 600 1.5em Fraunces, Georgia, serif; display: block; overflow-wrap: anywhere; }
.i3-G .gico { flex: none; width: 2.4em; }
.i3-G .gico .ico { width: 100%; height: auto; }
.i3-G .sp2 { display: flex; align-items: center; }
.i3-G .sp2 .i3-meter { width: 100%; height: 1em; }
.i3-D .mc { text-decoration: none; color: var(--text); }
.i3-D .mc .art .ico { position: absolute; inset: 0; width: 100%; height: 100%; }
.i3-F a.nd { color: var(--text); text-decoration: none; }
.i3-I a.ht { text-decoration: none; }
.i3-I .ht b, .i3-I .ht .hv, .i3-I .ht small, .i3-I .ht .hv2 { overflow-wrap: anywhere; }/* celular: o .main do protótipo vira o .i3 (coluna única; a página rola) */
@container st (max-width: 700px) { .i3 { display: flex; flex-direction: column; gap: 1em; align-content: flex-start; } .i3 > * { flex: none; } .i3-E { display: flex; } }
@media (min-width: 700px) and (max-width: 1099px) { .in3 { height: calc(100dvh - 118px - 24px); } }@container st (max-width: 700px) { .i3-E .rc { height: 15em; } .i3-E .rv { overflow-wrap: anywhere; } }
.form-perfil { max-width: 860px; }
.estilos-inicio { display: grid; gap: 12px; }
.estilo-grupo { font-size: 1.05rem; margin: 10px 0 0; }
.estilo-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.estilo-op { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface); cursor: pointer; min-width: 0; }
.estilo-op:has(input:checked) { border-color: var(--ptext); box-shadow: 0 0 0 2px var(--ptext); }
.estilo-op:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.estilo-op input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
.estilo-op span { display: grid; gap: 4px; min-width: 0; }
.estilo-op small { color: var(--text-muted); overflow-wrap: anywhere; }
.estilo-op a { font-weight: 600; justify-self: start; min-height: 32px; }.seletor-icone { border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: grid; gap: 10px; min-width: 0; }
.seletor-icone legend { font-weight: 700; padding: 0 6px; }
.si-previa { display: flex; align-items: center; gap: 12px; }
.si-previa b { display: block; }
.si-acoes { margin-bottom: 4px; }
.si-t { font-size: 1rem; margin: 8px 0 4px; }
.si-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 280px; overflow: auto; padding: 2px; }
.si-grade button { display: grid; justify-items: center; gap: 4px; padding: 8px 6px; min-height: 48px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: 500 .8rem Inter, system-ui, sans-serif; cursor: pointer; text-align: center; overflow-wrap: anywhere; }
.si-grade button[aria-checked="true"] { border-color: var(--ptext); box-shadow: 0 0 0 2px var(--ptext); }
.si-gen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.si-gen label { display: grid; gap: 4px; font-weight: 600; font-size: .85rem; }
.si-gen select { min-height: 44px; }/* ajustes pontuais (dono): pílula de dias sem deformar, cartões de altura igual, rádios na cor da marca, Pix truncado, status discretos */
input[type=radio], input[type=checkbox] { accent-color: var(--primary); }
.ev { display: flex; flex-direction: column; align-items: stretch; }
.ev .l2 { margin-top: 0; }
.aviso-dias { display: block; width: auto; max-width: 100%; border-radius: 10px; padding: 6px 12px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; margin-top: auto; }
.estilo-lista.op { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.estilo-lista.vis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .estilo-lista.op, .estilo-lista.vis { grid-template-columns: minmax(0, 1fr); } }
.pix-valor { display: inline-block; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
td.dado-privado { min-width: 0; max-width: 20ch; }
.st-pedido { color: var(--text-muted); background: var(--surface-2); }
.st-recebida { color: var(--text); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cor-padrao { margin-top: 6px; }td.dado-privado { max-width: none; overflow-wrap: anywhere; white-space: normal; }
.pix-valor { max-width: 9ch; }
@media (min-width: 641px) and (max-width: 900px) { .tabela.responsiva th, .tabela.responsiva td { padding: 10px 8px; font-size: .9rem; } .tabela.responsiva .btn, .tabela.responsiva .acao { padding-inline: 8px; } }@media (min-width: 641px) and (max-width: 900px) { .tabela th, .tabela td { padding: 10px 8px; font-size: .9rem; } }
/* barra de margem na mesma cor da pílula (até o UI/UX entregar o componente novo) */
.barra.margem-alta::after { background: var(--success); }
.barra.margem-media::after { background: var(--warning); }
.barra.margem-baixa::after { background: var(--danger); }
.mini-estilo { display: block; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.mini-estilo img { display: block; width: 100%; height: auto; }
.mini-escuro { display: none !important; }
:root[data-theme="dark"] .mini-claro { display: none !important; }
:root[data-theme="dark"] .mini-escuro { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mini-claro { display: none !important; } :root:not([data-theme="light"]) .mini-escuro { display: block !important; } }.aviso-estilo { position: fixed; right: 16px; bottom: 16px; z-index: 25; max-width: 340px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra, 0 8px 28px rgba(0,0,0,.28)); display: grid; gap: 10px; }
.aviso-estilo[hidden] { display: none; }
.aviso-estilo p { margin: 0; font-size: .92rem; }
.aviso-estilo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 699px) { .aviso-estilo { left: 12px; right: 12px; max-width: none; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
.selo-em-uso { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nav-fg); background: var(--nav-bg); border-bottom: 2px solid var(--nav-ul); border-radius: 8px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }.pl-tabela { position: relative; }
.pl-tab td, .pl-tab th { position: relative; }
.cardapio-form { max-width: 860px; }
.cd-lista { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.cd-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; background: var(--surface); min-width: 0; }
.cd-marca { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.cd-marca input { width: 22px; height: 22px; }
.cd-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cd-setas { display: flex; gap: 6px; }
.cd-setas .btn { min-width: 44px; min-height: 44px; padding: 0; }
.cd-grupo { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.cd-grupo legend { font-weight: 700; margin-bottom: 6px; }
.cd-op { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); cursor: pointer; }
.cd-op:has(input:checked) { border-color: var(--ptext); box-shadow: 0 0 0 2px var(--ptext); }
.cd-op span { display: grid; gap: 2px; }
.cd-op small { color: var(--text-muted); }
.cd-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 10px 0; }
.cd-campos label, .cd-rodape { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.cd-campos select, .cd-rodape input { min-height: 44px; }/* ===== Acabamento (UI/UX, kit-de-componentes): base neutra, status em pílula única, medidor de margem ===== */
body .selo { background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 500; font-size: .84rem; padding: 2px 10px; gap: 7px; white-space: nowrap; }
body .selo .i { display: none; }
body .selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
body .selo.margem-alta::before, body .selo.ev-confirmado::before, body .selo.st-recebida::before { background: var(--success); }
body .selo.margem-media::before { background: var(--warning); }
body .selo.margem-baixa::before, body .selo.ev-cancelado::before { background: var(--danger); }
body .selo.ev-orcamento::before { background: transparent; border: 1.5px solid var(--text-muted); }
body .selo.st-pedido::before { background: var(--warning); }
body .selo.st-recebida { border: 0; padding-inline: 0; color: var(--text-muted); }
body .selo.st-recebida::before { display: none; }
body .selo.ev-realizado { color: var(--text-muted); }
.ev .aviso-dias, .aviso-dias { background: transparent; color: var(--text-muted); padding: 0; border-radius: 0; font-weight: 500; }
.ev { min-height: 196px; }
.tabela th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.tabela tbody tr:hover td { background: var(--surface-2); }
/* medidor de margem */
.mt { display: flex; flex-direction: column; gap: 6px; min-width: 150px; max-width: 220px; overflow-wrap: anywhere; }
.mt .tx2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .9rem; color: var(--text-muted); }
.mt .tx2 b { font: 600 1.05rem Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: tabular-nums; }
.mt .zn { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text); font-size: .84rem; }
.mt .zn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.mt.k1 .zn::before, .mt.k1 .fl2 { background: var(--danger); }
.mt.k2 .zn::before, .mt.k2 .fl2 { background: var(--warning); }
.mt.k3 .zn::before, .mt.k3 .fl2 { background: var(--success); }
.mt .br2 { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2); display: flex; }
.mt .z { height: 100%; width: var(--p, 0%); flex: none; }
.mt .z1 { background: var(--danger-bg); border-radius: 99px 0 0 99px; } .mt .z2 { background: var(--warning-bg); } .mt .z3 { background: var(--success-bg); flex: 1; border-radius: 0 99px 99px 0; }
.mt .fl2 { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 99px; }
.mt .tk { position: absolute; top: -3px; bottom: -3px; width: 2px; left: var(--q, 0%); background: var(--text); border-radius: 1px; }
.mt .ac-m { color: var(--text-muted); font-size: .8rem; }@media (min-width: 641px) and (max-width: 900px) { .tabela th, .tabela td { padding: 8px 6px; font-size: .85rem; } .tabela .btn, .tabela .acao { padding-inline: 6px; } .tabela .selo { padding-inline: 8px; } }
.res-detalhes, .simulador, .simulador-ficha { box-sizing: border-box; max-width: 100%; overflow-x: clip; }@media (min-width: 641px) and (max-width: 900px) { .tabela th { white-space: normal; overflow-wrap: anywhere; } .tabela td .selo { white-space: normal; } .tabela td .barra.larga { max-width: 120px; } }

/* ===== Modo Vitrine: tela Configurar (FrontEnd 2) ===== */
.vt-config .vt-avisos { min-height: 0; margin: 0 0 12px; }
.vt-config .vt-avisos:not(:empty) { padding: 10px 14px; border-radius: 12px; background: var(--info-bg); color: var(--info); font-weight: 600; }
.vt-config .vt-avisos.erro:not(:empty) { background: var(--danger-bg); color: var(--danger); }
.vt-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.vt-largo { grid-column: 1 / -1; }
.vt-bloco { display: grid; gap: 14px; min-width: 0; }
.vt-bloco h2, .vt-bloco h3 { margin: 0; }
.vt-bloco fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.vt-bloco legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.vt-modelos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-modelos legend { grid-column: 1 / -1; }
.vt-modelo { display: grid; gap: 6px; border: 1.5px solid var(--border); border-radius: 12px; padding: 8px; background: var(--surface); cursor: pointer; min-width: 0; font-size: .9rem; }
.vt-modelo:has(input:checked) { border-color: var(--ptext); box-shadow: 0 0 0 2px var(--ptext); }
.vt-modelo:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.vt-modelo, .vt-cor { position: relative; }
.vt-modelo input, .vt-cor input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vt-mini { display: grid; gap: 4px; aspect-ratio: 16 / 9; border-radius: 8px; padding: 8px; background: var(--surface-2); }
.vt-mini i { background: var(--border); border-radius: 3px; }
.vt-mini-a { grid-template-columns: repeat(3, 1fr); }
.vt-mini-b { grid-template-columns: 1.5fr 1fr; }
.vt-mini-b i:first-child { background: var(--accent); border-radius: 50%; }
.vt-mini-c i { border: 2px dashed var(--text-muted); background: transparent; }
.vt-opcoes label, .vt-chave { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.vt-opcoes input, .vt-chave input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.vt-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-cor { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 6px; border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--surface); }
.vt-cor:has(input:checked) { border-color: var(--ptext); box-shadow: 0 0 0 2px var(--ptext); }
.vt-cor:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.vt-bolinha { width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid var(--border); flex: none; }
.vt-contraste.ok { color: var(--success); }
.vt-contraste.aviso { color: var(--warning); background: var(--warning-bg); padding: 6px 10px; border-radius: 10px; font-weight: 600; }
.vt-promo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.vt-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.vt-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vt-item { display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) minmax(120px, 180px) auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 6px 10px; background: var(--surface); min-width: 0; }
.vt-item.off { opacity: .6; }
.vt-marca { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.vt-marca input { width: 22px; height: 22px; accent-color: var(--primary); }
.vt-nome { display: grid; min-width: 0; overflow-wrap: anywhere; }
.vt-nome small { color: var(--text-muted); }
.vt-cat select { width: 100%; min-height: 44px; }
.vt-setas { display: flex; gap: 6px; }
.vt-setas .btn { min-width: 44px; min-height: 44px; padding: 0; }
@media (max-width: 640px) { .vt-item { grid-template-columns: 44px 40px minmax(0, 1fr); } .vt-cat, .vt-setas { grid-column: 2 / -1; } .vt-modelos { grid-template-columns: 1fr; } }
.vt-vazio { margin: 0; color: var(--text-muted); }
.vt-previa { margin-top: 16px; }
.vt-viewer { display: flex; justify-content: center; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); overflow: hidden; }
.vt-quadro { position: relative; flex: none; }
.vt-quadro .tv { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vt-links { margin-top: 16px; }
.vt-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.vt-link.off { opacity: .65; }
.vt-qr { width: 140px; height: 140px; padding: 6px; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); }
.vt-qr svg { width: 100%; height: 100%; display: block; }
.vt-link-dados { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.vt-rotulo { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.vt-codigo { font: 700 1.5rem/1.1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.vt-url { font: 500 .85rem ui-monospace, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 640px) { .vt-link { grid-template-columns: minmax(0, 1fr); } }@media (min-width: 641px) and (max-width: 900px) { .tabela td { white-space: normal; overflow-wrap: anywhere; } }
.mt .z3 { flex: 1; }
.mt .tp { position: relative; height: 16px; font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.mt .tp span { position: absolute; white-space: nowrap; bottom: 0; left: var(--q, 0%); transform: translateX(-50%); }
.mt.gr { max-width: none; width: 100%; gap: 8px; }
.mt.gr .br2 { height: 14px; }
.mt.gr .tp { height: 18px; font-size: .8rem; }
.mt.gr .tx2 b { font-size: 2.2rem; line-height: 1; }
.mt.gr .tx2 { font-size: .95rem; }
.mt.gr .ac-m { font-size: .9rem; }
.legenda-margem { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .72rem; color: var(--text-muted); }.resultado svg[data-copo], .painel-resultado svg[data-copo], .resultado .copo-wrap, .painel-resultado .res-selo, .resultado .linha-selo { display: none !important; }
.mt-slot { margin: 6px 0; min-width: 0; }
.mt-slot:empty { display: none; }
/* ===== Kit de componentes (UI/UX) aplicado às telas de lista, formulário e estilo (FrontEnd 2) =====
   Regras do kit: base neutra, status em um só estilo (pílula de contorno com ponto e texto), números tabulares,
   linhas de tabela de 14 px, cartão de evento uniforme, formulário com o acento da marca, configurações em cartões de altura igual. */
.selo[class*="ev-"], .selo.st-pedido, .selo.st-recebida { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); font-weight: 500; font-size: .82rem; padding: 2px 10px; gap: 7px; }
.selo[class*="ev-"] .i, .selo.st-pedido .i, .selo.st-recebida .i { display: none; }
.selo[class*="ev-"]::before, .selo.st-pedido::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
.selo.ev-orcamento::before { background: var(--warning); }
.selo.ev-confirmado::before { background: var(--success); }
.selo.ev-cancelado::before { background: var(--danger); }
.selo.ev-realizado::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.selo.st-pedido::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.selo.st-recebida { box-shadow: none; padding-inline: 0; color: var(--text-muted); }
.tabela { border-radius: 14px; }
.tabela th, .tabela td { padding: 14px 16px; }
.tabela th { border-bottom: 1px solid var(--border); }
.tabela td, .num, .res-ev strong, .resumo-estoque strong { font-variant-numeric: tabular-nums; }
.tabela td.num, .tabela th.num { text-align: right; }
.cabecalho h1 { font-size: clamp(1.7rem, 4.2vw, 2.3rem); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.form input[type="checkbox"], .form input[type="radio"], .estilo-op input, .seletor-icone input { accent-color: var(--primary); }
.form input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.form .campo .ajuda, .campo .ajuda { font-size: .8rem; }
.ev { border-radius: 14px; padding: 18px; gap: 8px; border-width: 1px; min-height: 196px; }
.ev:hover { border-color: var(--text); transform: none; }
.ev.prox { border-color: var(--text); box-shadow: none; }
.ev .t b { min-height: 2.4em; line-height: 1.2; display: block; }
.ev .l2 { margin-top: auto; border-top: 1px solid var(--border); }
.ev .aviso-dias { order: 0; }
.ev .data { background: transparent; padding: 0; min-width: 44px; }
.resumo-estoque { display: inline-grid; gap: 2px; padding: 14px 20px; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.resumo-estoque strong { font: 600 clamp(1.5rem, 3.6vw, 2.1rem)/1.15 Fraunces, Georgia, serif; }
.form-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-config .grupo-form { align-self: stretch; border-radius: 14px; padding: 18px 20px 20px; background: var(--surface); }
@media (max-width: 900px) { .form-config { grid-template-columns: minmax(0, 1fr); } }
.estilo-op { border-width: 1px; border-radius: 12px; }
.estilo-op:hover { border-color: var(--text); }
.grupo-form legend { font-size: 1.15rem; }
.pix-valor { font: 500 .82rem ui-monospace, Consolas, monospace; background: var(--surface-2); padding: 2px 8px; border-radius: 6px; max-width: 15ch; }
.nome { font-weight: 600; }
.menu-acoes summary { border-width: 1px; }
@media (prefers-reduced-motion: no-preference) { .ev, .estilo-op { transition: border-color .15s; } }
/* ===== Kit: cartão de evento de 5 linhas e grupos por mês (FrontEnd 2) ===== */
.evs .mh { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 0 -2px; }
.evs .mh:first-child { margin-top: 0; }
.evs .mh h2 { font-size: 1.25rem; margin: 0; }
.evs .mh span { color: var(--text-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.ev .r1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.ev .dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.ev h3 { font: 600 1.25rem/1.2 Fraunces, Georgia, serif; min-height: 2.4em; margin: 0; overflow-wrap: anywhere; }
.ev .lc { color: var(--text-muted); font-size: .9rem; overflow-wrap: anywhere; }
.ev .fq { color: var(--text-muted); font-size: .9rem; min-height: 1.4em; }
.ev.prox .fq { color: var(--text); font-weight: 600; }
.ev .l2 { padding-top: 12px; min-height: 2.6em; }
/* Modo Vitrine, Configurar: alvo mínimo de 24 px nos rádios e chaves; a linha inteira (44 px) também é área de toque */
.vt-opcoes input, .vt-chave input, .vt-marca input { width: 24px; height: 24px; }
.vt-opcoes label, .vt-chave { min-height: 44px; cursor: pointer; }

/* Convocação da equipe (Dono e Gerente): resumo, formulário em cartões, pessoas, WhatsApp manual */
.cv { display: grid; gap: 16px; min-width: 0; }
.cv-mig { margin: 0 0 2px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.cv-mig a { color: var(--text-muted); text-decoration: none; }
.cv-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cv-resumo .card { display: grid; gap: 4px; padding: 16px; }
.cv-n { font: 600 2rem/1 Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; }
.cv-r, .pl { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--text-muted); }
.cv-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
.cv-pt.ok { background: var(--success); } .cv-pt.wn { background: var(--warning); } .cv-pt.bd { background: var(--danger); }
.cv-pt.oc { background: transparent; border: 1.5px solid var(--text-muted); }
.cv .pl { border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px 2px 9px; font-weight: 600; color: var(--text); white-space: nowrap; }
.cv .pl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.cv .pl.ok::before { background: var(--success); } .cv .pl.wn::before { background: var(--warning); } .cv .pl.bd::before { background: var(--danger); }
.cv .pl.oc::before { background: transparent; border: 1.5px solid var(--text-muted); width: 8px; height: 8px; box-sizing: border-box; }
.cv-aviso { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--warning-bg); color: var(--warning); }
.cv-aviso small { display: block; margin-top: 2px; }
.cv-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cv-acoes form { margin: 0; }
.cv-form { display: grid; gap: 16px; }
.cv-sec { display: grid; gap: 12px; min-width: 0; }
.cv-sec h2 { margin: 0; }
.cv-sec .campos { margin: 0; }
.cv-larga { grid-column: 1 / -1; }
.cv-aj { font-size: .82rem; color: var(--text-muted); margin: 0; }
.cv-modelo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cv-pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cv-p { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.cv-wa .cv-p { grid-template-columns: minmax(0, 1fr) auto; }
.cv-nm b, .cv-nm small, .cv-st small { display: block; }
.cv-nm small, .cv-st small { color: var(--text-muted); font-size: .82rem; overflow-wrap: anywhere; }
.cv-hq { display: grid; gap: 3px; }
.cv-ck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: .9rem; }
.cv-ck input { width: 22px; height: 22px; accent-color: var(--primary); }
.cv-texto[hidden] { display: none; }
.cv-pre { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; font: .88rem/1.55 ui-monospace, Consolas, monospace; max-height: 360px; overflow: auto; }
.cv-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9rem; }
.cv-hist b { font-variant-numeric: tabular-nums; margin-right: 6px; }
@media (max-width: 900px) { .cv-p { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cv-nm, .cv-st { grid-column: 1 / -1; } .cv-wa .cv-p { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .cv-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Medidor grande: rótulos "mín." e "meta" sem encostar um no outro (mín. termina no marcador, meta começa nele) */
.mt .tp span:first-child { transform: translateX(calc(-100% - 5px)); }
.mt .tp span:last-child { transform: translateX(5px); }
/* Grupos nas listas (mês, categoria, atenção): o título quebra linha em vez de estourar no celular */
tr.grupo-dia th { white-space: normal; overflow-wrap: anywhere; text-align: left; }
tr.grupo-dia th b { font-variant-numeric: tabular-nums; }
.resumo-grupos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; color: var(--text-muted); font-size: .9rem; }
.resumo-grupos strong { color: var(--text); }

.simulador input { max-width: 100%; box-sizing: border-box; }
.simulador input[type=range] { margin: 0; }

/* Convocação: campos em colunas, um só botão primário, alvo de 44 px no "Mensagem enviada" */
.cv .campos { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cv-ck { padding: 10px 6px; }
.cv-ger { color: var(--text-muted); font-weight: 400; }
.ag-conv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 4px 0; }
.ag-conv .pl { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: .85rem; font-weight: 600; }
.ag-conv .pl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.ag-conv .pl.ok::before { background: var(--success); } .ag-conv .pl.wn::before { background: var(--warning); } .ag-conv .pl.bd::before { background: var(--danger); }
@media (max-width: 560px) { .rel-hb-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } .rel-hb-row .rel-trilho { grid-row: auto; } .rel-hb-n { white-space: normal; overflow: visible; text-overflow: clip; } .rel-hb-v { flex-wrap: wrap; } }

/* Minha agenda (web): cartão da convocação */
.ag-cv { display: grid; gap: 12px; margin: 8px 0 14px; }
.ag-fal { color: var(--text-muted); font-size: .9rem; }
.ag-hora { display: grid; gap: 2px; }
.ag-hora b { font: 600 2.6rem/1.05 Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; }
.ag-hora span, .ag-hora small { color: var(--text-muted); }
.ag-cols { display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ag-cols h3 { margin: 0 0 4px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-family: Inter, system-ui, sans-serif; }
.ag-cols p { margin: 2px 0; overflow-wrap: anywhere; }
.ag-mud { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--warning-bg); color: var(--warning); font-weight: 600; }
.ag-resp { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.ag-resp .pl { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; font-weight: 600; font-size: .88rem; }
.ag-resp .pl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1.5px solid var(--text-muted); box-sizing: border-box; }
.ag-resp .pl.ok::before { background: var(--success); border-color: var(--success); } .ag-resp .pl.wn::before { background: var(--warning); border-color: var(--warning); } .ag-resp .pl.bd::before { background: var(--danger); border-color: var(--danger); }
.ag-resp .btn { min-height: 48px; }
.ag-nao { display: grid; gap: 8px; max-width: 420px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.ag-nao[hidden], .ag-erro[hidden] { display: none; }
.ag-erro { margin: 0; color: var(--danger); font-weight: 600; }
.cv-ck input { width: 24px; height: 24px; }
/* Drinks: uma linha por drink; a frase de ação do medidor e o alerta de custo aparecem ao passar o mouse ou focar (title) e na ficha */
@media (min-width: 641px) { .mt.cp .ac-m { display: none; } .c-nome .sub-alerta { display: none; } .mt.cp { gap: 4px; } }
.mt[tabindex]:focus-visible { outline: 3px solid var(--focus, #E8833A); outline-offset: 2px; border-radius: 6px; }
.tabela:has(.mt.cp) td { padding-block: 8px; }

/* Relatórios em linguagem simples: resumo com semáforo, sugestões, como calculamos, hub */
.rel-sem { display: grid; gap: 6px; }
.rel-sem-s { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.rel-sem-ok .rel-sem-s { color: var(--success); } .rel-sem-atencao .rel-sem-s { color: var(--warning); } .rel-sem-agir .rel-sem-s { color: var(--danger); }
.rel-sem-t { margin: 0; font-size: 1.15rem; line-height: 1.45; max-width: 70ch; }
.rel-sem-t strong, .rel-a strong, .rel-sug-l strong { font-variant-numeric: tabular-nums; }
.rel-sug { display: grid; gap: 10px; } .rel-sug h2 { margin: 0; }
.rel-sug-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rel-sug-l li { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.rel-sug-l p { margin: 0; } .rel-sug-l small { color: var(--text-muted); }
.rel-como { margin: 12px 0; color: var(--text-muted); } .rel-como summary { cursor: pointer; font-weight: 600; min-height: 32px; } .rel-como p { margin: 6px 0 0; max-width: 70ch; }
.rel-hub { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rel-hub-c { display: grid; gap: 6px; align-content: start; }
.rel-hub-c .rel-q { color: var(--text-muted); font-size: .9rem; } .rel-hub-c .rel-a { font-size: 1rem; line-height: 1.45; }
.rel-hb-n { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }

/* Barras dos relatórios: a barra já está na linha; o medidor ao lado fica só com número e zona */
.rel-hb-v .mt .br2, .rel-hb-v .mt .tp { display: none; }

/* Cardápio em PDF: nome e cor, foto 4:5, ocultar ingrediente */
.cd-cor { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cd-cor input[type=color] { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.foto-prev { display: flex; gap: 14px 18px; align-items: flex-start; flex-wrap: wrap; margin: 6px 0 14px; }
.foto-45 { width: 160px; aspect-ratio: 4 / 5; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; flex: none; }
.foto-45 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vazia { padding: 12px; text-align: center; font-size: .82rem; color: var(--text-muted); }
.foto-prev .sub { margin: 0; max-width: 46ch; align-self: center; }
.cd-ocultar { margin-top: 4px; min-height: 32px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-muted); font: 500 .8rem Inter, system-ui, sans-serif; cursor: pointer; }
.cd-ocultar[aria-pressed="true"] { color: var(--text); border-style: dashed; }
/* Primeiro acesso: escolha do estilo do Início */
.pa-estilo { display: grid; gap: 14px; margin-bottom: 16px; }
.pa-op { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pa-op .estilo-op { cursor: pointer; }
.pa-op .estilo-op input { position: absolute; opacity: 0; }
.pa-op .estilo-op > span { display: grid; gap: 6px; padding: 8px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--bg); }
.pa-op .estilo-op input:checked + span { border-color: var(--text); background: var(--surface-2); }
.pa-op .estilo-op input:focus-visible + span { outline: 3px solid var(--focus, #E8833A); outline-offset: 2px; }
.pa-op img { width: 100%; height: auto; border-radius: 8px; }
/* Estilo G: série de 8 semanas da margem média */
.serie-g { display: grid; gap: 6px; margin-top: 12px; }
.serie { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.serie i { flex: 1; height: var(--p, 4%); min-height: 4px; border-radius: 4px 4px 0 0; background: var(--text-muted); opacity: .55; }
.serie i:last-child { background: var(--text); opacity: 1; }
/* Estilos E e F: preparação do próximo evento (carga e compras) */
.i3-E .prep-e { margin-top: 12px; }
.i3-E .prep-e .ck { display: grid; gap: 8px; margin-top: 8px; }
.i3-E .prep-e .ci { display: flex; gap: 10px; align-items: center; }
/* Menu Ajustes: contêiner com raio e overflow, linhas de ponta a ponta, foco por dentro, altura limitada com rolagem interna */
.mais-painel { padding: 0; gap: 0; overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overscroll-behavior: contain; }
.mais-painel a, .mais-painel button { border-radius: 0; padding: 10px 16px; }
.mais-painel a:focus-visible, .mais-painel button:focus-visible { outline: 3px solid var(--focus, #E8833A); outline-offset: -3px; }
.mais-quem { padding: 12px 16px 10px; }
.mais-painel .separador { margin: 4px 0; }
/* Cartões sem borda dentro de borda; anéis de seleção e foco por dentro do cartão */
.form-perfil .grupo-form, .cardapio-form .grupo-form { border: 0; padding: 0; margin: 0; border-radius: 0; }
.form-perfil .grupo-form legend, .cardapio-form .grupo-form > h2 { padding: 0; margin: 0 0 6px; float: none; font: 700 1.2rem Fraunces, Georgia, serif; }
.form-perfil .grupo-form legend { width: 100%; }
.form-perfil, .cardapio-form { max-width: none; }
.form-perfil .estilo-lista.op { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.estilo-op { overflow: hidden; }
.estilo-op:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); background: var(--surface-2); }
.estilo-op:focus-within { outline: 3px solid var(--focus-ring, #E8833A); outline-offset: -3px; }
.estilo-op small { margin: 0; }
.i3-D .seal { gap: 3px; line-height: 1.25; } .i3-D .seal i { display: block; line-height: 1; }

/* Primeiros passos, bar de exemplo */
.pp { display: grid; gap: 10px; margin-bottom: 16px; }
.pp .cab-card h2 { margin: 0; }
.pp-n { margin: 0; color: var(--text-muted); font-size: .9rem; }
.pp-barra { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pp-barra i { display: block; height: 100%; width: var(--p, 0%); background: var(--text); border-radius: 99px; }
.pp-atual { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.pp-atual small { display: block; color: var(--text-muted); }
.pp-todas summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.pp-lista { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pp-lista .pl { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: .8rem; font-weight: 600; margin-right: 6px; }
.pp-lista .pl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-muted); box-sizing: border-box; }
.pp-lista .pl.ok::before { background: var(--success); border-color: var(--success); } .pp-lista .pl.wn::before { background: var(--warning); border-color: var(--warning); }
.faixa-exemplo { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 40px; padding: 6px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .9rem; }
.dlg-exemplo { max-width: 420px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); padding: 22px; }
.dlg-exemplo::backdrop { background: rgba(0, 0, 0, .55); }
.dlg-exemplo h2 { margin: 0 0 8px; }
.vazio-ou { margin: 0; color: var(--text-muted); }
.vazio-ou .link { background: none; border: 0; padding: 12px 8px; min-height: 44px; color: var(--link, var(--text)); font: 600 1rem Inter, system-ui, sans-serif; text-decoration: underline; cursor: pointer; }
/* Drinks no celular: nome em largura total, medidor e menu embaixo (nada de coluna de 75 px) */
@media (max-width: 640px) { .drinks-lista tr { grid-template-areas: "nome nome" "selo menu"; align-items: end; } .drinks-lista td.c-margem { justify-self: stretch; } .drinks-lista td.c-margem .mt { max-width: none; min-width: 0; width: 100%; } .c-nome .com-copo { display: flex; gap: 12px; align-items: center; } .c-nome .com-copo > span { min-width: 0; } }

/* Capa do cardápio */
.cp { display: grid; gap: 12px; margin-bottom: 16px; }
.cp h2 { margin: 0; }
.cp-corpo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px 20px; align-items: start; }
.cp-prev { aspect-ratio: 3 / 4; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; }
.cp-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-vazio { color: var(--text-muted); font-size: .85rem; padding: 10px; text-align: center; }
.cp-form { display: grid; gap: 10px; min-width: 0; }
.cp-arq { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.cp-arq input { font: inherit; max-width: 100%; }
.cp-msg { margin: 0; min-height: 1.4em; font-weight: 600; }
.cp-msg.erro { color: var(--danger); } .cp-msg.ok { color: var(--success); }
@media (max-width: 560px) { .cp-corpo { grid-template-columns: minmax(0, 1fr); } .cp-prev { max-width: 200px; } }
/* Primeiros passos (página) e selo Exemplo */
.selo-exemplo { display: inline-block; vertical-align: middle; font: 600 .7rem Inter, system-ui, sans-serif; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); letter-spacing: .02em; white-space: nowrap; }
.pp-pag { margin-bottom: 14px; }
.pp-passos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.pp-passo { display: grid; gap: 8px; }
.pp-passo.pp-agora { border-color: var(--text); }
.pp-passo.pp-feita .pp-txt { color: var(--text-muted); }
.pp-ph { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; }
.pp-ph h2 { margin: 0; font-size: 1.15rem; }
.pp-ph .pl { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: .8rem; font-weight: 600; }
.pp-ph .pl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-muted); box-sizing: border-box; }
.pp-ph .pl.ok::before { background: var(--success); border-color: var(--success); } .pp-ph .pl.wn::before { background: var(--warning); border-color: var(--warning); }
.pp-txt { margin: 0; max-width: 62ch; }
.pp-ex { display: grid; gap: 10px; } .pp-ex h2 { margin: 0; } .pp-ex p { margin: 0; max-width: 66ch; }.mais-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #E8833A); margin-left: 6px; }

/* Importar planilha */
.cab-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dlg-imp { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); padding: 0; overflow: hidden; }
.dlg-imp[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.dlg-imp::backdrop { background: rgba(0, 0, 0, .55); }
.imp-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.imp-cab h2 { margin: 0; font-size: 1.2rem; }
.imp-passo { padding: 16px 20px; display: grid; gap: 12px; overflow-y: auto; align-content: start; }
.imp-passo[hidden] { display: none; }
.imp-lista { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.imp-aj { margin: 0; color: var(--text-muted); font-size: .9rem; }
.imp-aj code { font-size: .85em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.imp-arq { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.imp-arq input { font: inherit; max-width: 100%; }
.imp-ex { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.imp-ex legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: 4px; }
.imp-ex label { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.imp-ex input { width: 22px; height: 22px; accent-color: var(--primary); }
.imp-ult { padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; } .imp-ult[hidden] { display: none; } .imp-ult p { margin: 0; flex: 1; min-width: 200px; }
.imp-res { margin: 0; font-weight: 600; }
.imp-aviso { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--warning-bg); color: var(--warning); font-weight: 600; } .imp-aviso[hidden] { display: none; }
.imp-tab { overflow: auto; max-height: 40vh; border: 1px solid var(--border); border-radius: 12px; }
.imp-tab table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.imp-tab th, .imp-tab td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.imp-tab th { position: sticky; top: 0; background: var(--surface-2); }
.imp-erro td:last-child b { color: var(--danger); } .imp-e { color: var(--danger); margin-top: 2px; }
.imp-erro[role=alert] { margin: 0; padding: 10px 20px 16px; color: var(--danger); font-weight: 600; } p.imp-erro[hidden] { display: none; }
/* Ficha em PDF */
.dlg-fp { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); padding: 0; overflow: hidden; }
.dlg-fp[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dlg-fp::backdrop { background: rgba(0, 0, 0, .55); }
.fp-ids { list-style: none; margin: 0; padding: 8px 10px; max-height: 200px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 2px; }
.fp-ids[hidden] { display: none; }
.fp-ids label { display: flex; gap: 10px; align-items: center; min-height: 40px; }
.fp-ids input { width: 20px; height: 20px; accent-color: var(--primary); }

.ficha-impressa{margin:18px 0 0;padding:14px 16px;border:1px solid var(--border);border-radius:14px}.ficha-impressa legend{padding:0 6px;font-weight:600}.ficha-impressa .opc{font-weight:400;opacity:.75}.fp-cat{display:grid;gap:6px;margin:8px 0}.fp-cat select{min-height:44px}
.ft{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
.ft-op{display:grid;gap:14px;min-width:0}
.ft-atalhos{display:flex;gap:8px;flex-wrap:wrap}
.ft-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 12px}
.ft-campos label,.ft .imp-ex label,.ft-lk{display:flex;align-items:center;gap:10px;min-height:44px}
.ft-t{display:grid;gap:6px;font-weight:600}.ft-t .opc{font-weight:400;opacity:.75}.ft-t input,.ft-t select{min-height:44px;font-weight:400}
.ft-cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px 10px}
.ft-cor{display:flex;align-items:center;gap:8px;min-height:44px}
.ft-sw{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);flex:none}.ft-sw-bar{background:conic-gradient(var(--accent,#a91f2b) 0 50%,var(--border) 0)}
.ft-duas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ft-pv{position:sticky;top:76px;min-width:0;display:grid;gap:10px}
.ft-pv-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.ft-pv-cab h2{margin:0}
.ft-frame{width:100%;height:min(78vh,820px);border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.ft-erro{margin:0;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.mais-grupo{margin:8px 12px 2px;font:600 .72rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.mais-painel .mais-grupo:first-of-type{margin-top:4px}
.pl-detalhe>summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.pl-detalhe[open]>summary{margin-bottom:8px}
@media (max-width:640px){.det-main>.acoes-form{flex-direction:column}.det-main>.acoes-form .btn{width:100%;justify-content:center}}
/* painel de resultado fixo no celular: fechado mostra só o essencial (margem, barra e "Ver detalhes"); a frase, os marcos e as mensagens vêm ao abrir */
@media (max-width: 900px) { .painel-resultado:not(.aberto) .frase, .painel-resultado:not(.aberto) .tp, .painel-resultado:not(.aberto) .ac-m, .painel-resultado:not(.aberto) .msg-margem, .painel-resultado:not(.aberto) .res-sobra { display: none; } }
/* primeiro acesso: os 9 estilos ficam recolhidos (o painel do Início não desce) */
.pa-det>summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.pa-det[open] .pa-op { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* estoque: um só cabeçalho com abas, valor total no canto e filtros em menu */
.est-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 12px; }
.abas-estoque { display: flex; gap: 4px; }
.abas-estoque a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; text-decoration: none; color: var(--text-muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.abas-estoque a:hover { color: var(--text); }
.abas-estoque a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent, #a91f2b); }
.est-total { margin: 0 0 8px; display: grid; justify-items: end; line-height: 1.2; }
.est-total span { font-size: .85rem; color: var(--text-muted); }.est-total small { font-size: .75rem; }
.est-total strong { font: 600 1.35rem Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; }
.menu-filtro { margin: 0 0 12px; position: relative; }
.menu-filtro > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); cursor: pointer; font-weight: 600; list-style: none; }
.menu-filtro > summary::-webkit-details-marker { display: none; }
.menu-filtro > summary::after { content: "\25BE"; margin-left: 8px; }
.mf-op { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; max-width: 320px; }
.mf-op a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; text-decoration: none; color: var(--text); }
.mf-op a:hover { background: var(--surface-2); }.mf-op a[aria-current="true"] { font-weight: 700; background: var(--surface-2); }
@media (max-width: 640px) { .est-total { justify-items: start; } }
/* Meu perfil: estilos em grade 3x3, prévia em modal e Salvar fixo */
.estilos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 10px; max-width: 540px; }

.eo { position: relative; display: block; }
.eo .estilo-op { padding: 0; border: 0; background: none; margin: 0; display: block; min-height: 0; }
.eo .estilo-op > span.eo-c { display: grid; gap: 6px; padding: 6px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); text-align: center; }
.eo .estilo-op input { position: absolute; opacity: 0; }
.eo .estilo-op input:checked + span { border-color: var(--accent, #a91f2b); }
.eo .estilo-op input:focus-visible + span { outline: 3px solid var(--focus, #E8833A); outline-offset: 2px; }
.eo .mini-estilo img { width: 100%; height: auto; border-radius: 8px; display: block; }
.eo .estilo-op b { font-size: .85rem; }
.eo-prev { position: absolute; right: 8px; top: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600; opacity: .95; }
.eo-prev::after { content: ""; position: absolute; inset: -4px; }
.estilos-inicio .ajuda { margin: 0; }
.estilo-padrao { padding: 8px 12px; margin: 0; }.estilo-padrao small { display: none; }
.acoes-fixas { position: sticky; bottom: 0; z-index: 6; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--border); margin-top: 14px; }
@media (max-width: 900px) { .acoes-fixas { bottom: 72px; } .estilos-grade { gap: 6px; } .eo .estilo-op b { font-size: .75rem; } }
.dlg-prev { width: min(520px, calc(100vw - 24px)); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); padding: 0; }
.dlg-prev::backdrop { background: rgba(0,0,0,.55); }
.dlg-prev .imp-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }.dlg-prev h2 { margin: 0; font-size: 1.1rem; }
.prev-c { padding: 16px 18px 18px; display: grid; gap: 12px; }.prev-c p { margin: 0; }
.prev-img img { width: 100%; height: auto; border-radius: 10px; display: block; }
/* cardápio no Início e interruptores */
.ci-bloco { margin: 0 0 16px; }
.ci-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ci-item a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--surface); }
.ci-n b, .ci-m b { display: block; font-size: .95rem; }.ci-n small, .ci-m small { display: block; font-size: .8rem; color: var(--text-muted); }
.ci-m { text-align: right; }.ci-m b { font: 600 1rem Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; }
.ci-m.k-baixa small { color: var(--danger); }.ci-m.k-media small { color: var(--warning-strong, var(--warning)); }.ci-m.k-alta small { color: var(--success); }
.ck-linha, .te-sw { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; cursor: pointer; }
.ck-linha input, .te-sw input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.ck-linha small, .te-sw small { display: block; color: var(--text-muted); font-size: .85rem; }
.te-sw { padding: 4px 0; border-top: 1px solid var(--border); }
/* primeiros passos compacto: uma linha fechada (título, N de M, etapa de agora, Esconder); as etapas abrem sob demanda */
.pp-compacto { padding: 8px 14px; }
.pp-compacto .cab-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; }
.pp-compacto .cab-card h2 { margin: 0; font-size: 1rem; }
.pp-compacto .pp-n { margin: 0; color: var(--text-muted); font-size: .9rem; }
.pp-compacto .pp-prox { flex: 1 1 180px; font-size: .9rem; }
.pp-d > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.pp-d[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
/* Cor do sistema (destaque): troca só --primary, --primary-hover e --ptext por data-cor no <html>; semânticas (success/warning/danger), texto e a cor da marca do bar não mudam */
:root[data-cor="cobre"] { --primary: #8A3B12; --primary-hover: #6A2C0B; --ptext: #8A3B12; }
@media (prefers-color-scheme: dark) { :root[data-cor="cobre"]:not([data-theme="light"]) { --primary: #A4491A; --primary-hover: #BC5A28; --ptext: #EBA57A; } }
:root[data-cor="cobre"][data-theme="dark"] { --primary: #A4491A; --primary-hover: #BC5A28; --ptext: #EBA57A; }
:root[data-cor="verde"] { --primary: #1F5A3D; --primary-hover: #164530; --ptext: #1F5A3D; }
@media (prefers-color-scheme: dark) { :root[data-cor="verde"]:not([data-theme="light"]) { --primary: #2E7A53; --primary-hover: #3A9265; --ptext: #86D1A5; } }
:root[data-cor="verde"][data-theme="dark"] { --primary: #2E7A53; --primary-hover: #3A9265; --ptext: #86D1A5; }
:root[data-cor="azul"] { --primary: #23407A; --primary-hover: #1A3260; --ptext: #23407A; }
@media (prefers-color-scheme: dark) { :root[data-cor="azul"]:not([data-theme="light"]) { --primary: #3A5FB0; --primary-hover: #4B72C6; --ptext: #A5BDF0; } }
:root[data-cor="azul"][data-theme="dark"] { --primary: #3A5FB0; --primary-hover: #4B72C6; --ptext: #A5BDF0; }
:root[data-cor="grafite"] { --primary: #3A3A3A; --primary-hover: #222222; --ptext: #3A3A3A; }
@media (prefers-color-scheme: dark) { :root[data-cor="grafite"]:not([data-theme="light"]) { --primary: #5A5A5E; --primary-hover: #707076; --ptext: #C9C9CE; } }
:root[data-cor="grafite"][data-theme="dark"] { --primary: #5A5A5E; --primary-hover: #707076; --ptext: #C9C9CE; }
:root[data-cor="dourado"] { --primary: #8A6D1F; --primary-hover: #6A5316; --ptext: #7A5F18; }
@media (prefers-color-scheme: dark) { :root[data-cor="dourado"]:not([data-theme="light"]) { --primary: #8A6D1F; --primary-hover: #A0802A; --ptext: #E8C46A; } }
:root[data-cor="dourado"][data-theme="dark"] { --primary: #8A6D1F; --primary-hover: #A0802A; --ptext: #E8C46A; }
.cor-sis { display: grid; gap: 8px; }
.cor-sis-l { display: flex; gap: 10px; flex-wrap: wrap; }
.cor-op { display: grid; justify-items: center; gap: 4px; width: 76px; min-height: 76px; padding: 4px; border: 2px solid transparent; border-radius: 14px; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: .78rem; }
.cor-op:hover { border-color: var(--border); }
.cor-op[aria-pressed="true"] { border-color: var(--text); }
.cor-bola { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.cor-sis-pe { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* listas: grupos recolhíveis, cabeçalho de tabela fixo no desktop e filtros em 1 linha */
.gr-btn { appearance: none; border: 0; background: none; color: inherit; font: inherit; text-align: left; display: flex; width: 100%; align-items: center; gap: 8px; min-height: 44px; padding: 0; cursor: pointer; }
.gr-btn::before { content: "\25B8"; display: inline-block; transition: transform .15s; flex: none; }
.gr-btn[aria-expanded="true"]::before { transform: rotate(90deg); }
.gr-btn:focus-visible { outline: 3px solid var(--focus-ring, #E8833A); outline-offset: 2px; }
tr.grupo-dia th { padding-block: 0; }
.gr-fechado { display: none !important; }
@media (min-width: 1341px) {
  .tabela:not(.responsiva-so-cartao) { overflow: visible; }
  .tabela thead th { position: sticky; top: 60px; z-index: 3; background: var(--surface); box-shadow: 0 1px 0 var(--border); }
}
/* notebook estreito: tabela mais justa e a coluna de ações sempre à vista (Editar/Excluir não saem da tela) */
@media (min-width: 901px) and (max-width: 1340px) {
  .tabela:not(.responsiva-so-cartao) th, .tabela:not(.responsiva-so-cartao) td { padding: 10px 8px; }
  .tabela:not(.responsiva-so-cartao) tbody td:last-child, .tabela:not(.responsiva-so-cartao) thead th:last-child { position: sticky; right: 0; background: var(--surface); z-index: 1; }
}
.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips .chip, .chips > a { flex: none; }
/* hub "Como está o seu bar": veredito grande, número principal, resposta curta e UMA ação */
.rel-hub-c { display: flex; flex-direction: column; gap: 8px; }
.rel-hub-c > strong { order: 1; font: 600 .9rem Inter, system-ui, sans-serif; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.rel-hub-c .rel-sem-s { order: 2; font: 700 1.5rem Fraunces, Georgia, serif; text-transform: none; letter-spacing: -.01em; }
.rel-hub-c .rel-num { order: 3; font: 600 2.2rem/1.05 Fraunces, Georgia, serif; font-variant-numeric: tabular-nums; color: var(--text); }
.rel-hub-c .rel-a { order: 4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-muted); font-size: .92rem; }
.rel-hub-c .rel-ver { order: 5; margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--primary); color: var(--on-primary) !important; font-size: .9rem !important; }
.rel-hub-c .rel-q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rel-hub-c { position: relative; }
.cor-marca-paleta { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.cor-mo { width: 44px; height: 44px; padding: 4px; border: 2px solid var(--border); border-radius: 50%; background: none; cursor: pointer; }
.cor-mo span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.cor-mo:hover, .cor-mo:focus-visible { border-color: var(--text); }
/* lista de Drinks: barra simples, sem traços nem zonas (os traços ficam só na ficha) */
.drinks-lista .mt .tk,.drinks-lista .mt .z{display:none}
.drinks-lista .mt .br2{background:var(--surface-2)}
/* trocar estilo do Início */
.te-barra{display:flex;justify-content:flex-end;margin:0 0 10px}
.dlg-te{width:min(660px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);padding:0}
.dlg-te::backdrop{background:rgba(0,0,0,.55)}
.dlg-te .imp-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}.dlg-te h2{margin:0;font-size:1.15rem}
.te-c{padding:14px 18px 16px;display:grid;gap:12px}
.te-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.te-op{display:grid;gap:6px;padding:6px 6px 8px;border:2px solid transparent;border-radius:12px;background:transparent;color:var(--text);cursor:pointer;font:inherit;text-align:center}
.te-op:hover{border-color:var(--border)}.te-op[aria-pressed="true"]{border-color:var(--accent,#a91f2b)}
.te-op .mini-estilo img{width:100%;height:auto;border-radius:8px;display:block}.te-op b{font-size:.85rem;font-weight:600}
.te-pe{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media (max-width:640px){.te-c{padding:12px}.te-op b{font-size:.78rem}.te-grade{gap:6px}}
/* margem: Pouco ▼ / No ponto ● / Ótimo ▲, frase "De cada R$ 100..." e marcos 50% / 65% embaixo da barra */
.mt .zn::before{content:none!important;display:none}
.mt .zg{font-size:.8em;line-height:1}
.mt.k1 .zg,.lb-m.k1{color:var(--danger)}.mt.k2 .zg,.lb-m.k2{color:var(--warning-strong,var(--warning))}.mt.k3 .zg,.lb-m.k3{color:var(--success)}
.mt .frase{font-size:.88rem;color:var(--text);line-height:1.35}.mt .frase b{font-variant-numeric:tabular-nums}
.mt.gr .tp{margin-top:-2px}
.ajuda-q{display:inline-grid;place-items:center;width:28px;height:28px;min-width:28px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);font:600 .85rem/1 var(--font-sans,inherit);cursor:pointer;vertical-align:middle;padding:0;margin-left:6px;position:relative}
.ajuda-q::after{content:"";position:absolute;inset:-9px}
.ajuda-q:hover{border-color:var(--text)}
.dlg-ajuda{width:min(460px,calc(100vw - 24px));border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);padding:0}
.dlg-ajuda::backdrop{background:rgba(0,0,0,.55)}
.dlg-ajuda .imp-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}.dlg-ajuda h2{margin:0;font-size:1.15rem}
.ajm-c{padding:16px 18px 20px;display:grid;gap:14px}.ajm-c p{margin:0}
.ajm-z{list-style:none;margin:0;padding:0;display:grid;gap:10px}.ajm-z li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:baseline}
.lb-m{font-weight:600;white-space:nowrap}
@media (max-width:640px){.dlg-ajuda{margin:auto 0 0;width:100%;max-width:none;border-radius:18px 18px 0 0;border-bottom:0;max-height:85vh}.ajm-z li{grid-template-columns:1fr;gap:2px}}
.det-fechado .col-det{display:none}.rel-mais{margin:0 0 8px}
.rel-gloss{margin:16px 0;padding:0 16px}.rel-gloss>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.rel-gloss dl{margin:0 0 14px;display:grid;gap:10px}.rel-gloss dt{font-weight:600}.rel-gloss dd{margin:2px 0 0;opacity:.85}
.fr-resumo{margin:0 0 14px}.fr-resumo p{margin:0 0 8px}
.fr-barra{height:10px;border-radius:99px;background:var(--border);overflow:hidden}.fr-barra i{display:block;height:100%;background:var(--accent,#a91f2b);border-radius:99px}
.fr-filtro{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.fr-filtro button{min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.fr-filtro button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.fr-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.fr-item{display:grid;gap:8px;align-content:start;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.fr-item[hidden]{display:none}
.fr-topo{display:flex;justify-content:space-between;align-items:center;gap:10px}.fr-nome{font:600 1.1rem var(--font-display,inherit);text-decoration:none;color:var(--text)}
.fr-meta,.fr-num{margin:0;opacity:.8}.fr-falta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fr-falta li{padding:4px 10px;border:1px dashed var(--border);border-radius:99px;font-size:.9rem}
.fr-acoes{display:flex;gap:8px;flex-wrap:wrap}.fr-vazio{opacity:.8}
.ft-dados{border:1px solid var(--border);border-radius:14px;padding:0 14px}.ft-dados>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;flex-wrap:wrap;gap:6px}
.ft-dados[open]>summary{border-bottom:1px solid var(--border);margin-bottom:12px}.ft-dados-c{display:grid;gap:12px;padding-bottom:14px}.ft-t textarea{font-weight:400;width:100%}
.ft-irpv{display:none}
@media (max-width:900px){.ft-irpv{display:inline-flex}.ft{grid-template-columns:minmax(0,1fr)}.ft-pv{position:static}.ft-frame{height:70vh}}
.pa-dados{margin:10px 0 0}.pa-t{font-size:.95rem;margin:16px 0 6px}
.pa-uso{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px}.pa-uso li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.pa-nome{font-weight:600}.pa-val{color:var(--text-muted,inherit);opacity:.85;text-align:right}
.pa-barra{grid-column:1/-1;height:8px;border-radius:99px;background:var(--border);overflow:hidden;display:block}.pa-barra i{display:block;height:100%;background:var(--accent,#c0272d);border-radius:99px}
.pa-barra.quase i{background:var(--warning-strong,#b7791f)}.pa-barra.cheio i{background:var(--danger,#c0272d)}
.pa-aviso{grid-column:1/-1;font-size:.9rem}


/* Tela do drink (24/10): campos em 2 colunas com painel sticky, foto com botão, ícone em abas sem rolagem interna, camadas de custo com 4 cores da marca */
.form-ficha .campos-base { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-ficha .campos-base .campo:first-child { grid-column: 1 / -1; }
.foto-set { border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px 18px; align-items: start; min-width: 0; margin: 0; }
.foto-set legend { font-weight: 700; padding: 0 6px; }
.foto-set .foto-prev { margin: 0; display: block; }
.foto-set .foto-45 { width: 132px; }
.foto-set .foto-vazia { padding: 8px; text-align: center; font-size: .78rem; color: var(--text-muted); }
.foto-ctl { display: grid; gap: 10px; min-width: 0; }
.foto-ctl .campo { margin: 0; }
.foto-ctl .sub { margin: 0; }
@media (max-width: 520px) { .foto-set { grid-template-columns: 1fr; } .form-ficha .campos-base { grid-template-columns: 1fr; } }
.si-previa .ico { flex: none; }
.si-abas { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; }
.si-abas button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: transparent; color: var(--text); font: 600 .9rem Inter, system-ui, sans-serif; cursor: pointer; }
.si-abas button[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.si-abas button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.si-grade { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; }
.si-grade button { padding: 4px 2px; gap: 2px; font-size: .7rem; line-height: 1.15; min-height: 44px; }
.si-grade .ico { width: 30px; height: 30px; }
:root { --camada-1: #8E1B28; --camada-2: #C2571A; --camada-3: #A67C00; --camada-4: #4B4A50; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --camada-1: #D8606B; --camada-2: #E8833A; --camada-3: #E3BC4B; --camada-4: #A8A2A6; } }
:root[data-theme="dark"] { --camada-1: #D8606B; --camada-2: #E8833A; --camada-3: #E3BC4B; --camada-4: #A8A2A6; }
.cor-1 { background: var(--camada-1); } .cor-2 { background: var(--camada-2); } .cor-3 { background: var(--camada-3); } .cor-4 { background: var(--camada-4); }
.camadas { height: 22px; gap: 3px; }
.legenda li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.legenda li:last-child { border-bottom: 0; }
.legenda .lg-n { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); }
.legenda .lg-n s { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.legenda .lg-v { display: inline-flex; align-items: baseline; gap: 8px; justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.legenda .lg-p { font-weight: 700; color: var(--text); }
.legenda .lg-d { color: var(--text-muted); font-size: .85rem; min-width: 5.5ch; }
.mais-pesado { margin: 0; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--camada-1); background: var(--surface-2); color: var(--text); font-size: .92rem; }
.mais-pesado strong { font-weight: 700; }

/* Aparência por pessoa (24/10): folha completa e as opções que o <html> recebe (data-texto, data-densidade, data-cantos) */
.ap-intro { margin: 0; }
.ap-sec { display: grid; gap: 8px; }
.ap-sec .te-h3 { margin: 0; }
.ap-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-op { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: transparent; color: var(--text); font: 600 .9rem Inter, system-ui, sans-serif; cursor: pointer; }
.ap-op:hover { background: var(--surface-2); }
.ap-op[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.ap-op:focus-visible, .cor-op:focus-visible, .te-op:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ap-rodape { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.ap-rodape .sub { min-height: 1.2em; }
.ap-btn { width: 44px; height: 44px; }
html[data-texto="grande"] { font-size: 112.5%; }
html[data-texto="grande"] body { font-size: 18px; }
html[data-densidade="compacta"] main { padding-top: 14px; }
html[data-densidade="compacta"] th, html[data-densidade="compacta"] td, html[data-densidade="compacta"] .tabela th, html[data-densidade="compacta"] .tabela td { padding-block: 7px; }
html[data-densidade="compacta"] .card, html[data-densidade="compacta"] .kpi, html[data-densidade="compacta"] .form { padding: 14px; }
html[data-densidade="compacta"] .form .campos { gap: 8px 12px; margin-bottom: 12px; }
html[data-densidade="compacta"] .campo { gap: 4px; }
html[data-densidade="compacta"] .painel-resultado { padding: 12px 14px; gap: 6px; }
html[data-cantos="retos"] :is(.card, .kpi, .form, input, select, textarea, .painel-resultado, dialog, .btn, .chip, .te-op, .ap-op, .si-abas button, .si-grade button, .cor-op, .seletor-icone, .foto-set, .foto-45, .alerta-margem, .dica, .ficha-impressa, .mini-estilo, .mini-estilo img, .selo, .erros-form, .mais-painel, .eo) { border-radius: 4px; }
html[data-cantos="retos"] .topo nav a { border-radius: 4px; }
html[data-cantos="retos"] .camadas { border-radius: 2px; }