/* =========================================================================
   BASE DO APP DA CINCARE (PWA, 23/10/2026) — src/shared/app/app.css

   O que é comum a toda tela aberta DENTRO do app: tokens (cores, tipo, forma,
   movimento, safe-area), o comportamento de toque e rolagem, e umas poucas peças
   que as telas do app repetem (botão em pílula, cartão, folha que sobe de baixo,
   barra de topo compacta).

   ⚠ TUDO aqui fica atrás de html.modo-app (a classe que o
     src/shared/app/modo-app.js põe no <html> antes da primeira pintura). A única
     exceção são as variáveis --app-* em :root, que sozinhas não pintam nada. Sem
     o modo app, esta folha não muda um pixel do site.

   QUEM CARREGA: as páginas que o app abre — src/pages/app/entrar.html, os logins
   de paciente, médico e clínica, recuperar senha, cadastro do paciente, a área do
   paciente e a loja —, DEPOIS das folhas da própria página (ela sobrescreve o
   que for de toque e rolagem) e ANTES das folhas *-app.css de cada tela
   (entrar.css, area-client-app.css, cad-new-schedule-app.css), que mandam no
   desenho. A home (index.html) NÃO carrega: com o modo app ela desvia para a
   entrada antes de pintar.

   Safe-area: env(safe-area-inset-*) só deixa de ser 0 com viewport-fit=cover, que
   o modo-app.js acrescenta à meta viewport quando o modo liga (na entrada ele
   já vem escrito). Com o manifest em portrait e a barra de status do iPhone em
   "default", na prática o que conta é a BASE (o indicador de início do iPhone,
   ~34px) — o topo fica 0 —, mas as peças abaixo respeitam os quatro lados.
   ========================================================================= */

:root {
  /* ---- cores (as da marca; base.css tem as mesmas com outros nomes) ---- */
  --app-teal: #00654e;
  --app-teal-700: #054e3d;
  --app-teal-500: #05856a;
  --app-teal-400: #1a9078;
  --app-teal-profundo: #043b2e;          /* boas-vindas, splash, theme_color do manifest */
  --app-teal-100: #dcf1ea;
  --app-teal-50: #eff9f5;
  --app-marinho: #13294b;
  --app-marinho-profundo: #0e1f33;
  --app-dourado: #d9a321;                 /* só detalhe: foco em fundo escuro, selo */
  --app-superficie: #f7f8fa;              /* fundo das telas claras */
  --app-branco: #ffffff;
  --app-texto: #1d2125;
  --app-texto-2: #5e6877;
  --app-texto-3: #8a94a3;
  --app-borda: #e4e7ec;
  --app-erro: #b02a37;
  --app-sucesso: #146c43;
  /* o fundo da boas-vindas e da tela "Sem conexão" do sw.js (mantenha os dois iguais) */
  --app-fundo-escuro:
    radial-gradient(80% 50% at 50% 0%, rgba(26, 144, 120, 0.35), transparent 70%),
    linear-gradient(165deg, #043b2e 0%, #0b3340 55%, #13294b 100%);

  /* ---- tipografia: Inter (Google Fonts nas páginas) com a do sistema por baixo ---- */
  --app-fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --app-titulo-grande: 32px;              /* 28–34, peso 700 */
  --app-titulo: 22px;
  --app-corpo: 16px;
  --app-legenda: 13px;
  --app-rotulo-aba: 11px;
  --app-tracking-titulo: -0.02em;

  /* ---- forma ---- */
  --app-respiro: 20px;                    /* margem lateral das telas (16 no celular pequeno) */
  --app-raio-cartao: 22px;
  --app-raio-folha: 28px;
  --app-raio-campo: 14px;
  --app-raio-pilula: 999px;
  --app-botao-altura: 54px;
  --app-toque: 44px;                      /* alvo de toque mínimo */
  --app-sombra-cartao: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.08);
  --app-sombra-folha: 0 -8px 40px rgba(16, 24, 40, 0.18);

  /* ---- movimento ---- */
  --app-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --app-duracao: 240ms;
  --app-pressionado: scale(0.98);

  /* ---- barras ---- */
  --app-cabecalho-altura: 56px;
  --app-tabbar-altura: 64px;              /* sem a safe-area; a barra soma a base */
  --app-barra-fundo: rgba(255, 255, 255, 0.86);
  --app-barra-blur: saturate(180%) blur(20px);

  /* ---- safe-area ---- */
  --app-seguro-topo: env(safe-area-inset-top, 0px);
  --app-seguro-base: env(safe-area-inset-bottom, 0px);
  --app-seguro-esq: env(safe-area-inset-left, 0px);
  --app-seguro-dir: env(safe-area-inset-right, 0px);
}

/* =========================================================================
   TOQUE, ROLAGEM E TEXTO
   ========================================================================= */

html.modo-app {
  -webkit-tap-highlight-color: transparent;  /* sem o clarão azul/cinza do toque */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* contido: sem "puxar para recarregar" e sem arrastar a página de trás; o
     quique nativo do fim da rolagem continua */
  overscroll-behavior-y: contain;
}

html.modo-app body {
  overscroll-behavior-y: contain;
  font-family: var(--app-fonte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cromos (botões, abas, barras) não selecionam texto nem abrem a lupa/menu do
   toque longo. ⚠ Sem <label>: no iOS, user-select:none num ancestral de <input>
   já impediu de digitar no campo. Os campos ficam sempre selecionáveis. */
html.modo-app :is(button, [role="button"], [role="tab"], [role="menuitem"], summary, nav, .app-cromo) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.modo-app :is(input, textarea, select, [contenteditable="true"]) {
  -webkit-user-select: text;
  user-select: text;
}
html.modo-app img { -webkit-user-drag: none; }

/* O iPhone dá zoom na tela ao focar um campo com fonte menor que 16px — e não
   desfaz. No app isso é a tela "saindo do lugar" a cada toque. */
html.modo-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  font-size: max(16px, 1em);
}

/* Os avisos (Toast do src/shared/utils.js) sobem acima do indicador de início.
   A tela com barra embaixo soma a altura dela em --app-toast-folga. */
html.modo-app #cincare-toast-container {
  margin-bottom: calc(var(--app-seguro-base) + var(--app-toast-folga, 0px));
}

/* =========================================================================
   TELAS DE ACESSO ABERTAS PELO APP (família auth-asaas.css: logins de médico e
   clínica, recuperar senha, cadastro do paciente) — elas não têm folha *-app.css
   própria: o que recebem do app é isto.
   ========================================================================= */

/* "Voltar" com alvo de toque de 44px, sem mudar onde o texto fica */
html.modo-app .login-back-button {
  min-height: var(--app-toque);
  margin-top: -12px;
  margin-bottom: 16px;
}
/* o rodapé legal ([A14d]) acima do indicador de início */
html.modo-app .rodape-legal-global {
  padding-bottom: calc(24px + var(--app-seguro-base));
}
/* Alvos de toque de 44px sem mexer no desenho: uma área invisível (::after) em
   volta do alvo, que o toque acerta e o layout não vê.
   - o "Voltar" do cadastro do paciente (o .button-secondary do topo, 40×40);
   - o "Esqueceu sua senha?" dos logins de médico e clínica (texto de 21px).
     Medido a 360, 390 e 1440: o campo de senha acaba 10px acima do link e o
     Turnstile começa 24px abaixo; a área cresce 8px para cima e 15px para baixo,
     sem encostar em nenhum dos dois (2px e 9px de folga). */
html.modo-app .layout-header .button-secondary,
html.modo-app .forgot-password { position: relative; }
html.modo-app .layout-header .button-secondary::after,
html.modo-app .forgot-password::after {
  content: "";
  position: absolute;
  inset: -3px;   /* conta a partir da borda de 1px: 38 + 2×3 = 44 */
}
html.modo-app .forgot-password::after { inset: -8px -8px -15px; }

/* =========================================================================
   PEÇAS COMUNS (opcionais: as telas usam se quiserem, sempre com estas classes)
   ========================================================================= */

/* Estado pressionado de qualquer coisa tocável */
html.modo-app .app-pressionavel {
  transition: transform var(--app-duracao) var(--app-curva);
}
html.modo-app .app-pressionavel:active { transform: var(--app-pressionado); }

/* Botão em pílula: 54px, largura cheia, perto do polegar.
   .app-botao--secundario: contorno; .app-botao--claro: branco sobre fundo escuro;
   .app-botao--fantasma: só texto. */
html.modo-app .app-botao {
  display: inline-flex;
  width: 100%;
  min-height: var(--app-botao-altura);
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--app-raio-pilula);
  background: var(--app-teal);
  color: var(--app-branco);
  font: 600 var(--app-corpo) / 1.2 var(--app-fonte);
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--app-duracao) var(--app-curva), background-color var(--app-duracao) var(--app-curva);
}
html.modo-app .app-botao:active { transform: var(--app-pressionado); background: var(--app-teal-700); }
html.modo-app .app-botao:focus-visible { outline: 3px solid var(--app-teal-400); outline-offset: 3px; }
html.modo-app .app-botao:disabled,
html.modo-app .app-botao[aria-disabled="true"] { opacity: 0.55; cursor: default; transform: none; }
html.modo-app .app-botao svg { width: 20px; height: 20px; flex: none; }
html.modo-app .app-botao--secundario { background: var(--app-branco); border-color: var(--app-borda); color: var(--app-teal); }
html.modo-app .app-botao--secundario:active { background: var(--app-teal-50); }
html.modo-app .app-botao--claro { background: var(--app-branco); color: var(--app-teal-profundo); }
html.modo-app .app-botao--claro:active { background: var(--app-teal-100); }
html.modo-app .app-botao--claro:focus-visible { outline-color: var(--app-dourado); }
html.modo-app .app-botao--fantasma { background: transparent; color: var(--app-teal); }
html.modo-app .app-botao--fantasma:active { background: rgba(0, 101, 78, 0.08); }

/* Cartão */
html.modo-app .app-cartao {
  border-radius: var(--app-raio-cartao);
  background: var(--app-branco);
  box-shadow: var(--app-sombra-cartao);
}

/* Título grande de tela */
html.modo-app .app-titulo-grande {
  margin: 0;
  color: var(--app-texto);
  font-size: var(--app-titulo-grande);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--app-tracking-titulo);
}

/* Barra de topo compacta: título da tela, ação à esquerda (voltar) e à direita
   (avatar). Grudada no topo, branca translúcida. */
html.modo-app .app-barra-topo {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  min-height: calc(var(--app-cabecalho-altura) + var(--app-seguro-topo));
  padding: var(--app-seguro-topo) calc(12px + var(--app-seguro-dir)) 0 calc(12px + var(--app-seguro-esq));
  align-items: center;
  gap: 8px;
  background: var(--app-barra-fundo);
  -webkit-backdrop-filter: var(--app-barra-blur);
  backdrop-filter: var(--app-barra-blur);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06);
}
html.modo-app .app-barra-topo__titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--app-texto);
  font-size: 17px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.modo-app .app-barra-topo__acao {
  display: inline-flex;
  min-width: var(--app-toque);
  min-height: var(--app-toque);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--app-raio-pilula);
  background: transparent;
  color: var(--app-texto);
  text-decoration: none;
  cursor: pointer;
}
html.modo-app .app-barra-topo__acao:active { background: rgba(16, 24, 40, 0.06); }

/* Folha que sobe de baixo (bottom sheet), com pegador. No desktop vira cartão
   centralizado. Estado: .is-aberta na folha e no véu (o JS de cada tela troca;
   role="dialog" + aria-modal, Esc fecha e o foco volta ficam com ela). */
html.modo-app .app-veu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(14, 31, 51, 0.48);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--app-duracao) var(--app-curva), visibility 0s linear var(--app-duracao);
}
html.modo-app .app-veu.is-aberta {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--app-duracao) var(--app-curva);
}
html.modo-app .app-folha {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  max-height: calc(100vh - 24px - var(--app-seguro-topo));
  max-height: calc(100dvh - 24px - var(--app-seguro-topo));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px calc(var(--app-respiro) + var(--app-seguro-dir)) calc(24px + var(--app-seguro-base)) calc(var(--app-respiro) + var(--app-seguro-esq));
  border-radius: var(--app-raio-folha) var(--app-raio-folha) 0 0;
  background: var(--app-branco);
  box-shadow: var(--app-sombra-folha);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 300ms var(--app-curva), visibility 0s linear 300ms;
}
html.modo-app .app-folha.is-aberta {
  transform: none;
  visibility: visible;
  transition: transform 300ms var(--app-curva);
}
html.modo-app .app-folha__pegador {
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto 16px;
  border-radius: 3px;
  background: var(--app-borda);
}
@media (min-width: 769px) {
  html.modo-app .app-folha {
    left: 50%;
    right: auto;
    bottom: 50%;
    width: min(440px, calc(100vw - 48px));
    max-height: calc(100vh - 96px);
    padding: 28px;
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
    transform: translate(-50%, 50%) scale(0.96);
    opacity: 0;
    transition: transform var(--app-duracao) var(--app-curva), opacity var(--app-duracao) var(--app-curva), visibility 0s linear var(--app-duracao);
  }
  html.modo-app .app-folha.is-aberta {
    transform: translate(-50%, 50%);
    opacity: 1;
    transition: transform var(--app-duracao) var(--app-curva), opacity var(--app-duracao) var(--app-curva);
  }
  html.modo-app .app-folha__pegador { display: none; }
}

/* Utilitários de safe-area para o que for fixo nas bordas */
html.modo-app .app-seguro-topo { padding-top: var(--app-seguro-topo); }
html.modo-app .app-seguro-base { padding-bottom: var(--app-seguro-base); }

@media (prefers-reduced-motion: reduce) {
  html.modo-app :is(.app-pressionavel, .app-botao, .app-veu, .app-folha) {
    transition-duration: 0s !important;
  }
  html.modo-app :is(.app-pressionavel, .app-botao):active { transform: none; }
}