@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('tokens.css');

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--cm-font);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body {
  background: var(--cm-totem-bg);
  overflow: hidden;
  color: var(--cm-ink);
  position: relative;
}

.tela {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  padding: var(--cm-space-6);
  text-align: center;
  opacity: 0;
  overflow-y: auto;
}
.tela.ativa { display: flex; opacity: 1; }
#tela-final.ativa { justify-content: center; }
#tela-selecao.ativa { justify-content: flex-start; }
/* Cabecalho da pergunta e fixed/overlay (#barraTopo) - reserva espaco no topo
   para o conteudo nao ficar por baixo dele (altura do logo grande + progresso). */
#tela-pergunta.ativa { justify-content: flex-start; padding-top: 250px; }

/* ---------- Cabecalho (logo horizontal oficial + "Feedback") ---------- */
.cm-header-linha {
  display: flex; align-items: center; gap: var(--cm-space-4);
  width: 100%; max-width: 1040px; padding-bottom: var(--cm-space-4);
  border-bottom: 3px solid var(--cm-gold);
  margin: 0 auto var(--cm-space-5);
}
.cm-header-logo { height: 108px; width: auto; display: block; object-fit: contain; }
.cm-header-divisor { width: 1px; align-self: stretch; background: var(--cm-border); min-height: 60px; }
.cm-header-textos { text-align: left; }
.cm-header-titulo { font-size: var(--cm-fs-xl); font-weight: 800; color: var(--cm-gold-dark); line-height: 1.1; }
.cm-header-subtitulo { font-size: var(--cm-fs-sm); color: var(--cm-ink-muted); font-weight: 500; margin-top: 2px; }

.cm-header-linha-selecao { margin-top: var(--cm-space-2); }

/* ---------- Tela de selecao ---------- */
h1.titulo { font-size: var(--cm-fs-2xl); color: var(--cm-ink); margin: var(--cm-space-4) 0 var(--cm-space-2); font-weight: 800; }
p.subtitulo { font-size: var(--cm-fs-md); color: var(--cm-ink-soft); margin: 0 0 var(--cm-space-7); }

/* Grade de 3 colunas iguais: largura identica (1fr), altura identica
   (align-items: stretch, padrao do grid) e mesmo espacamento entre elas.
   O botao e empurrado para a base de cada card (margin-top: auto), entao os
   tres "SELECIONAR" ficam sempre na mesma linha, mesmo que o nome ou a
   descricao de uma ilha ocupe mais linhas que as outras. */
.cards-ilhas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cm-space-5);
  width: 100%; max-width: 1040px; margin: 0 auto;
  align-items: stretch; justify-items: stretch;
}
.card-ilha {
  background: var(--cm-surface); border-radius: var(--cm-radius-xl); padding: 36px 28px 28px;
  box-shadow: var(--cm-shadow-2);
  border: 1px solid var(--cm-border);
  display: flex; flex-direction: column; align-items: center; gap: var(--cm-space-3);
  height: 100%;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: box-shadow var(--cm-dur-base) var(--cm-ease-out-expo),
              transform var(--cm-dur-base) var(--cm-ease-spring);
}
.card-ilha.cm-stagger-in {
  animation: cmCardIn var(--cm-dur-slow) var(--cm-ease-out-expo) forwards;
}
@keyframes cmCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.card-ilha:hover { box-shadow: var(--cm-shadow-3); transform: translateY(-4px) scale(1.01); }
.card-ilha:active,
.card-ilha.pressionado { transform: scale(0.97); box-shadow: var(--cm-shadow-1); }

/* Icone dentro de um selo circular azul-claro: da nitidez e hierarquia sem
   depender de emoji (esta tela nao tem carinhas nem pinos). */
.card-ilha .selo-icone {
  width: 72px; height: 72px; border-radius: 50%; flex: 0 0 72px;
  background: var(--cm-blue-suave, rgba(44, 143, 191, 0.10));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--cm-space-2);
}
.icone-tablet { width: 34px; height: 34px; color: var(--cm-blue); display: block; }
/* min-height de 2 linhas: nomes de uma linha e de duas linhas ocupam o mesmo
   espaco, entao a descricao e o botao ficam na mesma altura nos tres cards. */
.card-ilha h3 {
  margin: 0; font-size: var(--cm-fs-lg); color: var(--cm-ink); font-weight: 700;
  line-height: 1.2; min-height: calc(var(--cm-fs-lg) * 1.2 * 2);
  display: flex; align-items: center; justify-content: center;
}
/* Area de descricao com altura fixa: o texto de cada ilha varia, mas o espaco
   reservado nao - e o que mantem o bloco inferior alinhado entre os cards. */
.card-ilha p {
  margin: 0; font-size: var(--cm-fs-sm); color: var(--cm-ink-muted);
  min-height: 44px; line-height: 1.4;
  display: flex; align-items: center; justify-content: center;
}

.btn-selecionar {
  position: relative; overflow: hidden;
  margin-top: auto; width: 100%;
  min-height: 64px; border: none; border-radius: var(--cm-radius-md);
  background: var(--cm-blue); color: #fff; font-size: var(--cm-fs-md); font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(44, 143, 191, 0.35);
  transition: transform var(--cm-dur-fast) var(--cm-ease-spring), background var(--cm-dur-fast) var(--cm-ease-smooth);
}
.btn-selecionar::before { content: '→ '; }
.btn-selecionar:hover { background: var(--cm-blue-dark); }
.btn-selecionar:active { background: var(--cm-blue-dark); transform: scale(0.96); box-shadow: 0 4px 12px rgba(44, 143, 191, 0.30); }
.btn-selecionar:focus-visible { outline: 3px solid var(--cm-gold); outline-offset: 3px; }

/* ---------- Barra de progresso ---------- */
.barra-topo {
  position: fixed; top: 0; left: 0; right: 0; padding: var(--cm-space-5) 28px 0;
  display: flex; flex-direction: column; align-items: center;
  background: var(--cm-totem-bg);
}
.barra-topo .cm-header-linha { margin-bottom: var(--cm-space-4); }
.progresso-bolinhas { display: flex; align-items: center; gap: 0; margin-bottom: var(--cm-space-5); }
.bolinha {
  position: relative; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; background: #fff;
  border: 2px solid var(--cm-border); display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--cm-ink-muted); font-weight: 700;
  transition: background var(--cm-dur-base) var(--cm-ease-out-expo),
              border-color var(--cm-dur-base) var(--cm-ease-out-expo),
              transform var(--cm-dur-base) var(--cm-ease-spring);
}
.bolinha:not(:first-child) { margin-left: 26px; }
.bolinha::before {
  content: ''; position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 2px; background: var(--cm-border);
}
.bolinha:first-child::before { display: none; }
.bolinha.respondida,
.bolinha.atual { background: var(--cm-v5); border-color: var(--cm-v5); color: #fff; }
.bolinha.respondida::before,
.bolinha.atual::before { background: var(--cm-v5); }
.bolinha.atual { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(46, 158, 82, 0.25); }

/* ---------- Tela de pergunta ---------- */
.pergunta-conteudo { display: flex; flex-direction: column; align-items: center; width: 100%; }
.pergunta-texto { font-size: var(--cm-fs-xl); color: var(--cm-ink); max-width: 920px; margin: 0 0 var(--cm-space-6); font-weight: 700; }

.escala {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
  align-items: flex-start; /* mesma linha de base para os 5 */
}
.opcao-wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--cm-space-2);
  flex: 0 0 auto; /* nunca deixa o flex esticar/encolher um emoji mais que outro */
  opacity: 0; transform: translateY(22px) scale(0.94);
}
.opcao-wrap.cm-stagger-in {
  animation: cmOpcaoIn var(--cm-dur-slow) var(--cm-ease-out-expo) forwards;
}
@keyframes cmOpcaoIn {
  from { opacity: 0; transform: translateY(22px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Os 5 emojis TEM que ter exatamente o mesmo tamanho: dimensao fixa (nao
   min-width, que o flex poderia esticar) no botao e na imagem. Os PNGs sao
   normalizados no mesmo canvas 512x512 com o mesmo diametro de circulo, entao
   width/height iguais aqui garantem circulos identicos na tela. */
.opcao-emoji {
  position: relative; overflow: hidden;
  width: 160px; height: 160px; flex: 0 0 160px; border: none; border-radius: 50%;
  display: block;
  cursor: pointer; padding: 0;
  box-shadow: var(--cm-shadow-2);
  transition: transform var(--cm-dur-fast) var(--cm-ease-spring), box-shadow var(--cm-dur-fast) var(--cm-ease-smooth);
}
.opcao-emoji img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.opcao-label { font-size: 17px; font-weight: 700; }
.opcao-label.v1 { color: var(--cm-v1); }
.opcao-label.v2 { color: var(--cm-v2); }
.opcao-label.v3 { color: #B99422; }
.opcao-label.v4 { color: #4C9A34; }
.opcao-label.v5 { color: var(--cm-v5); }
.opcao-emoji.v1 { background: var(--cm-v1); }
.opcao-emoji.v2 { background: var(--cm-v2); }
.opcao-emoji.v3 { background: var(--cm-v3); }
.opcao-emoji.v4 { background: var(--cm-v4); }
.opcao-emoji.v5 { background: var(--cm-v5); }
.opcao-emoji:active { transform: scale(0.94); }
.opcao-emoji.cm-glow-active { box-shadow: 0 0 0 8px var(--cm-gold-glow), var(--cm-shadow-3); }
/* Sem animacao de "respiracao"/idle nos emojis de proposito: parado, o emoji
   fica 100% flat/estatico (identico ao PNG original) - so reage ao toque. */

.cm-ripple {
  position: absolute; border-radius: 50%; background: #fff; pointer-events: none;
}

/* ---------- Tela final ---------- */
.tela-final {
  background: var(--cm-totem-bg); color: var(--cm-ink);
}
.tela-final .cm-logo-final { width: 220px; height: auto; object-fit: contain; margin-bottom: var(--cm-space-3); }
.tela-final h1 { color: var(--cm-v5); font-size: 32px; font-weight: 800; margin: 0; }

.comentario-box {
  margin-top: var(--cm-space-6); width: 100%; max-width: 560px;
  background: #fff; border-radius: var(--cm-radius-xl); box-shadow: var(--cm-shadow-3);
  padding: var(--cm-space-6);
  opacity: 0; transform: translateY(14px);
  animation: cmFadeUp var(--cm-dur-slow) var(--cm-ease-out-expo) 380ms forwards;
}
@keyframes cmFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
.comentario-box .comentario-label {
  font-size: var(--cm-fs-sm); color: var(--cm-ink-soft); font-weight: 600; margin-bottom: var(--cm-space-3);
}
.comentario-box textarea {
  width: 100%; min-height: 100px; border-radius: var(--cm-radius-md); border: 1px solid var(--cm-border); padding: 16px;
  font-size: var(--cm-fs-sm); font-family: var(--cm-font); resize: none;
  background: var(--cm-surface-alt);
}
.btn-comentario {
  margin-top: var(--cm-space-4); min-height: 60px; min-width: 260px; border: none; border-radius: var(--cm-radius-md);
  background: var(--cm-v5); color: #fff; font-size: var(--cm-fs-md); font-weight: 700; cursor: pointer;
  transition: transform var(--cm-dur-fast) var(--cm-ease-spring);
}
.btn-comentario:active { transform: scale(0.96); }
.comentario-enviado { margin-top: var(--cm-space-4); font-size: var(--cm-fs-sm); color: var(--cm-v5); font-weight: 700; }

/* Nao existe estilo de aviso de inatividade: o reset por inatividade e
   silencioso (nenhum overlay e mostrado ao paciente) - ver totem.js.
   cmFadeIn continua aqui porque e usado pelos overlays de senha e de erro. */
@keyframes cmFadeIn { to { opacity: 1; } }

/* ---------- Alvo do gesto secreto de saida do quiosque ----------
   Invisivel de proposito: as telas ja tem o logo oficial visivel (cabecalho
   ou tela final); este alvo so existe para o toque, sobreposto ao canto
   superior esquerdo, documentado no README para a equipe da clinica. */
.logo-flutuante {
  position: fixed; top: 0; left: 0; z-index: 500;
  width: 64px; height: 64px; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.logo-flutuante img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- Overlay de erro de conexao (rede/servidor fora do ar) ---------- */
.erro-conexao-overlay {
  position: fixed; inset: 0; background: rgba(28,58,74,0.96); color: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 1100;
  padding: var(--cm-space-6); opacity: 0;
  animation: cmFadeIn var(--cm-dur-base) var(--cm-ease-out-expo) forwards;
}
.erro-conexao-card { max-width: 420px; text-align: center; }
.erro-conexao-card h2 { font-size: var(--cm-fs-lg); margin: 0 0 var(--cm-space-2); font-weight: 800; }
.erro-conexao-card p { font-size: var(--cm-fs-sm); opacity: 0.85; margin: 0; }

/* ---------- Prompt de senha (saida do quiosque) ---------- */
.senha-overlay {
  position: fixed; inset: 0; background: rgba(28,58,74,0.96); color: #fff;
  display: none; align-items: center; justify-content: center; z-index: 1000;
  padding: var(--cm-space-6); opacity: 0;
}
.senha-overlay.ativa { display: flex; animation: cmFadeIn var(--cm-dur-base) var(--cm-ease-out-expo) forwards; }
.senha-card { width: 100%; max-width: 420px; text-align: center; }
.senha-card h2 { font-size: var(--cm-fs-lg); margin: 0 0 var(--cm-space-2); font-weight: 800; }
.senha-card p { font-size: var(--cm-fs-sm); opacity: 0.85; margin: 0 0 var(--cm-space-4); }
.senha-input {
  width: 100%; min-height: 56px; border-radius: var(--cm-radius-md); border: none; padding: 0 16px;
  font-size: var(--cm-fs-md); font-family: var(--cm-font); text-align: center; box-shadow: var(--cm-shadow-1);
}
.senha-erro { color: #ffb4b4; font-size: var(--cm-fs-sm); margin-top: var(--cm-space-3); font-weight: 700; }
.senha-card.cm-shake { animation: cmShake 420ms var(--cm-ease-smooth); }
@keyframes cmShake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(6px); }
  30%, 50%, 70% { transform: translateX(-10px); }
  40%, 60% { transform: translateX(10px); }
}
.senha-botoes { display: flex; gap: var(--cm-space-3); justify-content: center; margin-top: var(--cm-space-4); }
.btn-senha-confirmar, .btn-senha-cancelar {
  min-height: 56px; min-width: 140px; border: none; border-radius: var(--cm-radius-md);
  font-size: var(--cm-fs-sm); font-weight: 700; cursor: pointer;
  transition: transform var(--cm-dur-fast) var(--cm-ease-spring);
}
.btn-senha-confirmar { background: var(--cm-gold); color: #fff; }
.btn-senha-cancelar { background: rgba(255,255,255,0.14); color: #fff; }
.btn-senha-confirmar:active, .btn-senha-cancelar:active { transform: scale(0.95); }

/* ---------- Confete ---------- */
.confete-canvas {
  position: fixed; inset: 0; z-index: 900; pointer-events: none; display: none;
}
.confete-canvas.ativa { display: block; }

@media (prefers-reduced-motion: reduce) {
  .card-ilha, .comentario-box, .opcao-wrap { animation: none !important; opacity: 1 !important; transform: none !important; }
  .tela { transition: none; }
  .senha-card.cm-shake { animation: none; }
}

/* ---------- Responsividade: tablets menores/retrato ----------
   O layout ja usa flex-wrap nas linhas criticas (escala de emojis, cards de
   ilha), entao nada fica cortado por padrao; aqui so reduzimos tamanhos fixos
   grandes (header, emojis, padding reservado para o header fixo) para caber
   com folga em telas mais estreitas sem precisar de scroll excessivo. */
@media (max-width: 860px) {
  .cm-header-logo { height: 64px; }
  .cm-header-divisor { min-height: 40px; }
  #tela-pergunta.ativa { padding-top: 190px; }
  .opcao-emoji { width: 120px; height: 120px; flex-basis: 120px; }
  .escala { gap: 16px; }
  .cards-ilhas { gap: var(--cm-space-4); }
  .card-ilha { padding: 28px 20px 22px; }
  .pergunta-texto { font-size: var(--cm-fs-lg); }
}
@media (max-width: 620px) {
  .cm-header-logo { height: 48px; }
  #tela-pergunta.ativa { padding-top: 150px; }
  .opcao-emoji { width: 92px; height: 92px; flex-basis: 92px; }
  h1.titulo { font-size: var(--cm-fs-xl); }
  /* Uma coluna: 3 cards de 3 colunas nao cabem legivelmente abaixo de 620px.
     Continuam com a mesma largura entre si e o botao segue colado na base. */
  .cards-ilhas { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}