/* ═══════════════════ o configurador de relatórios (prefixo rl-) ═════════════
 * A encomenda com a conta à vista. As regras da casa que esta folha cumpre e
 * não discute: relevo só para o que se toca e o que contém, nunca para o que
 * se lê; alvos de 44px; foco âmbar sólido; nenhuma cor com juízo — o total
 * travado distingue-se por um fio e por palavras, nunca por um vermelho.
 *
 * Nada aqui declara tokens novos: tudo sai de /ds/*.css e de landing.css.
 * Nenhum número do ecrã vive nesta folha — só medidas de desenho.
 *
 * Telemóvel primeiro: a coluna única é a forma de base; a partir de 901px o
 * preço passa para a coluna da direita e fica agarrado ao topo enquanto as
 * caixas rolam. Abaixo disso o preço fica longe das caixas, e uma barra com o
 * total acompanha o fundo do ecrã — acima dos separadores (72px) e da tira do
 * câmbio (64px) que a moldura fixa lá em baixo abaixo de 1100px, as mesmas
 * medidas que .mold-ecra já reserva na folga inferior. */

.rl-pagina { max-width: 1180px; }
.rl-abertura {
  margin: 14px 0 0; font-size: 15px; line-height: 1.6;
  color: var(--tinta); max-inline-size: 68ch; text-wrap: pretty;
}

/* ── o corpo: as caixas, o preço, o pedido ─────────────────────────────────── */
.rl-corpo {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  margin-block-start: 26px; align-items: start;
}
.rl-forma { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }

/* ── um grupo de escolhas ──────────────────────────────────────────────────── */
.rl-grupo {
  margin: 0; padding: 22px; border: 0; min-inline-size: 0;
  background: var(--cartao); border-radius: 24px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
}
.rl-grupo[disabled] { opacity: .7; }
/* A legenda nativa monta a borda do fieldset e deixa metade de fora do
 * cartão. A flutuar a toda a largura passa a ser um bloco normal lá dentro —
 * medido na prova local de 12-09-2026 — e o que vem a seguir limpa-a. */
.rl-legenda {
  float: left; inline-size: 100%; box-sizing: border-box;
  padding: 0; margin: 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: 20px; letter-spacing: -.02em; color: var(--azul-moco);
}
.rl-legenda-nota {
  clear: both; margin: 6px 0 0; font-size: 13px; line-height: 1.55;
  color: var(--secundario); max-inline-size: 62ch; text-wrap: pretty;
}
.rl-opcoes { clear: both; display: grid; gap: 8px; margin-block-start: 14px; }

/* Uma caixa: a linha inteira é alvo, e a entrada nativa fica à vista — o
 * estado vê-se com a cor desligada porque é a própria caixa que o desenha. */
.rl-opcao {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  min-block-size: 44px; box-sizing: border-box; padding: 12px 14px;
  border-radius: 14px; background: var(--superficie); border: 1px solid var(--linha);
  cursor: pointer;
}
.rl-caixa {
  flex: none; inline-size: 20px; block-size: 20px; margin: 2px 0 0;
  accent-color: var(--azul-moco); cursor: pointer;
}
.rl-opcao:has(.rl-caixa:checked) { border-color: var(--azul-moco); box-shadow: inset 0 0 0 1px var(--azul-moco); }
.rl-opcao:has(.rl-caixa:focus-visible) { outline: var(--foco); outline-offset: 2px; }
.rl-caixa:focus-visible { outline: var(--foco); outline-offset: 2px; }
.rl-opcao-texto { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.rl-opcao-nome { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--tinta); }
.rl-opcao-pormenor { font-size: 12.5px; line-height: 1.5; color: var(--secundario); }
/* O acréscimo (ou a base) ao lado do nome: tinta da casa, sem tarja — é dado,
 * e dado não se toca. */
.rl-mais { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--azul-moco); }

/* ── um cursor de posições ─────────────────────────────────────────────────── */
.rl-cursor {
  clear: both; display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 14px; padding: 4px;
  border-radius: 999px; background: var(--fundo);
  box-shadow: var(--relevo-in, inset 4px 4px 8px #D1D9E6, inset -4px -4px 8px #FAFCFE);
}
.rl-posicao { position: relative; flex: 1 1 auto; min-inline-size: 0; }
.rl-posicao input {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.rl-posicao-texto {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-block-size: 44px; box-sizing: border-box; padding: 6px 12px; border-radius: 999px;
  text-align: center; color: var(--secundario); font-size: 13px; line-height: 1.3;
}
.rl-posicao-nome { font-weight: 600; }
.rl-posicao-texto .rl-mais { color: inherit; font-weight: 500; font-size: 11px; opacity: .85; }
.rl-posicao input:checked + .rl-posicao-texto { background: var(--azul-moco); color: var(--creme-moco); }
.rl-posicao input:focus-visible + .rl-posicao-texto { outline: var(--foco); outline-offset: 2px; }

/* ── o preço, à vista ──────────────────────────────────────────────────────── */
.rl-preco {
  min-inline-size: 0; padding: 24px; box-sizing: border-box;
  background: var(--cartao); border-radius: 24px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
  display: flex; flex-direction: column; gap: 8px;
}
.rl-preco-rot, .rl-conta-rot {
  margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500;
}
.rl-conta-rot { margin-block-start: 14px; }
.rl-anuncio { display: flex; flex-direction: column; gap: 8px; }
.rl-valor { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rl-valor-moeda { font-size: 16px; font-weight: 600; color: var(--secundario); }
.rl-valor-num { font-size: 40px; line-height: 1.05; overflow-wrap: anywhere; }
.rl-valor-nota { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--secundario); text-wrap: pretty; }
/* O total travado leva o fio de âmbar dos avisos da casa: não é alarme, é um
 * facto sobre a banda, e a conta por baixo diz o que se faz. */
.rl-preco--travado .rl-valor-nota {
  border-inline-start: 3px solid var(--ambar); padding-inline-start: 10px; color: var(--tinta);
}
.rl-conta {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--tinta);
  font-variant-numeric: tabular-nums; text-wrap: pretty;
}

/* ── o pedido de proforma ──────────────────────────────────────────────────── */
.rl-pedido {
  min-inline-size: 0; padding: 24px; box-sizing: border-box;
  background: var(--cartao); border-radius: 24px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
}
.rl-pedido-titulo {
  margin: 6px 0 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: 24px; letter-spacing: -.02em; color: var(--azul-moco); text-wrap: pretty;
}
.rl-pedido-texto { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--secundario); max-inline-size: 62ch; }
.rl-pedido-forma { margin-block-start: 16px; display: flex; flex-direction: column; gap: 14px; }
.rl-campo-grupo { display: flex; flex-direction: column; gap: 6px; }
.rl-rotulo { font-size: 13px; font-weight: 600; color: var(--tinta); }
.rl-campo {
  inline-size: 100%; box-sizing: border-box; min-block-size: 48px;
  border: 1px solid var(--linha); border-radius: 14px;
  background: var(--superficie); color: var(--tinta); padding: 0 16px;
  font-family: var(--fonte-texto); font-size: 15px;
}
.rl-campo:focus-visible { outline: var(--foco); outline-offset: 2px; }
.rl-promessa { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta); }
.rl-botao {
  min-block-size: 44px; box-sizing: border-box; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--azul-moco); color: var(--creme-moco);
  font-family: var(--fonte-texto); font-size: 14px; font-weight: 600;
  padding: 0 22px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; align-self: flex-start;
}
.rl-botao[disabled] { opacity: .55; cursor: wait; }
.rl-botao--linha { background: none; color: var(--azul-moco); border: 1.5px solid var(--azul-moco); }
.rl-botao:focus-visible { outline: var(--foco); outline-offset: 3px; }
/* A linha de estado existe sempre, para o leitor de ecrã a ter à mão; vazia
 * não ocupa nada, cheia é a caixa calma dos avisos da casa. */
.rl-estado {
  margin: 0; padding: 12px 16px; border-radius: 14px;
  background: var(--superficie); border-inline-start: 3px solid var(--ambar);
  font-size: 13.5px; line-height: 1.5; color: var(--tinta);
}
.rl-estado:empty { padding: 0; border: 0; background: none; }
.rl-guarda { margin: 0; font-size: 12px; line-height: 1.55; color: var(--secundario); max-inline-size: 62ch; }
.rl-recebido { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rl-recebido-texto { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta); max-inline-size: 62ch; text-wrap: pretty; }

/* ── a barra do total, só no telemóvel ─────────────────────────────────────── */
.rl-barra { display: none; }

/* ── duas colunas a partir do tablet largo ─────────────────────────────────── */
@media (min-width: 901px) {
  .rl-corpo {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "forma preco" "pedido preco";
    gap: 26px;
  }
  .rl-forma { grid-area: forma; }
  .rl-pedido { grid-area: pedido; }
  /* O cabeçalho da moldura tem 76px e é fixo; o preço fica logo por baixo. */
  .rl-preco { grid-area: preco; position: sticky; inset-block-start: calc(76px + 20px); }
}
@media (min-width: 720px) {
  .rl-opcoes--sectores { grid-template-columns: 1fr 1fr; }
}

/* ── telemóvel ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rl-barra {
    position: sticky; inset-block-end: calc(72px + 64px + 12px); z-index: 20;
    display: flex; align-items: baseline; gap: 10px;
    inline-size: 100%; box-sizing: border-box; min-block-size: 52px;
    margin-block-start: 20px; padding: 10px 18px; border: 0; border-radius: 999px;
    background: var(--escuro); color: var(--escuro-texto);
    font-family: var(--fonte-texto); cursor: pointer; text-align: start;
    box-shadow: var(--vidro-sombra, 10px 14px 28px rgba(21, 38, 58, .14));
  }
  .rl-barra-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--escuro-secundario); }
  .rl-barra-num { font-family: var(--fonte-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
  .rl-barra-ver { margin-inline-start: auto; font-size: 12.5px; color: var(--creme-moco); text-decoration: underline; }
  .rl-barra:focus-visible { outline: var(--foco); outline-offset: 3px; }
}
@media (max-width: 720px) {
  .rl-grupo, .rl-preco, .rl-pedido { padding: 18px; border-radius: 20px; }
  .rl-legenda { font-size: 18px; }
  .rl-valor-num { font-size: 32px; }
  .rl-botao { inline-size: 100%; }
}

@media (forced-colors: active) {
  .rl-opcao:has(.rl-caixa:checked) { border-color: Highlight; }
  .rl-posicao input:checked + .rl-posicao-texto { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .rl-botao, .rl-barra { border: 1.5px solid ButtonText; }
  .rl-preco--travado .rl-valor-nota { border-inline-start-color: Highlight; }
}