/* Muninn — estilo da casca do PWA. Pensado primeiro para o celular, com
   navegação ao alcance do polegar; a partir de 900 px vira barra lateral.
   Fontes servidas localmente (licenças OFL em /marca). */
@font-face {
  font-family: Poppins;
  src: url("/marca/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: SourceSans;
  src: url("/marca/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --azul: #2563eb;
  --azul-escuro: #1d4ed8;
  --azul-claro: #eef4ff;
  --texto: #202b3c;
  --titulo: #192436;
  --apagado: #5f6b7e;
  --linha: #e3e8ef;
  --borda: #c8d1dc;
  --fundo: #f5f7fa;
  --cartao: #fff;
  --erro: #b42318;
  --erro-fundo: #fef3f2;
  --ok: #067647;
  --ok-fundo: #ecfdf3;
  --aviso: #8a4b00;
  --aviso-fundo: #fff7e6;
  --nav-altura: 64px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 SourceSans, "Segoe UI", system-ui, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  -webkit-tap-highlight-color: transparent;
}
h1, h2 { font-family: Poppins, "Segoe UI", sans-serif; color: var(--titulo); line-height: 1.25; font-weight: 600; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 28px 0 8px; }
a { color: var(--azul); }
[hidden] { display: none !important; }

/* ── Controles ─────────────────────────────────────────────────────────── */
.campo { margin-top: 12px; }
.campo:first-child { margin-top: 0; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 52px; }
.ver-senha { position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: #43516a; border-radius: 8px; }
.ver-senha:focus-visible { outline: 2px solid var(--azul); outline-offset: -4px; }
.ver-senha[aria-pressed="true"] { color: var(--azul); }
label { display: block; font-weight: 600; margin-bottom: 4px; }
input, select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #fff;
}
button, .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #fff;
  color: #43516a;
  cursor: pointer;
}
button:hover, .botao:hover { background: var(--azul-claro); }
.principal { width: 100%; margin-top: 20px; background: var(--azul); border-color: var(--azul); color: #fff; }
.principal:hover { background: var(--azul-escuro); }
button:disabled { opacity: 0.6; cursor: progress; }
button.link { display: flex; margin: 12px auto 0; min-height: 44px; border: 0; background: none; color: var(--azul); text-decoration: underline; }
:focus-visible { outline: 3px solid #93b4f5; outline-offset: 2px; }
.dica { color: var(--apagado); font-size: 14px; margin: 4px 0 0; }
.mensagem { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; }
.mensagem.erro { background: var(--erro-fundo); color: var(--erro); }
.mensagem.ok { background: var(--ok-fundo); color: var(--ok); }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; margin-top: 12px; }
.carregando { padding: 48px 16px; text-align: center; color: var(--apagado); }
.icone { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone-grande { width: 48px; height: 48px; color: #9aa8bc; }

/* ── Entrada (sem sessão) ─────────────────────────────────────────────── */
/* Entrada (sem sessão): celular em uma coluna; no computador, painel da
   marca à esquerda e o formulário à direita. */
.entrada { max-width: 440px; margin: 0 auto; padding: 32px 16px 24px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.entrada > .logo { display: block; align-self: flex-start; margin-bottom: 28px; }
.entrada h1 { font-size: 26px; }
.entrada-sub { margin: 0 0 20px; color: var(--apagado); }
.entrada .mensagem { margin: 0 0 12px; }
.entrada .cartao { margin-top: 0; }
.entrada-troca { margin: 20px 0 0; text-align: center; color: var(--apagado); }
.entrada-troca .link-pequeno { margin-left: 2px; }
.entrada-rodape { margin-top: auto; padding-top: 32px; text-align: center; font-size: 14px; color: var(--apagado); }
.entrada-rodape a { color: inherit; }
.entrada-marca { display: none; }
@media (min-width: 900px) {
  .entrada-pagina { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; min-height: 100vh; }
  .entrada-marca {
    display: flex; flex-direction: column; justify-content: center; gap: 20px;
    padding: 48px clamp(32px, 5vw, 72px);
    background: linear-gradient(160deg, var(--azul) 0%, var(--azul-escuro) 100%);
    color: #fff;
  }
  .entrada-marca .logo { align-self: flex-start; width: 180px; height: auto; margin: 0 0 8px; filter: brightness(0) invert(1); }
  .entrada-frase { margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-weight: 600; font-size: 30px; line-height: 1.25; max-width: 14ch; }
  .entrada-marca ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 17px; opacity: 0.92; }
  .entrada-marca li { display: flex; gap: 10px; align-items: baseline; }
  .entrada-marca li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translateY(-3px); }
  .entrada { justify-content: center; width: 100%; max-width: 456px; padding: 48px 24px 24px; }
  .entrada > .logo { display: none; }
  .entrada-rodape { margin-top: 0; }
}
.logo { display: block; height: 32px; width: auto; margin: 0 0 24px; }
/* Abas em controle segmentado: a escolhida fica branca com texto azul, para
   não se confundir com o botão principal (azul cheio) logo abaixo. */
.abas { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #e6ebf2; }
.abas button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: #4b5870; }
.abas button:hover { background: rgba(255, 255, 255, 0.6); }
.abas button[aria-selected="true"] { background: #fff; color: var(--azul); box-shadow: 0 1px 3px rgba(25, 36, 54, 0.14); }
.titulo-cartao { font-size: 20px; margin-bottom: 12px; }

/* ── Casca (com sessão) ───────────────────────────────────────────────── */
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 8px; top: 8px; z-index: 10; }
.topo {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}
.topo-salao { min-width: 0; }
.topo-salao strong, .topo-salao small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-salao strong { font-family: Poppins, sans-serif; font-weight: 600; color: var(--titulo); }
.topo-salao small { color: var(--apagado); font-size: 14px; }
.botao-icone { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; color: #43516a; }
.botao-icone.ativo { background: var(--azul-claro); color: var(--azul); }

.conteudo {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px calc(var(--nav-altura) + 32px + env(safe-area-inset-bottom));
  outline: none;
}
.pergunta { color: var(--apagado); margin: 0 0 16px; }
.vazio { text-align: center; padding: 32px 16px; background: var(--cartao); border: 1px dashed var(--borda); border-radius: 12px; }
.vazio p { max-width: 36ch; margin: 12px auto 0; }
.vazio .principal { width: auto; }

/* Navegação inferior (celular) */
.navegacao {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: space-around;
  padding: 4px 4px env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid var(--linha);
}
.navegacao a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  font-size: 12px;
  font-weight: 600;
  color: var(--apagado);
  text-decoration: none;
  border-radius: 12px;
}
.navegacao a.ativo { color: var(--azul); background: var(--azul-claro); }
.logo-lateral, .so-lateral { display: none !important; }

.sem-conexao {
  position: sticky;
  top: 65px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--aviso-fundo);
  color: var(--aviso);
  font-size: 14px;
  font-weight: 600;
}

/* Menu de configurações */
.menu { list-style: none; margin: 16px 0 0; padding: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; }
.menu li + li { border-top: 1px solid var(--linha); }
.menu a, .menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--texto);
  text-align: left;
  text-decoration: none;
  font-weight: 400;
}
.menu strong, .menu small { display: block; }
.menu small { color: var(--apagado); font-size: 14px; }
.voltar { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-bottom: 4px; font-weight: 600; text-decoration: none; }
.voltar .icone { width: 20px; height: 20px; }

/* Listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { padding: 12px 0; border-top: 1px solid var(--linha); }
.lista > li:first-child { border-top: 0; padding-top: 0; }
.lista > li:last-child { padding-bottom: 0; }
.linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.linha small { display: block; color: var(--apagado); }
.inativo .linha > div:first-child { opacity: 0.55; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes button { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.subform { margin-top: 12px; padding: 12px; background: var(--fundo); border-radius: 8px; }

/* ── Computador ───────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .casca { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto auto 1fr; min-height: 100vh; }
  .navegacao {
    position: sticky;
    top: 0;
    grid-row: 1 / span 3;
    grid-column: 1;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    height: 100vh;
    padding: 20px 12px;
    border-top: 0;
    border-right: 1px solid var(--linha);
  }
  .navegacao a { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 12px; font-size: 16px; }
  .logo-lateral { display: block !important; height: 28px; width: auto; margin: 0 12px 20px; }
  .so-lateral { display: flex !important; margin-top: auto; }
  .topo, .sem-conexao, .conteudo { grid-column: 2; }
  .topo { padding: 12px 32px; }
  .topo .botao-icone { display: none; }
  .conteudo { width: 100%; padding: 32px 32px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ── Cadastro (assistente e configurações) ────────────────────────────── */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.opcional { font-weight: 400; color: var(--apagado); }
.rotulo { font-weight: 600; margin: 0 0 8px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
input.invalido { border-color: var(--erro); background: var(--erro-fundo); }
button.mini { min-height: 44px; min-width: 44px; padding: 0; font-size: 20px; line-height: 1; }
button.link-pequeno { display: inline-flex; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--azul); font-weight: 600; }
.cartao.destaque { border-color: #bdd0f8; background: var(--azul-claro); }
.cartao.destaque h2 { margin-top: 0; }
.menu a.inativo strong { color: var(--apagado); }

.assistente { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
.assistente h1 { outline: none; margin-top: 16px; }
.progresso { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.progresso li { flex: 1; padding-top: 8px; border-top: 4px solid var(--linha); font-size: 12px; font-weight: 600; color: var(--apagado); }
.progresso li.feito { border-color: #93b4f5; }
.progresso li.atual { border-color: var(--azul); color: var(--azul); }
.navegacao-passos { display: flex; gap: 8px; margin-top: 20px; }
.navegacao-passos > * { flex: 1; margin-top: 0; }

.escolhas { display: grid; gap: 8px; margin-top: 16px; }
.escolhas.compactas { margin-top: 16px; gap: 0; }
.escolha { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; font-weight: 400; cursor: pointer; }
.escolha.marcada { border-color: var(--azul); background: var(--azul-claro); }
.escolha input, .opcao input, .dia-nome input, .usar input { width: 22px; min-height: 22px; height: 22px; flex: none; accent-color: var(--azul); }
.escolha strong, .escolha small, .opcao strong, .opcao small { display: block; }
.escolha small, .opcao small { color: var(--apagado); font-size: 14px; }
.opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 8px 0 0; font-weight: 400; cursor: pointer; }
.linha-campo { display: flex; gap: 8px; margin-top: 8px; }

.semana .dia { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px 0; border-top: 1px solid var(--linha); }
.semana .dia:first-of-type { border-top: 0; }
.semana .dia.fechado .dica { margin: 12px 0 0; }
.dia-nome { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; }
.periodos { display: grid; gap: 4px; }
.periodo { display: flex; align-items: center; gap: 4px; min-width: 0; }
.periodo input { width: 0; flex: 1 1 0; min-width: 0; padding: 8px 6px; }
.periodo span { color: var(--apagado); font-size: 14px; }

.servicos-editor { list-style: none; margin: 0; padding: 0; }
.servicos-editor li { display: grid; grid-template-columns: 32px 1fr; gap: 8px 4px; align-items: center; }
.servicos-editor li.desmarcado { opacity: 0.55; }
.servicos-editor .valores { grid-column: 2; }
.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.valores label { font-size: 13px; font-weight: 600; color: var(--apagado); margin: 0; }
.valores input { margin-top: 4px; padding: 8px; }
.lista .valores { margin-left: 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Celulares comuns têm 360–393 px: o dia vai em cima e os horários ganham a
   largura toda (senão o campo corta "09:0"). */
@media (max-width: 420px) {
  .semana .dia { grid-template-columns: 1fr; gap: 0; }
  .semana .dia-nome { min-height: 40px; }
}
@media (max-width: 360px) {
  .valores { grid-template-columns: 1fr 1fr; }
}

/* ── Agenda ───────────────────────────────────────────────────────────── */
body.sem-rolagem { overflow: hidden; }
.agenda-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.navegar-dia { display: flex; align-items: center; gap: 4px; margin: 8px 0 12px; }
.navegar-dia .virar .icone { transform: rotate(180deg); }
.dia-atual { position: relative; flex: 1; min-width: 0; margin: 0; text-align: center; font-family: Poppins, sans-serif; font-weight: 600; }
.dia-atual span { display: block; padding: 10px 4px; border-radius: 10px; }
.dia-atual span::first-letter { text-transform: uppercase; }
.dia-atual input { position: absolute; inset: 0; opacity: 0; width: 100%; min-height: 0; cursor: pointer; }
.dia-atual:focus-within span { outline: 3px solid #93b4f5; }
.dia-atual .curta { display: none; }
/* Celular estreito: "seg, 26 de out" cabe numa linha e não aperta as setas. */
@media (max-width: 419px) {
  .dia-atual .longa { display: none; }
  .dia-atual .curta { display: block; }
}
/* Faixas de fichas roláveis de lado: arrastar com o dedo, sem barra cinza. */
.faixa-profs, .fichas-prof, .seletor-profs { scrollbar-width: none; }
.faixa-profs::-webkit-scrollbar, .fichas-prof::-webkit-scrollbar, .seletor-profs::-webkit-scrollbar { display: none; }

.faixa-profs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 4px; }
.faixa-profs button { flex: none; min-height: 44px; border-radius: 22px; padding: 6px 14px; }
.faixa-profs button[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.faixa-profs small { margin-left: 4px; opacity: 0.8; font-weight: 400; }

.grade { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 8px; margin-top: 4px; }
.eixo { position: relative; margin-top: 32px; height: var(--altura); }
.eixo span { position: absolute; right: 0; transform: translateY(-50%); font-size: 12px; color: var(--apagado); }
.coluna { display: none; min-width: 0; }
.coluna.ativa { display: block; }
.coluna-nome { height: 32px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilho { position: relative; background: repeating-linear-gradient(45deg, #eef1f5 0 6px, #e6eaf0 6px 12px); border-radius: 10px; cursor: copy; overflow: hidden; }
.linha-hora { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linha); pointer-events: none; z-index: 1; }
.expediente { position: absolute; left: 0; right: 0; background: #fff; pointer-events: none; }
.bloqueio, .atendimento { position: absolute; left: 4px; right: 4px; z-index: 2; display: block; min-height: 0; padding: 4px 8px; border-radius: 8px; text-align: left; font-size: 13px; line-height: 1.3; overflow: hidden; }
.bloqueio { background: repeating-linear-gradient(45deg, #fde7d4 0 8px, #fbd9bd 8px 16px); border: 1px solid #f3b98a; color: #8a4b00; font-weight: 600; }
.atendimento { background: var(--azul-claro); border: 1px solid #bdd0f8; border-left: 4px solid var(--azul); color: var(--texto); font-weight: 400; }
.atendimento:hover { background: #e2ecff; }
.atendimento strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-hora, .at-servicos, .at-situacao { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-hora { font-size: 12px; color: var(--apagado); }
.at-situacao { font-weight: 600; font-size: 12px; }
.atendimento.s-in_service { background: var(--ok-fundo); border-color: #a6e4bf; border-left-color: var(--cor-prof, var(--ok)); }
.atendimento.s-completed { background: #f2f4f7; border-color: var(--linha); border-left-color: var(--cor-prof, #98a2b3); color: var(--apagado); }
.atendimento.s-no_show { background: var(--erro-fundo); border-color: #f6c2bd; border-left-color: var(--cor-prof, var(--erro)); }
.selo { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--azul-claro); color: var(--azul); }
.selo.alerta { background: var(--erro-fundo); color: var(--erro); }
p.selo { margin: 0 0 8px; }
.selo.s-in_service { background: var(--ok-fundo); color: var(--ok); }
.selo.s-no_show, .selo.s-cancelled { background: var(--erro-fundo); color: var(--erro); }

.botao-flutuante { position: fixed; right: 16px; bottom: calc(var(--nav-altura) + 16px + env(safe-area-inset-bottom)); z-index: 4; min-height: 56px; padding: 0 22px; border-radius: 28px; background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 6px 16px #1d4ed844; }
.botao-flutuante:hover { background: var(--azul-escuro); }

.folha-fundo { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; background: #10182866; }
.folha { width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: var(--fundo); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px #10182833; }
.folha-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--linha); }
.folha-topo h2 { margin: 0; outline: none; }
.folha-topo .botao-icone { font-size: 28px; border: 0; background: none; }
.folha-corpo { overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.mensagem.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.mensagem.aviso p { margin: 0; }
.mensagem.aviso .principal { margin-top: 12px; }
.cartao-interno { margin-top: 12px; padding: 12px; background: #fff; border: 1px solid var(--linha); border-radius: 10px; }
.cliente-escolhido { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; background: #fff; border: 1px solid var(--linha); border-radius: 10px; }
.cliente-escolhido > span:first-child { flex: 1; }
.cliente-escolhido small, .resultados small { display: block; color: var(--apagado); }
.resultados { list-style: none; margin: 4px 0 0; padding: 0; background: #fff; border: 1px solid var(--linha); border-radius: 10px; }
.resultados li + li { border-top: 1px solid var(--linha); }
.resultados button { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; border-radius: 0; background: none; text-align: left; font-weight: 400; }
.resultados button.novo { color: var(--azul); font-weight: 600; }
.form-agendamento fieldset { margin-top: 16px; }
.horarios { display: flex; flex-wrap: wrap; gap: 6px; }
.horario { min-height: 44px; min-width: 64px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.horario.escolhido { background: var(--azul); border-color: var(--azul); color: #fff; }
.detalhe p { margin: 4px 0; }
.detalhe-quando { font-family: Poppins, sans-serif; font-weight: 600; }
.detalhe-quando::first-letter { text-transform: uppercase; }
.lista-simples { list-style: none; margin: 12px 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--linha); }
.lista-simples li.total { font-weight: 600; }
.acoes-detalhe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.acoes-detalhe .principal { grid-column: 1 / -1; margin-top: 0; }
.historico { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--linha); }
.historico li { margin-bottom: 10px; }
.historico small { display: block; color: var(--apagado); }
.historico .mudanca { color: var(--texto); }
.detalhe h3 { margin: 20px 0 8px; font-size: 16px; }

@media (min-width: 900px) {
  /* Sem rolagem lateral até 7 colunas, para o cabeçalho de cada uma ficar
     fixo ao rolar; com mais, a grade rola de lado (o seletor ajuda a esconder). */
  .grade { grid-template-columns: 52px repeat(var(--colunas), minmax(110px, 1fr)); }
  .grade.muitas { grid-template-columns: 52px repeat(var(--colunas), minmax(140px, 1fr)); overflow-x: auto; }
  .coluna { display: block; }
  .faixa-profs { display: none; }
  .botao-flutuante { bottom: 24px; right: 32px; }
  .folha-fundo { align-items: center; }
  .folha { max-width: 560px; border-radius: 16px; max-height: 88vh; }
  .conteudo:has(.agenda) { max-width: none; }
}

/* ── Clientes ─────────────────────────────────────────────────────────── */
textarea { width: 100%; padding: 10px 12px; font: inherit; color: inherit; border: 1px solid var(--borda); border-radius: 8px; background: #fff; resize: vertical; }
.busca-linha { display: flex; gap: 8px; }
.busca-linha input { flex: 1; min-width: 0; }
.busca-linha .principal { width: auto; margin-top: 0; flex: none; }
.lista-clientes { margin-top: 12px; }
.lista-clientes a { justify-content: space-between; }
.lista-clientes a > span:first-child { min-width: 0; }
.lista-clientes strong, .lista-clientes small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selos { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ficha h1 { margin-bottom: 0; }
.contatos { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 8px; }
.contatos a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.observacoes { margin: 8px 0; padding: 10px 12px; background: #fff; border-left: 4px solid var(--borda); border-radius: 4px; white-space: pre-wrap; }
.contadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.contadores div { padding: 10px 8px; background: #fff; border: 1px solid var(--linha); border-radius: 10px; text-align: center; }
.contadores div.alerta { background: var(--erro-fundo); border-color: #f6c2bd; color: var(--erro); }
.contadores dt { font-size: 12px; color: var(--apagado); }
.contadores div.alerta dt { color: var(--erro); }
.contadores dd { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 20px; }
.historico-cliente { list-style: none; margin: 0; padding: 0; }
.historico-cliente li { padding: 10px 12px; margin-bottom: 8px; background: #fff; border: 1px solid var(--linha); border-radius: 10px; }
.historico-cliente li.s-cancelled { opacity: 0.7; }
.historico-cliente small { display: block; color: var(--apagado); }
.alerta-faltas { flex-basis: 100%; margin: 4px 0 0; }
@media (max-width: 360px) {
  .contadores { grid-template-columns: repeat(2, 1fr); }
}

.link-agenda { word-break: break-all; font-weight: 600; }

/* ── Comanda, Dinheiro, Produtos ──────────────────────────────────────── */
.topo-comanda { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.itens-comanda { list-style: none; margin: 12px 0; padding: 0; background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.itens-comanda > li { padding: 12px; }
.itens-comanda > li + li { border-top: 1px solid var(--linha); }
.item-linha { display: flex; justify-content: space-between; gap: 12px; }
.item-nome { min-width: 0; }
.item-nome small { display: block; color: var(--apagado); }
.item-total, .preco { font-weight: 600; white-space: nowrap; }
.item-acoes { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.quantidade { display: flex; align-items: center; gap: 8px; }
.quantidade button { min-width: 44px; min-height: 40px; padding: 0; font-size: 20px; }
.quantidade span { font-size: 14px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.receber { margin-top: 16px; }
.linha-total { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; }
.linha-total.grande { font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600; color: var(--titulo); margin: 12px 0; }
.desconto { display: flex; gap: 8px; }
.desconto input { flex: 1; min-width: 0; }
.alternar { display: flex; flex: none; }
.alternar button { min-width: 48px; padding: 0 10px; border-radius: 0; }
.alternar button:first-child { border-radius: 8px 0 0 8px; }
.alternar button:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.alternar button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { flex: none; min-height: 44px; border-radius: 22px; padding: 6px 14px; }
.chip.escolhido { background: var(--azul); border-color: var(--azul); color: #fff; }
.chips.formas .chip { flex: 1 1 40%; }
.resumo-comanda { margin-top: 16px; }
.texto-alerta { color: var(--erro); }
.contadores.dinheiro { grid-template-columns: repeat(2, 1fr); }
.contadores.dinheiro dd { font-size: 18px; }
.menu li > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px; }
.menu button .preco, .menu a .preco { margin-left: auto; }
.menu button { justify-content: space-between; }

/* ── Caixa ────────────────────────────────────────────────────────────── */
.dinheiro .abas { margin-bottom: 12px; }
.acoes-topo { display: flex; gap: 8px; }
.acoes-topo > * { flex: 1; margin-top: 0; }
.navegar-dia .espaco { min-width: 80px; }
.caixa .saldo { margin: 4px 0; font-family: Poppins, sans-serif; font-size: 28px; font-weight: 600; color: var(--titulo); }
.caixa .saldo small { font-family: SourceSans, sans-serif; font-size: 14px; font-weight: 400; color: var(--apagado); }
.acoes-caixa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.acoes-caixa .principal { grid-column: 1 / -1; margin-top: 0; }
.contadores.dinheiro dd { font-size: 17px; }
.lancamentos { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.lancamentos > li { padding: 10px 12px; }
.lancamentos > li + li { border-top: 1px solid var(--linha); }
.lancamentos .linha > span:first-child { min-width: 0; flex: 1; }
.lancamentos small { display: block; color: var(--apagado); }
.lancamentos .acoes { justify-content: flex-end; }
.lancamentos .acoes:empty { display: none; }
.lancamentos li.desfeito .linha { opacity: 0.55; text-decoration: line-through; }
.valor { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.valor.entrada { color: var(--ok); }
.valor.saida { color: var(--erro); }

/* ── Hoje ─────────────────────────────────────────────────────────────── */
a.link-pequeno { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--azul); font-weight: 600; }
.aviso-hoje { display: block; margin-top: 12px; padding: 14px 16px; border: 1px solid #f3d19c; border-radius: 12px; background: #fff4e0; color: #7a4b00; text-decoration: none; }
.aviso-hoje strong, .aviso-hoje small { display: block; }
.aviso-hoje small { color: var(--texto); font-size: 14px; }
.titulo-acao { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hoje h2 .selo { vertical-align: middle; }
.menu a.whats { width: auto; flex: none; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 8px; background: var(--azul); color: #fff; font-weight: 600; }
.menu a.whats:hover { background: var(--azul-escuro); }
.menu li > div > button.link-pequeno, .menu .item-nome a.link-pequeno { width: auto; min-height: 44px; padding: 0 4px; color: var(--azul); font-weight: 600; flex: none; }
.lembretes .item-nome, .proximos .item-nome { flex: 1; min-width: 0; }
.lembretes .lembrado strong { color: var(--apagado); }
.sem-fone { flex: none; color: var(--apagado); }
.proximos li > div { justify-content: flex-start; }
.hora-proximo { display: flex; flex-direction: column; flex: none; width: 52px; font-variant-numeric: tabular-nums; }
.riscada { text-decoration: line-through; color: var(--apagado); font-weight: 400; }
.item-nome .selo { margin: 4px 4px 0 0; }

/* ── Estoque ──────────────────────────────────────────────────────────── */
.acoes-estoque { margin: 12px 0; }
.acoes-estoque .chip { flex: 1 1 40%; }
.texto-ok { color: var(--ok); }
.movimentos li.desfeito > .item-linha strong { color: var(--apagado); text-decoration: line-through; }
.movimentos .link-pequeno { min-height: 36px; padding: 0; }

/* ── Comissão ─────────────────────────────────────────────────────────── */
.campo-percentual { display: flex; align-items: center; gap: 4px; flex: none; margin: 0; font-weight: 600; }
.campo-percentual input { width: 72px; padding: 8px; text-align: right; }
.campo-percentual input.invalido { border-color: var(--erro); }
.regras .item-nome { flex: 1; min-width: 0; }
.menu.interna { margin: 0 12px 12px; }
.cabecalho-comissao { width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; align-items: center; }
.cabecalho-comissao small { display: block; color: var(--apagado); font-weight: 400; font-size: 14px; }
.lista-comissao { list-style: none; margin: 12px 0 0; padding: 0; }
.lista-comissao li { padding: 8px 0; border-top: 1px solid var(--linha); }
.dica-item { display: block; color: var(--apagado); }

/* ── Documento (privacidade) ──────────────────────────────────────────── */
.documento { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; line-height: 1.55; }
.documento h2 { margin-top: 28px; }
.documento ul { padding-left: 20px; }

/* ── LGPD ─────────────────────────────────────────────────────────────── */
.modo-suporte { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 16px; background: #fff4e0; border-bottom: 1px solid #f3d19c; color: #7a4b00; font-size: 14px; }
.modo-suporte button { margin-left: auto; }
.acessos .motivo { color: var(--texto); }
@media (min-width: 900px) {
  .modo-suporte { grid-column: 2; }
}
.primeiros-passos ol { margin: 8px 0 0; padding-left: 22px; }
.primeiros-passos li { margin: 6px 0; }
.primeiros-passos li.feito { color: var(--ok); }
.primeiros-passos li.feito::marker { content: "✓  "; }
.primeiros-passos a { font-weight: 600; }

/* ── Interruptor (liga/desliga) ───────────────────────────────────────── */
.interruptor { display: flex; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; font-weight: 400; }
.interruptor strong, .interruptor small { display: block; }
.interruptor small { color: var(--apagado); font-size: 14px; }
.interruptor input { appearance: none; flex: none; position: relative; width: 48px; height: 28px; min-height: 28px; margin: 0; padding: 0; border: 0; border-radius: 14px; background: var(--borda); cursor: pointer; transition: background 0.15s; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0003; transition: transform 0.15s; }
.interruptor input:checked { background: var(--azul); }
.interruptor input:checked::after { transform: translateX(20px); }
.interruptor input:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }
.escolhas legend.rotulo { margin-bottom: 8px; }

/* ── Dinheiro: resumo do dia ──────────────────────────────────────────── */
.resumo-dia { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 4px; }
.resumo-dia:has(> div:only-child) { grid-template-columns: 1fr; }
.resumo-dia dd { font-size: 18px; }
.faturamento-dia { margin-top: 0; }
.principal.lancar { margin: 12px 0 4px; }
.opcoes-lancar { display: grid; gap: 10px; }
.opcao-grande { display: block; width: 100%; min-height: 72px; padding: 14px 16px; text-align: left; border-radius: 12px; }
.opcao-grande strong, .opcao-grande small { display: block; }
.opcao-grande small { color: var(--apagado); font-weight: 400; margin-top: 2px; }
@media (max-width: 360px) {
  .resumo-dia dd { font-size: 16px; }
}

/* ── Nova entrada de estoque ──────────────────────────────────────────── */
.botao-entrada { width: 100%; margin-top: 8px; }
.entrada-estoque .achados { margin-top: 0; }
.entrada-estoque .achados button:disabled { opacity: 0.55; }
.itens-entrada { list-style: none; margin: 12px 0; padding: 0; background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.itens-entrada > li { padding: 12px; }
.itens-entrada > li + li { border-top: 1px solid var(--linha); }
.itens-entrada .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resumo-entrada { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 12px; margin-top: 12px; border-radius: 10px; background: var(--azul-claro); }

/* ── Avatar e cor do profissional ─────────────────────────────────────── */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--tam, 32px); height: var(--tam, 32px); border-radius: 50%; background: var(--cor, var(--azul)); color: #fff; font-family: Poppins, sans-serif; font-weight: 600; font-size: calc(var(--tam, 32px) * 0.38); line-height: 1; object-fit: cover; letter-spacing: 0.02em; user-select: none; }
img.avatar { background: #e5e7eb; box-shadow: 0 0 0 2px var(--cor, transparent); }
.foto-linha { display: flex; align-items: center; gap: 16px; }
.foto-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.foto-acoes label.botao { cursor: pointer; margin: 0; }
.paleta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; border: 0; }
.paleta legend { width: 100%; margin-bottom: 8px; }
.amostra { position: relative; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: var(--cor); cursor: pointer; }
.amostra input { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.amostra input:checked { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cor); }
.amostra input:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; }
.amostra input:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
.menu a .avatar { margin-right: 0; }

/* ── Agenda: quem é quem (P1.6) ───────────────────────────────────────── */
.atendimento.s-scheduled { background: var(--cor-prof-claro, var(--azul-claro)); border-color: color-mix(in srgb, var(--cor-prof, var(--azul)) 30%, #fff); border-left-color: var(--cor-prof, var(--azul)); }
.coluna-nome { position: sticky; top: var(--topo-altura, 60px); z-index: 4; display: flex; align-items: center; gap: 8px; height: auto; min-height: 40px; padding: 4px 6px; margin-bottom: 6px; background: var(--fundo, #f5f7fb); border-bottom: 3px solid var(--cor-prof, var(--azul)); border-radius: 8px 8px 0 0; }
.coluna-nome span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eixo { margin-top: 46px; }
.faixa-profs button { display: inline-flex; align-items: center; gap: 6px; }
.seletor-profs { display: none; }
@media (min-width: 900px) {
  .coluna.oculta { display: none; }
  .seletor-profs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
  .seletor-profs .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 4px; }
  .seletor-profs .chip[aria-pressed="false"] { opacity: 0.5; background: transparent; }
  .seletor-profs .chip[aria-pressed="true"] { background: var(--cartao); border-color: var(--borda); color: var(--texto); }
}
/* Altura da barra do topo (fixa), para os cabeçalhos da agenda grudarem logo abaixo. */
:root { --topo-altura: 65px; }
@media (min-width: 900px) { :root { --topo-altura: 70px; } }

/* ── Hoje por profissional (P1.5) ─────────────────────────────────────── */
.fichas-prof { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; }
.fichas-prof .chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 4px 12px 4px 6px; }
.fichas-prof .chip small { opacity: 0.75; font-weight: 400; }
.fichas-prof .chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.proximos li > div { gap: 10px; }
.lembretes li > div > .avatar { margin-right: -2px; }

/* ── Identidade do salão (P2.2) ───────────────────────────────────────── */
.logo-salao { flex: none; width: auto; max-width: 96px; height: 36px; object-fit: contain; border-radius: 6px; }
.topo-salao { flex: 1; }
.logo-publico { display: block; max-width: 180px; max-height: 72px; object-fit: contain; margin-bottom: 8px; }
.identidade .logo-previa { display: flex; align-items: center; justify-content: center; width: 120px; height: 72px; border: 1px dashed var(--borda); border-radius: 10px; background: #fff; color: var(--apagado); font-size: 13px; text-align: center; }
.identidade .logo-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cores-marca { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; border: 0; }
.cor-livre { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; }
.cor-livre input[type="color"] { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.previa-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--fundo); }
.previa-marca .principal { width: auto; margin: 0; }

/* ── Foto do produto (P2.3) ───────────────────────────────────────────── */
.foto-produto { flex: none; width: var(--tam, 44px); height: var(--tam, 44px); border-radius: 10px; object-fit: cover; background: #fff; border: 1px solid var(--linha); }
.foto-produto.vazia { display: inline-flex; align-items: center; justify-content: center; background: var(--fundo); color: var(--apagado); }
.foto-produto.vazia .icone { width: 55%; height: 55%; }
.lista-clientes button > .item-nome { flex: 1; min-width: 0; }

/* ── Exportação em cartões e relatório (P2.5) ─────────────────────────── */
.periodo-exportacao .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartoes-exportacao { list-style: none; display: grid; gap: 10px; margin: 16px 0 0; padding: 0; }
.cartao-exportacao { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: start; padding: 14px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; }
.icone-exportacao { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); }
.texto-exportacao strong, .texto-exportacao small { display: block; }
.texto-exportacao small { color: var(--apagado); font-size: 14px; }
.texto-exportacao .formatos { margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.acoes-exportacao { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; }
.acoes-exportacao .botao { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; text-decoration: none; }
.acoes-exportacao .icone { width: 18px; height: 18px; }
@media (min-width: 700px) {
  .cartoes-exportacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.acoes-relatorio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.acoes-relatorio .principal { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.acoes-relatorio .dica { flex-basis: 100%; margin: 0; }
.cab-relatorio { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid var(--azul); }
.cab-relatorio h1 { margin: 0; }
.logo-relatorio { max-width: 140px; max-height: 64px; object-fit: contain; }
.salao-relatorio { margin: 0; font-weight: 600; color: var(--apagado); }
.tabela-rolagem { overflow-x: auto; }
.tabela-relatorio { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.tabela-relatorio th, .tabela-relatorio td { padding: 6px 8px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela-relatorio th { background: var(--fundo); font-weight: 600; white-space: nowrap; }
.tabela-relatorio tr:nth-child(even) td { background: #fafbfc; }
.rodape-relatorio { margin-top: 16px; font-size: 12px; color: var(--apagado); }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff; }
  .topo, .navegacao, .so-tela, .sem-conexao, .modo-suporte, .botao-flutuante, .pular { display: none !important; }
  .casca, .conteudo { display: block; padding: 0 !important; margin: 0; max-width: none; width: auto; }
  .tabela-rolagem { overflow: visible; }
  .tabela-relatorio { font-size: 10px; }
  .tabela-relatorio thead { display: table-header-group; }
  .tabela-relatorio tr { break-inside: avoid; }
  .cab-relatorio { break-after: avoid; }
}

/* ── Suporte: autorização e modo só leitura (P2.6) ────────────────────── */
.codigo-suporte { margin: 8px 0; font-family: Poppins, sans-serif; font-size: 36px; font-weight: 600; letter-spacing: 0.12em; color: var(--titulo); }
.pedir-ajuda .acoes-detalhe .principal { width: auto; margin-top: 0; }
/* No acesso de suporte, ações que alteram somem; o servidor recusa de qualquer jeito. */
.somente-leitura .botao-flutuante, .somente-leitura .lancar, .somente-leitura .botao-entrada, .somente-leitura .acoes-estoque,
.somente-leitura .acoes-detalhe, .somente-leitura .acoes-caixa, .somente-leitura form .principal, .somente-leitura .busca-linha .principal,
.somente-leitura .foto-acoes, .somente-leitura .item-acoes { display: none !important; }
.somente-leitura .interruptor, .somente-leitura .paleta, .somente-leitura .cores-marca { pointer-events: none; opacity: 0.6; }

/* ── Computador: Hoje e Dinheiro em duas colunas (P2.7) ───────────────── */
@media (min-width: 1100px) {
  .conteudo:has(.hoje), .conteudo:has(.dinheiro) { max-width: 1120px; }
  .hoje-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "proximos lembrar" "proximos outros"; gap: 0 32px; align-items: start; }
  .hoje-grade .bloco-proximos { grid-area: proximos; }
  .hoje-grade .bloco-lembrar { grid-area: lembrar; }
  .hoje-grade .bloco-outros { grid-area: outros; }
  .dinheiro-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .dinheiro-grade .bloco-lancamentos > .cartao:first-child { margin-top: 12px; }
}