/* ============================================================
   NEOEXTRACT CRM — Sistema de Design (CSS)
   Estilos customizados para o dark mode premium
   ============================================================ */

/* --- Importação de Fonte Premium --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- Variáveis de Design (Tokens) --- */
:root {
    /* Cores de fundo */
    --cor-fundo:          #080c14;
    --cor-superficie:     #0d1421;
    --cor-superficie-2:   #111827;
    --cor-sidebar-bg:     #0d1421;
    --cor-superficie-3:   #1a2235;
    --cor-borda:          rgba(255, 255, 255, 0.06);
    --cor-borda-hover:    rgba(255, 255, 255, 0.12);

    /* Cores de destaque */
    --cor-primaria:       #3b82f6;
    --cor-primaria-hover: #2563eb;
    --cor-primaria-glow:  rgba(59, 130, 246, 0.3);
    --cor-secundaria:     #8b5cf6;
    --cor-sucesso:        #10b981;
    --cor-aviso:          #f59e0b;
    --cor-perigo:         #ef4444;
    --cor-info:           #06b6d4;

    /* Gradientes */
    --gradiente-primario: #0D4C91;
    --gradiente-fundo:    linear-gradient(135deg, #080c14 0%, #0d1421 100%);
    --gradiente-card:     linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(139,92,246,0.05) 100%);

    /* Texto */
    --cor-texto:          #f8fafc;
    --cor-texto-2:        #cbd5e1;
    --cor-texto-3:        #94a3b8;
    --cor-texto-4:        #64748b;

    /* Sombras */
    --sombra-sm:          0 1px 2px rgba(0, 0, 0, 0.15);
    --sombra-md:          0 8px 24px rgba(0, 0, 0, 0.2);
    --sombra-lg:          0 16px 48px rgba(0, 0, 0, 0.3);
    --sombra-primaria:    0 4px 24px rgba(59, 130, 246, 0.25);
    --sombra-roxo:        0 4px 24px rgba(139, 92, 246, 0.25);

    /* Dimensões */
    --largura-sidebar:    280px;
    --altura-navbar:      72px;
    --raio-borda:         0px;
    --raio-borda-sm:      0px;
    --raio-borda-lg:      0px;
    --raio-borda-pill:    0px;

    /* Transições */
    --transicao:          all 0.2s ease;
    --transicao-lenta:    all 0.35s ease;
}

html, body, .conteudo-principal {
    scrollbar-gutter: stable;
}

/* Enforce straight 90-degree corners across all UI components */
.card-estatistica,
.formulario-card,
.campo-input,
.btn,
.container-tabela,
.lembrete-card,
.aba-item,
.modal-conteudo,
.sidebar,
.sidebar-item,
.card,
select,
input,
textarea,
button {
    border-radius: 0 !important;
}


/* --- Variáveis de Temas Adicionais --- */
[data-theme="light"] {
    /* Cores de fundo */
    --cor-fundo:          #ffffff;
    --cor-superficie:     #ffffff;
    --cor-superficie-2:   #f8fafc;
    --cor-sidebar-bg:     #e2e8f0;
    --cor-superficie-3:   #f1f5f9;
    --cor-borda:          rgba(12, 75, 144, 0.08);
    --cor-borda-hover:    rgba(12, 75, 144, 0.16);

    /* Cores de destaque */
    --cor-primaria:       #0D4C91;
    --cor-primaria-hover: #0A3B70;
    --cor-primaria-glow:  rgba(13, 76, 145, 0.15);
    --cor-secundaria:     #4F76AA;

    /* Gradientes */
    --gradiente-fundo:    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --gradiente-card:     linear-gradient(135deg, rgba(13, 76, 145, 0.02) 0%, rgba(79, 118, 170, 0.02) 100%);

    /* Texto */
    --cor-texto:          #0f172a;
    --cor-texto-2:        #334155;
    --cor-texto-3:        #64748b;
    --cor-texto-4:        #94a3b8;

    /* Sombras no Light Mode */
    --sombra-sm:          0 1px 2px rgba(0, 0, 0, 0.02);
    --sombra-md:          0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
    --sombra-lg:          0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.02);
}

[data-theme="gray"] {
    /* Cores de fundo */
    --cor-fundo:          #18181b;
    --cor-superficie:     #27272a;
    --cor-superficie-2:   #3f3f46;
    --cor-sidebar-bg:     #27272a;
    --cor-superficie-3:   #52525b;
    --cor-borda:          rgba(255, 255, 255, 0.08);
    --cor-borda-hover:    rgba(255, 255, 255, 0.16);

    /* Cores de destaque */
    --cor-primaria:       #3b82f6;
    --cor-primaria-hover: #2563eb;
    --cor-primaria-glow:  rgba(59, 130, 246, 0.25);
    --cor-secundaria:     #a78bfa;

    /* Gradientes */
    --gradiente-fundo:    linear-gradient(135deg, #18181b 0%, #27272a 100%);
    --gradiente-card:     linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.03) 100%);

    /* Texto */
    --cor-texto:          #f4f4f5;
    --cor-texto-2:        #e4e4e7;
    --cor-texto-3:        #a1a1aa;
    --cor-texto-4:        #71717a;
}

/* --- Reset e Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
    font-size: 14px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* --- Scrollbar Customizada --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--altura-navbar);
    background: rgba(8, 12, 20, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--cor-borda);
    display: flex;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
    gap: 16px;
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.92);
}

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: var(--transicao);
}

.navbar-logo:hover {
    transform: scale(1.02);
    opacity: 0.95;
}

.navbar-logo-icon {
    width: 46px;
    height: 46px;
    background: var(--gradiente-primario);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: var(--sombra-primaria);
}

.navbar-logo-texto {
    font-size: 24px;
    font-weight: 800;
    background: var(--gradiente-primario);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 36px;
}

.navbar-link {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: var(--raio-borda-sm) var(--raio-borda-sm) 0 0;
    text-decoration: none;
    color: var(--cor-texto-3);
    font-weight: 600;
    font-size: 16px;
    transition: var(--transicao);
    border-bottom: 2px solid transparent;
}

.navbar-link:hover {
    color: var(--cor-texto);
    background: rgba(255,255,255,0.05);
}

[data-theme="light"] .navbar-link:hover {
    background: rgba(0,0,0,0.04);
}

.navbar-link.ativo {
    color: var(--cor-texto) !important;
    background: rgba(59, 130, 246, 0.08);
    border-bottom: 2px solid var(--cor-primaria);
    font-weight: 700;
}

[data-theme="light"] .navbar-link.ativo {
    background: rgba(13, 76, 145, 0.06);
}

.navbar-spacer { flex: 1; }

/* Terceiro Botão de Navegação: Configurações com Destaque Outline */
.navbar-link.nav-link-config {
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.04);
    border-radius: var(--raio-borda-sm);
    margin-left: 12px;
    padding: 8px 16px;
    color: var(--cor-texto-2);
    align-self: center;
    border-bottom: 1px solid rgba(59, 130, 246, 0.25);
}

.navbar-link.nav-link-config:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--cor-primaria);
    color: var(--cor-texto);
}

.navbar-link.nav-link-config.ativo {
    background: rgba(59, 130, 246, 0.18);
    border-color: var(--cor-primaria);
    color: var(--cor-texto) !important;
    font-weight: 700;
    border-bottom: 1px solid var(--cor-primaria);
}

[data-theme="light"] .navbar-link.nav-link-config {
    border: 1px solid rgba(13, 76, 145, 0.2);
    background: rgba(13, 76, 145, 0.03);
    border-bottom: 1px solid rgba(13, 76, 145, 0.2);
}

[data-theme="light"] .navbar-link.nav-link-config:hover {
    background: rgba(13, 76, 145, 0.08);
}

[data-theme="light"] .navbar-link.nav-link-config.ativo {
    background: rgba(13, 76, 145, 0.12);
}

.navbar-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: default;
    transition: var(--transicao);
}

[data-theme="light"] .navbar-usuario {
    background: none;
}

.navbar-usuario-nome {
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-texto-2);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-admin {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 2px 8px;
    border-radius: var(--raio-borda-pill);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.navbar-divisor {
    width: 1px;
    height: 18px;
    background-color: var(--cor-borda);
    margin: 0 12px;
    align-self: center;
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.layout-principal {
    display: flex;
    padding-top: 0;
    min-height: 100vh;
}

/* ============================================================
   SIDEBAR DE FILTROS
   ============================================================ */
.sidebar-filtros {
    width: var(--largura-sidebar);
    min-width: var(--largura-sidebar);
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
    padding: 24px 32px;
    height: calc(100vh - var(--altura-navbar));
    overflow-y: auto;
    position: sticky;
    top: var(--altura-navbar);
}

.sidebar-titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cor-texto-4);
    margin-bottom: 16px;
    padding: 0 8px;
}

.filtro-grupo {
    margin-bottom: 12px;
}

.filtro-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--cor-texto-3);
    margin-bottom: 4px;
    padding: 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filtro-input,
.filtro-select {
    width: 100%;
    background: var(--cor-superficie-2);
    border: 1px solid #94a3b8 !important;
    border-radius: 0 !important;
    color: var(--cor-texto);
    padding: 0 10px;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: var(--transicao);
    outline: none;
}

.filtro-input:focus,
.filtro-select:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-glow);
}

.filtro-select option {
    background: var(--cor-superficie-2);
    color: var(--cor-texto);
}

/* ============================================================
   DESTAQUE EXECUTIVE VIOLETA DO PERÍODO DE ABERTURA
   ============================================================ */
.filtro-input-periodo {
    border: 1px solid #8b5cf6 !important;
    background: rgba(245, 243, 255, 0.45) !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
}

.filtro-input-periodo:hover {
    border-color: #7c3aed !important;
    background: rgba(245, 243, 255, 0.8) !important;
}

.filtro-input-periodo:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
    background: #ffffff !important;
}

.filtro-periodo-ate {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   CONTEÚDO PRINCIPAL
   ============================================================ */
.conteudo-principal {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pagina-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pagina-titulo {
    font-size: 22px;
    font-weight: 700;
    color: var(--cor-texto);
    letter-spacing: -0.5px;
}

.pagina-subtitulo {
    font-size: 13px;
    color: var(--cor-texto-3);
    margin-top: 2px;
}

/* ============================================================
   CARDS DE ESTATÍSTICAS DO CRM (DESIGN EXECUTIVE PREMIUM)
   ============================================================ */
.cards-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.cards-stats-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.card-stat {
    background: var(--cor-superficie, #ffffff);
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    box-sizing: border-box;
    overflow: hidden;
}

.card-stat-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    z-index: 2;
}

.card-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    line-height: 1.2;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-stat-valor {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

/* Ícone Grande Decorativo em Tom Claro Suave (Estilo Notebook / Marca D'água Elegante) */
.card-stat-decorativo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.22s ease, opacity 0.22s ease;
    z-index: 1;
}

.card-stat-decorativo i {
    font-size: 38px;
    line-height: 1;
}

/* Cores Claras Específicas para Cada Status (Inspiradas no Notebook com Alta Suavidade) */
.card-stat-todos .card-stat-decorativo { color: rgba(13, 76, 145, 0.16); }
.card-stat-novo .card-stat-decorativo { color: rgba(37, 99, 235, 0.16); }
.card-stat-contatado .card-stat-decorativo { color: rgba(217, 119, 6, 0.18); }
.card-stat-qualificado .card-stat-decorativo { color: rgba(124, 58, 237, 0.16); }
.card-stat-proposta_enviada .card-stat-decorativo { color: rgba(234, 88, 12, 0.18); }
.card-stat-fechado .card-stat-decorativo { color: rgba(22, 163, 74, 0.18); }
.card-stat-perdido .card-stat-decorativo { color: rgba(220, 38, 38, 0.18); }

/* Efeito Hover Elevado */
.card-stat:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
}

.card-stat:hover .card-stat-decorativo {
    transform: scale(1.08);
}
.card-stat-todos:hover .card-stat-decorativo { color: rgba(13, 76, 145, 0.28); }
.card-stat-novo:hover .card-stat-decorativo { color: rgba(37, 99, 235, 0.28); }
.card-stat-contatado:hover .card-stat-decorativo { color: rgba(217, 119, 6, 0.30); }
.card-stat-qualificado:hover .card-stat-decorativo { color: rgba(124, 58, 237, 0.28); }
.card-stat-proposta_enviada:hover .card-stat-decorativo { color: rgba(234, 88, 12, 0.30); }
.card-stat-fechado:hover .card-stat-decorativo { color: rgba(22, 163, 74, 0.30); }
.card-stat-perdido:hover .card-stat-decorativo { color: rgba(220, 38, 38, 0.30); }

/* Estado Ativo/Selecionado (Aura Suave + Barra de Destaque Superior) */
.card-stat.selecionado {
    border-color: var(--cor-selecao, #3b82f6) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 1px var(--cor-selecao, #3b82f6), 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-1px);
}

.card-stat.selecionado::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--cor-selecao, #1e293b);
    border-radius: 8px 8px 0 0;
}

.card-stat.selecionado .card-stat-label {
    color: #0f172a;
    font-weight: 800;
}

.card-stat.selecionado .card-stat-decorativo {
    transform: scale(1.06);
}
.card-stat-todos.selecionado .card-stat-decorativo { color: rgba(13, 76, 145, 0.32); }
.card-stat-novo.selecionado .card-stat-decorativo { color: rgba(37, 99, 235, 0.32); }
.card-stat-contatado.selecionado .card-stat-decorativo { color: rgba(217, 119, 6, 0.34); }
.card-stat-qualificado.selecionado .card-stat-decorativo { color: rgba(124, 58, 237, 0.32); }
.card-stat-proposta_enviada.selecionado .card-stat-decorativo { color: rgba(234, 88, 12, 0.34); }
.card-stat-fechado.selecionado .card-stat-decorativo { color: rgba(22, 163, 74, 0.34); }
.card-stat-perdido.selecionado .card-stat-decorativo { color: rgba(220, 38, 38, 0.34); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--raio-borda-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    transition: var(--transicao);
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primario {
    background: #0D4C91 !important;
    color: #ffffff !important;
    border: 1px solid #0D4C91 !important;
    box-shadow: 0 2px 6px rgba(13, 76, 145, 0.25) !important;
}

.btn-primario i, .btn-primario span {
    color: #ffffff !important;
}

.btn-primario:hover:not(:disabled) {
    background: #093769 !important;
    border-color: #093769 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 76, 145, 0.35) !important;
}

.btn-primario:active:not(:disabled) {
    transform: translateY(0);
}

.btn-secundario {
    background: rgba(255,255,255,0.06);
    color: var(--cor-texto-2);
    border: 1px solid #0D4C91;
}

.btn-secundario:hover:not(:disabled) {
    background: rgba(255,255,255,0.10);
    border-color: #093769;
    color: var(--cor-texto);
}


#btn-limpar {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#btn-limpar:hover:not(:disabled) {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.btn-perigo {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 4px;
}

.btn-perigo:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
}

.btn-sucesso {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 4px;
}

.btn-sucesso:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.2);
}

.btn-detalhes {
    background: rgba(13, 76, 145, 0.08) !important;
    color: #0D4C91 !important;
    border: 1px solid rgba(13, 76, 145, 0.3) !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-detalhes i {
    color: #0D4C91 !important;
    font-size: 11px;
    transition: all 0.2s ease;
}

.btn-detalhes:hover:not(:disabled) {
    background: linear-gradient(135deg, #0D4C91 0%, #093769 100%) !important;
    color: #ffffff !important;
    border-color: #093769 !important;
    box-shadow: 0 2px 8px rgba(13, 76, 145, 0.35);
}

.btn-detalhes:hover:not(:disabled) i {
    color: #ffffff !important;
}

.btn-sm {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 12px;
    font-size: 12px;
    line-height: 1;
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.btn-lg {
    padding: 13px 28px;
    font-size: 15px;
    border-radius: var(--raio-borda);
}

.btn-full { width: 100%; }

/* ============================================================
   BADGES DE STATUS DO FUNIL
   ============================================================ */
.badge-funil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--raio-borda-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.badge-funil::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge-novo            { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.badge-contatado       { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.badge-qualificado     { background: rgba(139,92,246,0.15);  color: #a78bfa; }
.badge-proposta_enviada{ background: rgba(249,115,22,0.15);  color: #fb923c; }
.badge-fechado         { background: rgba(16,185,129,0.15);  color: #34d399; }
.badge-perdido         { background: rgba(239,68,68,0.15);   color: #f87171; }

/* ============================================================
   AG-GRID DARK MODE CUSTOMIZADO
   ============================================================ */
.ag-theme-alpine-dark {
    --ag-background-color: var(--cor-superficie) !important;
    --ag-odd-row-background-color: rgba(255,255,255,0.015) !important;
    --ag-header-background-color: var(--cor-superficie-2) !important;
    --ag-border-color: var(--cor-borda) !important;
    --ag-row-border-color: var(--cor-borda) !important;
    --ag-row-hover-color: rgba(59, 130, 246, 0.06) !important;
    --ag-selected-row-background-color: rgba(59, 130, 246, 0.12) !important;
    --ag-font-family: 'Inter', sans-serif !important;
    --ag-font-size: 13px !important;
    --ag-foreground-color: var(--cor-texto-2) !important;
    --ag-header-foreground-color: var(--cor-texto-3) !important;
    --ag-secondary-foreground-color: var(--cor-texto-4) !important;
    --ag-input-focus-border-color: var(--cor-primaria) !important;
    --ag-range-selection-border-color: var(--cor-primaria) !important;
    --ag-cell-horizontal-padding: 16px !important;
    border-radius: var(--raio-borda) !important;
    border: 1px solid var(--cor-borda) !important;
    overflow: hidden;
}

.ag-theme-alpine-dark .ag-header-cell-label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ag-theme-alpine-dark .ag-paging-panel {
    background: var(--cor-superficie-2);
    border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto-3);
    font-size: 12px;
    padding: 10px 16px;
}

/* ============================================================
   CONTAINER DO GRID
   ============================================================ */
.grid-container {
    background: var(--cor-superficie, #ffffff);
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 400px;
    overflow: hidden;
}

.grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 0 14px 0;
    border-bottom: 1px solid #e2e8f0;
    background: transparent;
    gap: 10px 12px;
}

.grid-header-titulo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ============================================================
   CABEÇALHO DO GRID DO CRM (LIMPO E MODERNO)
   ============================================================ */
.grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    gap: 12px;
    flex-wrap: wrap;
}

.grid-header-titulo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.grid-header-titulo-linha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.grid-header-relatorios-linha {
    display: flex;
    align-items: center;
}

.grid-header-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.crm-btn-filtros-mobile {
    display: none !important;
}

.crm-btn-adicionar {
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.crm-btn-exportar {
    background: #059669 !important;
    border: 1px solid #059669 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
    gap: 7px !important;
    padding: 0 13px !important;
    transition: all 0.18s ease;
}

.crm-btn-exportar i,
.crm-btn-exportar span {
    color: #ffffff !important;
}

.crm-btn-exportar:hover:not(:disabled) {
    background: #047857 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
}

.crm-btn-exportar:active:not(:disabled) {
    transform: translateY(0);
}

.crm-btn-imprimir {
    background: #0284c7 !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
    gap: 7px !important;
    padding: 0 13px !important;
    transition: all 0.18s ease;
}

.crm-btn-imprimir i,
.crm-btn-imprimir span {
    color: #ffffff !important;
}

.crm-btn-imprimir:hover:not(:disabled) {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

.crm-btn-imprimir:active:not(:disabled) {
    transform: translateY(0);
}

/* ============================================================
   SUBMENU & FILTROS DO CRM NA SIDEBAR (ESTILO NIOBIUM CRM)
   ============================================================ */
.sidebar-dropdown-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sidebar-dropdown-group .menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    cursor: pointer;
}

.submenu-arrow {
    font-size: 10px;
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.sidebar-dropdown-group.aberto .submenu-arrow {
    transform: rotate(180deg);
}

.sidebar-filters-crm {
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 10px;
    margin: 4px 0 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: visible !important;
}

.sidebar-filters-crm.hidden {
    display: none !important;
}

.sidebar-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-filters-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #93c5fd;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-btn-limpar {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.sidebar-btn-limpar:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-filter-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    overflow: visible !important;
    z-index: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.sidebar-filter-field:focus-within,
.sidebar-filter-field:has(.aberto) {
    z-index: 100;
}

.sidebar-filter-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.75);
    display: block;
    line-height: 1.2;
    margin-bottom: 2px;
}

.sidebar-search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.sidebar-search-icon {
    position: absolute;
    left: 9px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.sidebar-filter-search-input {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 0 10px 0 28px;
    background: #09284f;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.sidebar-filter-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.sidebar-filter-search-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
}

.sidebar-filter-select {
    width: 100%;
    background: #09284f;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    line-height: 18px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

/* Oculta o select nativo do fluxo se o custom select já estiver presente */
.sidebar-filter-field:has(.custom-select-container) > select.sidebar-filter-select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
}

.sidebar-filter-select option {
    background: #0D4C91;
    color: #ffffff;
}

.sidebar-filter-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
}

.sidebar-filter-sublabel {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 2px;
    display: block;
}

.sidebar-filter-date-input {
    width: 100%;
    background: #09284f;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 11px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    color-scheme: dark;
}

.sidebar-filter-date-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
}

/* ============================================================
   SELECT CUSTOMIZADO — ABERTURA ESTRITA 100% PARA BAIXO
   ============================================================ */
.custom-select-container {
    position: relative;
    width: 100%;
    user-select: none;
    font-family: inherit;
    box-sizing: border-box;
    z-index: 1;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
}

.custom-select-container.aberto {
    z-index: 1000;
}

.custom-select-trigger {
    width: 100%;
    background: #09284f;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    line-height: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    text-align: left;
    outline: none;
}

.custom-select-trigger:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: #0d3466;
}

.custom-select-trigger:focus,
.custom-select-container.aberto .custom-select-trigger {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
}

.custom-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 6px;
    flex: 1;
    font-size: 12px;
}

.custom-select-arrow {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.custom-select-container.aberto .custom-select-arrow {
    transform: rotate(180deg);
}

/* Menu Dropdown: TRAVADO 100% PARA BAIXO (NUNCA ABRE PARA CIMA) */
.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: 0;
    right: 0;
    width: 100%;
    background: #09284f;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 99999 !important;
    display: none;
    max-height: 250px;
    overflow: hidden !important;
    box-sizing: border-box;
}

.custom-select-container.aberto .custom-select-dropdown {
    display: flex;
    flex-direction: column;
    animation: customSelectDescer 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSelectDescer {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-select-search-box {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    background: #061a33 !important;
    flex-shrink: 0;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
}

.custom-select-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 11.5px;
    width: 100%;
    font-family: inherit;
}

.custom-select-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.custom-select-options {
    display: block;
    max-height: 195px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.custom-select-options::-webkit-scrollbar {
    width: 5px;
}

.custom-select-options::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
}

.custom-select-options::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.custom-select-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    box-sizing: border-box;
    flex-shrink: 0;
}

.custom-select-option:hover {
    background: #0D4C91;
    color: #ffffff;
}

.custom-select-option.selecionado {
    background: var(--cor-primaria, #3b82f6);
    color: #ffffff;
    font-weight: 700;
}

.custom-select-vazio {
    padding: 10px;
    text-align: center;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-filter-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 2px 0;
}


.sidebar-actions-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-action-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
}

.sidebar-action-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.sidebar-action-btn:active {
    transform: translateY(0);
}

.sidebar-action-btn i {
    font-size: 13px;
    width: 16px;
    text-align: center;
}

.grid-header .btn {
    border-radius: 4px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.grid-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #000000 !important;
}

.grid-contador {
    font-size: 12px;
    color: #000000 !important;
    font-weight: 600;
    background: #f8fafc;
    padding: 4px 10px;
    border-radius: var(--raio-borda-pill, 9999px);
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.grid-contador.com-selecao {
    background: rgba(13, 76, 145, 0.08);
    border-color: #93c5fd;
    color: #0D4C91 !important;
}

.grid-contador.filtrado {
    background: rgba(37, 99, 235, 0.08);
    border-color: #93c5fd;
    color: #1d4ed8 !important;
    font-weight: 700;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: var(--cor-superficie-2);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-lg);
    animation: toastEntrar 0.3s ease;
    backdrop-filter: blur(12px);
}

.toast.saindo {
    animation: toastSair 0.3s ease forwards;
}

.toast-icone { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.toast-mensagem { font-size: 13px; color: var(--cor-texto-2); line-height: 1.5; }
.toast-titulo { font-weight: 600; color: var(--cor-texto); margin-bottom: 2px; }

.toast-sucesso { border-left: 3px solid var(--cor-sucesso); }
.toast-erro    { border-left: 3px solid var(--cor-perigo); }
.toast-aviso   { border-left: 3px solid var(--cor-aviso); }
.toast-info    { border-left: 3px solid var(--cor-primaria); }

@keyframes toastEntrar {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSair {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(100%); }
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.modal-overlay.aberto {
    opacity: 1 !important;
    pointer-events: all !important;
    display: flex !important;
}

.modal {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-lg);
    width: 100%;
    max-width: 640px;
    box-shadow: var(--sombra-lg);
    transform: scale(0.97) translateY(10px);
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
    margin: auto;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    will-change: transform, opacity;
}

.modal-overlay.aberto .modal {
    transform: scale(1) translateY(0);
}

/* ============================================================
   MODAL DE DETALHES DO LEAD (EXECUTIVE 2-COLUMNS)
   ============================================================ */
.modal-lead-detalhes {
    max-width: 960px !important;
    width: 94vw !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.modal-empresa-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.modal-lead-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 16px;
    padding: 20px 24px;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.modal-lead-coluna {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-secao-card {
    background: #ffffff;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

.secao-titulo {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0D4C91 !important;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid #0D4C91 !important;
    padding-bottom: 8px;
}

.secao-titulo i {
    color: #0D4C91 !important;
}

/* ============================================================
   EXECUTIVE STATUS PICKER GRID (SELEÇÃO DE STATUS NO MODAL)
   ============================================================ */
.status-funil-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.status-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff;
    color: #475569;
    transition: all 0.2s ease;
    user-select: none;
}

.status-picker-btn i {
    font-size: 12px;
    transition: transform 0.15s ease;
}

.status-picker-btn:hover {
    border-color: #64748b !important;
    background: #f8fafc;
    color: #0f172a;
}

/* ESTADOS ATIVOS DE CADA STATUS */
.status-picker-btn.status-btn-novo.ativo {
    background: rgba(37, 99, 235, 0.1) !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.status-picker-btn.status-btn-novo.ativo i { color: #2563eb !important; }

.status-picker-btn.status-btn-contatado.ativo {
    background: rgba(217, 119, 6, 0.1) !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);
}
.status-picker-btn.status-btn-contatado.ativo i { color: #d97706 !important; }

.status-picker-btn.status-btn-qualificado.ativo {
    background: rgba(124, 58, 237, 0.1) !important;
    border-color: #7c3aed !important;
    color: #7c3aed !important;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15);
}
.status-picker-btn.status-btn-qualificado.ativo i { color: #7c3aed !important; }

.status-picker-btn.status-btn-proposta_enviada.ativo {
    background: rgba(234, 88, 12, 0.1) !important;
    border-color: #ea580c !important;
    color: #ea580c !important;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.15);
}
.status-picker-btn.status-btn-proposta_enviada.ativo i { color: #ea580c !important; }

.status-picker-btn.status-btn-fechado.ativo {
    background: rgba(22, 163, 74, 0.1) !important;
    border-color: #16a34a !important;
    color: #16a34a !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15);
}
.status-picker-btn.status-btn-fechado.ativo i { color: #16a34a !important; }

.status-picker-btn.status-btn-perdido.ativo {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
}
.status-picker-btn.status-btn-perdido.ativo i { color: #dc2626 !important; }

.info-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.info-item-full {
    grid-column: span 2;
}

.badge-socio {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 6px;
    margin-bottom: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.modal-secao-card .form-textarea,
.modal-secao-card .form-input,
.modal-secao-card .lista-anotacoes-container {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 6px !important;
}

.socios-lista-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* Responsividade para Tablet e Mobile */
@media (max-width: 1024px) {
    .modal-overlay {
        padding: 10px !important;
        align-items: center !important;
    }

    .modal-lead-detalhes {
        max-width: 100% !important;
        width: 98vw !important;
        max-height: 94vh !important;
        margin: auto !important;
        border-radius: 12px !important;
    }

    .modal-lead-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 16px !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
    
    .info-grid-2col {
        grid-template-columns: 1fr 1fr !important;
    }

    .status-funil-picker-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .info-item-full {
        grid-column: span 1 !important;
    }
}

@media (max-width: 576px) {
    .info-grid-2col {
        grid-template-columns: 1fr !important;
    }

    .modal-lead-grid {
        padding: 12px !important;
    }

    .status-funil-picker-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    position: relative;
    z-index: 1;
}

.modal-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--cor-texto);
    word-break: break-word;
}

.modal-fechar {
    background: none;
    border: none;
    color: var(--cor-texto-4);
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
    border-radius: 0;
    transition: var(--transicao);
    line-height: 1;
}

.modal-fechar:hover { color: var(--cor-texto); background: rgba(255,255,255,0.06); }

.modal-corpo {
    padding: 24px;
}

.modal-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.form-grupo { margin-bottom: 20px; }

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-texto-3);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    background: var(--cor-superficie-2);
    border: 1px solid var(--cor-borda);
    border-radius: 0;
    color: var(--cor-texto);
    padding: 11px 14px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: var(--transicao);
    outline: none;
    -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-glow);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-select option,
.filtro-select option {
    background: #ffffff;
    color: #0f172a;
}

/* ============================================================
   PÁGINA DE LOGIN
   ============================================================ */
.login-pagina {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--cor-fundo);
    position: relative;
    overflow: hidden;
}

.login-bg-decorativo {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.login-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.12;
}

.login-bg-orb-1 {
    width: 600px; height: 600px;
    background: #3b82f6;
    top: -200px; left: -200px;
}

.login-bg-orb-2 {
    width: 500px; height: 500px;
    background: #8b5cf6;
    bottom: -150px; right: -150px;
    animation-delay: -4s;
}

@keyframes orb-flutuar {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(30px, -30px) scale(1.05); }
}

.login-card {
    background: #0d1421; /* Fundo sólido para excelente performance e fim do lag de digitação */
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-lg);
    padding: 48px 40px;
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 1;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

.login-voltar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cor-texto-3);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
    transition: var(--transicao);
    opacity: 0.85;
    width: 100%;
    text-align: center;
}

.login-voltar-link:hover {
    color: var(--cor-primaria);
    opacity: 1;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    justify-content: center;
    text-decoration: none;
    transition: var(--transicao);
}

.login-logo:hover {
    transform: scale(1.02);
    opacity: 0.95;
}

.login-logo-icone {
    width: 48px; height: 48px;
    background: var(--gradiente-primario);
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: var(--sombra-primaria);
}

.login-logo-nome {
    font-size: 24px;
    font-weight: 800;
    background: var(--gradiente-primario);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.login-titulo {
    font-size: 22px;
    font-weight: 700;
    color: var(--cor-texto);
    text-align: center;
    margin-bottom: 8px;
}

.login-subtitulo {
    font-size: 13px;
    color: var(--cor-texto-4);
    text-align: center;
    margin-bottom: 32px;
}

.login-tabs {
    display: flex;
    background: var(--cor-superficie-2);
    border-radius: var(--raio-borda-sm);
    padding: 4px;
    margin-bottom: 28px;
}

.login-tab {
    flex: 1;
    padding: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-texto-4);
    cursor: pointer;
    border-radius: 0;
    transition: var(--transicao);
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
}

.login-tab.ativo {
    background: var(--cor-superficie-3);
    color: var(--cor-texto);
    box-shadow: var(--sombra-sm);
}

.login-erro {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: var(--raio-borda-sm);
    padding: 12px 16px;
    color: #fca5a5;
    font-size: 13px;
    margin-bottom: 16px;
    display: none;
}

.login-sucesso {
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: var(--raio-borda-sm);
    padding: 12px 16px;
    color: #6ee7b7;
    font-size: 13px;
    margin-bottom: 16px;
    display: none;
}

.login-link {
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transicao);
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.login-link:hover { color: #60a5fa; text-decoration: underline; }

/* ============================================================
   CARREGANDO (Loading)
   ============================================================ */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

.spinner-grande {
    width: 40px; height: 40px;
    border-width: 3px;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

.estado-carregando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--cor-texto-4);
    font-size: 14px;
}

.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--cor-texto-4);
    text-align: center;
    gap: 12px;
}

.estado-vazio-icone { font-size: 48px; opacity: 0.4; }
.estado-vazio-titulo { font-size: 16px; font-weight: 600; color: var(--cor-texto-3); }
.estado-vazio-texto { font-size: 13px; max-width: 320px; line-height: 1.7; }

#lista-anotacoes {
    border: 1px solid #94a3b8;
    border-radius: 0;
    padding: 10px 12px;
    background: var(--cor-superficie, #ffffff);
    margin-bottom: 16px;
    max-height: 200px;
    overflow-y: scroll;
    box-sizing: border-box;
}

#lista-anotacoes::-webkit-scrollbar {
    width: 6px;
}
#lista-anotacoes::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0;
}
#lista-anotacoes::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 0;
}
#lista-anotacoes::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.anotacao-item {
    background: var(--cor-superficie-2, #f8fafc);
    border: 1px solid var(--cor-borda, #e2e8f0);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.anotacao-item:last-child {
    margin-bottom: 0;
}

.anotacao-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.anotacao-data {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.anotacao-editado-tag {
    font-size: 10px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

.anotacao-acoes {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-anotacao-acao {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-anotacao-acao:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

.btn-anotacao-acao.btn-anotacao-deletar:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.anotacao-conteudo {
    font-size: 13px;
    color: var(--cor-texto-2);
    line-height: 1.6;
}

/* ============================================================
   DRAG AND DROP (Upload Manual)
   ============================================================ */
.drop-zone {
    border: 2px dashed var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transicao);
    background: rgba(255,255,255,0.01);
}

.drop-zone:hover,
.drop-zone.drag-sobre {
    border-color: var(--cor-primaria);
    background: rgba(59, 130, 246, 0.04);
}

.drop-zone-icone { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.drop-zone-titulo { font-size: 15px; font-weight: 600; color: var(--cor-texto-2); margin-bottom: 8px; }
.drop-zone-subtitulo { font-size: 13px; color: var(--cor-texto-4); }

/* ============================================================
   TABELA DE LOGS
   ============================================================ */
.tabela-logs {
    width: 100%;
    border-collapse: collapse;
}

.tabela-logs th,
.tabela-logs td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
    font-size: 13px;
}

.tabela-logs th {
    background: var(--cor-superficie-2);
    color: var(--cor-texto-4);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tabela-logs tr:last-child td { border-bottom: none; }

.tabela-logs tr:hover td {
    background: rgba(255,255,255,0.02);
}

/* ============================================================
   GRADE DE INFORMAÇÕES DO LEAD
   ============================================================ */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.info-item { padding: 0; }

.info-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cor-texto-4);
    margin-bottom: 4px;
}

.info-valor {
    font-size: 13px;
    color: #0f172a;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    word-break: break-word;
}

.info-valor.destaque-vermelho {
    color: #dc2626;
    font-weight: 700;
}

/* ============================================================
   DIVISOR COM TEXTO
   ============================================================ */
.divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.divisor::before,
.divisor::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #334155;
}

.divisor-texto {
    font-size: 13px;
    color: #000000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
.mobile-header {
    display: none;
}

.cards-stats-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

/* Notebooks e Telas com Largura Média (1025px - 1440px) */
@media (max-width: 1440px) {
    .cards-stats-grid {
        gap: 8px;
    }
    .card-stat {
        padding: 10px 10px;
        min-height: 74px;
    }
    .card-stat-label {
        font-size: 10px;
        letter-spacing: 0.02em;
    }
    .card-stat-decorativo {
        font-size: 30px;
        margin-left: 4px;
    }
    .card-stat-decorativo i {
        font-size: 30px;
    }
    .card-stat-valor {
        font-size: 22px;
    }
}

@media (max-width: 1180px) {
    .cards-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
}

@media (max-width: 1024px) {
    html, body {
        height: 100% !important;
        height: 100dvh !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .layout-principal {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }

    .mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        padding: 10px 16px !important;
        background: #0D4C91 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        width: 100% !important;
        z-index: 100 !important;
        gap: 8px !important;
    }

    .mobile-menu-btn {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #ffffff;
        width: 38px;
        height: 38px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.15s ease;
        flex-shrink: 0;
        z-index: 2;
    }

    .mobile-menu-btn:hover,
    .mobile-menu-btn:active {
        background: rgba(255, 255, 255, 0.22);
    }

    /* Logo centralizada no meio exato do header mobile */
    .mobile-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1 !important;
        margin: 0 !important;
        max-width: calc(100% - 110px) !important;
        pointer-events: auto !important;
    }

    .mobile-logo .logo-img {
        height: 26px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1) !important;
    }

    .mobile-usuario-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: auto !important;
        z-index: 2 !important;
        flex-shrink: 0 !important;
    }

    /* Oculta saudação textual na barra superior compacta para não colidir com a Logo centralizada.
       A saudação 'Olá, [Nome]' é exibida com destaque completo no topo da barra lateral (menu gaveta). */
    .mobile-usuario-header .user-name {
        display: none !important;
    }

    .mobile-usuario-header .btn-sair {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        border-radius: 6px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: none !important;
        transition: all 0.15s ease-in-out;
    }

    .mobile-usuario-header .btn-sair i {
        font-size: 14px;
        color: #ffffff !important;
    }

    .mobile-usuario-header .btn-sair:hover {
        background: rgba(239, 68, 68, 0.35) !important;
        border-color: rgba(239, 68, 68, 0.6) !important;
        color: #ffffff !important;
    }

    /* Oculta divisória vertical no header mobile para alinhamento limpo */
    .mobile-header-divisor {
        display: none !important;
    }

    /* Conteúdo principal no Mobile / Tablet: ocupa exatamente a altura restante (100dvh - 60px) sem overflow no layout */
    .conteudo-principal {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px 16px calc(64px + env(safe-area-inset-bottom, 24px)) 16px !important;
        scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 24px)) !important;
    }

    /* Espaçador inferior seguro para garantir rolagem completa e confortável em qualquer dispositivo mobile */
    .conteudo-principal::after {
        content: "" !important;
        display: block !important;
        width: 100% !important;
        min-height: 32px !important;
        height: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        flex-shrink: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Sidebar Drawer no Mobile / Tablet (< 993px) */
    .sidebar-navegacao {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 88vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1000 !important;
        background: #0D4C91 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
    }

    .sidebar-navegacao .sidebar-menu {
        overflow-y: visible !important;
        flex: none !important;
        height: auto !important;
        min-height: auto !important;
    }

    .sidebar-navegacao.sidebar-aberta {
        transform: translateX(0) !important;
    }

    /* Backdrop escuro para fechar a sidebar mobile */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(2px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .sidebar-backdrop.ativo {
        opacity: 1;
        visibility: visible;
    }

    .sidebar-filtros {
        display: none;
    }

    .navbar-nav,
    .navbar-usuario {
        display: none !important;
    }

    html, body {
        overflow: hidden !important;
        height: 100% !important;
    }


    /* Impede colapso dos cards de configurações no mobile */
    .conteudo-principal .config-card,
    .conteudo-principal .config-card-duplo {
        flex-shrink: 0;
        align-self: stretch;
        width: 100%;
    }

    .cards-stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }

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

    .login-card {
        padding: 32px 24px;
    }

    .layout-principal {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 992px) {
    .grid-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 16px !important;
    }

    .grid-header-titulo-area {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .cards-stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 768px) {
    .conteudo-principal {
        padding: 12px 12px calc(64px + env(safe-area-inset-bottom, 24px)) 12px !important;
        scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 24px)) !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .cards-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .grid-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }

    .tanstack-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tanstack-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ============================================================
       CABEÇALHO DE LEADS DO CRM NO MODO MOBILE (100% CONTIDO)
       ============================================================ */
    .grid-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .grid-header-titulo-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .grid-header-titulo-linha {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .grid-titulo {
        font-size: 15px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        color: var(--cor-texto-1) !important;
    }

    #contador-leads {
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 3px 10px !important;
        border-radius: 9999px !important;
        background: var(--cor-superficie-2) !important;
        border: 1px solid var(--cor-borda) !important;
        color: var(--cor-texto-2) !important;
        white-space: nowrap !important;
    }

    .grid-header-relatorios-linha {
        display: flex !important;
        width: 100% !important;
    }

    #contador-relatorios-crm {
        width: 100% !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 11.5px !important;
        padding: 6px 12px !important;
        border-radius: 6px !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .grid-header-acoes {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
    }

    .crm-btn-filtros-mobile {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex: 1 1 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #1e293b !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        transition: all 0.15s ease !important;
        white-space: nowrap !important;
    }

    .crm-btn-filtros-mobile:hover,
    .crm-btn-filtros-mobile:active {
        background: #e2e8f0 !important;
        color: #0f172a !important;
        border-color: #94a3b8 !important;
    }

    .crm-btn-exportar,
    .crm-btn-imprimir {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex: 1 1 calc(50% - 4px) !important;
        height: 38px !important;
        min-height: 38px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        text-align: center !important;
        touch-action: manipulation !important;
    }

    .crm-btn-adicionar {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex: 1 1 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        text-align: center !important;
        touch-action: manipulation !important;
    }
}

@media (max-width: 360px) {
    .grid-header-acoes {
        flex-direction: column !important;
    }
    .crm-btn-filtros-mobile,
    .crm-btn-exportar,
    .crm-btn-imprimir,
    .crm-btn-adicionar {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

@media (max-width: 576px) {
    .pagina-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .cards-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ============================================================
   AG-GRID ALPINE LIGHT MODE CUSTOMIZADO
   ============================================================ */
.ag-theme-alpine {
    --ag-background-color: var(--cor-superficie) !important;
    --ag-odd-row-background-color: rgba(0,0,0,0.015) !important;
    --ag-header-background-color: var(--cor-superficie-2) !important;
    --ag-border-color: var(--cor-borda) !important;
    --ag-row-border-color: var(--cor-borda) !important;
    --ag-row-hover-color: rgba(59, 130, 246, 0.04) !important;
    --ag-selected-row-background-color: rgba(59, 130, 246, 0.08) !important;
    --ag-font-family: 'Inter', sans-serif !important;
    --ag-font-size: 13px !important;
    --ag-foreground-color: var(--cor-texto-2) !important;
    --ag-header-foreground-color: var(--cor-texto-3) !important;
    --ag-secondary-foreground-color: var(--cor-texto-4) !important;
    --ag-input-focus-border-color: var(--cor-primaria) !important;
    --ag-range-selection-border-color: var(--cor-primaria) !important;
    --ag-cell-horizontal-padding: 16px !important;
    border-radius: var(--raio-borda) !important;
    border: 1px solid var(--cor-borda) !important;
    overflow: hidden;
}

.ag-theme-alpine .ag-header-cell-label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ag-theme-alpine .ag-paging-panel {
    background: var(--cor-superficie-2);
    border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto-3);
    font-size: 12px;
    padding: 10px 16px;
}

/* ============================================================
   ÁREA DE CONFIGURAÇÕES / USUÁRIO
   ============================================================ */
.config-layout {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: calc(var(--altura-navbar) + 32px) 32px 40px 32px;
}

.config-titulo-secao {
    font-size: 18px;
    font-weight: 700;
    color: #0D4C91 !important;
    margin-bottom: 20px;
    border-bottom: 2px solid #0D4C91 !important;
    padding-bottom: 8px;
}

.config-titulo-secao i {
    color: #0D4C91 !important;
}

/* Layout de Configurações - 3 Seções Horizontais e Responsivas */
.config-secao-linha {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    width: 100%;
    align-items: stretch;
}

.config-secao-linha > .config-card {
    flex-shrink: 0;
    align-self: stretch;
    margin-bottom: 0 !important;
}

.flex-1 {
    flex: 1;
    min-width: 0;
}

.w-100 {
    width: 100%;
}

.flex-35 {
    flex: 0 0 35% !important;
    min-width: 0;
}

.flex-65 {
    flex: 0 0 65% !important;
    min-width: 0;
}

/* Botão Upgrade — Premium Dark Gradient */
.btn-upgrade {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.07) !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
}


.btn-upgrade::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transition: left 0.5s ease;
}

.btn-upgrade:hover::before {
    left: 100%;
}

.btn-upgrade:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Botão Pausar — Outline Premium */
#btn-pausar-plano {
    background: transparent !important;
    color: var(--cor-primaria) !important;
    border: 1.5px solid var(--cor-primaria) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
}

#btn-pausar-plano:hover {
    background: rgba(13, 76, 145, 0.06) !important;
    border-color: var(--cor-primaria-hover) !important;
    color: var(--cor-primaria-hover) !important;
    transform: translateY(-0.5px) !important;
}

/* Botão Cancelar Plano (Vermelho) vs Reativar Assinatura (Azul) */
#btn-cancelar-plano.modo-cancelar {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
    transition: all 0.15s ease-in-out !important;
}

#btn-cancelar-plano.modo-cancelar:hover {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

#btn-cancelar-plano.modo-reativar {
    background: #0D4C91 !important;
    color: #ffffff !important;
    border: 1px solid #0D4C91 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(13, 76, 145, 0.25) !important;
    transition: all 0.15s ease-in-out !important;
}

#btn-cancelar-plano.modo-reativar:hover {
    background: #093769 !important;
    border-color: #093769 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(13, 76, 145, 0.35) !important;
}



@media (max-width: 1024px) {
    .config-secao-linha {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }
    
    .flex-35,
    .flex-65 {
        flex: 1 1 100% !important;
    }
}

.config-card {
    background: var(--cor-superficie);
    border: 2px solid #94a3b8;
    border-radius: 0;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--sombra-md);
}

.config-plan-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    justify-content: space-between;
}

.config-plan-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.config-plan-badge {
    align-self: flex-start;
    background: rgba(16, 185, 129, 0.15);
    color: var(--cor-sucesso);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 12px;
    border-radius: var(--raio-borda-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.config-plan-acoes {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.config-plan-acoes button {
    width: 100% !important;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .config-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .config-plan-acoes {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    .config-plan-acoes button {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
    }

    .cartao-acoes-container {
        width: 100% !important;
        flex-direction: column !important;
        margin-top: 8px !important;
    }

    .cartao-acoes-container button {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px 16px !important;
    }
}

.config-table-container {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0;
}

.config-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #000000;
}

.config-table th, .config-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.config-table th {
    background: #f1f5f9 !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #94a3b8 !important;
    white-space: nowrap;
}

.config-table tr:hover td {
    background: rgba(255, 255, 255, 0.01);
}

[data-theme="light"] .config-table tr:hover td {
    background: rgba(0, 0, 0, 0.01);
}

.badge-financeiro {
    padding: 3px 8px;
    border-radius: var(--raio-borda-pill);
    font-size: 10px;
    font-weight: 700;
}

.badge-financeiro.pago {
    background: rgba(16, 185, 129, 0.15);
    color: var(--cor-sucesso);
}

.badge-financeiro.pendente {
    background: rgba(245, 158, 11, 0.15);
    color: var(--cor-aviso);
}

.btn-download-nf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transicao);
}

.btn-download-nf:hover {
    color: var(--cor-primaria-hover);
    text-decoration: underline;
}

.info-status-pausa {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--cor-texto-2);
    border-radius: var(--raio-borda);
    padding: 16px;
    margin-top: 16px;
    font-size: 13px;
}


.navbar-logo-img {
    height: 48px;
    display: block;
}

/* ============================================================
   SIDEBAR DE NAVEGAÇÃO UNIFICADO (LEFT SIDEBAR)
   ============================================================ */
.sidebar-navegacao {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    background: #0D4C91; /* Alterado do original para azul escuro */
    border-right: none;
    height: 100vh;
    max-height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    box-sizing: border-box;
    z-index: 100;
    overflow: hidden !important;
}



/* Saudação (greeting) */
.sidebar-usuario-header {
    padding: 4px 0 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.user-name-display {
    color: var(--cor-primaria);
}

/* Logo */
.sidebar-logo {
    display: flex;
    justify-content: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 20px;
    flex-shrink: 0;
}

.logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Menu */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

.sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    box-shadow: none !important;
}

.menu-item i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.15s ease-in-out;
    width: 18px;
    text-align: center;
}

.menu-item:hover,
.menu-item:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.menu-item:hover i,
.menu-item:focus i {
    color: #ffffff !important;
}

.menu-item.active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: none !important;
}

.menu-item.active i {
    color: #ffffff !important;
}

/* Customização de cores de ícones na barra lateral (Desativada para tema escuro) */
.menu-item-preto i, .menu-item-azul i, .menu-item-roxo i {
    /* Herda as cores do .menu-item para manter harmonia */
}

/* Divisor do menu estilo wiki */
.menu-divisor {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 16px 0;
    flex-shrink: 0;
}

/* Footer & Sair button */
.sidebar-footer {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: auto;
    flex-shrink: 0;
}

.btn-sair {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 13px;
    border-radius: 0;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out;
}

.btn-sair i {
    font-size: 16px;
    color: #ffffff !important;
    width: 18px;
    text-align: center;
}

.btn-sair:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* ============================================================
   PAINEL DE FILTROS (2-ROW SYSTEM ABOVE THE GRID)
   ============================================================ */
.painel-filtros {
    background: var(--cor-superficie);
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.filtros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 16px;
}

.filtros-grid .filtro-grupo {
    margin-bottom: 0;
}

.filtros-grid .filtro-grupo-duplo {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .filtros-grid .filtro-grupo-duplo {
        grid-column: span 2;
    }
}

@media (min-width: 1200px) {
    .filtros-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   FILTROS DE INTELIGÊNCIA DE LEADS (RECURSO PREMIUM DE ALTO IMPACTO)
   ============================================================ */
.secao-filtros-magicos {
    width: 100%;
    margin-top: 18px;
    margin-bottom: 6px;
    position: relative;
}

/* Card Principal de Inteligência - Cor Destaque Premium */
.card-filtro-magico {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f1fe 100%) !important;
    border: 1.5px solid #93c5fd !important;
    border-radius: 12px !important;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
    box-shadow: 0 4px 14px -2px rgba(13, 76, 145, 0.1), 0 2px 6px -1px rgba(13, 76, 145, 0.05);
    overflow: visible !important;
}

.card-filtro-magico:hover {
    border-color: #3b82f6 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -2px rgba(13, 76, 145, 0.16);
    z-index: 10;
}

/* Estado Ativo (Filtro Marcado) */
.card-filtro-magico.ativo,
.card-filtro-magico:has(input:checked) {
    background: linear-gradient(135deg, #e0edfe 0%, #cfe2fe 100%) !important;
    border-color: #0D4C91 !important;
    box-shadow: 0 8px 26px -2px rgba(13, 76, 145, 0.22) !important;
    transform: translateY(-2px);
}

/* Ícone do Card */
.card-magico-icon-wrapper {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.card-magico-icon-wrapper.intermediarios-icon {
    background: linear-gradient(135deg, #0D4C91 0%, #1e40af 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(13, 76, 145, 0.25);
    border: none;
}

.card-filtro-magico.ativo .card-magico-icon-wrapper.intermediarios-icon,
.card-filtro-magico:has(input:checked) .card-magico-icon-wrapper.intermediarios-icon {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transform: scale(1.04);
}

/* Conteúdo Central */
.card-magico-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.card-magico-meta {
    display: none !important;
}

.card-magico-titulo-label {
    font-size: 14.5px;
    font-weight: 700;
    color: #0c2340;
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: -0.15px;
}

.card-magico-desc {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.45;
    margin: 0;
}

/* Ações à Direita (Badge + Switch) */
.card-magico-acoes-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

.badge-premium-ai {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f8fafc;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    border: 1px solid #334155;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.badge-premium-ai i {
    font-size: 11px;
}

/* Switch Moderno */
.card-magico-switch-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.card-magico-switch {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
    cursor: pointer;
}

.card-magico-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.slider-magico {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px !important;
    border: 1.5px solid #94a3b8;
}

.slider-magico:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.card-magico-switch input:checked + .slider-magico {
    background: linear-gradient(135deg, #0D4C91 0%, #2563eb 100%);
    border-color: #0D4C91;
    box-shadow: 0 2px 8px rgba(13, 76, 145, 0.35);
}

.card-magico-switch input:checked + .slider-magico:before {
    transform: translateX(20px);
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Estado Bloqueado Premium */
.card-filtro-magico.bloqueado-trial {
    background: linear-gradient(135deg, #fffdf5 0%, #fef8e7 100%) !important;
    border: 1.5px solid #fde68a !important;
    opacity: 0.98;
    cursor: pointer;
    position: relative;
    overflow: visible !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08) !important;
    transition: all 0.25s ease;
}

.card-filtro-magico.bloqueado-trial:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.16) !important;
    transform: translateY(-2px);
    background: #fffbeb !important;
}

.card-filtro-magico.bloqueado-trial .card-magico-icon-wrapper {
    background: #fef3c7 !important;
    color: #f59e0b !important;
    border: 1px solid #fde68a !important;
    box-shadow: none !important;
}

.card-filtro-magico.bloqueado-trial:hover .card-magico-icon-wrapper {
    background: #f59e0b !important;
    color: #ffffff !important;
}

.card-filtro-magico.bloqueado-trial .slider-magico {
    cursor: pointer !important;
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

.card-filtro-magico.bloqueado-trial:hover .slider-magico {
    background-color: #fde68a !important;
    border-color: #f59e0b !important;
}

.badge-card-trial-lock {
    display: none !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .secao-filtros-magicos {
        margin-top: 14px;
    }

    .card-filtro-magico {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        gap: 12px;
        border-radius: 10px !important;
    }

    .card-magico-icon-wrapper {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .card-magico-titulo-label {
        font-size: 13.5px;
    }

    .card-magico-desc {
        font-size: 11.5px;
    }

    .card-magico-acoes-wrapper {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
    }

    .badge-premium-ai {
        font-size: 9.5px;
        padding: 4px 10px;
    }

    .card-magico-switch {
        width: 42px;
        height: 22px;
    }

    .slider-magico:before {
        height: 14px;
        width: 14px;
        left: 2px;
        bottom: 2px;
    }

    .card-magico-switch input:checked + .slider-magico:before {
        transform: translateX(20px);
    }
}

/* ============================================================
   RODAPÉ DE AÇÕES (FILTROS)
   ============================================================ */
.filtros-acoes-rodape {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #000000; /* divisória em cima */
}

.filtros-acoes-rodape .btn {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .filtros-acoes-rodape {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }
    
    .filtros-acoes-rodape .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   TOOLTIP CUSTOMIZADO PADRÃO OURO (AJUDA MÁGICA)
   ============================================================ */
.tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    z-index: 10;
}

.icon-ajuda-magico {
    color: var(--cor-primaria); /* azul oficial do sistema */
    font-size: 15px; /* um pouco maior para visibilidade */
    transition: color 0.2s ease;
}

.tooltip-container:hover {
    z-index: 9999;
}

.tooltip-container:hover .icon-ajuda-magico {
    color: var(--cor-primaria-hover); /* azul hover */
}

.tooltip-texto {
    visibility: hidden;
    width: 290px;
    background-color: #0f172a; /* slate-900 escuro premium ultra legível */
    color: #ffffff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 14px;
    position: absolute;
    z-index: 99999;
    bottom: 135%; /* acima do ícone */
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none; /* impede que trave no mouse */
}

/* Seta apontando para baixo */
.tooltip-texto::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}

/* Mostrar tooltip */
.tooltip-container:hover .tooltip-texto {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Prevenção de estouro lateral em telas pequenas */
@media (max-width: 768px) {
    .tooltip-texto {
        left: auto;
        right: -50px;
        transform: translateY(5px);
        width: 230px;
    }
    .tooltip-texto::after {
        left: auto;
        right: 53px;
    }
    .tooltip-container:hover .tooltip-texto {
        transform: translateY(0);
    }
}

/* Override config layout spacing */
@media (min-width: 1025px) {
    .layout-principal .conteudo-principal {
        padding: 32px 32px 40px 32px;
    }
}

/* Classes de Suporte e Tickets */
.opcao-ticket {
    border: 1px solid #94a3b8;
    border-radius: 0;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    background: var(--cor-superficie);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opcao-ticket:hover {
    border-color: #475569;
    background: var(--cor-superficie-2);
}

.opcao-ticket.ativo {
    border: 2px solid #000000;
    border-radius: 0;
    background: var(--cor-superficie-3);
    box-shadow: none;
}

.opcao-ticket.ativo:hover {
    border-color: #000000;
    background: var(--cor-superficie-3);
}

.ticket-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ticket-codigo {
    font-size: 11px;
    font-family: monospace;
    font-weight: 700;
    color: var(--cor-texto-3);
}

.ticket-status {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    text-transform: uppercase;
}

.ticket-status.pendente {
    background: rgba(245, 158, 11, 0.15);
    color: var(--cor-aviso);
}

.ticket-status.em_andamento {
    background: rgba(59, 130, 246, 0.15);
    color: var(--cor-primaria);
}

.ticket-status.resolvido {
    background: rgba(16, 185, 129, 0.15);
    color: var(--cor-sucesso);
}

.ticket-status.encerrado {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
}

.ticket-assunto {
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-data {
    font-size: 11px;
    color: var(--cor-texto-4);
}

/* ============================================================
   SEÇÕES DUPLAS: Mobile-First
   Default = bloco empilhado. Flex row apenas em desktop ≥1025px
   ============================================================ */

/* Mobile/Tablet: empilhado */
.config-card-duplo, .config-card-triplo {
    display: block;
    padding: 0;
    overflow: hidden;
}

.config-card-duplo > div:not(.config-divisor-vertical),
.config-card-triplo > div:not(.config-divisor-vertical) {
    display: block;
    width: 100%;
    padding: 20px 16px;
    box-sizing: border-box;
}

.config-divisor-vertical {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #94a3b8;
    padding: 0;
    margin: 0;
}

/* Desktop: lado a lado para Duplo (>= 1025px) */
@media (min-width: 1025px) {
    .config-card-duplo {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }

    .config-card-duplo > div:not(.config-divisor-vertical) {
        flex: 1;
        padding: 32px;
        box-sizing: border-box;
    }

    .config-card-duplo .config-divisor-vertical {
        width: 1px;
        height: auto;
        align-self: stretch;
        flex: none;
        padding: 0;
        margin: 0;
    }
}

/* Desktop: lado a lado para Triplo (>= 1200px) */
@media (min-width: 1200px) {
    .config-card-triplo {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }

    .config-card-triplo > div:not(.config-divisor-vertical) {
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
    }

    .config-card-triplo .config-divisor-vertical {
        width: 1px;
        height: auto;
        align-self: stretch;
        flex: none;
        padding: 0;
        margin: 0;
    }
}

/* Telas grandes: padding maior para Triplo (>= 1400px) */
@media (min-width: 1400px) {
    .config-card-triplo > div:not(.config-divisor-vertical) {
        padding: 32px;
    }
}


@media (max-width: 768px) {
    /* Ajustes gerais de layout de configurações para Smartphone */
    .config-card {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 0 !important;
    }
    
    .config-card-duplo > div:not(.config-divisor-vertical) {
        padding: 20px 16px !important;
    }
    
    .config-divisor-vertical {
        margin: 8px 0 !important;
    }
    
    /* Tabela de faturamento responsiva com fontes melhores e scroll suave */
    .config-table-container {
        margin: 0 -16px;
        padding: 0 16px;
        -webkit-overflow-scrolling: touch;
    }
    
    .config-table th, .config-table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    
    /* Botões de Ações do Plano empilhados no mobile */
    .config-plan-acoes {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }
    
    .config-plan-acoes button {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    /* Botões de Ação do Cartão de Crédito empilhados no mobile */
    .cartao-acoes-container {
        width: 100% !important;
        flex-direction: column !important;
        margin-top: 8px !important;
    }

    .cartao-acoes-container button {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px 16px !important;
        font-size: 13px !important;
    }
    
    /* Formulário de suporte responsivo */
    #form-novo-chamado {
        gap: 10px !important;
    }
    
    #form-novo-chamado > div {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    #form-novo-chamado input,
    #form-novo-chamado select,
    #form-novo-chamado textarea {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
    
}

/* Header de suporte flexível no mobile e notebook (até 1399px) */
@media (max-width: 1399px) {
    .suporte-header-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    
    .suporte-header-flex .config-titulo-secao {
        width: 100% !important;
    }
    
    .btn-link-ajuda {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
   BOTÃO DE CENTRAL DE AJUDA
   ============================================================ */
.btn-link-ajuda {
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-primaria) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #94a3b8;
    padding: 6px 12px;
    border-radius: 0;
    background: rgba(13, 76, 145, 0.02);
    transition: var(--transicao);
    box-sizing: border-box;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-link-ajuda:hover {
    background: rgba(13, 76, 145, 0.08) !important;
    border-color: #94a3b8 !important;
    color: var(--cor-primaria-hover) !important;
    transform: translateY(-0.5px);
}

[data-theme="dark"] .btn-link-ajuda {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.03);
}

[data-theme="dark"] .btn-link-ajuda:hover {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* ============================================================
   SISTEMA DE CRÉDITOS — Barra, Modal e Banner
   ============================================================ */

/* --- Barra de Créditos na Prospecção (header) --- */
/* --- Barra de Créditos na Prospecção / CRM (header) --- */
.creditos-bar-wrapper {
    position: relative;
    display: inline-flex;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 60;
}

.creditos-bar-prospeccao {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0D4C91 !important;
    border: 1px solid #0D4C91 !important;
    border-radius: 8px !important;
    padding: 7px 14px;
    min-width: 0;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(13, 76, 145, 0.18);
}

.creditos-bar-prospeccao:hover {
    background: #0B3F78 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 14px rgba(13, 76, 145, 0.28);
}

.creditos-bar-bloco {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.creditos-bar-bloco-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.creditos-bar-icon {
    color: #38bdf8 !important;
    font-size: 13px;
    flex-shrink: 0;
}

.creditos-bar-texto {
    font-size: 12px;
    color: #ffffff !important;
    white-space: nowrap;
}

.creditos-bar-texto strong {
    color: #ffffff !important;
    font-weight: 700;
}

/* Mini divisor entre os dois blocos na barra */
.creditos-bar-divisor {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.28);
    margin: 0 4px;
    flex-shrink: 0;
}

.creditos-track-mini {
    width: 52px;
    height: 6px;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;
    overflow: hidden;
    flex-shrink: 0;
}

.creditos-fill-inner {
    height: 100%;
    border-radius: 999px !important;
    transition: width 0.5s ease, background-color 0.3s;
}

.creditos-fill-inner.ok     { background: #38bdf8 !important; }
.creditos-fill-inner.aviso  { background: #f59e0b !important; }
.creditos-fill-inner.critico { background: #ef4444 !important; }

/* --- Popover / Tooltip Profissional de Cotas e Liberação Diária --- */
.creditos-popover-info {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 28px);
    background: #0D4C91;
    background: linear-gradient(180deg, #0D4C91 0%, #08386e 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 16px 18px;
    color: #ffffff;
    box-shadow: 0 16px 36px rgba(13, 76, 145, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    text-align: left;
    box-sizing: border-box;
}

.creditos-popover-info.mostrar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (min-width: 769px) {
    .creditos-bar-wrapper:hover .creditos-popover-info {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.creditos-popover-info::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 28px;
    width: 12px;
    height: 12px;
    background: #0D4C91;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
}

.popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.popover-titulo {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.popover-titulo i {
    color: #fbbf24;
    font-size: 14px;
}

.popover-plano-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
}

.popover-btn-fechar {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
    display: none;
}

.popover-btn-fechar:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
    .popover-btn-fechar {
        display: inline-block;
    }
}

/* Card Diário (Foco da cota do dia) */
.popover-card-diario {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

.popover-card-linha-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 6px;
}

.popover-card-label {
    font-weight: 700;
    font-size: 12px;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.popover-card-metrica {
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.popover-card-metrica strong {
    color: #ffffff;
    font-weight: 800;
}

.popover-card-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 6px;
    line-height: 1.45;
}

.popover-btn-whatsapp-platinum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 7px 12px;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #86efac !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.3;
}

.popover-btn-whatsapp-platinum:hover {
    background: rgba(34, 197, 94, 0.28);
    border-color: rgba(74, 222, 128, 0.6);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
    transform: translateY(-1px);
}

.popover-btn-whatsapp-platinum i {
    font-size: 13.5px;
    color: #4ade80;
}

.popover-barra-diaria-track {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0;
}

.popover-barra-diaria-fill {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8 0%, #34d399 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* Caixa com a contagem regressiva da nova liberação */
.popover-timer-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 11.5px;
    color: #ffffff;
}

.popover-timer-box i {
    color: #38bdf8;
    font-size: 12px;
    flex-shrink: 0;
}

.popover-timer-val {
    color: #38bdf8;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* Box de Alerta Não Cumulativo */
.popover-alerta-nao-cumulativo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: #ffffff;
}

.popover-alerta-nao-cumulativo i {
    color: #fbbf24;
    font-size: 12px;
    margin-top: 1px;
    flex-shrink: 0;
}

.popover-alerta-nao-cumulativo strong {
    color: #fef08a;
    font-weight: 700;
}

/* Card Mensal */
.popover-card-mensal {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

.popover-card-mensal .popover-card-linha-topo {
    margin-bottom: 4px;
}

/* Rodapé */
.popover-rodape {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.35;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.popover-rodape i {
    color: #34d399;
    font-size: 12px;
    flex-shrink: 0;
}

/* Responsividade do Popover de Créditos */
@media (max-width: 768px) {
    .creditos-popover-info {
        width: 340px;
        max-width: calc(100vw - 24px);
        right: -10px;
        padding: 14px 14px;
    }
    .creditos-popover-info::before {
        right: 22px;
    }
}

@media (max-width: 480px) {
    .creditos-popover-info {
        width: 300px;
        max-width: calc(100vw - 16px);
        right: -6px;
        padding: 12px 12px;
    }
    .creditos-popover-info::before {
        right: 18px;
    }
    .popover-titulo {
        font-size: 12.5px;
    }
    .popover-plano-badge {
        font-size: 9px;
        padding: 2px 6px;
    }
    .popover-card-mensal,
    .popover-card-diario {
        padding: 10px 10px;
    }
    .popover-card-desc {
        font-size: 10.5px;
    }
}

/* --- Barra de Seleção em Lote (fixa na base da tela) --- */
.barra-selecao-lote {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: var(--cor-superficie);
    border-top: 1px solid var(--cor-borda);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
    backdrop-filter: blur(12px);
    gap: 16px;
}

.barra-selecao-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-texto);
}

/* Posicionamento da barra flutuante no mobile */
@media (max-width: 1024px) {
    .barra-selecao-lote {
        bottom: 16px;
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .barra-selecao-lote > div {
        justify-content: stretch;
        gap: 8px;
    }

    .barra-selecao-lote .btn {
        flex: 1;
        justify-content: center;
    }
}

/* --- Modal de Limite de Créditos --- */
.modal-overlay-creditos {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
}

.modal-card-creditos {
    position: relative;
    z-index: 1;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    text-align: center;
}

@keyframes modalEntrar {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.modal-creditos-icone {
    font-size: 40px;
    margin-bottom: 16px;
    line-height: 1;
}

.modal-creditos-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--cor-texto);
    margin-bottom: 12px;
}

.modal-creditos-desc {
    font-size: 14px;
    color: var(--cor-texto-2);
    margin-bottom: 16px;
    line-height: 1.5;
}

.modal-creditos-desc strong {
    color: var(--cor-texto);
}

.modal-creditos-track {
    height: 8px;
    background: var(--cor-borda);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 14px;
}

.modal-creditos-fill {
    height: 100%;
    background: #ef4444;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.modal-creditos-renovacao {
    font-size: 12px;
    color: var(--cor-texto-3);
    margin-bottom: 24px;
}

.modal-creditos-renovacao strong {
    color: var(--cor-texto-2);
}

.modal-creditos-acoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Banner de Créditos no CRM --- */
.banner-creditos {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    margin-bottom: 16px;
    background: var(--cor-superficie-2);
    border: 1px solid #94a3b8 !important;
    border-radius: 0 !important;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 12px;
}

.banner-creditos-esquerda {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.banner-creditos-icon {
    color: #7c3aed !important; /* icone raio violeta premium */
    font-size: 14px;
    flex-shrink: 0;
}

.banner-creditos-texto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--cor-texto-2);
}

.banner-creditos-texto strong {
    color: var(--cor-texto);
}

.banner-creditos-renovacao {
    font-size: 12px;
    color: var(--cor-texto-3);
}

.banner-creditos-track {
    width: 120px;
    height: 6px;
    background: #e2e8f0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    flex-shrink: 0;
}

@media (max-width: 860px) {
    .pagina-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .creditos-bar-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    .creditos-bar-prospeccao {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 9px 12px !important;
        box-sizing: border-box !important;
    }

    .creditos-bar-divisor {
        display: none !important;
    }

    .creditos-bar-bloco {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .creditos-bar-bloco-info {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .creditos-bar-bloco .creditos-bar-texto {
        font-size: 11.5px !important;
        white-space: nowrap !important;
    }

    .creditos-bar-bloco .creditos-track-mini {
        width: 60px !important;
        flex-shrink: 0 !important;
    }

    .creditos-popover-info {
        right: auto;
        left: 50%;
        transform: translate(-50%, -8px);
        width: calc(100vw - 24px);
        max-width: 360px;
    }

    .creditos-popover-info.mostrar {
        transform: translate(-50%, 0);
    }

    .creditos-popover-info::before {
        right: auto;
        left: 50%;
        margin-left: -6px;
    }

    .banner-creditos-track {
        width: 100%;
    }

    .banner-creditos {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   SUPORTE TÉCNICO: Simetria da área de rolagem da Coluna 2
   ============================================================ */
.suporte-tickets-box {
    border: 1px solid #94a3b8;
    border-radius: 0;
    background: #ffffff;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#lista-tickets-suporte {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    height: 100%;
    padding-right: 4px;
}

@media (min-width: 1025px) {
    .suporte-tickets-box {
        height: 430px; /* Altura ideal calculada para simetria visual no desktop */
    }
}

@media (max-width: 1024px) {
    .suporte-tickets-box {
        max-height: 380px; /* Altura máxima controlada no mobile */
    }
}

/* Ajuste de margens inferiores e limites de altura para o modo notebook (1200px a 1440px) */
@media (min-width: 1200px) and (max-width: 1440px) {
    .suporte-tickets-box {
        height: 535px;
    }
    #detalhe-mensagem {
        max-height: 270px !important;
    }
}

/* Botão AnyDesk */
.btn-anydesk:hover {
    background: #e31e24 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 63, 0.35) !important;
    color: #ffffff !important;
}
.btn-anydesk:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .anydesk-decorativo {
        display: none !important;
    }
}

/* Responsividade do bloco AnyDesk (Oculta ícone e move botão no modo PC) */
@media (min-width: 1441px) {
    .anydesk-btn-left {
        display: none !important;
    }
    .anydesk-decorativo {
        display: none !important;
    }
    .anydesk-btn-right {
        display: block !important;
    }
}

/* ============================================================
   TANSTACK TABLE CUSTOMIZADO — TEMAS DARK/LIGHT & 5 LINHAS FIXAS
   ============================================================ */

.tanstack-table-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--cor-superficie, #0f172a);
    border: 1px solid var(--cor-borda, #1e293b);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Quando embutido dentro de container de grid com estrutura de secao própria */
.grid-container .tanstack-table-wrapper,
.grid-prospeccao-wrapper .tanstack-table-wrapper {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tanstack-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    container-type: inline-size;
}

.tanstack-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.tanstack-th,
.tanstack-th *,
.tanstack-header-content,
.tanstack-header-content span {
    color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.tanstack-th {
    padding: 14px 16px;
    background: #f1f5f9 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #94a3b8 !important;
    white-space: nowrap;
    user-select: none;
}

.tanstack-th.tanstack-sortable {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tanstack-th.tanstack-sortable:hover {
    background: #e2e8f0 !important;
    color: #000000 !important;
}

.tanstack-header-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tanstack-sort-icon {
    font-size: 11px;
    color: #000000 !important;
    opacity: 0.8;
}

.tanstack-sort-icon.active {
    color: var(--cor-primaria, #3b82f6) !important;
    font-weight: bold;
}

.tanstack-tr {
    border-bottom: 1px solid #cbd5e1;
    height: 52px;
    transition: background 0.15s ease;
}

.tanstack-tr:hover:not(.tanstack-tr-placeholder) {
    background: var(--cor-fundo-hover, rgba(0, 0, 0, 0.02));
}

.tanstack-tr.selected {
    background: rgba(59, 130, 246, 0.1) !important;
}

.tanstack-td {
    padding: 10px 16px;
    color: #000000 !important;
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

.tanstack-td span {
    color: #000000 !important;
}

.tanstack-th-select, .tanstack-td-select {
    width: 44px;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}

.tanstack-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--cor-primaria, #3b82f6);
    border-radius: 4px;
    vertical-align: middle;
}

.tanstack-disabled-check {
    color: #64748b;
    font-size: 12px;
}

/* ============================================================
   COLUNA DE AÇÕES NO CRM (PRIMEIRA COLUNA COM SEPARADOR NA FRENTE)
   ============================================================ */
.tanstack-th.col-acoes-crm {
    border-right: none !important;
    position: sticky;
    left: 0;
    z-index: 4;
    background: #f1f5f9 !important;
}

.tanstack-td.col-acoes-crm {
    border-right: none !important;
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff !important;
}

.tanstack-tr:hover:not(.tanstack-tr-placeholder) .tanstack-td.col-acoes-crm {
    background: #f8fafc !important;
}

.tanstack-tr.selected .tanstack-td.col-acoes-crm {
    background: #eff6ff !important;
}

.tanstack-td.col-acoes-crm .btn,
.col-acoes-crm .btn {
    border-radius: 4px !important;
}

.tanstack-td-placeholder.col-acoes-crm {
    background: #ffffff !important;
    border-right: none !important;
}

/* REGRA DE MANUTENÇÃO DE 5 LINHAS FIXAS VISÍVEIS */
.tanstack-tr-placeholder {
    height: 52px;
    border-bottom: 1px solid #e2e8f0;
    background: transparent !important;
}

.tanstack-td-placeholder {
    height: 52px;
    user-select: none;
    color: transparent;
}

.tanstack-td-empty-msg {
    text-align: center;
    vertical-align: middle;
    padding: 24px 0;
    border: none !important;
}

.tanstack-empty-state-wrapper {
    position: sticky;
    left: 0;
    width: 100cqw;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.tanstack-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #000000 !important;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.tanstack-empty-state i {
    font-size: 24px;
    color: var(--cor-primaria, #3b82f6);
    opacity: 0.7;
}

.tanstack-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--cor-superficie, #0f172a);
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 12px;
}

.tanstack-info-text,
.tanstack-page-indicator,
.prospeccao-paginacao-footer,
.prospeccao-paginacao-footer span,
.prospeccao-paginacao-footer div,
#contador-resultados-footer,
#info-pagina {
    color: #000000 !important;
    font-weight: 600 !important;
}

.tanstack-pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tanstack-btn-pag {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cor-borda, #334155);
    border-radius: 6px;
    background: var(--cor-superficie, #0f172a);
    color: var(--cor-texto-2, #cbd5e1);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.tanstack-btn-pag:hover:not(:disabled) {
    background: var(--cor-primaria, #3b82f6);
    color: #ffffff;
    border-color: var(--cor-primaria, #3b82f6);
}

.tanstack-btn-pag:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Scrollbar sempre visível e bordas retas (border-radius: 0) com cor #94a3b8 para a Lista de Campanhas e Inputs */
.painel-controle-campanhas,
.painel-controle-campanhas *,
.painel-controle-campanhas input,
.painel-controle-campanhas select,
.painel-controle-campanhas button,
.painel-controle-campanhas div {
    border-radius: 0 !important;
}

.painel-controle-campanhas .filtro-input,
.painel-controle-campanhas .filtro-select,
.painel-controle-campanhas #painel-lista-campanhas,
.painel-controle-campanhas .campanha-item-painel {
    border: 1px solid #94a3b8 !important;
}

#painel-lista-campanhas {
    height: 195px;
    max-height: 195px;
    overflow-y: scroll;
}

#painel-lista-campanhas::-webkit-scrollbar {
    width: 10px;
}
#painel-lista-campanhas::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0;
}
#painel-lista-campanhas::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 0;
}
#painel-lista-campanhas::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.tanstack-page-indicator {
    margin: 0 8px;
    font-weight: bold;
}

.tanstack-tr {
    border-bottom: 1px solid #cbd5e1;
    height: 52px;
    transition: background 0.15s ease;
}

.tanstack-tr:hover:not(.tanstack-tr-placeholder) {
    background: var(--cor-fundo-hover, rgba(0, 0, 0, 0.02));
}

.tanstack-tr.selected {
    background: rgba(59, 130, 246, 0.1) !important;
}

.tanstack-td {
    padding: 10px 16px;
    color: #000000 !important;
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

.tanstack-td span {
    color: #000000 !important;
}

.tanstack-th-select, .tanstack-td-select {
    width: 44px;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}

.tanstack-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--cor-primaria, #3b82f6);
    border-radius: 4px;
    vertical-align: middle;
}

.tanstack-disabled-check {
    color: #64748b;
    font-size: 12px;
}

/* REGRA DE MANUTENÇÃO DE 5 LINHAS FIXAS VISÍVEIS */
.tanstack-tr-placeholder {
    height: 52px;
    border-bottom: 1px solid #e2e8f0;
    background: transparent !important;
}

.tanstack-td-placeholder {
    height: 52px;
    user-select: none;
    color: transparent;
}

.tanstack-td-empty-msg {
    text-align: center;
    vertical-align: middle;
    padding: 24px 0;
    border: none !important;
}

.tanstack-empty-state-wrapper {
    position: sticky;
    left: 0;
    width: 100cqw;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.tanstack-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #000000 !important;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.tanstack-empty-state i {
    font-size: 24px;
    color: var(--cor-primaria, #3b82f6);
    opacity: 0.7;
}

.tanstack-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--cor-superficie, #0f172a);
    border-top: 1px solid #0D4C91 !important;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 12px;
}

.tanstack-info-text,
.tanstack-page-indicator,
.prospeccao-paginacao-footer,
.prospeccao-paginacao-footer span,
.prospeccao-paginacao-footer div,
#contador-resultados-footer,
#info-pagina {
    color: #000000 !important;
    font-weight: 600 !important;
}

.tanstack-pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Ocultação total e inflexível do rodapé interno gerado pelo TanStack exclusivamente na Prospecção */
#grid-prospeccao .tanstack-footer,
.grid-prospeccao-wrapper .tanstack-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

@media (max-width: 1024px) {
    #grid-crm .tanstack-footer,
    .prospeccao-paginacao-footer,
    #paginacao-servidor-footer {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        text-align: center !important;
    }
    #grid-crm .tanstack-pagination-info,
    .prospeccao-paginacao-footer .tanstack-pagination-info,
    #paginacao-servidor-footer .tanstack-pagination-info {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .tanstack-info-text,
    #contador-resultados-footer {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }
    #grid-crm .tanstack-pagination-controls,
    .prospeccao-paginacao-footer .tanstack-pagination-controls,
    #paginacao-servidor-footer .tanstack-pagination-controls {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

.tanstack-btn-pag {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cor-borda, #334155);
    border-radius: 6px;
    background: var(--cor-superficie, #0f172a);
    color: var(--cor-texto-2, #cbd5e1);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.tanstack-btn-pag:hover:not(:disabled) {
    background: var(--cor-primaria, #3b82f6);
    color: #ffffff;
    border-color: var(--cor-primaria, #3b82f6);
}

.tanstack-btn-pag:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Scrollbar sempre visível e bordas retas (border-radius: 0) com cor #94a3b8 para a Lista de Campanhas e Inputs */
.painel-controle-campanhas,
.painel-controle-campanhas *,
.painel-controle-campanhas input,
.painel-controle-campanhas select,
.painel-controle-campanhas button,
.painel-controle-campanhas div {
    border-radius: 0 !important;
}

.painel-controle-campanhas .filtro-input,
.painel-controle-campanhas .filtro-select,
.painel-controle-campanhas #painel-lista-campanhas,
.painel-controle-campanhas .campanha-item-painel {
    border: 1px solid #94a3b8 !important;
}

#painel-lista-campanhas {
    height: 195px;
    max-height: 195px;
    overflow-y: scroll;
}

#painel-lista-campanhas::-webkit-scrollbar {
    width: 10px;
}
#painel-lista-campanhas::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0;
}
#painel-lista-campanhas::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 0;
}
#painel-lista-campanhas::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.tanstack-page-indicator {
    margin: 0 8px;
    color: var(--cor-texto-2, #cbd5e1);
    font-size: 12px;
}

/* ============================================================
   DESTAQUE DO PERÍODO DE ABERTURA (#0D4C91)
   ============================================================ */
.filtro-input-periodo {
    border: 1px solid #0D4C91 !important;
    background: rgba(13, 76, 145, 0.03) !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
}

.filtro-input-periodo:hover {
    border-color: #0D4C91 !important;
    background: rgba(13, 76, 145, 0.07) !important;
}

.filtro-input-periodo:focus {
    border-color: #0D4C91 !important;
    box-shadow: 0 0 0 3px rgba(13, 76, 145, 0.15) !important;
    background: #ffffff !important;
}

.filtro-periodo-ate {
    font-size: 11px;
    font-weight: 700;
    color: #0D4C91 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   CUSTOMIZAÇÃO GLOBAL DE BORDAS & SOMBRAS (PADRÃO 8PX)
   ============================================================ */
.painel-filtros,
.painel-controle-campanhas,
.grid-container,
.card:not(.kanban-card):not(.card-lead):not(.lead-card):not(.crm-card),
.secao,
.card-estatistica,
.config-card,
.config-card-duplo,
.config-card-triplo,
.chamado-item,
.fatura-impressao,
.creditos-bar-prospeccao {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
}

.card-stat {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.card-stat.selecionado,
.card-stat-todos.selecionado,
#card-todos.selecionado {
    border-color: #0D4C91 !important;
    box-shadow: 0 4px 14px rgba(13, 76, 145, 0.15) !important;
}

.card-stat-todos.selecionado::before,
#card-todos.selecionado::before {
    background: #0D4C91 !important;
}

/* Remoção de borda dos modais e seus cabeçalhos */
.modal-header,
.modal-card,
.modal-rodape-interno {
    border: none !important;
}

/* Sombra destacada e elegante nas seções e painéis principais */
.painel-filtros,
.painel-controle-campanhas,
.grid-container,
.config-card,
.config-card-duplo,
.config-card-triplo,
.secao {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

/* Remover borda inferior da última linha do grid para evitar sobreposição com o rodapé */
.tanstack-tbody tr:last-child,
.tanstack-tbody .tanstack-tr:last-child,
.tanstack-tbody .tanstack-tr-placeholder:last-child {
    border-bottom: none !important;
}

/* ============================================================
   PIPELINE SEQUENCIADOR VERTICAL DE 4 ETAPAS (PROSPECÇÃO)
   ============================================================ */
.pipeline-prospeccao-container {
    position: relative;
    width: 100%;
    padding-left: 54px;
    margin-top: 10px;
    margin-bottom: 40px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .pipeline-prospeccao-container {
        padding-left: 36px;
    }
}

/* Linha base vertical da Timeline */
.pipeline-linha-base {
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 20px;
    width: 3px;
    background: #cbd5e1;
    border-radius: 9999px;
    z-index: 1;
}

@media (max-width: 768px) {
    .pipeline-linha-base {
        left: 14px;
    }
}

/* Linha de progresso vertical colorida */
.pipeline-linha-progresso {
    position: absolute;
    top: 32px;
    left: 20px;
    width: 3px;
    background: linear-gradient(180deg, #0D4C91 0%, #3b82f6 50%, #22c55e 100%);
    box-shadow: 0 0 10px rgba(13, 76, 145, 0.4);
    border-radius: 9999px;
    z-index: 2;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    height: 0%;
    max-height: calc(100% - 64px);
}

@media (max-width: 768px) {
    .pipeline-linha-progresso {
        left: 14px;
    }
}

/* Wrapper de cada etapa */
.etapa-item-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 36px;
}

.etapa-item-wrapper:last-child {
    margin-bottom: 0;
}

/* Círculo do número / dot da Timeline */
.timeline-dot-etapa {
    position: absolute;
    top: 24px;
    left: -54px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    z-index: 3;
    transition: all 0.35s ease;
    cursor: pointer;
}

@media (max-width: 768px) {
    .timeline-dot-etapa {
        left: -36px;
        width: 28px;
        height: 28px;
        font-size: 12px;
        top: 20px;
    }
}

/* Estados do Dot */
.timeline-dot-etapa.ativo {
    background: #0D4C91 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(13, 76, 145, 0.25), 0 4px 12px rgba(13, 76, 145, 0.35) !important;
    transform: scale(1.08);
}

.timeline-dot-etapa.concluido {
    background: #22c55e !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 2px 8px rgba(34, 197, 94, 0.3) !important;
}

.timeline-dot-etapa.bloqueado {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    opacity: 0.8;
    cursor: not-allowed;
}

/* Card Principal de cada Etapa */
.etapa-card-secao {
    background: var(--cor-superficie, #ffffff);
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 768px) {
    .etapa-card-secao {
        padding: 16px 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

.etapa-card-secao.ativo {
    border-color: #0D4C91 !important;
    box-shadow: 0 8px 28px rgba(13, 76, 145, 0.12), 0 2px 8px rgba(13, 76, 145, 0.08) !important;
}

.etapa-card-secao.bloqueado {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    filter: grayscale(35%);
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}

.etapa-card-secao.concluido {
    border-color: #cbd5e1;
}

/* Cabeçalho da Etapa */
.etapa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .etapa-header {
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }
}

.etapa-titulo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cor-texto-1, #0f172a);
}

@media (max-width: 768px) {
    .etapa-titulo-badge {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
    }

    .etapa-titulo-badge span:not(.etapa-badge-numero) {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        flex: 1 1 auto !important;
    }

    .etapa-titulo-badge i {
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }

    .etapa-badge-numero {
        flex-shrink: 0 !important;
    }
}

.etapa-badge-numero {
    background: #0D4C91;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.etapa-badge-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.etapa-badge-status.ativo {
    background: rgba(13, 76, 145, 0.1);
    color: #0D4C91;
    border: 1px solid rgba(13, 76, 145, 0.2);
}

.etapa-badge-status.concluido {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.etapa-badge-status.bloqueado {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #cbd5e1;
}

/* Rodapé de Ações de cada Etapa */
.etapa-acoes-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.etapa-acoes-grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-etapa-avancar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0D4C91;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    width: 360px;
    min-width: 360px;
    max-width: 100%;
    padding: 0 16px;
    border-radius: 6px;
    border: 1.5px solid #0D4C91;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(13, 76, 145, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
}

.btn-etapa-avancar i {
    font-size: 12px;
    color: #ffffff;
    transition: transform 0.2s ease;
}

.btn-etapa-avancar:hover:not(:disabled) {
    background: #093769;
    border-color: #093769;
    box-shadow: 0 4px 12px rgba(13, 76, 145, 0.35);
    transform: translateY(-1px);
}

.btn-etapa-avancar:hover:not(:disabled) i {
    transform: translateX(2px);
}

.btn-etapa-avancar:active:not(:disabled) {
    transform: translateY(0);
}

.btn-etapa-avancar:disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    border: 1.5px solid #cbd5e1 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.btn-etapa-avancar:disabled i {
    color: #94a3b8 !important;
}

.btn-etapa-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 12px;
    font-weight: 700;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0 18px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-sizing: border-box;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.btn-etapa-voltar i {
    color: #0D4C91;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.btn-etapa-voltar:hover:not(:disabled) {
    background: #f8fafc !important;
    color: #0D4C91 !important;
    border-color: #0D4C91 !important;
    box-shadow: 0 3px 8px rgba(13, 76, 145, 0.15);
    transform: translateY(-1px);
}

.btn-etapa-voltar:hover:not(:disabled) i {
    transform: translateX(-2px);
}

.btn-etapa-voltar:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-etapa-voltar:disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.7 !important;
}

.btn-etapa-voltar:disabled i {
    color: #94a3b8 !important;
}

/* Responsividade Mobile dos Botões de Ação das Etapas (Mesma Largura e Ocupação Total) */
@media (max-width: 768px) {
    .etapa-acoes-rodape {
        justify-content: stretch !important;
        width: 100% !important;
        margin-top: 16px !important;
        padding-top: 14px !important;
        box-sizing: border-box !important;
    }

    .etapa-acoes-rodape > div,
    .etapa-acoes-grupo {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    .btn-etapa-avancar,
    .btn-etapa-voltar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 16px !important;
        font-size: 11.5px !important;
        letter-spacing: 0.2px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    .btn-etapa-avancar span,
    .btn-etapa-voltar span {
        text-align: center !important;
        line-height: 1.25 !important;
    }
}

/* Botões do Header do Grid de Prospecção (Estilo Padrão do Sistema / Botões Interativos) */
.btn-toggle-disponiveis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    line-height: 1;
    background: #ffffff;
    color: #0D4C91;
    border: 1px solid #0D4C91;
    border-radius: 6px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(13, 76, 145, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-toggle-disponiveis i {
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform 0.2s ease;
}

.btn-toggle-disponiveis span {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    color: inherit;
}

.btn-toggle-disponiveis:hover:not(:disabled) {
    background: #0D4C91;
    color: #ffffff;
    border-color: #0D4C91;
    box-shadow: 0 3px 8px rgba(13, 76, 145, 0.25);
    transform: translateY(-1px);
}

.btn-toggle-disponiveis:hover:not(:disabled) .badge-toggle-status {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-toggle-disponiveis:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(13, 76, 145, 0.2);
}

.btn-toggle-disponiveis.ativo {
    background: #0D4C91;
    color: #ffffff;
    border-color: #093769;
    box-shadow: 0 2px 6px rgba(13, 76, 145, 0.35);
}

.btn-toggle-disponiveis:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.badge-toggle-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    line-height: 1;
    font-size: 10px;
    font-weight: 800;
    padding: 0 6px;
    border-radius: 12px;
    background: rgba(13, 76, 145, 0.10);
    color: #0D4C91;
    border: 1px solid rgba(13, 76, 145, 0.20);
    transition: all 0.2s ease;
    box-sizing: border-box;
    margin-left: 2px;
}

.btn-toggle-disponiveis.ativo .badge-toggle-status {
    background: #ffffff;
    color: #0D4C91;
    border-color: #ffffff;
    font-weight: 800;
}

/* Header do Grid de Prospecção (Desktop & Base) */
.grid-header-prospeccao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 6px 0 10px 0;
}

.grid-header-prospeccao .grid-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.grid-header-prospeccao .grid-header-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.grid-header-prospeccao .grid-header-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Simetria e Alinhamento Responsivo no Mobile (Tabela de Empresas) */
@media (max-width: 768px) {
    .grid-header-prospeccao {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
        padding: 6px 0 12px 0 !important;
        box-sizing: border-box !important;
    }

    .grid-header-prospeccao .grid-header-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .grid-header-prospeccao .grid-titulo {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        text-align: left !important;
    }

    .grid-header-prospeccao .grid-header-badges {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    .grid-header-prospeccao .grid-contador {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        text-align: center !important;
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        line-height: 1 !important;
    }

    .grid-header-prospeccao .grid-header-acoes {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .grid-header-prospeccao .btn-toggle-disponiveis {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 0 14px !important;
        border-radius: 6px !important;
    }

    .grid-header-prospeccao .btn-toggle-disponiveis span {
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ============================================================
   ETAPA 3: DEFINIÇÃO DE CAMPANHA (LAYOUT DUPLO PROFISSIONAL)
   ============================================================ */
.painel-campanhas-duplo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 860px) {
    .painel-campanhas-duplo-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

.card-campanha-coluna {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 768px) {
    .card-campanha-coluna {
        padding: 14px 10px !important;
    }
}

.card-campanha-coluna:hover {
    border-color: #94a3b8;
}

.card-campanha-coluna-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

@media (max-width: 768px) {
    .card-campanha-coluna-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

.icone-campanha-coluna {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.icone-campanha-coluna.icone-novo {
    background: rgba(13, 76, 145, 0.1);
    color: #0D4C91;
}

.icone-campanha-coluna.icone-existente {
    background: rgba(30, 41, 59, 0.08);
    color: #334155;
}

.titulo-campanha-coluna {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px 0;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: break-word;
}

.subtitulo-campanha-coluna {
    font-size: 11.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
}

.badge-total-campanhas {
    font-size: 11px;
    font-weight: 700;
    color: #0D4C91;
    background: rgba(13, 76, 145, 0.08);
    border: 1px solid rgba(13, 76, 145, 0.18);
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.card-campanha-coluna-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-grupo-campanha {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.label-campanha {
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
    margin: 0;
}

.label-campanha .obrigatorio {
    color: #ef4444;
}

.label-campanha .opcional {
    color: #94a3b8;
    font-weight: 400;
    font-size: 11px;
}

.input-icone-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.input-icone-wrap i {
    position: absolute;
    left: 11px;
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.input-campanha-field {
    width: 100% !important;
    max-width: 100% !important;
    height: 36px;
    padding: 0 12px 0 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12.5px;
    color: #0f172a;
    background: #ffffff;
    box-sizing: border-box !important;
    min-width: 0 !important;
    transition: all 0.2s ease;
}

.input-campanha-field:focus {
    border-color: #0D4C91;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 76, 145, 0.12);
}

.input-campanha-field::placeholder {
    color: #94a3b8;
    font-size: 12px;
}

.btn-acao-criar-campanha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    min-height: 40px;
    width: 100% !important;
    max-width: 100% !important;
    background: #0D4C91;
    color: #ffffff;
    border: 1px solid #0D4C91;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(13, 76, 145, 0.2);
    box-sizing: border-box !important;
    text-align: center;
}

.btn-acao-criar-campanha:hover:not(:disabled) {
    background: #093769;
    border-color: #093769;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13, 76, 145, 0.3);
}

.btn-acao-criar-campanha:active:not(:disabled) {
    transform: translateY(0);
}

.btn-acao-criar-campanha:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.busca-campanhas-wrap {
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.busca-campanhas-wrap .input-campanha-field {
    height: 32px;
    font-size: 12px;
    background: #f8fafc;
}

.lista-campanhas-container {
    height: 165px;
    max-height: 165px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.lista-campanhas-container::-webkit-scrollbar {
    width: 6px;
}
.lista-campanhas-container::-webkit-scrollbar-track {
    background: transparent;
}
.lista-campanhas-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.lista-campanhas-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Item de Campanha na Lista */
.campanha-item-painel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
}

.campanha-item-painel:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
}

.campanha-item-painel.ativo {
    background: #f0fdfa !important;
    border-color: #0d9488 !important;
    border-left: 4px solid #0f766e !important;
    box-shadow: 0 1px 4px rgba(13, 148, 136, 0.15);
}

.campanha-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.campanha-radio-circulo {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #94a3b8;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.campanha-item-painel.ativo .campanha-radio-circulo {
    background: #0d9488;
    border-color: #0d9488;
    color: #ffffff;
}

.campanha-item-info-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.campanha-item-nome {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campanha-item-painel.ativo .campanha-item-nome {
    color: #0f766e;
    font-weight: 800;
}

.campanha-item-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campanha-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-editar-campanha-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #64748b;
    padding: 3px 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.btn-editar-campanha-item:hover {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    border-color: rgba(13, 148, 136, 0.25);
}

.tag-campanha-ativa {
    display: none;
    font-size: 10px;
    font-weight: 800;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #5eead4;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1;
}

.campanha-item-painel.ativo .tag-campanha-ativa {
    display: inline-flex;
}

/* Barra de Confirmação da Campanha Selecionada (Destaque Verde Azulado) */
.barra-campanha-selecionada {
    margin-top: 14px;
    padding: 12px 16px;
    background: #f0fdfa;
    border: 1.5px solid #0d9488;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.08);
}

.barra-campanha-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.barra-campanha-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #0f766e;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(15, 118, 110, 0.25);
}

.barra-campanha-tag-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    line-height: 1.2;
}

.barra-campanha-nome-txt {
    font-size: 14.5px;
    color: #115e59;
    display: block;
    line-height: 1.3;
    font-weight: 800;
    word-break: break-word;
    overflow-wrap: break-word;
}

.badge-campanha-status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.badge-campanha-status.selecionada {
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #5eead4;
}

.badge-campanha-status.pendente {
    color: #ca8a04;
    background: #fef9c3;
    border: 1px solid #fde047;
}

@media (max-width: 768px) {
    .barra-campanha-selecionada {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 10px !important;
    }

    .barra-campanha-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .barra-campanha-nome-txt {
        font-size: 13.5px !important;
    }

    .badge-campanha-status {
        align-self: flex-start !important;
    }
}

/* Botão de Confirmação & Importação Final (Verde Escuro Elegante) */
.btn-importar-crm-final {
    background: #16a34a !important;
    border: 1.5px solid #15803d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3) !important;
    font-weight: 700 !important;
}

.btn-importar-crm-final i {
    color: #ffffff !important;
    font-size: 13px !important;
}

.btn-importar-crm-final:hover:not(:disabled) {
    background: #15803d !important;
    border-color: #166534 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(22, 101, 52, 0.4) !important;
    transform: translateY(-1px) !important;
}

.btn-importar-crm-final:active:not(:disabled) {
    transform: translateY(0) !important;
}

.btn-importar-crm-final:disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    border: 1.5px solid #cbd5e1 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.btn-importar-crm-final:disabled i {
    color: #94a3b8 !important;
}

/* ============================================================
   CARDS DE RESUMO DA ETAPA 4 (VISUAL EXECUTIVO, MODERNO E COLORIDO)
   ============================================================ */
.resumo-etapa4-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.card-resumo-metrica {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.card-resumo-metrica:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Card 1: Leads Selecionados (Tema Azul Royal) */
.card-resumo-metrica.leads {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border-color: #bfdbfe;
    border-left: 4px solid #0D4C91;
}

.card-resumo-metrica.leads .icone-resumo-box {
    background: linear-gradient(135deg, #0D4C91 0%, #1e40af 100%);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(13, 76, 145, 0.25);
}

.card-resumo-metrica.leads .label-resumo {
    color: #1e40af;
}

.card-resumo-metrica.leads .valor-resumo {
    color: #0f172a;
}

/* Card 2: Campanha de Destino (Tema Teal / Verde-Azulado) */
.card-resumo-metrica.campanha {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    border-color: #99f6e4;
    border-left: 4px solid #0d9488;
}

.card-resumo-metrica.campanha .icone-resumo-box {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(13, 148, 136, 0.25);
}

.card-resumo-metrica.campanha .label-resumo {
    color: #0f766e;
}

.card-resumo-metrica.campanha .valor-resumo {
    color: #115e59;
}

/* Card 3: Saldo de Créditos CRM (Tema Verde Esmeralda) */
.card-resumo-metrica.creditos {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    border-color: #bbf7d0;
    border-left: 4px solid #16a34a;
}

.card-resumo-metrica.creditos .icone-resumo-box {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(22, 163, 74, 0.25);
}

.card-resumo-metrica.creditos .label-resumo {
    color: #15803d;
}

.card-resumo-metrica.creditos .valor-resumo {
    color: #14532d;
}

.icone-resumo-box {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.label-resumo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    line-height: 1.2;
    margin-bottom: 2px;
}

.valor-resumo {
    font-size: 15px;
    font-weight: 800;
    display: block;
    line-height: 1.3;
    word-break: break-word;
}

/* ============================================================
   MODAL DE PROGRESSO CENTRAL (MODERNO, RESPONSIVO & BACKDROP BLUR)
   ============================================================ */
.modal-progresso-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInProgresso 0.25s ease-out;
}

@keyframes fadeInProgresso {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUpProgresso {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-progresso-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    padding: 36px 32px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(226, 232, 240, 0.9);
    text-align: center;
    position: relative;
    animation: slideUpProgresso 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.modal-progresso-header {
    margin-bottom: 24px;
}

.modal-progresso-icon-pulsar {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, rgba(12, 75, 144, 0.1) 0%, rgba(59, 130, 246, 0.18) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--cor-primaria, #0c4b90);
    animation: pulseIcon 2s infinite;
}

@keyframes pulseIcon {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(59, 130, 246, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.modal-progresso-icon-sucesso {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: rgba(16, 185, 129, 0.12);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #10b981;
    animation: popSucesso 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-progresso-icon-erro {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: rgba(239, 68, 68, 0.12);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #ef4444;
}

@keyframes popSucesso {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.modal-progresso-titulo {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.modal-progresso-subtitulo {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.modal-progresso-subtitulo strong {
    color: #0c4b90;
}

.modal-progresso-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    background: #f8fafc;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.modal-progresso-stats .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-progresso-stats .stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.modal-progresso-stats .stat-valor {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
}

.modal-progresso-stats .stat-valor.verde { color: #10b981; }
.modal-progresso-stats .stat-valor.azul { color: #0c4b90; }

.modal-progresso-track-wrapper {
    margin-bottom: 20px;
    text-align: left;
}

.modal-progresso-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.progresso-pct-badge {
    background: #0c4b90;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

.modal-progresso-track {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.modal-progresso-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0c4b90 0%, #3b82f6 50%, #10b981 100%);
    border-radius: 999px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.modal-progresso-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    animation: shineBar 1.5s infinite;
}

@keyframes shineBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.modal-progresso-seguranca-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #065f46;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
}

.modal-progresso-resumo-sucesso {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 24px;
    text-align: left;
}

.resumo-box-sucesso .resumo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 13.5px;
    color: #475569;
}

.resumo-box-sucesso .resumo-linha:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.resumo-box-sucesso .resumo-linha strong {
    color: #0f172a;
    font-size: 14px;
}

.modal-progresso-acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-progresso-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--cor-primaria, #0c4b90);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    flex: 1;
    min-width: 160px;
}

.btn-progresso-primario:hover {
    background: #09396e;
    transform: translateY(-1px);
}

.btn-progresso-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    min-width: 160px;
}

.btn-progresso-secundario:hover {
    background: #e2e8f0;
    color: #1e293b;
}

@media (max-width: 600px) {
    .modal-progresso-card {
        padding: 24px 18px;
    }
    .modal-progresso-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .modal-progresso-acoes {
        flex-direction: column;
    }
    .btn-progresso-primario,
    .btn-progresso-secundario {
        width: 100%;
    }
}

/* ====== MODAL DE CONFIRMAÇÃO PROFISSIONAL (EXCLUSÃO DE LEADS) ====== */
.modal-confirm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100000;
    background: rgba(15, 23, 42, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-confirm-card {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    padding: 28px 24px 22px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.8);
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.modal-confirm-btn-fechar {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 16px;
    color: #94a3b8;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-confirm-btn-fechar:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.modal-confirm-header {
    margin-bottom: 18px;
}

.modal-confirm-icon-danger {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #dc2626;
}

.modal-confirm-titulo {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.modal-confirm-subtitulo {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

.modal-confirm-lead-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    text-align: left;
    margin-bottom: 16px;
}

.modal-confirm-lead-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.modal-confirm-empresa-icone {
    width: 36px;
    height: 36px;
    background: rgba(12, 75, 144, 0.1);
    color: #0C4B90;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.modal-confirm-empresa-info {
    min-width: 0;
    flex: 1;
}

.modal-confirm-empresa-nome {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-confirm-empresa-cnpj {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    margin-top: 2px;
}

.modal-confirm-lead-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
}

.modal-confirm-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.modal-confirm-meta-rotulo {
    color: #64748b;
    font-weight: 500;
}

.modal-confirm-meta-valor {
    color: #1e293b;
    font-weight: 700;
}

.modal-confirm-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 24px;
    text-align: left;
    font-size: 12px;
    color: #b91c1c;
    line-height: 1.45;
}

.modal-confirm-alerta i {
    font-size: 15px;
    margin-top: 2px;
    color: #dc2626;
    flex-shrink: 0;
}

.modal-confirm-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.modal-confirm-acoes .btn {
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.modal-confirm-acoes .btn-perigo {
    background: #dc2626;
    color: #ffffff;
    border: none;
}

.modal-confirm-acoes .btn-perigo:hover:not(:disabled) {
    background: #b91c1c;
}

.modal-confirm-acoes .btn-perigo:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.modal-confirm-acoes .btn-secundario {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.modal-confirm-acoes .btn-secundario:hover:not(:disabled) {
    background: #e2e8f0;
    color: #1e293b;
}

@media (max-width: 480px) {
    .modal-confirm-card {
        padding: 24px 18px 20px;
    }
    .modal-confirm-acoes {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .modal-confirm-acoes .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   MODAL DE CONFIRMAÇÃO DE CARTÕES (FINTECH GRADE - RESPONSIVO)
   ============================================================ */
.modal-cartao-confirm-card {
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 470px;
    padding: 26px 24px 22px;
    box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(226, 232, 240, 0.9);
    position: relative;
    box-sizing: border-box;
    text-align: left;
}

[data-theme="dark"] .modal-cartao-confirm-card {
    background: #1e293b;
    box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(51, 65, 85, 0.9);
    color: #f1f5f9;
}

.modal-cartao-btn-fechar {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 10;
}

.modal-cartao-btn-fechar:hover {
    background: #f1f5f9;
    color: #0f172a;
}

[data-theme="dark"] .modal-cartao-btn-fechar:hover {
    background: #334155;
    color: #f8fafc;
}

.modal-cartao-topo {
    text-align: center;
    margin-bottom: 18px;
}

.modal-cartao-icone-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.modal-cartao-icone-badge.swap {
    background: #e0f2fe;
    color: #0284c7;
    border: 1.5px solid #bae6fd;
}

.modal-cartao-icone-badge.ativar {
    background: #dcfce7;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
}

.modal-cartao-icone-badge.desativar,
.modal-cartao-icone-badge.perigo {
    background: #fee2e2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
}

.modal-cartao-titulo {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 5px 0;
    letter-spacing: -0.02em;
}

[data-theme="dark"] .modal-cartao-titulo {
    color: #f8fafc;
}

.modal-cartao-subtitulo {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

[data-theme="dark"] .modal-cartao-subtitulo {
    color: #94a3b8;
}

/* Container de Comparação Visual De -> Para */
.cartao-swap-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.cartao-swap-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: border-color 0.15s ease;
}

[data-theme="dark"] .cartao-swap-row {
    background: #0f172a;
    border-color: #334155;
}

.cartao-swap-row.ativo-novo {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
}

[data-theme="dark"] .cartao-swap-row.ativo-novo {
    background: rgba(16, 185, 129, 0.08);
    border-color: #059669;
}

.cartao-swap-row.desativando {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
}

[data-theme="dark"] .cartao-swap-row.desativando {
    background: rgba(220, 38, 38, 0.08);
    border-color: #991b1b;
}

.cartao-swap-card-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.cartao-swap-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.cartao-swap-card-icon.antigo {
    background: #e2e8f0;
    color: #64748b;
}

[data-theme="dark"] .cartao-swap-card-icon.antigo {
    background: #334155;
    color: #94a3b8;
}

.cartao-swap-card-icon.novo {
    background: #dcfce7;
    color: #16a34a;
}

[data-theme="dark"] .cartao-swap-card-icon.novo {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.cartao-swap-card-icon.desativado {
    background: #fee2e2;
    color: #dc2626;
}

.cartao-swap-card-text {
    min-width: 0;
    flex: 1;
    text-align: left;
}

.cartao-swap-card-apelido {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

[data-theme="dark"] .cartao-swap-card-apelido {
    color: #f1f5f9;
}

.cartao-swap-card-num {
    font-size: 12px;
    color: #64748b;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

[data-theme="dark"] .cartao-swap-card-num {
    color: #94a3b8;
}

.cartao-swap-card-badge {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cartao-swap-card-badge.badge-antigo {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

[data-theme="dark"] .cartao-swap-card-badge.badge-antigo {
    background: #1e293b;
    color: #94a3b8;
    border-color: #475569;
}

.cartao-swap-card-badge.badge-novo {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

[data-theme="dark"] .cartao-swap-card-badge.badge-novo {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: #059669;
}

.cartao-swap-card-badge.badge-desativado {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Divisor de Troca (Seta Indicativa) */
.cartao-swap-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: -4px 0;
    z-index: 2;
}

.cartao-swap-divider-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .cartao-swap-divider-circle {
    background: #1e293b;
    border-color: #475569;
    color: #38bdf8;
}

/* Caixa de Alerta Informativo (Alinhamento Perfeito) */
.cartao-swap-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 20px;
    text-align: left;
    box-sizing: border-box;
}

.cartao-swap-info-box i {
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.cartao-swap-info-box.info-azul {
    background: rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(2, 132, 199, 0.2);
    color: #0369a1;
}

[data-theme="dark"] .cartao-swap-info-box.info-azul {
    background: rgba(2, 132, 199, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

.cartao-swap-info-box.info-verde {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #15803d;
}

[data-theme="dark"] .cartao-swap-info-box.info-verde {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #6ee7b7;
}

.cartao-swap-info-box.info-vermelho {
    background: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.22);
    color: #b91c1c;
}

[data-theme="dark"] .cartao-swap-info-box.info-vermelho {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

/* Barra de Ações (Botões) */
.cartao-swap-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.cartao-swap-acoes .btn {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (max-width: 480px) {
    .modal-cartao-confirm-card {
        padding: 20px 16px 18px;
    }
    .cartao-swap-acoes {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .cartao-swap-acoes .btn {
        width: 100%;
        min-height: 44px;
        font-size: 13.5px;
    }
}

/* ============================================================
   SEÇÃO DE CARTÕES DE CRÉDITO / DÉBITO — GRID 2 COLUNAS & MOCKS
   ============================================================ */
.cartao-secao-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 24px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 960px) {
    .cartao-secao-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* Coluna 1: Formulário de Cadastro */
.cartao-form-col {
    background: #ffffff;
    border: 1px solid var(--cor-borda, #e2e8f0);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

[data-theme="dark"] .cartao-form-col {
    background: #1e293b;
    border-color: #334155;
}

.cartao-tipo-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.cartao-tipo-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.cartao-tipo-btn input {
    display: none;
}

.cartao-tipo-btn:hover {
    border-color: #0D4C91;
    background: #f0f7ff;
    color: #0D4C91;
}

.cartao-tipo-btn.ativo {
    border-color: #0D4C91;
    background: #0D4C91;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(13, 76, 145, 0.25);
}

[data-theme="dark"] .cartao-tipo-btn {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .cartao-tipo-btn.ativo {
    border-color: #3b82f6;
    background: #1d4ed8;
    color: #ffffff;
}

.cartao-form-campo {
    margin-bottom: 14px;
}

.cartao-form-campo label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

[data-theme="dark"] .cartao-form-campo label {
    color: #cbd5e1;
}

.cartao-form-campo input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13.5px;
    outline: none;
    background: #ffffff;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.cartao-form-campo input:focus {
    border-color: #0D4C91;
    box-shadow: 0 0 0 3px rgba(13, 76, 145, 0.15);
}

[data-theme="dark"] .cartao-form-campo input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .cartao-form-campo input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Coluna 2: Lista de Cartões e Carrossel */
.cartao-lista-col {
    background: #ffffff;
    border: 1px solid var(--cor-borda, #e2e8f0);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

[data-theme="dark"] .cartao-lista-col {
    background: #1e293b;
    border-color: #334155;
}

.cartoes-track-container {
    position: relative;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.cartoes-track {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 560px;
    padding: 6px 8px 14px 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.cartoes-track::-webkit-scrollbar {
    width: 6px;
}

.cartoes-track::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.cartoes-track::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.cartoes-track::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

[data-theme="dark"] .cartoes-track::-webkit-scrollbar-track {
    background: #0f172a;
}

[data-theme="dark"] .cartoes-track::-webkit-scrollbar-thumb {
    background: #475569;
}

.cartao-item-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .cartoes-track {
        max-height: 480px;
    }
}

/* Mockup Visual do Cartão (Azul com Verde) */
.credit-card-mockup {
    width: 100%;
    max-width: 380px;
    height: 180px;
    margin: 0 auto;
    border-radius: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #0d4c91 0%, #0284c7 45%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px -4px rgba(13, 76, 145, 0.35);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.credit-card-mockup:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -4px rgba(13, 76, 145, 0.45);
}

.credit-card-mockup.ativo {
    border: 2px solid #34d399;
    box-shadow: 0 10px 25px -3px rgba(16, 185, 129, 0.45);
}

/* Efeito de brilho / curva geométrica no mockup */
.credit-card-mockup::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.credit-card-mockup::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0) 70%);
    pointer-events: none;
}

/* Topo do Cartão */
.mockup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.mockup-chip-contactless {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mockup-chip {
    width: 34px;
    height: 25px;
    background: linear-gradient(135deg, #fde047 0%, #ca8a04 100%);
    border-radius: 5px;
    border: 1px solid rgba(161, 98, 7, 0.8);
    position: relative;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
}

.mockup-chip::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 7px;
    right: 7px;
    bottom: 5px;
    border: 1px solid rgba(113, 63, 18, 0.35);
    border-radius: 2px;
}

.mockup-contactless {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    transform: rotate(90deg);
}

.mockup-brand-badge {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mockup-tipo-tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 6px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.mockup-tipo-tag.debito {
    background: rgba(16, 185, 129, 0.35);
    border-color: rgba(110, 231, 183, 0.6);
}

.mockup-tipo-tag.credito {
    background: rgba(2, 132, 199, 0.35);
    border-color: rgba(125, 211, 252, 0.6);
}

.mockup-brand-logo {
    font-size: 22px;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Meio do Cartão */
.mockup-body {
    position: relative;
    z-index: 2;
    margin-top: 4px;
}

.mockup-apelido-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.mockup-apelido {
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 0;
}

.mockup-cartao-ativo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(16, 185, 129, 0.28);
    border: 1px solid rgba(110, 231, 183, 0.65);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    flex-shrink: 0;
}

.mockup-cartao-ativo-badge i {
    color: #6ee7b7;
    font-size: 10px;
}

.mockup-cartao-inativo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    flex-shrink: 0;
}

.mockup-numero {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Rodapé do Cartão */
.mockup-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    font-size: 10.5px;
}

.mockup-titular {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mockup-validade {
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

/* Mockup Vazio (Cinza com Bordas Suaves e Lisas) */
.credit-card-mockup.vazio {
    width: 100%;
    max-width: 380px;
    height: 180px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    border: 1.5px solid #cbd5e1;
    border-radius: 14px;
    color: #475569;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

[data-theme="dark"] .credit-card-mockup.vazio {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1.5px solid #334155;
    color: #94a3b8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.credit-card-mockup.vazio::before,
.credit-card-mockup.vazio::after {
    display: none;
}

.mockup-vazio-icone {
    font-size: 30px;
    color: #94a3b8;
    margin-bottom: 8px;
}

.mockup-vazio-titulo {
    font-size: 14px;
    font-weight: 800;
    color: #334155;
    margin-bottom: 4px;
}

[data-theme="dark"] .mockup-vazio-titulo {
    color: #f1f5f9;
}

.mockup-vazio-sub {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
    max-width: 220px;
}

[data-theme="dark"] .mockup-vazio-sub {
    color: #94a3b8;
}

/* Controles embaixo do Cartão */
.cartao-item-controles {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    gap: 8px;
    box-sizing: border-box;
}

[data-theme="dark"] .cartao-item-controles {
    background: #0f172a;
    border-color: #334155;
}

/* Switch Toggle Liga/Desliga */
.cartao-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.cartao-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
}

.cartao-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cartao-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .25s;
    border-radius: 20px;
}

.cartao-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .25s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cartao-switch input:checked + .cartao-slider {
    background-color: #10b981;
}

.cartao-switch input:checked + .cartao-slider:before {
    transform: translateX(18px);
}

.cartao-toggle-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
}

.cartao-toggle-label.ativo {
    color: #059669;
}

[data-theme="dark"] .cartao-toggle-label {
    color: #94a3b8;
}

[data-theme="dark"] .cartao-toggle-label.ativo {
    color: #34d399;
}

.btn-excluir-cartao-min {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    font-size: 13px;
    transition: color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-excluir-cartao-min:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

/* ============================================================
   CARTEIRA DIGITAL (WALLET): CARTÃO EM DESTAQUE + LISTA COMPACTA
   ============================================================ */
.wallet-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.wallet-destaque-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.badge-cartao-principal-ativo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

[data-theme="dark"] .badge-cartao-principal-ativo {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.wallet-lista-secao {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--cor-borda, #e2e8f0);
    padding-top: 12px;
    box-sizing: border-box;
}

.wallet-lista-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: var(--cor-texto, #1e293b);
    margin-bottom: 4px;
}

.wallet-cartoes-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 270px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.wallet-cartoes-lista::-webkit-scrollbar {
    width: 5px;
}

.wallet-cartoes-lista::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.wallet-cartoes-lista::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.wallet-cartoes-lista::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

[data-theme="dark"] .wallet-cartoes-lista::-webkit-scrollbar-track {
    background: #0f172a;
}

[data-theme="dark"] .wallet-cartoes-lista::-webkit-scrollbar-thumb {
    background: #475569;
}

.wallet-cartao-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f1f5f9;
    border: 1px solid var(--cor-borda, #e2e8f0);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.2s ease;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
}

.wallet-cartao-row:hover {
    border-color: #cbd5e1;
    background: #e2e8f0;
}

[data-theme="dark"] .wallet-cartao-row {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .wallet-cartao-row:hover {
    background: #1e293b;
    border-color: #475569;
}

.wallet-cartao-row.ativo {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.wallet-cartao-row.ativo:hover {
    border-color: #059669;
    background: rgba(16, 185, 129, 0.09);
}

[data-theme="dark"] .wallet-cartao-row.ativo {
    border-color: #059669;
    background: rgba(16, 185, 129, 0.08);
}

[data-theme="dark"] .wallet-cartao-row.ativo:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.14);
}

.wallet-cartao-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.wallet-bandeira-icon {
    width: 38px;
    height: 28px;
    background: #ffffff;
    border: 1px solid var(--cor-borda, #e2e8f0);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

[data-theme="dark"] .wallet-bandeira-icon {
    background: #1e293b;
    border-color: #334155;
}

.wallet-cartao-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wallet-cartao-nome-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wallet-cartao-apelido {
    font-size: 13px;
    font-weight: 700;
    color: var(--cor-texto, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.wallet-tipo-pill {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.4px;
}

.wallet-tipo-pill.credito {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.wallet-tipo-pill.debito {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.wallet-ativo-pill {
    font-size: 9.5px;
    font-weight: 800;
    background: #10b981;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wallet-cartao-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--cor-texto-3, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-cartao-num {
    font-family: monospace;
    font-weight: 700;
    color: var(--cor-texto-2, #334155);
}

.wallet-cartao-dot {
    color: #cbd5e1;
    font-size: 9px;
}

.wallet-cartao-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Rodapé da Coluna 2 (Status de Cartão Ativo) */
.cartao-lista-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--cor-borda, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--cor-texto-3);
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cartao-lista-footer span {
    min-width: 0;
    word-break: break-word;
}

#indicador-cartao-ativo-resumo {
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
    text-align: right;
}

/* ============================================================
   BLINDAGEM RESPONSIVA MULTIDISPOSITIVOS (TABLET & MOBILE)
   ============================================================ */
@media (max-width: 640px) {
    .cartao-form-col,
    .cartao-lista-col {
        padding: 16px 14px;
    }

    .cartao-lista-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #indicador-cartao-ativo-resumo {
        text-align: left;
    }

    .wallet-cartao-apelido {
        max-width: 140px;
    }

    .wallet-cartao-meta {
        flex-wrap: wrap;
        white-space: normal;
        word-break: break-word;
        font-size: 11px;
        gap: 4px;
    }
}

@media (max-width: 560px) {
    .wallet-cartao-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .wallet-cartao-actions {
        width: 100%;
        justify-content: space-between;
        border-top: 1px dashed var(--cor-borda, #e2e8f0);
        padding-top: 6px;
        margin-top: 2px;
    }
}

@media (max-width: 480px) {
    .cartao-form-col,
    .cartao-lista-col {
        padding: 14px 10px;
    }

    .credit-card-mockup {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 155px;
        aspect-ratio: 1.7 / 1;
        padding: 12px 14px;
    }

    .credit-card-mockup.vazio {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 150px;
        padding: 14px 10px;
    }

    .mockup-numero {
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .mockup-titular {
        max-width: 130px;
        font-size: 10px;
    }

    .mockup-tipo-tag {
        font-size: 9px;
        padding: 2px 6px;
    }

    .mockup-brand-logo {
        font-size: 18px;
    }

    .mockup-apelido {
        max-width: 100px;
    }

    .mockup-cartao-ativo-badge {
        font-size: 8.5px;
        padding: 2px 6px;
        letter-spacing: 0.3px;
    }

    .mockup-cartao-ativo-badge i {
        font-size: 9px;
    }

    .wallet-cartao-row {
        padding: 10px 10px;
    }

    .wallet-cartao-apelido {
        max-width: 110px;
        font-size: 12px;
    }

    .wallet-cartao-meta {
        font-size: 10.5px;
    }

    .wallet-bandeira-icon {
        width: 32px;
        height: 24px;
        font-size: 15px;
    }
}





/* --- CSS MOVIDO DO PROSPECCAO.HTML --- */

        .grid-prospeccao-wrapper { flex: 1; min-height: 0; }
        #grid-prospeccao { height: 100%; }

        /* Filtros no Mobile */
        #btn-mostrar-filtros {
            display: none;
        }
        @media (max-width: 1024px) {
            #btn-mostrar-filtros {
                display: inline-flex;
            }
            .sidebar-header-mobile {
                display: flex !important;
            }
        }

/* ====== MODAL CENTRAL DE PROGRESSO (MICRO-LOTES) ====== */
        .modal-progresso-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }

        .modal-progresso-card {
            background: #ffffff;
            border-radius: 18px;
            width: 100%;
            max-width: 480px;
            padding: 28px 24px;
            box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.9);
            text-align: center;
            position: relative;
            box-sizing: border-box;
        }

        .modal-progresso-header {
            margin-bottom: 20px;
        }

        .modal-progresso-icon-pulsar,
        .modal-progresso-icon-sucesso,
        .modal-progresso-icon-erro {
            width: 64px;
            height: 64px;
            margin: 0 auto 14px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            box-sizing: border-box;
        }

        .modal-progresso-icon-pulsar {
            background: linear-gradient(135deg, rgba(12, 75, 144, 0.1) 0%, rgba(59, 130, 246, 0.18) 100%);
            border: 2px solid rgba(59, 130, 246, 0.3);
            color: var(--cor-primaria, #0c4b90);
        }

        .modal-progresso-icon-sucesso {
            background: rgba(16, 185, 129, 0.12);
            border: 2px solid rgba(16, 185, 129, 0.3);
            color: #10b981;
        }

        .modal-progresso-icon-erro {
            background: rgba(239, 68, 68, 0.12);
            border: 2px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
        }

        .modal-progresso-titulo {
            font-size: 19px;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 6px 0;
            letter-spacing: -0.02em;
            line-height: 1.3;
        }

        .modal-progresso-subtitulo {
            font-size: 13px;
            color: #64748b;
            margin: 0;
            line-height: 1.45;
        }

        .modal-progresso-subtitulo strong {
            color: #0c4b90;
            word-break: break-word;
        }

        .modal-progresso-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 20px;
            background: #f8fafc;
            padding: 12px 10px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            box-sizing: border-box;
        }

        .modal-progresso-stats .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            text-align: center;
        }

        .modal-progresso-stats .stat-label {
            font-size: 10.5px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            white-space: nowrap;
        }

        .modal-progresso-stats .stat-valor {
            font-size: 16px;
            font-weight: 800;
            color: #1e293b;
            line-height: 1.2;
        }

        .modal-progresso-stats .stat-valor.verde { color: #10b981; }
        .modal-progresso-stats .stat-valor.azul { color: #0c4b90; }

        .modal-progresso-track-wrapper {
            margin-bottom: 6px;
            text-align: left;
        }

        .modal-progresso-info-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 12.5px;
            font-weight: 600;
            color: #334155;
        }

        #progresso-status-texto {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .progresso-pct-badge {
            background: #0c4b90;
            color: #ffffff;
            font-size: 11.5px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            flex-shrink: 0;
        }

        .modal-progresso-track {
            width: 100%;
            height: 10px;
            background: #e2e8f0;
            border-radius: 999px;
            overflow: hidden;
            position: relative;
        }

        .modal-progresso-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #0c4b90 0%, #3b82f6 50%, #10b981 100%);
            border-radius: 999px;
            transition: width 0.25s ease-out;
        }

        .modal-progresso-resumo-sucesso {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 14px 18px;
            margin-bottom: 20px;
            text-align: left;
            box-sizing: border-box;
        }

        .resumo-box-sucesso .resumo-linha {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed #e2e8f0;
            font-size: 13px;
            color: #475569;
            gap: 12px;
        }

        .resumo-box-sucesso .resumo-linha:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .resumo-box-sucesso .resumo-linha span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            color: #334155;
            white-space: nowrap;
        }

        .resumo-box-sucesso .resumo-linha strong {
            color: #0f172a;
            font-size: 13.5px;
            font-weight: 700;
            text-align: right;
            white-space: nowrap;
        }

        .modal-progresso-acoes {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            width: 100%;
            box-sizing: border-box;
        }

        .btn-progresso-primario {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: #0D4C91;
            color: #ffffff;
            font-weight: 700;
            font-size: 13.5px;
            height: 44px;
            min-height: 44px;
            max-height: 44px;
            width: 100%;
            padding: 0 16px;
            border-radius: 8px;
            border: 1.5px solid #0D4C91;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 2px 6px rgba(13, 76, 145, 0.25);
            box-sizing: border-box;
            white-space: nowrap;
        }

        .btn-progresso-primario:hover {
            background: #093769;
            border-color: #093769;
            box-shadow: 0 4px 10px rgba(13, 76, 145, 0.35);
            transform: translateY(-1px);
        }

        .btn-progresso-primario:active {
            transform: translateY(0);
        }

        .btn-progresso-secundario {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: #ffffff;
            color: #334155;
            font-weight: 700;
            font-size: 13.5px;
            height: 44px;
            min-height: 44px;
            max-height: 44px;
            width: 100%;
            padding: 0 16px;
            border-radius: 8px;
            border: 1.5px solid #cbd5e1;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
            box-sizing: border-box;
            white-space: nowrap;
        }

        .btn-progresso-secundario:hover {
            background: #f8fafc;
            color: #0D4C91;
            border-color: #0D4C91;
            box-shadow: 0 2px 6px rgba(13, 76, 145, 0.15);
            transform: translateY(-1px);
        }

        .btn-progresso-secundario:active {
            transform: translateY(0);
        }

        @media (max-width: 480px) {
            .modal-progresso-card {
                padding: 22px 16px;
                border-radius: 14px;
            }
            .modal-progresso-titulo {
                font-size: 17px;
            }
            .modal-progresso-subtitulo {
                font-size: 12px;
            }
            .modal-progresso-stats {
                gap: 6px;
                padding: 10px 6px;
            }
            .modal-progresso-stats .stat-label {
                font-size: 9.5px;
            }
            .modal-progresso-stats .stat-valor {
                font-size: 14px;
            }
            .resumo-box-sucesso .resumo-linha {
                font-size: 12px;
            }
            .btn-progresso-primario,
            .btn-progresso-secundario {
                font-size: 12.5px;
                height: 42px;
                min-height: 42px;
            }
        }

/* ============================================================
   PROTEÇÃO ANTI-SCRAPING, ANTI-CÓPIA E ANTI-CAPTURA DO CRM
   ============================================================ */

/* 1. Desabilita seleção de texto nas tabelas e cards de dados do CRM */
.grid-container,
#grid-crm,
.tabela-crm,
.modal-lead-detalhes .info-valor,
.modal-lead-detalhes .secao-titulo,
.modal-lead-grid {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Garante que campos de digitação continuem editáveis normalmente */
.grid-container input,
.grid-container textarea,
#grid-crm input,
#grid-crm textarea,
.modal-lead-detalhes input,
.modal-lead-detalhes textarea,
.modal-lead-detalhes select,
.crm-filtros-card input,
.crm-filtros-card select {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}