/* ============================================================
   BÔNUS DE FÁBRICA — o que o Padrão Visual Pinauto não tem

   Lista fechada (PLANO-MVP §13): só classes novas, com prefixo `bx-`, e só
   cores por `var(--…)`. Nenhum seletor de classe do Padrão aqui: a folha
   `padrao-pinauto.css` fica como veio, sem nenhuma mudança. Vira o
   `bonus/static/bonus.css` do M6.
   ============================================================ */

/* O LINK DO CONTEÚDO ("Abrir na consulta", o achado que abre o alerta,
   "Conferir", "Baixar PDF", "ver página"). O Padrão só pinta link dentro do
   menu, do login e do KPI; fora deles sairia o azul do navegador. Verde da
   casa e sublinhado, como o `.kpi a.ir` do Padrão. */
.bx-link {
    color: var(--primary-dark); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}
.bx-link:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; border-radius: 3px; }

/* A ESCOLHA ÚNICA (rádio) E A MÚLTIPLA (caixa): o motivo de "Marcar como
   resolvido", a resposta de cada ponto da carta, a marca da carta anexada e
   os perfis da conta. O Padrão não tem: o `.campo input` estica qualquer
   `input` a 100% da largura, rádio inclusive. Um clique por escolha, sem
   abrir lista. */
.bx-opcoes { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.bx-opcoes legend {
    padding: 0; margin-bottom: 4px;
    font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}
.bx-opcoes label { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; cursor: pointer; }
.bx-opcoes input[type="radio"], .bx-opcoes input[type="checkbox"] { margin: 0 6px 0 0; accent-color: var(--primary-color); }
/* O valor do "Corrigir para R$ ___" e o texto do "Outro motivo", na mesma
   linha da escolha: o mesmo campo do `.campo input`, mais estreito. */
.bx-opcoes input[type="text"] {
    font: inherit; font-size: 13px; color: var(--text);
    padding: 5px 8px; margin-left: 4px; width: 11em; max-width: 100%;
    border: 1px solid var(--bord); border-radius: 7px; background: var(--panel);
}
.bx-opcoes input[type="text"]:focus { outline: 2px solid var(--primary-dark); outline-offset: 1px; border-color: var(--primary-light); }

/* O QUE CADA LEITURA PÕE NO VA (Revisão B do M6c, telas 3): embaixo da leitura a
   escolher, na conferência (dentro do rótulo do rádio) e na decisão da dúvida (ao
   lado do botão). O tamanho e a cor da `.nota` do Padrão, numa linha só dela. */
.bx-efeito { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.bx-opcoes .bx-efeito { margin-left: 22px; }

/* AS DÚVIDAS ABERTAS DE CARTAS (Revisão B do M6c, telas 5): ficam no cartão
   "Cartas que pedem ação", porque um bloco a mais passaria dos 5 de cara, mas
   com título e moldura próprios, para não se perderem entre as cartas para
   conferir. A borda é a amarela de aviso do Padrão (`--warning`), como a do
   `.kpi.atencao`; o fundo, o `--panel-2`. */
.bx-duvidas {
    margin-top: 18px; padding: 12px 14px;
    border: 1px solid var(--bord); border-left: 4px solid var(--warning); border-radius: 8px;
    background: var(--panel-2);
}
.bx-duvidas h4 { margin: 0 0 8px; font-size: 14px; color: var(--primary-dark); }

/* O "SAIR" DO MENU (M6a): no app é POST com CSRF (PLANO-MVP §4.6), então é um botão dentro de um
   formulário, com a cara do link `.sidebar-sessao a` do Padrão. Sem cor própria: herda a da linha. */
.bx-sair {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.bx-sair:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }

/* A RESPOSTA DA CONSULTA EM DUAS COLUNAS, COM A ORDEM À DIREITA (ESPEC da
   tela-ordem, aprovada pelo Pedro em 22/10/2026, com a maquete): à esquerda
   os detalhes, sem repetir a ordem (o que a carta paga, com os casos, o VA
   hoje, as notas e "Ver detalhes", que começa pela resposta de hoje
   inteira); à direita a ordem: o rótulo, o verbo grande, o alvo (uma linha
   por ação, com o nome do código num <em> um pouco mais leve) e a
   observação. A cor da ordem é a do tipo. A ordem vem antes no HTML: o leitor de tela lê a resposta
   primeiro e, na tela estreita (até 760px), numa coluna só, ela fica em
   cima. As cores que o Padrão não tem são fichas `--bx-`, declaradas uma
   vez aqui; as que ele tem vêm dele. O contraste AA de cada tipo, com o
   texto mais apagado do card, é conferido em `tests/test_web_estilo.py`. */
:root {
    --bx-lance: var(--primary-color);
    --bx-caso: var(--primary-dark);
    --bx-cancele: #b42318;
    --bx-sobre-escuro: #ffffff;
    --bx-ok-fundo: #e7f6ee;
    --bx-ok-texto: #14512f;
    --bx-espere-fundo: #fff4dc;
    --bx-espere-texto: #7a4a00;
    --bx-espere-borda: var(--warning);
}
.bx-resposta {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
    padding: 0; overflow: hidden; max-width: 980px;
}
.bx-detalhe { grid-column: 1; grid-row: 1; padding: 18px 20px; font-size: 13.5px; line-height: 1.55; }
.bx-detalhe ul { margin: 0 0 6px; padding-left: 18px; }
/* Os rótulos da coluna da esquerda ("O que a carta paga", "No VA hoje"), como na maquete. São <h2>, para o
   leitor de tela (Revisão B, tela-2): a margem, o tamanho e a altura da linha vêm daqui, e não do navegador. */
.bx-detalhe .bx-rotulo {
    margin: 10px 0 6px; font-size: 11.5px; font-weight: 700; line-height: 1.4; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted);
}
.bx-detalhe .bx-rotulo:first-child { margin-top: 0; }
.bx-ordem {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    padding: 20px 22px; border-left: 1px solid var(--line);
}
.bx-ordem .bx-rotulo {
    margin: 0; font-size: 11.5px; font-weight: 700; line-height: 1.4; letter-spacing: .08em;
    text-transform: uppercase; opacity: .85;
}
.bx-ordem .bx-verbo { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; }
.bx-ordem .bx-alvo { margin: 0; padding: 0; list-style: none; font-size: 17px; font-weight: 700; line-height: 1.35; }
.bx-ordem .bx-alvo li { margin: 2px 0; }
.bx-ordem em { font-style: normal; font-weight: 600; opacity: .92; }
.bx-ordem .bx-alvo .bx-fraco { font-size: 14px; font-weight: 500; opacity: .9; }
.bx-ordem .bx-obs { margin: 4px 0 0; font-size: 13px; line-height: 1.45; opacity: .95; }
/* O rodapé da ordem: o que a controladoria confere depois (a opção lançada da dúvida da carta, a versão BYD
   fora da carta; ESPEC sem-espera, 22/10/2026): embaixo, menor, separado por um traço na cor do texto. */
.bx-ordem .bx-rodape {
    margin: 6px 0 0; padding-top: 8px; border-top: 1px dashed;
    font-size: 13px; font-weight: 600; line-height: 1.45;
}
.bx-ordem.bx-lance { background: var(--bx-lance); color: var(--bx-sobre-escuro); }
.bx-ordem.bx-cancele { background: var(--bx-cancele); color: var(--bx-sobre-escuro); }
.bx-ordem.bx-ok { background: var(--bx-ok-fundo); color: var(--bx-ok-texto); }
.bx-ordem.bx-espere {
    background: var(--bx-espere-fundo); color: var(--bx-espere-texto);
    border-left: 6px solid var(--bx-espere-borda);
}
.bx-ordem.bx-caso { background: var(--bx-caso); color: var(--bx-sobre-escuro); }
/* Sem carta, sem VA, sem casos e sem notas (a carta fora do sistema, a Rent a Car sem lançamento, a marca
   fora, o seminovo), a esquerda teria só "Ver detalhes": o card é uma coluna também na tela larga, com a
   ordem em cima, como na estreita (Revisão B, tela-7). O "espere" fica com a borda amarela. */
.bx-resposta.bx-uma-coluna { grid-template-columns: 1fr; }
.bx-uma-coluna > .bx-detalhe, .bx-uma-coluna > .bx-ordem { grid-column: 1; grid-row: auto; }
.bx-uma-coluna > .bx-ordem { border-bottom: 1px solid var(--line); }
.bx-uma-coluna > .bx-ordem:not(.bx-espere) { border-left: 0; }
@media (max-width: 760px) {
    .bx-resposta { grid-template-columns: 1fr; }
    .bx-detalhe, .bx-ordem { grid-column: 1; grid-row: auto; }
    .bx-ordem { border-left: 0; border-bottom: 1px solid var(--line); }
}

/* NA IMPRESSÃO (Revisão B, tela-4): quem imprime ou salva a consulta em PDF leva também a resposta de hoje
   inteira, palavra por palavra, que na tela fica no "Ver detalhes" fechado (o conteúdo do <details> aparece
   no papel; nos navegadores sem ::details-content, a regra é ignorada e o papel sai como a tela). A ordem
   sai com o fundo dela mesmo com os gráficos de fundo desligados: sem ele, o texto branco sumiria no papel. */
@media print {
    .bx-resposta details::details-content { content-visibility: visible; }
    .bx-ordem { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}