/*
 * Banco de Questões — CSS próprio do painel.
 *
 * Escrito à mão, sem Tailwind, porque o painel carrega só o bundle do Filament: as
 * utilitárias do app não chegam aqui. As cores saem das variáveis do Filament para
 * acompanhar o tema claro/escuro.
 */

.bq-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bq-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background-color: white;
    transition: border-color 150ms, background-color 150ms;
}

/* O clique de marcar ficou só na caixinha: o resto do cartão tem botão próprio. */
.bq-card__escolha { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }

.bq-card:hover {
    border-color: var(--primary-500);
}

.bq-card:has(input:checked) {
    border-color: var(--primary-500);
    background-color: color-mix(in oklab, var(--primary-500) 6%, transparent);
}

.bq-card:where(.dark, .dark *) {
    border-color: var(--gray-700);
    background-color: color-mix(in oklab, var(--gray-900) 60%, transparent);
}

.bq-card__corpo {
    flex: 1;
    min-width: 0;
    /* Mesma altura da miniatura, pra cartão com e sem imagem ficarem iguais. */
    min-height: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bq-card__numero {
    flex-shrink: 0;
    width: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-400);
    text-align: right;
    padding-top: 0.125rem;
}

/* Todo texto do cartão é cortado num número fixo de linhas pra lista ficar uniforme. */
.bq-card__descritor,
.bq-card__enunciado,
.bq-card__habilidade {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bq-card__descritor {
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gray-900);
}

.bq-card__descritor:where(.dark, .dark *) {
    color: white;
}

.bq-card__enunciado {
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--gray-600);
}

.bq-card__enunciado:where(.dark, .dark *) {
    color: var(--gray-300);
}

.bq-card__habilidade {
    -webkit-line-clamp: 1;
    margin-top: auto;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--gray-500);
}

.bq-card__habilidade:where(.dark, .dark *) {
    color: var(--gray-400);
}

.bq-card__miniatura {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    background-color: var(--gray-50);
}

.bq-card__miniatura:where(.dark, .dark *) {
    border-color: var(--gray-700);
    background-color: var(--gray-800);
}

.bq-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
}

.bq-rodape:where(.dark, .dark *) {
    border-top-color: var(--gray-700);
}

.bq-aviso {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.bq-aviso:where(.dark, .dark *) {
    color: var(--gray-400);
}

.bq-erro {
    font-size: 0.875rem;
    color: var(--danger-600);
}

@media (max-width: 640px) {
    .bq-card {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .bq-card__corpo {
        min-height: 3.5rem;
    }

    .bq-card__numero {
        display: none;
    }

    .bq-card__miniatura {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* ---------- Painel de Controle ---------- */

/*
 * São sempre quatro cartões, então a contagem de colunas é fixa por faixa: 1, 2 ou 4,
 * todas divisoras de 4. Com `auto-fit` sobrava um cartão sozinho na segunda linha em
 * certas larguras -- o tipo de assimetria que salta aos olhos numa tela de abertura.
 */
.bq-cartoes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .bq-cartoes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .bq-cartoes { grid-template-columns: repeat(4, 1fr); }
}

.bq-cartao {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
}

.bq-cartao:where(.dark, .dark *) { border-color: var(--gray-700); }

.bq-cartao__rotulo {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
}

.bq-cartao__numero {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

.bq-cartao__numero:where(.dark, .dark *) { color: white; }

/* Encostado no pé do cartão: com ou sem uma linha a mais, os quatro terminam juntos. */
.bq-cartao__apoio {
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.bq-cartao__apoio:where(.dark, .dark *) { color: var(--gray-400); }

/*
 * Mesmas tabelas do Gabarito Digital, de propósito: quem usa os dois sistemas lê
 * número da mesma maneira nos dois. Número alinhado à direita e em algarismo de
 * largura fixa, para a coluna bater de linha em linha.
 */
.bq-tabela-rolagem { overflow-x: auto; }

.bq-tabela { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.bq-tabela th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--gray-200);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    white-space: nowrap;
}

.bq-tabela td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--gray-100); }
.bq-tabela th.num, .bq-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bq-tabela td.forte { font-weight: 700; }

.bq-tabela th:where(.dark, .dark *) { border-bottom-color: var(--gray-700); }
.bq-tabela td:where(.dark, .dark *) { border-bottom-color: var(--gray-800); }

/* Série sem questão nenhuma: fica na lista, mas em segundo plano. */
.bq-tabela tr.vazia td { color: var(--gray-400); }

.bq-tabela tfoot td {
    border-bottom: 0;
    border-top: 2px solid var(--gray-200);
    font-weight: 600;
}

.bq-tabela tfoot td:where(.dark, .dark *) { border-top-color: var(--gray-700); }

/* ---------- "Como esta questão vai sair na prova" ---------- */

/*
 * As medidas aqui são as MESMAS do caderno impresso (resources/views/provas/pdf):
 * largura da caixa, corpo da letra, altura, figura dentro do quadro. O PDF mistura px
 * e pt, e o navegador entende os dois do mesmo jeito que o DomPDF — então dá para
 * copiar valor por valor em vez de aproximar no olho.
 *
 * Quem decide a largura da caixa e o corpo da letra é App\Support\LayoutDaQuestao, a
 * mesma classe que o parcial do PDF chama.
 */

.bq-impressa { display: flex; flex-direction: column; gap: 0.9rem; }

/* O que a prova NÃO mostra: fica fora da folha, em quadro próprio. */
.bq-impressa__ficha,
.bq-impressa__gabarito {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.6rem;
    font-size: 0.8125rem;
    color: var(--gray-700);
}

.bq-impressa__ficha:where(.dark, .dark *),
.bq-impressa__gabarito:where(.dark, .dark *) { border-color: var(--gray-700); color: var(--gray-300); }

.bq-impressa__ficha { display: flex; flex-direction: column; gap: 0.35rem; }
.bq-impressa__ficha-linha { display: flex; gap: 0.6rem; }

.bq-impressa__etiqueta {
    flex-shrink: 0; width: 6.5rem;
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--gray-500);
    padding-top: 0.15rem;
}

.bq-impressa__gabarito { display: flex; align-items: baseline; gap: 0.6rem; }
.bq-impressa__gabarito strong { font-size: 1.125rem; color: var(--gray-900); }
.bq-impressa__gabarito strong:where(.dark, .dark *) { color: white; }
.bq-impressa__gabarito-texto { color: var(--gray-500); }

/* A folha é branca nos dois temas: é papel. */
.bq-impressa__folha {
    padding: 28px 30px;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    background: white;
    color: #111;
    font-size: 11pt;
    line-height: 1.45;
    overflow-x: auto;
}

.bq-impressa__vazio { color: #999; font-style: italic; }

.bq-impressa__enunciado { margin: 0 0 4px; font-size: 11pt; }
.bq-impressa__enunciado strong { color: #7b1416; }

.bq-impressa__ilustracao { text-align: center; margin: 26px 0 34px; }
.bq-impressa__ilustracao img { max-width: 380px; max-height: 330px; }

.bq-impressa__alternativas { border-collapse: separate; border-spacing: 0 20px; }
.bq-impressa__alternativas td { vertical-align: middle; }
.bq-impressa__alternativas--curta { width: 108px; }
.bq-impressa__alternativas--longa { width: 392px; }
.bq-impressa__alternativas--figura { width: 240px; }
.bq-impressa__letra { width: 32px; text-align: left; font-size: 11pt; padding: 0; }

.bq-impressa__caixa { border: 1.5px solid #7b1416; border-collapse: collapse; }
.bq-impressa__caixa td { text-align: center; vertical-align: middle; line-height: 1; }

.bq-impressa__caixa--curta { width: 76px; }
.bq-impressa__caixa--curta td { height: 60px; padding: 2px; font-size: 28pt; font-weight: bold; }

.bq-impressa__caixa--longa { width: 360px; }
.bq-impressa__caixa--longa td { height: 60px; padding: 2px 10px; }
.bq-impressa__caixa--t24 td { font-size: 24pt; }
.bq-impressa__caixa--t20 td { font-size: 20pt; }
.bq-impressa__caixa--t17 td { font-size: 17pt; }
.bq-impressa__caixa--t14 td { font-size: 14pt; }

.bq-impressa__caixa--figura { width: 198px; }
.bq-impressa__caixa--figura td { height: 150px; padding: 8px; }
.bq-impressa__caixa--figura img { max-width: 176px; max-height: 134px; }

.bq-impressa__lista { margin-left: 16px; }
.bq-impressa__lista div { margin-bottom: 3px; }
.bq-impressa__lista img { max-width: 150px; max-height: 110px; vertical-align: middle; margin-left: 6px; }

/* ---------- Ver a questão antes de escolher ---------- */

.bq-card__ver {
    flex-shrink: 0;
    align-self: center;
    padding: 0.45rem 0.9rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-600);
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    cursor: pointer;
}

.bq-card__ver:hover { border-color: var(--primary-500); }
.bq-card__ver:where(.dark, .dark *) { border-color: var(--gray-700); }

/*
 * Questão que já saiu numa prova anterior. Ela continua na lista e continua podendo
 * ser marcada — a mesma questão serve para redes diferentes, e quem decide é quem
 * gera. O que ela não pode é passar despercebida.
 */
.bq-card.repetida { border-color: color-mix(in oklab, var(--warning-500, #d97706) 45%, transparent); }

.bq-card__repetida {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--warning-600, #b45309);
}

.bq-card__repetida:where(.dark, .dark *) { color: var(--warning-400, #fbbf24); }

/* ---------- Janela de conferência ---------- */

.bq-janela {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem;
    overflow-y: auto;
}

.bq-janela__fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); }

.bq-janela__caixa {
    position: relative;
    width: 100%;
    max-width: 44rem;
    border-radius: 0.75rem;
    background: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

.bq-janela__caixa:where(.dark, .dark *) { background: var(--gray-900); }

.bq-janela__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    color: var(--gray-900);
}

.bq-janela__topo:where(.dark, .dark *) { border-bottom-color: var(--gray-700); color: white; }

.bq-janela__fechar {
    padding: 0 0.35rem;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gray-400);
    background: none;
    border: 0;
    cursor: pointer;
}

.bq-janela__corpo { padding: 1.25rem; }