/* ========================================
   GestãoBLZ - Marketing v2 (camada visual)
   Carregado depois do ui-v2.css no marketing.html. Mantém blocos, ordem,
   textos, campos e fluxos; troca degradês, sombras coloridas, maiúsculas,
   bordas duplicadas e movimentos por cards brancos, cabeçalhos claros,
   superfícies internas chapadas e cores só nos ícones (mesma linguagem de
   dashboard-v2 / financeiro-v2 / clientes-v2).
   - Página: escopo body[data-support-page="marketing"] (#modernMainContent).
   - Modais (fora do #modernMainContent): prefixados pelo ID de cada um.
     A central de ajuda (#dashboardHelpModal) tem estilo próprio
     compartilhado entre as telas; aqui só o botão "Entendi" fica chapado.
   - Popups do components/popup.js: estilizados pelo ui-v2.css.
   Observações de especificidade:
   - marketing.css e marketing-modal.css têm regras soltas (.btn, .badge,
     .form-control, .form-label, .alert-info) que valem para a página e os
     modais: aqui são neutralizadas dentro do body da tela.
   - Os .bg-* do Bootstrap e o marketing.css usam !important nos .badge;
     por isso as etiquetas usam !important.
   Hierarquia: título de bloco = ícone em caixinha colorida (30px);
   subtítulo = texto 14px com ícone discreto, sem caixa.
   Celular (<= 576px): KPIs 2 x 2, tabelas viram cards, abas com rolagem
   horizontal e modais viram folha presa na base da tela.
   Para voltar ao visual anterior, basta remover o <link> deste arquivo.
   ======================================== */

body[data-support-page="marketing"] {
    /* Tokens antigos da tela apontando para os tokens v2 */
    --mkt-surface: var(--v2-page-bg);
    --mkt-card: #ffffff;
    --mkt-card-soft: var(--v2-surface);
    --mkt-muted: var(--v2-muted);
    --mkt-text: var(--v2-text);
    --mkt-border: var(--v2-card-border);
    --mkt-border-strong: #d5d9e0;
    --mkt-focus: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.15);
    --mkt-primary-soft: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.1);
    --mkt-radius-sm: 8px;
    --mkt-radius: 10px;
    --mkt-shadow: var(--v2-card-shadow-hover);
    --mkt-shadow-soft: var(--v2-card-shadow);
    --mkt-primary-tint: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.1);
    background: var(--v2-page-bg);
}

body[data-support-page="marketing"] #modernMainContent {
    background: var(--v2-page-bg);
}

body[data-support-page="marketing"] #modernMainContent .content-area {
    padding: 20px 24px 32px;
    background: transparent;
}

body[data-support-page="marketing"] #modernMainContent .content-area > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

body[data-support-page="marketing"] #modernMainContent .support-top-actions {
    margin: 0 0 12px;
}

/* Sem movimento nem sombra colorida em nenhum botão da tela (página + modais) */
body[data-support-page="marketing"] .btn:hover,
body[data-support-page="marketing"] .btn:active,
body[data-support-page="marketing"] .btn:focus {
    transform: none;
}

body[data-support-page="marketing"] .btn-primary,
body[data-support-page="marketing"] .btn-primary:hover,
body[data-support-page="marketing"] .btn-primary:focus {
    box-shadow: none;
}

/* Central de ajuda (estilo compartilhado): só o botão principal chapado */
body[data-support-page="marketing"] #dashboardHelpModal .modal-footer .btn-primary {
    border-color: var(--primary-color, #007bff);
    background: var(--primary-color, #007bff);
    box-shadow: none;
}

body[data-support-page="marketing"] #dashboardHelpModal .modal-footer .btn-primary:hover {
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    background: var(--primary-dark, var(--primary-color, #0062cc));
}

/* ========================================
   KPIs PRINCIPAIS (único lugar com listra no topo)
   ======================================== */
#modernMainContent .marketing-kpis {
    margin-bottom: 24px;
}

#modernMainContent .marketing-kpis .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
    margin-bottom: 0 !important;
}

#modernMainContent .kpi-card {
    min-height: 0;
    gap: 14px;
    padding: 20px;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#modernMainContent .kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--kpi-accent);
    pointer-events: none;
}

#modernMainContent .kpi-card:hover {
    transform: none;
    border-color: #dde0e6;
    box-shadow: var(--v2-card-shadow-hover);
}

#modernMainContent .kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--kpi-accent);
    color: #ffffff;
    font-size: 17px;
}

#modernMainContent .kpi-value {
    color: var(--v2-text);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

#modernMainContent .kpi-label {
    margin: 4px 0 4px;
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent .kpi-card small {
    min-height: 0;
    font-size: 12px;
    font-weight: 500 !important;
}

#modernMainContent .kpi-card small.text-muted {
    color: var(--v2-muted) !important;
    font-weight: 400 !important;
}

#modernMainContent .kpi-card small.text-success {
    color: #15803d !important;
}

/* ========================================
   CARDS DE BLOCO (cabeçalho branco + ícone em caixinha colorida)
   ======================================== */
#modernMainContent .marketing-card {
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .marketing-card + .marketing-card,
#modernMainContent .marketing-card.mb-4 {
    margin-bottom: 24px !important;
}

#modernMainContent .marketing-card .card-header {
    min-height: 0;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-card-divider);
}

#modernMainContent .marketing-card .card-title {
    gap: 10px;
}

#modernMainContent .marketing-card .card-title > i {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--v2-accent, #3f86d8);
    color: #ffffff;
    font-size: 13px;
}

#modernMainContent .marketing-card .card-title h5 {
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

#modernMainContent .marketing-card .card-content {
    padding: 20px;
}

/* Cor de identidade de cada bloco (só no ícone) */
#modernMainContent #marketingInsightsCard { --v2-accent: #3f86d8; }
#modernMainContent .row.g-4 > .col-xl-8 > .marketing-card { --v2-accent: #6366f1; }
#modernMainContent #cardAniversariantes { --v2-accent: #e0508f; }
#modernMainContent #cardBeneficiosAutomaticos { --v2-accent: #7c5cd6; }
#modernMainContent .marketing-card.tools { --v2-accent: #16a34a; }

/* Botão "Novo Cupom" no cabeçalho */
#modernMainContent .marketing-card .card-header .btn-primary,
#modernMainContent #btnSalvarAutomacao {
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid var(--primary-color, #007bff);
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

#modernMainContent #btnSalvarAutomacao {
    min-height: 40px;
    font-size: 14px;
}

#modernMainContent .marketing-card .card-header .btn-primary:hover,
#modernMainContent #btnSalvarAutomacao:hover {
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    background: var(--primary-dark, var(--primary-color, #0062cc));
}

#modernMainContent #btnSalvarAutomacao:disabled {
    opacity: 0.6;
}

/* ========================================
   RESUMO (PERÍODO): filtro
   ======================================== */
#modernMainContent #marketingInsightsCard .card-header {
    align-items: center;
}

#modernMainContent .insights-controls-label {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#modernMainContent .insights-controls .input-group {
    flex-wrap: nowrap;
    width: auto;
}

#modernMainContent .insights-controls .input-group-text {
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    border-color: var(--v2-card-border);
    border-radius: 8px 0 0 8px;
    background: var(--v2-surface);
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
}

#modernMainContent .insights-controls .form-select,
#modernMainContent .insights-controls .form-control {
    min-height: 34px;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    border-color: var(--v2-card-border);
    border-radius: 0 8px 8px 0 !important;
    background-color: #ffffff;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent .insights-controls .form-select {
    min-width: 170px;
    padding-right: 34px;
}

#modernMainContent .insights-controls .form-control {
    min-width: 140px;
}

#modernMainContent .insights-controls .form-select:focus,
#modernMainContent .insights-controls .form-control:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px var(--mkt-focus);
    z-index: 3;
}

/* ========================================
   RESUMO (PERÍODO): subtítulos discretos (sem caixa)
   ======================================== */
#modernMainContent .insights-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

#modernMainContent .insights-charts-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
}

#modernMainContent .insights-summary-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

#modernMainContent .insights-charts .chart-title,
#modernMainContent .insights-detail-card .detail-title,
#modernMainContent .insights-expiring-head > div > .fw-bold,
#modernMainContent .insights-details-head > .fw-bold {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

#modernMainContent .insights-detail-card .detail-title > i,
#modernMainContent .insights-expiring-head > div > .fw-bold > i,
#modernMainContent .insights-details-head > .fw-bold > i {
    width: 16px;
    margin: 0 !important;
    color: #8d96a4;
    font-size: 13px;
    text-align: center;
}

/* Painéis internos: branco com borda fina (gráficos, cashbacks expirando, tabelas) */
#modernMainContent .insights-charts .insights-chart-card,
#modernMainContent .insights-expiring,
#modernMainContent .insights-detail-card {
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
    box-shadow: none;
}

#modernMainContent .insights-charts .chart-wrap {
    height: 220px;
}

#modernMainContent .insights-charts #chartsUnavailable {
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 13px;
}

/* Mini-indicadores: grade uniforme em superfície clara, sem listra */
#modernMainContent .insights-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

#modernMainContent .insight-kpi,
#modernMainContent .insight-kpi-highlight {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 14px 16px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
    box-shadow: none;
}

#modernMainContent .insight-kpi::before {
    display: none;
}

#modernMainContent .insight-kpi .label {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}

#modernMainContent .insight-kpi .value {
    margin-top: 6px;
    color: var(--v2-text);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#modernMainContent .insight-kpi .hint {
    margin-top: 6px;
    color: var(--v2-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Receita gerada: mesmo tile, valor em verde e marcador verde no rótulo */
#modernMainContent .insight-kpi-highlight .label {
    display: flex;
    align-items: center;
    gap: 6px;
}

#modernMainContent .insight-kpi-highlight .label::before {
    content: '';
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 2px;
    background: #16a34a;
}

#modernMainContent .insight-kpi-highlight .value {
    color: #15803d;
    font-size: 18px;
}

/* Cashbacks expirando em 7 dias */
#modernMainContent .insights-expiring-head {
    align-items: flex-start;
    margin-bottom: 12px;
}

#modernMainContent .insights-expiring-head > div > .fw-bold {
    margin-bottom: 2px !important;
}

#modernMainContent .insights-expiring-head .small.text-muted {
    padding-left: 24px;
    color: var(--v2-muted) !important;
    font-size: 13px;
}

#modernMainContent .insights-expiring-badge {
    gap: 6px;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 500;
}

#modernMainContent #insightsExpiringList {
    gap: 6px;
    color: var(--v2-muted) !important;
    font-size: 13px;
}

#modernMainContent .insights-expiring-item {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 16px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--v2-surface);
}

#modernMainContent .insights-expiring-name {
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 500;
}

#modernMainContent .insights-expiring-meta {
    color: var(--v2-muted);
    font-size: 12px;
}

#modernMainContent .insights-expiring-value {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* Data de vencimento como etiqueta âmbar (é o que pede atenção) */
#modernMainContent .insights-expiring-date {
    padding: 3px 8px;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Lista vazia: mensagem amigável com ícone discreto */
#modernMainContent #insightsExpiringList:not(:has(.insights-expiring-item)) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-text-2) !important;
}

#modernMainContent #insightsExpiringList:not(:has(.insights-expiring-item))::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #16a34a;
    font-size: 15px;
}

/* Sem dados no período */
#modernMainContent .insights-empty-state {
    justify-items: center;
    gap: 6px;
    padding: 32px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
    text-align: center;
}

#modernMainContent .insights-empty-state .empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: #eef0f3;
    color: #8d96a4;
    font-size: 20px;
}

#modernMainContent .insights-empty-state .empty-title {
    color: var(--v2-text);
    font-size: 14.5px;
    font-weight: 500;
}

#modernMainContent .insights-empty-state .empty-subtitle {
    max-width: 520px;
    color: var(--v2-muted);
    font-size: 13px;
}

/* Detalhes do período: faixa de subtítulo + período em etiqueta */
#modernMainContent .insights-details {
    margin-top: 20px !important;
    padding-top: 20px;
    border-top: 1px solid var(--v2-card-divider);
}

#modernMainContent .insights-details .insights-details-head {
    align-items: center;
    margin-bottom: 0;
}

#modernMainContent .insights-details-head > .fw-bold {
    margin: 0 !important;
}

#modernMainContent #insightsDetailsRangeHint {
    padding: 3px 8px;
    border-radius: 6px;
    background: #eef0f3;
    color: var(--v2-text-2) !important;
    font-size: 12px;
    font-weight: 500;
}

#modernMainContent #insightsDetailsRangeHint:empty {
    display: none;
}

#modernMainContent .insights-details > .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
    margin-top: 0 !important;
}

#modernMainContent .insights-detail-card {
    height: 100%;
}

#modernMainContent .insights-detail-card .detail-title {
    font-size: 13.5px;
}

/* Tabela sem linhas: some o cabeçalho, fica só a mensagem */
#modernMainContent .insights-detail-card .table-responsive:not(:has(tbody tr)) {
    display: none;
}

#modernMainContent .insights-detail-card .detail-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    padding: 14px;
    border: 0;
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 13px;
}

#modernMainContent .insights-detail-card .detail-empty.d-none {
    display: none !important;
}

#modernMainContent .insights-detail-card .detail-empty::before {
    content: '\f1da';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eef0f3;
    color: #8d96a4;
    font-family: 'Font Awesome 6 Free';
    font-size: 13px;
    font-weight: 900;
}

/* ========================================
   ABAS "BENEFÍCIOS E RELATÓRIOS"
   Barra discreta; a ativa ganha tint da cor do salão e ícone preenchido.
   ======================================== */
#modernMainContent .gbz-tabs-mobile {
    margin-bottom: 16px;
    padding: 4px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
}

#modernMainContent .gbz-tabs-mobile__track {
    gap: 4px;
}

#modernMainContent .gbz-tab-chip {
    min-height: 40px;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-text-2);
    box-shadow: none;
}

#modernMainContent .gbz-tab-chip:hover {
    background: var(--v2-surface);
    color: var(--v2-text);
}

#modernMainContent .gbz-tab-chip__icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #eef0f3;
    color: var(--v2-muted);
    font-size: 12px;
}

#modernMainContent .gbz-tab-chip__label {
    font-size: 13.5px;
    font-weight: 500;
}

#modernMainContent .gbz-tab-chip.is-active,
#modernMainContent .gbz-tab-chip.is-active:hover {
    border-color: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.28);
    background: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.08);
    color: var(--v2-text);
    box-shadow: none;
}

#modernMainContent .gbz-tab-chip.is-active .gbz-tab-chip__icon {
    background: var(--primary-color, #007bff);
    color: #ffffff;
}

#modernMainContent .gbz-tab-chip.is-active .gbz-tab-chip__label {
    font-weight: 500;
}

/* ========================================
   TABELAS (abas + detalhes do período)
   Cabeçalho discreto em superfície clara, sem maiúsculas.
   ======================================== */
#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks),
#modernMainContent .insights-detail-card .table {
    --bs-table-hover-bg: #fafbfc;
    font-size: 13.5px;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) thead th,
#modernMainContent .insights-detail-card thead th {
    padding: 9px 12px;
    border: 0;
    background: var(--v2-surface);
    color: var(--v2-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) thead th:first-child,
#modernMainContent .insights-detail-card thead th:first-child {
    border: 0;
    border-radius: 8px 0 0 8px;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) thead th:last-child,
#modernMainContent .insights-detail-card thead th:last-child {
    border: 0;
    border-radius: 0 8px 8px 0;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) tbody td,
#modernMainContent .insights-detail-card tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-text-2);
}

#modernMainContent .insights-detail-card tbody td {
    padding: 9px 12px;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) tbody td.fw-bold,
#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) tbody td .fw-medium,
#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) tbody td .fw-semibold,
#modernMainContent .insights-detail-card tbody td.fw-semibold {
    color: var(--v2-text);
}

#modernMainContent .insights-detail-card tbody td.text-muted {
    color: var(--v2-muted) !important;
    white-space: nowrap;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) .small,
#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) small {
    font-size: 12.5px;
}

/* Código do cupom: etiqueta na cor do salão (tint), sem borda */
#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .font-monospace,
#modernMainContent #insightsContextualTable .font-monospace {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--mkt-primary-tint);
    color: var(--primary-color) !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Cupons manuais: colunas com respiro (nome não espreme, uso não quebra) */
#modernMainContent #tabelaCupons td:nth-child(2) {
    min-width: 160px;
}

#modernMainContent #tabelaCupons td:nth-child(5) {
    min-width: 116px;
}

/* Cupons manuais têm 7 colunas: respiro lateral menor para caber sem rolar */
#modernMainContent #tabelaCupons :is(thead th, tbody td) {
    padding-left: 9px;
    padding-right: 9px;
}

#modernMainContent #tabelaCupons td:nth-child(2) .fw-medium {
    font-weight: 500;
}

#modernMainContent #tabelaCupons td:nth-child(2) .small {
    margin-top: 2px;
}

#modernMainContent #tabelaCupons :is(td:nth-child(3), td:nth-child(4)),
#modernMainContent #tabelaCupons td:nth-child(5) > div:first-child,
#modernMainContent #tabelaCuponsContextuais :is(td:nth-child(4), td:nth-child(6)),
#modernMainContent #tabelaCashbacks :is(td:nth-child(2), td:nth-child(3)) {
    white-space: nowrap;
}

#modernMainContent #tabelaCupons td:nth-child(5) .small.text-muted {
    color: var(--v2-muted) !important;
}

/* Detalhes de aplicação: cores de hoje, tom um pouco mais sóbrio */
#modernMainContent #tabelaCupons .small.text-info { color: #0e7490 !important; }
#modernMainContent #tabelaCupons .small.text-warning { color: #b45309 !important; }
#modernMainContent #tabelaCupons .small.text-primary { color: var(--primary-color) !important; }
#modernMainContent #tabelaCupons .small.text-secondary { color: var(--v2-text-2) !important; }
#modernMainContent #tabelaCupons .small.text-muted { color: var(--v2-muted) !important; }

/* Ações por linha: quadrados brancos de 32px, ícone na cor da ação */
#modernMainContent #tabelaCupons .btn-group {
    gap: 6px;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-sm,
#modernMainContent #tabelaCashbacks .btn-icon {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 !important;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px !important;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13px !important;
    box-shadow: none;
}

#modernMainContent #tabelaCupons .btn-group > .btn {
    margin-left: 0;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-outline-primary,
#modernMainContent #tabelaCashbacks .btn-icon {
    color: var(--primary-color);
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-outline-danger {
    color: #dc2626;
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-sm:hover,
#modernMainContent #tabelaCashbacks .btn-icon:hover {
    border-color: #d5d9e0;
    background: var(--v2-surface);
}

#modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-outline-danger:hover {
    border-color: #f5caca;
    background: #fef2f2;
    color: #b91c1c;
}

/* Origem do cashback: etiqueta da comanda neutra */
#modernMainContent #tabelaCashbacks .badge.bg-light.border {
    border: 0 !important;
}

/* Checkboxes na cor do salão */
#modernMainContent #tab-contextual .form-check-input:checked,
#modernMainContent #tab-contextual .form-check-input:indeterminate {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

#modernMainContent #tab-contextual .form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--mkt-focus);
}

#modernMainContent #tab-contextual .form-check-input {
    cursor: pointer;
}

/* Barra de seleção em massa: superfície clara, sem moldura */
#modernMainContent .contextual-bulk-toolbar {
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
}

#modernMainContent .contextual-bulk-toolbar .form-check-label {
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 500 !important;
}

#modernMainContent #contextuaisSelectionInfo {
    color: var(--v2-muted) !important;
    font-size: 13px;
}

#modernMainContent .contextual-bulk-toolbar .btn {
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent .contextual-bulk-toolbar .btn-outline-secondary {
    border-color: var(--v2-card-border);
    color: var(--v2-text-2);
}

#modernMainContent .contextual-bulk-toolbar .btn-outline-danger {
    border-color: #f3c7c7;
    color: #dc2626;
}

#modernMainContent .contextual-bulk-toolbar .btn:disabled {
    opacity: 0.5;
}

/* ========================================
   ETIQUETAS DE STATUS (cores de hoje, em chip claro, raio 6)
   ======================================== */
body[data-support-page="marketing"] :is(#modernMainContent, #modalCupomDetalhes) .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 3px 8px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
}

body[data-support-page="marketing"] #modernMainContent .badge.bg-success { background: #dcfce7 !important; color: #15803d !important; }
body[data-support-page="marketing"] #modernMainContent .badge.bg-primary { background: var(--mkt-primary-tint) !important; color: var(--primary-color) !important; }
body[data-support-page="marketing"] #modernMainContent .badge.bg-secondary { background: #eef0f3 !important; color: #4b5563 !important; }
body[data-support-page="marketing"] #modernMainContent .badge.bg-warning { background: #fef3c7 !important; color: #92400e !important; }
body[data-support-page="marketing"] #modernMainContent .badge.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; }
body[data-support-page="marketing"] #modernMainContent .badge.bg-light { background: #f3f4f6 !important; color: var(--v2-muted) !important; }
body[data-support-page="marketing"] #modernMainContent .badge.bg-light.border { color: var(--v2-text-2) !important; }

/* ========================================
   PAGINAÇÃO
   ======================================== */
#modernMainContent .marketing-pagination .pagination {
    gap: 4px;
}

#modernMainContent .marketing-pagination .page-link {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--v2-card-border);
    border-radius: 7px !important;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: none;
}

#modernMainContent .marketing-pagination .page-link:hover {
    border-color: #d5d9e0;
    background: var(--v2-surface);
    color: var(--v2-text);
}

#modernMainContent .marketing-pagination .page-link:focus {
    box-shadow: 0 0 0 3px var(--mkt-focus);
}

#modernMainContent .marketing-pagination .page-item.active .page-link {
    border-color: var(--primary-color, #007bff);
    background: var(--primary-color, #007bff);
    color: #ffffff;
}

#modernMainContent .marketing-pagination .page-item.disabled .page-link {
    opacity: 0.45;
}

#modernMainContent .marketing-pagination .page-link i {
    font-size: 10px;
}

#modernMainContent .marketing-pagination .pagination:empty {
    display: none;
}

#modernMainContent .marketing-pagination:has(.pagination:empty) {
    margin-top: 0 !important;
}

/* ========================================
   ESTADOS DAS ABAS (carregando / vazio)
   ======================================== */
/* Tabela sem linhas (carregando ou vazia): some o cabeçalho solto */
#modernMainContent .tab-pane > .table-responsive:not(:has(tbody tr)) {
    display: none;
}

#modernMainContent :is(#loadingCupons, #loadingCuponsContextuais, #loadingCashbacks) {
    padding: 40px 16px !important;
    border-radius: 10px;
    background: var(--v2-surface);
}

#modernMainContent :is(#loadingCupons, #loadingCuponsContextuais, #loadingCashbacks) .spinner-border {
    width: 28px;
    height: 28px;
    border-width: 3px;
    color: var(--primary-color) !important;
}

#modernMainContent :is(#emptyCupons, #emptyCuponsContextuais, #emptyCashbacks) {
    min-height: 0;
    margin-top: 0;
    padding: 36px 16px !important;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
}

#modernMainContent :is(#emptyCupons, #emptyCuponsContextuais, #emptyCashbacks) > i {
    width: 48px;
    height: 48px;
    margin-bottom: 12px !important;
    border-radius: 12px;
    background: #eef0f3;
    color: #8d96a4 !important;
    font-size: 20px !important;
}

#modernMainContent :is(#emptyCupons, #emptyCuponsContextuais, #emptyCashbacks) > p {
    margin-bottom: 4px !important;
    color: var(--v2-text) !important;
    font-size: 14.5px;
    font-weight: 500;
}

#modernMainContent :is(#emptyCupons, #emptyCuponsContextuais, #emptyCashbacks) > small {
    color: var(--v2-muted) !important;
    font-size: 13px;
}

#modernMainContent #emptyCupons .btn-outline-primary {
    min-height: 34px;
    margin-top: 10px !important;
    padding: 6px 14px;
    border: 1px solid var(--primary-color, #007bff);
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent #emptyCupons .btn-outline-primary:hover {
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    background: var(--primary-dark, var(--primary-color, #0062cc));
    color: #ffffff;
}

/* ========================================
   COLUNA DIREITA: ANIVERSARIANTES / BENEFÍCIOS AUTOMÁTICOS / WHATSAPP
   Grupos internos em superfície clara, sem moldura dupla.
   ======================================== */
#modernMainContent .marketing-card .alert.alert-secondary {
    margin-bottom: 16px !important;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 13px;
    line-height: 1.5;
}

#modernMainContent .marketing-card .alert.alert-secondary .fw-bold {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px !important;
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 500 !important;
}

#modernMainContent .marketing-card .alert.alert-secondary .fw-bold > i {
    margin: 0 !important;
    color: #8d96a4;
}

/* Linhas com chave (switch): superfície clara; chave separada do texto */
#modernMainContent .marketing-card .form-check.form-switch {
    min-height: 0;
    margin-bottom: 0 !important;
    padding: 12px 14px 12px 64px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
}

#modernMainContent .marketing-card .form-check.form-switch + .form-check.form-switch,
#modernMainContent .marketing-card .form-check.form-switch + .row,
#modernMainContent .marketing-card .form-check.form-switch + div,
#modernMainContent .marketing-card .row + .form-check.form-switch,
#modernMainContent .marketing-card .row + .border,
#modernMainContent .marketing-card .border + .form-check.form-switch,
#modernMainContent .marketing-card .alert + .form-check.form-switch {
    margin-top: 10px;
}

#modernMainContent .marketing-card .form-check.form-switch .form-check-input {
    width: 36px;
    height: 20px;
    margin-top: 0;
    margin-left: -50px;
    border-color: #d5d9e0;
}

#modernMainContent .marketing-card .form-check.form-switch .form-check-input:focus {
    border-color: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.5);
    box-shadow: 0 0 0 3px var(--mkt-focus);
}

#modernMainContent .marketing-card .form-check.form-switch .form-check-input:checked {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

#modernMainContent .marketing-card .form-check.form-switch .form-check-label {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

#modernMainContent .marketing-card .form-check.form-switch small.text-muted {
    margin-top: 2px;
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    line-height: 1.45;
}

/* Campos numéricos da coluna */
#modernMainContent .marketing-card .form-label {
    margin-bottom: 5px !important;
    color: var(--v2-text-2);
    font-size: 12.5px !important;
    font-weight: 500;
    line-height: 1.35;
}

#modernMainContent .marketing-card .form-control {
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--v2-text);
    font-size: 14px;
}

#modernMainContent .marketing-card .form-control:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px var(--mkt-focus);
}

#modernMainContent .marketing-card .row.g-2 small.text-muted,
#modernMainContent .marketing-card .row.g-2 + small.text-muted {
    margin-top: 4px;
    color: var(--v2-muted) !important;
    font-size: 12px;
    line-height: 1.45;
}

#modernMainContent #configAniversarioDetalhes {
    margin-top: 12px;
}

#modernMainContent #configCupomAniversarioValues {
    margin-bottom: 12px !important;
}

/* "Como o sistema tenta trazer o cliente de volta" / "Cashback cliente novo" */
#modernMainContent .marketing-card .border.rounded-3.p-3.mb-3 {
    margin-top: 10px;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--v2-surface) !important;
}

#modernMainContent .marketing-card .border.rounded-3.p-3.mb-3 > .fw-semibold {
    margin-bottom: 10px !important;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#modernMainContent .marketing-card .border.rounded-3.p-3.mb-3 > .small.text-muted {
    padding-left: 16px;
    color: var(--v2-text-2) !important;
    font-size: 13px;
    line-height: 1.5;
}

#modernMainContent .marketing-card .border.rounded-3.p-3.mb-3 > .small.text-muted::before {
    left: 1px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #c5cad3;
}

/* Chave dentro de um grupo claro: sem segunda superfície */
#modernMainContent .marketing-card .border.rounded-3.p-3.mb-3 > .form-check.form-switch {
    margin: -2px -4px 0;
    padding: 0 0 0 50px;
    background: transparent;
}

#modernMainContent .marketing-card .border.rounded-3.p-3.mb-3 > .form-check.form-switch .form-check-input {
    margin-left: -50px;
}

#modernMainContent #cashbackClienteNovoConfig {
    margin-top: 12px;
}

/* Lista de serviços elegíveis: caixa branca dentro do grupo */
#modernMainContent .marketing-card .card.p-2.bg-white {
    padding: 10px 12px !important;
    border: 1px solid var(--v2-card-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

#modernMainContent .marketing-card .card.p-2 small.fw-bold {
    color: var(--v2-text-2) !important;
    font-size: 12.5px;
    font-weight: 500 !important;
}

#modernMainContent .marketing-card .btn-link,
#modalCupom .btn-link {
    min-height: 0;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent .marketing-card .btn-link:hover,
#modalCupom .btn-link:hover {
    color: var(--primary-dark, var(--primary-color));
    text-decoration: underline !important;
}

#modernMainContent #listaCashbackClienteNovoServicos .form-check-input:checked {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

#modernMainContent #listaCashbackClienteNovoServicos .form-check-label {
    color: var(--v2-text-2);
    font-size: 13px;
}

/* Comissão em vendas com desconto: grupo claro, cabeçalho sem faixa */
#modernMainContent .commission-base-card {
    margin-top: 10px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
}

#modernMainContent .commission-base-header {
    padding: 14px 14px 0;
    border: 0;
    background: transparent;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#modernMainContent .commission-base-header > i {
    color: #8d96a4;
}

#modernMainContent .commission-base-body {
    padding: 10px 14px 14px;
}

#modernMainContent .commission-base-controls {
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
}

/* A chave aqui fica sozinha entre os dois rótulos */
#modernMainContent .commission-base-controls .form-check.form-switch {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

#modernMainContent .commission-base-controls .form-check.form-switch .form-check-input {
    margin: 0;
}

#modernMainContent .commission-base-switch-label {
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent .commission-base-info {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
}

#modernMainContent .commission-base-info .fw-semibold {
    color: var(--v2-text);
    font-size: 13px;
}

#modernMainContent .commission-base-info .text-muted {
    color: var(--v2-text-2) !important;
    font-size: 13px;
}

#modernMainContent .commission-base-note {
    color: var(--v2-muted);
    font-size: 12.5px;
}

#modernMainContent .commission-base-note > i {
    margin-top: 3px;
    color: #8d96a4;
}

/* WhatsApp: status em superfície clara (verde/vermelho só em tom leve) */
#modernMainContent .marketing-card.tools .tool-item {
    padding: 0 !important;
}

#modernMainContent .whatsapp-status-panel {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
}

#modernMainContent .whatsapp-status-panel.connected {
    background: #f0fdf4;
}

#modernMainContent .whatsapp-status-panel.disconnected {
    background: #fef2f2;
}

#modernMainContent .whatsapp-status-icon,
#modernMainContent .tool-item .tool-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #16a34a;
    color: #ffffff;
    font-size: 19px;
}

#modernMainContent .whatsapp-status-panel.disconnected .whatsapp-status-icon {
    background: #dc2626;
    color: #ffffff;
}

#modernMainContent .whatsapp-status-eyebrow {
    margin-bottom: 4px;
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#modernMainContent .whatsapp-status-line {
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid var(--v2-card-border);
    border-radius: 6px;
    background: #ffffff;
}

#modernMainContent .status-dot-marketing::after {
    display: none;
}

#modernMainContent .status-dot-marketing.me-2 {
    margin-right: 0 !important;
}

#modernMainContent .status-text-marketing {
    font-size: 12.5px;
    font-weight: 500;
}

#modernMainContent .tool-item .tool-description {
    margin: 12px 0;
    color: var(--v2-muted);
    font-size: 13px;
}

#modernMainContent #btnGerenciarConexaoWhatsapp {
    min-height: 38px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
}

#modernMainContent #btnGerenciarConexaoWhatsapp:hover {
    border-color: #d5d9e0;
    background: var(--v2-surface);
    color: var(--v2-text);
}

#modernMainContent #btnGerenciarConexaoWhatsapp i {
    color: var(--v2-muted);
}

/* ========================================
   MODAIS: cor de identidade (só no ícone do título)
   ======================================== */
:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush, #visualizarComandaModal) {
    --m-accent: #6366f1;
    --m-pad-x: 20px;
}

#modalNotifyCupomPush { --m-accent: #f59e0b; }
#visualizarComandaModal { --m-accent: var(--primary-color, #007bff); }

#modalCupom .modal-dialog.modal-lg {
    max-width: min(760px, calc(100vw - 2rem));
}

#modalCupomDetalhes .modal-dialog.modal-xl {
    max-width: min(900px, calc(100vw - 2rem));
}

#modalNotifyCupomPush .modal-dialog {
    max-width: 480px;
}

body[data-support-page="marketing"] #visualizarComandaModal .modal-dialog {
    max-width: 880px;
}

/* ========================================
   MODAIS: casca (conteúdo, cabeçalho, corpo, rodapé)
   ======================================== */
:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-content,
body[data-support-page="marketing"] #visualizarComandaModal .modal-content {
    border: 1px solid var(--v2-card-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18);
    overflow: hidden;
    color: var(--v2-text);
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-header,
body[data-support-page="marketing"] #visualizarComandaModal .modal-header {
    align-items: center;
    gap: 12px;
    padding: 16px var(--m-pad-x);
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 0;
    color: var(--v2-text);
}

body[data-support-page="marketing"] #visualizarComandaModal .modal-header::before {
    display: none;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-title,
body[data-support-page="marketing"] #visualizarComandaModal .modal-title,
body[data-support-page="marketing"] #visualizarComandaModal #tituloComanda {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    color: var(--v2-text) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

/* Ícone do título: caixinha chapada na cor do modal */
:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-title > i,
body[data-support-page="marketing"] #visualizarComandaModal #tituloComanda > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    border-radius: 8px;
    background: var(--m-accent);
    color: #ffffff;
    font-size: 14px;
}

/* Fechar: quadrado discreto (o da comanda era branco para o cabeçalho colorido) */
:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-header .btn-close,
body[data-support-page="marketing"] #visualizarComandaModal .modal-header .btn-close {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0 -6px 0 auto;
    padding: 0;
    border-radius: 8px;
    background-color: transparent;
    background-size: 11px;
    filter: none !important;
    opacity: 0.55;
    box-shadow: none;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-header .btn-close:hover,
body[data-support-page="marketing"] #visualizarComandaModal .modal-header .btn-close:hover {
    background-color: #f3f4f6;
    opacity: 0.9;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-header .btn-close:focus,
body[data-support-page="marketing"] #visualizarComandaModal .modal-header .btn-close:focus {
    box-shadow: 0 0 0 3px var(--mkt-focus);
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-body,
body[data-support-page="marketing"] #visualizarComandaModal .modal-body {
    padding: 20px var(--m-pad-x);
    background: #ffffff;
    color: var(--v2-text);
    font-size: 14px;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-footer,
body[data-support-page="marketing"] #visualizarComandaModal .modal-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px var(--m-pad-x);
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-card-divider);
    border-radius: 0;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush, #visualizarComandaModal) .modal-footer > * {
    margin: 0;
}

/* ========================================
   MODAIS: botões (chapados, sem degradê, sem movimento)
   ======================================== */
:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .btn,
body[data-support-page="marketing"] #visualizarComandaModal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 8px;
    background-image: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    transform: none;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .btn i {
    margin: 0 !important;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .btn:focus-visible {
    box-shadow: 0 0 0 3px var(--mkt-focus);
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .btn-primary {
    border: 1px solid var(--primary-color, #007bff);
    background: var(--primary-color, #007bff);
    color: #ffffff;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .btn-primary:hover,
:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .btn-primary:focus {
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    background: var(--primary-dark, var(--primary-color, #0062cc));
    color: #ffffff;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .btn-primary:disabled {
    opacity: 0.6;
}

/* Secundários: brancos com borda (Cancelar, Fechar, Não, Gerar) */
:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) :is(.btn-secondary, .btn-outline-secondary),
body[data-support-page="marketing"] #visualizarComandaModal .modal-footer .btn-secondary {
    border: 1px solid var(--v2-card-border);
    background: #ffffff;
    color: var(--v2-text-2);
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) :is(.btn-secondary, .btn-outline-secondary):hover,
body[data-support-page="marketing"] #visualizarComandaModal .modal-footer .btn-secondary:hover {
    border-color: #d5d9e0;
    background: #f3f4f6;
    color: var(--v2-text);
}

/* ========================================
   MODAIS: campos
   ======================================== */
:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .form-label {
    margin-bottom: 6px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

:is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) :is(.form-text, small.text-muted, .text-muted.small) {
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    line-height: 1.45;
}

#modalCupom :is(.form-control, .form-select) {
    height: auto;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--v2-text);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
}

#modalCupom .form-select {
    padding-right: 36px;
    background-image: var(--bs-form-select-bg-img);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
}

#modalCupom :is(.form-control, .form-select):focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px var(--mkt-focus);
    z-index: 3;
}

#modalCupom :is(.form-control, .form-select):disabled {
    background-color: #f3f4f6;
    color: var(--v2-muted);
}

#modalCupom .form-control::placeholder {
    color: #9aa1ad;
    opacity: 1;
}

/* Código + "Gerar": um único campo */
#modalCupom .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#modalCupom .input-group > #btnGerarCodigo {
    min-height: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: var(--v2-text-2);
}

#modalCupom .input-group > #btnGerarCodigo i {
    color: var(--primary-color);
}

/* Busca de cliente: lupa dentro do campo */
#modalCupom #containerSelectCliente .input-group-text {
    min-width: 40px;
    justify-content: center;
    border: 1px solid var(--v2-card-border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #ffffff;
    color: #9aa1ad;
}

#modalCupom #containerSelectCliente .input-group > .form-control {
    border-left: 0;
    border-radius: 0 8px 8px 0;
    padding-left: 2px;
}

#modalCupom #containerSelectCliente .input-group:focus-within .input-group-text {
    border-color: var(--primary-color, #007bff);
}

#modalCupom #containerSelectCliente .input-group:focus-within > .form-control {
    box-shadow: none;
}

#modalCupom #containerSelectCliente .input-group:focus-within {
    border-radius: 8px;
    box-shadow: 0 0 0 3px var(--mkt-focus);
}

#modalCupom #containerSelectCliente .input-group:has(.form-control:disabled) .input-group-text {
    background: #f3f4f6;
}

/* Rádios, caixas e chaves na cor do salão */
#modalCupom .form-check-input:checked {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

#modalCupom .form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--mkt-focus);
}

#modalCupom .form-check-label {
    color: var(--v2-text);
    font-size: 14px;
}

#modalCupom .col-12 > .d-flex.gap-3 {
    flex-wrap: wrap;
    row-gap: 6px !important;
}

/* "Restringir a um cliente específico": chave separada do texto */
#modalCupom .form-check.form-switch {
    min-height: 24px;
    padding-left: 50px;
}

#modalCupom .form-check.form-switch .form-check-input {
    width: 36px;
    height: 20px;
    margin-top: 1px;
    margin-left: -50px;
    border-color: #d5d9e0;
}

#modalCupom .form-check.form-switch .form-check-input:checked {
    border-color: var(--primary-color);
}

#modalCupom .form-check.form-switch .form-check-label {
    font-weight: 500;
    line-height: 22px;
}

/* Grupos internos (serviços, produtos, cliente): superfície clara sem moldura */
#modalCupom :is(#containerServicos, #containerProdutos) {
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--v2-surface) !important;
    box-shadow: none !important;
}

#modalCupom :is(#containerServicos, #containerProdutos) small.fw-bold {
    color: var(--v2-text-2) !important;
    font-size: 13px;
    font-weight: 500 !important;
}

#modalCupom :is(#listaServicosCheckboxes, #listaProdutosCheckboxes) .form-check-label {
    color: var(--v2-text-2);
    font-size: 13.5px;
}

#modalCupom #containerSelectCliente {
    margin-top: 10px;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-surface);
}

#modalCupom #containerSelectCliente .form-label {
    margin-bottom: 6px;
}

#modalCupom #selectClienteFeedback {
    margin-top: 6px;
}

#modalCupom #selectClienteFeedback.text-danger {
    color: #dc2626 !important;
}

#modalCupom textarea.form-control {
    min-height: 72px;
    resize: vertical;
}

/* ========================================
   MODAL: DETALHES DO CUPOM
   ======================================== */
#modalCupomDetalhes .modal-body > .row.mb-4:first-child {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
    margin-bottom: 20px !important;
}

#modalCupomDetalhes .modal-body .border.rounded.p-3 {
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--v2-surface);
}

#modalCupomDetalhes .modal-body .border.rounded .fs-5 {
    margin-top: 2px;
    color: var(--v2-text);
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em;
}

#modalCupomDetalhes .modal-body > .row.mb-4:nth-child(2) {
    --bs-gutter-y: 14px;
    margin-bottom: 20px !important;
}

#modalCupomDetalhes .modal-body .fw-medium {
    color: var(--v2-text);
    font-weight: 500;
}

#modalCupomDetalhes .modal-body h6 {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#modalCupomDetalhes .modal-body > .d-flex {
    padding-top: 16px;
    border-top: 1px solid var(--v2-card-divider);
}

#modalCupomDetalhes .table {
    --bs-table-hover-bg: #fafbfc;
    margin: 0;
    font-size: 13.5px;
}

#modalCupomDetalhes .table thead th {
    padding: 9px 12px;
    border: 0;
    background: var(--v2-surface);
    color: var(--v2-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

#modalCupomDetalhes .table thead th:first-child { border-radius: 8px 0 0 8px; }
#modalCupomDetalhes .table thead th:last-child { border-radius: 0 8px 8px 0; }

#modalCupomDetalhes .table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-text-2);
}

#modalCupomDetalhes .table tbody tr:last-child td {
    border-bottom: 0;
}

#modalCupomDetalhes .table tbody td:first-child {
    white-space: nowrap;
}

/* Sem histórico / erro: mensagem em superfície clara */
#modalCupomDetalhes .alert.alert-light {
    padding: 14px;
    border: 0 !important;
    border-radius: 10px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 13.5px;
}

#modalCupomDetalhes .alert.alert-danger {
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13.5px;
}

#modalCupomDetalhes .modal-body > .py-4.text-center {
    color: var(--v2-muted) !important;
}

#modalCupomDetalhes .spinner-border {
    color: var(--primary-color);
}

/* ========================================
   MODAL: NOTIFICAR POR PUSH
   ======================================== */
#modalNotifyCupomPush .modal-body > .small.text-muted {
    margin-bottom: 12px !important;
    color: var(--v2-text-2) !important;
    font-size: 14px;
}

#modalNotifyCupomPush .border.rounded-3.p-3.bg-light {
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--v2-surface) !important;
}

#modalNotifyCupomPush #notifyCupomPushTargetLabel {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500 !important;
}

#modalNotifyCupomPush #notifyCupomPushPreview {
    color: var(--v2-text-2) !important;
    font-size: 13px;
}

/* ========================================
   MODAL: VISUALIZAR COMANDA (aberto pelo "olho" da origem do cashback)
   Mesmo visual do atendimento-v2: cards brancos, ícone colorido por seção.
   ======================================== */
body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-info-section, .comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card) {
    --cm-sec: var(--primary-color, #007bff);
    height: 100%;
    margin-bottom: 0;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: none;
    color: var(--v2-text);
    transform: none;
    animation: none;
}

body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-section {
    height: auto;
    margin-bottom: 16px;
}

body[data-support-page="marketing"] #visualizarComandaModal .comanda-content-card { --cm-sec: #2f8fce; }
body[data-support-page="marketing"] #visualizarComandaModal .resumo-financeiro-card { --cm-sec: #16a34a; }
body[data-support-page="marketing"] #visualizarComandaModal .pagamentos-card { --cm-sec: #3b82f6; }
body[data-support-page="marketing"] #visualizarComandaModal .produtos-card { --cm-sec: #f59e0b; }

body[data-support-page="marketing"] #visualizarComandaModal .comanda-content-card:hover {
    transform: none;
    box-shadow: none;
}

body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-info-section, .comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card) h6,
body[data-support-page="marketing"] #visualizarComandaModal #comandaContent > .mt-3 > h6 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px !important;
    color: var(--v2-text) !important;
    font-size: 14.5px;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
}

body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-info-section, .comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card) h6 > i,
body[data-support-page="marketing"] #visualizarComandaModal #comandaContent > .mt-3 > h6 > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--cm-sec);
    color: #ffffff !important;
    font-size: 12.5px;
}

body[data-support-page="marketing"] #visualizarComandaModal #comandaContent > .mt-3 > h6 > i {
    background: #0284c7;
}

body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-text);
    font-size: 14px;
}

body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table tr:last-child td {
    padding-bottom: 0;
    border-bottom: 0;
}

body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table td:first-child {
    width: 140px;
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 500;
}

body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table .badge {
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table .badge.bg-success { background: #dcfce7 !important; color: #15803d; }
body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table .badge.bg-primary { background: var(--mkt-primary-tint) !important; color: var(--primary-color); }
body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table .badge.bg-danger { background: #fee2e2 !important; color: #b91c1c; }
body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table .badge.bg-secondary { background: #eef0f3 !important; color: #4b5563; }

/* Listas (serviços, produtos, pagamentos): linhas limpas, nome à esquerda e valor à direita */
body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    margin: 0;
    padding: 9px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 0;
    color: var(--v2-text-2);
    font-size: 14px;
    transform: none;
}

body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul li:hover {
    background: none;
    transform: none;
    border-left-width: 0;
}

body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul li strong {
    color: var(--v2-text);
    font-weight: 500;
    white-space: nowrap;
}

body[data-support-page="marketing"] #visualizarComandaModal .resumo-financeiro-card table {
    --bs-table-bg: transparent;
    --bs-table-active-bg: transparent;
    margin: 0;
}

body[data-support-page="marketing"] #visualizarComandaModal .resumo-financeiro-card table tr {
    border: 0;
}

body[data-support-page="marketing"] #visualizarComandaModal .resumo-financeiro-card .table-active {
    background: none !important;
}

body[data-support-page="marketing"] #visualizarComandaModal .resumo-financeiro-card table td {
    padding: 6px 0 0 !important;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--v2-text);
    font-size: 14px;
}

body[data-support-page="marketing"] #visualizarComandaModal .resumo-financeiro-card .table-active .text-success {
    color: #15803d !important;
    font-size: 20px !important;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body[data-support-page="marketing"] #visualizarComandaModal #comandaContent > .row.mt-2 {
    margin-top: 0 !important;
    padding-top: 16px;
}

body[data-support-page="marketing"] #visualizarComandaModal #comandaContent > .mt-3 {
    margin-top: 16px !important;
}

body[data-support-page="marketing"] #visualizarComandaModal #comandaContent > .mt-3 > h6 {
    margin-bottom: 8px !important;
}

body[data-support-page="marketing"] #visualizarComandaModal .alert-info {
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: #f0f9ff;
    color: #075985;
    font-size: 14px;
}

body[data-support-page="marketing"] #visualizarComandaModal .alert-danger {
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 14px;
}

body[data-support-page="marketing"] #visualizarComandaModal .spinner-border {
    color: var(--primary-color) !important;
}

/* ========================================
   RESPONSIVO: PÁGINA
   ======================================== */
@media (max-width: 1200px) {
    /* Receita gerada em linha inteira, os outros 4 em grade uniforme */
    #modernMainContent .insights-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #modernMainContent .insight-kpi-highlight {
        grid-column: 1 / -1;
    }

    #modernMainContent .insights-charts-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 992px) {
    #modernMainContent .marketing-card .card-header {
        align-items: center;
    }
}

@media (max-width: 768px) {
    body[data-support-page="marketing"] #modernMainContent .content-area {
        padding: 14px 16px 24px;
    }

    #modernMainContent .marketing-card .card-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        min-height: 0;
        padding: 14px 16px;
    }

    #modernMainContent .marketing-card .card-content {
        padding: 16px;
    }

    #modernMainContent #marketingInsightsCard .card-actions {
        width: 100%;
    }

    #modernMainContent .insights-controls,
    #modernMainContent .insights-controls-group {
        width: 100%;
        justify-content: flex-start;
    }

    #modernMainContent .insights-controls {
        gap: 8px;
    }

    #modernMainContent .insights-controls-group {
        flex-wrap: nowrap;
        gap: 8px;
    }

    #modernMainContent .insights-controls-label {
        width: auto;
        flex-shrink: 0;
    }

    #modernMainContent .insights-controls .input-group {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    #modernMainContent .insights-controls .form-select,
    #modernMainContent .insights-controls .form-control {
        width: 1%;
        min-width: 0;
        flex: 1 1 auto;
    }

    #modernMainContent .insights-charts .chart-wrap {
        height: 230px;
    }

    #modernMainContent .insights-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #modernMainContent .insight-kpi,
    #modernMainContent .insight-kpi-highlight {
        padding: 12px;
    }

    #modernMainContent .insights-expiring-head {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #modernMainContent .insights-expiring-head .small.text-muted {
        padding-left: 0;
    }

    #modernMainContent .insights-expiring-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
    }

    #modernMainContent .insights-expiring-main {
        grid-column: 1 / -1;
    }

    #modernMainContent .insights-expiring-date {
        justify-self: end;
        text-align: right;
    }

    /* Abas: rolagem horizontal (o próprio container rola, como o JS espera) */
    #modernMainContent .gbz-tabs-mobile {
        position: relative;
        top: auto;
        z-index: auto;
        margin: 0 0 14px;
        padding: 4px;
        border: 1px solid var(--v2-card-border);
        border-radius: 10px;
        background: #ffffff;
        backdrop-filter: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #modernMainContent .gbz-tabs-mobile::-webkit-scrollbar {
        display: none;
    }

    #modernMainContent .gbz-tabs-mobile__track {
        display: flex;
        width: max-content;
        min-width: 100%;
        padding: 0;
        overflow: visible;
    }

    #modernMainContent .gbz-tab-chip {
        flex: 1 0 auto;
        min-width: 0;
        min-height: 40px;
        padding: 0 12px 0 8px;
    }

    #modernMainContent .gbz-tab-chip__label {
        font-size: 13.5px;
    }

    /* Comissão: "Não" | chave | "Sim" na mesma linha, como no desktop */
    #modernMainContent .commission-base-controls {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 10px;
    }

    #modernMainContent .commission-base-controls .form-check.form-switch {
        justify-self: center;
    }

    #modernMainContent .commission-base-switch-label {
        text-align: left;
    }

    #modernMainContent .commission-base-switch-label:last-child {
        text-align: right;
    }
}

@media (max-width: 576px) {
    /* KPIs principais em 2 x 2 */
    #modernMainContent .marketing-kpis {
        margin-bottom: 16px;
    }

    #modernMainContent .marketing-kpis .row {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    #modernMainContent .marketing-kpis .row > [class*="col-"] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    #modernMainContent .kpi-card {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 10px;
        padding: 14px 12px 12px;
    }

    #modernMainContent .kpi-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 14px;
    }

    #modernMainContent .kpi-value {
        font-size: 19px;
        overflow-wrap: anywhere;
    }

    #modernMainContent .kpi-label {
        margin: 3px 0 4px;
        font-size: 12.5px;
        line-height: 1.3;
    }

    #modernMainContent .kpi-card small {
        font-size: 11.5px;
    }

    #modernMainContent .marketing-card + .marketing-card,
    #modernMainContent .marketing-card.mb-4 {
        margin-bottom: 16px !important;
    }

    #modernMainContent > .content-area .row.g-4 {
        --bs-gutter-y: 16px;
    }

    #modernMainContent .marketing-card .card-content {
        padding: 14px;
    }

    #modernMainContent .insights-charts .insights-chart-card,
    #modernMainContent .insights-expiring,
    #modernMainContent .insights-detail-card {
        padding: 12px;
    }

    #modernMainContent .insight-kpi .value {
        font-size: 16px;
    }

    #modernMainContent .insights-details {
        margin-top: 16px !important;
        padding-top: 16px;
    }

    /* Controles de 16px (evita zoom do iPhone ao focar) */
    #modernMainContent .insights-controls :is(.form-select, .form-control, .input-group-text) {
        height: 44px;
        min-height: 44px;
        font-size: 16px;
    }

    #modernMainContent .marketing-card .form-control {
        min-height: 44px;
        font-size: 16px;
    }

    /* Datas do período personalizado: uma por linha (lado a lado cortavam a data) */
    #modernMainContent #insightsCustomRange {
        flex-wrap: wrap;
    }

    #modernMainContent #insightsCustomRange .input-group {
        flex: 1 1 100%;
    }

    #modernMainContent #insightsCustomRange .input-group-text {
        min-width: 52px;
        justify-content: center;
    }

    #modernMainContent #btnSalvarAutomacao,
    #modernMainContent #btnGerenciarConexaoWhatsapp {
        min-height: 44px;
    }

    #modernMainContent .marketing-card .card-header .btn-primary {
        min-height: 40px;
    }

    #modernMainContent .table-responsive {
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    /* ---------- Tabelas viram cards compactos ---------- */
    #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks),
    #modernMainContent .insights-detail-card .table {
        display: block;
        width: 100%;
    }

    #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) thead,
    #modernMainContent .insights-detail-card thead {
        display: none;
    }

    #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) tbody,
    #modernMainContent .insights-detail-card tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) tbody tr,
    #modernMainContent .insights-detail-card tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        padding: 12px;
        border: 1px solid var(--v2-card-border);
        border-radius: 10px;
        background: #ffffff;
    }

    #modernMainContent .insights-detail-card tbody tr {
        padding: 10px 12px;
        border-color: var(--v2-card-divider);
        background: var(--v2-surface);
    }

    #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks) tbody td,
    #modernMainContent .insights-detail-card tbody td {
        display: block;
        padding: 0;
        border: 0;
        background: none !important;
        box-shadow: none !important;
        font-size: 13px;
        line-height: 1.4;
    }

    /* Rótulo curto antes de cada valor (o cabeçalho some no celular) */
    #modernMainContent #tabelaCupons :is(td:nth-child(3), td:nth-child(4))::before,
    #modernMainContent #tabelaCuponsContextuais :is(td:nth-child(4), td:nth-child(5), td:nth-child(6))::before,
    #modernMainContent #tabelaCashbacks :is(td:nth-child(2), td:nth-child(3))::before,
    #modernMainContent #insightsCashbacksTable :is(td:nth-child(3), td:nth-child(4))::before,
    #modernMainContent #insightsContextualTable td:nth-child(4)::before,
    #modernMainContent #insightsByClientTable td:nth-child(n+2)::before {
        margin-right: 4px;
        color: var(--v2-muted);
        font-size: 12px;
        font-weight: 400;
    }

    /* Cupons manuais: código + status + ações / nome / desconto · validade / uso */
    #modernMainContent #tabelaCupons td:nth-child(1) { order: 1; }
    #modernMainContent #tabelaCupons td:nth-child(6) { order: 2; }
    #modernMainContent #tabelaCupons td:nth-child(2) { order: 4; flex: 1 1 100%; min-width: 0; }
    #modernMainContent #tabelaCupons td:nth-child(3) { order: 5; }
    #modernMainContent #tabelaCupons td:nth-child(4) { order: 6; }
    #modernMainContent #tabelaCupons td:nth-child(5) { order: 7; flex: 1 1 0; min-width: 0; }
    #modernMainContent #tabelaCupons td:nth-child(7) { order: 8; }

    /* Linha de baixo (uso + ações) começa sempre numa linha nova */
    #modernMainContent #tabelaCupons tbody tr::after {
        content: '';
        order: 6;
        flex: 1 1 100%;
        height: 0;
        margin: 2px 0;
        border-top: 1px solid var(--v2-card-divider);
    }

    #modernMainContent #tabelaCupons td:nth-child(3)::before { content: 'Desconto'; }
    #modernMainContent #tabelaCupons td:nth-child(4)::before { content: 'Validade'; }

    #modernMainContent #tabelaCupons td:nth-child(2) .fw-medium {
        font-size: 14px;
    }

    #modernMainContent #tabelaCupons td:nth-child(2) > .small {
        display: inline-flex;
        align-items: center;
        margin: 2px 10px 0 0;
    }

    #modernMainContent #tabelaCupons td:nth-child(3),
    #modernMainContent #tabelaCupons td:nth-child(4) {
        color: var(--v2-text);
        font-weight: 500;
    }

    #modernMainContent #tabelaCupons td:nth-child(5) {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        gap: 0 8px;
        color: var(--v2-muted);
    }

    #modernMainContent #tabelaCupons td:nth-child(5) > div {
        white-space: nowrap;
        font-size: 12.5px;
    }


    /* Cupons contextuais: seleção + cliente + excluir / código + status / valor · gatilho · validade */
    #modernMainContent #tabelaCuponsContextuais td:nth-child(1) { order: 1; line-height: 0; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(2) { order: 2; flex: 1 1 0; min-width: 0; color: var(--v2-text); font-size: 14px; font-weight: 500; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(8) { order: 3; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(3) { order: 5; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(7) { order: 6; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(4) { order: 7; flex: 1 1 100%; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(5) { order: 8; flex: 1 1 100%; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(6) { order: 9; flex: 1 1 100%; }

    /* Código + status sempre na segunda linha */
    #modernMainContent #tabelaCuponsContextuais tbody tr::after {
        content: '';
        order: 4;
        flex: 1 1 100%;
        height: 0;
        margin: -4px 0;
    }

    #modernMainContent #tabelaCuponsContextuais td:nth-child(4) {
        padding-top: 6px;
        border-top: 1px solid var(--v2-card-divider);
        color: var(--v2-text);
        font-weight: 500;
    }

    #modernMainContent #tabelaCuponsContextuais td:nth-child(4)::before { content: 'Valor'; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(5)::before { content: 'Gatilho'; }
    #modernMainContent #tabelaCuponsContextuais td:nth-child(6)::before { content: 'Validade'; }

    #modernMainContent #tabelaCuponsContextuais :is(td:nth-child(5), td:nth-child(6)) {
        color: var(--v2-text-2);
        font-size: 12.5px;
        overflow-wrap: anywhere;
    }

    #modernMainContent #tabelaCuponsContextuais .form-check-input {
        width: 20px;
        height: 20px;
        margin: 0;
    }

    /* Cashbacks: cliente + status / saldo · expira / origem */
    #modernMainContent #tabelaCashbacks td:nth-child(1) { order: 1; flex: 1 1 0; min-width: 0; color: var(--v2-text); font-size: 14px; font-weight: 500; }
    #modernMainContent #tabelaCashbacks td:nth-child(4) { order: 2; }
    #modernMainContent #tabelaCashbacks td:nth-child(2) { order: 3; flex: 1 1 100%; }
    #modernMainContent #tabelaCashbacks td:nth-child(3) { order: 4; }
    #modernMainContent #tabelaCashbacks td:nth-child(5) { order: 5; margin-left: auto; }

    #modernMainContent #tabelaCashbacks td:nth-child(2) {
        font-size: 15px;
    }

    #modernMainContent #tabelaCashbacks td:nth-child(2)::before { content: 'Saldo'; }
    #modernMainContent #tabelaCashbacks td:nth-child(3)::before { content: 'Expira'; }

    #modernMainContent #tabelaCashbacks td:nth-child(3) {
        color: var(--v2-text-2);
    }

    /* Ações por linha: 40px no celular */
    #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-sm,
    #modernMainContent #tabelaCashbacks .btn-icon {
        width: 40px;
        height: 40px;
        min-height: 40px;
    }

    #modernMainContent #tabelaCashbacks .btn-icon {
        width: 36px;
        height: 36px;
        min-height: 36px;
    }

    /* Detalhes do período: cards claros */
    #modernMainContent #insightsCashbacksTable td:nth-child(2),
    #modernMainContent #insightsContextualTable td:nth-child(2) {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        color: var(--v2-text);
        font-size: 13.5px;
        font-weight: 500;
    }

    #modernMainContent #insightsCashbacksTable td:nth-child(5),
    #modernMainContent #insightsContextualTable td:nth-child(5) { order: 2; }

    #modernMainContent #insightsCashbacksTable td:nth-child(1),
    #modernMainContent #insightsContextualTable td:nth-child(1) {
        order: 3;
        flex: 1 1 100%;
        font-size: 12px;
    }

    #modernMainContent #insightsCashbacksTable td:nth-child(3),
    #modernMainContent #insightsContextualTable td:nth-child(3) { order: 4; }

    #modernMainContent #insightsCashbacksTable td:nth-child(4),
    #modernMainContent #insightsContextualTable td:nth-child(4) { order: 5; }

    #modernMainContent #insightsCashbacksTable td:nth-child(3)::before { content: 'Gerado'; }
    #modernMainContent #insightsCashbacksTable td:nth-child(4)::before { content: 'Usado'; }
    #modernMainContent #insightsContextualTable td:nth-child(4)::before { content: 'Valor'; }

    #modernMainContent #insightsByClientTable td:nth-child(1) {
        flex: 1 1 100%;
        color: var(--v2-text);
        font-size: 13.5px;
    }

    #modernMainContent #insightsByClientTable td:nth-child(n+2) {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
        color: var(--v2-text);
        font-size: 12.5px;
        font-weight: 500;
    }

    #modernMainContent #insightsByClientTable td:nth-child(2)::before { content: 'Cashback gerado'; }
    #modernMainContent #insightsByClientTable td:nth-child(3)::before { content: 'Cashback usado'; }
    #modernMainContent #insightsByClientTable td:nth-child(4)::before { content: 'Cupons ctx gerados'; }
    #modernMainContent #insightsByClientTable td:nth-child(5)::before { content: 'Cupons ctx usados'; }
    #modernMainContent #insightsByClientTable td:nth-child(6)::before { content: 'Custo cupom (fixo)'; }

    #modernMainContent #insightsByClientTable td:nth-child(n+2)::before {
        display: block;
        margin: 0;
    }

    /* Barra de seleção em massa */
    #modernMainContent .contextual-bulk-toolbar {
        gap: 10px !important;
    }

    #modernMainContent .contextual-bulk-toolbar > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    #modernMainContent .contextual-bulk-toolbar .btn {
        min-height: 40px;
    }

    #modernMainContent .marketing-pagination .page-link {
        min-width: 36px;
        height: 36px;
    }

    /* Coluna direita */
    #modernMainContent .marketing-card .form-check.form-switch {
        padding: 12px 12px 12px 60px;
    }

    #modernMainContent .marketing-card .form-check.form-switch .form-check-input {
        margin-left: -48px;
    }

    #modernMainContent .whatsapp-status-panel {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    #modernMainContent .whatsapp-status-copy {
        text-align: left;
    }
}

/* Celular estreito: o rótulo "Período" sobe para cima do campo */
@media (max-width: 380px) {
    #modernMainContent .insights-controls-group:first-child {
        flex-wrap: wrap;
    }

    #modernMainContent .insights-controls-label {
        width: 100%;
    }
}

/* ========================================
   RESPONSIVO: MODAIS
   ======================================== */
@media (max-width: 768px) {
    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-dialog,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-dialog {
        width: auto;
        max-width: calc(100vw - 32px);
        margin: 16px auto !important;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-content,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) :is(.modal-header, .modal-footer),
    body[data-support-page="marketing"] #visualizarComandaModal :is(.modal-header, .modal-footer) {
        flex-shrink: 0;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-body,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Rodapé: "Cancelar" compacto + ação principal larga */
    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-footer,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-footer {
        flex-direction: row !important;
        flex-wrap: nowrap;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-footer .btn,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        white-space: normal;
    }

    :is(#modalCupom, #modalCupomDetalhes) .modal-footer .btn[data-bs-dismiss="modal"]:not(:only-child),
    #modalNotifyCupomPush #btnNotifyCupomPushNo {
        flex: 0 0 auto;
        padding-left: 18px;
        padding-right: 18px;
    }

    #modalCupom :is(.form-control, .form-select),
    #modalCupom .input-group > #btnGerarCodigo,
    #modalCupom #containerSelectCliente .input-group-text {
        min-height: 44px;
    }

    #modalCupom :is(#btnToggleAllServicos, #btnToggleAllProdutos) {
        min-height: 32px;
    }

    /* Comanda: cards em coluna única */
    body[data-support-page="marketing"] #visualizarComandaModal #comandaContent .row > [class*="col-md-"] {
        width: 100%;
    }

    body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table td:first-child {
        width: 110px;
    }
}

/* CELULAR (<= 576px): folha presa na base da tela */
@media (max-width: 576px) {
    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush, #visualizarComandaModal) {
        --m-pad-x: 16px;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-dialog,
    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-dialog.modal-lg,
    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-dialog.modal-xl,
    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-dialog.modal-dialog-centered,
    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-dialog.modal-dialog-scrollable,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-dialog {
        display: flex;
        align-items: flex-end;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100%;
        margin: 0 !important;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush).fade .modal-dialog,
    body[data-support-page="marketing"] #visualizarComandaModal.fade .modal-dialog {
        transform: translateY(32px);
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush).show .modal-dialog,
    body[data-support-page="marketing"] #visualizarComandaModal.show .modal-dialog {
        transform: none;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-content,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-content {
        width: 100%;
        max-height: calc(100vh - 8px) !important;
        max-height: calc(100dvh - 8px) !important;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.16);
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-header,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-header {
        padding: 14px var(--m-pad-x);
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-title,
    body[data-support-page="marketing"] #visualizarComandaModal #tituloComanda {
        font-size: 15.5px;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-title > i,
    body[data-support-page="marketing"] #visualizarComandaModal #tituloComanda > i {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-header .btn-close,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-header .btn-close {
        width: 36px;
        height: 36px;
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-body,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-body {
        padding: 16px var(--m-pad-x);
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-footer,
    body[data-support-page="marketing"] #visualizarComandaModal .modal-footer {
        padding: 12px var(--m-pad-x);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    :is(#modalCupom, #modalCupomDetalhes, #modalNotifyCupomPush) .modal-footer .btn {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Campos com fonte 16px: evita o zoom automático do iPhone ao focar */
    #modalCupom :is(.form-control, .form-select) {
        font-size: 16px;
    }

    #modalCupom .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 14px;
    }

    #modalCupom :is(#listaServicosCheckboxes, #listaProdutosCheckboxes) .form-check {
        min-height: 30px;
        margin-bottom: 2px !important;
        padding-top: 3px;
    }

    #modalCupom :is(#listaServicosCheckboxes, #listaProdutosCheckboxes) .form-check-input {
        width: 18px;
        height: 18px;
        margin-top: 1px;
    }

    #modalCupom :is(.form-text, small.text-muted, .text-muted.small),
    #modalCupomDetalhes :is(.small.text-muted, .text-muted.small) {
        font-size: 13px;
    }

    /* Detalhes: 3 números lado a lado; histórico em lista */
    #modalCupomDetalhes .modal-body > .row.mb-4:first-child {
        --bs-gutter-x: 8px;
    }

    #modalCupomDetalhes .modal-body > .row.mb-4:first-child > .col-md-4 {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    #modalCupomDetalhes .modal-body .border.rounded.p-3 {
        padding: 10px !important;
    }

    #modalCupomDetalhes .modal-body .border.rounded .fs-5 {
        font-size: 15px !important;
        overflow-wrap: anywhere;
    }

    #modalCupomDetalhes .modal-body > .row.mb-4:nth-child(2) > .col-md-3 {
        flex: 0 0 auto;
        width: 50%;
    }

    #modalCupomDetalhes .table-responsive {
        overflow: visible;
    }

    #modalCupomDetalhes .table,
    #modalCupomDetalhes .table tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #modalCupomDetalhes .table thead {
        display: none;
    }

    #modalCupomDetalhes .table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: var(--v2-surface);
    }

    #modalCupomDetalhes .table tbody td {
        padding: 0;
        border: 0;
        background: none;
        font-size: 13px;
    }

    #modalCupomDetalhes .table tbody td:nth-child(2) {
        grid-row: 1;
        color: var(--v2-text);
        font-weight: 500;
    }

    #modalCupomDetalhes .table tbody td:nth-child(1) {
        grid-row: 1;
        grid-column: 2;
        color: var(--v2-muted);
        font-size: 12px;
    }

    #modalCupomDetalhes .table tbody td:nth-child(3)::before { content: 'Comanda '; color: var(--v2-muted); }
    #modalCupomDetalhes .table tbody td:nth-child(4)::before { content: 'Finalização '; color: var(--v2-muted); }

    #modalCupomDetalhes .table tbody td:nth-child(4) {
        overflow-wrap: anywhere;
        text-align: right;
    }

    /* Comanda */
    body[data-support-page="marketing"] #visualizarComandaModal :is(.comanda-info-section, .comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card) {
        padding: 14px;
    }

    body[data-support-page="marketing"] #visualizarComandaModal .comanda-info-table td {
        font-size: 13.5px;
    }
}

/* ========================================================================
   LISTAS NO CELULAR v2 (25/09/2026)
   Cupons, cupons automáticos, cashback e detalhes do período (Resultados).
   Cada linha vira um card próprio:
     linha 1: nome .......................................... status
     linha 2: informação secundária em cinza (a · b)
     números: até 3 valores lado a lado (rótulo pequeno em cima)
     ações:   uma faixa só, à direita, ícones sem borda
   Os cards de lista (mk-list-card) ficam sem caixa no celular, para as
   linhas ficarem direto sobre o fundo. Até 576px, como o resto da página.
   ======================================================================== */
@media (max-width: 576px) {
    /* ---------- Caixa externa ---------- */
    body[data-support-page="marketing"] #modernMainContent .marketing-card.mk-list-card {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body[data-support-page="marketing"] #modernMainContent .marketing-card.mk-list-card > .card-header {
        padding: 0 0 12px;
        border: 0;
        background: transparent;
    }

    body[data-support-page="marketing"] #modernMainContent .marketing-card.mk-list-card > .card-content {
        padding: 0;
    }

    body[data-support-page="marketing"] #modernMainContent .mk-list-card .contextual-bulk-toolbar {
        margin-bottom: 10px !important;
        padding: 12px;
        border: 1px solid var(--v2-card-border);
        border-radius: 12px;
        background: #ffffff;
    }

    body[data-support-page="marketing"] #modernMainContent .mk-list-card :is(#emptyCupons, #emptyCuponsContextuais, #emptyCashbacks) {
        border: 1px solid var(--v2-card-border);
        border-radius: 12px;
        background: #ffffff;
    }

    /* Detalhes do período: sem caixa dentro da caixa */
    body[data-support-page="marketing"] #modernMainContent .insights-detail-card {
        padding: 0;
        border: 0;
        background: transparent;
    }

    body[data-support-page="marketing"] #modernMainContent .insights-detail-card .detail-title {
        margin-bottom: 10px;
    }

    /* ---------- Card de cada linha ---------- */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks, #insightsCashbacksTable, #insightsContextualTable, #insightsByClientTable) > tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks, #insightsCashbacksTable, #insightsContextualTable, #insightsByClientTable) > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
        margin: 0;
        padding: 12px 14px;
        border: 1px solid var(--v2-card-border);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: var(--v2-card-shadow);
    }

    /* Quebras invisíveis: depois da linha 1 e depois da linha 2 */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks, #insightsCashbacksTable, #insightsContextualTable, #insightsByClientTable) > tbody > tr::before,
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks, #insightsCashbacksTable, #insightsContextualTable, #insightsByClientTable) > tbody > tr::after {
        content: '';
        display: block;
        flex: 0 0 100%;
        order: 2;
        height: 0;
        margin: 0;
        border: 0;
    }

    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks, #insightsCashbacksTable, #insightsContextualTable, #insightsByClientTable) > tbody > tr::after {
        order: 4;
    }

    /* Célula padrão = um número da faixa de números */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks, #insightsCashbacksTable, #insightsContextualTable, #insightsByClientTable) > tbody > tr > td {
        display: block;
        order: 5;
        flex: 1 1 0;
        min-width: 0;
        margin: 10px 0 0;
        padding: 0 8px 0 0;
        overflow: hidden;
        border: 0;
        color: var(--v2-text);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #tabelaCashbacks, #insightsCashbacksTable, #insightsContextualTable, #insightsByClientTable) > tbody > tr > td::before {
        content: none;
        display: block;
        margin: 0 0 2px;
        overflow: hidden;
        color: var(--v2-muted);
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Linha 1: nome */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons > tbody > tr > td:nth-child(2) > .fw-medium, #tabelaCuponsContextuais > tbody > tr > td:nth-child(2), #tabelaCashbacks > tbody > tr > td:nth-child(1), #insightsCashbacksTable > tbody > tr > td:nth-child(2), #insightsContextualTable > tbody > tr > td:nth-child(2), #insightsByClientTable > tbody > tr > td:nth-child(1)) {
        order: 0;
        flex: 1 1 1px; /* >0 para a quebra invisível não dividir a linha com o nome */
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: var(--v2-text);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Linha 1, à direita: status */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons > tbody > tr > td:nth-child(6), #tabelaCuponsContextuais > tbody > tr > td:nth-child(7), #tabelaCashbacks > tbody > tr > td:nth-child(4), #insightsCashbacksTable > tbody > tr > td:nth-child(5), #insightsContextualTable > tbody > tr > td:nth-child(5)) {
        order: 1;
        flex: 0 0 auto;
        margin: 0 0 0 10px;
        padding: 0;
        overflow: visible;
    }

    /* Linha 2: cinza, uma linha só */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons > tbody > tr > td:nth-child(1), #tabelaCupons > tbody > tr > td:nth-child(2) > .small, #tabelaCuponsContextuais > tbody > tr > td:is(:nth-child(3), :nth-child(5)), #tabelaCashbacks > tbody > tr > td:nth-child(5), #insightsContextualTable > tbody > tr > td:nth-child(3), #insightsByClientTable > tbody > tr > td:is(:nth-child(4), :nth-child(5))) {
        display: block;
        order: 3;
        flex: 0 1 auto;
        min-width: 0;
        margin: 3px 0 0;
        padding: 0;
        overflow: hidden;
        color: var(--v2-muted) !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Último item da linha 2 encolhe (reticências) em vez de descer */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons > tbody > tr > td:nth-child(2) > .small:last-child, #tabelaCuponsContextuais > tbody > tr > td:nth-child(5), #insightsByClientTable > tbody > tr > td:nth-child(5)) {
        flex: 1 1 0;
    }

    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons > tbody > tr > td:nth-child(2) > .small, #tabelaCuponsContextuais > tbody > tr > td:nth-child(5), #insightsByClientTable > tbody > tr > td:nth-child(5))::before {
        content: '·';
        display: inline;
        margin: 0 6px;
        color: #c3c8d0;
        font-size: 13px;
    }

    /* Código do cupom: texto simples, sem etiqueta colorida */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais, #insightsContextualTable) .font-monospace {
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--v2-text-2, #4b5563) !important;
        font-size: 12.5px;
        font-weight: 500 !important;
    }

    /* ---------- Cupons de desconto ---------- */
    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(2) {
        display: contents;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(2) > .small i,
    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(2) > .small.text-secondary,
    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(5) > .small {
        display: none;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:is(:nth-child(3), :nth-child(4), :nth-child(5)) {
        flex: 0 0 33.333%;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(5) {
        display: block;
        color: var(--v2-text);
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(5) > div {
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(3)::before { content: 'Desconto'; }
    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(4)::before { content: 'Validade'; }
    body[data-support-page="marketing"] #modernMainContent #tabelaCupons > tbody > tr > td:nth-child(5)::before { content: 'Usos'; }

    /* ---------- Cupons automáticos ---------- */
    body[data-support-page="marketing"] #modernMainContent #tabelaCuponsContextuais > tbody > tr > td:nth-child(1) {
        order: 0;
        flex: 0 0 auto;
        margin: 1px 10px 0 0;
        padding: 0;
        overflow: visible;
        line-height: 0;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCuponsContextuais .form-check-input {
        width: 18px;
        height: 18px;
        margin: 0;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCuponsContextuais > tbody > tr > td:is(:nth-child(4), :nth-child(6)) {
        flex: 0 0 50%;
        padding-top: 0;
        border: 0;
        color: var(--v2-text);
        font-size: 14px;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCuponsContextuais > tbody > tr > td:nth-child(4)::before { content: 'Valor'; }
    body[data-support-page="marketing"] #modernMainContent #tabelaCuponsContextuais > tbody > tr > td:nth-child(6)::before { content: 'Validade'; }

    /* ---------- Cashback ---------- */
    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks > tbody > tr > td:is(:nth-child(2), :nth-child(3)) {
        flex: 0 0 50%;
        color: var(--v2-text);
        font-size: 14px;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks > tbody > tr > td:nth-child(2)::before { content: 'Saldo'; }
    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks > tbody > tr > td:nth-child(3)::before { content: 'Expira em'; }

    /* Origem: "Comanda #123" em texto cinza + olho sem borda */
    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks > tbody > tr > td:nth-child(5) {
        flex: 1 1 100%;
        overflow: visible;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks > tbody > tr > td:nth-child(5) > div {
        gap: 2px !important;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks > tbody > tr > td:nth-child(5) .badge {
        padding: 0;
        border: 0 !important;
        background: transparent !important;
        color: var(--v2-muted) !important;
        font-size: 13px;
        font-weight: 400;
    }

    /* ---------- Detalhes do período ---------- */
    body[data-support-page="marketing"] #modernMainContent #insightsCashbacksTable > tbody > tr > td:is(:nth-child(1), :nth-child(3), :nth-child(4)) {
        flex: 0 0 33.333%;
        color: var(--v2-text) !important;
        font-size: 14px;
        font-weight: 500;
    }

    body[data-support-page="marketing"] #modernMainContent #insightsCashbacksTable > tbody > tr > td:nth-child(1) {
        flex-basis: 36%;
    }

    body[data-support-page="marketing"] #modernMainContent #insightsCashbacksTable > tbody > tr > td:is(:nth-child(3), :nth-child(4)) {
        flex: 1 1 0;
    }

    body[data-support-page="marketing"] #modernMainContent #insightsCashbacksTable > tbody > tr > td:nth-child(1)::before { content: 'Data'; }
    body[data-support-page="marketing"] #modernMainContent #insightsCashbacksTable > tbody > tr > td:nth-child(3)::before { content: 'Gerado'; }
    body[data-support-page="marketing"] #modernMainContent #insightsCashbacksTable > tbody > tr > td:nth-child(4)::before { content: 'Usado'; }

    body[data-support-page="marketing"] #modernMainContent #insightsContextualTable > tbody > tr > td:is(:nth-child(1), :nth-child(4)) {
        flex: 0 0 50%;
        color: var(--v2-text) !important;
        font-size: 14px;
        font-weight: 500;
    }

    body[data-support-page="marketing"] #modernMainContent #insightsContextualTable > tbody > tr > td:nth-child(1)::before { content: 'Data'; }
    body[data-support-page="marketing"] #modernMainContent #insightsContextualTable > tbody > tr > td:nth-child(4)::before { content: 'Valor'; }

    body[data-support-page="marketing"] #modernMainContent #insightsByClientTable > tbody > tr > td:is(:nth-child(2), :nth-child(3), :nth-child(6)) {
        flex: 0 0 33.333%;
        color: var(--v2-text);
        font-size: 14px;
    }

    body[data-support-page="marketing"] #modernMainContent #insightsByClientTable > tbody > tr > td:nth-child(2)::before { content: 'Cashback'; }
    body[data-support-page="marketing"] #modernMainContent #insightsByClientTable > tbody > tr > td:nth-child(3)::before { content: 'Usado'; }
    body[data-support-page="marketing"] #modernMainContent #insightsByClientTable > tbody > tr > td:nth-child(6)::before { content: 'Custo cupons'; }
    body[data-support-page="marketing"] #modernMainContent #insightsByClientTable > tbody > tr > td:nth-child(4)::before {
        content: 'Cupons:\00a0';
        display: inline;
        margin: 0;
        color: var(--v2-muted);
        font-size: 13px;
    }
    body[data-support-page="marketing"] #modernMainContent #insightsByClientTable > tbody > tr > td:nth-child(4)::after { content: ' gerado(s)'; }
    body[data-support-page="marketing"] #modernMainContent #insightsByClientTable > tbody > tr > td:nth-child(5)::after { content: ' usado(s)'; }

    /* ---------- Faixa de ações ---------- */
    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons > tbody > tr > td:nth-child(7), #tabelaCuponsContextuais > tbody > tr > td:nth-child(8)) {
        order: 7;
        flex: 1 1 100%;
        margin: 10px 0 0;
        padding: 10px 0 0;
        overflow: visible;
        border-top: 1px solid var(--v2-card-divider);
    }

    /* Uma ação só (excluir): fica na faixa dos números, à direita, sem faixa própria */
    body[data-support-page="marketing"] #modernMainContent #tabelaCuponsContextuais > tbody > tr > td:nth-child(8) {
        display: flex;
        order: 5;
        flex: 0 0 auto;
        align-self: flex-end;
        justify-content: flex-end;
        margin: 10px -6px 0 0;
        padding: 0;
        border: 0;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCuponsContextuais > tbody > tr > td:nth-child(4) {
        flex: 0 0 30%;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCuponsContextuais > tbody > tr > td:nth-child(6) {
        flex: 1 1 0;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCupons .btn-group {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
    }

    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-sm,
    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks .btn-icon {
        display: inline-flex;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--v2-muted) !important;
        font-size: 15px !important;
        transform: none !important;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks .btn-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        min-height: 30px;
        font-size: 13px !important;
    }

    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-outline-danger {
        color: #dc2626 !important;
    }

    body[data-support-page="marketing"] #modernMainContent :is(#tabelaCupons, #tabelaCuponsContextuais) .btn-sm:is(:hover, :focus-visible),
    body[data-support-page="marketing"] #modernMainContent #tabelaCashbacks .btn-icon:is(:hover, :focus-visible) {
        background: var(--v2-surface) !important;
    }

    /* "Ver detalhes" como ação principal, à esquerda */
    body[data-support-page="marketing"] #modernMainContent #tabelaCupons .btn-details {
        flex: 0 0 auto;
        order: -1;
        width: auto;
        margin-right: auto;
        padding: 0 10px 0 8px !important;
        gap: 6px;
        color: var(--primary-color, #3b82f6) !important;
        font-size: 13.5px !important;
        font-weight: 500;
    }

    body[data-support-page="marketing"] #modernMainContent #tabelaCupons .btn-details::after {
        content: 'Ver detalhes';
    }

    /* ---------- Paginação compacta e centralizada ---------- */
    body[data-support-page="marketing"] #modernMainContent .marketing-pagination {
        display: flex;
        justify-content: center;
        margin-top: 12px !important;
    }

    body[data-support-page="marketing"] #modernMainContent .marketing-pagination .pagination {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
    }

    body[data-support-page="marketing"] #modernMainContent .marketing-pagination .pagination:empty {
        display: none;
    }

    body[data-support-page="marketing"] #modernMainContent .marketing-pagination .page-link {
        min-width: 34px;
        height: 34px;
        padding: 0 6px;
        font-size: 13.5px;
    }
}