/* mocosense · recepcao.css — a folha das duas perguntas (prefixo rc-)
 * ═══════════════════════════════════════════════════════════════════════════
 * A folha sobe do fundo por cima do ecrã «Hoje» e ASSENTA NA TIRA DO DÓLAR,
 * sem a tapar: fica a 64px do fundo (a tira fechada da gaveta) e, no
 * telemóvel, a 72px + 64px (os separadores mais a tira). O véu por baixo
 * também pára aí — a gaveta continua visível e continua a abrir.
 *
 * As camadas: cabeçalho 30 · véu 35 · folha 36 · gaveta 40 · separadores 45.
 * A folha fica por cima do cabeçalho (é um diálogo) e por baixo da gaveta e
 * dos separadores (são a promessa da casa e o caminho de saída).
 *
 * Tokens de /ds/: cores, tipografia, espaçamento, relevo (nível 2 na folha,
 * nível 1 no que se toca), vidro (o véu). Nada de cor à mão fora do que a
 * moldura já escreve por extenso. Texto 15px/1,55; botões 44px de altura. */

/* ── o véu ─────────────────────────────────────────────────────────────── */
.rc-veu {
  position: fixed; inset: 0; inset-block-end: 64px; z-index: 35;
  background: var(--vidro-1);
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.rc-veu--visivel { opacity: 1; }
@media (prefers-reduced-transparency: reduce) { .rc-veu { background: var(--vidro-2); } }

/* ── a folha ───────────────────────────────────────────────────────────── */
.rc-folha {
  position: fixed; inset-inline: 0; inset-block-end: 64px; z-index: 36;
  box-sizing: border-box;
  inline-size: min(100%, 680px); margin-inline: auto;
  max-block-size: calc(100vh - 76px - 64px - 24px);
  display: flex; flex-direction: column;
  background: var(--fundo);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--relevo-2);
  color: var(--tinta);
  font-size: var(--texto-15); line-height: 1.55;
  transform: translateY(24px); opacity: 0;
  transition: transform 220ms ease-out, opacity 220ms ease-out;
}
.rc-folha--visivel { transform: none; opacity: 1; }
.rc-folha[hidden], .rc-veu[hidden] { display: none; }

.rc-pega {
  display: block; inline-size: 46px; block-size: 3px; border-radius: 2px;
  margin: 0 auto 14px;
  background: var(--relevo-escuro);
}

.rc-cabeca { flex: none; padding: 10px 24px 6px; }
.rc-passo {
  margin: 0; font-size: var(--texto-11); text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500;
}
.rc-titulo {
  margin: 4px 0 6px;
  font-family: var(--fonte-display); font-weight: 700; font-size: var(--texto-20);
  letter-spacing: -.02em; line-height: 1.25; color: var(--azul-moco);
}
.rc-titulo:focus { outline: none; } /* o foco programático não pinta caixa; os botões pintam a deles */
.rc-apoio { margin: 0; font-size: var(--texto-15); line-height: 1.55; color: var(--secundario); }

/* Só o corpo rola: a cabeça e o rodapé ficam à vista. */
.rc-corpo { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: 10px 24px 14px; }

/* A frase honesta quando o catálogo não chegou — a mesma nota de âmbar que a
 * casa usa para o que é preciso ler antes de seguir. */
.rc-aviso {
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--raio-dados);
  background: var(--superficie); border-inline-start: 3px solid var(--ambar);
  font-size: var(--texto-13); line-height: 1.55; color: var(--tinta);
}

/* ── as opções ─────────────────────────────────────────────────────────── */
.rc-opcoes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
.rc-opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  inline-size: 100%; min-block-size: 56px; box-sizing: border-box;
  padding: 10px 16px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--fundo); box-shadow: var(--relevo-1);
  font: inherit; text-align: start; color: var(--tinta);
  transition: box-shadow var(--transicao);
}
.rc-opcao:hover { color: var(--azul-moco); }
.rc-opcao:active { box-shadow: var(--relevo-in); }
.rc-opcao:focus-visible { outline: var(--foco); outline-offset: 3px; }
.rc-opcao-nome { font-size: var(--texto-15); font-weight: 600; line-height: 1.35; }
.rc-opcao-linha { font-size: var(--texto-13); line-height: 1.45; color: var(--secundario); font-variant-numeric: tabular-nums; }
/* O que está a caminho toca-se como o resto — abre o estado vazio honesto —,
 * e o nome pesa menos para não prometer o que ainda não há. */
.rc-opcao--caminho .rc-opcao-nome { font-weight: 500; }

/* ── o rodapé ──────────────────────────────────────────────────────────── */
.rc-rodape {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 16px 12px; border-block-start: 1px solid var(--linha);
}
.rc-rodape > :only-child { margin-inline-start: auto; }
.rc-ligacao {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 12px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--fonte-texto); font-size: 14px; font-weight: 600; color: var(--azul-moco);
  text-decoration: none;
}
.rc-ligacao:hover { text-decoration: underline; text-underline-offset: 3px; }
.rc-ligacao:focus-visible { outline: var(--foco); outline-offset: 3px; }

/* Os botões da casa — a pílula de contorno e a cheia, como nos planos e na entrada. */
.rc-botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; box-sizing: border-box; padding: 0 22px;
  border-radius: 999px; cursor: pointer; text-decoration: none;
  background: none; color: var(--azul-moco); border: 1.5px solid var(--azul-moco);
  font-family: var(--fonte-texto); font-size: 14px; font-weight: 600;
}
.rc-botao--cheia { background: var(--azul-moco); color: var(--creme-moco); border-color: var(--azul-moco); }
.rc-botao:focus-visible { outline: var(--foco); outline-offset: 3px; }

/* ── o estado vazio ────────────────────────────────────────────────────── */
.rc-vazio-texto { margin: 0 0 16px; font-size: var(--texto-15); line-height: 1.55; color: var(--tinta); }
.rc-vazio-saidas { display: flex; flex-wrap: wrap; gap: 12px; }
.rc-vazio-nota { margin: 14px 0 0; font-size: var(--texto-13); line-height: 1.55; color: var(--secundario); }

/* ── a tira no painel aberto ───────────────────────────────────────────── */
.rc-tira {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 16px; padding: 4px 16px; border-radius: var(--raio-dados);
  background: var(--superficie); border-inline-start: 3px solid var(--ambar);
}
.rc-tira-texto { flex: 1 1 320px; margin: 0; font-size: var(--texto-13); line-height: 1.55; color: var(--tinta); }
.rc-tira-mudar {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 12px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--fonte-texto); font-size: 14px; font-weight: 600; color: var(--azul-moco);
}
.rc-tira-mudar:hover { text-decoration: underline; text-underline-offset: 3px; }
.rc-tira-mudar:focus-visible { outline: var(--foco); outline-offset: 3px; }

/* ── «Por onde começar?» ───────────────────────────────────────────────── */
/* No canto da conta, com o desenho da pastilha «procurar» que está ao lado.
 * A fila do cabeçalho foi MEDIDA a 13-09-2026, depois de a moldura ganhar as
 * três folgas por largura (a conta, e o código que mediu, estão no cabeçalho
 * de painel.css): entre 1280 e 1599px a fila pede 1248px sem este botão; o
 * «?» num alvo de 44px (mais 12 de intervalo) leva-a a 1304 e o texto inteiro
 * (135px) a 1395; a partir de 1600px, à folga plena, pede 1422, e 1569 com o
 * texto inteiro. Os limiares ficam com folga para uma pastilha a dizer
 * «1.024 indicadores» (+11px): o «?» a partir de 1320px, o texto inteiro a
 * partir de 1410px; abaixo de 1320 o botão sai do cabeçalho para a linha do
 * ecrã «Hoje» (.rc-atalho). Até 13-09 os limiares eram 1425 e 1516, medidos
 * antes da correcção da moldura, quando a fila transbordava sem o botão. */
.rc-comecar {
  display: inline-flex; align-items: center; flex: none;
  min-block-size: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--fundo); box-shadow: var(--relevo-in);
  font-family: var(--fonte-texto); font-size: 12px; color: var(--secundario);
  white-space: nowrap;
}
.rc-comecar:hover { color: var(--tinta); }
.rc-comecar:focus-visible { outline: var(--foco); outline-offset: 3px; }
.rc-comecar-curto { display: none; font-size: var(--texto-15); font-weight: 600; }
/* Entre 1320 e 1409px fica o «?» num alvo de 44px, com o nome completo no
 * aria-label e na dica do rato. */
@media (max-width: 1409px) {
  .rc-comecar { padding: 0; inline-size: 44px; justify-content: center; }
  .rc-comecar-texto { display: none; }
  .rc-comecar-curto { display: inline; }
}
/* Abaixo de 1320px o cabeçalho não tem lugar nem para o «?»: a pergunta fica
 * no topo do ecrã «Hoje», e é a mesma folha que abre. */
@media (max-width: 1319px) { .rc-comecar { display: none; } }

/* No topo do ecrã «Hoje», onde o cabeçalho não tem lugar (abaixo de 1320px). */
.rc-atalho { display: none; margin: 0 0 12px; }
.rc-atalho-botao {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 4px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--fonte-texto); font-size: 14px; font-weight: 600; color: var(--azul-moco);
}
.rc-atalho-botao:hover { text-decoration: underline; text-underline-offset: 3px; }
.rc-atalho-botao:focus-visible { outline: var(--foco); outline-offset: 3px; }
/* Fica DEPOIS da regra-base: à mesma especificidade, manda a última. */
@media (max-width: 1319px) { .rc-atalho { display: block; } }

/* ── o telemóvel ───────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .rc-veu { inset-block-end: calc(72px + 64px); }
  .rc-folha {
    inset-block-end: calc(72px + 64px); inline-size: 100%;
    max-block-size: calc(100vh - 56px - 72px - 64px - 12px);
    border-radius: 20px 20px 0 0;
  }
  .rc-cabeca { padding-inline: 20px; }
  .rc-corpo { padding-inline: 20px; }
  .rc-opcoes { grid-template-columns: 1fr; gap: 8px; }
  .rc-opcao { min-block-size: 52px; padding: 8px 14px; }
}

/* ── quem pediu menos movimento ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rc-veu, .rc-folha, .rc-opcao { transition: none; }
  .rc-folha { transform: none; }
}

/* ── cores forçadas ────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .rc-opcao, .rc-botao, .rc-comecar { border: 1.5px solid ButtonText; }
  .rc-folha { border: 1px solid CanvasText; }
}

/* ── na impressão não existe ───────────────────────────────────────────── */
@media print {
  .rc-veu, .rc-folha, .rc-tira, .rc-atalho, .rc-comecar { display: none !important; }
}