/*
 * azcall v2 - ajustes por tela (Etapa 5). Cada bloco reveste o CSS próprio de uma tela com os tokens do v2,
 * sem mexer na marcação nem no JS dela (as telas geram boa parte do HTML por JavaScript, então o CSS é o ponto
 * mais seguro). Só vale com <html data-v2>; carregado depois da camada de compatibilidade.
 */

/* ======================= Ligações de Entrada (inbound/index.php) ======================= */
html[data-v2] .inb-titulo { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; margin: 0 0 16px; color: var(--ink); }
html[data-v2] .inb-titulo .material-icons { font-size: 22px; color: var(--gold); }
/* abas */
html[data-v2] .inb-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
html[data-v2] .inb-tabs a, html[data-v2] .main-panel > .content .inb-tabs a {
    display: inline-block; margin: 0 0 -1px; padding: 10px 14px; border-radius: 0; background: transparent; color: var(--muted);
    border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
html[data-v2] .main-panel > .content .inb-tabs a { color: var(--muted) !important; }
html[data-v2] .main-panel > .content .inb-tabs a:hover { color: var(--ink) !important; }
html[data-v2] .main-panel > .content .inb-tabs a.ativa { background: transparent; color: var(--ink) !important; border-bottom-color: var(--gold); }
/* cartões e indicadores */
html[data-v2] .inb-card, html[data-v2] .inb-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); color: var(--ink); }
html[data-v2] .inb-card { padding: var(--pad); margin-bottom: var(--gap); }
html[data-v2] .inb-card h4, html[data-v2] .inb-card h5 { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
html[data-v2] .inb-cards { gap: var(--gap); margin-bottom: var(--gap); }
html[data-v2] .inb-kpi { padding: 16px var(--pad) 18px; }
html[data-v2] .inb-kpi b { font-family: var(--f-display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-v2] .inb-kpi span { color: var(--muted); font-size: 12.5px; }
html[data-v2] .inb-grid { gap: var(--gap); }
/* etiquetas de status = pills do kit */
html[data-v2] .inb-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 600; background: var(--line-2); color: var(--muted); }
html[data-v2] .inb-badge.registered, html[data-v2] .inb-badge.ATENDIDA, html[data-v2] .inb-badge.diag-ok { background: var(--ok-soft); color: var(--ok); }
html[data-v2] .inb-badge.unregistered, html[data-v2] .inb-badge.rejected, html[data-v2] .inb-badge.FALHOU, html[data-v2] .inb-badge.PERDIDA, html[data-v2] .inb-badge.diag-erro { background: var(--crit-soft); color: var(--crit); }
html[data-v2] .inb-badge.desconhecido, html[data-v2] .inb-badge.diag-aviso { background: var(--warn-soft); color: var(--warn); }
html[data-v2] .inb-badge.RECADO { background: var(--purple-soft); color: var(--purple); }
html[data-v2] .inb-badge.BLOQUEADA { background: var(--line-2); color: var(--ink-2); }
html[data-v2] .inb-badge.sem_registro, html[data-v2] .inb-badge.inativo, html[data-v2] .inb-badge.diag-info { background: var(--line-2); color: var(--muted); }
/* avisos */
html[data-v2] .inb-aviso { background: var(--warn-soft); border: 0; border-left: 4px solid var(--warn); color: var(--ink-2); border-radius: var(--r-sm); }
html[data-v2] .inb-ia-resumo { background: var(--gold-soft); border: 0; border-left: 4px solid var(--gold); color: var(--ink-2); border-radius: var(--r-sm); }
/* formulários */
html[data-v2] .inb-form label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
html[data-v2] .inb-form.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
html[data-v2] .inb-form.form-inline label { display: inline-block; margin: 0; }
html[data-v2] .inb-form.form-inline .form-control { display: inline-block; width: auto; }
/* gráficos de barras em CSS puro */
html[data-v2] .inb-bar span, html[data-v2] .inb-leg { color: var(--subtle); }
html[data-v2] .c-at { background: var(--ok); } html[data-v2] .c-pe { background: var(--crit); }
html[data-v2] .c-ab { background: var(--warn); } html[data-v2] .c-ou { background: var(--subtle); }
html[data-v2] .inb-hbar { background: var(--line-2); border-radius: 4px; }
/* linhas clicáveis, linha do tempo, horários, simulador, diagnóstico, conversa de IA */
html[data-v2] tr.lig-linha:hover, html[data-v2] tr.lig-linha:hover > td { background: var(--hover); }
html[data-v2] .inb-tl { border-left-color: var(--line); }
html[data-v2] .inb-tl li:before { background: var(--gold); }
html[data-v2] .inb-tl small { color: var(--subtle); }
html[data-v2] .hor-janela, html[data-v2] .hor-feriado { background: var(--line-2); border-radius: var(--r-sm); }
html[data-v2] .hor-janela label { color: var(--muted); }
html[data-v2] .sim-passo { background: var(--line-2); border-left-color: var(--line); border-radius: var(--r-sm); }
html[data-v2] .sim-passo.ok { border-left-color: var(--ok); } html[data-v2] .sim-passo.erro { border-left-color: var(--crit); }
html[data-v2] .sim-final { background: var(--info-soft); color: var(--info); border-radius: var(--r-sm); }
html[data-v2] .diag-grupo { color: var(--ink-2); }
html[data-v2] .diag-linha { border-bottom-color: var(--line-2); }
html[data-v2] .inb-chat { background: var(--line-2); border-radius: var(--r); }
html[data-v2] .inb-msg { background: var(--card); box-shadow: var(--shadow); color: var(--ink); }
html[data-v2] .inb-msg small { color: var(--subtle); }
html[data-v2] .inb-msg.ia { background: var(--info-soft); } html[data-v2] .inb-msg.cli { background: var(--ok-soft); }

/* ======================= Dashboard (pages/dashboard_callcenter.php, dcc-*) ======================= */
html[data-v2] .dcc-avisos { color: var(--subtle); }
html[data-v2] .dcc-painel, html[data-v2] .dcc-canal-card {
    background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
html[data-v2] .dcc-painel { padding: 18px var(--pad); text-align: left; }
html[data-v2] .dcc-painel .dcc-valor { font-family: var(--f-display); font-weight: 700; font-size: 34px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-v2] .dcc-painel .dcc-label { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); opacity: 1; }
/* os blocos saturados viram cartão neutro com o número na cor da categoria */
html[data-v2] .dcc-painel.destaque-vermelho, html[data-v2] .dcc-painel.destaque-roxo,
html[data-v2] .dcc-painel.destaque-azul, html[data-v2] .dcc-painel.destaque-verde, html[data-v2] .dcc-painel.destaque-cinza { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
html[data-v2] .dcc-painel.destaque-vermelho { box-shadow: inset 3px 0 0 var(--crit); } html[data-v2] .dcc-painel.destaque-vermelho .dcc-valor { color: var(--crit); }
html[data-v2] .dcc-painel.destaque-roxo { box-shadow: inset 3px 0 0 var(--purple); } html[data-v2] .dcc-painel.destaque-roxo .dcc-valor { color: var(--purple); }
html[data-v2] .dcc-painel.destaque-azul { box-shadow: inset 3px 0 0 var(--info); } html[data-v2] .dcc-painel.destaque-azul .dcc-valor { color: var(--info); }
html[data-v2] .dcc-painel.destaque-verde { box-shadow: inset 3px 0 0 var(--ok); } html[data-v2] .dcc-painel.destaque-verde .dcc-valor { color: var(--ok); }
html[data-v2] .dcc-painel.destaque-cinza .dcc-valor { color: var(--ink); }
html[data-v2] .dcc-painel .dcc-valor, html[data-v2] .dcc-painel .dcc-label { text-shadow: none; }
html[data-v2] .dcc-canal-card .dcc-valor { font-family: var(--f-display); }
html[data-v2] .dcc-canal-card .dcc-label { color: var(--subtle); text-transform: none; font-size: 12px; }
html[data-v2] .dcc-canal-voz { color: var(--info); } html[data-v2] .dcc-canal-whatsapp { color: var(--ok); }
html[data-v2] .dcc-canal-email { color: var(--warn); } html[data-v2] .dcc-canal-sms { color: var(--purple); }
html[data-v2] .dcc-sem-dados-inline { color: var(--subtle); }
html[data-v2] .dcc-tabela-filas th, html[data-v2] .dcc-tabela-agentes th { color: var(--subtle); border-bottom-color: var(--line); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
html[data-v2] .dcc-tabela-filas td, html[data-v2] .dcc-tabela-agentes td { border-bottom-color: var(--line-2); color: var(--ink); }
html[data-v2] .dcc-fila-badge, html[data-v2] .dcc-status-pill { background: var(--line-2); color: var(--muted); font-weight: 600; }
html[data-v2] .dcc-fila-badge.pronto, html[data-v2] .dcc-status-pill.status-online { background: var(--ok-soft); color: var(--ok); }
html[data-v2] .dcc-fila-badge.semagente, html[data-v2] .dcc-status-pill.status-instavel { background: var(--warn-soft); color: var(--warn); }
html[data-v2] .dcc-status-pill.status-em_chamada { background: var(--crit-soft); color: var(--crit); }
html[data-v2] .dcc-status-pill.status-pausado { background: var(--info-soft); color: var(--pause); }
html[data-v2] .dcc-status-pill.status-offline { background: var(--line-2); color: var(--off); }
/* cartões de agente: moldura neutra, a cor do estado vira o filete do topo e o texto do rodapé */
html[data-v2] .dcc-agente-card { --st: var(--off); background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--st); border-radius: var(--r); overflow: hidden; }
html[data-v2] .dcc-agente-card.status-online { --st: var(--ok); } html[data-v2] .dcc-agente-card.status-em_chamada { --st: var(--crit); }
html[data-v2] .dcc-agente-card.status-pausado { --st: var(--pause); } html[data-v2] .dcc-agente-card.status-instavel { --st: var(--warn); }
html[data-v2] .dcc-agente-card .dcc-agente-foto-wrap, html[data-v2] .dcc-agente-card .dcc-agente-status-linha,
html[data-v2] .status-online .dcc-agente-foto-wrap, html[data-v2] .status-em_chamada .dcc-agente-foto-wrap, html[data-v2] .status-pausado .dcc-agente-foto-wrap,
html[data-v2] .status-instavel .dcc-agente-foto-wrap, html[data-v2] .status-offline .dcc-agente-foto-wrap,
html[data-v2] .status-online .dcc-agente-status-linha, html[data-v2] .status-em_chamada .dcc-agente-status-linha, html[data-v2] .status-pausado .dcc-agente-status-linha,
html[data-v2] .status-instavel .dcc-agente-status-linha, html[data-v2] .status-offline .dcc-agente-status-linha { background: transparent; border-radius: 0; }
html[data-v2] .dcc-agente-card .dcc-agente-foto-wrap { color: var(--ink); }
html[data-v2] .dcc-agente-card .dcc-agente-status-linha { color: var(--st); border-top: 1px solid var(--line-2); }
html[data-v2] .dcc-agente-foto { border-color: var(--card); }
html[data-v2] .dcc-cliente-nome { color: var(--ink); } html[data-v2] .dcc-cliente-telefone { color: var(--subtle); }

/* ======================= Login (pages/login.php, ramo v2) ======================= */
html[data-v2] body.v2-login-body { margin: 0; background: var(--bg); min-height: 100vh; }
.v2-login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.v2-login-art {
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 64px 8vw; color: #f2f1ee; overflow: hidden;
    background: #16181b;
}
@supports (background: color-mix(in oklab, red, blue)) {
    .v2-login-art { background: radial-gradient(900px 500px at 15% 10%, color-mix(in oklab, var(--gold) 38%, transparent), transparent 60%), radial-gradient(700px 500px at 90% 95%, color-mix(in oklab, var(--gold) 22%, transparent), transparent 60%), #16181b;
}
}
.v2-login-art img { width: min(320px, 70%); height: auto; margin-bottom: 18px; }
.v2-login-art h2, html[data-v2] .v2-login-art h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.02em; margin: 0; color: #fff !important; max-width: 14em; }
.v2-login-art p { margin: 0; color: #a3a7ae; font-size: 16px; }
.v2-login-wrap { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.v2-login-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 36px 32px 28px; }
.v2-login-card h1 { font-family: var(--f-display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; margin: 0 0 6px; color: var(--ink); }
.v2-login-sub { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.v2-login-card .v2-field { margin-top: 18px; }
.v2-login-card .v2-input input { font-size: 15px; }
.v2-login-links { margin: 12px 0 22px; text-align: right; font-size: 13px; }
.v2-login-links a { color: var(--gold-ink); text-decoration: none; font-weight: 500; }
.v2-login-links a:hover { color: var(--gold); }
.v2-login-btn { width: 100%; height: 46px; justify-content: center; font-size: 15px; font-weight: 600; cursor: pointer; }
.v2-login-ver { margin: 18px 0 0; text-align: center; font-size: 11.5px; color: var(--subtle); }
.v2-login-logo-m { display: none; text-align: center; margin-bottom: 18px; }
.v2-login-logo-m img { width: 180px; max-width: 70%; height: auto; }
html[data-v2] .v2-login-art .v2-logo-claro { display: inline-block; }
@media (max-width: 900px) {
    .v2-login { grid-template-columns: 1fr; }
    .v2-login-art { display: none; }
    .v2-login-logo-m { display: block; }
    .v2-login-wrap { min-height: 100vh; align-items: flex-start; padding-top: 8vh; }
    .v2-login-card { box-shadow: none; border-color: transparent; background: transparent; padding: 8px 4px; }
}

/* ======================= Cartões de indicador com gradiente (relatórios de URA IA e Resumo de Ligação) ======================= */
html[data-v2] .uraIaCard, html[data-v2] .rligCard {
    --cat: var(--ink-2); background: var(--card) !important; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: inset 3px 0 0 var(--cat), var(--shadow); padding: 16px var(--pad);
}
html[data-v2] .uraIaCard.finalizado, html[data-v2] .rligCard.concluido { --cat: var(--ok); }
html[data-v2] .uraIaCard.transferido, html[data-v2] .rligCard.processando { --cat: var(--info); }
html[data-v2] .uraIaCard.erro, html[data-v2] .rligCard.erro { --cat: var(--crit); }
html[data-v2] .uraIaCard.abandonado { --cat: var(--warn); }
html[data-v2] .uraIaCard.custo { --cat: var(--purple); }
html[data-v2] .uraIaCard .uraIaCardNumero, html[data-v2] .rligCard .rligCardNumero { font-family: var(--f-display); font-weight: 700; font-size: 28px; color: var(--cat); font-variant-numeric: tabular-nums; }
html[data-v2] .uraIaCard .uraIaCardLabel, html[data-v2] .rligCard .rligCardLabel { color: var(--muted); opacity: 1; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; }

/* ======================= Atendimento IA (ia_dashboard.php / ia_rotas.php) ======================= */
html[data-v2] .ia-nav-tabs { background: transparent; box-shadow: none; padding: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
html[data-v2] .ia-nav-tabs .nav-tabs { justify-content: flex-start; }
html[data-v2] .ia-nav-tabs .nav-tabs .nav-item .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; margin: 0 0 -1px; color: var(--muted); font-weight: 500; transform: none; background: transparent; }
html[data-v2] .ia-nav-tabs .nav-tabs .nav-item .nav-link:hover { background: transparent; color: var(--ink); transform: none; }
html[data-v2] .ia-nav-tabs .nav-tabs .nav-item .nav-link.active { background: transparent; color: var(--ink); border-bottom-color: var(--gold); box-shadow: none; }
html[data-v2] .saldo-container { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px; }
html[data-v2] .btn-ia { background: var(--gold); color: #fff; border-radius: var(--r-sm); box-shadow: none; padding: 10px 22px; font-size: 14px; font-weight: 500; }
html[data-v2] .btn-ia:hover { background: var(--gold-ink); transform: none; box-shadow: none; color: #fff; }
html[data-v2] .form-group label { color: var(--muted); }

/* ======================= Pequenos avulsos ======================= */
html[data-v2] .api3-status, html[data-v2] .ap-status { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
html[data-v2] .api3-status.revogado, html[data-v2] .api3-status.vencido, html[data-v2] .ap-status.off { background: var(--line-2); color: var(--muted); }
html[data-v2] .ap-token-caixa { background: var(--warn-soft); border-color: transparent; color: var(--ink); }
html[data-v2] .ap-token-caixa code, html[data-v2] .api3-form { background: var(--card); color: var(--ink); }
html[data-v2] .card-header-warning { background: var(--warn-soft) !important; color: var(--warn) !important; border-radius: var(--r-lg) var(--r-lg) 0 0; }
html[data-v2] #ModalMensagemTemplate .modal-header { background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); }
html[data-v2] #ModalMensagemTemplate .modal-title, html[data-v2] #ModalMensagemTemplate .modal-header .close { color: var(--ink); }
html[data-v2] #depara-barra-progresso-wrap { background: var(--line-2); }
html[data-v2] #depara-barra-progresso { background: var(--ok); }

/* ======================= Variáveis próprias de telas (CRM kanban/segmentos/etc. = --k-*, API v3 = --a3-*) ======================= */
html[data-v2] {
    --k-bg: var(--bg); --k-col: var(--line-2); --k-card: var(--card); --k-ink: var(--ink); --k-ink-2: var(--muted); --k-line: var(--line);
    --k-ok: var(--ok); --k-warn: var(--warn); --k-bad: var(--crit); --k-accent: var(--gold);
}
html[data-v2] #api3Raiz { --a3-ink: var(--ink); --a3-mut: var(--muted); --a3-line: var(--line); --a3-bg: var(--line-2); }

/* ======================= CRM (assets/css/crm_kanban.css: classes crmk-*, #fff fixo no CSS da tela) ======================= */
html[data-v2] .crmk-col-count, html[data-v2] .crmk-drawer, html[data-v2] .crmk-abas, html[data-v2] .crmk-sugestoes, html[data-v2] .crmk-notif,
html[data-v2] .crmk-tabela-wrap, html[data-v2] #kCalendario, html[data-v2] .crmk-tl-item, html[data-v2] .crmk-tile, html[data-v2] .crmk-meta-linha { background: var(--card); color: var(--ink); }
html[data-v2] .crmk-tabela-wrap, html[data-v2] #kCalendario, html[data-v2] .crmk-tl-item, html[data-v2] .crmk-tile, html[data-v2] .crmk-meta-linha { border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
html[data-v2] .crmk-tabela tbody tr:hover { background: var(--hover); }
html[data-v2] .crmk-tabela tbody tr.selecionado { background: var(--gold-soft); }
html[data-v2] .crmk-notif-item.nao-lida { background: var(--warn-soft); }
html[data-v2] .crmk-prio.alta { background: var(--warn-soft); color: var(--warn); }
html[data-v2] .crmk-prio.urgente { background: var(--crit-soft); color: var(--crit); }
html[data-v2] .aud-fonte.crm { background: var(--info-soft); color: var(--info); }
html[data-v2] .crmk-toolbar select, html[data-v2] .crmk-toolbar input { background: var(--card); color: var(--ink); }

/* ======================= Tema escuro: fundos claros fixos em style="" (markup/JS das telas) ======================= */
html[data-v2][data-theme="dark"] [style*="background:#fff"], html[data-v2][data-theme="dark"] [style*="background: #fff"],
html[data-v2][data-theme="dark"] [style*="background:#ffffff"], html[data-v2][data-theme="dark"] [style*="background: #ffffff"],
html[data-v2][data-theme="dark"] [style*="background:white"], html[data-v2][data-theme="dark"] [style*="background: white"],
html[data-v2][data-theme="dark"] [style*="background-color:#fff"], html[data-v2][data-theme="dark"] [style*="background-color: #fff"],
html[data-v2][data-theme="dark"] [style*="background-color:white"], html[data-v2][data-theme="dark"] [style*="background-color: white"] { background: var(--card) !important; color: var(--ink); }
html[data-v2][data-theme="dark"] [style*="background:#f5f5f5"], html[data-v2][data-theme="dark"] [style*="background: #f5f5f5"],
html[data-v2][data-theme="dark"] [style*="background:#fafafa"], html[data-v2][data-theme="dark"] [style*="background: #fafafa"],
html[data-v2][data-theme="dark"] [style*="background:#f8f9fa"], html[data-v2][data-theme="dark"] [style*="background: #f8f9fa"],
html[data-v2][data-theme="dark"] [style*="background:#f1f1f1"], html[data-v2][data-theme="dark"] [style*="background: #f1f1f1"],
html[data-v2][data-theme="dark"] [style*="background:#eee"], html[data-v2][data-theme="dark"] [style*="background: #eee"] { background: var(--line-2) !important; color: var(--ink); }

/* ======================= Discador automático (discador/index.php + abas) ======================= */
html[data-v2] .v2-page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
html[data-v2] .v2-page-h h2 { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; margin: 0 0 4px; }
html[data-v2] .v2-page-h p { margin: 0; color: var(--muted); font-size: 13.5px; }
html[data-v2] .v2-page-h .v2-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* abas = sublinhado do kit (nos pills do Material) */
html[data-v2] .box-content > .nav.nav-pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0 0 var(--gap); }
html[data-v2] .box-content > .nav.nav-pills > li > a, html[data-v2] .box-content > .nav.nav-pills > li.active > a {
    background: transparent !important; box-shadow: none !important; border-radius: 0; color: var(--muted) !important; border-bottom: 2px solid transparent;
    margin: 0 0 -1px; padding: 10px 14px; font-size: 13.5px; font-weight: 500; text-transform: none;
}
html[data-v2] .box-content > .nav.nav-pills > li > a:hover { color: var(--ink) !important; }
html[data-v2] .box-content > .nav.nav-pills > li.active > a { color: var(--ink) !important; border-bottom-color: var(--gold); }
html[data-v2] #frmDiscador { margin-top: var(--gap); }
html[data-v2] #frmDiscador > .content, html[data-v2] #frmDiscador .content { padding: 0; margin: 0; min-height: 0; }
html[data-v2] #frmDiscador .container-fluid { padding: 0; }
html[data-v2] #frmDiscador .card-header-icon { display: none; }
html[data-v2] #frmDiscador .card { margin-top: 0; }

/* ---- Montar campanha em passos (azcall-v2-ui.js marca os blocos com data-v2s) ---- */
html[data-v2] .v2-camp .v2-step-off { display: none !important; }
html[data-v2] .v2-camp > div, html[data-v2] #Discador.v2-camp .col-md-12 { padding-left: 0; padding-right: 0; }
html[data-v2] #Discador.v2-camp .card { overflow: visible; border-radius: var(--r-lg); }
html[data-v2] #Discador.v2-camp .card > .card-header-icon, html[data-v2] #Discador.v2-camp .card-header .card-title { display: none; }
/* os cartões das campanhas em execução (#Tabela, dentro do mesmo formulário) precisam do ícone de pausar/retomar: as regras acima são só do cartão de montagem */
html[data-v2] #frmDiscador #Tabela .card > .card-header-icon, html[data-v2] #Discador.v2-camp #Tabela .card > .card-header-icon { display: flex; }
html[data-v2] #Discador.v2-camp .v2-pausa-geral { margin: 6px 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
/* botão de pausar/retomar da campanha em execução: pílula com ícone grande e texto, em destaque (verde = retomar quando está em pausa, âmbar = pausar quando está rodando) */
html[data-v2] #Tabela .card-header-icon .card-icon { width: auto; height: 44px; padding: 0 18px 0 12px; border-radius: 999px; gap: 6px; cursor: pointer; color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
html[data-v2] #Tabela .card-header-icon .card-icon:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 5px 14px rgba(0, 0, 0, .24); }
html[data-v2] #Tabela .card-header-icon .card-icon:active { transform: translateY(0); filter: brightness(.95); }
html[data-v2] #Tabela .card-header-icon .card-icon i, html[data-v2] #Tabela .card-header-icon .card-icon .material-icons { font-size: 28px; color: #fff; }
html[data-v2] #Tabela .card-header-icon[data-background-color="orange"] .card-icon { background: #2f9e57; }
html[data-v2] #Tabela .card-header-icon[data-background-color="orange"] .card-icon::after { content: "Retomar"; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
html[data-v2] #Tabela .card-header-icon[data-background-color="green"] .card-icon { background: #d98a1c; }
html[data-v2] #Tabela .card-header-icon[data-background-color="green"] .card-icon::after { content: "Pausar"; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
/* Pausar Geral / Despausar Geral maiores, com cor própria */
html[data-v2] #Discador.v2-camp .v2-pausa-geral .btn { height: 38px; padding: 0 18px; font-size: 13.5px; font-weight: 600; border-radius: 10px; text-transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
html[data-v2] #Discador.v2-camp .v2-pausa-geral #botaopausar { background: #d98a1c; color: #fff; }
html[data-v2] #Discador.v2-camp .v2-pausa-geral #botaodespausar { background: #2f9e57; color: #fff; }
html[data-v2] #Discador.v2-camp .card > .card-header:not(.card-header-icon) { padding: 24px var(--pad) 8px; background: transparent !important; text-align: left; }
html[data-v2] #Discador.v2-camp .v2-stepper { border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
html[data-v2] #Discador.v2-camp .v2-stepper button { text-decoration: none; }
html[data-v2] #Discador.v2-camp .card-header .row.v2-grid.v2-grid-x { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 0 0 18px; }
html[data-v2] #Discador.v2-camp .card-header .row.v2-grid::before, html[data-v2] #Discador.v2-camp .card-header .row.v2-grid::after { display: none; }
html[data-v2] #Discador.v2-camp .row.v2-grid > [class*="col-"] { width: auto; float: none; padding: 0; min-height: 0; }
html[data-v2] #Discador.v2-camp .row.v2-grid > .col-md-12 { grid-column: 1 / -1; }
html[data-v2] #Discador.v2-camp .v2-optfull { grid-column: 1 / -1 !important; }
html[data-v2] #Discador.v2-camp .v2-orig-hidden { display: none !important; }
html[data-v2] #Discador.v2-camp .form-group { margin: 0; }
html[data-v2] #Discador.v2-camp .form-group > label.label-control { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0 0 8px; text-transform: none; }
html[data-v2] #Discador.v2-camp .bootstrap-select { width: 100% !important; }
html[data-v2] #Discador.v2-camp .v2-field > label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0 0 8px; }
html[data-v2] #Discador.v2-camp .v2-camp-foot { border-top: 1px solid var(--line); padding: 14px var(--pad); }
html[data-v2] #Discador.v2-camp .v2-camp-foot .v2-btn[disabled] { opacity: .45; cursor: default; }
html[data-v2] #Discador.v2-camp .v2-review div { text-transform: none; }
html[data-v2] #Discador.v2-camp #collapseOne { display: block; }
html[data-v2] #Discador.v2-camp .panel, html[data-v2] #Discador.v2-camp .panel-group { margin: 0; border: 0; box-shadow: none; background: transparent; }
html[data-v2] #Discador.v2-camp .panel-body { padding: 0; }
html[data-v2] #Discador.v2-camp .alert { margin: 0 0 4px; }
html[data-v2] #Discador.v2-camp .btn-lg { height: 44px; padding: 0 22px; }
html[data-v2] #Discador.v2-camp [data-v2o="1"] { order: 1; } html[data-v2] #Discador.v2-camp [data-v2o="2"] { order: 2; } html[data-v2] #Discador.v2-camp [data-v2o="3"] { order: 3; }
html[data-v2] #Discador.v2-camp .row.v2-grid > [data-v2s]:not([data-v2o]) { order: 4; }

/* cabeçalho do cartão vira UMA grade de 2 colunas; as duas linhas de campos viram "contents" para seus campos entrarem nela */
html[data-v2] #Discador.v2-camp .card-header.v2-hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; align-items: start; }
html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > .row.v2-contents { display: contents; }
html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > .row.v2-contents::before, html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > .row.v2-contents::after { display: none; }
html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > .row.v2-contents > [class*="col-"] { width: auto; float: none; padding: 0; min-height: 0; margin: 0; }
html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > .row:not(.v2-contents), html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > div:not(.row) { grid-column: 1 / -1; margin: 0; }
html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > [data-v2o="1"] { order: 1; } html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > [data-v2o="2"] { order: 2; } html[data-v2] #Discador.v2-camp .card-header.v2-hgrid > [data-v2o="3"] { order: 3; }
html[data-v2] #Discador.v2-camp .row.v2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 0 0 18px; }
html[data-v2] #Discador.v2-camp .row.v2-grid::before, html[data-v2] #Discador.v2-camp .row.v2-grid::after { display: none; }
/* envio: o botão é só o ícone no HTML original; no v2 ganha o rótulo do kit sem mexer na marcação */
html[data-v2] #Discador.v2-camp [data-v2s="5"] .form-group > label.label-control, html[data-v2] #Discador.v2-camp [data-v2s="5"] .form-group > p { display: none; }
html[data-v2] #Discador.v2-camp #btCampanha1 { background: var(--gold); border: 1px solid var(--gold); color: #fff; height: 44px; padding: 0 22px; display: inline-flex; align-items: center; gap: 10px; border-radius: var(--r-sm); }
html[data-v2] #Discador.v2-camp #btCampanha1 .fa-2x { font-size: 16px; }
html[data-v2] #Discador.v2-camp #btCampanha1::after { content: "Criar campanha"; font-weight: 600; font-size: 14.5px; }
html[data-v2] #Discador.v2-camp #btCampanha1:hover { background: var(--gold-ink); border-color: var(--gold-ink); }
html[data-v2] #Discador.v2-camp #botaopausar, html[data-v2] #Discador.v2-camp #botaodespausar { margin-right: 6px; }
html[data-v2] #Discador.v2-camp .card-header.v2-hgrid .row.v2-contents > [data-v2s]:not([data-v2o]) { order: 4; }
html[data-v2] #Discador.v2-camp .card-header.v2-hgrid { padding-bottom: 24px; }
html[data-v2] #Discador.v2-camp .panel [class*="col-sm-"] { padding-left: 0; padding-right: 0; }
html[data-v2] #Discador.v2-camp[data-v2-cur="3"] .card-header.v2-hgrid > [data-v2o="1"] { order: 5; }
html[data-v2][data-theme="dark"] .v2-stepper button { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ======================= Usuários e permissões (cadastros/gerenciar_usuarios.php + usuario/usuarios.php) ======================= */
html[data-v2] #frmUser { margin-top: var(--gap); }
html[data-v2] #frmUser .content, html[data-v2] #frmUser .container-fluid { padding: 0; margin: 0; min-height: 0; }
html[data-v2] #addg { display: none; }
html[data-v2] .v2-hidden-create { display: none; }
html[data-v2] .v2-users { overflow: hidden; }
html[data-v2] .v2-selchip { position: relative; height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; margin: 0; cursor: pointer; }
html[data-v2] .v2-selchip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
html[data-v2] .v2-users .v2-input input[type="search"] { -webkit-appearance: none; appearance: none; }
html[data-v2] .v2-users-tbl { margin-top: 0; }
html[data-v2] .v2-users-tbl th { padding: 12px var(--pad); border-bottom: 1px solid var(--line); text-align: left; }
html[data-v2] .v2-users-tbl td { text-align: left; vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
html[data-v2] .v2-users-tbl td.v2-muted, html[data-v2] .v2-muted { color: var(--muted); }
html[data-v2] .v2-actcol { text-align: right !important; width: 1px; white-space: nowrap; }
html[data-v2] .v2-rowacts { display: inline-flex; gap: 2px; }
html[data-v2] .v2-rowacts .v2-ibtn { width: 32px; height: 32px; }
html[data-v2] .v2-rowacts .v2-ibtn .v2-msr { font-size: 19px; }
html[data-v2] .v2-users .v2-sw { display: inline-block; vertical-align: middle; }
html[data-v2] .v2-users .dataTables_info { padding: 0; color: var(--muted); }
html[data-v2] .v2-users .dataTables_paginate { padding: 0; }
html[data-v2] .v2-users .v2-tfoot { border-top: 1px solid var(--line); padding: 10px var(--pad); }
@media (max-width: 720px) { html[data-v2] .v2-hide-sm { display: none; } }

/* ======================= Barra superior: chip de saldos (kit) ======================= */
html[data-v2] .v2-saldo { display: inline-flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
html[data-v2] .v2-saldo b { color: var(--ink); font-weight: 600; font-family: var(--f-display); }
html[data-v2] .v2-saldo .sep { width: 1px; height: 16px; background: var(--line); }
html[data-v2] .navbar-collapse li.atualizasaldo > a.v2-saldo-link { padding: 0; border: 0; background: transparent; }
html[data-v2] .navbar-collapse li.atualizasaldo > a.v2-saldo-link > i.fa, html[data-v2] .navbar-collapse li.atualizasaldo > a.v2-saldo-link > .caret { display: none; }
html[data-v2] .navbar-collapse li.atualizasaldo > a.v2-saldo-link > p { display: none; }
@media (max-width: 1100px) { html[data-v2] .v2-saldo { display: none; } html[data-v2] .navbar-collapse li.atualizasaldo > a.v2-saldo-link > i.fa { display: inline-block; } }
html[data-v2] #v2TopBusca .v2-msr { font-size: 22px; }
html[data-v2] .box-content > br { display: none; }
html[data-v2] .v2-users .dataTables_paginate .paginate_button { min-width: 34px; padding: 0; text-transform: none; font-size: 0; }
html[data-v2] .v2-users .dataTables_paginate .paginate_button .v2-msr { font-size: 20px; }
/* usuário da barra superior: só o ícone (o nome e a versão já aparecem no menu) */
html[data-v2] .navbar-collapse > .navbar-nav > li.dropdown:not(.atualizasaldo) > a.dropdown-toggle { font-size: 0; gap: 0; padding: 0 8px; }
html[data-v2] .navbar-collapse > .navbar-nav > li.dropdown:not(.atualizasaldo) > a.dropdown-toggle .material-icons { font-size: 24px; }

/* ======================= Perfis e permissões (usuario/user_grupos.php + grupo_painel_v2.php) ======================= */
html[data-v2] .v2-perm { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gap); align-items: start; }
html[data-v2] .v2-perm-lista { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 260px); overflow-y: auto; }
html[data-v2] .v2-perm-lista .v2-ib-item { border: 0; border-radius: var(--r-sm); align-items: center; text-align: left; }
html[data-v2] .v2-perm-lista .v2-ib-last { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-v2] .v2-perm-n { width: 44px; flex-shrink: 0; display: inline-flex; justify-content: center; }
html[data-v2] .v2-perm-n .v2-pill { padding: 0 8px; font-variant-numeric: tabular-nums; }
html[data-v2] .v2-perm-vazio { padding: 28px var(--pad); color: var(--subtle); text-align: center; font-size: 13.5px; }
html[data-v2] .v2-perm-painel { overflow: hidden; min-height: 200px; }
html[data-v2] .v2-perm-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
html[data-v2] .v2-perm-head .v2-perm-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
html[data-v2] .v2-perm-id { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
html[data-v2] .v2-perm-id label { margin: 0; display: block; font-weight: 400; }
html[data-v2] .v2-perm-id label > span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
html[data-v2] .v2-perm-id .v2-input { max-width: none; width: 100%; }
html[data-v2] .v2-perm-g { padding: 14px var(--pad); border-bottom: 1px solid var(--line-2); transition: opacity .15s; }
html[data-v2] .v2-perm-g:last-child { border-bottom: 0; }
html[data-v2] .v2-perm-gh { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
html[data-v2] .v2-perm-gh b { font-weight: 600; color: var(--ink); }
html[data-v2] .v2-perm-cont { font-size: 12px; color: var(--subtle); font-variant-numeric: tabular-nums; }
html[data-v2] .v2-perm-gview { margin-left: auto; display: inline-flex; }
html[data-v2] .v2-perm-g.v2-perm-off .v2-perm-items, html[data-v2] .v2-perm-g.v2-perm-off .v2-perm-extras { opacity: .5; }
html[data-v2] .v2-perm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; margin: 12px 0 0 28px; }
html[data-v2] .v2-perm-no.tem-filhos { grid-column: 1 / -1; }
html[data-v2] .v2-perm-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
html[data-v2] .v2-perm-extras { margin: 10px 0 0 28px; }
html[data-v2] .v2-perm-main, html[data-v2] .v2-perm-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-weight: 400; }
html[data-v2] .v2-perm-main { font-size: 13px; color: var(--ink-2); }
html[data-v2] .v2-perm-chip { font-size: 12px; color: var(--muted); }
html[data-v2] .v2-perm-no input[type="checkbox"], html[data-v2] .v2-perm-extras input[type="checkbox"] { position: static; opacity: 1; width: 16px; height: 16px; margin: 0; accent-color: var(--gold); flex-shrink: 0; visibility: visible; }
html[data-v2] .v2-perm-no input[disabled], html[data-v2] .v2-perm-extras input[disabled] { cursor: default; }
html[data-v2] .v2-perm-filhos { margin: 8px 0 2px 8px; padding-left: 14px; border-left: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; transition: opacity .15s; }
html[data-v2] .v2-perm-filhos .v2-perm-no.tem-filhos { grid-column: 1 / -1; }
html[data-v2] .v2-perm-filhos.v2-perm-dim { opacity: .5; }
html[data-v2] .v2-perm-gview .v2-sw { margin: 0; }
@media (max-width: 900px) {
  html[data-v2] .v2-perm { grid-template-columns: 1fr; }
  html[data-v2] .v2-perm-lista { max-height: 260px; }
  html[data-v2] .v2-perm-id { grid-template-columns: 1fr; }
  html[data-v2] .v2-perm-items, html[data-v2] .v2-perm-extras { margin-left: 0; }
}
html[data-v2] .v2-users .v2-pgnum { display: inline-block; min-width: 44px; text-align: center; font-family: var(--f-display); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-2); }
html[data-v2] .v2-users .dataTables_paginate { display: inline-flex; align-items: center; gap: 4px; }

/* ======================= Novo / Editar usuário (usuario_cadastrar.php + usuario_alterar.php) ======================= */
html[data-v2] .v2-userform { overflow: hidden; max-width: 920px; }
html[data-v2] .v2-userform .v2-card-h { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
html[data-v2] .v2-userform .v2-card-h .v2-sub { margin-left: auto; }
html[data-v2] .v2-userform .v2-card-b { padding: 20px var(--pad); }
html[data-v2] .v2-userform .v2-form-grid { margin-top: 4px; }
html[data-v2] .v2-userform .v2-field { margin-top: 0; min-width: 0; }
html[data-v2] .v2-userform .v2-field > label { margin: 0 0 8px; font-weight: 500; }
html[data-v2] .v2-userform .v2-field > label .v2-sub { font-weight: 400; margin-left: 4px; }
html[data-v2] .v2-userform .v2-field small.v2-sub { display: block; margin-top: 6px; line-height: 1.4; }
html[data-v2] .v2-userform .v2-input { padding: 0 12px; }
html[data-v2] .v2-userform .v2-input select { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
html[data-v2] .v2-userform .v2-input input:disabled { cursor: not-allowed; opacity: .55; }
html[data-v2] .v2-uf-foto { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
html[data-v2] .v2-uf-foto img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: var(--line-2); flex-shrink: 0; }
html[data-v2] .v2-uf-foto > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-v2] .v2-uf-foto label.v2-btn { margin: 0; cursor: pointer; }
html[data-v2] .v2-uf-foto .v2-sub { flex-basis: 100%; }
html[data-v2] .v2-uf-senha { grid-column: 1 / -1; }
html[data-v2] .v2-uf-senharow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
html[data-v2] .v2-uf-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
html[data-v2] .v2-uf-toggle > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
html[data-v2] .v2-uf-toggle b { font-weight: 500; color: var(--ink); }
html[data-v2] .v2-uf-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px var(--pad); border-top: 1px solid var(--line); background: var(--card); }
html[data-v2] .v2-uf-limite { text-align: center; padding: 40px var(--pad); display: flex; flex-direction: column; align-items: center; gap: 8px; }
html[data-v2] .v2-uf-limite h4 { margin: 4px 0 0; font-family: var(--f-display); font-weight: 600; font-size: 17px; }
html[data-v2] .v2-uf-limite p { margin: 0 0 8px; }
@media (max-width: 720px) {
  html[data-v2] .v2-uf-senharow { grid-template-columns: 1fr; }
  html[data-v2] .v2-uf-foto { flex-wrap: wrap; }
}

/* ======================= Monitor de acessos (adm/monitor_loja/index_v2.php) ======================= */
html[data-v2] .v2-mon [hidden] { display: none !important; }
html[data-v2] .v2-mon .v2-mon-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-v2] .v2-mon .v2-kpi .v2-k-v { font-size: 30px; }
html[data-v2] .v2-mon-card { overflow: hidden; }
html[data-v2] .v2-mon-card .v2-toolbar { border-bottom: 1px solid var(--line); }
html[data-v2] .v2-mon-tbl { margin-top: 0; }
html[data-v2] .v2-mon-tbl th { padding: 12px var(--pad); border-bottom: 1px solid var(--line); text-align: left; }
html[data-v2] .v2-mon-tbl td { text-align: left; vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
html[data-v2] .v2-mon-tbl .v2-muted, html[data-v2] .v2-mon .v2-muted { color: var(--muted); }
html[data-v2] .v2-mon-pg { display: inline-flex; align-items: center; gap: 4px; }
html[data-v2] .v2-mon-vazio { padding: 32px var(--pad); text-align: center; color: var(--subtle); font-size: 13.5px; }
html[data-v2] .v2-mon .v2-input input[type="search"] { -webkit-appearance: none; appearance: none; }
html[data-v2] .v2-mon .v2-tabs button { margin-bottom: -1px; }
html[data-v2] .v2-mon .v2-agent-meta { gap: 10px; }
@media (max-width: 1100px) { html[data-v2] .v2-mon .v2-mon-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================= Configurações PABX (pages/confpbx.php): abas no topo como no kit, conteúdo das abas inalterado ======================= */
html[data-v2] .v2-pbx .card-content > .row { display: block; }
html[data-v2] .v2-pbx .col-md-3, html[data-v2] .v2-pbx .col-md-9 { width: 100%; max-width: none; float: none; flex: none; padding: 0 !important; }
html[data-v2] .v2-pbx #menuLateral {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 4px; min-height: 0; max-height: none; max-width: none; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; margin: 0 0 var(--gap);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
html[data-v2] .v2-pbx #menuLateral::-webkit-scrollbar { display: none; }
html[data-v2] .v2-pbx #menuLateral > li { float: none; margin: 0; flex-shrink: 0; }
html[data-v2] .v2-pbx #menuLateral .nav-link,
html[data-v2] .v2-pbx #menuLateral > li > a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px; margin: 0 0 -1px; max-width: none; overflow: visible;
  background: transparent !important; color: var(--muted) !important; border: 0; border-bottom: 2px solid transparent; border-left: 0; border-radius: 0 !important;
  font-size: 13.5px; font-weight: 500; text-transform: none; white-space: nowrap; box-shadow: none; transition: color .14s;
}
html[data-v2] .v2-pbx #menuLateral .nav-link:hover { color: var(--ink) !important; background: transparent !important; border-left: 0; }
html[data-v2] .v2-pbx #menuLateral .nav-link.active { color: var(--ink) !important; background: transparent !important; border-bottom-color: var(--gold); border-left: 0; }
/* conteúdo da aba: sem o selo verde com ícone nem o título repetido (a aba e o cabeçalho já dizem onde você está) */
html[data-v2] .v2-pbx .tab-pane > .row > .col-md-12 > .card > .card-header-icon { display: none; }
html[data-v2] .v2-pbx .tab-pane > .row > .col-md-12 > .card > .card-content > .card-title { display: none; }
html[data-v2] .v2-pbx .tab-pane > .row { margin: 0; }
html[data-v2] .v2-pbx .tab-pane > .row > .col-md-12 { padding: 0 !important; }
html[data-v2] .v2-pbx .tab-pane > .row > .col-md-12 > .card { margin: 0; }
html[data-v2] .v2-pbx .tab-pane > .row > .col-md-12 > .card > .card-content { padding: var(--pad); }
/* o botão "Nova ..." passa para o cabeçalho da página */
html[data-v2] .v2-pbx .tab-pane .dt-buttons .dt-button.btn-success:first-child { display: none; }

/* ======================= Chamadas em andamento (pages/ch.php) ======================= */
html[data-v2] .v2-ch [hidden] { display: none !important; }
html[data-v2] .v2-ch .v2-ch-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html[data-v2] .v2-ch .v2-kpi .v2-k-v { font-size: 30px; }
html[data-v2] .v2-ch-card { overflow: hidden; }
html[data-v2] .v2-ch-tbl { margin-top: 0; }
html[data-v2] .v2-ch-tbl th { padding: 12px var(--pad); border-bottom: 1px solid var(--line); text-align: left; }
html[data-v2] .v2-ch-tbl td { text-align: left; vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
html[data-v2] .v2-ch-vazio { padding: 36px var(--pad); text-align: center; color: var(--subtle); font-size: 13.5px; }
@media (max-width: 1100px) { html[data-v2] .v2-ch .v2-ch-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================= Troncos (pages/trs.php) ======================= */
html[data-v2] .v2-tr [hidden] { display: none !important; }
html[data-v2] .v2-tr .v2-tr-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
html[data-v2] .v2-tr .v2-tr-card { padding: 16px var(--pad); }
html[data-v2] .v2-tr .v2-agent-meta { margin-top: 16px; }
html[data-v2] .v2-tr-vazio { padding: 36px var(--pad); text-align: center; color: var(--subtle); font-size: 13.5px; }

/* ======================= Ramais (pages/rs.php) ======================= */
html[data-v2] .v2-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
html[data-v2] .v2-rs-wrap .card > .card-header-icon { display: none; }
html[data-v2] .v2-rs-wrap .card .card-title { display: none; }
html[data-v2] .v2-rs-wrap .card-content { padding-top: var(--pad); }

/* ======================= Filas de atendimento (pages/fl.php) ======================= */
html[data-v2] .v2-fl .card > .card-header-icon { display: none; }
html[data-v2] .v2-fl .card .card-title { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; margin: 0 0 12px; text-transform: none; color: var(--ink); }
html[data-v2] .v2-fl .card-content { padding: var(--pad); }
html[data-v2] .v2-fl .card-content > .row { margin-left: 0; margin-right: 0; }

/* ======================= Sistema (dash.php -> system/sistema_v2.php) ======================= */
html[data-v2] .v2-sis .v2-sis-res { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
html[data-v2] .v2-sis .v2-sis-mini { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
html[data-v2] .v2-sis .v2-tbl th { padding: 0 var(--pad) 10px; }

/* ======================= Novidades e atualizações (pages/changelog.php) ======================= */
html[data-v2] .v2-clog { max-width: 920px; }
html[data-v2] .v2-clog .v2-tl-dot.on { border-color: var(--gold); background: var(--gold-soft); }
html[data-v2] .v2-clog-item { display: flex; gap: 10px; padding: 7px 0; align-items: flex-start; }
html[data-v2] .v2-clog-item .v2-pill { flex-shrink: 0; margin-top: 1px; }
html[data-v2] .v2-clog-txt { flex: 1; line-height: 1.5; min-width: 0; }
html[data-v2] .v2-clog-item .v2-sub { font-size: 12px; text-align: right; max-width: 200px; }
html[data-v2] .v2-clog-vazio { padding: 32px var(--pad); text-align: center; color: var(--subtle); }
@media (max-width: 720px) { html[data-v2] .v2-clog-item { flex-wrap: wrap; } }

/* ======================= Meu perfil (perfil.php) ======================= */
html[data-v2] .v2-perfil { max-width: 920px; }
html[data-v2] .v2-perfil-topo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
html[data-v2] .v2-perfil-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: var(--line-2); flex-shrink: 0; }
html[data-v2] .v2-perfil-nome { font-family: var(--f-display); font-weight: 600; font-size: 18px; }
html[data-v2] .v2-perfil label.v2-btn { margin: 0; cursor: pointer; }
html[data-v2] .v2-perfil .v2-perfil-cols { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
html[data-v2] .v2-perfil .v2-field { margin-top: 0; min-width: 0; }
html[data-v2] .v2-perfil .v2-field + .v2-field { margin-top: 16px; }
html[data-v2] .v2-perfil .v2-form-grid .v2-field + .v2-field { margin-top: 0; }
html[data-v2] .v2-perfil .v2-field > label { margin: 0 0 8px; font-weight: 500; }
html[data-v2] .v2-perfil .v2-ta { height: auto; padding: 10px 12px; align-items: stretch; }
html[data-v2] .v2-perfil .v2-ta textarea { border: 0; outline: 0; background: transparent; width: 100%; resize: vertical; font: inherit; font-size: 13.5px; color: var(--ink); }
html[data-v2] .v2-perfil-foot { display: flex; justify-content: flex-end; margin-top: var(--gap); }

/* ======================= Configurações PABX: abas refeitas no layout do kit ======================= */
html[data-v2] .v2-pbx-vazio { padding: 36px var(--pad); text-align: center; color: var(--subtle); font-size: 13.5px; }
html[data-v2] .v2-pausas-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
html[data-v2] .v2-pausa { padding: 16px var(--pad); }
html[data-v2] .v2-pausa-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--info-soft); color: var(--pause); flex-shrink: 0; }
html[data-v2] .v2-pausa-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-v2] .v2-pausa .v2-rowacts { display: inline-flex; gap: 2px; }
html[data-v2] .v2-pausa .v2-rowacts .v2-ibtn { width: 32px; height: 32px; }
html[data-v2] .v2-rota-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
html[data-v2] .v2-rota-form .v2-input { max-width: 360px; flex: 1 1 240px; padding: 0 12px; }
html[data-v2] .v2-pbx-frag .v2-input select { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }

/* abas ainda no formato de tabela (ramais, filas, tabulação, webhook, webchat...): ações em ícone e barra de busca do kit */
html[data-v2] .v2-pbx td .btn.btn-simple { font-size: 0; padding: 0; min-width: 0; width: 32px; height: 32px; margin: 0 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); }
html[data-v2] .v2-pbx td .btn.btn-simple .material-icons, html[data-v2] .v2-pbx td .btn.btn-simple .material-icons-outlined, html[data-v2] .v2-pbx td .btn.btn-simple i.fa { font-size: 19px; margin: 0; }
html[data-v2] .v2-pbx td .btn.btn-simple .ripple-container { display: none; }
html[data-v2] .v2-pbx .dataTables_wrapper .dataTables_length { display: none; }
html[data-v2] .v2-pbx .dataTables_wrapper .dt-buttons:empty { display: none; }
html[data-v2] .v2-pbx .dataTables_wrapper .dataTables_filter { float: none; text-align: right; margin: 0 0 12px; }
html[data-v2] .v2-pbx .dataTables_wrapper .dataTables_info { padding-top: 14px; }

/* Webhooks (cadastros/cadastro_webhooks_view.php): cartões; a tabela fica escondida (é ela que guarda os botões/modais) */
html[data-v2] .v2-wh-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
html[data-v2] .v2-wh-card { padding: 16px var(--pad); }
html[data-v2] .v2-wh-url { display: inline-block; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
html[data-v2] .v2-wh-card .v2-rowacts { display: inline-flex; gap: 2px; }
html[data-v2] .v2-wh-card .v2-rowacts .v2-ibtn { width: 32px; height: 32px; }
html[data-v2] .v2-wh-tbl { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tabulação (cadastros/cadastro_tabulacao_view.php): formulários em cartões */
html[data-v2] .v2-tab-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
html[data-v2] .v2-tab-desc { line-height: 1.5; }
html[data-v2] .v2-tab-card .v2-rowacts { display: inline-flex; gap: 2px; }
html[data-v2] .v2-tab-card .v2-rowacts .v2-ibtn { width: 32px; height: 32px; }

/* tabelas que continuam em formato de tabela nas abas do PABX: colunas à esquerda como no kit, ações à direita */
html[data-v2] .v2-pbx table.dataTable th, html[data-v2] .v2-pbx table.dataTable td { text-align: left; }
html[data-v2] .v2-pbx table.dataTable th:last-child, html[data-v2] .v2-pbx table.dataTable td:last-child { text-align: right; white-space: nowrap; }

/* Ramais (cadastros/cadastro_ramal_view.php) */
html[data-v2] .v2-ram-card { overflow: hidden; }
html[data-v2] .v2-ram-card .v2-toolbar { border-bottom: 1px solid var(--line); }
html[data-v2] .v2-ram .v2-tbl { margin-top: 0; }
html[data-v2] .v2-ram .v2-tbl th { padding: 12px var(--pad); border-bottom: 1px solid var(--line); text-align: left; }
html[data-v2] .v2-ram .v2-tbl td { text-align: left; vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
html[data-v2] .v2-ram .v2-tbl td:last-child, html[data-v2] .v2-ram .v2-tbl th:last-child { text-align: right; }
html[data-v2] .v2-ram .v2-input input[type="search"] { -webkit-appearance: none; appearance: none; }
html[data-v2] .v2-ram [hidden] { display: none !important; }

/* Filas (cadastros/cadastro_fila_view.php) */
html[data-v2] .v2-fil-card { overflow: hidden; }
html[data-v2] .v2-fil-card .v2-toolbar { border-bottom: 1px solid var(--line); }
html[data-v2] .v2-fil .v2-tbl { margin-top: 0; }
html[data-v2] .v2-fil .v2-tbl th { padding: 12px var(--pad); border-bottom: 1px solid var(--line); text-align: left; }
html[data-v2] .v2-fil .v2-tbl td { text-align: left; vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
html[data-v2] .v2-fil .v2-tbl th:last-child, html[data-v2] .v2-fil .v2-tbl td:last-child { text-align: right; }
html[data-v2] .v2-fil .v2-tbl td.v2-num[style*="right"], html[data-v2] .v2-fil .v2-tbl th[style*="right"] { text-align: right; }
html[data-v2] .v2-fil .v2-input input[type="search"] { -webkit-appearance: none; appearance: none; }
html[data-v2] .v2-fil [hidden] { display: none !important; }

/* ======================= Whitelabel (cadastros/cadastro_whitelabel_v2.php) ======================= */
html[data-v2] .v2-wl [hidden] { display: none !important; }
html[data-v2] .v2-wl .v2-wl-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
html[data-v2] .v2-wl .v2-field > label { margin: 0 0 8px; font-weight: 500; }
html[data-v2] .v2-wl-up { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); }
html[data-v2] .v2-wl-up-p { width: 64px; height: 48px; border-radius: 8px; background: var(--line-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
html[data-v2] .v2-wl-up-p img { max-width: 52px; max-height: 38px; }
html[data-v2] .v2-wl-cores { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
html[data-v2] .v2-wl-hex { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px; margin: 0; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12.5px; }
html[data-v2] .v2-wl-hex input { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; }
html[data-v2] .v2-wl-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
html[data-v2] .v2-wl-row b { display: block; font-size: 13.5px; font-weight: 600; }
html[data-v2] .v2-wl-row span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
html[data-v2] .v2-wl-pv { position: sticky; top: 92px; }
html[data-v2] .v2-wl-pv-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
html[data-v2] .v2-wl-frame { --wlr: 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #f5f4f1; overflow: hidden; box-shadow: var(--shadow-pop); color: #1b1d21; }
html[data-v2][data-theme="dark"] .v2-wl-frame { background: #0f1114; color: #f1f0ec; }
html[data-v2] .v2-wl-url { display: flex; align-items: center; gap: 6px; justify-content: center; height: 30px; font-size: 11.5px; color: #6b6f78; background: rgba(0, 0, 0, .04); border-bottom: 1px solid rgba(0, 0, 0, .06); }
html[data-v2] .v2-wlp-app { display: flex; height: 340px; }
html[data-v2] .v2-wlp-side { width: 34%; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; background: #16181b; color: #cfd1d5; }
html[data-v2] .v2-wlp-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: #fff; }
html[data-v2] .v2-wlp-brand img { height: 22px; max-width: 40px; object-fit: contain; }
html[data-v2] .v2-wlp-brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-v2] .v2-wlp-mi { font-size: 11.5px; padding: 7px 9px; border-radius: var(--wlr); }
html[data-v2] .v2-wlp-mi.on { background: color-mix(in srgb, var(--wl) 22%, transparent); color: var(--wl); }
html[data-v2] .v2-wlp-main { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html[data-v2] .v2-wlp-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
html[data-v2] .v2-wlp-h span { background: var(--wl); color: #fff; font-size: 10.5px; font-weight: 600; padding: 6px 10px; border-radius: var(--wlr); }
html[data-v2] .v2-wlp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html[data-v2] .v2-wlp-kpis div { background: #fff; border-radius: var(--wlr); padding: 10px; position: relative; overflow: hidden; border: 1px solid #ebe9e4; color: #1b1d21; }
html[data-v2] .v2-wlp-kpis small { display: block; font-size: 9.5px; color: #9a9ea6; }
html[data-v2] .v2-wlp-kpis b { font-size: 16px; }
html[data-v2] .v2-wlp-kpis i { position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--wl); }
html[data-v2] .v2-wlp-chart { flex: 1; background: #fff; border-radius: var(--wlr); border: 1px solid #ebe9e4; padding: 12px; }
html[data-v2] .v2-wlp-chart svg { width: 100%; height: 100%; }
html[data-v2] .v2-wlp-chart path { stroke: var(--wl); }
html[data-v2] .v2-wlp-login { display: grid; grid-template-columns: 1fr 1fr; height: 340px; }
html[data-v2] .v2-wlp-lart { padding: 18px; color: #fff; background: #16181b; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
html[data-v2] .v2-wlp-lart img { width: 56px; margin-bottom: auto; }
html[data-v2] .v2-wlp-lart b { font-size: 14px; line-height: 1.3; }
html[data-v2] .v2-wlp-lart span { font-size: 11px; opacity: .75; }
html[data-v2] .v2-wlp-lform { padding: 18px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
html[data-v2] .v2-wlp-lform b { font-size: 15px; }
html[data-v2] .v2-wlp-lform i { height: 30px; border-radius: var(--wlr); border: 1px solid rgba(128, 128, 128, .3); }
html[data-v2] .v2-wlp-lform span { background: var(--wl); color: #fff; text-align: center; font-size: 11.5px; font-weight: 600; padding: 9px; border-radius: var(--wlr); }
@media (max-width: 1000px) { html[data-v2] .v2-wl .v2-wl-grid { grid-template-columns: 1fr; } html[data-v2] .v2-wl-pv { position: static; } }

/* ======================= Certificados (cadastros/certificados.php) ======================= */
html[data-v2] .v2-cert { max-width: 760px; }
html[data-v2] .v2-cert-lin { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
html[data-v2] .v2-cert-lin:last-child { border-bottom: 0; }
html[data-v2] .v2-cert-lin > .v2-msr { color: var(--muted); }
html[data-v2] .v2-cert-lin > div { flex: 1; min-width: 0; }
html[data-v2] .v2-cert-lin b { display: block; font-weight: 600; font-size: 13.5px; }
html[data-v2] .v2-cert-lin small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
html[data-v2] .v2-cert-val { font-size: 13.5px; color: var(--ink-2); text-align: right; word-break: break-all; }
html[data-v2] .v2-cert-val.sim { color: var(--ok); font-weight: 600; }
html[data-v2] .v2-cert-val.nao { color: var(--crit); font-weight: 600; }
html[data-v2] .v2-cert-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
html[data-v2] .v2-cert-bg { position: absolute; inset: 0; background: rgba(15, 17, 20, .42); }
html[data-v2] .v2-cert-box { position: relative; width: 100%; max-width: 440px; box-shadow: var(--shadow-pop); }
html[data-v2] .v2-cert-sub { display: flex; align-items: center; gap: 8px; }
html[data-v2] .v2-cert-sub .v2-input { flex: 1; min-width: 0; }
html[data-v2] .v2-cert-etapas { margin-top: 16px; display: grid; gap: 10px; font-size: 13px; }
html[data-v2] .v2-cert-etapas b { font-weight: 600; }
html[data-v2] .v2-cert-etapas .text-success { color: var(--ok) !important; }
html[data-v2] .v2-cert-etapas .text-danger { color: var(--crit) !important; }
html[data-v2] .v2-cert-etapas .progress { height: 18px; margin-top: 8px; }
html[data-v2] .v2-cert-etapas .spinner-border { display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border: 2px solid var(--gold); border-right-color: transparent; border-radius: 50%; animation: v2certspin .7s linear infinite; }
@keyframes v2certspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html[data-v2] .v2-cert-etapas .spinner-border { animation-duration: 2s; } }
html[data-v2] .v2-cert-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ======================= ElevenLabs (cadastros/elevenlabs.php) ======================= */
html[data-v2] .v2-el { max-width: 920px; }
html[data-v2] .v2-el [hidden] { display: none !important; }
html[data-v2] #elevenlabsStatusPill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 600; font-family: inherit; text-transform: none; letter-spacing: 0; margin-left: auto; }
html[data-v2] #elevenlabsStatusPill.configurada { background: var(--ok-soft); color: var(--ok); }
html[data-v2] #elevenlabsStatusPill.pendente { background: var(--crit-soft); color: var(--crit); }
html[data-v2] .v2-el-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
html[data-v2] .v2-el-vozes { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
html[data-v2] .v2-el-voz { display: flex; align-items: center; gap: 12px; padding: 12px 14px; box-shadow: none; }
html[data-v2] .v2-el-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--gold-soft); color: var(--gold-ink); flex-shrink: 0; }
html[data-v2] .v2-el-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ======================= IA Conversacional (cadastros/ia_conversacional.php) ======================= */
html[data-v2] .v2-ia { max-width: 1100px; }
html[data-v2] .v2-ia-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
html[data-v2] .v2-ia-row b { display: block; font-size: 13.5px; font-weight: 600; }
html[data-v2] .v2-ia-row span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
/* o checkbox continua sendo o campo que o ia_conversacional.js lê e grava; só ganha a cara de interruptor do kit */
html[data-v2] .v2-ia-sw { display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; flex-shrink: 0; }
html[data-v2] .v2-ia-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
html[data-v2] .v2-ia-sw i { width: 36px; height: 20px; border-radius: 10px; background: var(--line); position: relative; transition: background .16s; flex-shrink: 0; }
html[data-v2] .v2-ia-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .16s; }
html[data-v2] .v2-ia-sw input:checked + i { background: var(--ok); }
html[data-v2] .v2-ia-sw input:checked + i::after { transform: translateX(16px); }
html[data-v2] .v2-ia-sw input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
html[data-v2] .v2-ia-sw input:disabled + i { opacity: .5; cursor: default; }
html[data-v2] .v2-ia-sw span { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 68px; }
html[data-v2] .v2-ia-sw input:checked ~ span { color: var(--ok); }
html[data-v2] .v2-ia-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
html[data-v2] .v2-ia-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--gold-soft); color: var(--gold-ink); flex-shrink: 0; }
html[data-v2] .v2-ia-prov .v2-card-h { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
html[data-v2] .v2-ia-prov .v2-field { min-width: 0; }
html[data-v2] .v2-ia-prov .v2-field + form .v2-field, html[data-v2] .v2-ia-prov form .v2-field { margin-top: 16px; }
html[data-v2] .v2-ia-prov .v2-field > label { margin: 0 0 8px; font-weight: 500; }
html[data-v2] .v2-ia-prov .v2-input { padding: 0 12px; }
html[data-v2] .v2-ia-prov .v2-input select { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
html[data-v2] .v2-ia-prov .v2-input select:disabled { cursor: not-allowed; opacity: .55; }
html[data-v2] .v2-ia-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
html[data-v2] .iaConvStatusPill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 600; font-family: inherit; text-transform: none; letter-spacing: 0; }
html[data-v2] .iaConvStatusPill.configurada { background: var(--ok-soft); color: var(--ok); }
html[data-v2] .iaConvStatusPill.pendente { background: var(--crit-soft); color: var(--crit); }

/* ======================= API (cadastros/api_v3.php + api_v3.js): reveste as classes api3-*; marcação e JS ficam como estão ======================= */
html[data-v2] #api3Raiz { font-size: 13.5px; }
html[data-v2] #api3Raiz .sec { color: var(--muted); }
html[data-v2] #api3Raiz code { background: var(--line-2); color: var(--ink-2); border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, Menlo, Consolas, monospace; }
html[data-v2] #api3Raiz h4, html[data-v2] #api3Raiz h5 { font-family: var(--f-display); }
html[data-v2] #api3Raiz .api3-intro h4 { font-weight: 600; letter-spacing: -.01em; }
html[data-v2] #api3Raiz .api3-intro a, html[data-v2] #api3Raiz a.api3-ref { color: var(--gold-ink); }
/* abas */
html[data-v2] #api3Raiz .api3-abas { gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 var(--gap); }
html[data-v2] #api3Raiz .api3-aba { height: 40px; padding: 0 14px; font-size: 13.5px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; }
html[data-v2] #api3Raiz .api3-aba:hover { color: var(--ink); }
html[data-v2] #api3Raiz .api3-aba.ativa { color: var(--ink); font-weight: 500; border-bottom-color: var(--gold); }
/* avisos */
html[data-v2] #api3Raiz .api3-aviso { border-radius: var(--r-sm); }
html[data-v2] #api3Raiz .api3-aviso.ok { background: var(--ok-soft); color: var(--ok); }
html[data-v2] #api3Raiz .api3-aviso.erro { background: var(--crit-soft); color: var(--crit); }
/* tabelas */
html[data-v2] #api3Raiz .api3-tabela-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow-x: auto; }
html[data-v2] #api3Raiz .api3-tab { font-size: 13px; }
html[data-v2] #api3Raiz .api3-tab th { background: transparent; color: var(--subtle); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; padding: 12px var(--pad); border-bottom: 1px solid var(--line); }
html[data-v2] #api3Raiz .api3-tab td { padding: 10px var(--pad); border-top: 0; border-bottom: 1px solid var(--line-2); color: var(--ink); }
html[data-v2] #api3Raiz .api3-tab tr:last-child td { border-bottom: 0; }
html[data-v2] #api3Raiz .api3-tab tbody tr:hover td { background: var(--hover); }
html[data-v2] #api3Raiz .api3-vazio { color: var(--subtle); padding: 28px var(--pad); }
/* pílulas */
html[data-v2] #api3Raiz .api3-status { background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: 12px; }
html[data-v2] #api3Raiz .api3-status.revogado, html[data-v2] #api3Raiz .api3-status.vencido { background: var(--line-2); color: var(--muted); }
html[data-v2] #api3Raiz .api3-escopo { background: var(--line-2); color: var(--ink-2); border-radius: 12px; padding: 2px 9px; }
html[data-v2] #api3Raiz .api3-tag { background: var(--warn-soft); color: var(--warn); font-weight: 600; border-radius: 10px; }
html[data-v2] #api3Raiz .api3-metodo { border-radius: 6px; color: #fff; }
html[data-v2] #api3Raiz .api3-metodo.GET { background: var(--ok); } html[data-v2] #api3Raiz .api3-metodo.POST { background: var(--info); }
html[data-v2] #api3Raiz .api3-metodo.DELETE { background: var(--crit); } html[data-v2] #api3Raiz .api3-metodo.PUT, html[data-v2] #api3Raiz .api3-metodo.PATCH { background: var(--warn); }
html[data-v2] #api3Raiz .api3-http { border-radius: 6px; } html[data-v2] #api3Raiz .api3-http.ok { background: var(--ok); } html[data-v2] #api3Raiz .api3-http.aviso { background: var(--warn); } html[data-v2] #api3Raiz .api3-http.erro { background: var(--crit); }
html[data-v2] #api3Raiz .api3-obrig { color: var(--crit); }
/* formulários e cartões */
html[data-v2] #api3Raiz .api3-form, html[data-v2] #api3Raiz .api3-cartao, html[data-v2] #api3Raiz .api3-lateral { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); color: var(--ink); }
html[data-v2] #api3Raiz .api3-form { padding: var(--pad); }
html[data-v2] #api3Raiz .api3-cartao { padding: var(--pad); }
html[data-v2] #api3Raiz .api3-cartao h5, html[data-v2] #api3Raiz .api3-detalhe h5, html[data-v2] #api3Raiz h5 { color: var(--subtle); letter-spacing: .06em; }
html[data-v2] #api3Raiz .api3-form label.l, html[data-v2] #api3Raiz .api3-linha label { color: var(--muted); font-weight: 500; }
html[data-v2] #api3Raiz .api3-form input[type=text], html[data-v2] #api3Raiz .api3-form input[type=number], html[data-v2] #api3Raiz .api3-form input[type=date],
html[data-v2] #api3Raiz .api3-linha input[type=text], html[data-v2] #api3Raiz .api3-linha input[type=password], html[data-v2] #api3Raiz .api3-linha input[type=file],
html[data-v2] #api3Raiz #api3Testador select, html[data-v2] #api3Raiz #api3Testador textarea, html[data-v2] #api3Raiz .api3-lateral input, html[data-v2] #api3Raiz .api3-topo-teste input, html[data-v2] #api3Raiz .api3-topo-teste select {
    height: 38px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; font-family: inherit; font-size: 13.5px;
}
html[data-v2] #api3Raiz #api3Testador textarea { height: auto; min-height: 150px; padding: 10px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
html[data-v2] #api3Raiz .api3-form input:focus, html[data-v2] #api3Raiz .api3-linha input:focus, html[data-v2] #api3Raiz #api3Testador select:focus, html[data-v2] #api3Raiz #api3Testador textarea:focus, html[data-v2] #api3Raiz .api3-lateral input:focus {
    outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
html[data-v2] #api3Raiz .api3-check { color: var(--ink-2); }
html[data-v2] #api3Raiz .api3-check span { color: var(--muted); }
html[data-v2] #api3Raiz .api3-check input[type=checkbox] { accent-color: var(--gold); }
html[data-v2] #api3Raiz .api3-segredo { background: var(--warn-soft); border: 1px solid transparent; border-radius: var(--r); color: var(--ink); }
html[data-v2] #api3Raiz .api3-segredo code { background: var(--card); color: var(--ink); }
/* documentação */
html[data-v2] #api3Raiz .api3-lateral { overflow-y: auto; }
html[data-v2] #api3Raiz .api3-lateral input { width: calc(100% - 16px); margin: 8px; height: 34px; }
html[data-v2] #api3Raiz .api3-grupo { color: var(--subtle); }
html[data-v2] #api3Raiz .api3-item { border-left-width: 3px; }
html[data-v2] #api3Raiz .api3-item:hover { background: var(--hover); }
html[data-v2] #api3Raiz .api3-item.ativo { background: var(--gold-soft); border-left-color: var(--gold); }
html[data-v2] #api3Raiz .api3-pre, html[data-v2] #api3Raiz #api3RespCorpo, html[data-v2] #api3Raiz #api3CodigoSaida { background: var(--side); color: #e6edf3; border-radius: var(--r); }
html[data-v2] #api3Raiz #api3RespHeaders { background: var(--line-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
/* botões da aba: ação principal em dourado, como no resto da interface v2 */
html[data-v2] #api3Raiz .btn.btn-success { background: var(--gold); border-color: var(--gold); color: #fff; }
html[data-v2] #api3Raiz .btn.btn-success:hover { background: #a6781f; filter: none; }
html[data-v2] #api3Raiz .api3-acoes .btn { margin: 0; }

/* Webchat (cadastros/cadastro_integracao_webchat_view.php): conexões em cartões */
html[data-v2] .v2-wc-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
html[data-v2] .v2-wc-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--ok-soft); color: var(--ok); flex-shrink: 0; }
html[data-v2] .v2-wc-card .v2-card-h h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html[data-v2] .v2-wc-url { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-v2] .v2-wc-tk { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
html[data-v2] .v2-wc-tkv { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html[data-v2] .v2-wc-card .v2-rowacts { display: inline-flex; gap: 2px; }
html[data-v2] .v2-wc-card .v2-rowacts .v2-ibtn { width: 32px; height: 32px; }

/* ======================= Relatórios: linha de KPIs (azUiV2Kpis em ui_v2.php) ======================= */
html[data-v2] .v2-rel-kpis { margin: 0 0 var(--gap); }
html[data-v2] .v2-rel-kpis .v2-kpi .v2-k-v { font-size: 28px; }
@media (max-width: 1100px) { html[data-v2] .v2-rel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ======================= Dashboard no arranjo do kit (dashboard_callcenter.php, ramo v2: #v2Dcc) ======================= */
html[data-v2] .v2-dcc .v2-page-h { position: relative; }
html[data-v2] .v2-dcc .dcc-avisos { color: var(--muted); font-size: inherit; margin: 0; }
html[data-v2] .v2-dcc .v2-seg button { background: transparent; color: var(--muted); }
html[data-v2] .v2-dcc .v2-seg button.btn-info { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
html[data-v2] .v2-dcc .v2-acts > .v2-btn.btn-info { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
html[data-v2] .v2-dcc .v2-dcc-pers { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-v2] .v2-dcc .v2-dcc-pers .v2-input { min-width: 0; flex: 0 0 auto; width: 160px; }
html[data-v2] .v2-dcc .v2-dcc-pers[style*="display: none"] { display: none !important; }
html[data-v2] .v2-dcc .v2-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html[data-v2] .v2-dcc .v2-kpi .v2-k-v { font-size: 32px; }
html[data-v2] .v2-dcc #kpi-perdidas { color: var(--crit); }
html[data-v2] .v2-dcc #kpi-chamadas-curso { color: var(--info); }
html[data-v2] .v2-dcc .v2-k-sub { font-size: 16px; font-weight: 500; color: var(--subtle); margin-left: 4px; }
html[data-v2] .v2-dcc .v2-mini { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html[data-v2] .v2-dcc .v2-mini .v2-card { padding: 14px var(--pad); box-shadow: var(--shadow); }
html[data-v2] .v2-dcc .v2-tbl th { padding: 0 var(--pad) 10px; border-bottom: 1px solid var(--line); text-align: left; }
html[data-v2] .v2-dcc .v2-tbl td { padding: 0 var(--pad); height: 52px; text-align: left; vertical-align: middle; }
html[data-v2] .v2-dcc .dcc-tabela-filas td:nth-child(n+3), html[data-v2] .v2-dcc .dcc-tabela-filas th:nth-child(n+3) { text-align: right; }
html[data-v2] .v2-dcc .dcc-tabela-agentes td:first-child { display: flex; align-items: center; gap: 10px; }
html[data-v2] .v2-dcc .dcc-tabela-agentes img { width: 34px; height: 34px; margin: 0; flex-shrink: 0; }
html[data-v2] .v2-dcc .dcc-cliente-nome { font-weight: 500; display: block; }
html[data-v2] .v2-dcc .dcc-cliente-telefone { display: block; font-size: 12px; }
html[data-v2] .v2-dcc [hidden] { display: none !important; }
@media (max-width: 1280px) { html[data-v2] .v2-dcc .v2-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-v2] .v2-dcc .v2-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { html[data-v2] .v2-dcc .v2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-v2] .v2-dcc .v2-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================= Paginação e seleções em dourado sólido: texto sempre branco ======================= */
/* DataTables em formato Bootstrap (ul.pagination > li.paginate_button > a): o <li> não é o botão, o <a> é. O estilo de botão do
   .paginate_button (para o formato <a class="paginate_button">) deixava o <li> como uma segunda caixa em volta do número. */
html[data-v2] .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button {
    display: inline-block; min-width: 0; height: auto; padding: 0; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none; color: inherit !important;
}
html[data-v2] .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button > a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; line-height: 1; padding: 0 12px; margin: 0 2px;
    border: 1px solid var(--line); border-radius: var(--r-sm) !important; background: var(--card); color: var(--ink-2); text-transform: none; font-size: 12.5px; font-weight: 500; box-shadow: none;
}
html[data-v2] .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button > a:hover { background: var(--hover); color: var(--ink); }
html[data-v2] .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.disabled > a { opacity: .45; cursor: default; background: var(--card); color: var(--ink-2); }
/* a página atual: fundo dourado e número branco (em qualquer formato de paginação e em qualquer estado: normal, foco, passar o mouse) */
html[data-v2] .pagination > .active > a, html[data-v2] .pagination > .active > a:hover, html[data-v2] .pagination > .active > a:focus, html[data-v2] .pagination > .active > a:active,
html[data-v2] .pagination > .active > span, html[data-v2] .pagination > .active > span:hover, html[data-v2] .pagination > .active > span:focus,
html[data-v2] .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.active > a,
html[data-v2] .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.active > a:hover,
html[data-v2] .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.active > a:focus,
html[data-v2] .dataTables_wrapper .dataTables_paginate a.paginate_button.current, html[data-v2] .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
html[data-v2] .dataTables_wrapper .dataTables_paginate span.paginate_button.current {
    background: var(--gold) !important; border-color: var(--gold) !important; color: #fff !important; box-shadow: none !important; opacity: 1;
}
/* seletores de data e período: dia/mês/hora escolhido em dourado, número branco */
html[data-v2] .bootstrap-datetimepicker-widget table td.active, html[data-v2] .bootstrap-datetimepicker-widget table td.active:hover,
html[data-v2] .bootstrap-datetimepicker-widget table td.active > div, html[data-v2] .bootstrap-datetimepicker-widget table td span.active,
html[data-v2] .bootstrap-datetimepicker-widget table td span.active:hover { color: #fff !important; }
html[data-v2] .daterangepicker td.active, html[data-v2] .daterangepicker td.active:hover, html[data-v2] .daterangepicker .ranges li.active,
html[data-v2] .daterangepicker .drp-buttons .btn-primary, html[data-v2] .daterangepicker .applyBtn { color: #fff !important; }
html[data-v2] .page-item.active .page-link, html[data-v2] .page-item.active .page-link:hover, html[data-v2] .page-item.active .page-link:focus { background: var(--gold) !important; border-color: var(--gold) !important; color: #fff !important; }

/* ======================= Tela de login: slider de 3 slides (ui_v2_login_art.php) ======================= */
.v2-login-art.v2-slides { padding: 0; display: block; background: #16181b; }
.v2-slides .v2-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .9s ease; display: flex; align-items: flex-end; }
.v2-slides .v2-slide.on { opacity: 1; z-index: 1; }
.v2-slides .v2-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 15, .55) 0%, rgba(10, 12, 15, .05) 32%, rgba(10, 12, 15, .35) 58%, rgba(10, 12, 15, .88) 100%); }
.v2-slides .v2-slide-txt { position: relative; padding: 0 8vw 96px; max-width: 760px; transform: translateY(10px); transition: transform .9s ease; }
.v2-slides .v2-slide.on .v2-slide-txt { transform: none; }
.v2-slides .v2-slide-txt h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px; color: #fff !important; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.v2-slides .v2-slide-txt p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.5; max-width: 520px; }
.v2-slides .v2-slides-logo { position: absolute; z-index: 2; top: 40px; left: 8vw; width: min(200px, 40%); height: auto; margin: 0; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .35)); }
.v2-slides .v2-slides-dots { position: absolute; z-index: 2; left: 8vw; bottom: 44px; display: flex; gap: 8px; }
.v2-slides .v2-slides-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .3s, background .3s; }
.v2-slides .v2-slides-dots button.on { width: 34px; background: var(--gold-2, #d4a24c); }
.v2-slides .v2-slides-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .v2-slides .v2-slide, .v2-slides .v2-slide-txt { transition: none; } }

/* Whitelabel: editor dos 3 slides da tela de login */
html[data-v2] .v2-ls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
html[data-v2] .v2-ls-it { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
html[data-v2] .v2-ls-img { position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--line-2); }
html[data-v2] .v2-ls-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-v2] .v2-ls-badge { position: absolute; top: 8px; left: 8px; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; }
html[data-v2] .v2-ls-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; }
html[data-v2] .v2-ls-load[hidden], html[data-v2] .v2-ls-badge[hidden], html[data-v2] .v2-ls-ia[hidden] { display: none; }
html[data-v2] .v2-ls-load .v2-msr { animation: v2-ls-gira 1s linear infinite; }
@keyframes v2-ls-gira { to { transform: rotate(360deg); } }
html[data-v2] .v2-ls-it textarea { width: 100%; border: 0; background: transparent; resize: vertical; font: inherit; color: inherit; outline: 0; padding: 8px 0; }
html[data-v2] .v2-ls-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
html[data-v2] .v2-ls-acoes .v2-btn.off { opacity: .55; pointer-events: none; }
html[data-v2] .v2-ls-ia { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: var(--gap); border-radius: var(--r); background: var(--line-2); font-size: 12.5px; }
html[data-v2] .v2-ls-ia a { color: var(--gold); text-decoration: underline; }
html[data-v2] .v2-wlp-lart { background-size: cover; background-position: center; }
@media (max-width: 900px) { html[data-v2] .v2-ls-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html[data-v2] .v2-ls-load .v2-msr { animation: none; } }

/* ======================= Whitelabel: responsividade dos slides de login e dos blocos (campos estouravam a coluna por causa do min-width do .v2-input) ======================= */
html[data-v2] .v2-ls-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
html[data-v2] .v2-ls-it .v2-field { min-width: 0; }
html[data-v2] .v2-ls-it .v2-input { min-width: 0; width: 100%; max-width: none; height: auto; min-height: 38px; align-items: flex-start; box-sizing: border-box; }
html[data-v2] .v2-ls-it .v2-input input { min-width: 0; width: 100%; height: 36px; }
html[data-v2] .v2-ls-it textarea { display: block; box-sizing: border-box; min-height: 64px; padding: 8px 0; }
html[data-v2] .v2-ls-acoes .v2-btn { flex: 0 1 auto; }
html[data-v2] .v2-ls .v2-tfoot { flex-wrap: wrap; row-gap: 10px; }
html[data-v2] .v2-ls .v2-card-h { row-gap: 2px; }
html[data-v2] .v2-wl .v2-input { min-width: 0; }
html[data-v2] .v2-wl-up, html[data-v2] .v2-wl-row { flex-wrap: wrap; }
@media (max-width: 1280px) { html[data-v2] .v2-wl .v2-wl-grid { grid-template-columns: 1fr; } html[data-v2] .v2-wl-pv { position: static; } }
@media (max-width: 720px) { html[data-v2] .v2-ls-acoes .v2-btn.sm { flex: 1 1 auto; justify-content: center; } html[data-v2] .v2-ls .v2-tfoot > div { margin-left: 0 !important; width: 100%; } html[data-v2] .v2-ls #v2LsSalvar { width: 100%; justify-content: center; } }

/* Dashboard: cartões de KPI alinhados (rótulo com 2 linhas reservadas) + minigráfico/nota */
html[data-v2] .v2-dcc .v2-kpi .v2-k-l { min-height: 44px; align-items: center; }
html[data-v2] .v2-dcc .v2-kpi .v2-k-spark { margin: 10px -4px 0; }
html[data-v2] .v2-dcc .v2-kpi .v2-k-f { min-height: 32px; }

/* ======================= CRM (kit Opção C): cabeçalho com atalhos + base visual ======================= */
html[data-v2] .v2-orig-act { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
html[data-v2] #v2CrmHead[hidden], html[data-v2] #v2CrmHead [hidden] { display: none !important; }
html[data-v2] #v2CrmHead + .row, html[data-v2] #v2CrmHead + .row > [class*="col-"] { margin-top: 0; }
html[data-v2] .main-panel > .content > .container-fluid > .row { margin-left: 0; margin-right: 0; }
/* CRM > Clientes */
html[data-v2] #clTabelaBody td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
html[data-v2] #clTabelaBody td:last-child, html[data-v2] .table > thead > tr > th.text-center:last-child { text-align: right; white-space: nowrap; }
html[data-v2] #clTabelaBody .v2-ibtn { width: 32px; height: 32px; }
html[data-v2] #clTabelaBody .v2-ibtn .v2-msr { font-size: 19px; }
html[data-v2] #clTabelaBody .v2-ibtn[title^="Excluir"] { color: var(--crit); }
html[data-v2] #clTabelaBody .v2-ibtn[title="Bloquear"] { color: var(--warn); }
html[data-v2] #clTabelaBody .v2-ibtn[title="Reativar"] { color: var(--ok); }
html[data-v2] #clBtnFiltrar { height: 38px; }

/* CRM > Kanban (crm_kanban.css: crmk-*) */
html[data-v2] .crmk-toolbar { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow); padding: 14px var(--pad); margin-bottom: 0; align-items: flex-end; }
html[data-v2] .crmk-field label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; margin-bottom: 5px; }
html[data-v2] .crmk-toolbar select, html[data-v2] .crmk-toolbar input { height: 38px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: 13.5px; }
html[data-v2] .crmk-visoes { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 var(--gap); background: var(--line-2); border: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); }
html[data-v2] .crmk-visoes button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; border-bottom: 0; }
html[data-v2] .crmk-visoes button .material-icons { font-size: 16px; }
html[data-v2] .crmk-visoes button.ativa { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); border: 0; }
html[data-v2] .crmk-col { background: var(--line-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
html[data-v2] .crmk-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
html[data-v2] .crmk-nome { font-family: var(--f-body); }

/* CRM > Dashboard: período como controle segmentado do kit */
html[data-v2] .crm-dash-periodo { display: inline-flex; gap: 2px; padding: 3px; background: var(--line-2); border: 1px solid var(--line); border-radius: var(--r-sm); margin-right: 10px; vertical-align: middle; }
html[data-v2] .crm-dash-periodo .btn { background: transparent !important; border-color: transparent !important; color: var(--muted) !important; margin: 0 !important; height: 30px; padding: 0 12px; box-shadow: none; font-size: 12.5px; }
html[data-v2] .crm-dash-periodo .btn.btn-info { background: var(--card) !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
html[data-v2] .crmkpi-card.card { padding: 18px 12px; }
html[data-v2] .crmkpi-valor { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--ink); }
html[data-v2] .crmkpi-label { color: var(--muted); font-size: 12.5px; }
html[data-v2] .crm-dash-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; background: none; border: 0; margin: 0 0 16px; }
html[data-v2] .crm-dash-periodo .btn { border: 1px solid var(--line) !important; background: var(--card) !important; border-radius: 16px; height: 32px; }
html[data-v2] .crm-dash-periodo .btn.btn-info { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; box-shadow: none; }

/* ======================= URA IA (lista de workflows / relatório) e Ligações de Entrada no formato do kit ======================= */
/* lista de workflows: o cabeçalho do card vira o cabeçalho da página (azcall-v2-ura.js) */
html[data-v2] #frmUraIa .card > .card-header-icon, html[data-v2] #frmUraIa .card-title, html[data-v2] #frmUraIa .card-content > p:first-of-type { display: none; }
html[data-v2] #frmUraIa .dt-buttons { display: none; }
html[data-v2] #frmUraIa .content { padding: 0; }
html[data-v2] #frmUraIa .content > .container-fluid { padding: 0; }
html[data-v2] #frmUraIa .card { margin-top: 0; }
html[data-v2] #TabelaUraIaWorkflows td { text-align: left !important; vertical-align: middle; }
html[data-v2] #TabelaUraIaWorkflows td:last-child { text-align: right !important; white-space: nowrap; }
html[data-v2] #TabelaUraIaWorkflows th { text-align: left !important; text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
html[data-v2] #TabelaUraIaWorkflows th:last-child { text-align: right !important; }
html[data-v2] #TabelaUraIaWorkflows td:first-child { font-weight: 600; color: var(--ink); }
html[data-v2] #TabelaUraIaWorkflows .v2-ibtn { display: inline-flex; margin: 0 1px; padding: 0; min-width: 38px; }
html[data-v2] #TabelaUraIaWorkflows .v2-ibtn .material-icons { font-size: 20px; margin: 0; }
html[data-v2] #TabelaUraIaWorkflows .v2-ibtn.crit { color: var(--crit); }
html[data-v2] #TabelaUraIaWorkflows .v2-pill { vertical-align: middle; }
html[data-v2] #v2UraKpis { margin-bottom: var(--gap); }

/* relatório URA IA: cartões de total sólidos, como no kit (o tema antigo usava borda lateral) */
html[data-v2] #v2UraRelHead + .row, html[data-v2] #v2UraRelHead { margin-bottom: 16px; }
html[data-v2] #v2UraRelHead ~ .row .card .card-title:first-child, html[data-v2] #v2UraRelHead ~ .row .card .card-title:first-child + p { display: none; }
html[data-v2] .uraIaCard { background: var(--cat-bg, #546e7a) !important; color: #fff !important; border: 0; box-shadow: var(--shadow); }
html[data-v2] .uraIaCard.total { --cat-bg: #546e7a; }
html[data-v2] .uraIaCard.finalizado { --cat-bg: #2e9d58; }
html[data-v2] .uraIaCard.transferido { --cat-bg: #2f6fd6; }
html[data-v2] .uraIaCard.erro { --cat-bg: #d9443a; }
html[data-v2] .uraIaCard.abandonado { --cat-bg: #e08a1e; }
html[data-v2] .uraIaCard.custo { --cat-bg: #7b4bc4; }
html[data-v2] .uraIaCard .uraIaCardNumero { color: #fff !important; }
html[data-v2] .uraIaCard .uraIaCardLabel { color: rgba(255, 255, 255, .85) !important; text-transform: uppercase; letter-spacing: .03em; font-size: 11.5px; }

/* Ligações de entrada: a barra de abas some (cada aba é um item do menu); entra o cabeçalho de página */
html[data-v2] .inb-tabs, html[data-v2] .inb-titulo { display: none !important; }
html[data-v2] #v2InbHead { margin-top: 2px; }
html[data-v2] #v2UraRelHead ~ .row #uraIaBtnExportarPdf { display: none; }
html[data-v2] .uraIaCard.custo .uraIaCardNumero { font-size: 22px; }

/* painéis laterais (formulários de Ligações de Entrada): largura até 560px, cabeçalho enxuto, entrando pela direita */
html[data-v2] .modal.v2-sidepanel .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; margin: 0; width: min(560px, 100%); max-width: 100%; transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); display: flex; }
html[data-v2] .modal.v2-sidepanel.in .modal-dialog { transform: none; }
html[data-v2] .modal.v2-sidepanel .modal-content { flex: 1; display: flex; flex-direction: column; border-radius: var(--r-lg) 0 0 var(--r-lg); max-height: 100%; overflow: hidden; }
html[data-v2] .modal.v2-sidepanel .modal-body { flex: 1; overflow-y: auto; }
html[data-v2] .modal.v2-sidepanel form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html[data-v2] .modal.v2-sidepanel .modal-header { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
html[data-v2] .modal.v2-sidepanel .modal-header .modal-title { font-family: var(--f-display); font-weight: 600; font-size: 17px; margin: 0; flex: 1; }
html[data-v2] .modal.v2-sidepanel .modal-footer { border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* calendário do Kanban (FullCalendar): texto branco sobre a cor do evento */
html[data-v2] .fc-event, html[data-v2] .fc-event .fc-title, html[data-v2] .fc-event .fc-time, html[data-v2] .fc-event .fc-content, html[data-v2] a.fc-event, html[data-v2] .fc-event * { color: #fff !important; }

/* relatórios: tabela larga rola na horizontal em vez de cortar colunas (ex.: com o submenu aberto); botões de áudio lado a lado */
html[data-v2] #Page .material-datatables, html[data-v2] #Page .table-responsive { overflow-x: auto; }
html[data-v2] td.td-actions .col-md-6 { float: none; width: auto; display: inline-block; padding: 0 2px; }
html[data-v2] td.td-actions { white-space: nowrap; min-width: 110px; }
html[data-v2] audio.v2-inline-audio { display: block; width: 220px; height: 34px; margin-top: 6px; }

/* abas com muitos itens (Configurações PABX): quebram em mais de uma linha em vez de cortar as últimas (ElevenLabs, IA Conversacional, API) */
html[data-v2] .ia-nav-tabs .nav-tabs { flex-wrap: wrap; overflow: visible; }
html[data-v2] .ia-nav-tabs .nav-tabs .nav-item { flex: 0 0 auto; }
html[data-v2] .v2-pbx #menuLateral { flex-wrap: wrap; overflow: visible; }

/* gráficos Highcharts na v2: o tema escuro antigo (dark-mode.css) pintava fundo azul e grades; aqui valem os tokens do tema */
html[data-v2] .highcharts-container .highcharts-background, html[data-v2] .highcharts-container .highcharts-plot-background { fill: transparent; }
html[data-v2] .highcharts-container .highcharts-grid-line { stroke: var(--line-2); }
html[data-v2] .highcharts-container .highcharts-xaxis-grid .highcharts-grid-line { stroke-width: 0; }
html[data-v2] .highcharts-container .highcharts-axis-line, html[data-v2] .highcharts-container .highcharts-tick { stroke: var(--line); }
html[data-v2] .highcharts-container .highcharts-axis-labels text, html[data-v2] .highcharts-container .highcharts-axis-title, html[data-v2] .highcharts-container .highcharts-legend-item text { fill: var(--muted) !important; color: var(--muted) !important; }
html[data-v2] .highcharts-container .highcharts-tooltip-box { fill: var(--card); stroke: var(--line); }
html[data-v2] .highcharts-container .highcharts-tooltip text { fill: var(--ink) !important; }
html[data-v2] .v2-dcc .v2-kpi .v2-k-v.v2-k-txt { font-size: 18px; line-height: 1.2; align-self: center; white-space: nowrap; }
html[data-v2] .v2-dcc .v2-k-row { min-height: 40px; align-items: center !important; }

/* rodapé do menu: "● Ramal 1000 registrado" (situação do softphone) */
html[data-v2] .v2-foot-ramal { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
html[data-v2] .v2-foot-ramal i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
html[data-v2] .v2-foot-ramal b, html[data-v2] .v2-foot-ramal em { font-style: normal; font-weight: 600; }
html[data-v2] .v2-foot-ramal.ok { color: var(--ok); } html[data-v2] .v2-foot-ramal.ok i { background: var(--ok); }
html[data-v2] .v2-foot-ramal.warn { color: var(--warn); } html[data-v2] .v2-foot-ramal.warn i { background: var(--warn); }
html[data-v2] .v2-foot-ramal.crit { color: var(--crit); } html[data-v2] .v2-foot-ramal.crit i { background: var(--crit); }

/* ======================= Perguntar à IA (botão da barra superior + painel lateral) ======================= */
html[data-v2] .navbar-collapse > .navbar-nav > li.v2-ai-li { display: flex; align-items: center; }
html[data-v2] .v2-ai-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--gold-line, rgba(184, 134, 43, .45)); background: var(--gold-soft); color: var(--gold-ink); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
html[data-v2] .v2-ai-btn:hover { background: var(--hover); }
html[data-v2] .v2-ai-btn .v2-msr { font-variation-settings: 'FILL' 1; }
html[data-v2] .v2-ia-bg { position: fixed; inset: 0; z-index: 1070; background: rgba(15, 17, 20, .35); animation: v2IaFade .18s ease; }
html[data-v2] .v2-ia-panel { position: fixed; z-index: 1071; top: 16px; right: 16px; bottom: 16px; width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-pop, 0 24px 60px rgba(0, 0, 0, .28)); animation: v2IaIn .25s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
@keyframes v2IaIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes v2IaFade { from { opacity: 0; } to { opacity: 1; } }
html[data-v2] .v2-ia-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
html[data-v2] .v2-ia-h h3 { flex: 1; margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 600; }
html[data-v2] .v2-ia-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--gold); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
html[data-v2] .v2-ia-ic.sm { width: 26px; height: 26px; border-radius: 8px; }
html[data-v2] .v2-ia-ic .v2-msr { font-variation-settings: 'FILL' 1; }
html[data-v2] .v2-ia-aviso { padding: 10px 20px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }
html[data-v2] .v2-ia-aviso a { color: inherit; font-weight: 600; text-decoration: underline; }
html[data-v2] .v2-ia-msgs { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
html[data-v2] .v2-ia-m { display: flex; gap: 10px; max-width: 100%; font-size: 14.5px; line-height: 1.5; }
html[data-v2] .v2-ia-m.me { justify-content: flex-end; }
html[data-v2] .v2-ia-m.me > div { background: var(--gold-soft); color: var(--ink); border-radius: 16px 16px 4px 16px; padding: 10px 14px; max-width: 85%; }
html[data-v2] .v2-ia-m.ai > div { padding-top: 2px; min-width: 0; overflow-wrap: anywhere; }
html[data-v2] .v2-ia-m .li { display: block; padding-left: 14px; position: relative; }
html[data-v2] .v2-ia-m .li::before { content: '•'; position: absolute; left: 2px; color: var(--gold); }
html[data-v2] .v2-ia-sugs { display: grid; gap: 8px; margin-top: 4px; }
html[data-v2] .v2-ia-sugs button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink-2); font-size: 13.5px; cursor: pointer; }
html[data-v2] .v2-ia-sugs button:hover { background: var(--hover); }
html[data-v2] .v2-ia-sugs .v2-msr { color: var(--gold); }
html[data-v2] .v2-ia-clear { align-self: center; border: 0; background: none; color: var(--subtle); font-size: 12.5px; cursor: pointer; text-decoration: underline; }
html[data-v2] .v2-ia-typing { display: inline-flex; gap: 4px; padding-top: 8px; }
html[data-v2] .v2-ia-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--subtle); animation: v2IaDot 1s infinite ease-in-out; }
html[data-v2] .v2-ia-typing i:nth-child(2) { animation-delay: .15s; } html[data-v2] .v2-ia-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes v2IaDot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
html[data-v2] .v2-ia-comp { display: flex; align-items: center; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
html[data-v2] .v2-ia-comp input { flex: 1; height: 44px; border: 1px solid var(--gold); border-radius: 22px; padding: 0 18px; background: var(--card); color: var(--ink); font-size: 14px; outline: 0; }
html[data-v2] .v2-ia-send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--gold); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
@media (max-width: 640px) { html[data-v2] .v2-ia-panel { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); } }

/* tela de login: contato de suporte e rodapé personalizados (Administração > Configurações > Tela de login) */
.v2-login-foot { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.v2-login-foot a, .v2-login-foot > span { display: inline-block; font-weight: 600; color: var(--gold-ink); }
.v2-login-foot p { margin: 6px 0 0; font-size: 11.5px; color: var(--subtle); }
html[data-v2] .v2-ls-page .v2-card { max-width: 1100px; }