/* =========================================================================
   LOJA DE VOUCHERS NO APP (PWA) — cad-new-schedule-app.css

   A loja de voucher dentro do app: o paciente chega pela aba "Loja" da área
   (src/shared/app/app-tabbar.js). No modo app:
     - o header do site vira a BARRA DE APP: só o "Voltar" (o mesmo
       [data-schedule-action="voltar"] do cad-new-schedule.js, que leva o
       paciente logado à área dele) e o título "Loja de vouchers". Somem a
       marca, o menu, o Clube, o Login e o hambúrguer: nada leva à home de
       marketing;
     - o rodapé do site encolhe para o MÍNIMO LEGAL: os links de Termos,
       Privacidade e FAQ ([A14d]) e a identificação do fornecedor (CNPJ e
       endereço, [A4] — esta é a página onde a venda acontece). Somem a marca,
       a navegação, o contato e o copyright;
     - o topo, a barra da busca, os cartões de oferta, o modal de filtros, o
       pós-compra e os diálogos do utils.js ganham a linguagem do app (cartões de
       raio 22, pílulas de 52 px, folhas que sobem de baixo no celular).
   A lógica de compra (cad-new-schedule.js, coin/voucher) não muda: esta folha só
   pinta a marcação que já existe. Nenhuma marcação nova no HTML.

   ⚠ TUDO atrás de html.modo-app (src/shared/app/modo-app.js). Sem o modo app,
     esta folha não muda um pixel da vitrine.

   QUEM CARREGA: cad-new-schedule.html, no <head>, como a ÚLTIMA folha (depois de
   institucional.css, cad-new-schedule.css, cad-new-schedule-institucional.css e
   src/shared/app/app.css). Os tokens --app-* vêm de src/shared/app/app.css.
   Especificidade: a institucional pinta com uma classe (e "body .x" nos diálogos
   do utils.js); "html.modo-app" na frente ganha sem !important.

   Blocos: [A] base · [B] barra de app · [C] topo · [D] barra da busca ·
   [E] lista e cartões de oferta · [F] modal de filtros e pós-compra viram
   folhas · [G] diálogos e toast · [H] rodapé legal mínimo · [I] desktop ·
   [J] menos movimento.
   ========================================================================= */

/* [A] Base. --altura-header é o que a institucional usa para o recuo do topo, a
   barra da busca presa e o scroll-padding: no app, é a barra de 56 px + o topo
   seguro. --respiro é a margem lateral do .wrap: 20 (16 no celular pequeno). */
html.modo-app {
  --altura-header: calc(var(--app-cabecalho-altura) + var(--app-seguro-topo));
  --respiro: var(--app-respiro);
  --app-loja-hairline: rgba(16, 24, 40, 0.08);
}
@media (max-width: 380px) {
  html.modo-app { --respiro: 16px; }
}
html.modo-app body {
  background: var(--app-superficie);
  color: var(--app-texto);
}
html.modo-app .wrap { width: auto; max-width: var(--largura); margin-inline: auto; padding-inline: calc(var(--respiro) + var(--app-seguro-esq)) calc(var(--respiro) + var(--app-seguro-dir)); }

/* [B] A barra de app: branca translúcida, 56 px + topo seguro, "Voltar" à
   esquerda e o título da tela. O título vem do CSS (a página não tem um
   elemento para ele, e o <h1> da vitrine continua logo abaixo). */
html.modo-app .site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--altura-header);
  padding-top: var(--app-seguro-topo);
  border-bottom: 0;
  background: var(--app-barra-fundo);
  -webkit-backdrop-filter: var(--app-barra-blur); backdrop-filter: var(--app-barra-blur);
  box-shadow: 0 1px 0 var(--app-loja-hairline);
  color: var(--app-texto);
}
html.modo-app .site-header.is-scrolled { box-shadow: 0 1px 0 var(--app-loja-hairline); }
html.modo-app .site-header__inner {
  justify-content: flex-start; gap: 4px;
  max-width: none;
  padding-inline: calc(8px + var(--app-seguro-esq)) calc(16px + var(--app-seguro-dir));
}
html.modo-app .site-header__inner::after {
  content: "Loja de vouchers";
  flex: 1 1 auto; min-width: 0; order: 2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--app-texto); font: 600 17px/1.3 var(--app-fonte); letter-spacing: -0.01em;
}
html.modo-app .site-header :is(.marca, .nav, .site-header__clube, .site-header__login, .site-header__conta, .menu-toggle),
html.modo-app .mobile-menu { display: none; }
html.modo-app .site-header__acoes { order: 1; gap: 0; }
/* o "Voltar": só a seta, num alvo de 44 px; o texto fica para o leitor de tela */
html.modo-app .site-header [data-schedule-action="voltar"] {
  width: var(--app-toque); min-width: var(--app-toque); height: var(--app-toque); min-height: var(--app-toque);
  padding: 0; gap: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--app-texto);
  box-shadow: none; transform: none;
}
html.modo-app .site-header [data-schedule-action="voltar"]:hover { background: rgba(16, 24, 40, 0.06); color: var(--app-texto); transform: none; }
html.modo-app .site-header [data-schedule-action="voltar"]:active { background: rgba(16, 24, 40, 0.1); }
html.modo-app .site-header [data-schedule-action="voltar"] svg { width: 24px; height: 24px; }
html.modo-app .site-header [data-schedule-action="voltar"] > span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* [C] Topo: título grande, a frase, "Ver ofertas" em pílula larga e os selos numa
   fileira que rola de lado */
html.modo-app .loja-topo {
  padding: calc(var(--altura-header) + 20px) 0 20px;
  background: transparent;
}
html.modo-app .loja-topo .eyebrow { color: var(--app-teal); font-size: 12px; letter-spacing: 0.12em; }
html.modo-app .loja-topo .eyebrow::before { display: none; }
html.modo-app .loja-topo .display {
  margin-top: 8px;
  color: var(--app-texto);
  font: 700 var(--app-titulo-grande) / 1.12 var(--app-fonte); letter-spacing: var(--app-tracking-titulo);
}
html.modo-app .loja-topo .display em { font-style: normal; font-weight: 700; color: var(--app-teal); }
html.modo-app .loja-topo .caret { display: none; }
html.modo-app .loja-topo .lead { margin-top: 10px; color: var(--app-texto-2); font-size: var(--app-corpo); line-height: 1.5; }
html.modo-app .loja-topo__acoes { margin-top: 20px; }
html.modo-app .loja-topo__acoes .btn {
  width: 100%; min-height: var(--app-botao-altura);
  box-shadow: 0 10px 24px rgba(0, 101, 78, 0.22);
}
html.modo-app .loja-selos {
  flex-wrap: nowrap; gap: 8px; margin-top: 18px;
  margin-inline: calc((var(--respiro) + var(--app-seguro-esq)) * -1) calc((var(--respiro) + var(--app-seguro-dir)) * -1);
  padding-inline: calc(var(--respiro) + var(--app-seguro-esq)) calc(var(--respiro) + var(--app-seguro-dir));
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
html.modo-app .loja-selos::-webkit-scrollbar { display: none; }
html.modo-app .loja-selos .chip {
  flex: none; padding: 8px 14px;
  border: 0; background: var(--app-branco); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  color: var(--app-texto); font-size: 13px; white-space: nowrap;
}

/* botões da institucional no app: pílula, 52 px, pressionado = scale(.98) */
html.modo-app .btn { min-height: 52px; font-family: var(--app-fonte); font-size: 16px; }
html.modo-app .btn:hover { transform: none; }
html.modo-app .btn:active { transform: var(--app-pressionado); }
html.modo-app .btn--teal:active { background: var(--app-teal-700); }

/* [D] Barra da busca ativa: presa embaixo da barra de app, translúcida, numa linha
   que rola de lado */
html.modo-app .doctor-results-toolbar {
  border: 0;
  background: var(--app-barra-fundo);
  -webkit-backdrop-filter: var(--app-barra-blur); backdrop-filter: var(--app-barra-blur);
  box-shadow: 0 1px 0 var(--app-loja-hairline);
}
html.modo-app .doctor-results-toolbar-inner { padding-block: 10px; }
html.modo-app .doctor-active-chips {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc((var(--respiro) + var(--app-seguro-esq)) * -1) calc((var(--respiro) + var(--app-seguro-dir)) * -1);
  padding-inline: calc(var(--respiro) + var(--app-seguro-esq)) calc(var(--respiro) + var(--app-seguro-dir));
}
html.modo-app .doctor-active-chips::-webkit-scrollbar { display: none; }
/* 40 px no selo (só leitura); 44 px nos dois botões (Ajustar, Limpar pesquisa) */
html.modo-app :is(.doctor-chip, .doctor-chip-adjust, .doctor-chip-clear) { flex: none; min-height: 40px; font-size: 14px; }
html.modo-app :is(.doctor-chip-adjust, .doctor-chip-clear) { min-height: var(--app-toque); }
html.modo-app .doctor-chip { border: 0; background: var(--app-branco); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); }
html.modo-app #activeSpecialtyChip { border: 0; background: var(--app-teal-100); color: var(--app-teal-700); }
html.modo-app .doctor-chip-adjust { margin-left: 0; border-color: var(--app-teal); background: var(--app-teal); color: var(--app-branco); }
html.modo-app .doctor-chip-adjust:hover { background: var(--app-teal-700); border-color: var(--app-teal-700); }

/* [E] Lista e cartões de oferta */
html.modo-app .doctor-listing-page { padding: 20px 0 32px; background: transparent; }
html.modo-app .doctor-listing-title { color: var(--app-texto); font: 700 var(--app-titulo) / 1.2 var(--app-fonte); letter-spacing: -0.01em; }
html.modo-app .doctor-listing-count { color: var(--app-texto-2); font-size: 14px; }
html.modo-app .doctor-info-alert {
  margin-top: 14px; padding: 14px 16px;
  border-radius: 16px; background: var(--app-teal-50); color: var(--app-teal-700); font-size: 14px;
}
html.modo-app .doctor-cards-list { gap: 14px; margin-top: 16px; }
html.modo-app .doctor-cards-list > p {
  border: 0; border-radius: var(--app-raio-cartao); background: var(--app-branco); box-shadow: var(--app-sombra-cartao);
  color: var(--app-texto-2);
}
html.modo-app .doctor-card {
  border: 0; border-radius: var(--app-raio-cartao);
  background: var(--app-branco); box-shadow: var(--app-sombra-cartao);
}
html.modo-app .doctor-card:hover { box-shadow: var(--app-sombra-cartao); }
html.modo-app .doctor-card.is-destaque { box-shadow: 0 0 0 2px var(--app-teal), var(--app-sombra-cartao); }
html.modo-app .doctor-avatar { background: var(--app-teal-100); color: var(--app-teal-700); font-family: var(--app-fonte); font-weight: 700; }
html.modo-app .doctor-name-row h2 { color: var(--app-texto); font-family: var(--app-fonte); font-weight: 700; letter-spacing: -0.01em; }
html.modo-app .doctor-specialty { color: var(--app-texto-2); }
html.modo-app .doctor-clinic-name { color: var(--app-texto); }
html.modo-app .doctor-address-row { color: var(--app-texto-2); }
html.modo-app .doctor-price-card { border: 0; border-radius: 18px; background: var(--app-superficie); }
html.modo-app .doctor-price-old { border-top-color: var(--app-borda); }
html.modo-app .doctor-price-current strong { color: var(--app-texto); font-family: var(--app-fonte); font-weight: 700; letter-spacing: -0.02em; }
html.modo-app .doctor-price-current small { background: var(--app-teal-100); color: var(--app-teal-700); }
html.modo-app :is(.doctor-card-schedule-button, .voucher-card-secondary) {
  min-height: 52px; font-family: var(--app-fonte); font-size: 16px;
}
html.modo-app .doctor-card-schedule-button { box-shadow: none; }
html.modo-app .doctor-card-schedule-button.is-visible:hover:not(:disabled) { transform: none; }
html.modo-app :is(.doctor-card-schedule-button, .voucher-card-secondary):active:not(:disabled) { transform: var(--app-pressionado); }
html.modo-app .voucher-card-secondary { border-color: var(--app-borda); color: var(--app-texto); }
html.modo-app .doctor-schedule-area { border-top-color: var(--app-borda); }
html.modo-app .voucher-breakdown-item { border: 0; border-radius: 16px; background: var(--app-superficie); }
html.modo-app .voucher-breakdown-item strong { color: var(--app-texto); font-family: var(--app-fonte); font-weight: 700; }
html.modo-app .voucher-breakdown-item.is-total {
  background: linear-gradient(150deg, var(--app-teal-700) 0%, var(--app-teal-profundo) 100%);
}
html.modo-app .voucher-breakdown-item.is-total strong { color: #e6b93f; }
html.modo-app .voucher-contact { border-radius: 18px; background: var(--app-superficie); }
html.modo-app .voucher-contact-link { min-height: var(--app-toque); padding: 8px 16px; border-color: var(--app-borda); background: var(--app-branco); font-size: 14px; }
html.modo-app .voucher-contact-link.is-whatsapp { background: #e8f6ee; border-color: rgba(18, 140, 74, 0.35); }

/* [F] Modal de filtros (#scheduleModal, o .modal da institucional) e pós-compra
   (.voucher-result-*) viram FOLHAS no celular: encostam embaixo, largura cheia,
   raio 28 em cima, pegador, sobem em 300 ms, respeitam a safe-area. No desktop
   continuam o cartão centralizado. */
@keyframes app-loja-folha-sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes app-loja-folha-desce { from { transform: none; } to { transform: translateY(100%); } }
html.modo-app :is(.modal, .voucher-result-overlay, .cincare-modal-overlay) {
  background: rgba(14, 31, 51, 0.48);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.modo-app :is(.modal__caixa, .voucher-result-modal) {
  border: 0; background: var(--app-branco); box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
  --texto-2: var(--app-texto-2); --texto-3: var(--app-texto-3); --linha: var(--app-borda);
}
html.modo-app :is(.modal__titulo, .voucher-result-title) {
  color: var(--app-texto); font: 700 var(--app-titulo) / 1.25 var(--app-fonte); letter-spacing: -0.01em;
}
html.modo-app :is(.modal__corpo, .voucher-result-subtitle) { color: var(--app-texto-2); font-size: 15px; }
html.modo-app :is(.modal__fechar, .voucher-result-close) {
  width: var(--app-toque); height: var(--app-toque);
  border: 0; background: var(--app-superficie); color: var(--app-texto);
}
html.modo-app :is(.modal__fechar, .voucher-result-close):hover { background: var(--app-borda); color: var(--app-texto); }
/* campos do filtro: 52 px, raio 14 */
html.modo-app .campo > label { color: var(--app-texto); font-size: 14px; font-weight: 600; }
html.modo-app .campo :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  min-height: 52px; border-radius: var(--app-raio-campo); border-color: var(--app-borda); background-color: var(--app-branco);
}
html.modo-app .voucher-explainer { border: 0; border-radius: 16px; background: var(--app-teal-50); }
html.modo-app :is(.voucher-result-primary, .voucher-result-secondary) { min-height: 52px; font-family: var(--app-fonte); font-size: 16px; }
html.modo-app :is(.voucher-result-primary, .voucher-result-secondary):active { transform: var(--app-pressionado); }
html.modo-app .voucher-code-box { border-radius: 18px; background: linear-gradient(150deg, var(--app-teal-700) 0%, var(--app-teal-profundo) 100%); }

@media (max-width: 768px) {
  html.modo-app :is(.modal, .voucher-result-overlay) { align-items: flex-end; padding: 0; }
  html.modo-app :is(.modal__caixa, .voucher-result-modal) {
    width: 100%; max-width: none;
    max-height: calc(100vh - 24px - var(--app-seguro-topo));
    max-height: calc(100dvh - 24px - var(--app-seguro-topo));
    padding: 10px calc(var(--respiro) + var(--app-seguro-dir)) calc(24px + var(--app-seguro-base)) calc(var(--respiro) + var(--app-seguro-esq));
    border-radius: var(--app-raio-folha) var(--app-raio-folha) 0 0;
    box-shadow: var(--app-sombra-folha);
    animation: app-loja-folha-sobe 300ms var(--app-curva) both;
  }
  html.modo-app .modal.is-open .modal__caixa { animation: app-loja-folha-sobe 300ms var(--app-curva) both; }
  /* o pegador */
  html.modo-app :is(.modal__caixa, .voucher-result-modal)::before {
    content: ""; display: block;
    width: 40px; height: 5px; margin: 0 auto 18px;
    border-radius: 3px; background: var(--app-borda);
  }
  html.modo-app :is(.modal__fechar, .voucher-result-close) { top: 18px; right: calc(12px + var(--app-seguro-dir)); }
  html.modo-app :is(.modal__acoes, .voucher-result-actions) { flex-direction: column-reverse; gap: 10px; margin-top: 22px; }
  html.modo-app :is(.modal__acoes, .voucher-result-actions) > * { width: 100%; }
}

/* [G] Diálogos do utils.js (consentimento de saúde, CEP e número da nota fiscal,
   avisos) e o toast. A institucional os pinta com "body .x"; aqui, folha no
   celular, como na área. */
html.modo-app .cincare-modal-box {
  border: 0; background: var(--app-branco); box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
}
html.modo-app .cincare-modal-title { color: var(--app-texto); font: 700 var(--app-titulo) / 1.25 var(--app-fonte); letter-spacing: -0.01em; }
html.modo-app .cincare-modal-text { color: var(--app-texto-2); font-size: 16px; line-height: 1.5; }
html.modo-app .cincare-modal-btn {
  min-height: 52px; padding: 0 24px; border-radius: var(--app-raio-pilula);
  font: 600 16px/1.2 var(--app-fonte);
}
html.modo-app .cincare-modal-btn:active { transform: var(--app-pressionado); }
html.modo-app .cincare-modal-input { min-height: 52px; border-radius: var(--app-raio-campo); }
@media (max-width: 768px) {
  html.modo-app .cincare-modal-overlay { align-items: flex-end; padding: 0; }
  html.modo-app .cincare-modal-box {
    width: 100%; max-width: none;
    max-height: calc(100dvh - 24px - var(--app-seguro-topo)); overflow-y: auto; overscroll-behavior: contain;
    padding: 10px calc(var(--respiro) + var(--app-seguro-dir)) calc(24px + var(--app-seguro-base)) calc(var(--respiro) + var(--app-seguro-esq));
    border-radius: var(--app-raio-folha) var(--app-raio-folha) 0 0;
    box-shadow: var(--app-sombra-folha);
    animation: app-loja-folha-sobe 300ms var(--app-curva) both;
  }
  html.modo-app .cincare-modal-box::before {
    content: ""; display: block;
    width: 40px; height: 5px; margin: 0 auto 18px;
    border-radius: 3px; background: var(--app-borda);
  }
  html.modo-app .cincare-modal-overlay.is-closing .cincare-modal-box { animation: app-loja-folha-desce 180ms ease-in both; }
  html.modo-app .cincare-modal-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  html.modo-app .cincare-modal-btn { width: 100%; min-width: 0; }
}

/* [H] Rodapé: só o mínimo legal, claro e discreto. Ficam os links de Termos,
   Privacidade e FAQ ([A14d]) e a identificação do fornecedor ([A4]: nome
   empresarial, CNPJ e endereço, exigidos onde a venda acontece). Saem a marca e
   o texto de marketing, a navegação para a home, o contato (o e-mail já está no
   bloco do fornecedor), o copyright e o fio colorido. */
html.modo-app .site-footer {
  padding: 8px 0 calc(28px + var(--app-seguro-base));
  background: transparent; color: var(--app-texto-2);
  --texto-2: var(--app-texto-2); --linha: var(--app-borda);
}
html.modo-app .site-footer::after { display: none; }
html.modo-app :is(.site-footer__brand, .site-footer__bottom, .site-footer__title),
html.modo-app .site-footer__grid > :has(> nav[aria-label="Navegação do rodapé"]),
html.modo-app .site-footer__grid > :has(> .site-footer__contato) { display: none; }
html.modo-app .site-footer__grid { display: block; }
html.modo-app .site-footer__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px;
  font-size: 13px;
}
/* Termos, Privacidade e FAQ: alvo de toque de 44 px de altura (a linha cresce,
   o texto fica igual) */
html.modo-app .site-footer__links a {
  display: inline-flex; align-items: center; min-height: var(--app-toque);
  color: var(--app-texto-2); text-decoration: underline; text-decoration-color: var(--app-borda); text-underline-offset: 3px;
}
/* a identificação do fornecedor tem de ser de "fácil visualização" (Decreto
   7.962/2013): --app-texto-2 (≈ 5,3:1 na superfície) e 13 px, como no site —
   não o cinza de legenda (≈ 2,9:1, abaixo do AA) */
html.modo-app .site-footer__fornecedor {
  margin-top: 12px; padding-top: 0; border-top: 0;
  color: var(--app-texto-2); font-size: 13px; line-height: 1.7; text-align: center;
}
html.modo-app .site-footer__fornecedor strong { color: var(--app-texto-2); }
/* os e-mails são texto corrido (isentos dos 44 px): o padding de um <a> em linha
   alarga o toque sem mexer na linha (≈ 28 px, acima dos 24 px do WCAG 2.5.8) */
html.modo-app .site-footer__fornecedor a { padding-block: 6px; color: var(--app-texto-2); text-decoration-color: var(--app-borda); }

/* [I] Desktop (o app instalado no PC): a mesma barra de app, a vitrine numa
   coluna de leitura e o título grande maior */
@media (min-width: 1024px) {
  html.modo-app { --respiro: 40px; }
  html.modo-app .site-header__inner { padding-inline: calc(24px + var(--app-seguro-esq)) calc(40px + var(--app-seguro-dir)); }
  html.modo-app .loja-topo { padding-top: calc(var(--altura-header) + 32px); }
  html.modo-app .loja-topo .display { font-size: 40px; }
  html.modo-app .loja-topo__acoes .btn { width: auto; min-width: 260px; }
  html.modo-app .loja-selos { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* [J] Menos movimento */
@media (prefers-reduced-motion: reduce) {
  html.modo-app :is(.modal__caixa, .voucher-result-modal, .cincare-modal-box) { animation: none !important; }
  html.modo-app :is(.btn, .doctor-card-schedule-button, .voucher-card-secondary, .cincare-modal-btn):active { transform: none; }
}