/* Painel do cliente do Group Aurum Horizon. Celular primeiro, herdado do template hospitaltriage:
   topo com marca e Menu em pilula, barra fixa na zona do polegar com Inicio, Cofre, Prazos e Conta,
   e menu em folha. Usa so as variaveis de tokens.css (claro e escuro) e os componentes de base.css.
   Tamanhos em rem: o texto acompanha a fonte do aparelho. Alvos de toque de 48px ou mais. */

body.app {
  --toque: 48px;
  --coluna: min(40rem, 100% - 2rem);
  --barra-altura: 4rem;
  font-size: 1.125rem;
  line-height: 1.55;
  min-height: 100vh;
  padding-bottom: calc(var(--barra-altura) + 1rem + env(safe-area-inset-bottom, 0px));
}
body.app main:focus { outline: none; }

.app .ic {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; vertical-align: -.2em;
}

/* ------------------------------------------------------------------ topo */
.app-topo {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.app-nativo .app-topo { padding-top: env(safe-area-inset-top, 0px); }
@media (display-mode: standalone) {
  .app-topo { padding-top: env(safe-area-inset-top, 0px); }
}
.app-topo-in {
  width: var(--coluna); margin-inline: auto;
  display: flex; align-items: center; gap: .6rem;
  min-height: 3.5rem; padding-block: .35rem;
}
.app-marca {
  display: inline-flex; align-items: center; gap: .5rem; min-width: 0; min-height: 48px;
  color: var(--ink); text-decoration: none;
  font-family: var(--f-display); font-size: 1.45rem; line-height: 1.1;
}
.app-marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-marca-simbolo { width: 1.7rem; height: 1.7rem; color: var(--accent); }
.app-topo-ajuda, .app-menu-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; min-width: 48px; padding: .4rem .95rem;
  border-radius: 100px; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.app-topo-ajuda { display: none; margin-left: auto; border: 2px solid var(--stop); color: var(--stop); background: transparent; font-weight: 700; }
.app-topo-ajuda:hover { background: var(--stop-wash); }
.app-menu-botao { margin-left: auto; border: 1px solid var(--rule); color: var(--ink); background: var(--surface); }
.app-menu-botao:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 40rem) {
  .app-topo-ajuda { display: inline-flex; }
  .app-topo-ajuda + .app-menu-botao { margin-left: 0; }
}

/* ------------------------------------------------------------------ faixas de estado (rede, versão) */
.app-faixa {
  width: var(--coluna); margin: .75rem auto 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  padding: .75rem 1rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
}
.app-faixa p { flex: 1 1 14rem; }
.app-faixa .ic { width: 1.5rem; height: 1.5rem; }
.app-faixa-rede { border-left: 4px solid var(--stop); background: var(--stop-wash); }
.app-faixa-rede a { color: var(--stop); font-weight: 700; }
.app-faixa-versao { border-left: 4px solid var(--accent); background: var(--wash); }

/* ------------------------------------------------------------------ telas */
.app-principal { width: var(--coluna); margin: 0 auto; padding-block: 1.25rem 1.5rem; }
.app-tela { display: flex; flex-direction: column; gap: 1rem; }
.app-kicker {
  font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.app-titulo {
  font-family: var(--f-display); font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1.08;
  scroll-margin-top: 5rem;
}
.app-lead { color: var(--ink-2); font-size: 1.15rem; }
.app-discreto { color: var(--muted); }
.app-lista { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--ink-2); }
.app-lista li + li { margin-top: .35rem; }

.app-cartao {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 1.1rem 1.15rem;
}
.app-cartao > * + * { margin-top: .6rem; }
.app-cartao h2 {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--f-body); font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--ink);
}
.app-cartao h2 .ic { color: var(--accent); }
.app-cartao .acoes { margin-top: .9rem; }
.app-cartao-destaque { border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.app-andamento { font-weight: 600; }
.app-emergencia { border-left: 4px solid var(--stop); }
.app-emergencia h2 { color: var(--stop); }
.app-ligar { font-size: 1.25rem; }
.app-ligar b { font-size: 1.2em; }
.app-apoio a { color: var(--stop); font-weight: 700; }
.app-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; font-weight: 600; }

.app .btn { min-height: var(--toque); font-size: 1.1rem; }
.app .btn-largo { width: 100%; }
.app .acoes-empilhadas { flex-direction: column; }
@media (min-width: 40rem) {
  .app .btn-largo { width: auto; min-width: 14rem; }
  .app .acoes-empilhadas { flex-direction: row; flex-wrap: wrap; }
}

/* escolhas (tema) e consentimentos */
.app-escolhas { display: grid; gap: .5rem; margin-top: .6rem; }
.app-escolhas legend { font-weight: 600; margin-bottom: .4rem; color: var(--ink-2); }
.app-escolha {
  display: flex; align-items: center; gap: .75rem;
  min-height: var(--toque); padding: .5rem .9rem;
  background: var(--surface); border: 2px solid var(--rule-strong); border-radius: var(--r); cursor: pointer;
}
.app-escolha input { width: 1.4rem; height: 1.4rem; margin: 0; flex: none; accent-color: var(--accent); }
.app-escolha:has(input:checked) { border-color: var(--accent); background: var(--wash); font-weight: 600; }
.app-escolha:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.app-consentimento {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .8rem .9rem; background: var(--surface); border: 2px solid var(--rule-strong); border-radius: var(--r);
}
.app-consentimento input { width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; flex: none; accent-color: var(--accent); }
.app-consentimento label { font-weight: 600; cursor: pointer; }
.app-consentimento p { margin-top: .3rem; color: var(--ink-2); font-weight: 400; }
.app-consentimento:has(input:checked) { border-color: var(--accent); background: var(--wash); }

.app-campo { display: block; }
.app-campo > span { display: block; font-weight: 600; color: var(--ink-2); margin-bottom: .35rem; }
.app-campo input { font-size: 1.15rem; }

.app-codigo {
  font-family: var(--f-mono); font-size: 1.4rem; font-weight: 600; letter-spacing: .06em;
  padding: .6rem .9rem; border: 2px dashed var(--rule-strong); border-radius: var(--r); overflow-wrap: anywhere;
}
.app-estado { padding: .7rem .9rem; border-radius: var(--r); background: var(--surface-2); color: var(--ink); }
.app-estado.ok { background: var(--wash); border-left: 3px solid var(--accent); }
.app-estado.aviso { background: var(--warn-wash); border-left: 3px solid var(--warn); }
.app-estado.erro { background: var(--stop-wash); border-left: 3px solid var(--stop); }

/* ------------------------------------------------------------------ barra do polegar (sempre à vista) */
.app-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--rule);
  box-shadow: 0 -2px 14px rgba(14, 22, 20, .07);
}
@media (min-width: 40rem) {
  .app-barra { padding-inline: calc((100% - 40rem) / 2); }
}
.app-barra-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: var(--barra-altura); padding: .4rem .25rem;
  color: var(--muted); font-size: .9rem; font-weight: 600; line-height: 1.1; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.app-barra-item .ic { width: 1.5rem; height: 1.5rem; }
.app-barra-item[aria-current="page"] { color: var(--accent); }
.app-barra-item:active { background: var(--surface-2); }
.app-barra-item:focus-visible { outline-offset: -3px; }
.app-barra-ajuda { color: var(--stop); font-weight: 700; }
.app-barra-ajuda .ic { width: 2.4rem; height: 1.7rem; padding: .2rem .5rem; border-radius: 100px; background: var(--stop-wash); }
body.app-em-alerta .app-barra-ajuda { background: var(--stop); color: var(--stop-ink); }
body.app-em-alerta .app-barra-ajuda .ic { background: transparent; }

/* ------------------------------------------------------------------ menu em folha */
.app-folha { position: fixed; inset: 0; z-index: 90; }
.app-folha-fundo { position: absolute; inset: 0; background: rgba(6, 10, 9, .5); }
.app-folha-painel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: calc(100% - 2rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink);
  border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg);
  padding: .6rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  animation: app-folha-sobe .22s ease-out both;
}
@media (min-width: 40rem) {
  .app-folha-painel { left: 50%; right: auto; width: 40rem; transform: translateX(-50%); }
}
.app-folha-painel::before {
  content: ""; display: block; width: 2.75rem; height: .25rem; margin: 0 auto .5rem;
  border-radius: 4px; background: var(--rule);
}
@keyframes app-folha-sobe { from { opacity: 0; } to { opacity: 1; } }
.app-folha-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.app-folha-titulo { font-family: var(--f-display); font-size: 1.75rem; line-height: 1.1; }
.app-folha-fechar {
  display: inline-grid; place-items: center; width: var(--toque); height: var(--toque);
  border-radius: 100px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer;
}
.app-folha-lista { list-style: none; margin: .5rem 0 0; padding: 0; }
.app-folha-lista a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.4rem; padding: .5rem .25rem; border-bottom: 1px solid var(--rule-soft);
  color: var(--ink); font-size: 1.18rem; font-weight: 500; text-decoration: none;
}
.app-folha-lista a .ic { color: var(--muted); }
.app-folha-lista a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.app-folha-acoes { margin-top: 1.1rem; }
.app-folha-aviso { margin-top: .9rem; text-align: center; color: var(--muted); }
body.app-folha-aberta { overflow: hidden; }

/* ------------------------------------------------------------------ página sem internet */
body.app-offline .app-principal { padding-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .app-folha-painel { animation: none; }
}

@media print {
  .app-barra, .app-folha, .app-topo, .app-faixa, .app-midia { display: none !important; }
  body.app { padding-bottom: 0; }
}

/* ==================================================================
   BLOCOS PRÓPRIOS DO PAINEL DO CLIENTE
   ================================================================== */

/* ---------------------------------------------- prazo (os relógios no bolso) */
.app-prazos { display: grid; gap: .6rem; }
.app-prazo {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .9rem;
  padding: .85rem 1rem; background: var(--surface);
  border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong); border-radius: 12px;
  color: inherit; text-decoration: none;
}
.app-prazo b { grid-column: 1; font-size: 1.05rem; color: var(--ink); }
.app-prazo .app-prazo-orgao { grid-column: 1; color: var(--muted); font-size: .95rem; }
.app-prazo .app-prazo-conta {
  grid-column: 2; grid-row: 1 / span 2; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; line-height: 1.2;
}
.app-prazo .app-prazo-conta small { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
.app-prazo.em-ordem { border-left-color: var(--ok); }
.app-prazo.em-ordem .app-prazo-conta { color: var(--ok); }
.app-prazo.atencao { border-left-color: var(--warn); background: var(--warn-wash); }
.app-prazo.atencao .app-prazo-conta { color: var(--warn); }
.app-prazo.vencendo { border-left-color: var(--stop); background: var(--stop-wash); }
.app-prazo.vencendo .app-prazo-conta { color: var(--stop); }
.app-prazo-multa { grid-column: 1 / -1; margin-top: .35rem; color: var(--ink-2); font-size: .95rem; }
.app-prazo-multa b { display: inline; font-size: inherit; }

/* ---------------------------------------------- cofre de documentos */
.app-docs { display: grid; gap: .55rem; }
.app-doc {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: .3rem .8rem;
  padding: .8rem .9rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 12px; color: inherit; text-decoration: none;
}
.app-doc-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.app-doc-ic .ic { width: 1.3rem; height: 1.3rem; }
.app-doc b { font-size: 1.02rem; color: var(--ink); }
.app-doc .app-doc-val { color: var(--muted); font-size: .93rem; font-variant-numeric: tabular-nums; }
.app-doc-selo {
  grid-row: 1 / span 2; justify-self: end; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: 100px; border: 1px solid currentColor;
}
.app-doc.valido .app-doc-ic { background: var(--ok-wash); color: var(--ok); }
.app-doc.valido .app-doc-selo { color: var(--ok); }
.app-doc.vence .app-doc-ic { background: var(--warn-wash); color: var(--warn); }
.app-doc.vence .app-doc-selo { color: var(--warn); }
.app-doc.falta { border-style: dashed; }
.app-doc.falta .app-doc-selo { color: var(--stop); }

/* ---------------------------------------------- processo em andamento */
.app-etapas { list-style: none; margin: .4rem 0 0; padding: 0; counter-reset: et; }
.app-etapas li {
  position: relative; counter-increment: et;
  padding: 0 0 .95rem 2.4rem; border-left: 2px solid var(--rule); margin-left: .8rem;
  color: var(--ink-2);
}
.app-etapas li:last-child { border-left-color: transparent; padding-bottom: 0; }
.app-etapas li::before {
  content: ""; position: absolute; left: -.55rem; top: .15rem;
  width: 1rem; height: 1rem; border-radius: 100px;
  background: var(--surface); border: 2px solid var(--rule-strong);
}
.app-etapas li.feita { color: var(--muted); }
.app-etapas li.feita::before { background: var(--ok); border-color: var(--ok); }
.app-etapas li.agora { color: var(--ink); font-weight: 600; }
.app-etapas li.agora::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--wash); }
.app-etapas b { display: block; }
.app-etapas span { display: block; font-weight: 400; color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------- resumo numérico */
.app-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.app-resumo div {
  padding: .8rem .6rem; text-align: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
}
.app-resumo b { display: block; font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.app-resumo span { display: block; margin-top: .25rem; color: var(--muted); font-size: .85rem; line-height: 1.25; }

/* ---------------------------------------------- marca do painel
   Mesmo travessão do site: AURUM em serifa, HORIZON em caixa alta espacejada. */
.app-marca-simbolo { width: 2rem; height: 2rem; flex: none; color: var(--ouro); }
.app-marca-nome { display: grid; line-height: 1; font-family: var(--f-display); font-size: 1.32rem; }
.app-marca-sufixo {
  font-family: var(--f-body); font-size: .5rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: .16rem;
}
.app-kicker { display: inline-flex; align-items: center; gap: .55rem; }
.app-kicker::before { content: ""; width: 1.5rem; height: 2px; flex: none; background: var(--ouro); opacity: .8; }
.app-resumo b { color: var(--ouro); }

/* ==================================================================
   TRILHAS — o que já foi feito, o que falta, e de quem é a vez.
   Substitui a lista seca de prazos: o cliente vê progresso, não cobrança.
   ================================================================== */

.trilha {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 14px; overflow: hidden;
}
.trilha + .trilha { margin-top: .85rem; }

.trilha-cab { padding: 1rem 1.1rem .85rem; }
.trilha-cab h2 {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-family: var(--f-body); font-weight: 600; font-size: 1.15rem; color: var(--ink);
}
.trilha-cab h2 .ic { color: var(--accent); }
.trilha-conta {
  margin-inline-start: auto; font-variant-numeric: tabular-nums;
  font-size: .95rem; font-weight: 700; color: var(--accent);
}

/* --------------------------------------------- termômetro */
.termometro {
  display: flex; gap: 3px; margin-top: .7rem;
  height: .55rem; border-radius: 100px; overflow: hidden;
  background: var(--surface-3);
}
.termometro i { flex: 1; background: var(--surface-3); transition: background-color .3s ease; }
.termometro i.feito { background: var(--ok); }
.termometro i.agora { background: var(--accent); }
.termometro i.travado { background: var(--warn); }
.termometro i.vencido { background: var(--stop); }
@media (prefers-reduced-motion: reduce) { .termometro i { transition: none; } }

.trilha-resumo { margin-top: .5rem; color: var(--muted); font-size: .95rem; }

/* --------------------------------------------- etapas */
.trilha-etapas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.etapa {
  display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: start;
  gap: .25rem .75rem; padding: .8rem 1.1rem;
}
.etapa + .etapa { border-top: 1px solid var(--rule-soft); }

/* a marca de estado, à esquerda */
.etapa-marca {
  grid-row: 1 / span 3; display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; margin-top: .05rem; border-radius: 100px;
  border: 2px solid var(--rule-strong); background: var(--surface); color: var(--muted);
}
.etapa-marca .ic { width: .95rem; height: .95rem; }

.etapa b { font-size: 1.02rem; color: var(--ink); font-weight: 600; }
.etapa-detalhe { color: var(--ink-2); font-size: .95rem; }
.etapa-quando { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* de quem é a vez — o cliente precisa saber se a bola está com ele */
.quem {
  grid-row: 1; justify-self: end; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .16rem .55rem; border-radius: 100px; border: 1px solid currentColor;
}
.quem-voce  { color: var(--accent); }
.quem-nos   { color: var(--ok); }
.quem-orgao { color: var(--muted); }

/* estados */
.etapa.feito .etapa-marca { border-color: var(--ok); background: var(--ok); color: #fff; }
.etapa.feito b { color: var(--ink-2); font-weight: 500; }
.etapa.feito .etapa-detalhe { color: var(--muted); }

.etapa.agora { background: var(--wash); }
.etapa.agora .etapa-marca { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--wash); }

.etapa.travado .etapa-marca { border-color: var(--warn); color: var(--warn); background: var(--warn-wash); }
.etapa.travado b { color: var(--warn); }

.etapa.vencido { background: var(--stop-wash); }
.etapa.vencido .etapa-marca { border-color: var(--stop); color: var(--stop); }
.etapa.vencido b { color: var(--stop); }

.etapa-acao { grid-column: 2 / -1; margin-top: .5rem; }
.etapa-acao .btn { min-height: 2.5rem; font-size: 1rem; }

/* multa reproduzida da tabela oficial, quando houver */
.etapa-custo {
  grid-column: 2 / -1; margin-top: .35rem;
  color: var(--ink-2); font-size: .9rem;
}
.etapa-custo b { font-size: inherit; color: inherit; }

/* ==================================================================
   VITRINE — serviços que o cliente contrata de dentro do painel.
   Cada cartão diz QUEM ENTREGA: a Aurum, dentro da licença 8299.85,
   ou um parceiro licenciado que fatura direto. Sem essa marca, o
   cartão não entra na vitrine.
   ================================================================== */

.vitrine-grupo + .vitrine-grupo { margin-top: 1.5rem; }
.vitrine-grupo > h2 {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--f-body); font-weight: 600; font-size: 1.1rem; color: var(--ink);
  margin-bottom: .2rem;
}
.vitrine-grupo > h2 .ic { color: var(--accent); }
.vitrine-grupo > p { color: var(--muted); font-size: .95rem; margin-bottom: .75rem; }

.vitrine { display: grid; gap: .7rem; }
@media (min-width: 40rem) { .vitrine { grid-template-columns: 1fr 1fr; } }

.oferta {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 1rem 1.05rem;
}
.oferta-cab { display: flex; align-items: flex-start; gap: .6rem; }
.oferta-cab b { font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.oferta-quem {
  margin-inline-start: auto; white-space: nowrap; align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 100px; border: 1px solid currentColor;
}
.oferta-quem.nos { color: var(--ok); }
.oferta-quem.parceiro { color: var(--accent); }
.oferta p { color: var(--ink-2); font-size: .97rem; }
.oferta-preco {
  margin-top: auto; padding-top: .5rem;
  font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.oferta-preco small { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
.oferta .btn { min-height: 2.6rem; font-size: 1rem; width: 100%; }

.oferta-contratado { border-color: color-mix(in srgb, var(--ok) 45%, var(--rule)); background: var(--ok-wash); }
.oferta-contratado .oferta-preco { color: var(--ok); }

.vitrine-aviso {
  margin-top: 1.25rem; padding: .85rem 1rem; border-radius: 12px;
  background: var(--surface-2); border-inline-start: 3px solid var(--accent);
  color: var(--ink-2); font-size: .95rem;
}
.vitrine-aviso b { color: var(--ink); }

/* ==================================================================
   A MESA — clube por seleção. Encontros com vaga, formação e mural.
   O mural aceita DEMANDA, não oferta: demanda informa, oferta vira spam.
   Quem oferta entra no diretório, que é pesquisável e não interrompe.
   ================================================================== */

/* --------------------------------------------- estado da associação */
.mesa-selo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  padding: .9rem 1.05rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--ouro);
}
.mesa-selo .ic { width: 1.6rem; height: 1.6rem; color: var(--ouro); flex: none; }
.mesa-selo b { color: var(--ink); }
.mesa-selo p { flex: 1 1 14rem; color: var(--ink-2); font-size: .97rem; }
.mesa-selo.fora { border-inline-start-color: var(--rule-strong); }
.mesa-selo.fora .ic { color: var(--muted); }

/* --------------------------------------------- encontros */
.encontro {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 1rem 1.05rem; display: grid; gap: .5rem;
}
.encontro + .encontro { margin-top: .7rem; }
.encontro-data {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); font-size: .95rem;
}
.encontro h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.12rem; color: var(--ink); line-height: 1.3; }
.encontro p { color: var(--ink-2); font-size: .97rem; }
.encontro-pe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .25rem; }

.vagas {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600; color: var(--ink-2);
}
.vagas i {
  display: inline-block; width: 3.5rem; height: .4rem; border-radius: 100px;
  background: var(--surface-3); overflow: hidden; position: relative;
}
.vagas i::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: var(--ocupado, 0%); background: var(--accent);
}
.vagas.poucas { color: var(--warn); }
.vagas.poucas i::before { background: var(--warn); }
.vagas.cheio { color: var(--stop); }
.vagas.cheio i::before { background: var(--stop); }

.encontro-acoes { margin-inline-start: auto; display: flex; gap: .45rem; flex-wrap: wrap; }
.encontro-acoes .btn { min-height: 2.4rem; font-size: .95rem; padding-inline: 1rem; }
.encontro.confirmado { border-color: color-mix(in srgb, var(--ok) 45%, var(--rule)); background: var(--ok-wash); }
.encontro.confirmado .encontro-data { color: var(--ok); }
.encontro-privado {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ouro); border: 1px solid currentColor; border-radius: 100px; padding: .14rem .5rem;
}

/* --------------------------------------------- mural de demandas */
.mural { display: grid; gap: .6rem; }
.demanda {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: .9rem 1rem; display: grid; gap: .35rem;
}
.demanda-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.demanda b { color: var(--ink); font-size: 1.04rem; }
.demanda-setor {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor; border-radius: 100px; padding: .12rem .5rem;
}
.demanda p { color: var(--ink-2); font-size: .96rem; }
.demanda-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-top: .2rem; color: var(--muted); font-size: .88rem;
}
.demanda-pe .btn { margin-inline-start: auto; min-height: 2.3rem; font-size: .92rem; padding-inline: .9rem; }
.demanda-verificado { display: inline-flex; align-items: center; gap: .3rem; color: var(--ok); font-weight: 600; }
.demanda-verificado .ic { width: .95rem; height: .95rem; }

/* --------------------------------------------- formação */
.curso {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .25rem .8rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: .9rem 1rem;
}
.curso + .curso { margin-top: .6rem; }
.curso-ic {
  grid-row: 1 / span 3; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--wash); color: var(--accent);
}
.curso b { color: var(--ink); font-size: 1.04rem; }
.curso span { color: var(--ink-2); font-size: .95rem; }
.curso em { font-style: normal; color: var(--muted); font-size: .88rem; }

/* ==================================================================
   O RITUAL DA MESA — formato, quem senta e o match por interesse mútuo.
   O cruzamento é feito pelos membros: a casa põe a mesa, não apresenta.
   ================================================================== */

.encontro-formato {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .14rem .55rem; border-radius: 100px; border: 1px solid currentColor;
}
.encontro-formato .ic { width: .85rem; height: .85rem; }
.formato-nicho     { color: var(--accent); }
.formato-interesse { color: var(--ok); }
.formato-aleatorio { color: var(--ouro); }

/* quem senta — anônimo até haver match */
.assentos { margin-top: .35rem; }
.assentos > summary {
  list-style: none; cursor: pointer; min-height: 2.5rem;
  display: flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--accent); font-size: .95rem;
}
.assentos > summary::-webkit-details-marker { display: none; }
.assentos > summary::after {
  content: "+"; margin-inline-start: .1rem; font-size: 1.15rem; line-height: 1;
}
.assentos[open] > summary::after { content: "\2212"; }

.assento {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .7rem; align-items: center;
  padding: .6rem .75rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--rule-soft);
}
.assento + .assento { margin-top: .4rem; }
.assento b { color: var(--ink); font-size: .98rem; }
.assento span { grid-column: 1; color: var(--ink-2); font-size: .9rem; }
.assento .btn {
  grid-row: 1 / span 2; min-height: 2.3rem; font-size: .88rem; padding-inline: .8rem;
}
.assento.marcado { border-color: color-mix(in srgb, var(--ok) 50%, var(--rule)); background: var(--ok-wash); }
.assento.casado { border-color: var(--ok); background: var(--ok-wash); }
.assento.casado b::after {
  content: "conexão feita"; display: inline-block; margin-inline-start: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ok); border: 1px solid currentColor; border-radius: 100px; padding: .1rem .45rem;
  vertical-align: middle;
}

/* o rito, escrito uma vez */
.rito { list-style: none; margin: 0; padding: 0; counter-reset: rito; }
.rito li {
  counter-increment: rito; position: relative;
  padding: 0 0 .9rem 2.3rem; border-inline-start: 2px solid var(--rule);
  margin-inline-start: .75rem; color: var(--ink-2); font-size: .97rem;
}
.rito li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.rito li::before {
  content: counter(rito); position: absolute; inset-inline-start: -.85rem; top: -.1rem;
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 100px; background: var(--surface); border: 2px solid var(--ouro);
  color: var(--accent); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.rito b { display: block; color: var(--ink); }

/* ==================================================================
   CORREÇÕES DE CELULAR
   1. A barra do polegar tinha 4 colunas fixas e 6 itens: quebrava em
      duas linhas e comia a tela. Passa a 5 colunas, com o que sobra
      indo para o menu em folha.
   2. A etapa tinha 3 colunas; num aparelho estreito a coluna do selo
      esmagava o texto a uma palavra por linha. Em telas pequenas o
      selo desce para a própria linha.
   ================================================================== */

.app-barra { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.app-barra-item { font-size: .78rem; padding-inline: .1rem; }
.app-barra-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 22rem) { .app-barra-item span { font-size: .72rem; } }

/* botão do menu na barra */
.app-barra-menu { background: none; border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

@media (max-width: 30rem) {
  .etapa { grid-template-columns: 1.7rem minmax(0, 1fr); }
  .etapa .quem { grid-column: 2; grid-row: auto; justify-self: start; margin-bottom: .1rem; }
  .etapa b { grid-column: 2; }
  .assento { grid-template-columns: minmax(0, 1fr); }
  .assento .btn { grid-row: auto; grid-column: 1; justify-self: start; margin-top: .4rem; }
  .encontro-acoes { margin-inline-start: 0; width: 100%; }
  .encontro-acoes .btn { flex: 1; }
}

/* o texto da etapa nunca mais espreme */
.etapa-detalhe, .etapa-quando, .etapa-custo { grid-column: 2 / -1; min-width: 0; }
.etapa b { min-width: 0; overflow-wrap: anywhere; }

/* ==================================================================
   ASSISTENTE — botão flutuante e folha de conversa.
   Fica acima da barra do polegar, sempre alcançável pelo polegar.
   ================================================================== */

.assistente-botao {
  position: fixed; inset-inline-end: 1rem; z-index: 58;
  bottom: calc(var(--barra-altura) + 1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3.25rem; padding: .5rem 1.1rem .5rem .75rem;
  border: 0; border-radius: 100px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.16), 0 10px 28px rgba(0,0,0,.18);
}
.assistente-botao svg { width: 1.6rem; height: 1.6rem; flex: none; }
.assistente-botao:hover { filter: brightness(1.08); }
.assistente-botao .sino {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem;
  border-radius: 100px; background: var(--stop); color: var(--stop-ink);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.assistente { position: fixed; inset: 0; z-index: 95; }
.assistente-fundo { position: absolute; inset: 0; background: rgba(8,6,3,.55); }
.assistente-painel {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-direction: column;
  height: min(88vh, 46rem);
  background: var(--surface); border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
@media (min-width: 40rem) {
  .assistente-painel { inset-inline: auto 1.25rem; width: 26rem; bottom: 1.25rem; border-radius: 20px; height: min(80vh, 42rem); }
}

.assistente-topo {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--rule); background: var(--surface-2);
}
.assistente-topo svg { width: 2rem; height: 2rem; color: var(--ouro); flex: none; }
.assistente-topo b { display: block; color: var(--ink); font-size: 1.02rem; }
.assistente-topo span { display: block; color: var(--muted); font-size: .85rem; }
.assistente-fechar {
  margin-inline-start: auto; display: inline-grid; place-items: center;
  width: var(--toque); height: var(--toque); border-radius: 100px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer;
}
.assistente-fechar svg { width: 1.3rem; height: 1.3rem; color: currentColor; }

.assistente-conversa {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem; display: flex; flex-direction: column; gap: .7rem;
}
.balao {
  max-width: 88%; padding: .75rem .9rem; border-radius: 14px;
  font-size: 1rem; line-height: 1.5;
}
.balao-dele {
  align-self: flex-start; background: var(--surface-2); color: var(--ink);
  border-start-start-radius: 4px;
}
.balao-meu {
  align-self: flex-end; background: var(--accent); color: var(--accent-ink);
  border-end-end-radius: 4px;
}
.balao b { font-weight: 600; }
.balao + .balao-sugestoes { margin-top: .1rem; }
.balao-sugestoes { display: flex; flex-wrap: wrap; gap: .4rem; align-self: flex-start; max-width: 100%; }
.balao-sugestoes button {
  min-height: 2.4rem; padding: .35rem .85rem; border-radius: 100px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.balao-sugestoes button:hover { background: var(--wash); }

.assistente-aviso {
  padding: .6rem 1rem; background: var(--wash); border-top: 1px solid var(--rule-soft);
  color: var(--ink-2); font-size: .85rem; text-align: center;
}

.assistente-entrada {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule); background: var(--surface);
}
.assistente-entrada textarea {
  flex: 1; min-height: var(--toque); max-height: 8rem; resize: none;
  border-radius: 14px; padding: .65rem .8rem; font-size: 1rem;
}
.assistente-acao {
  display: inline-grid; place-items: center; flex: none;
  width: var(--toque); height: var(--toque); border-radius: 100px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); cursor: pointer;
}
.assistente-acao svg { width: 1.35rem; height: 1.35rem; }
.assistente-acao.enviar { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.assistente-acao.gravando { background: var(--stop); border-color: var(--stop); color: var(--stop-ink); }

body.assistente-aberto { overflow: hidden; }

/* recado de ação — aparece só depois que o servidor confirmou, nunca antes */
.app-recado {
  position: fixed; inset-inline: 1rem; bottom: calc(var(--barra-altura, 64px) + 1rem);
  z-index: 80; margin: 0; padding: .8rem 1rem; border-radius: 12px;
  font-size: .92rem; line-height: 1.45; box-shadow: 0 6px 22px rgba(14,22,20,.16);
}
.app-recado-ok { background: var(--go-wash, #EAF5EF); color: var(--go, #2E7D5B); border: 1px solid var(--go, #2E7D5B); }
.app-recado-erro { background: var(--stop-wash, #FBEFEE); color: var(--stop, #A3342B); border: 1px solid var(--stop, #A3342B); }