/*
 * O ritmo vertical da tela de montar simulado.
 *
 * Existe por um motivo que só apareceu ao medir: a view usava `space-y-6` e
 * `flex ... gap-3`, e **nenhuma das duas classes existe** no CSS que o painel carrega.
 * O Filament v5 compila a própria folha a partir do que ELE usa, e este projeto não tem
 * tema Tailwind próprio registrado — então utilitário que o Filament não usa não chega
 * ao navegador. As classes estavam no HTML sem efeito nenhum: a barra de ações encostava
 * no cartão de disciplinas, e o que parecia uma linha flex era só o fluxo inline dos
 * botões, que já são `inline-flex` por conta do `fi-btn`.
 *
 * Os dois valores:
 *
 * - **1,5rem entre os blocos** — o ritmo que o `space-y-6` prometia, agora escrito de
 *   verdade. Vale entre o formulário, a barra de ações e a prévia.
 * - **2rem acima da barra de ações** — mais que o ritmo interno, de propósito. Ali passa
 *   a fronteira entre CONFIGURAR e EXECUTAR, e um gesto que consome o pool e grava
 *   histórico não pode parecer a continuação do último campo. É a regra de proximidade:
 *   o que está junto se lê como do mesmo grupo, e o botão não é do grupo "disciplinas".
 */
.apostolos-montagem > * + * {
    margin-block-start: 1.5rem;
}

/* Depois da regra acima de propósito: mesma especificidade, e a última vence. */
.apostolos-montagem > .apostolos-acoes-da-montagem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 2rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * A análise da montagem — o conteúdo dos dois modais de "Montar simulado".
 *
 * Ela morava na página, escrita em `style="..."` inline e em utilitários do
 * Tailwind que nunca chegaram ao navegador (`grid`, `md:grid-cols-3`, `gap-4`).
 * O resultado era o que a captura do dono mostrava: três tabelas empilhadas,
 * cada uma com a largura do próprio conteúdo, e as células divergentes com
 * fundo rosa-claro fixo — legível no tema claro, uma mancha no escuro.
 *
 * Aqui o agrupamento é o assunto. Um bloco por disciplina, com o cabeçalho
 * dizendo pedido × montado × faixa de itens, e duas colunas embaixo: tópicos
 * (a lista longa) à esquerda, dificuldade e gabarito empilhados à direita. As
 * três tabelas passam a ocupar a mesma altura, e a comparação que interessa —
 * alvo contra real — fica sempre na mesma posição do olho.
 * ───────────────────────────────────────────────────────────────────────────── */

.apostolos-analise {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
}

/* ── a lista de problemas, só no modal que barra ── */

.apostolos-analise-problemas {
    border: 1px solid var(--danger-300);
    border-radius: var(--radius-lg);
    background-color: var(--danger-50);
    padding: calc(var(--spacing) * 4);
}

.dark .apostolos-analise-problemas {
    border-color: var(--danger-700);
    /* Fundo tingido, não chapado: no escuro, o `danger-50` do tema claro vira a
       mancha branca que a captura do dono mostrava. */
    background-color: color-mix(in oklab, var(--danger-500) 12%, transparent);
}

.apostolos-analise-problemas-titulo {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--danger-700);
    margin-block-end: calc(var(--spacing) * 2);
}

.dark .apostolos-analise-problemas-titulo {
    color: var(--danger-300);
}

.apostolos-analise-problemas-lista {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: 1.5;
    list-style: disc;
    padding-inline-start: calc(var(--spacing) * 5);
    color: var(--danger-700);
}

.dark .apostolos-analise-problemas-lista {
    color: var(--danger-200);
}

/* ── um bloco por disciplina ── */

.apostolos-analise-bloco {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
}

.apostolos-analise-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-block-end: 1px solid var(--gray-200);
    padding-block-end: calc(var(--spacing) * 2);
}

.dark .apostolos-analise-cabecalho {
    border-block-end-color: var(--gray-700);
}

.apostolos-analise-disciplina {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--gray-950);
}

.dark .apostolos-analise-disciplina {
    color: var(--gray-50);
}

/* Rótulo em cima, número embaixo — o par pedido × montado se compara na
   vertical, sem a frase corrida no meio. */
.apostolos-analise-fatos {
    display: flex;
    gap: calc(var(--spacing) * 6);
}

.apostolos-analise-fatos dt {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
}

.dark .apostolos-analise-fatos dt {
    color: var(--gray-400);
}

.apostolos-analise-fatos dd {
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-950);
}

.dark .apostolos-analise-fatos dd {
    color: var(--gray-50);
}

.apostolos-analise-fato-divergente dd {
    color: var(--danger-600);
}

.dark .apostolos-analise-fato-divergente dd {
    color: var(--danger-400);
}

/* ── as duas colunas ── */

.apostolos-analise-colunas {
    display: grid;
    gap: calc(var(--spacing) * 6);
}

/* Uma coluna no estreito: lado a lado, a tabela de tópicos ficaria com o nome do
   eixo quebrando em três linhas, que é pior que rolar. */
@media (min-width: 48rem) {
    .apostolos-analise-colunas {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
    }
}

.apostolos-analise-coluna-estreita {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
}

/* ── a tabela alvo × real ── */

.apostolos-analise-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.apostolos-analise-titulo {
    /* `caption` para o leitor de tela ter o título ligado à tabela; o texto
       visível é o cabeçalho da primeira coluna, que diz a mesma coisa no lugar
       onde o olho já está. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.apostolos-analise-tabela th {
    font-weight: 600;
    text-align: start;
    color: var(--gray-600);
    border-block-end: 1px solid var(--gray-200);
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
}

.dark .apostolos-analise-tabela th {
    color: var(--gray-300);
    border-block-end-color: var(--gray-700);
}

.apostolos-analise-tabela td {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    border-block-end: 1px solid var(--gray-100);
    color: var(--gray-950);
}

.dark .apostolos-analise-tabela td {
    border-block-end-color: var(--gray-800);
    color: var(--gray-100);
}

.apostolos-analise-tabela tr:last-child td {
    border-block-end: 0;
}

/* Números à direita e em algarismo tabular: é o que faz a coluna Real se ler
   como coluna, com o alvo alinhado dígito a dígito ao lado. */
.apostolos-analise-numero {
    text-align: end;
    font-variant-numeric: tabular-nums;
    width: 4.5rem;
}

/* A divergência é tinta e sinal (✗), nunca só cor. Sem fundo: a mancha rosa da
   versão anterior gritava mais que o texto do problema, que é o que precisa ser
   lido. */
.apostolos-analise-divergente {
    color: var(--danger-600);
    font-weight: 700;
}

.dark .apostolos-analise-divergente {
    color: var(--danger-400);
}

.apostolos-analise-rodape {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.dark .apostolos-analise-rodape {
    color: var(--gray-400);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * O anel do "Baixar" — o aviso de que a barra mudou de estado.
 *
 * O botão nasce no lugar exato onde estava o "Montar simulado", com a mesma cor
 * (decisão do dono, 01/08/2026: o âmbar volta a ser a única cor de ação, e quem
 * avisa é o foco). Sem nada mais, a troca passaria batida: mesma posição, mesma
 * cor, rótulo curto.
 *
 * Quem avisa é o FOCO, e ele chega por dois lados que se completam:
 *
 * - a view dá `x-init="$el.focus()"` no botão, então ele recebe o foco no
 *   instante em que entra no DOM — que é o instante em que a gravação troca a
 *   barra;
 * - esta regra transforma esse foco num anel que se lê de longe.
 *
 * **`:focus`, e não `:focus-visible`.** Foco dado por código depois de um clique
 * de mouse não casa com `:focus-visible` na maioria dos navegadores — a
 * heurística deles guarda a última interação, e clique não pede anel. Seria
 * justamente quem usa mouse a ficar sem o aviso. O custo aceito é que o anel
 * também aparece depois de clicar no botão; ali ele não atrapalha, porque o
 * clique abre o menu logo abaixo e o anel emoldura o que está aberto.
 *
 * 3px é a medida da casa para foco — a mesma do caderno gerado. O `offset` é o
 * que faz o anel se destacar de um botão que tem a cor do próprio anel: entre os
 * dois passa o fundo da página.
 * ───────────────────────────────────────────────────────────────────────────── */

.apostolos-baixar:focus {
    outline: 3px solid var(--primary-500);
    outline-offset: 3px;
}

/* No escuro o 500 encosta demais no fundo do botão; o 400 é o mesmo âmbar, um
   passo mais claro, e recorta. */
.dark .apostolos-baixar:focus {
    outline-color: var(--primary-400);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Os downloads, dentro do modal e dentro da linha da listagem.
 *
 * Dois dropdowns de parte (.docx e .pdf) e um botão inteiro (.html) numa linha
 * que quebra quando não couber. O `gap` é o mesmo da barra de ações — os botões
 * são os mesmos, e ritmo diferente para o mesmo tipo de controle é o que faz uma
 * tela parecer montada por duas pessoas.
 * ───────────────────────────────────────────────────────────────────────────── */

.apostolos-downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
}

/* O estado em que a montagem gravou mas o conversor não respondeu: a frase e a
   tentativa seguinte, empilhadas. */
.apostolos-pronto-sem-arquivos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    color: var(--gray-700);
}

.dark .apostolos-pronto-sem-arquivos {
    color: var(--gray-300);
}