/* Componentes da página da família (classes c-*, usadas por js/ui/render.js). Só var(--*) de tokens.css.
   Regras do design-brief: verde = ligar; vermelho SÓ socorro ("Desligar" é neutro escuro, nunca vermelho);
   alvo de toque >= --alvo-min; botão principal --alvo-principal; nada abaixo de --text-base. */

/* ---------- Títulos e texto ---------- */
.c-titulo {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-lh);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.c-titulo--grande {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
}

.c-subtitulo {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
  margin-top: var(--space-4);
}

.c-texto {
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  overflow-wrap: anywhere;
}

.c-texto--forte {
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
  font-weight: var(--weight-bold);
}

.c-texto--secundario {
  color: var(--color-text-secondary);
}

/* ---------- Botões ---------- */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--alvo-principal);
  padding: var(--space-3) var(--space-6);
  border: var(--borda) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh);
  font-weight: var(--weight-bold);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-suave) var(--easing), border-color var(--dur-suave) var(--easing);
}

.c-btn--principal {
  background: var(--color-ligar);
  border-color: var(--color-ligar);
  color: var(--color-on-ligar);
}

.c-btn--principal:hover,
.c-btn--principal:active {
  background: var(--color-ligar-dark);
  border-color: var(--color-ligar-dark);
}

.c-btn--secundario {
  min-height: var(--alvo-min);
  background: var(--color-surface);
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.c-btn--secundario:hover,
.c-btn--secundario:active {
  background: var(--color-surface-calma);
}

/* Desligar: neutro escuro (mockup F1.11). Vermelho é só do socorro (design-brief §checklist). */
.c-btn--desligar {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-surface);
}

.c-btn--desligar:hover,
.c-btn--desligar:active {
  background: var(--color-text-secondary);
  border-color: var(--color-text-secondary);
}

.c-btn[disabled],
.c-btn[disabled]:hover,
.c-btn[disabled]:active {
  background: var(--color-surface-calma);
  border-color: var(--color-surface-calma);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.c-linha-botoes {
  display: flex;
  gap: var(--space-3);
}

.c-linha-botoes > .c-btn {
  flex: 1 1 0;
}

/* Link-botão (ação secundária em texto) */
.c-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-min);
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: var(--sublinhado-offset);
  cursor: pointer;
  touch-action: manipulation;
}

.s-tela > .c-link {
  align-self: center;
}

.c-link--quieto {
  color: var(--color-text-secondary);
  font-weight: var(--weight-normal);
}

/* Consentimento: texto e link de privacidade em linhas próprias; o link mantém o alvo mínimo (--alvo-min). */
.c-consentimento {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Foto da vó (passe-partout) ---------- */
.c-foto {
  background: var(--color-surface);
  border: var(--borda-fina) solid var(--color-border);
  border-radius: var(--radius-foto);
  padding: var(--moldura-foto);
}

.c-foto__area {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: var(--foto-max);
  margin: 0 auto;
  border-radius: var(--radius-foto);
  background: var(--color-surface-calma);
  border-bottom: var(--filete-estado) solid var(--color-border); /* render.js troca pela cor da vó via CSSOM */
  overflow: hidden;
}

.c-foto--pequena .c-foto__area {
  aspect-ratio: 4 / 3;
  max-height: var(--foto-max-pequena);
}

.c-foto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* ---------- Faixas (calma / aviso / socorro) ---------- */
.c-faixa {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
  font-weight: var(--weight-bold);
}

.c-faixa__texto {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.c-faixa--calma {
  background: var(--color-surface-calma);
  color: var(--color-text-primary);
}

.c-faixa--aviso {
  background: var(--color-aviso);
  color: var(--color-text-primary);
}

/* Único lugar com vermelho: a vó apertou o socorro. */
.c-faixa--socorro {
  background: var(--color-socorro);
  color: var(--color-on-socorro);
}

.c-faixa--socorro .c-titulo {
  color: var(--color-on-socorro);
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
}

/* Pictogramas (SVG de render.js) */
.c-icone {
  width: var(--icone);
  height: var(--icone);
  flex: none;
  fill: currentColor;
}

/* ---------- Blocos ---------- */
.c-bloco-calmo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface-calma);
  border-radius: var(--radius-md);
}

/* Vaga reservada (S002: "Ligar pra vó" / "Ligar de volta"). Fica [hidden] no S001. */
.c-reserva {
  min-height: var(--alvo-principal);
}

/* Esqueleto do carregando: pulso calmo; sem movimento com prefers-reduced-motion. */
.c-esqueleto {
  background: var(--color-surface-calma);
  border-radius: var(--radius-md);
  animation: c-esqueleto-pulso var(--mov-pulso) var(--easing) infinite;
}

.c-esqueleto--foto {
  aspect-ratio: 4 / 5;
  max-height: var(--foto-max);
  border-radius: var(--radius-foto);
}

.c-esqueleto--titulo {
  height: var(--text-3xl);
  width: 70%;
}

.c-esqueleto--linha {
  height: var(--text-base);
  width: 90%;
}

@keyframes c-esqueleto-pulso {
  50% {
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-esqueleto {
    animation: none;
  }
  .c-btn {
    transition: none;
  }
}

/* ---------- Guia do iPhone ---------- */
.c-passo {
  text-align: center;
  color: var(--color-text-secondary);
}

.c-passos {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.c-passos__marca {
  display: block;
  width: var(--space-12);
  height: var(--filete-estado);
  border-radius: var(--radius-sm);
  background: var(--color-border);
}

.c-passos__marca--feita {
  background: var(--color-text-primary);
}

.c-ilustra {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ilustra-min);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--borda-fina) solid var(--color-border);
  border-radius: var(--radius-foto);
  color: var(--color-text-primary);
}

.c-ilustra .c-icone {
  width: var(--icone-grande);
  height: var(--icone-grande);
}

/* ---------- Chamada (vídeo ocupa a tela) ---------- */
.c-video {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--color-text-primary);
}

/* BUG-080: a altura de .c-video vem do flex (o pai só tem min-height), então height:100% não resolve e o iframe
   cairia nos 150 px padrão. Posicionado absoluto, o 100% (inline do external_api.js) mede a caixa do .c-video. */
.c-video iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.c-chamada-espera {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background: var(--color-background);
}

/* F1.10: pedido de câmera/microfone antes do vídeo. */
.c-chamada-midia {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background: var(--color-background);
}

.c-chamada-midia[hidden],
.c-sobreposta[hidden] {
  display: none;
}

/* Privacidade sobre a chamada: rola, o vídeo continua por baixo. */
.c-sobreposta {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  background: var(--color-background);
}

.c-chamada-faixa {
  position: absolute;
  top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  left: var(--space-4);
  right: var(--space-4);
}

.c-chamada-faixa:empty {
  display: none;
}

.c-chamada-base {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  flex: 0 0 auto;
  position: relative;
  padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Privacidade ---------- */
.c-legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-legal__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-6);
}

.c-consentimento {
  text-align: center;
}

/* ---------- Rodapé ---------- */
.c-rodape {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
}

/* Link de privacidade sobre o vídeo: texto claro com sombra, sem faixa (não pode parecer 2º botão). */
.c-chamada-base .c-link {
  align-self: center;
  background: none;
  color: var(--color-on-ligar);
  font-weight: var(--weight-normal);
  text-shadow: 0 0 var(--space-2) var(--color-text-primary), 0 0 var(--space-1) var(--color-text-primary);
}

/* Com a tela de mídia (fundo papel) aberta, o link volta ao texto escuro. */
.c-chamada-midia:not([hidden]) ~ .c-chamada-base .c-link {
  color: var(--color-text-secondary);
  text-shadow: none;
}

/* ---------- Estados extras ---------- */
.c-link:hover,
.c-link:active {
  background: var(--color-surface-calma);
  border-radius: var(--radius-sm);
}

/* Foco sobre vídeo/fundo escuro: anel claro (o anel escuro some). */
.s-chamada :focus-visible,
.c-btn--desligar:focus-visible {
  outline-color: var(--color-surface);
}