/*
 * As telas do painel que não são formulário nem tabela.
 *
 * Mesma história do mapa de ônibus: o projeto não tem etapa de build, e
 * **nenhuma classe utilitária do Tailwind existe no CSS servido** — nem
 * `flex`, nem `grid`, nem `text-sm`. O que o Filament entrega é o CSS
 * dos componentes dele, e só. Uma tela escrita com utilitárias renderiza
 * como uma pilha de linhas soltas: funciona, mas não é o desenho.
 *
 * Por isso o que precisa de layout próprio ganha nome próprio aqui.
 */

/* ------------------------------------------------------------------ */
/* Duas colunas lado a lado, uma embaixo da outra na tela estreita.     */
/* ------------------------------------------------------------------ */

.maxal-colunas {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
    .maxal-colunas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* O quadro de valores: rótulo à esquerda, dinheiro à direita.         */
/* Alinhar a coluna do dinheiro é o que torna a conta conferível de     */
/* olho — é para isso que a tela existe.                                */
/* ------------------------------------------------------------------ */

.maxal-quadro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    margin: 0;
}

.maxal-quadro__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
}

.maxal-quadro__rotulo {
    color: #6b7280;
    margin: 0;
}

.dark .maxal-quadro__rotulo {
    color: #9ca3af;
}

.maxal-quadro__valor {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

/* A linha que fecha um bloco: soma, esperado, diferença. */
.maxal-quadro__linha--total {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}

.dark .maxal-quadro__linha--total {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.maxal-quadro__linha--total .maxal-quadro__rotulo {
    color: inherit;
    font-weight: 500;
}

.maxal-quadro__linha--total .maxal-quadro__valor {
    font-weight: 700;
}

/* Falta ou sobra na gaveta: o número que puxa o olho. */
.maxal-quadro__valor--alerta {
    color: #be123c;
}

.dark .maxal-quadro__valor--alerta {
    color: #fda4af;
}

/* A decisao da empresa: cinza, porque nao ha nada errado ali.        */
/* O beneficio que a linha nao cadastrou, o que ela desligou de        */
/* proposito e o que depende da gerencia nao sao engano — acusa-los    */
/* em vermelho seria apontar erro em quem esta certo.                  */
.maxal-quadro__valor--decisao {
    color: #6b7280;
    font-weight: 400;
}

.dark .maxal-quadro__valor--decisao {
    color: #9ca3af;
}

/* Por que este beneficio nao da para vender nesta saida (item 22).    */
/* Quebra linha ao contrario do numero, que e sempre curto.            */
.maxal-quadro__motivo {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    white-space: normal;
}

.maxal-quadro__nota {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 1rem;
}

.dark .maxal-quadro__nota {
    color: #9ca3af;
}

/* ------------------------------------------------------------------ */
/* Lista de lançamentos: sangria, suprimento.                          */
/* ------------------------------------------------------------------ */

.maxal-lancamentos {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.maxal-lancamentos__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid #f3f4f6;
}

.dark .maxal-lancamentos__item {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.maxal-lancamentos__item:first-child {
    border-top: 0;
}

.maxal-lancamentos__detalhe {
    color: #6b7280;
}

.dark .maxal-lancamentos__detalhe {
    color: #9ca3af;
}

/* ------------------------------------------------------------------ */
/* O selo de caixa aberto no alto da tela de venda (Tela 11).          */
/* ------------------------------------------------------------------ */

.maxal-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.875rem;
}

.maxal-cabecalho__passo {
    color: #6b7280;
}

.dark .maxal-cabecalho__passo {
    color: #9ca3af;
}

.maxal-caixa__estado {
    font-weight: 600;
}

.maxal-caixa__estado--fechado {
    color: #be123c;
}

.dark .maxal-caixa__estado--fechado {
    color: #fda4af;
}

.maxal-caixa__detalhe {
    color: #6b7280;
}

.dark .maxal-caixa__detalhe {
    color: #9ca3af;
}

/* ------------------------------------------------------------------ */
/* Texto solto: explicação curta dentro de uma seção.                  */
/* ------------------------------------------------------------------ */

.maxal-nota {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.dark .maxal-nota {
    color: #9ca3af;
}

.maxal-nota strong {
    color: inherit;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Colunas com peso diferente: o mapa do ônibus manda, o painel ao     */
/* lado acompanha.                                                     */
/* ------------------------------------------------------------------ */

.maxal-colunas--principal {
    grid-template-columns: 1fr;
}

@media (min-width: 80rem) {
    .maxal-colunas--principal {
        grid-template-columns: 3fr 2fr;
    }
}

/* Seções empilhadas DENTRO de uma coluna: a página só espaça as que
   são filhas diretas dela. */
.maxal-empilhado {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Formulário escrito à mão.                                           */
/*                                                                     */
/* A busca do guichê e os dados do passageiro não passam pelo form do  */
/* Filament — são campos soltos no blade. Sem estes estilos eles saem  */
/* como controles crus do navegador: sem borda, sem respiro e com a    */
/* largura que o sistema operacional achar melhor.                     */
/* ------------------------------------------------------------------ */

.maxal-form {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    align-items: end;
}

.maxal-form--dupla {
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .maxal-form--dupla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* O campo que ocupa a linha inteira: nome do passageiro, pagamento. */
.maxal-form__largo {
    grid-column: 1 / -1;
}

.maxal-campo__rotulo {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.maxal-campo__controle {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #111827;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}

.dark .maxal-campo__controle {
    color: #e5e7eb;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.maxal-campo__controle:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
    border-color: var(--primary-500);
}

.maxal-campo__erro {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: #be123c;
}

.dark .maxal-campo__erro {
    color: #fda4af;
}

/* ------------------------------------------------------------------ */
/* Tabela de dados dentro de uma seção (as saídas encontradas).        */
/* ------------------------------------------------------------------ */

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

.maxal-tabela th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    padding: 0 1rem 0.5rem 0;
    white-space: nowrap;
}

.dark .maxal-tabela th {
    color: #9ca3af;
}

.maxal-tabela td {
    padding: 0.75rem 1rem 0.75rem 0;
    border-top: 1px solid #f3f4f6;
    vertical-align: middle;
}

.dark .maxal-tabela td {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.maxal-tabela__destaque {
    font-weight: 600;
}

.maxal-tabela__fraco {
    color: #6b7280;
}

.dark .maxal-tabela__fraco {
    color: #9ca3af;
}

.maxal-tabela__alerta {
    color: #be123c;
}

.dark .maxal-tabela__alerta {
    color: #fda4af;
}

/* A última coluna, a dos botões, encosta na borda direita. */
.maxal-tabela__acao {
    text-align: right;
    padding-right: 0;
    white-space: nowrap;
}

/* O link secundário da célula de ação — "Ver o mapa" ao lado do botão
   de escolher. Discreto de propósito: quem está vendendo aperta o
   botão, e só quem tem dúvida procura o mapa. */
.maxal-tabela__link {
    display: inline-block;
    margin-left: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-600);
    text-decoration: none;
}

.maxal-tabela__link:hover {
    text-decoration: underline;
}

.dark .maxal-tabela__link,
html.dark .maxal-tabela__link {
    color: var(--primary-400);
}

/* ------------------------------------------------------------------ */
/* Linha de botões no rodapé de uma seção.                             */
/* ------------------------------------------------------------------ */

.maxal-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.maxal-botoes--fim {
    justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* O localizador do bilhete: ditado por telefone, lido com pressa.     */
/* ------------------------------------------------------------------ */

.maxal-localizador {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

/* ------------------------------------------------------------------ */
/* Relatórios (Tela 17).                                              */
/* ------------------------------------------------------------------ */

/* Tabela larga rola dentro da própria caixa: o relatório de vendas
   detalhadas tem quinze colunas, e sem isto a página inteira ganharia
   barra horizontal e o menu sairia da tela. */
.maxal-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.maxal-tabela--fim {
    text-align: right;
    padding-right: 0;
}

.maxal-tabela__total td {
    border-top: 2px solid var(--primary-800);
    font-weight: 700;
    padding-top: 0.75rem;
}

.dark .maxal-tabela__total td {
    border-top-color: var(--primary-400);
}

/* Os filtros aplicados, escritos acima da tabela. Relatório circula
   solto — impresso, colado num e-mail, mostrado numa reunião —, e sem os
   filtros à vista o mesmo total pode significar duas coisas. */
.maxal-relatorio__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0 0 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.maxal-relatorio__filtro {
    display: inline-flex;
    gap: 0.375rem;
    align-items: baseline;
}

.maxal-relatorio__filtro-rotulo {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.dark .maxal-relatorio__filtro-rotulo {
    color: #9ca3af;
}

.maxal-relatorio__filtro-valor {
    font-weight: 600;
}

/* A lista honesta do que ainda não existe, com o motivo de cada um. */
.maxal-catalogo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 60rem) {
    .maxal-catalogo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 1.5rem;
    }
}

.maxal-catalogo__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8125rem;
}

.dark .maxal-catalogo__item {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.maxal-catalogo__nome {
    font-weight: 600;
}

.maxal-catalogo__motivo {
    color: #6b7280;
    font-size: 0.75rem;
}

.dark .maxal-catalogo__motivo {
    color: #9ca3af;
}

/* ---------------------------------------------------------------------
   Tela 15 — os quatro números da viagem e as etiquetas de embarque
   --------------------------------------------------------------------- */

/*
   Os números do cabeçalho: vendidas, receita, benefícios, já embarcaram.
   Grade que cabe em quatro no monitor e em dois no celular — quem confere
   embarque costuma estar de pé na plataforma, com o telefone na mão.
*/
.maxal-numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .maxal-numeros {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.maxal-numero {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #fff;
}

.dark .maxal-numero {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.maxal-numero__valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* O "/44" da capacidade: acompanha o número, sem competir com ele. */
.maxal-numero__de {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
}

.dark .maxal-numero__de {
    color: #9ca3af;
}

.maxal-numero__rotulo {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.dark .maxal-numero__rotulo {
    color: #9ca3af;
}

/*
   A etiqueta da coluna Embarque.

   Cor não é o único sinal: o texto já diz "Embarcou", "Aguardando" ou
   "Embarca em Campo Maior". Quem não distingue verde de âmbar lê a mesma
   informação — e a plataforma de rodoviária costuma ter sol batendo na
   tela, onde cor sozinha some.
*/
.maxal-etiqueta {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}

.dark .maxal-etiqueta {
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}

.maxal-etiqueta--ok {
    background: #dcfce7;
    color: #166534;
}

.dark .maxal-etiqueta--ok {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.maxal-etiqueta--aviso {
    background: #fef3c7;
    color: #92400e;
}

.dark .maxal-etiqueta--aviso {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

/* ---------------------------------------------------------------------
   Comunicados da Maxal no Painel do dia
   --------------------------------------------------------------------- */

.maxal-aviso {
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #fff;
}

.dark .maxal-aviso {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

/*
   Já lido continua visível, só que apagado.

   Sumir com o comunicado depois de lido seria perder o recado: quem leu
   correndo de manhã precisa reencontrá-lo à tarde, e "manutenção no
   sábado" vale até sábado passar, não até alguém clicar.
*/
.maxal-aviso--lido {
    opacity: 0.62;
}

.maxal-aviso__topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.maxal-aviso__data {
    font-size: 0.75rem;
    color: #6b7280;
    margin-left: auto;
}

.dark .maxal-aviso__data {
    color: #9ca3af;
}

.maxal-aviso__titulo {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.maxal-aviso__texto {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
}

.dark .maxal-aviso__texto {
    color: #d1d5db;
}

/* O tipo "alerta" é o único que precisa parar o olho. */
.maxal-etiqueta--alerta {
    background: #fee2e2;
    color: #991b1b;
}

.dark .maxal-etiqueta--alerta {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* ------------------------------------------------------------------ */
/* A criança de colo dentro do bloco do passageiro (guichê, passo 3).  */
/* Separada por uma linha porque é OUTRA passagem, e não mais um campo */
/* do mesmo passageiro — quem confere o bilhete precisa ver os dois.   */
/* ------------------------------------------------------------------ */

.maxal-colo {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #cbd5e1;
}

.dark .maxal-colo {
    border-top-color: rgba(255, 255, 255, 0.15);
}

/* Caixa e texto na mesma linha, e o texto clicável junto: alvo pequeno
   é alvo errado no balcão com o passageiro esperando. */
.maxal-escolha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    cursor: pointer;
    user-select: none;
}

.maxal-escolha input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--primary-600);
    cursor: pointer;
    flex: none;
}

/* ------------------------------------------------------------------ */
/* O link da ajuda, ao lado do título de cada tela.                    */
/*                                                                     */
/* Discreto de propósito: quem sabe o que está fazendo não deve tropeçar */
/* nele, e quem está travado precisa achá-lo sem procurar.             */
/* ------------------------------------------------------------------ */

.maxal-ajuda-tela a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
}

.maxal-ajuda-tela a:hover {
    color: var(--primary-800);
    text-decoration: underline;
}

.maxal-ajuda-tela svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}

.dark .maxal-ajuda-tela a { color: #94a3b8; }
.dark .maxal-ajuda-tela a:hover { color: #e2e8f0; }

/* No celular fica só o ícone: o título da tela vale mais que a palavra. */
@media (max-width: 640px) {
    .maxal-ajuda-tela span { display: none; }
}

/* A central de ajuda no pé do menu lateral. */
.maxal-ajuda-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0.75rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
}

.maxal-ajuda-menu:hover { background: #f1f5f9; color: var(--primary-800); }
.maxal-ajuda-menu svg { width: 1.5rem; height: 1.5rem; flex: none; }

.dark .maxal-ajuda-menu { color: #94a3b8; }
.dark .maxal-ajuda-menu:hover { background: rgba(255, 255, 255, .05); color: #e2e8f0; }

/* Com o menu recolhido em faixa de ícones, some o texto. */
.fi-sidebar:not(.fi-sidebar-open) .maxal-ajuda-menu span { display: none; }

/* =====================================================================
   AS OITO TELAS QUE NASCERAM COM UTILITÁRIAS (15/10/2026)

   Primeiros passos, Aceite dos termos, Precisa da sua atenção, Agenda
   do ERP, Saúde da conciliação, Inadimplência, Ativar 2FA e Senha do
   suporte foram escritas com `flex`, `mb-6`, `bg-primary-600`… — que
   não existem aqui (ver o topo deste arquivo). Saíam como texto cru:
   o aceite dos termos, a primeira tela de um cliente novo, e a barra
   de progresso dos Primeiros passos, que simplesmente não aparecia.

   As cores vêm das variáveis do Filament (`--primary-600`,
   `--success-500`…): trocar a paleta no PanelProvider vale aqui também.
   O `tests/Feature/ViewsSemUtilitariasTest.php` impede a volta.
   ===================================================================== */

/* Texto corrido de seção: parágrafos com respiro entre si. */
.maxal-texto {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.dark .maxal-texto { color: var(--gray-300); }
.maxal-texto p { margin: 0; }
.maxal-texto strong { font-weight: 600; }

.maxal-texto__fraco { color: var(--gray-500); }
.dark .maxal-texto__fraco { color: var(--gray-400); }

/* Lista vazia que é boa notícia: "nada pendente". */
.maxal-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 0;
    text-align: center;
}

.maxal-vazio__icone { color: var(--success-500); }

/* Barra de progresso (Primeiros passos). */
.maxal-progresso { margin-bottom: 1.5rem; }

.maxal-progresso__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.maxal-progresso__feitos { font-weight: 500; color: var(--gray-700); }
.dark .maxal-progresso__feitos { color: var(--gray-200); }
.maxal-progresso__percentual { color: var(--gray-500); font-variant-numeric: tabular-nums; }

.maxal-progresso__trilho {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--gray-200);
}

.dark .maxal-progresso__trilho { background: rgba(255, 255, 255, 0.1); }

.maxal-progresso__barra {
    height: 100%;
    border-radius: 9999px;
    background: var(--primary-600);
    transition: width 300ms ease;
}

/* Lista de passos: ícone, texto, ação à direita. */
.maxal-passos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.maxal-passo {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.maxal-passo + .maxal-passo { border-top: 1px solid var(--gray-200); }
.dark .maxal-passo + .maxal-passo { border-top-color: rgba(255, 255, 255, 0.1); }

.maxal-passo__icone { flex: none; margin-top: 0.125rem; color: var(--gray-400); }
.maxal-passo__icone--feito { color: var(--success-500); }

.maxal-passo__corpo { flex: 1; min-width: 0; font-size: 0.875rem; }
.maxal-passo__corpo p { margin: 0; }

.maxal-passo__titulo { font-weight: 500; color: var(--gray-950); }
.dark .maxal-passo__titulo { color: #fff; }

/* Feito sai riscado e apagado: o olho pula direto para o que falta. */
.maxal-passo__titulo--feito { color: var(--gray-500); text-decoration: line-through; }
.dark .maxal-passo__titulo--feito { color: var(--gray-500); }

.maxal-passo__detalhe { color: var(--gray-500); }
.dark .maxal-passo__detalhe { color: var(--gray-400); }

.maxal-passo__acao { flex: none; text-align: end; }

/* Os dois documentos do aceite: cartões que abrem em outra aba. */
.maxal-documentos {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .maxal-documentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.maxal-documento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
}

.maxal-documento:hover { background: var(--gray-50); }
.dark .maxal-documento { border-color: rgba(255, 255, 255, 0.1); }
.dark .maxal-documento:hover { background: rgba(255, 255, 255, 0.05); }
.maxal-documento__icone { color: var(--gray-400); }

/* Link no meio do texto. */
.maxal-link { font-weight: 500; color: var(--primary-600); text-decoration: none; }
.maxal-link:hover { text-decoration: underline; }
.dark .maxal-link { color: var(--primary-400); }

/* Rodapé de seção: botão de um lado, explicação do outro. */
.maxal-rodape {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 40rem) {
    .maxal-rodape { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Recado com cor de situação: ok, aviso, informação. */
.maxal-recado {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

.maxal-recado p { margin: 0; }
.maxal-recado p + p { margin-top: 0.25rem; }
.maxal-recado__icone { flex: none; margin-top: 0.125rem; }
.maxal-recado__titulo { font-weight: 600; }
.maxal-recado__fraco { color: var(--gray-600); }
.dark .maxal-recado__fraco { color: var(--gray-400); }

.maxal-recado--ok { border-color: var(--success-300); background: var(--success-50); }
.maxal-recado--ok .maxal-recado__icone { color: var(--success-600); }
.dark .maxal-recado--ok { border-color: color-mix(in oklab, var(--success-500) 30%, transparent); background: color-mix(in oklab, var(--success-500) 10%, transparent); }
.dark .maxal-recado--ok .maxal-recado__icone { color: var(--success-400); }

.maxal-recado--aviso { border-color: var(--warning-300); background: var(--warning-50); }
.maxal-recado--aviso .maxal-recado__icone,
.maxal-recado__alerta { color: var(--warning-700); }
.dark .maxal-recado--aviso { border-color: color-mix(in oklab, var(--warning-500) 30%, transparent); background: color-mix(in oklab, var(--warning-500) 10%, transparent); }
.dark .maxal-recado--aviso .maxal-recado__icone,
.dark .maxal-recado__alerta { color: var(--warning-300); }

.maxal-recado--info { border-color: var(--info-300); background: var(--info-50); }
.maxal-recado--info .maxal-recado__icone { color: var(--info-600); }
.dark .maxal-recado--info { border-color: color-mix(in oklab, var(--info-500) 30%, transparent); background: color-mix(in oklab, var(--info-500) 10%, transparent); }
.dark .maxal-recado--info .maxal-recado__icone { color: var(--info-400); }

/* Ativar 2FA: o QR, a chave para digitar e os códigos de recuperação. */
.maxal-qr {
    display: flex;
    justify-content: center;
    padding: 1rem;
    border-radius: 0.5rem;
    background: #fff; /* o leitor precisa do branco, inclusive no modo escuro */
}

.maxal-chave {
    margin: 0.25rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    word-break: break-all;
}

.maxal-codigos {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
}

@media (min-width: 40rem) {
    .maxal-codigos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.maxal-codigo {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--gray-50);
    text-align: center;
}

.dark .maxal-codigo { background: rgba(255, 255, 255, 0.05); }

/* Espaço acima de um bloco dentro da seção. */
.maxal-acima { margin-top: 1.5rem; }

.maxal-tabela__sem-quebra { white-space: nowrap; }

/* A segunda linha de uma célula: "até 20/10" embaixo do próximo passo. */
.maxal-tabela__sub { display: block; font-size: 0.75rem; }

/* Botões dentro de um bloco que já dá o espaço (o `maxal-empilhado`). */
.maxal-botoes--junto { margin-top: 0; }

/* Cor de situação em texto solto (HTML montado em PHP: ficha da empresa,
   fechamento de comissão, histórico). O "passou do limite" do Uso do
   plano saía sem cor nenhuma até 15/10 — a classe era do Tailwind. */
.maxal-cor-alerta { color: var(--danger-600); font-weight: 600; }
.maxal-cor-aviso { color: var(--warning-700); font-weight: 600; }
.maxal-cor-ok { color: var(--success-700); }
.maxal-cor-fraca { color: var(--gray-500); }
.dark .maxal-cor-alerta { color: var(--danger-400); }
.dark .maxal-cor-aviso { color: var(--warning-400); }
.dark .maxal-cor-ok { color: var(--success-400); }
.dark .maxal-cor-fraca { color: var(--gray-400); }