/* ---------------------------------------------------------------------------
   Taxas e Permissoes do originador — handoff `taxas_perms` (tema verde claro).

   Veste `layout_taxas_perms` / `bloco_taxas_originador` / `conteudo_taxas_originador`
   (`layouts/erp/antecipacoes.py`) e o que `callbacks_taxas_permissoes.py` monta. O bloco
   de taxas tambem vive no modal das Disponibilidades, entao nada aqui e escopado na
   pagina — as classes nascem so neste bloco.

   Reusa `filtros_estoque_v2`/`campo_estoque_v2` (estoque), `cartao_v2`/`rotulo_secao_v2`, `btn_acoes_v2`, `pill_*_estoque_v2`,
   `estado_vazio_v2` e os `--v-destrutivo-*` (acessos).
   --------------------------------------------------------------------------- */

:root {
    --v-tp-texto-mudo: #93A6A0;
    --v-tp-rodape: #FAFCFB;
    --v-tp-desabilitado: #EEF2F1;
    --v-tp-pendente: #B07F1F;
}

/* ============================================================ BARRA DE FILTROS */

/* Barra unica: campos e botao na mesma linha, sem o rotulo "FILTROS". */
.barra_filtros_tp_v2 {
    background: var(--v-tab-hover);
    border-color: var(--v-tab-divisoria);
    padding: 16px 22px;
    margin-bottom: 14px;
}

.barra_filtros_tp_v2 .linha_filtros_estoque_v2 {
    gap: 14px;
}

/* Seletor de originador (dmc.Select): rotulo em cima, campo esticando ate 560px. */
.seletor_og_tp_v2 {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.barra_filtros_tp_v2 .seletor_og_tp_v2 {
    flex: 1;
    min-width: 260px;
    max-width: 560px;
}

.input_select_og_tp_v2 {
    height: 42px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
    background: #fff;
}

.input_select_og_tp_v2:focus,
.input_select_og_tp_v2[data-expanded] {
    border-color: var(--v-verde-escuro);
}

.input_select_og_tp_v2::placeholder {
    font-weight: 600;
    color: var(--v-tp-texto-mudo);
}

.opcao_select_og_tp_v2 {
    padding: 9px 12px;
    margin-bottom: 2px;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
    border-radius: 6px;
}

/* hover e a opcao destacada pelo teclado no verde do tema; o `.mantine-Select-option`
   junto empata a especificidade com o hover cinza do Mantine e vence por vir depois */
.mantine-Select-option.opcao_select_og_tp_v2:hover,
.mantine-Select-option.opcao_select_og_tp_v2[data-combobox-selected] {
    background: var(--v-claro);
    color: var(--v-verde-escuro);
}

/* a ja escolhida (check do Mantine) */
.mantine-Select-option.opcao_select_og_tp_v2[data-checked] {
    background: var(--v-tint);
    color: var(--v-verde-escuro);
}

.campo_usuario_tp_v2 {
    flex: 1;
    min-width: 260px;
    max-width: 420px;
}

.campo_usuario_tp_v2 input {
    width: 100%;
}

/* Seletor no cabecalho do cartao (Permissoes): 36px, como os botoes ao lado. */
.seletor_og_tp_compacto_v2 {
    width: 300px;
}

.seletor_og_tp_compacto_v2 .input_select_og_tp_v2 {
    height: 36px;
}

/* ============================================================ CARTAO DE TABELA */

.cartao_tabela_tp_v2 {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    background: #fff;
    font-family: Manrope, sans-serif;
}

.cabecalho_cartao_tp_v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
}

.titulos_cartao_tp_v2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.apoio_cartao_tp_v2 {
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tp-texto-mudo);
}

.acoes_cartao_tp_v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input_cabecalho_tp_v2 input {
    box-sizing: border-box;
    width: 220px;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.input_cabecalho_tp_v2 input:focus {
    border-color: var(--v-verde-escuro);
}

.feedback_cartao_tp_v2 {
    padding: 0 22px;
}

.feedback_cartao_tp_v2:empty {
    display: none;
}

.rolagem_grade_tp_v2 {
    overflow-x: auto;
}

.min_taxas_tp_v2 {
    min-width: 760px;
}

.min_perms_tp_v2 {
    min-width: 640px;
}

/* ---- grade (cabecalho e linhas dividem as colunas) ---- */

.grade_taxas_tp_v2,
.grade_perms_tp_v2,
.grade_diff_tp_v2 {
    display: grid;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.grade_taxas_tp_v2 {
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr .6fr 48px;
}

.grade_perms_tp_v2 {
    grid-template-columns: .7fr 1.1fr 2.4fr 64px;
}

.grade_diff_tp_v2 {
    grid-template-columns: 1.3fr 1fr 1.6fr;
}

.cabecalho_grade_tp_v2 {
    padding: 12px 22px;
    border-top: 1px solid var(--v-tab-divisoria);
    background: var(--v-tab-cabecalho);
    font: 800 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

.linha_grade_tp_v2 {
    padding: 10px 22px;
    border-top: 1px solid var(--v-tab-divisoria);
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.grade_perms_tp_v2.linha_grade_tp_v2 {
    padding: 12px 22px;
}

.grade_perms_tp_v2.linha_grade_tp_v2:hover {
    background: var(--v-tab-hover);
}

.linha_nova_tp_v2 {
    background: var(--v-tab-hover);
}

.forte_grade_tp_v2 {
    font-weight: 700;
}

.sub_grade_tp_v2 {
    color: var(--v-texto-inativo);
}

.badge_tipo_tp_v2 {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--v-borda-tint);
    border-radius: 999px;
    background: var(--v-tint);
    font: 800 11.5px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    text-transform: uppercase;
}

.marca_nova_tp_v2 {
    font: 800 10.5px Manrope, sans-serif;
    letter-spacing: .4px;
    color: var(--v-verde-escuro);
}

.linha_grade_tp_v2 > .estado_vazio_v2,
[id="linhas_perms_antecipacoes"] > .estado_vazio_v2 {
    border-top: 1px solid var(--v-tab-divisoria);
}

/* ---- celula editavel ---- */

.celula_taxa_v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.input_celula_taxa_v2 {
    width: 96px;
}

.input_celula_taxa_v2 input {
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 8px;
    background: #fff;
    font: 700 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
    text-align: center;
}

.input_celula_taxa_v2 input:focus {
    border-color: var(--v-verde-escuro);
    outline: none;
}

/* Valor diferente do original: ambar, e o "antes X" embaixo. */
.alterada_celula_taxa_v2 .input_celula_taxa_v2 input {
    border-color: var(--v-aviso-icone);
    background: var(--v-aviso-fundo);
}

.antes_celula_taxa_v2 {
    font: 600 11px Manrope, sans-serif;
    color: var(--v-tp-texto-mudo);
}

.antes_celula_taxa_v2:empty {
    display: none;
}

/* ---- rodape ---- */

.rodape_cartao_tp_v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
    border-top: 1px solid var(--v-tab-divisoria);
    background: var(--v-tp-rodape);
}

.contador_tp_v2 {
    font: 600 12.5px Manrope, sans-serif;
    color: var(--v-tp-texto-mudo);
}

.pendente_contador_tp_v2 {
    color: var(--v-tp-pendente);
}

/* ============================================================ BOTOES */

/* Escopo nos blocos da tela: a pele do outline/desabilitado e do handoff, nao do portal.
   Tres classes para vencer o `.btn_acoes_v2.mantine-Button-root` (42px). */
.btn_acoes_v2.btn_compacto_tp_v2.mantine-Button-root {
    height: 36px;
    padding: 0 14px;
    font: 800 12.5px Manrope, sans-serif;
}

:is(.bloco_taxas_tp_v2, .tela_taxas_perms_v2, .painel_modal_tp_v2) .btn_acoes_v2.mantine-Button-root[data-variant="outline"] {
    border-color: var(--v-borda-tint);
    background: #fff;
    color: var(--v-verde-escuro);
}

:is(.bloco_taxas_tp_v2, .tela_taxas_perms_v2, .painel_modal_tp_v2) .btn_acoes_v2.mantine-Button-root[data-variant="outline"]:hover {
    background: var(--v-tint);
}

.btn_acoes_v2.btn_neutro_tp_v2.mantine-Button-root {
    border-color: var(--v-borda-input);
    color: var(--v-texto-inativo);
}

.btn_acoes_v2.btn_neutro_tp_v2.mantine-Button-root:disabled,
.btn_acoes_v2.btn_neutro_tp_v2.mantine-Button-root[data-disabled] {
    background: #fff;
    opacity: .5;
}

:is(.bloco_taxas_tp_v2, .tela_taxas_perms_v2, .painel_modal_tp_v2) .btn_acoes_v2.mantine-Button-root[data-variant="filled"]:disabled,
:is(.bloco_taxas_tp_v2, .tela_taxas_perms_v2, .painel_modal_tp_v2) .btn_acoes_v2.mantine-Button-root[data-variant="filled"][data-disabled] {
    background: var(--v-tp-desabilitado);
    color: var(--v-tp-texto-mudo);
}

.btn_acoes_v2.btn_destrutivo_tp_v2.mantine-Button-root {
    background: var(--v-destrutivo);
}

.btn_acoes_v2.btn_destrutivo_tp_v2.mantine-Button-root:hover {
    background: var(--v-destrutivo-hover);
}

.grade_perms_tp_v2 > div:last-child {
    display: flex;
    justify-content: center;
}

.btn_remover_tp_v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--v-destrutivo-borda);
    border-radius: 8px;
    background: var(--v-destrutivo-tint);
    color: var(--v-destrutivo);
    cursor: pointer;
}

.btn_remover_tp_v2:hover {
    border-color: var(--v-destrutivo);
}

/* ============================================================ COMERCIAL */

.cartao_comercial_tp_v2 {
    margin-bottom: 14px;
}

.linha_comercial_tp_v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.nome_comercial_tp_v2 {
    font: 700 14px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* ============================================================ MODAL */

.fundo_modal_tp_v2.show {
    background: rgba(18, 42, 35, .45);
    opacity: 1;
}

.dialogo_modal_tp_v2 {
    max-width: 720px;
    padding: 0 24px;
}

.painel_modal_tp_v2 {
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(18, 42, 35, .25);
    font-family: Manrope, sans-serif;
}

.cabecalho_modal_tp_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--v-tab-divisoria);
}

.titulo_modal_tp_v2 {
    font: 800 17px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.subtitulo_modal_tp_v2 {
    margin-top: 3px;
    font: 500 12.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.subtitulo_modal_tp_v2:empty {
    display: none;
}

.fechar_modal_tp_v2 {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--v-tab-texto-sub);
}

.fechar_modal_tp_v2:hover {
    background: var(--v-tab-cabecalho);
}

.corpo_modal_tp_v2 {
    padding: 18px 22px;
}

.texto_modal_tp_v2 {
    font: 500 13.5px/1.55 Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.rodape_modal_tp_v2 {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--v-tab-divisoria);
}

.rodape_modal_tp_v2 .btn_acoes_v2.mantine-Button-root {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
}

/* ---- tabela antes -> depois ---- */

.tabela_diff_tp_v2 {
    overflow: hidden;
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
}

.tabela_diff_tp_v2 .cabecalho_grade_tp_v2 {
    padding: 11px 16px;
    border-top: 0;
}

.tabela_diff_tp_v2 .linha_grade_tp_v2 {
    padding: 12px 16px;
}

.valores_diff_tp_v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.antes_diff_tp_v2 {
    color: var(--v-tp-texto-mudo);
    text-decoration: line-through;
}

.seta_diff_tp_v2 {
    color: var(--v-tp-texto-mudo);
}

.depois_diff_tp_v2 {
    font-weight: 800;
}

.subiu_diff_tp_v2 {
    color: var(--v-destrutivo);
}

.desceu_diff_tp_v2 {
    color: var(--v-verde-escuro);
}

/* ============================================================ MOBILE */

@media (max-width: 768px) {
    .barra_filtros_tp_v2 .seletor_og_tp_v2,
    .campo_usuario_tp_v2 {
        max-width: none;
    }

    .acoes_cartao_tp_v2 {
        flex-wrap: wrap;
        width: 100%;
    }

    .input_cabecalho_tp_v2,
    .input_cabecalho_tp_v2 input,
    .seletor_og_tp_compacto_v2 {
        flex: 1;
        width: 100%;
    }
}