/* ---------------------------------------------------------------------------
   Modal do ticket (aba Status) — handoff `modal_ticket`.

   Monta em `toggle_modal` e nos callbacks das abas (`callbacks/callbacks_operacoes.py`);
   os helpers de desenho estao em `utils/common_operacoes.py` (secao "modal do ticket") e a
   timeline em `utils/ticket_history.py` (`ticket_history_timeline_v2`).

   O painel e o cabecalho sao os dos outros modais do v2 (`painel_modal_remessas_v2`,
   `cabecalho_modal_remessas_v2`, `fechar_gaveta_solic`, em `tema_solicitacoes_v2.css`),
   com o corpo branco (`painel_modal_branco_v2`). Badges, segmentado e anel sao os da aba
   Status (`tema_status_operacoes_v2.css`).

   As abas sao `dbc.Tabs`: `tema_conteudo_v2.css` pinta toda `.nav-tabs` com
   `!important` debaixo de `:root:has(#sidebar.sidebar_v2)`, entao as regras das pills
   repetem esse ancoradouro para vencer.

   Tokens: os `--v-*` de `tema_conteudo_v2.css`.
   --------------------------------------------------------------------------- */

.painel_modal_ticket_v2 {
    font-family: Manrope, sans-serif;
}

.painel_modal_ticket_v2 .cabecalho_modal_remessas_v2 {
    padding: 22px 32px 18px;
}

.painel_modal_remessas_v2.painel_modal_ticket_v2 .modal-body {
    padding: 0 32px 28px;
}

.linha_titulo_modal_ticket_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.titulo_secao_modal_ticket_v2 {
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* ============================================================ ABAS */

/* As abas sao as do portal (`gen_inner_tabs_layout`: chips na faixa `faixa_subabas_v2`,
   em `tema_conteudo_v2.css`, e o Select no mobile). Aqui so o respiro do corpo ate a faixa
   e o card com borda em volta do conteudo de cada aba. */
.abas_modal_ticket_v2 {
    padding-top: 10px;
}

.cartao_aba_modal_ticket_v2 {
    padding: 22px;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
}

/* Contador de erros ao lado do titulo da aba (era o rotulo da pill, que o
   `gen_inner_tabs_layout` monta sem id). */
.linha_titulo_erros_modal_ticket_v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contador_erros_modal_ticket_v2:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #FCF7EC;
    font: 800 11px Manrope, sans-serif;
    color: #8A6A1F;
}

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

.painel_modal_ticket_v2 .btn_primario_modal_ticket_v2.mantine-Button-root,
.painel_modal_ticket_v2 .btn_secundario_modal_ticket_v2.mantine-Button-root {
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font: 800 13px Manrope, sans-serif;
}

.painel_modal_ticket_v2 .btn_primario_modal_ticket_v2.mantine-Button-root {
    height: 40px;
    padding: 0 20px;
}

.painel_modal_ticket_v2 .btn_secundario_modal_ticket_v2.mantine-Button-root {
    border-color: var(--v-borda-tint);
    background: #fff;
    color: var(--v-verde-escuro);
}

.painel_modal_ticket_v2 .btn_secundario_modal_ticket_v2.mantine-Button-root:hover {
    background: var(--v-tint);
}

/* ============================================================ EXTRATO */

.controles_extrato_modal_ticket_v2 {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.rotulo_controle_modal_ticket_v2 {
    margin-bottom: 7px;
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.segmentado_modal_ticket_v2.mantine-SegmentedControl-root {
    height: 38px;
}

/* Ocorrencias: `dbc.Checklist` desenhado como chips toggle (38px, radius 10px, check
   quando marcado). O checkbox em si some; o `<label>` e o chip. */
.chips_ocorrencia_modal_ticket_v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 38px;
}

.chips_ocorrencia_modal_ticket_v2 .form-check {
    margin: 0;
    padding: 0;
    min-height: 0;
}

.chips_ocorrencia_modal_ticket_v2 .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chips_ocorrencia_modal_ticket_v2 .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    background: #fff;
    font: 700 12.5px Manrope, sans-serif;
    color: var(--v-texto-inativo);
    cursor: pointer;
}

.chips_ocorrencia_modal_ticket_v2 .form-check-label:hover {
    border-color: var(--v-verde-escuro);
}

.chips_ocorrencia_modal_ticket_v2 .form-check-input:checked + .form-check-label {
    border-color: var(--v-borda-tint);
    background: var(--v-tint);
    color: var(--v-verde-escuro);
}

.chips_ocorrencia_modal_ticket_v2 .form-check-input:checked + .form-check-label::before {
    content: '✓';
    font-weight: 800;
}

.conteudo_extrato_modal_ticket_v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.header_resumo_extrato_v2,
.linha_resumo_extrato_v2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    text-align: right;
}

.header_resumo_extrato_v2 {
    background: var(--v-tab-cabecalho);
    font: 800 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

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

/* Liquido do lado (entrada + saida): fecha o bloco do ativo / passivo. */
.linha_liquido_resumo_extrato_v2 {
    border-top-color: #D5E0DC;
    background: #F7FAF9;
    font-weight: 800;
}

.celula_nome_resumo_extrato_v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.ponto_resumo_extrato_v2 {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ponto_ativo_extrato_v2 { background: #9CCBBB; }
.ponto_passivo_extrato_v2 { background: #D9A13B; }

/* Acordeoes Ativo / Passivo (`dbc.Accordion`). */
.acordeao_extrato_v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: var(--v-tab-hover);
    --bs-accordion-active-color: var(--v-tab-texto);
}

.acordeao_extrato_v2 > .accordion-item {
    overflow: hidden;
    border: 1px solid var(--v-tab-divisoria) !important;
    border-radius: 10px !important;
}

.acordeao_extrato_v2 > .accordion-item > .accordion-header .accordion-button {
    padding: 14px 18px;
    font: 800 13.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
    box-shadow: none;
}

.acordeao_interno_extrato_v2 .accordion-button {
    padding: 10px 18px;
    font: 700 12.5px Manrope, sans-serif;
    color: var(--v-texto-inativo);
    background: #fff;
}

.acordeao_interno_extrato_v2 .accordion-body {
    font: 500 12.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ============================================================ LASTROS */

.dropzone_modal_ticket_v2 {
    margin-bottom: 14px;
    padding: 22px;
    border: 1.5px dashed var(--v-borda-tint);
    border-radius: 10px;
    background: var(--v-tab-hover);
    cursor: pointer;
}

.dropzone_modal_ticket_v2:hover {
    background: var(--v-tint);
}

.conteudo_dropzone_modal_ticket_v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 600 13.5px Manrope, sans-serif;
    color: var(--v-texto-inativo);
}

.conteudo_dropzone_modal_ticket_v2 svg,
.conteudo_dropzone_modal_ticket_v2 b {
    color: var(--v-verde-escuro);
}

.acoes_lastro_modal_ticket_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filtro_lastro_modal_ticket_v2 {
    width: 220px;
}

.filtro_lastro_modal_ticket_v2 .mantine-Input-input {
    height: 38px;
    border-color: var(--v-borda-input);
    border-radius: 10px;
    font: 600 13px Manrope, sans-serif;
}

.exportar_lastro_modal_ticket_v2 {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* Card da tabela, com as sub-abas (Lastros / Nao identificados) numa faixa em cima:
   pills pequenas de 32px, a ativa branca com texto verde. */
.cartao_lastro_modal_ticket_v2 {
    overflow: hidden;
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
}

:root:has(#sidebar.sidebar_v2) .subabas_modal_ticket_v2 > .nav-tabs,
.subabas_modal_ticket_v2 > .nav-tabs {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--v-tab-divisoria);
    background: var(--v-tab-hover);
}

.subabas_modal_ticket_v2 > .nav-tabs .nav-link {
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: 700 12.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

:root:has(#sidebar.sidebar_v2) .subabas_modal_ticket_v2 > .nav-tabs .nav-link:hover {
    color: var(--v-verde-escuro) !important;
    border-color: transparent !important;
}

:root:has(#sidebar.sidebar_v2) .subabas_modal_ticket_v2 > .nav-tabs .nav-link.active,
.subabas_modal_ticket_v2 > .nav-tabs .nav-link.active {
    border-color: var(--v-tab-divisoria) !important;
    background: #fff;
    color: var(--v-verde-escuro) !important;
}

.rolagem_lastro_modal_ticket_v2 {
    max-height: 350px;
    overflow-y: auto;
}

.cartao_lastro_modal_ticket_v2 .table {
    margin: 0;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.cartao_lastro_modal_ticket_v2 .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 16px;
    border-bottom: 1px solid var(--v-tab-divisoria);
    background: var(--v-tab-cabecalho);
    font: 800 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    white-space: nowrap;
}

.cartao_lastro_modal_ticket_v2 .table tbody td {
    padding: 12px 16px;
    border-color: var(--v-tab-divisoria);
    vertical-align: middle;
}

.cartao_lastro_modal_ticket_v2 .table a {
    font-weight: 700;
    color: var(--v-verde-escuro);
    text-decoration: none;
}

.cartao_lastro_modal_ticket_v2 .table a:hover {
    text-decoration: underline;
}

/* As celulas de cedente, sacado, valor e arquivo usam `dmc.Text` (o `sent_lastros` monta
   assim), que chega com o tamanho do Mantine (16px); aqui ele segue a tabela. O `size="xs"`
   (documento, nominal/aquisicao) vira a linha de apoio. */
.cartao_lastro_modal_ticket_v2 .table .mantine-Text-root {
    font: 600 13px Manrope, sans-serif;
    color: inherit;
}

.cartao_lastro_modal_ticket_v2 .table .mantine-Text-root[data-size="xs"] {
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* Excluir (lixeira) e pre-visualizar (olho): `dbc.Button` outline, no quadrado de 32px
   dos botoes pequenos do v2. */
.cartao_lastro_modal_ticket_v2 .btn-outline-danger,
.cartao_lastro_modal_ticket_v2 .btn-outline-black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
}

.cartao_lastro_modal_ticket_v2 .btn-outline-danger {
    border-color: #F0D5D0;
    color: var(--v-destrutivo);
}

.cartao_lastro_modal_ticket_v2 .btn-outline-danger:hover {
    border-color: var(--v-destrutivo);
    background: #FDF6F4;
    color: var(--v-destrutivo);
}

.cartao_lastro_modal_ticket_v2 .btn-outline-black {
    border: 1px solid var(--v-borda-input);
    color: var(--v-texto-inativo);
}

.cartao_lastro_modal_ticket_v2 .btn-outline-black:hover {
    background: var(--v-tab-cabecalho);
}

.cartao_lastro_modal_ticket_v2 .table tbody td.celula_callout_lastro_v2 {
    padding: 18px;
    border: 0;
}

.paginacao_lastro_modal_ticket_v2 {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--v-tab-divisoria);
}

.paginacao_lastro_modal_ticket_v2 .mantine-Pagination-control {
    min-width: 32px;
    height: 32px;
    border-color: var(--v-borda-input);
    border-radius: 8px;
    font: 700 12.5px Manrope, sans-serif;
}

.paginacao_lastro_modal_ticket_v2 .mantine-Pagination-control[data-active] {
    border-color: var(--v-verde-escuro);
    background: var(--v-verde-escuro);
}

/* O conteudo da sub-aba "Nao identificados" (tabela + preview) ganha respiro do card. */
.cartao_lastro_modal_ticket_v2 .tab-pane > div > .row {
    margin: 0;
    padding: 12px;
}

/* ============================================================ TERMO / ASSINATURA */

.cabecalho_termo_modal_ticket_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.esq_cabecalho_termo_v2,
.dir_cabecalho_termo_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* "Copiar todos os links": o `dcc.Clipboard` cobre o botao inteiro, entao clicar no
   texto tambem copia; o icone dele (que vira check por um instante ao copiar) fica a
   esquerda, no lugar do icone do botao. */
.btn_copiar_todos_v2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px 0 38px;
    border: 1px solid var(--v-borda-tint);
    border-radius: 10px;
    background: #fff;
    font: 800 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    white-space: nowrap;
}

.btn_copiar_todos_v2:hover {
    background: var(--v-tint);
}

.btn_copiar_todos_v2 .clip_copiar_todos_v2 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-left: 14px;
    cursor: pointer;
}

.grade_termo_v2 {
    display: grid;
    grid-template-columns: 1fr 1fr 2.2fr;
    gap: 20px 28px;
    margin-bottom: 20px;
}

.rotulo_campo_termo_v2 {
    margin-bottom: 6px;
    font: 600 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

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

.valor_vazio_termo_v2 {
    font-weight: 600;
    color: #93A6A0;
}

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

.link_doc_modal_ticket_v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--v-borda-tint);
    border-radius: 8px;
    background: #fff;
    font: 700 12.5px Manrope, sans-serif;
    color: var(--v-verde-escuro) !important;
    text-decoration: none;
}

a.link_doc_modal_ticket_v2:hover {
    background: var(--v-tint);
}

.link_doc_indisponivel_v2 {
    border-color: var(--v-tab-divisoria);
    color: #93A6A0 !important;
    cursor: default;
}

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

.header_signatarios_v2,
.linha_signatarios_v2 {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .9fr);
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
}

.header_signatarios_v2 {
    background: var(--v-tab-cabecalho);
    font: 800 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

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

.celula_signatario_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.avatar_signatario_v2 {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--v-tint);
    font: 800 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

.textos_signatario_v2 {
    min-width: 0;
}

.nome_signatario_v2 {
    overflow: hidden;
    font: 800 13px Manrope, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.email_signatario_v2 {
    overflow: hidden;
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.linha_signatarios_v2 .badge_status_v2 {
    gap: 4px;
}

.celula_link_signatario_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.link_ver_signatario_v2 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 700 13px Manrope, sans-serif;
    color: var(--v-verde-escuro) !important;
    text-decoration: none;
}

.link_ver_signatario_v2:hover {
    text-decoration: underline;
}

.copiar_link_signatario_v2 {
    color: #93A6A0;
    cursor: pointer;
}

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

/* ============================================================ HISTORICO (timeline) */

.timeline_v2 {
    display: flex;
    flex-direction: column;
}

.item_timeline_v2 {
    display: grid;
    grid-template-columns: 150px 20px 1fr;
    gap: 0 14px;
}

.quando_timeline_v2 {
    padding-bottom: 20px;
    text-align: right;
}

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

.data_timeline_v2 {
    font: 500 12px Manrope, sans-serif;
    color: #93A6A0;
}

/* Ponto de 10px com a linha de 2px descendo ate o proximo evento; o ultimo nao tem
   linha. */
.trilho_timeline_v2 {
    position: relative;
    display: flex;
    justify-content: center;
}

.trilho_timeline_v2::after {
    content: '';
    position: absolute;
    top: 14px;
    bottom: 0;
    left: calc(50% - 1px);
    width: 2px;
    background: var(--v-tab-divisoria);
}

.item_timeline_v2:last-child .trilho_timeline_v2::after {
    display: none;
}

.ponto_timeline_v2 {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--v-verde-escuro);
}

.ponto_inicial_timeline_v2 {
    background: #9CCBBB;
}

.evento_timeline_v2 {
    padding-bottom: 20px;
}

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

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

.vazio_timeline_v2,
.texto_erro_timeline_v2 {
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

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

/* ============================================================ CALLOUTS (Erros e avisos) */

.lista_callouts_modal_ticket_v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.callout_modal_ticket_v2 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 10px;
}

.callout_erro_modal_ticket_v2 {
    border-color: #F0D5D0;
    background: #FDF6F4;
    --callout-icone: #C4553F;
    --callout-rotulo: #C4553F;
    --callout-titulo: #7A3A2C;
    --callout-texto: #7A3A2C;
}

.callout_alerta_modal_ticket_v2 {
    border-color: #EAD9B0;
    background: #FCF7EC;
    --callout-icone: #D9A13B;
    --callout-rotulo: #8A6A1F;
    --callout-titulo: #3E3113;
    --callout-texto: #3E3113;
}

.callout_ok_modal_ticket_v2 {
    border-color: var(--v-borda-tint);
    background: var(--v-tint);
    --callout-icone: var(--v-verde-escuro);
    --callout-rotulo: var(--v-verde-escuro);
    --callout-titulo: var(--v-verde-escuro);
    --callout-texto: var(--v-tab-texto);
}

.icone_callout_modal_ticket_v2 {
    flex: none;
    margin-top: 1px;
    color: var(--callout-icone);
}

.corpo_callout_modal_ticket_v2 {
    min-width: 0;
}

.rotulo_callout_modal_ticket_v2 {
    margin-bottom: 2px;
    font: 700 11px Manrope, sans-serif;
    color: var(--callout-rotulo);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.titulo_callout_modal_ticket_v2 {
    font: 800 13.5px Manrope, sans-serif;
    color: var(--callout-titulo);
}

.texto_callout_modal_ticket_v2 {
    font: 800 13.5px Manrope, sans-serif;
    color: var(--callout-texto);
    overflow-wrap: anywhere;
}

.titulo_callout_modal_ticket_v2 + .texto_callout_modal_ticket_v2 {
    margin-top: 2px;
    font: 500 12.5px Manrope, sans-serif;
}

/* ============================================================ CELULAR */

@media (max-width: 767.98px) {
    .painel_modal_ticket_v2 .cabecalho_modal_remessas_v2 {
        padding: 16px 18px 14px;
    }

    .painel_modal_remessas_v2.painel_modal_ticket_v2 .modal-body {
        padding: 0 16px 20px;
    }

    .cartao_aba_modal_ticket_v2 {
        padding: 14px;
    }

    .exportar_lastro_modal_ticket_v2 {
        margin-left: 0;
    }

    .filtro_lastro_modal_ticket_v2 {
        width: 100%;
    }

    .grade_termo_v2 {
        grid-template-columns: 1fr 1fr;
    }

    .grade_termo_v2 > :last-child {
        grid-column: 1 / -1;
    }

    .tabela_resumo_extrato_v2,
    .tabela_signatarios_v2 {
        overflow-x: auto;
    }

    .header_resumo_extrato_v2,
    .linha_resumo_extrato_v2 {
        min-width: 520px;
    }

    .header_signatarios_v2,
    .linha_signatarios_v2 {
        min-width: 620px;
    }

    .item_timeline_v2 {
        grid-template-columns: 86px 20px 1fr;
        gap: 0 10px;
    }
}

/* ============================================================ ABA PAYOUT */

.grade_payout_modal_ticket_v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 28px;
    margin-top: 16px;
}

.item_payout_modal_ticket_v2 {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.rotulo_payout_modal_ticket_v2 {
    font: 700 11px Manrope, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #93A6A0;
}

.valor_payout_modal_ticket_v2 {
    font: 700 14px Manrope, sans-serif;
    color: var(--v-tab-texto);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.apoio_payout_modal_ticket_v2 {
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* JSON recebido, indentado (botao "Ver JSON"). Rola dentro do proprio bloco. */
.json_payout_modal_ticket_v2 {
    max-height: 420px;
    margin: 16px 0 0;
    padding: 14px 16px;
    overflow: auto;
    border: 1px solid var(--v-borda-clara);
    border-radius: 8px;
    background: #F7FAF9;
    font: 500 12px/1.55 "JetBrains Mono", Consolas, "Courier New", monospace;
    color: var(--v-tab-texto);
    white-space: pre;
}

/* ============================================================ ABA WEBHOOKS */

.tabela_webhooks_modal_ticket_v2 .table td.nowrap {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mono_webhook_modal_ticket_v2 {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 12px;
}

.detalhe_webhook_modal_ticket_v2 {
    max-width: 360px;
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    overflow-wrap: anywhere;
}

.pill_webhook_modal_ticket_v2 {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid;
    border-radius: 999px;
    font: 700 12px Manrope, sans-serif;
    white-space: nowrap;
}

.pill_ok_webhook_v2 {
    border-color: #BFDCD2;
    background: #EAF3F0;
    color: #2E8B6F;
}

.pill_erro_webhook_v2 {
    border-color: #F0D5D0;
    background: #FDF6F4;
    color: #C4553F;
}

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

.cartao_aba_modal_ticket_v2 [id*="msg_reenvio_webhook_operacoes"]:not(:empty) {
    margin-bottom: 12px;
}