/*
* 17_planos_e_assinatura.css — ONDA M · a cobrança dentro da plataforma
* ═══════════════════════════════════════════════════════════════════════════
* O NOME NÃO DIZ "FATURA" DE PROPÓSITO: o `stylesheet_link_tag :app` põe o
* nome de toda folha no de TODA tela — inclusive a /indisponivel que o
* aluno lê —, e `acesso_pendente_test` afirma, com razão (§15.3), que aquela
* tela não contém "fatura", "pagamento" nem "cobrança" em byte nenhum. A folha
* chamava-se 17_faturamento.css e o nome do arquivo no reprovava.
*
* Cobre:
*
* /admin/assinatura .cobranca-hero, .planos, .plano, .faturas,
* .faixa-cobranca (sobre .faixa-avaliacao)
* o modal do plano e da fatura .plano-detalhe__preco
* /console/assinaturas/:id .faturas (o mesmo componente)
*
* As mesmas regras da folha 16: zero literal fora de 01_tokens.css (o único é
* `1px` de borda); anima SÓ transform e opacity; card → modal é
* `.cartao--acionavel` + `.cartao__gatilho` do motor (03_movimento.css) — aqui
* só o que é do plano e não cabe no componente genérico.
*
* Carregada pelo `stylesheet_link_tag :app` (Propshaft, ordem alfabética):
* depois de 16_autosservico (consome .faixa-avaliacao) e antes de 20_navegacao.
*/
/* ═══════════════════════════════════════════════════════════════════════════
A FATURA A PAGAR — a primeira dobra depois de contratar
═══════════════════════════════════════════════════════════════════════════
Um bloco só, com o valor grande e o botão. Âmbar quando vencida. */
.cobranca-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--esp-5);
margin-bottom: var(--esp-6);
padding: var(--esp-5) var(--esp-6);
border: 1px solid var(--cor-marca-tenue);
border-left-width: 4px;
border-left-color: var(--cor-marca);
border-radius: var(--raio-3);
background: var(--cor-marca-suave);
box-shadow: var(--sombra-marca);
}
.cobranca-hero__corpo { flex: 1 1 18rem; min-width: 0 }
.cobranca-hero__rotulo {
margin: 0 0 var(--esp-1);
font-size: var(--texto-xs);
font-weight: var(--peso-forte);
letter-spacing: var(--espacamento-etiqueta);
text-transform: uppercase;
color: var(--cor-marca);
}
.cobranca-hero__valor {
margin: 0;
font-size: var(--texto-2xl);
font-weight: var(--peso-forte);
letter-spacing: var(--espacamento-titulo);
font-variant-numeric: tabular-nums;
}
.cobranca-hero__texto { margin: var(--esp-1) 0 0; color: var(--texto-suave); font-size: var(--texto-sm) }
.cobranca-hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) }
.cobranca-hero--vencida {
border-color: var(--cor-descanso);
border-left-color: var(--cor-descanso);
background: var(--cor-descanso-suave);
box-shadow: none;
}
.cobranca-hero--vencida .cobranca-hero__rotulo { color: var(--cor-descanso) }
.cobranca-hero--esperando {
border-color: var(--borda);
border-left-color: var(--cor-aguardando);
background: var(--fundo-cartao);
box-shadow: none;
}
.cobranca-hero--esperando .cobranca-hero__rotulo { color: var(--texto-tenue) }
/* ═══════════════════════════════════════════════════════════════════════════
OS PLANOS — cards → modal
═══════════════════════════════════════════════════════════════════════════ */
.planos { margin-bottom: var(--esp-8) }
.planos__cabecalho { margin-bottom: var(--esp-4) }
.planos__cabecalho .cartao__texto { margin: var(--esp-1) 0 0 }
.planos__simulado {
display: inline-flex;
align-items: center;
gap: var(--esp-2);
margin: var(--esp-3) 0 0;
padding: var(--esp-1) var(--esp-3);
border-radius: var(--raio-redondo);
background: var(--cor-aguardando-suave);
color: var(--texto-suave);
font-size: var(--texto-xs);
}
.planos__grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: var(--esp-4);
margin: 0;
padding: 0;
list-style: none;
}
.plano {
display: flex;
flex-direction: column;
gap: var(--esp-2);
min-width: 0;
padding: var(--esp-5);
}
.plano--atual { border-color: var(--cor-marca); background: var(--cor-marca-suave) }
.plano--sob-consulta { border-style: dashed }
/* Fundo `--cor-marca-forte`, não `--cor-marca`: é o único papel com AA
garantido para texto de contraste (01_tokens.css) — sobre `--cor-marca` o
chip "SEU PLANO" dava 2,74:1 (G4/R-14). */
.plano__marca {
align-self: flex-start;
padding: var(--esp-1) var(--esp-3);
border-radius: var(--raio-redondo);
background: var(--cor-marca-forte);
color: var(--cor-marca-contraste);
font-size: var(--texto-xs);
font-weight: var(--peso-forte);
letter-spacing: var(--espacamento-etiqueta);
text-transform: uppercase;
}
.plano__marca--agendado { background: var(--cor-aguardando-suave); color: var(--texto-suave) }
.plano__nome { margin: 0; font-size: var(--texto-xl); letter-spacing: var(--espacamento-titulo) }
.plano__assentos { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm) }
.plano__descricao { margin: 0; color: var(--texto-tenue); font-size: var(--texto-sm) }
/* O valor NÃO quebra linha ("R$" numa linha e "249,90" na outra é como o
card ficou na primeira rodada de prints); o "por mês" vai embaixo. */
.plano__preco { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: var(--esp-2) 0 0 }
.plano__preco-valor {
white-space: nowrap;
font-size: var(--texto-2xl);
font-weight: var(--peso-forte);
letter-spacing: var(--espacamento-titulo);
font-variant-numeric: tabular-nums;
}
.plano__preco-periodo { color: var(--texto-tenue); font-size: var(--texto-sm) }
.plano__preco-texto { color: var(--texto-suave); font-size: var(--texto-lg); font-weight: var(--peso-medio) }
/* A chamada de rodapé do card. É um e não um link: o gatilho é o
título (`.cartao__gatilho`, esticado sobre o card inteiro). */
.plano__acao {
display: flex;
align-items: center;
gap: var(--esp-1);
margin: auto 0 0;
padding-top: var(--esp-3);
color: var(--cor-marca);
font-size: var(--texto-sm);
font-weight: var(--peso-medio);
}
.plano__acao .elo { display: inline-flex; align-items: center; gap: var(--esp-1); text-decoration: none }
.plano__acao svg { transition: transform var(--tempo-rapido) var(--curva-padrao) }
@media (hover: hover) {
.plano:hover .plano__acao svg { transform: translateX(3px) }
}
/* O preço grande no modal (plano e fatura). */
.plano-detalhe__preco {
display: flex;
align-items: baseline;
gap: var(--esp-2);
margin: 0 0 var(--esp-5);
}
/* ═══════════════════════════════════════════════════════════════════════════
AS FATURAS — cada linha abre em modal
═══════════════════════════════════════════════════════════════════════════ */
.faturas {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--borda);
border-radius: var(--raio-3);
overflow: hidden;
}
.faturas__item + .faturas__item { border-top: 1px solid var(--borda) }
.faturas__gatilho {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: var(--esp-3);
min-height: var(--alvo);
padding: var(--esp-3) var(--esp-4);
color: inherit;
text-decoration: none;
transition: background var(--tempo-rapido) var(--curva-padrao);
}
.faturas__gatilho:hover { background: var(--fundo-elevado) }
.faturas__gatilho:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: -2px }
.faturas__numero { font-family: var(--fonte-mono); font-size: var(--texto-sm); color: var(--texto-tenue) }
.faturas__descricao { min-width: 0; font-size: var(--texto-sm); color: var(--texto-suave) }
.faturas__valor { font-weight: var(--peso-forte); font-variant-numeric: tabular-nums }
.faturas__item--vencida .faturas__valor { color: var(--cor-descanso) }
.faturas__item--paga .faturas__valor { color: var(--cor-aprovado) }
@media (max-width: 40rem) {
.faturas__gatilho { grid-template-columns: 1fr auto; row-gap: var(--esp-1) }
.faturas__numero { grid-column: 1 }
.faturas__descricao { grid-column: 1 / -1; white-space: normal }
.faturas__valor { grid-column: 2; grid-row: 1; justify-self: end }
.faturas__gatilho .selo { grid-column: 1 / -1; justify-self: start }
}
/* ═══════════════════════════════════════════════════════════════════════════
A FAIXA DA COBRANÇA — herda tudo de .faixa-avaliacao (folha 16)
═══════════════════════════════════════════════════════════════════════════
Só o que é dela: a faixa vencida é âmbar (o padrão da 16) e a suspensa é
vermelha (`--urgente`). Nada a acrescentar além do nome, que existe para
que teste e print achem a faixa certa. */
.faixa-cobranca { margin-bottom: var(--esp-5) }
/* ═══════════════════════════════════════════════════════════════════════════
/console/planos NO CELULAR
═══════════════════════════════════════════════════════════════════════════
A tabela-cartão da folha 10 vira cartões por linha, mas a
em si
continua `display: table` e a largura intrínseca das colunas (o do
slug, o selo, o botão) empurrava os cartões para fora da dobra: "R$ 249,",
"sob consu", "Edita" (visto pelo crítico a 390). Aqui a tabela inteira vira
bloco e cada célula pode quebrar linha. */
@media (max-width: 47.999rem) {
.tabela--planos,
.tabela--planos tbody { display: block; width: 100%; min-width: 0 }
.tabela--planos td { white-space: normal; min-width: 0 }
.tabela--planos td > * { min-width: 0 }
.tabela--planos td[data-rotulo="Plano"] { flex-wrap: wrap; row-gap: var(--esp-1) }
.tabela--planos td[data-rotulo="Plano"] small { flex-basis: 100%; text-align: right }
.tabela--planos td:last-child { justify-content: flex-end }
}