/* Sistema Maeva: identidade do protótipo "Gestão à vista" (prototipo/painel/modelo.html).
   A marca fica na estrutura (filete verde no topo, logo, os dois pontos da navegação).
   A cor aparece em dois papéis só: identidade de canal (iFood, Balcão, Meep) e exceção
   (atenção, crítico). O que é estimado aparece tracejado. */
:root {
  --bg: #F3F6F4;
  --surface: #FFFFFF;
  --surface-2: #EEF3F0;
  --surface-3: #E4ECE7;
  --ink: #1B2A23;
  --ink-2: #4D5D55;
  --ink-3: #5A6962;
  --line: #DCE5E0;
  --line-strong: #BFCCC5;
  --rule: #1B2A23;
  --brand: #365543;
  --brand-hover: #2A4436;
  --brand-ink: #FFFFFF;
  --brand-soft: #E2EDE6;
  --sage: #6E9F88;
  --sage-ink: #3E6B55;
  --focus: #365543;
  /* canais, sempre na ordem iFood, Balcão, Meep; a vitrine Pro é um tom do iFood */
  --ifood: #D63B30;
  --ifood-pro: #8A2119;
  --balcao: #2D5E97;
  --meep: #9F86DB;
  /* estados: nenhum é verde */
  --ok: #40596A;
  --ok-soft: #E7EEF3;
  --warn: #8A5300;
  --warn-soft: #FBEFD8;
  --warn-line: #E8C88E;
  --crit: #951D52;
  --crit-soft: #FBE8EF;
  --crit-line: #EDB7CB;
  --grid: #E6ECE8;
  --weekend: #C9D6CF;
  --shadow-header: 0 1px 0 rgba(27,42,35,.06), 0 8px 20px -10px rgba(27,42,35,.22);
  --edge: rgba(27,42,35,.14);
  --ent-veu: linear-gradient(180deg, rgba(20, 34, 27, 0) 30%, rgba(20, 34, 27, .72) 100%);
  --ent-texto: #FFFFFF;
  --ent-sombra: rgba(27, 42, 35, .14);
  --logo-claro: block;
  --logo-escuro: none;
  color-scheme: light;

  --f-display: "Red Hat Display", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --f-text: "Red Hat Text", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --f-barlow: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px;
  --gutter: 16px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-1: 140ms;
  --dur-2: 240ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121A16; --surface: #18221D; --surface-2: #1E2924; --surface-3: #26332D;
    --ink: #E5EEE9; --ink-2: #A7B7AF; --ink-3: #90A098;
    --line: #2A3832; --line-strong: #3A4A43; --rule: #E5EEE9;
    --brand: #8FC2A9; --brand-hover: #A6D1BC; --brand-ink: #10201A; --brand-soft: #1E3529;
    --sage: #8FC2A9; --sage-ink: #8FC2A9; --focus: #8FC2A9;
    --ifood: #E5574A; --ifood-pro: #F4A39A; --balcao: #5B98CF; --meep: #8058C9;
    --ok: #A9BCCB; --ok-soft: #1F2A31;
    --warn: #EBB660; --warn-soft: #33281A; --warn-line: #6B5228;
    --crit: #F2A0C8; --crit-soft: #3B1D2A; --crit-line: #6E3550;
    --grid: #26322C; --weekend: #3A4A43;
    --shadow-header: 0 1px 0 rgba(0,0,0,.35), 0 8px 20px -8px rgba(0,0,0,.6);
    --edge: rgba(0,0,0,.5);
    --logo-claro: none; --logo-escuro: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121A16; --surface: #18221D; --surface-2: #1E2924; --surface-3: #26332D;
  --ink: #E5EEE9; --ink-2: #A7B7AF; --ink-3: #90A098;
  --line: #2A3832; --line-strong: #3A4A43; --rule: #E5EEE9;
  --brand: #8FC2A9; --brand-hover: #A6D1BC; --brand-ink: #10201A; --brand-soft: #1E3529;
  --sage: #8FC2A9; --sage-ink: #8FC2A9; --focus: #8FC2A9;
  --ifood: #E5574A; --ifood-pro: #F4A39A; --balcao: #5B98CF; --meep: #8058C9;
  --ok: #A9BCCB; --ok-soft: #1F2A31;
  --warn: #EBB660; --warn-soft: #33281A; --warn-line: #6B5228;
  --crit: #F2A0C8; --crit-soft: #3B1D2A; --crit-line: #6E3550;
  --grid: #26322C; --weekend: #3A4A43;
  --shadow-header: 0 1px 0 rgba(0,0,0,.35), 0 8px 20px -8px rgba(0,0,0,.6);
  --edge: rgba(0,0,0,.5);
  --logo-claro: none; --logo-escuro: block;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-text); font-size: 15px; line-height: 23px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, select, input, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.n, td, .k-val, .c-p { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; }
.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.logo-c { display: var(--logo-claro); }
.logo-e { display: var(--logo-escuro); }
.neg { color: var(--crit); }
.vazio { color: var(--ink-3); }
.fraco { color: var(--ink-2); }
.noscript { padding: 24px; }
/* Só num tamanho de tela. Abaixo de 720 px é o celular (o app.js usa o mesmo corte). Estas duas só
   escondem: quem aparece fica com o display de sempre (as -i do cabeçalho viram inline-flex). */
@media (max-width: 719.98px) { .so-largo { display: none !important; } }
@media (min-width: 720px) { .so-estreito { display: none !important; } }

/* ---------- carregando e aviso flutuante ---------- */
.carregando-tela { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--bg); color: var(--ink-2); font-size: 13px; z-index: 50; }
.carregando-tela img { width: 48px; height: auto; }
.carregando { display: flex; align-items: center; gap: 12px; padding: 40px 0; font-size: 13.5px; color: var(--ink-2); }
.carregando::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; animation: gira 800ms linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.aviso-flutuante { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 200; transform: translateX(-50%); max-width: min(92vw, 520px); padding: 12px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-size: 14px; line-height: 20px; box-shadow: 0 12px 28px -8px rgba(27,42,35,.4); }
.aviso-flutuante.erro { background: var(--crit); color: #fff; }

/* ---------- faixa da cópia de homologação do iFood (só com IFOOD_HOMOLOGACAO ligado) ---------- */
/* Por cima de tudo, inclusive da tela de entrada (só o aviso flutuante passa na frente). O app.js mede
   a altura (no celular o texto quebra) e guarda em --faixa-h, que empurra o resto da tela para baixo. */
.faixa-teste { position: fixed; top: 0; left: 0; right: 0; z-index: 150; padding: max(6px, env(safe-area-inset-top, 0px)) var(--gutter) 6px; background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--warn-line); font: 600 12.5px/18px var(--f-text); text-align: center; text-wrap: balance; }
html.com-faixa body { padding-top: var(--faixa-h, 31px); }
html.com-faixa .top { top: var(--faixa-h, 31px); }
html.com-faixa .entrada, html.com-faixa .carregando-tela { top: var(--faixa-h, 31px); }
/* depois de entrar: o app de teste do iFood (client_id) e a data e a hora de agora, que o vídeo da
   homologação pede visíveis. Um bloco só: quando não cabe ao lado do aviso, desce inteiro. */
.faixa-app { display: inline-block; margin-left: .5em; }
.faixa-id { font-family: var(--f-mono); letter-spacing: .01em; }
.faixa-hora { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* No celular o client_id do app de teste quebrava no hífen ("...-9b6c-" numa linha e o resto na outra):
   o vídeo da homologação precisa dele inteiro, legível. 36 letras mono de 12,5 px cabem em 343 px. */
@media (max-width: 719.98px) {
  .faixa-id { white-space: nowrap; }
  .id-teste { display: block; white-space: nowrap; }
}

/* ---------- cabeçalho ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-top: 3px solid var(--brand); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-header); }
.l1 { display: flex; align-items: center; gap: 10px; height: 52px; }
.logo { flex: none; display: block; padding-block: 4px; }
.logo img { height: 28px; width: auto; }
.vfilete, .produto { display: none; }
.flex { flex: 1 1 auto; min-width: 0; }
.produto-nome { font: 600 15px/20px var(--f-display); color: var(--ink); white-space: nowrap; }
.produto-sub { font-size: 12.5px; line-height: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tema { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; }
.tema:hover { color: var(--ink); background: var(--surface-2); }
.tema svg { width: 16px; height: 16px; }
.sair-topo { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; margin: 0; padding: 0 12px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 600 13px/1 var(--f-text); white-space: nowrap; cursor: pointer; text-decoration: none; }
.sair-topo:hover { border-color: var(--brand); color: var(--brand); }
.so-largo-i { display: none; }
.l2 { position: relative; }
.tabs { position: relative; display: flex; gap: 2px; height: 44px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: calc(var(--gutter) - 14px) 0; }
.tabs::-webkit-scrollbar { display: none; }
.tabs::after { content: ""; flex: none; width: 28px; }
.tabs a { position: relative; flex: none; display: inline-flex; align-items: center; height: 100%; padding: 0 14px; color: var(--ink-2); font: 500 14.5px/20px var(--f-text); white-space: nowrap; text-decoration: none; }
.tabs a:hover { color: var(--ink); }
.tabs a:focus-visible { outline-offset: -5px; border-radius: var(--r-sm); }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: calc(50% - 6.5px); bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); box-shadow: 8px 0 0 var(--sage); }
@media (min-width: 720px) {
  .l1 { height: 60px; gap: 16px; }
  .logo img { height: 32px; }
  .vfilete { display: block; width: 1px; height: 24px; flex: none; background: var(--line-strong); }
  .produto { display: grid; min-width: 0; }
  .so-largo-i { display: inline-flex; }
  .so-estreito-i { display: none; }
  .tabs { height: 46px; }
}
/* No celular o logo, o tema e o Sair têm 36 px de altura, e o toque recomendado é 44 x 44. A aparência
   fica a mesma: a área de toque cresce 4 px por fora em todos os lados, numa camada transparente (o tema
   vira 44 x 44). Cabe na linha de 52 px sem mudar o topo, que tem 100 px e entra no scroll-margin dos
   blocos. Dos 10 px entre o tema e o Sair sobram 2 px sem dono: as duas áreas não se encostam, e um toque
   no meio nunca cai no botão errado. O inset conta de dentro da borda (1 px no tema e no Sair). O
   "relative" só aqui (ver "Crie a sua senha"). */
@media (max-width: 719.98px) {
  .logo, .tema, .sair-topo { position: relative; }
  .logo::after, .tema::after, .sair-topo::after { content: ""; position: absolute; inset: -4px; }
  .tema::after, .sair-topo::after { inset: -5px; }
}

/* ---------- conteúdo ---------- */
main { padding-block: 16px 40px; outline: none; }
.tela { display: grid; gap: 16px; }
.tela > * { min-width: 0; }
.grid-2 { display: grid; gap: 16px; }
.grid-2 > * { min-width: 0; }
@media (min-width: 720px) { .tela, .grid-2 { gap: 24px; } main { padding-top: 20px; } }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2.g-larga { grid-template-columns: 2fr 1fr; } }

.abertura { display: grid; gap: 8px; padding-top: 4px; }
.sobre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 600 11.5px/16px var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.frase { max-width: 40ch; font: 500 21px/29px var(--f-serif); letter-spacing: -.005em; color: var(--brand); text-wrap: pretty; }
.frase .n { font-family: var(--f-display); font-size: .94em; font-weight: 600; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
@media (min-width: 720px) { .frase { font-size: 24px; line-height: 31px; } }

/* régua de indicadores */
.regua { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rot val" "det val"; align-items: center; column-gap: 12px; min-height: 56px; padding: 12px 16px; background: var(--surface); }
.k-rot { grid-area: rot; display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.k-val { grid-area: val; font: 600 22px/28px var(--f-display); letter-spacing: -.015em; color: var(--ink); white-space: nowrap; text-align: right; }
.k-det { grid-area: det; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.kpi.heroi { grid-template-columns: 1fr; grid-template-areas: "rot" "val" "det"; padding: 16px; }
.kpi.heroi .k-val { margin: 4px 0 2px; font-size: 34px; line-height: 40px; letter-spacing: -.025em; text-align: left; }
@media (min-width: 720px) {
  .regua { grid-template-columns: 1fr 1fr; }
  .kpi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rot" "val" "det"; align-content: start; align-items: start; padding: 18px 20px; }
  .k-val { margin-top: 6px; font-size: 26px; line-height: 32px; text-align: left; }
  .k-det { margin-top: 4px; }
  .kpi.heroi .k-val { font-size: 42px; line-height: 48px; }
  .regua > .heroi { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .regua.r4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .regua.r4 > .heroi { grid-column: auto; }
}
/* Repasses: o depósito e mais dois números */
@media (min-width: 1024px) {
  .regua.r3 { grid-template-columns: 1.4fr 1fr 1fr; }
  .regua.r3 > .heroi { grid-column: auto; }
}

/* painéis */
.painel { min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.p-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.p-head > div:first-child { min-width: 0; }
.p-head h2, .painel > h2 { font: 600 17px/24px var(--f-display); letter-spacing: -.005em; color: var(--ink); }
.painel > h2 { margin-bottom: 12px; }
.lead { max-width: 70ch; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.nota { max-width: 75ch; margin-top: 12px; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.sub-h { margin: 20px 0 8px; font: 600 14px/20px var(--f-text); color: var(--ink); }
@media (min-width: 720px) {
  .painel { padding: 20px; }
  .p-head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
}
/* selo de estado no título do bloco (Integrações): no celular esticava até a largura toda e parecia um
   campo vazio. No computador o .p-head já alinha no começo, então nada muda lá. */
.p-head > .st { align-self: flex-start; }
@media (max-width: 719.98px) {
  .p-head > .st { white-space: normal; }
  /* o topo grudado (100 px no celular) tapava o título do bloco ao rolar até ele (Corrigir despesa) */
  .painel { scroll-margin-top: 112px; }
  html.com-faixa .painel { scroll-margin-top: calc(112px + var(--faixa-h, 31px)); }
}

/* chips: atalhos e filtros */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 500 13px/1 var(--f-text); white-space: nowrap; cursor: pointer; }
.chips button:hover { background: var(--surface-2); border-color: var(--line-strong); }
.chips button[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
@media (min-width: 720px) { .chips button { height: 32px; padding: 0 12px; } }

/* filtros do período */
.filtros { display: grid; gap: 12px; }
.filtros .linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filtros .campo { min-width: 140px; flex: 1 1 140px; }
@media (min-width: 720px) { .filtros .campo { flex: 0 1 180px; } }
/* DRE e Despesas (‹ Mês › Ver). Numa linha só, o campo ficava com uns 150 px no celular e o ano sumia
   ("novembro de 2" no Chrome; o último algarismo cortado no Safari). No celular o campo Mês vai na
   largura toda e ‹ › Ver descem juntos para a linha de baixo: setas de 48 px e o Ver no resto. */
@media (max-width: 719.98px) {
  .filtros .linha.competencia { display: grid; grid-template-columns: 48px 48px minmax(0, 1fr); grid-template-areas: "mes mes mes" "ant prox ver"; gap: 12px 8px; align-items: end; }
  .linha.competencia > .campo { grid-area: mes; }
  .linha.competencia > .mes-ant { grid-area: ant; }
  .linha.competencia > .mes-prox { grid-area: prox; }
  .linha.competencia > .mes-ver { grid-area: ver; }
  .linha.competencia > .mes-ant, .linha.competencia > .mes-prox { padding: 0; font-size: 20px; }
}

/* selos de estado */
.st { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 8px; border-radius: var(--r-xs); font: 600 12px/16px var(--f-text); white-space: nowrap; }
.st.ok { background: var(--ok-soft); color: var(--ok); }
.st.atencao { background: var(--warn-soft); color: var(--warn); }
.st.crit { background: var(--crit-soft); color: var(--crit); }
.st.info { background: var(--brand-soft); color: var(--brand); }
.st.neutro { color: var(--ink-2); border: 1px solid var(--line-strong); }

/* origem do número: o estimado é tracejado */
.dado { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--r-xs); color: var(--ink-2); font: 600 11px/1 var(--f-text); white-space: nowrap; vertical-align: 1px; margin-left: 6px; }
.dado.est { border-color: var(--ink-3); border-style: dashed; }
.dado.conf { border-color: var(--warn-line); border-style: dashed; background: var(--warn-soft); color: var(--warn); }
td.est { text-decoration: underline dashed var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 719.98px) { .dado { height: 20px; font-size: 12px; } }

/* canais */
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot.ifood { background: var(--ifood); }
.dot.vitrine { background: var(--ifood-pro); }
.dot.balcao { background: var(--balcao); }
.dot.meep { background: var(--meep); }
.mix { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 5px; background: var(--surface-2); }
.mix span { display: block; min-width: 2px; }
.mix .ifood { background: var(--ifood); }
.mix .vitrine { background: var(--ifood-pro); }
.mix .balcao { background: var(--balcao); }
.mix .meep { background: var(--meep); }
.mix .medida { background: var(--sage); }
.mix .saida { background: var(--ink-3); }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.sw-fds { display: inline-block; width: 12px; height: 4px; border-radius: 1px; background: var(--weekend); }

/* gráfico por dia */
.grafico { position: relative; margin-top: 12px; }
.grafico svg { display: block; width: 100%; height: auto; }
.grafico text { fill: var(--ink-3); font: 500 11px var(--f-text); font-variant-numeric: tabular-nums; }
.grafico .grade line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .fds { fill: var(--weekend); }
.grafico .b-ifood { fill: var(--ifood); }
.grafico .b-balcao { fill: var(--balcao); }
.grafico .b-meep { fill: var(--meep); }
.grafico .hit { fill: var(--ink); fill-opacity: 0; cursor: pointer; outline: none; }
.grafico .hit:hover { fill-opacity: .05; }
.grafico .hit.sel { fill-opacity: .1; }
.grafico .hit:focus-visible { stroke: var(--focus); stroke-width: 2px; }
/* no celular o app.js desenha o gráfico em 330 de largura; o dedo desliza de lado sobre ele para
   escolher o dia, e a página continua rolando na vertical (e com dois dedos, ampliando) */
@media (max-width: 719.98px) {
  .grafico svg { touch-action: pan-y pinch-zoom; }
  .grafico text { font-size: 12px; }
  /* no celular o :hover fica preso no último dia tocado: depois de deslizar o dedo, dois dias pareciam
     escolhidos. Lá só o dia escolhido fica marcado. */
  .grafico .hit:hover:not(.sel) { fill-opacity: 0; }
}
.dia-det { min-height: 40px; margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-md); font-size: 13.5px; line-height: 20px; }
.dd-c { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.dd-c > span { display: inline-flex; align-items: center; gap: 6px; }
details.ver-tabela { margin-top: 8px; }
details.ver-tabela summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--brand); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* tabelas */
.tabela { position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.painel .tabela { border: 0; border-radius: 0; margin-inline: -16px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 20px; }
th, td { padding: 10px 12px; text-align: right; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--line); }
th { vertical-align: bottom; border-bottom-color: var(--line-strong); color: var(--ink-2); font: 600 12.5px/16px var(--f-text); }
th:first-child, td:first-child { padding-left: 16px; text-align: left; }
th:last-child, td:last-child { padding-right: 16px; }
th.esq, td.esq { text-align: left; }
td.txt { min-width: 12rem; text-align: left; white-space: normal; }
tbody tr:last-child td { border-bottom: 0; }
tr.total-l td { color: var(--ink); font-weight: 600; border-top: 1px solid var(--rule); }
tr.inativo td { color: var(--ink-3); }
.fixa th:first-child, .fixa td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.l-n { display: block; font-weight: 600; color: var(--ink); }
.l-m { display: block; font-size: 12.5px; line-height: 18px; color: var(--ink-2); white-space: normal; }
@media (min-width: 720px) {
  table { font-size: 14px; }
  .painel .tabela { margin-inline: -20px; }
  th:first-child, td:first-child { padding-left: 20px; }
  th:last-child, td:last-child { padding-right: 20px; }
}
/* "total-fixo" (Ver em tabela, no Painel): no celular a última coluna (Total) também fica parada */
@media (max-width: 719.98px) {
  .total-fixo th:last-child, .total-fixo td:last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -1px 0 0 var(--line); }
}

/* DRE como livro-caixa */
.dre th:first-child, .dre td:first-child { min-width: 168px; max-width: 168px; white-space: normal; }
.dre td { min-width: 96px; }
.dre th:nth-child(2), .dre td:nth-child(2) { background: var(--surface-2); }
.dre th:nth-child(2) { color: var(--ink); font-weight: 700; }
.dre tr.sub td { color: var(--ink-2); font-size: 13px; }
.dre tr.sub td:first-child { padding-left: 32px; }
.dre tr.grupo td { color: var(--ink); font-weight: 600; }
.dre tr.total td { color: var(--ink); font-weight: 600; border-top: 1px solid var(--rule); }
.dre tr.resultado td { font-weight: 700; border-bottom: 3px double var(--rule); }
@media (min-width: 720px) {
  .dre th:first-child, .dre td:first-child { min-width: 260px; max-width: 260px; }
  .dre tr.sub td:first-child { padding-left: 36px; }
}
/* no celular, uma coluna de valores por vez: o app.js marca as outras com "fora" (campo Loja) */
.dre-escolha { margin-bottom: 12px; }
@media (max-width: 719.98px) {
  .dre .fora { display: none; }
  .dre th:first-child, .dre td:first-child { max-width: none; }
}

/* Tabelas que viram cartão no celular (classe "pilha" no tabela() do app.js): cada linha vira um
   bloco, sem rolar de lado. O cabeçalho continua lá para o leitor de tela. Com "rotulos", cada valor
   leva o nome da coluna na frente ("CNPJ: …") e o "—" some. No computador nada disso vale. */
@media (max-width: 719.98px) {
  .tabela.pilha { overflow-x: visible; }
  .tabela.pilha table, .tabela.pilha tbody { display: block; }
  .tabela.pilha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela.pilha tr { display: grid; gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .tabela.pilha tbody tr:last-child { border-bottom: 0; }
  .tabela.pilha td, .tabela.pilha td:first-child, .tabela.pilha td:last-child { display: block; position: static; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  .tabela.pilha .l-n { overflow-wrap: anywhere; }
  .tabela.pilha .acoes-l { justify-content: flex-start; gap: 8px; }
  .tabela.pilha .btn.peq { height: 40px; padding: 0 16px; }
  .tabela.pilha tr.total-l { border-top: 1px solid var(--rule); }
  .tabela.pilha tr.total-l td:empty { display: none; }

  .tabela.rotulos td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--ink-2); }
  .tabela.rotulos td[data-vazio] { display: none; }
  .tabela.rotulos td:not(:first-child):not([data-rotulo]) { padding-top: 6px; }
  .tabela.rotulos td { overflow-wrap: anywhere; }

  /* Despesas: conta e valor em cima, "onde" embaixo, botões lado a lado */
  .tabela.desp tr { grid-template-columns: minmax(0, 1fr) auto; }
  .tabela.desp td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .tabela.desp td.txt { grid-column: 1 / -1; font-size: 13px; line-height: 18px; color: var(--ink-2); }
  .tabela.desp td:nth-child(4) { grid-column: 1 / -1; margin-top: 6px; }

  /* Relatórios enviados: arquivo / de onde e período / total, situação e Desfazer */
  .tabela.envios tr { grid-template-columns: minmax(8.5rem, max-content) minmax(0, 1fr) auto; grid-template-areas: "arq arq arq" "onde per per" "total sit acao"; }
  .tabela.envios td:nth-child(1) { grid-area: arq; }
  .tabela.envios td:nth-child(2) { grid-area: onde; color: var(--ink-2); }
  .tabela.envios td:nth-child(3) { grid-area: per; color: var(--ink-2); }
  .tabela.envios td:nth-child(4) { grid-area: total; font-weight: 600; white-space: nowrap; }
  .tabela.envios td:nth-child(5) { grid-area: sit; }
  .tabela.envios td:nth-child(6) { grid-area: acao; }

  /* Produtos: nome em cima, código e categoria embaixo, a situação (ou o botão) do lado */
  .tabela.prods tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nome nome sit" "cod cat sit"; }
  .tabela.prods td:nth-child(1) { grid-area: cod; color: var(--ink-2); }
  .tabela.prods td:nth-child(2) { grid-area: nome; }
  .tabela.prods td:nth-child(3) { grid-area: cat; color: var(--ink-2); font-size: 12.5px; }
  .tabela.prods td:nth-child(4) { grid-area: sit; }

  /* listas longas (Produtos): o começo e o botão "Mostrar os outros" */
  .curta > .barra-l:nth-child(n+11), .curta tbody tr:nth-child(n+31) { display: none; }
  .btn.ver-mais { display: flex; width: 100%; margin-top: 12px; }
}
@media (max-width: 719.98px) {
  /* Repasses, lançamentos: nome e valor em cima; data e pedido; o depósito embaixo. A lista mostra os
     10 primeiros até "Mostrar os outros" (LANCAMENTOS_NO_CELULAR no app.js). */
  .tabela.lanc tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nome nome valor" "data ped ped" "dep dep dep"; }
  .tabela.lanc td:nth-child(1) { grid-area: data; color: var(--ink-2); }
  .tabela.lanc td:nth-child(2) { grid-area: ped; color: var(--ink-2); }
  .tabela.lanc td:nth-child(3) { grid-area: nome; }
  .tabela.lanc td:nth-child(4) { grid-area: valor; color: var(--ink); font-weight: 600; white-space: nowrap; text-align: right; }
  .tabela.lanc td:nth-child(3)[data-rotulo]::before, .tabela.lanc td:nth-child(4)[data-rotulo]::before { content: none; }
  .tabela.lanc td:nth-child(5) { grid-area: dep; color: var(--ink-2); }
  .curta.lanc tbody tr:nth-child(n+11) { display: none; }
}

/* listas com barra: mais vendidos, vitrines */
.barras { display: grid; gap: 12px; }
.barra-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: 13.5px; line-height: 19px; }
.barra-l .l-n { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.barra-l .barra-v { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.barra-l .mix { grid-column: 1 / -1; height: 6px; }
.barra-l .barra-m { grid-column: 1 / -1; color: var(--ink-2); font-size: 12px; line-height: 17px; }
.pos { display: inline-block; min-width: 22px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* listas "nome ....... valor" (Repasses: saldos de um depósito, conferência, a conta do depósito) */
.linhas-v { display: grid; gap: 6px; font-size: 13.5px; line-height: 20px; }
.linhas-v li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.linhas-v li > span:first-child { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.linhas-v li > span:last-child { flex: none; color: var(--ink); font-weight: 600; white-space: nowrap; }
.linhas-v li.total { padding-top: 8px; border-top: 1px solid var(--rule); }
.linhas-v li.total > span:first-child { color: var(--ink); font-weight: 600; }
.conta { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Repasses: cada depósito numa linha que abre (data, situação e valor; aberta, os saldos). Os dois
   blocos lado a lado ficam com a própria altura: com um depósito só, o da esquerda virava um cartão
   quase todo vazio. */
.grid-2.cada-um { align-items: start; }
.depositos { display: grid; gap: 8px; }
.deposito { border: 1px solid var(--line); border-radius: var(--r-md); }
.deposito > summary { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 56px; padding: 10px 14px 10px 12px; border-radius: var(--r-md); cursor: pointer; list-style: none; }
.deposito > summary::-webkit-details-marker { display: none; }
.deposito > summary::before { content: ""; justify-self: center; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform var(--dur-1) var(--ease); }
.deposito[open] > summary::before { transform: rotate(45deg); }
.deposito > summary:hover { background: var(--surface-2); }
.deposito[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dep-q { display: grid; gap: 4px; min-width: 0; }
.dep-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.dep-v { font: 600 18px/24px var(--f-display); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dep-corpo { display: grid; gap: 10px; padding: 4px 14px 14px 36px; }
.dep-corpo .nota { margin-top: 0; }
/* o número do saldo no iFood, miúdo embaixo do período de vendas (serve para conferir com o iFood) */
.linhas-v .l-num { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* No celular, a data e o valor na primeira linha e o selo ("agendado para 27/08/2025") com o dia da
   semana e as vendas embaixo, na largura toda: espremido ao lado do valor, o selo quebrava em duas
   linhas (e passava da linha num celular de 360 px). */
@media (max-width: 719.98px) {
  .deposito > summary { grid-template-areas: "seta data valor" ". meta meta"; }
  .deposito > summary::before { grid-area: seta; }
  .dep-q { display: contents; }
  .dep-q > .l-n { grid-area: data; min-width: 0; }
  .dep-m { grid-area: meta; }
  .dep-v { grid-area: valor; }
  .dep-m .st { white-space: normal; }
}

/* callouts */
.callout { padding: 14px 16px; border-radius: var(--r-md); font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.callout .c-t { display: block; margin-bottom: 2px; color: var(--ink); font: 600 14px/20px var(--f-text); }
.callout.sup { border: 1px dashed var(--line-strong); }
.callout.nota-tp { background: var(--brand-soft); color: var(--ink); }
.callout.nota-tp .c-t { color: var(--brand); }
.callout.alerta { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--ink); }
.callout.alerta .c-t { color: var(--warn); }
.callout.erro { background: var(--crit-soft); border: 1px solid var(--crit-line); color: var(--ink); }
.callout.erro .c-t { color: var(--crit); }
.callout ul { display: grid; gap: 6px; margin-top: 4px; }
.callout li { padding-left: 14px; position: relative; }
.callout li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.painel .callout { margin-bottom: 16px; }
/* botão pequeno dentro de um quadro ("Ir para Integrações"): no celular, o mesmo toque de 44 px dos outros */
@media (max-width: 719.98px) { .callout .acoes .btn.peq { height: 44px; padding: 0 16px; font-size: 14px; } }
.calmo { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.calmo img { width: 32px; height: auto; flex: none; }

/* botões e campos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin: 0; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--brand); color: var(--brand-ink); font: 600 14px/1 var(--f-text); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-1) var(--ease); }
.btn:hover { background: var(--brand-hover); }
.btn:disabled { background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; }
.btn.sec { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.sec:hover { background: var(--surface-2); }
.btn.perigo { background: var(--surface); border-color: var(--crit-line); color: var(--crit); }
.btn.perigo:hover { background: var(--crit-soft); }
.btn.peq { height: 34px; padding: 0 12px; font-size: 13px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.acoes-l { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
select, .in { height: 44px; min-width: 0; max-width: 100%; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 500 15px/1 var(--f-text); }
textarea.in { height: auto; min-height: 80px; padding: 10px 12px; line-height: 20px; resize: vertical; }
.in.num { text-align: right; font-variant-numeric: tabular-nums; }
.in:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.campos { display: grid; gap: 14px; }
.campo { display: grid; align-content: start; gap: 6px; min-width: 0; }
.campo > label, .rot-c { font: 600 13px/18px var(--f-text); color: var(--ink); }
.campo .in, .campo select { width: 100%; }
.campo-m { font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.marcar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.marcar input { width: 18px; height: 18px; accent-color: var(--brand); }
.opcoes { display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (min-width: 720px) {
  .btn, select, .in { height: 40px; }
  .btn.peq { height: 32px; }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .campo.cheio { grid-column: 1 / -1; }
}
@media (max-width: 719.98px) {
  /* 16 px: com letra menor, o iPhone amplia a tela ao tocar no campo e ela fica rolando de lado */
  select, .in { font-size: 16px; }
  /* "quebra" (Ligar ao produto): o nome comprido quebra a linha em vez de sair da tela */
  .btn.quebra { height: auto; min-height: 40px; padding-block: 8px; white-space: normal; text-align: left; line-height: 18px; }
  /* ao rolar até um botão (Enviar relatório, depois de escolher o arquivo), uma folga embaixo */
  .acoes .btn { scroll-margin-bottom: 16px; }
}
.form-caixa { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }

/* senha mostrada uma vez */
.segredo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.segredo code { padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px dashed var(--brand); font: 600 17px/22px var(--f-mono); letter-spacing: .04em; user-select: all; }

/* arrastar e soltar */
.soltar { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2); text-align: center; color: var(--ink-2); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.soltar:hover, .soltar.sobre-ele { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.soltar strong { color: var(--ink); font: 600 15px/22px var(--f-display); }
.soltar .arquivo-escolhido { color: var(--brand); font-weight: 600; overflow-wrap: anywhere; }

/* cobertura: dias com e sem venda */
.cob { display: grid; gap: 10px; }
.cob-l { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 8px 12px; align-items: center; font-size: 13px; }
.cob-d { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3px, 1fr); gap: 1px; height: 18px; }
.cob-d span { border-radius: 1px; background: var(--crit-line); }
.cob-d span.tem { background: var(--sage); }
.cob-d span.vazio { background: var(--line-strong); }
.cob-falta { grid-column: 2; font-size: 12px; line-height: 17px; color: var(--ink-2); }
/* no celular o nome da loja ficava com 180 px e cada dia virava um risco de 3 px: lá o nome vai em
   cima (loja e canal na mesma linha) e a faixa de dias ocupa a largura toda */
@media (max-width: 719.98px) {
  .cob-l { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cob-l > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .cob-falta { grid-column: 1; }
}

/* entrada */
html.travado, html.travado body { overflow: hidden; }
.entrada { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: var(--bg); overflow-y: auto; }
.ent-foto { position: relative; height: 34vh; min-height: 200px; overflow: hidden; background: var(--brand); }
.ent-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.ent-foto::after { content: ""; position: absolute; inset: 0; background: var(--ent-veu); }
.ent-foto-texto { position: absolute; left: 20px; right: 20px; bottom: 44px; z-index: 1; color: var(--ent-texto); }
.ent-lema { margin: 0; font: 300 44px/0.98 var(--f-barlow); letter-spacing: -.01em; text-transform: lowercase; text-wrap: balance; }
.ent-pilares { margin: 10px 0 0; font: 500 11.5px/16px var(--f-barlow); letter-spacing: .16em; text-transform: uppercase; }
.ent-pilares span { opacity: .8; letter-spacing: .08em; text-transform: none; margin-left: 4px; }
.ent-lado { display: grid; place-items: start center; padding: 0 16px max(24px, env(safe-area-inset-bottom, 0px)); }
.ent-card { width: min(100%, 400px); display: grid; gap: 16px; margin-top: -28px; position: relative; z-index: 2; padding: 28px 24px 24px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 14px; box-shadow: 0 10px 30px var(--ent-sombra); }
.ent-logo { display: block; width: 170px; max-width: 70%; }
.ent-logo img { width: 100%; height: auto; }
.ent-titulo { margin: 0; font: 500 22px/28px var(--f-barlow); color: var(--ink); }
.ent-sub { margin: -8px 0 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.ent-campo { display: grid; gap: 6px; }
.ent-campo label { font: 600 13px/18px var(--f-text); color: var(--ink); }
.ent-campo input { height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: 500 15px/1 var(--f-text); }
.ent-campo input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* botão "Mostrar" dentro do campo de senha: só no celular, onde a senha é digitada num teclado pequeno */
.ent-caixa-senha { display: grid; }
.ent-ver { display: none; }
@media (max-width: 719.98px) {
  .ent-campo input { font-size: 16px; } /* com letra menor o iPhone amplia a tela ao tocar */
  /* No Safari o campo de senha (com a folga de 92 px do "Mostrar") pedia 332 px de largura própria: o
     cartão de Entrar e o de Crie a sua senha passavam da tela até uns 414 px (iPhone SE, 13) e a tela
     rolava de lado. Com a largura da coluna, o campo não empurra o cartão. */
  .ent-campo input { width: 100%; min-width: 0; }
  /* o "relative" só aqui: no computador ele mudava o serrilhado da letra em "Crie a sua senha" */
  .ent-caixa-senha { position: relative; }
  .ent-caixa-senha input { padding-right: 92px; }
  .ent-ver { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 0; border-radius: 0 8px 8px 0; background: transparent; color: var(--brand); font: 600 13.5px/1 var(--f-text); cursor: pointer; }
}
.ent-card .btn { width: 100%; }
.ent-erro { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--crit-soft); color: var(--crit); font-size: 13.5px; line-height: 19px; }
.ent-nota { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; line-height: 18px; }
@media (min-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); grid-template-rows: 1fr; }
  .ent-foto { height: auto; min-height: 100vh; }
  html.com-faixa .ent-foto { min-height: calc(100vh - var(--faixa-h, 31px)); }
  .ent-foto-texto { left: 56px; right: 56px; bottom: 56px; }
  .ent-lema { font-size: clamp(56px, 6.2vw, 92px); }
  .ent-pilares { font-size: 13px; }
  .ent-lado { place-items: center; padding: 32px; }
  .ent-card { margin-top: 0; box-shadow: none; }
}

/* rodapé */
.rodape { border-top: 1px solid var(--line); background: var(--surface); }
.rod { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 16px max(16px, env(safe-area-inset-bottom, 0px)); font-size: 12.5px; color: var(--ink-3); }
/* no celular o "Trocar senha" só existe aqui: área de toque de 44 px sem mudar o lugar do texto.
   Fica dentro do @media: solta, venceria o .so-estreito-i e o link apareceria no computador. */
@media (max-width: 719.98px) {
  .rod a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; margin: -10px -8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Integrações: autorização do iFood loja por loja */
.lojas-autorizacao { list-style: none; margin: 8px 0 0; padding: 0; }
.lojas-autorizacao > li { padding: 10px 0; border-top: 1px solid var(--line); }
.lojas-autorizacao .linha-loja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lojas-autorizacao .linha-loja strong { flex: 1 1 140px; min-width: 0; }
.lojas-autorizacao .linha-loja .btn { min-height: 44px; }

/* Tabela que cabe na largura da tela (Cadastro: lojas e unidades): o texto quebra em vez de rolar para o lado */
.tabela.quebra th, .tabela.quebra td { white-space: normal; overflow-wrap: anywhere; }
.tabela.quebra td .st { white-space: nowrap; }