@import url('tokens.css');

/* style.css — Ficha de Interesse InibioPRO.
   Consome tokens.css (STYLE-LOCK v1.0). NENHUM valor de cor, raio,
   sombra, tipo ou espaçamento é recopiado aqui: tudo vem de var(--token).
   Mobile-first conforme style-lock §3. Acento único: dourado. */

/* ---------------- layout base ---------------- */

html { -webkit-text-size-adjust: 100%; }

/* Reset de margem com especificidade ZERO (:where), para que a pilha vertical
   `.tela > * + *` continue vencendo a cascata sobre as classes de tipografia. */
:where(p, h1, h2, h3, ul, ol, figure, dl, dd) { margin: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-attachment: fixed;
}

.skip {
  position: absolute;
  left: var(--space-16);
  top: calc(-1 * var(--touch-comfort));
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-8) var(--space-14);
  background: var(--surface);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-control);
  color: var(--gold-light);
  text-decoration: none;
  transition: top var(--motion-fast) var(--easing);
}
.skip:focus { top: var(--space-8); }

.coluna {
  flex: 1;
  width: 100%;
  padding: var(--space-24) var(--gutter-mobile) var(--space-34);
}

.tela { display: block; }
/* Janela sem toque logo depois de trocar de tela (ver script.js). */
#app.is-trocando { pointer-events: none; }
.tela > * + * { margin-top: var(--space-16); }

::selection { background: var(--hair-gold-selected); color: var(--btn-primary-text); }

/* ---------------- barra de progresso (sem número) ---------------- */

.progresso-faixa {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--space-14) var(--gutter-mobile) var(--space-10);
  background: var(--bg);
  border-bottom: 1px solid var(--hair-faint);
}
.progresso {
  height: 5px;
  border-radius: var(--radius-bar);
  background: var(--fill-10);
  overflow: hidden;
}
.progresso[hidden] { display: none; }
.progresso-rotulo {
  font-size: var(--text-micro);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--gold);
}
.progresso-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-progress);
  transition: width var(--motion-mid) var(--easing);
}

/* ---------------- tipografia de tela ---------------- */

.eyebrow {
  font-size: var(--text-micro);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow + .tela-titulo { margin-top: var(--space-12); }

.tela-titulo {
  font-family: var(--font-display);
  font-size: clamp(25px, 6vw, 34px);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: var(--weight-display);
  color: var(--text);
  text-wrap: balance;
}

.tela-apoio {
  margin-top: var(--space-5);
  font-size: var(--text-body);
  color: var(--text-summary);
}

.corpo {
  font-size: var(--text-item);
  line-height: var(--body-lh);
  color: var(--text-on-card);
}
/* F-209: o 600 vem do token do eyebrow — é o único peso 600 do sistema. */
.corpo strong { color: var(--text); font-weight: var(--weight-eyebrow); }

.nota-confianca,
.nota-campo {
  font-size: var(--text-small);
  color: var(--muted);
}

/* Nota pequena abaixo do botão da T-contato (roteiro v0.3.1 §6). */
.nota-apos-botao {
  /* Fica logo abaixo do bloco .acoes, que já traz o próprio respiro. */
  margin-top: var(--space-10);
  font-size: var(--text-small);
  color: var(--muted);
  text-align: center;
}

/* Permissão explícita sob o campo de texto livre (roteiro §3, A3). */
.permissao-campo {
  font-size: var(--text-small);
  color: var(--text-link-soft);
}

.assinatura {
  font-size: var(--text-support);
  color: var(--text-emphasis);
}

/* ---------------- selos de esforço da T0 (roteiro §2, A1) ---------------- */

.selos-esforco {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  padding: 0;
  list-style: none;
}
.selos-esforco li {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--tag-border);
  border-radius: var(--radius-chip);
  background: var(--tag-bg);
  font-size: var(--text-small);
  color: var(--tag-text);
}
.selo-glifo { font-size: var(--text-support); line-height: 1; }

/* ---------------- retrato da T0 — foto full-bleed (redesign 01/10) -------------
   Decisão do Samuel: a foto COBRE o card inteiro ("apenas no círculo fica muito
   foto de perfil"). O card tem altura FIXA (--retrato-h) nos dois estados, então
   nada se move quando assets/tatiana.webp chegar.
   Altura 200px (era 180px), medida em 390x844 com a T0 real: a 200px o botão
   "Quero responder" termina em y=829 (15px de folga na dobra); a 210px a folga cai
   para 5px e a 220px o botão sai 5px da dobra. 200 dá presença sem empurrar a copy.
   Estado vazio: o visual anterior, moldura circular com o glifo serifado. */

.retrato {
  --retrato-h: 200px;
  position: relative;
  display: grid;
  place-items: center;
  height: var(--retrato-h);
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--hair-gold);
  background: var(--grad-card-focus);
  box-shadow: var(--shadow-focus);
}
.retrato-moldura {
  display: grid;
  place-items: center;
  width: calc(var(--touch-min) * 3);
  height: calc(var(--touch-min) * 3);
  overflow: hidden;
  border: 1px solid var(--hair-gold-mark);
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  box-shadow: var(--shadow-emboss);
}
/* Sem o arquivo: o glifo serifado do painel (.hub-symbol), desenhado em CSS
   para não entrar no texto da tela. Nunca uma foto provisória de banco. */
.retrato-moldura.is-vazia::before {
  content: 'T';
  font-family: var(--font-serif);
  font-size: 48px;
  color: var(--gold-light);
}

/* Com a foto: a moldura sai e a imagem ocupa o card de borda a borda. A borda
   hairline e o raio continuam no .retrato (overflow:hidden recorta a foto no raio).
   object-position 50% 20%, ajustado no render real da foto (01/10): em 390px o card
   (358x200) tem quase a proporção da foto 16:9 e o corte é de ~2px; na coluna
   máxima (512x200) o cover corta ~90px na vertical e 20% mantém a cabeça inteira,
   com o queixo acima do início do scrim (30% encostava o cabelo na borda). */
.retrato.is-preenchido .retrato-moldura { display: none; }
.retrato-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
/* Scrim: a base da foto se dissolve em --bg, o mesmo fundo da página, para a
   foto "assentar" no tema escuro e o sobretítulo logo abaixo respirar. Só tokens:
   começa transparente na metade do card e termina no --bg da página. */
.retrato.is-preenchido::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--bg));
  pointer-events: none;
}

/* ---------------- alternativas ---------------- */

.alternativas {
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-22);
}

.alternativa {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-16) var(--space-17);
  text-align: left;
  background: var(--grad-card-neutral);
  border: 1px solid var(--hair-card);
  border-radius: var(--radius-node-mobile);
  box-shadow: var(--shadow-card);
  color: var(--text);
  transition: border-color var(--motion-fast) var(--easing),
              box-shadow var(--motion-fast) var(--easing);
}
.alternativa:hover { border-color: var(--hair-gold-hover); }
.alternativa:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset-md); }
.alternativa.is-selecionada {
  border-color: var(--hair-gold-selected);
  box-shadow: var(--shadow-selected);
}
.alternativa-corpo { display: grid; gap: var(--space-3); }
.alternativa-texto {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-display);
  letter-spacing: var(--text-h3-ls);
  line-height: 1.35;
}

/* marcador de múltipla seleção (herda .task-check do painel) */
.marcador {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--hair-gold-check);
  border-radius: var(--radius-check);
  background: var(--fill-06);
  position: relative;
}
.alternativa.is-selecionada .marcador {
  background: var(--gold);
  border-color: var(--gold-light);
}
.alternativa.is-selecionada .marcador::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 9px;
  border: solid var(--btn-primary-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* resposta de encaminhamento (P4 = uso_saude) */
.encaminhamento {
  padding: var(--space-13) var(--space-14);
  border-left: var(--seal-border-left);
  background: var(--seal-bg);
  font-size: var(--text-support);
  line-height: 1.5;
  color: var(--text-emphasis);
}

/* ---------------- T-alinhamento (roteiro §7) ---------------- */

.confirmacao {
  padding: var(--space-16) var(--space-17);
  border: 1px solid var(--hair);
  border-radius: var(--radius-node-mobile);
  background: var(--fill-05);
}
.confirmacao + .confirmacao { margin-top: var(--space-14); }
.confirmacao-pergunta {
  font-size: var(--text-item);
  line-height: 1.5;
  color: var(--text-list);
}
.confirmacao .alternativas { margin-top: var(--space-14); }

/* ---------------- botões ---------------- */

.acoes {
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-24);
  justify-items: stretch;
}

.btn {
  min-height: var(--touch-min);
  padding: var(--space-12) var(--space-18);
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: var(--text-item);
  letter-spacing: var(--text-h3-ls);
}
/* F-209: o peso de display fica nos botões sólidos; o .btn-link herda o peso
   normal do corpo, em vez de recopiar um literal 400. */
.btn-primario, .btn-secundario { font-weight: var(--weight-display); }
.btn-primario {
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow);
}
.btn-secundario {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}
.btn-link {
  background: none;
  border: 0;
  color: var(--btn-link-text);
  font-size: var(--text-body);
  justify-self: center;
}
.btn-voltar { justify-self: start; padding-left: 0; }
.btn[aria-disabled="true"] { opacity: var(--disabled-opacity); }
/* Link solto fora do bloco .acoes (ex.: "O número está errado? Corrigir"). */
.tela > .btn-link { padding-left: 0; text-align: left; }
/* O <main> recebe foco programático a cada troca de tela (para leitores de
   tela); o anel dourado ali seria ruído visual, não indicação de teclado. */
#conteudo:focus, #conteudo:focus-visible { outline: none; }
.acoes-voltar { margin-top: var(--space-16); }

/* ---------------- campos ---------------- */

.formulario { display: grid; gap: var(--space-18); margin-top: var(--space-22); }
.campo-bloco { display: grid; gap: var(--space-6); }

.campo-rotulo {
  font-size: var(--text-small);
  color: var(--text-key);
}

.campo {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-12) var(--space-16);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  color: var(--field-text);
  font-size: var(--text-item);
}
.campo:hover { border-color: var(--field-border-hover); }
.campo:focus-visible {
  border-color: var(--field-border-focus);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset-sm);
}
.campo::placeholder { color: var(--field-placeholder); }
.campo.is-erro { border-color: var(--field-border-error); background: var(--field-bg-error); }
.campo-numerico { font-variant-numeric: tabular-nums; }

.campo-texto {
  min-height: 120px;
  padding: var(--field-padding);
  line-height: var(--body-lh);
  resize: vertical;
}

.bloco-texto-livre { display: grid; gap: var(--space-6); margin-top: var(--space-22); }

.contador {
  justify-self: end;
  font-size: var(--text-small);
  color: var(--text-count);
  font-variant-numeric: tabular-nums;
}
.contador.is-limite { color: var(--danger); }

.msg-erro {
  margin: 0;
  font-size: var(--text-small);
  color: var(--danger);
}

/* consentimento */
.consentimento { display: grid; gap: var(--space-6); }
.consentimento-linha {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  min-height: var(--touch-min);
  padding: var(--space-8) 0;
  cursor: pointer;
}
.check {
  flex: 0 0 auto;
  appearance: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  border: 1px solid var(--hair-gold-check);
  border-radius: var(--radius-check);
  background: var(--fill-06);
  position: relative;
  cursor: pointer;
}
.check:checked { background: var(--gold); border-color: var(--gold-light); }
.check:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 9px;
  border: solid var(--btn-primary-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset-sm); }
.check.is-erro { border-color: var(--danger); }
.consentimento-texto {
  font-size: var(--text-support);
  line-height: 1.45;
  color: var(--text-list);
}
.consentimento-texto strong { color: var(--text); }

.privacidade {
  margin: var(--space-16) 0 0;
  font-size: var(--text-micro);
  line-height: 1.8;
  color: var(--text-footer);
}

/* ---------------- T-ponte ---------------- */

.ponte-abertura {
  margin: 0 0 var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--hair-strong);
  font-size: var(--text-support);
  color: var(--gold-light);
}
.ponte {
  padding: var(--space-13) var(--space-14);
  border-left: var(--seal-border-left);
  background: var(--seal-bg);
}
.ponte .corpo { color: var(--text-emphasis); }

/* ---------------- etiqueta ----------------
   As telas da v0.4 (T-oferta, bilhete, linha do tempo) estão em telas.css. */

.etiqueta {
  flex: 0 0 auto;
  padding: 5px var(--space-8);
  font-size: var(--text-micro);
  border: 1px solid var(--tag-border);
  border-radius: var(--radius-chip);
  background: var(--tag-bg);
  color: var(--tag-text);
}
.etiqueta.is-pendente { color: var(--tag-text-pending); border-style: dashed; }

/* ---------------- estados de envio ---------------- */

.status-envio:empty { display: none; }

.estado-erro {
  padding: var(--space-20);
  color: var(--danger);
  font-size: var(--text-body);
}
.btn-tentar {
  display: block;
  margin-top: 15px;
  min-height: var(--touch-min);
  padding: var(--space-8) var(--space-14);
  border-radius: var(--radius-check);
  background: var(--surface-danger);
  color: var(--danger);
}
.estado-offline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-18);
  border: 1px solid var(--hair);
  border-radius: var(--radius-control);
  background: var(--fill-05);
  font-size: var(--text-body);
  color: var(--text-list);
}
.estado-offline p { margin: 0; }
.ponto-aviso {
  flex: 0 0 auto;
  width: 5px; height: 5px;
  margin-top: 7px;
  border-radius: var(--radius-pill);
  background: var(--bullet-open);
}
.aviso-neutro {
  margin: 0;
  font-size: var(--text-small);
  color: var(--text-node-status);
}

/* ---------------- número em destaque ---------------- */

/* Um telefone nunca quebra no meio da linha. */
.valor { color: var(--text-value); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- rodapé do app ---------------- */

.rodape-app {
  padding: var(--space-16) var(--gutter-mobile) var(--space-24);
  border-top: 1px solid var(--hair-faintest);
  font-size: var(--text-micro);
  color: var(--text-footer);
  text-align: center;
  user-select: none;
}
.rodape-app p { margin: 0; }

/* ---------------- painel de validação (modo debug) ---------------- */

#painel-debug[hidden] { display: none; }

/* F-202 — o contêiner NUNCA recebe toque: tudo que estiver atrás dele (CTA
   inclusive) continua clicável. Só a pílula e o painel em si são interativos. */
#painel-debug { pointer-events: none; }
#painel-debug > * { pointer-events: auto; }

/* Respiro no fim da página do tamanho da pílula, para ela não pousar sobre
   nenhum conteúdo quando a página estiver rolada até o fim. */
body.debug-ligado { padding-bottom: var(--touch-comfort); }

/* Estado recolhido: pílula pequena no canto, com o score de relance. */
.painel-debug-pilula {
  position: fixed;
  right: var(--space-10);
  bottom: var(--space-10);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--touch-min);
  padding: var(--space-8) var(--space-14);
  background: var(--surface-dialog);
  border: 1px solid var(--hair-gold-dialog);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-dialog);
  font-size: var(--text-small);
  color: var(--text-inset);
}
.pilula-marca {
  font-size: var(--text-micro);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--gold);
}
.pilula-score { font-variant-numeric: tabular-nums; color: var(--text-value); }

.painel-debug {
  position: fixed;
  right: var(--space-10);
  bottom: var(--space-10);
  z-index: 40;
  width: min(340px, calc(100vw - var(--space-20)));
  max-height: 60vh;
  overflow: auto;
  padding: var(--space-13) var(--space-14);
  background: var(--surface-dialog);
  border: 1px solid var(--hair-gold-dialog);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-dialog);
  font-size: var(--text-small);
  color: var(--text-inset);
}
.painel-debug h2 {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-support);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--gold);
}
.painel-debug dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5) var(--space-10);
  margin: 0 0 var(--space-10);
}
.painel-debug dt { color: var(--text-key); }
.painel-debug dd { margin: 0; color: var(--text-value); font-variant-numeric: tabular-nums; }
.painel-debug pre {
  margin: 0;
  padding: var(--space-10);
  max-height: 34vh;
  overflow: auto;
  background: var(--surface-inset);
  border-radius: var(--radius-inset);
  font-size: var(--text-nano);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-inset);
}
.painel-debug-acoes { display: flex; gap: var(--space-8); margin-top: var(--space-10); flex-wrap: wrap; }
.painel-debug-acoes button {
  min-height: var(--touch-min);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--hair);
  border-radius: var(--radius-control);
  background: var(--fill-08);
  color: var(--text-control);
  font-size: var(--text-small);
}

/* ---------------- breakpoints (style-lock §3.3) ---------------- */

@media (min-width: 481px) {
  .coluna, .progresso-faixa, .rodape-app {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }
  .coluna, .progresso-faixa > .progresso, .rodape-app p { max-width: 560px; }
  .coluna { margin: 0 auto; }
  .progresso-faixa > .progresso { margin: 0 auto; }
  .rodape-app p { margin: 0 auto; }
}

@media (min-width: 760px) {
  .corpo { font-size: var(--text-body); }
  .tela-apoio { font-size: var(--text-support); }
  .alternativa { border-radius: var(--radius-node); }
  .acoes { justify-items: start; grid-auto-flow: row; }
  .nota-apos-botao { text-align: left; }
  .btn-primario { min-width: 240px; }
}

/* scrollbar discreta (detalhe de acabamento, sem cor nova) */
* { scrollbar-width: thin; scrollbar-color: var(--hair-card) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--hair-card); border-radius: var(--radius-bar); }
::-webkit-scrollbar-track { background: transparent; }