/* =========================================================================
   styleV2 — padrão visual reutilizavel (cards, cabecalho de pagina, status,
   stepper, empty state, modal) extraido de solicitacao-pecas.css (passo 9
   da feature "Importar NF-e de Entrada", ver
   docs/specs/importacao-nf-entrada/PASSO-09-brief-stylev2.md).

   Cada regra abaixo carrega DOIS seletores: o novo (".v2-*") e o legado
   (".solicitacao-pecas .sp-*" / ".modal-peca .*"), apontando para o MESMO
   bloco de declaracoes. As telas legadas (Pecas Especiais, Assistencia
   Tecnica) continuam usando os nomes "sp-*" — nao foram tocadas. Migrar
   essas telas para os nomes "v2-*" e remover o seletor legado de cada
   regra e trabalho futuro, fora deste passo.

   Sem seletor por ID, sem !important, compativel com Bootstrap 4 (nao
   substitui, complementa). Ver CLAUDE.md, secao "Padrao visual styleV2",
   para o vocabulario de classes documentado.
   ========================================================================= */

/* ── Pagina (variaveis + escopo raiz) ─────────────────────────────────── */

.v2-page,
.solicitacao-pecas {
    --sp-primary: #1778f2;
    --sp-primary-soft: #eef5ff;
    --sp-text: #2f3542;
    --sp-muted: #7b8494;
    --sp-border: #e8ebf0;
    --sp-success: #22a06b;
    --sp-success-soft: #eaf8f1;
    --sp-danger: #dc3545;
    --sp-warning-soft: #fff7e6;
    --sp-warning: #ad6800;
    /* Altura de campos, Select2 e botões da barra de filtros. Tela pode sobrescrever
       no próprio CSS (ex.: .v2-page { --v2-control-height: 36px; }). */
    --v2-control-height: 42px;

    color: var(--sp-text);
}

/* ── Cabecalho de pagina: status + codigo ─────────────────────────────── */

.v2-status,
.solicitacao-pecas .sp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .2px;
    white-space: nowrap;
}

.v2-status i,
.solicitacao-pecas .sp-status i {
    font-size: 13px;
}

.v2-status--rascunho,
.solicitacao-pecas .sp-status--rascunho {
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
}

.v2-status--enviado,
.solicitacao-pecas .sp-status--enviado {
    background: #eef1f6;
    color: #46536b;
}

.v2-status--respondido,
.solicitacao-pecas .sp-status--respondido {
    background: var(--sp-success-soft);
    color: var(--sp-success);
}

/* Publicacoes de Marketing (README area-marketing-lojista §5.3): publicada, agendada,
   arquivada e expirada. Sem equivalente legado .solicitacao-pecas. */
.v2-status--publicada {
    background: var(--sp-success-soft);
    color: var(--sp-success);
}

.v2-status--agendada {
    background: var(--sp-warning-soft);
    color: var(--sp-warning);
}

.v2-status--arquivada {
    background: #eef1f6;
    color: #6b7686;
}

.v2-status--expirada {
    background: #fdeef0;
    color: var(--sp-danger);
}

/* Solicitacoes de acesso do lojista (autocadastro): situacao do pedido e selo de comprovacao.
   Os enums StatusSolicitacaoAcesso/ComprovacaoAcesso devolvem estes nomes. */
.v2-status--pendente {
    background: var(--sp-warning-soft);
    color: var(--sp-warning);
}

.v2-status--aprovada {
    background: var(--sp-success-soft);
    color: var(--sp-success);
}

.v2-status--recusada {
    background: #fdeef0;
    color: var(--sp-danger);
}

.v2-status--comprovacao-ok {
    background: var(--sp-success-soft);
    color: var(--sp-success);
}

.v2-status--comprovacao-divergente {
    background: #fff1e0;
    color: #b45309;
}

.v2-status--comprovacao-loja-nao-encontrada {
    background: #eef1f6;
    color: #6b7686;
}

/* Acessos de lojistas (autocadastro, PASSO-05): situacao do acesso (ativo ou bloqueado pelo Marketing). */
.v2-status--ativo {
    background: var(--sp-success-soft);
    color: var(--sp-success);
}

.v2-status--bloqueado {
    background: #fdeef0;
    color: var(--sp-danger);
}

.v2-codigo,
.solicitacao-pecas .sp-codigo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #f3f5f8;
    border: 1px solid var(--sp-border);
    color: #4d5563;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.v2-page-header,
.solicitacao-pecas .sp-status-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Stepper ───────────────────────────────────────────────────────────── */

.v2-stepper,
.solicitacao-pecas .sp-stepper {
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(31, 41, 55, .03);
}

.v2-steps,
.solicitacao-pecas .sp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.v2-step,
.solicitacao-pecas .sp-step {
    display: flex;
    align-items: center;
    gap: 11px;
}

.v2-step-num,
.solicitacao-pecas .sp-step-num {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border: 2px solid #dfe5ee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #8993a4;
    background: #fff;
    flex: 0 0 auto;
}

.v2-step.is-active .v2-step-num,
.solicitacao-pecas .sp-step.is-active .sp-step-num {
    border-color: var(--sp-primary);
    background: var(--sp-primary);
    color: #fff;
}

.v2-step.is-done .v2-step-num,
.solicitacao-pecas .sp-step.is-done .sp-step-num {
    border-color: #bfe5d3;
    background: var(--sp-success-soft);
    color: var(--sp-success);
}

.v2-step strong,
.solicitacao-pecas .sp-step strong {
    display: block;
    font-size: 13px;
    line-height: 1.25;
}

.v2-step small,
.solicitacao-pecas .sp-step small {
    display: block;
    color: var(--sp-muted);
    font-size: 11px;
}

/* ── Cards e secoes ────────────────────────────────────────────────────── */

.v2-card,
.solicitacao-pecas .sp-card {
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(31, 41, 55, .035);
    margin-bottom: 20px;
    overflow: hidden;
}

.v2-card-header,
.solicitacao-pecas .sp-card-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--sp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: #fff;
}

.v2-card-header h2,
.solicitacao-pecas .sp-card-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.v2-card-header p,
.solicitacao-pecas .sp-card-header p {
    margin: 3px 0 0;
    color: var(--sp-muted);
    font-size: 12px;
}

.v2-card-body,
.solicitacao-pecas .sp-card-body {
    padding: 20px;
}

.v2-section-label,
.solicitacao-pecas .section-label {
    display: flex;
    align-items: center;
    gap: 11px;
}

.v2-section-number,
.solicitacao-pecas .section-number {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    font-weight: 700;
    flex: 0 0 auto;
}

/* ── Formulario: rotulos e campos ─────────────────────────────────────── */

.v2-page label,
.solicitacao-pecas label,
.modal-peca label {
    font-size: 12px;
    font-weight: 600;
    color: #4d5563;
    margin-bottom: 6px;
}

.v2-page .form-control,
.v2-modal .input-group-text,
.solicitacao-pecas .form-control,
.modal-peca .form-control,
.modal-peca .input-group-text {
    min-height: var(--v2-control-height, 42px);
    border-color: #dfe4eb;
    border-radius: 7px;
}

.v2-page .form-control:focus,
.solicitacao-pecas .form-control:focus,
.modal-peca .form-control:focus {
    border-color: #8abaf8;
    box-shadow: 0 0 0 .15rem rgba(23, 120, 242, .10);
}

/* ── Formulario: Select2 com a mesma cara do .form-control ─────────────── */
/* Select2 (x-select2-ajax / js-select2-auto) ao lado de inputs nativos: mesma altura,
   borda, raio e fonte, senão a linha de filtros/campos fica desalinhada. Só dentro de
   .v2-page, onde o .form-control segue --v2-control-height (42px padrão); em modal (.v2-modal, fora do .v2-page) o
   .form-control segue o tema (35px) e o Select2 padrão já tem essa medida. */

.v2-page .select2-container--default .select2-selection--single {
    height: var(--v2-control-height, 42px);
    border-color: #dfe4eb;
    border-radius: 7px;
    font-size: 13px;
}

.v2-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--v2-control-height, 42px) - 2px);
    padding-left: 10px;
    padding-right: 44px;
    color: #495057;
}

.v2-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--v2-control-height, 42px) - 2px);
    right: 6px;
}

.v2-page .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 28px;
    color: #9aa3af;
}

.v2-page .select2-container--default.select2-container--focus .select2-selection--single,
.v2-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #8abaf8;
    box-shadow: 0 0 0 .15rem rgba(23, 120, 242, .10);
}

/* ── Select2: linha de resultado com título, detalhe e selo ────────────── */
/* O dropdown do Select2 é anexado ao <body> (fora da .v2-page), por isso sem escopo.
   Classes v2-s2-* vêm dos templates de public/js/select2-ajax.js. */

.v2-s2-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-s2-detalhe {
    font-size: 11px;
    color: #6b7280;
}

.v2-s2-selo {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: #fff7e6;
    color: #ad6800;
}

.v2-s2-selo--disabled {
    background: #fdecee;
    color: #b42318;
}

.v2-s2-item.is-indisponivel strong {
    color: #8a94a3;
}

/* Item destacado (azul): título, detalhe e selo precisam continuar legíveis. */
.select2-results__option--highlighted .v2-s2-item strong,
.select2-results__option--highlighted .v2-s2-detalhe {
    color: #fff;
}

.select2-results__option--highlighted .v2-s2-selo {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Não selecionável: sem destaque azul ao passar o mouse. */
.select2-container--default .select2-results__option[aria-disabled=true] {
    cursor: not-allowed;
    background: #fafbfc;
}

/* ── Barra de filtros: botões na altura dos campos ─────────────────────── */
/* Botões (Limpar/Buscar, btn-sm) ao lado dos campos da .v2-page ficavam
   mais baixos. Na barra marcada com .v2-filtros acompanham a altura dos campos
   (--v2-control-height). */

.v2-page .v2-filtros .btn {
    min-height: var(--v2-control-height, 42px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 7px;
}

/* ── Formulario: valor somente leitura ────────────────────────────────── */

.v2-readonly-value,
.solicitacao-pecas .readonly-value {
    min-height: var(--v2-control-height, 42px);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #e4e8ee;
    border-radius: 7px;
    background: #f7f9fc;
    color: #4f5968;
    word-break: break-word;
}

.v2-readonly-value i,
.solicitacao-pecas .readonly-value i {
    color: #97a2b2;
    margin-right: 8px;
    flex: 0 0 auto;
}

.v2-readonly-value.is-empty,
.solicitacao-pecas .readonly-value.is-empty {
    color: #98a1af;
    font-style: italic;
}

/* ── Botao de acao (icone) ─────────────────────────────────────────────── */

.v2-action-btn,
.solicitacao-pecas .action-btn {
    border: 0;
    background: transparent;
    color: #9aa3b0;
    padding: 6px 8px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.v2-action-btn:hover,
.v2-action-btn:focus,
.solicitacao-pecas .action-btn:hover,
.solicitacao-pecas .action-btn:focus {
    color: var(--sp-danger);
    background: #fdeff0;
    outline: none;
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.v2-empty-state,
.solicitacao-pecas .pecas-empty-state {
    padding: 50px 20px;
    text-align: center;
    color: var(--sp-muted);
}

.v2-empty-state .v2-empty-icon,
.solicitacao-pecas .pecas-empty-state .empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #f1f5fb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8ca9cb;
    font-size: 22px;
}

.v2-empty-state h3,
.solicitacao-pecas .pecas-empty-state h3 {
    font-size: 15px;
    color: #525b68;
    margin-bottom: 5px;
}

/* ── Acao final (rodape do formulario) ────────────────────────────────── */

.v2-actions,
.solicitacao-pecas .sp-actions {
    background: #fff;
    border-top: 1px solid var(--sp-border);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.v2-actions .v2-actions-note,
.solicitacao-pecas .sp-actions .actions-note {
    color: var(--sp-warning);
    background: var(--sp-warning-soft);
    border: 1px solid #ffe7ba;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 12px;
    margin: 0;
}

/* ── Modal ─────────────────────────────────────────────────────────────── */

.v2-modal .modal-content,
.modal-peca .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(20, 27, 40, .20);
    overflow: hidden;
}

.v2-modal .modal-header,
.modal-peca .modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e8ebf0;
    align-items: flex-start;
}

.v2-modal .modal-title,
.modal-peca .modal-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
}

.v2-modal .modal-subtitle,
.modal-peca .modal-subtitle {
    color: #7b8494;
    font-size: 12px;
}

.v2-modal .modal-body,
.modal-peca .modal-body {
    padding: 22px 24px 14px;
}

.v2-modal .modal-footer,
.modal-peca .modal-footer {
    padding: 15px 24px;
    border-top: 1px solid #e8ebf0;
    background: #fafbfc;
}

@media (min-width: 992px) {
    .v2-modal .modal-dialog,
    .modal-peca .modal-dialog {
        max-width: 980px;
    }
}

/* ── Abas leves (v2-tabs) ──────────────────────────────────────────────────
   Alternativa mais leve ao destaque forte de aba documentado pro Movelbento
   (fundo + box-shadow inset — bom pra telas com muita informação por aba).
   Aqui é só texto azul + sublinhado, pra telas com poucas abas de alto nível
   (ex.: Importar/Consultar) onde o destaque pesado seria exagero. Escolher
   conforme o peso visual que a tela pede — as duas convivem no projeto. */

.v2-tabs {
    border-bottom: 1px solid var(--sp-border);
    gap: 4px;
}

.v2-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 4px;
    margin-right: 22px;
    color: var(--sp-muted);
    font-weight: 600;
    font-size: 14px;
}

.v2-tabs .nav-link:hover {
    color: var(--sp-text);
    border-color: var(--sp-border);
}

.v2-tabs .nav-link.active {
    color: var(--sp-primary);
    border-color: var(--sp-primary);
    background: transparent;
}

/* ── Zona de upload (arrastar e soltar) ───────────────────────────────────
   `.v2-dropzone` é só o contêiner visual — quem liga o drag&drop de verdade
   é o JS da tela (dragover/dragleave/drop no elemento + input[type=file]
   escondido, disparado por clique). `.is-dragover` é o único hook de
   estado que o JS mexe; o resto (arquivo escolhido, nome do arquivo) fica
   a critério de cada tela. */

.v2-dropzone {
    border: 2px dashed #c7d2e0;
    border-radius: 12px;
    background: #fafbfc;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.v2-dropzone:hover,
.v2-dropzone.is-dragover {
    border-color: var(--sp-primary);
    background: var(--sp-primary-soft);
}

.v2-dropzone-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.v2-dropzone-texto {
    font-weight: 600;
    color: var(--sp-text);
    margin-bottom: 2px;
}

.v2-dropzone-sub {
    color: var(--sp-muted);
    font-size: 12px;
}

.v2-dropzone-arquivo {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
    font-size: 12px;
    font-weight: 600;
}

/* ── Filtro de recorte (pills) ─────────────────────────────────────────────
   Alternativa ao btn-group quadrado do Bootstrap — pílulas soltas, com gap
   entre elas (não fundidas), cada uma com sua própria cor quando ativa. */

.v2-recorte {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v2-recorte .btn {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid var(--sp-border);
    background: #fff;
    color: var(--sp-muted);
}

.v2-recorte .btn .badge {
    margin-left: 4px;
}

.v2-recorte .btn.active {
    color: var(--sp-primary);
    border-color: #bcd8fc;
    background: var(--sp-primary-soft);
}

.v2-recorte .btn[data-recorte="lancadas"].active {
    color: var(--sp-success);
    border-color: #bfe5d3;
    background: var(--sp-success-soft);
}

.v2-recorte .btn[data-recorte="nao_lancadas"].active {
    color: var(--sp-warning);
    border-color: #ffe7ba;
    background: var(--sp-warning-soft);
}

.v2-recorte .btn[data-recorte="divergencia_icms"].active {
    color: var(--sp-danger);
    border-color: #f3c2c8;
    background: #fdeef0;
}

/* Canceladas (na SEFAZ) — plano "Notas canceladas + CT-e de Entrada", passo 6.
   Mesma paleta danger de divergencia_icms (nunca ativas ao mesmo tempo — só
   um recorte por vez — então a cor repetida não confunde). */
.v2-recorte .btn[data-recorte="canceladas"].active {
    color: var(--sp-danger);
    border-color: #f3c2c8;
    background: #fdeef0;
}

/* ── Barra de aviso informativo ───────────────────────────────────────────
   Dica sempre visível (formato de data, regra de preenchimento) — diferente
   de `<x-hint-text>` (que vira badge com tooltip em telas pequenas): esta
   fica sempre expandida, pra avisos curtos que valem estar sempre à vista. */

.v2-info-bar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--sp-primary-soft);
    border: 1px solid #d7e8fd;
    border-radius: 8px;
    padding: 10px 14px;
    color: #3a5a86;
    font-size: 12px;
}

.v2-info-bar i {
    color: var(--sp-primary);
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ── Cabeçalho de tabela (v2-table) ────────────────────────────────────────
   Aplica em qualquer <table> dentro de .v2-page — maiúsculas, espaçado,
   cinza, sem borda pesada. Não redefine .table-striped/.table-sm do
   Bootstrap, só o cabeçalho. */

.v2-page table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--sp-muted);
    border-top: 0;
    border-bottom: 1px solid var(--sp-border);
    white-space: nowrap;
}

/* ── Toolbar do DataTable (recorte + Exportar / Exibir + Mostrando) ───────
   Layout compacto: recorte e o botão Exportar na mesma linha (o recorte é
   markup fixo do Blade, movido pra dentro de `.v2-dt-toolbar-left` via JS
   no `initComplete` — dom string do DataTables só posiciona tokens nativos
   l/f/B/i/p, não aceita HTML arbitrário); "Exibir" (token `l`) e
   "Mostrando..." (token `i`) juntos na linha de baixo, à esquerda da
   paginação. Ver `nf-entrada.js` (dom string + initComplete) como
   referência completa de como montar isso numa tela nova. */

.v2-dt-toolbar-left {
    gap: 14px;
}

/* Busca empurrada pro fim da MESMA faixa dos botões — sem isto ela ficaria
   logo depois do último botão, no meio da linha. `float` do CSS nativo do
   DataTables não vale nada aqui (o contêiner é flex), daí o margin-left. */
.v2-dt-toolbar-left .dataTables_filter {
    margin-left: auto;
    margin-bottom: 0;
}

.v2-dt-toolbar-left .dataTables_filter label {
    margin-bottom: 0;
}

.v2-dt-toolbar-bottom-left {
    gap: 16px;
}

.v2-dt-toolbar-bottom-left .dataTables_length,
.v2-dt-toolbar-bottom-left .dataTables_info {
    margin: 0;
    white-space: nowrap;
}

/* ── Dropdown de exportação (DataTables Buttons "collection") ────────────
   ⚠️ O Buttons renderiza o collection de DUAS formas, dependendo de ter ou
   não a integração Bootstrap carregada: `div.dt-button-collection` (estilo
   próprio) ou `div.dropdown-menu` com `a.dt-button.dropdown-item` (integração
   BS4). No bundle deste projeto (`public/plugins/DataTables/datatables.min.js`)
   sai a SEGUNDA forma — estilizar só `dt-button-collection` não pega nada.
   Por isso os dois seletores abaixo. Sintoma de quando falha: o rótulo do item
   vaza pra fora da caixa do menu, porque o menu fica com a largura do botão
   que o abriu em vez de acompanhar o texto. */

div.dt-button-collection,
.dt-buttons .dropdown-menu {
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(31, 41, 55, .12);
    padding: 6px;
    z-index: 2001;
    /* `width:auto` + `min-width` derruba a largura estreita herdada do botão;
       sem isto o texto do item sai da caixa. */
    width: auto;
    min-width: 240px;
}

div.dt-button-collection .dt-button,
.dt-buttons .dropdown-menu .dt-button,
.dt-buttons .dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--sp-text);
    font-size: 13px;
    /* nowrap pra não quebrar "Divergências de ICMS (XLSX)" em duas linhas —
       a caixa cresce com o texto por causa do width:auto acima. */
    white-space: nowrap;
}

div.dt-button-collection .dt-button:hover,
.dt-buttons .dropdown-menu .dt-button:hover,
.dt-buttons .dropdown-menu .dropdown-item:hover {
    background: #f3f5f8;
    color: var(--sp-text);
}

/* ── Responsivo ────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .v2-steps,
    .solicitacao-pecas .sp-steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .v2-card-header,
    .solicitacao-pecas .sp-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .v2-card-header .btn,
    .solicitacao-pecas .sp-card-header .btn {
        width: 100%;
    }

    .v2-actions,
    .solicitacao-pecas .sp-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .v2-actions .btn,
    .solicitacao-pecas .sp-actions .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .v2-card-body,
    .solicitacao-pecas .sp-card-body {
        padding: 16px;
    }

    .v2-modal .modal-body,
    .modal-peca .modal-body {
        padding: 18px 16px 10px;
    }

    .v2-modal .modal-header,
    .v2-modal .modal-footer,
    .modal-peca .modal-header,
    .modal-peca .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ── Chip, card de midia, selo "Novo" e avatar (genericos) ──────────────────
   Usados pelo feed/gestao do Marketing, mas sem nada especifico dele.
   A cor do chip vem da custom property --chip-cor (padrao: azul do tema). */

.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--chip-cor, var(--sp-primary));
    background: var(--sp-primary-soft);
    background: color-mix(in srgb, var(--chip-cor, var(--sp-primary)) 11%, #fff);
}

.v2-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.v2-chip--sem-ponto::before {
    display: none;
}

.v2-media-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.v2-media-card:hover {
    border-color: #dde3ec;
    box-shadow: 0 14px 34px rgba(31, 41, 55, .10);
    transform: translateY(-2px);
}

.v2-media-card-capa {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f3f6;
}

.v2-media-card-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.v2-media-card:hover .v2-media-card-capa img {
    transform: scale(1.035);
}

.v2-media-card-corpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 16px;
}

.v2-badge-novo {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sp-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;
    box-shadow: 0 4px 10px rgba(23, 120, 242, .30);
}

.v2-avatar {
    --v2-avatar-size: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--v2-avatar-size);
    height: var(--v2-avatar-size);
    border-radius: 50%;
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    font-size: calc(var(--v2-avatar-size) * .38);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow: hidden;
    flex: 0 0 auto;
}

.v2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-avatar--sm {
    --v2-avatar-size: 28px;
}

.v2-avatar--lg {
    --v2-avatar-size: 48px;
}