/* =====================================================================
   CXAuto — camada-ponte: aplica o visual WowDash aos componentes
   Bootstrap já usados nas telas, sem reescrever cada arquivo.
   Escopo em .dashboard-main-body para não afetar a casca (sidebar/topbar).
   ===================================================================== */

/* ---------- Tipografia: fonte Inter local (o tema pede "Inter" mas ela
   nunca era carregada — o sistema caía na fonte padrão do navegador).
   Arquivo variável hospedado localmente (sem CDN, funciona em produção). ---------- */
@font-face {
    font-family: 'InterVar';
    font-style: normal;
    font-weight: 100 900;                 /* fonte variável: todos os pesos num arquivo */
    font-display: swap;                    /* mostra texto na hora, sem "flash invisível" */
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
}
/* O tema WowDash (style.css) referencia a família "Inter" em dezenas de regras e a
   importava do CDN do Google — o que quebra as fontes em produção sem internet.
   Registramos o MESMO arquivo local também sob o nome "Inter" para que toda regra
   font-family:"Inter" resolva localmente, sem depender de rede. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
}
/* Fonte principal do sistema: Manrope (variável, local) — mais leve e suave,
   dando personalidade ao produto sem depender de CDN. Inter fica de reserva. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope/manrope-latin.woff2') format('woff2');
}

/* IBM Plex Sans (local) — em teste. Boa legibilidade e numerais tabulares p/ tabelas. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-700.woff2') format('woff2'); }

/* Troque a 1ª família para testar a fonte do sistema (Manrope fica de reserva). */
:root { --cx-font: 'IBM Plex Sans', 'Manrope', 'InterVar', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

/* Numerais tabulares: alinham os números em tabelas, KPIs e valores. */
.table, table, .num, td, th,
.cx-kpi-value, .sy-kpi .n, .ce-kpi .n, .vp-table, .ac-table, .acd-table {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Aplica a fonte e melhora a renderização em todo o sistema. Peso base mais leve. */
body,
.sidebar, .dashboard-main, .dashboard-main-body,
.btn, .form-control, .form-select, .table, .card, .badge, .nav, .modal {
    font-family: var(--cx-font);
    -webkit-font-smoothing: antialiased;   /* texto mais nítido no Chrome/Safari */
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}
body, .dashboard-main-body { font-weight: 400; letter-spacing: .001em; }

/* Selo de ORIGEM dos dados (Linx / Auto Avaliar / Manual) — sinalização sutil. */
.cx-src { display:inline-flex; align-items:center; gap:5px; font-size:.66rem; font-weight:600; line-height:1;
    padding:2px 8px 2px 6px; border-radius:6px; white-space:nowrap; color:var(--c,#64748b); background:var(--b,#eef1f6);
    border:1px solid color-mix(in srgb, var(--c,#64748b) 22%, transparent); letter-spacing:.01em; }
.cx-src > i { width:6px; height:6px; border-radius:50%; background:var(--c,#64748b); flex:0 0 6px; }
.cx-src.dot { padding:0; width:9px; height:9px; border-radius:50%; background:var(--c,#64748b); border:0; }
.cx-src.dot > i, .cx-src.dot > span { display:none; }
:root[data-theme="dark"] .cx-src { background:color-mix(in srgb, var(--c,#64748b) 20%, #0e1728); }
/* Títulos: peso 600 (semibold) deixa a interface mais leve e elegante que o 700. */
.dashboard-main-body h1, .dashboard-main-body h2, .dashboard-main-body h3,
.dashboard-main-body h4, .dashboard-main-body h5, .dashboard-main-body h6,
.cx-topbar-title, .page-title { font-weight: 600; }

/* Espaçamento entre letras: títulos um pouco mais apertados (ar mais moderno). */
h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold { letter-spacing: -.012em; }

/* ---------- Escala de tamanhos dos títulos (mais harmônica e enxuta) ----------
   O padrão do Bootstrap deixa h1-h3 grandes demais para um painel; aqui a
   hierarquia fica clara sem ocupar espaço à toa. Escopo no corpo para não mexer
   na sidebar/topbar nem nas telas de login. Componentes com tamanho próprio
   (cards do Kanban, KPIs) continuam mandando, pois definem o font-size deles. */
.dashboard-main-body h1, .dashboard-main-body .h1 { font-size: 1.7rem;  line-height: 1.25; }
.dashboard-main-body h2, .dashboard-main-body .h2 { font-size: 1.42rem; line-height: 1.28; }
.dashboard-main-body h3, .dashboard-main-body .h3 { font-size: 1.2rem;  line-height: 1.3; }
.dashboard-main-body h4, .dashboard-main-body .h4 { font-size: 1.06rem; line-height: 1.35; }
.dashboard-main-body h5, .dashboard-main-body .h5 { font-size: .95rem;  line-height: 1.4; }
.dashboard-main-body h6, .dashboard-main-body .h6 { font-size: .85rem;  line-height: 1.45; }
/* Texto de apoio e legendas: um tom mais leve, sem perder legibilidade. */
.dashboard-main-body .text-secondary-light,
.dashboard-main-body small, .dashboard-main-body .small { font-weight: 400; }

/* Números alinhados por coluna nas tabelas e KPIs — dígitos de mesma largura,
   essencial nos muitos relatórios/quadros numéricos do sistema. */
.table td, .table th,
.cx-tr-table, .cx-rsg-kpi .num, .cx-cem-score, .font-monospace,
.fs-3, .fs-4, .fs-5 { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------- Afinar a Inter (legibilidade): ritmo de linha e distinção de
   caracteres onde há dados críticos (placas, códigos ATD, CPF/CNPJ, IDs). ----------
   line-height 1.7 é ótimo para texto corrido, mas deixa listas/tabelas densas
   "espaçadas demais"; apertamos só onde há muita informação. */
.dashboard-main-body { line-height: 1.6; }
.dashboard-main-body .table { line-height: 1.45; }
.dashboard-main-body .table td, .dashboard-main-body .table th { vertical-align: middle; }

/* Distinguir 0/O, 1/l/I com zero cortado — só em superfícies de dado, para não
   mudar a personalidade de títulos e textos. Reafirma 'tnum' p/ manter o alinhamento. */
.dashboard-main-body .table td, .dashboard-main-body .table th,
.dashboard-main-body .font-monospace, .dashboard-main-body code, .dashboard-main-body kbd,
.dashboard-main-body input, .dashboard-main-body .form-control, .dashboard-main-body .badge {
    font-feature-settings: 'tnum' 1, 'zero' 1, 'ss02' 1;
}

/* Acessibilidade: foco visível no teclado (o outline sumia em vários lugares).
   :focus-visible só aparece na navegação por teclado, não atrapalha o mouse. */
.dashboard-main-body a:focus-visible,
.dashboard-main-body .btn:focus-visible,
.dashboard-main-body .form-control:focus-visible,
.dashboard-main-body .form-select:focus-visible,
.sidebar a:focus-visible {
    outline: 2px solid var(--primary-600, #487FFF);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------- Botões da página na faixa do topo (@section('toolbar') + ('actions')) ----------
   Ficam ao lado do título, na faixa livre do cabeçalho. Como os filtros agora
   moram num modal (botão "Filtros"), sobram só botões compactos — cabe bem. */
.navbar-header { height: auto; min-height: 4.5rem; }   /* deixa o topo crescer se quebrar linha, sem encavalar */
.cx-topbar-tools {
    padding-left: .9rem; margin-left: .2rem;
    border-left: 1px solid rgba(0,0,0,.09);
}
:root[data-theme="dark"] .cx-topbar-tools { border-left-color: rgba(255,255,255,.12); }

/* Todos os controles do topo com a MESMA altura do avatar/tema (40px) e cantos
   arredondados, para um cluster coeso. */
.cx-topbar-tools .btn,
.cx-topbar-tools .form-select,
.cx-topbar-tools .form-control {
    height: 40px; border-radius: 11px; white-space: nowrap;
}
.cx-topbar-tools .form-select { min-width: 128px; }
.cx-topbar-tools .btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: 0 .95rem; font-weight: 500; font-size: .9rem;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.cx-topbar-tools .btn:active { transform: translateY(1px); }

/* Secundários (Filtros, Disponibilidade…): superfície suave e legível nos 2 temas
   — antes o btn-outline sumia no fundo escuro. */
.cx-topbar-tools .btn-outline-secondary,
.cx-topbar-tools .btn-outline-primary,
.cx-topbar-tools .btn-light {
    background: rgba(0,0,0,.045);
    border: 1px solid rgba(0,0,0,.11);
    color: var(--text-primary-light, #1f2937);
}
.cx-topbar-tools .btn-outline-secondary:hover,
.cx-topbar-tools .btn-outline-primary:hover,
.cx-topbar-tools .btn-light:hover {
    background: rgba(0,0,0,.075); border-color: rgba(0,0,0,.2);
    color: var(--text-primary-light, #111827);
}
:root[data-theme="dark"] .cx-topbar-tools .btn-outline-secondary,
:root[data-theme="dark"] .cx-topbar-tools .btn-outline-primary,
:root[data-theme="dark"] .cx-topbar-tools .btn-light {
    background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); color: #e5e7eb;
}
:root[data-theme="dark"] .cx-topbar-tools .btn-outline-secondary:hover,
:root[data-theme="dark"] .cx-topbar-tools .btn-outline-primary:hover,
:root[data-theme="dark"] .cx-topbar-tools .btn-light:hover {
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color: #fff;
}

/* Ação principal (Registrar recepção, Novo…): destaque com leve profundidade. */
.cx-topbar-tools .btn-primary { border: 0; box-shadow: 0 1px 2px rgba(72,127,255,.35); }
.cx-topbar-tools .btn-primary:hover { box-shadow: 0 4px 10px rgba(72,127,255,.42); transform: translateY(-1px); }

/* Contador dentro do "Filtros": pílula compacta e destacada. */
.cx-topbar-tools .btn .badge {
    font-weight: 700; font-size: .68rem; padding: .18em .5em; line-height: 1;
    min-width: 18px; text-align: center;
}

@media (max-width: 575.98px) {
    .cx-topbar-tools { padding-right: .5rem; border-right: 0; }
    .cx-topbar-tools .btn { padding: 0 .7rem; }
}

/* Container de resultados enquanto o filtro AJAX carrega: leve fade + trava cliques. */
.cx-filtering { opacity: .5; pointer-events: none; transition: opacity .12s ease; position: relative; }

/* ---------- Botão com estado de carregamento (spinner ao salvar/enviar) ----------
   O JS global (layout) marca .is-loading no submit. Evita o duplo-clique e
   mostra ao usuário que a ação está em andamento. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em;
    margin: -.5em 0 0 -.5em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    color: #fff; animation: cx-spin .6s linear infinite;
}
.btn-outline-secondary.is-loading::after, .btn-light.is-loading::after,
.btn-outline-primary.is-loading::after { color: var(--primary-600, #487FFF); }
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* ---------- Estado vazio padronizado (componente <x-empty>) ---------- */
.cx-empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-secondary-light); }
.cx-empty-state .ico {
    width: 60px; height: 60px; border-radius: 16px; margin: 0 auto .8rem;
    display: grid; place-items: center; font-size: 1.7rem;
    color: var(--primary-600, #487FFF);
    background: color-mix(in srgb, var(--primary-600, #487FFF) 10%, transparent);
}
.cx-empty-state .t { font-weight: 700; color: var(--text-primary-light); margin-bottom: .2rem; }
.cx-empty-state .d { font-size: .875rem; max-width: 380px; margin: 0 auto; }
.cx-empty-state .cx-actions { margin-top: 1rem; }

/* ---------- Consistência de espaçamento (cards e cabeçalhos) ---------- */
.dashboard-main-body .card { border-radius: 14px; }
.dashboard-main-body .card + .card { margin-top: 0; }
.dashboard-main-body .card-header { padding-block: .85rem; }

/* ---------- Refinos para telas pequenas (recepção/vendedores no celular) ---------- */
@media (max-width: 575.98px) {
    .dashboard-main-body { padding: .75rem !important; }
    .dashboard-main-body .card-body { padding: .9rem; }
    /* KPIs empilham de 2 em 2 e diminuem o número gigante */
    .dashboard-main-body .fs-3 { font-size: 1.4rem !important; }
    .cx-rsg-kpi .num, .cx-cem-score-lg { font-size: 1.35rem; }
    /* Filtros e barras de ação empilham em vez de espremer */
    .dashboard-main-body form .row.g-2 > [class*='col-'],
    .dashboard-main-body .cx-topbar-title .sub { }
    /* Botões de ação em bloco ocupam a largura toda (alvo de toque maior) */
    .dashboard-main-body .cx-crm-actions { width: 100%; }
    /* Tabelas largas: fonte um pouco menor para caber mais antes do scroll */
    .dashboard-main-body .table { font-size: .82rem; }
    .dashboard-main-body .table td, .dashboard-main-body .table th { padding: .45rem .5rem; }
    /* Título da topbar não precisa competir por espaço no celular */
    .cx-topbar-title { padding-left: .6rem; gap: .5rem; }
    .cx-topbar-title .cx-tt-ico { width: 36px; height: 36px; }
}

/* ---------- Barra de rolagem fina e discreta (sidebar + áreas com scroll) ---------- */
.sidebar, .sidebar-menu-area, .dashboard-main-body, .table-responsive, .cx-editor-area, .cx-kanban-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .5) transparent;
}
.sidebar::-webkit-scrollbar,
.sidebar-menu-area::-webkit-scrollbar,
.dashboard-main-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.cx-editor-area::-webkit-scrollbar,
.cx-kanban::-webkit-scrollbar,
.cx-kanban-body::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar::-webkit-scrollbar-track,
.sidebar-menu-area::-webkit-scrollbar-track,
.dashboard-main-body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.cx-editor-area::-webkit-scrollbar-track,
.cx-kanban::-webkit-scrollbar-track,
.cx-kanban-body::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb,
.sidebar-menu-area::-webkit-scrollbar-thumb,
.dashboard-main-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.cx-editor-area::-webkit-scrollbar-thumb,
.cx-kanban::-webkit-scrollbar-thumb,
.cx-kanban-body::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .45); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-menu-area::-webkit-scrollbar-thumb:hover,
.dashboard-main-body::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.cx-editor-area::-webkit-scrollbar-thumb:hover,
.cx-kanban-body::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .7); }

/* ---------- Barra lateral: só abre/fecha pelo botão (sem hover) ---------- */
/* Neutraliza o "expandir ao passar o mouse" do WowDash. A barra recolhida
   (.sidebar.active) permanece recolhida no hover — só o botão a expande. */
.sidebar.active:hover { width: 86px !important; }
@media (min-width: 1400px) { .sidebar.active:hover { width: 86px !important; } }
@media (min-width: 1650px) { .sidebar.active:hover { width: 86px !important; } }
.sidebar.active:hover .sidebar-logo img.light-logo { display: none !important; }
.sidebar.active:hover .sidebar-logo img.logo-icon { display: inline-block !important; }
.sidebar.active:hover .cx-logo-text { display: none !important; }
.sidebar.active:hover .sidebar-menu li a span { display: none !important; }
.sidebar.active:hover .sidebar-menu li a .menu-icon { margin-inline-end: 0 !important; }
.sidebar.active:hover .sidebar-menu li.dropdown.dropdown-open .sidebar-submenu,
.sidebar.active:hover .sidebar-menu li.dropdown.open .sidebar-submenu { display: none !important; }
.sidebar.active:hover .sidebar-menu li.sidebar-menu-group-title { display: none !important; }
.sidebar.active:hover .sidebar-menu li.dropdown a::after { display: none !important; }

/* ---------- Cabeçalho de página ---------- */
/* Vence o `h1 { font-size: var(--h1) !important }` do WowDash, que deixava o
   nome do módulo gigante. Tamanho enxuto e responsivo + espaçamento contido. */
.dashboard-main-body h1.page-title,
.dashboard-main-body .page-title {
    color: var(--text-primary-light);
    font-weight: 700;
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem) !important;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: .15rem;
}
.dashboard-main-body .page-title + p { font-size: .9rem; }

/* ---------- Cards ---------- */
.dashboard-main-body .card { border: 1px solid var(--neutral-200); border-radius: 12px; box-shadow: none; }
.dashboard-main-body .card > .card-header {
    background: var(--white); border-bottom: 1px solid var(--neutral-200);
    padding: 16px 24px; font-weight: 600; color: var(--text-primary-light);
}
.dashboard-main-body .card > .card-body { padding: 20px 24px; }
.dashboard-main-body .card > .card-footer { background: var(--white); border-top: 1px solid var(--neutral-200); padding: 16px 24px; }

/* ---------- Tabelas → visual bordered do WowDash ---------- */
.dashboard-main-body .table {
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--neutral-200); border-radius: 8px; overflow: hidden; margin-bottom: 0;
}
.dashboard-main-body .table thead tr th {
    background-color: var(--neutral-50); color: var(--text-primary-light);
    border-bottom: 1px solid var(--neutral-200); border-top: 0;
    font-weight: 600; font-size: .82rem; text-transform: none; letter-spacing: 0;
    padding: 14px 16px; white-space: nowrap;
}
.dashboard-main-body .table tbody tr td {
    color: var(--text-secondary-light); padding: 12px 16px; vertical-align: middle;
    border-bottom: 1px solid var(--neutral-200); background-color: var(--white);
}
.dashboard-main-body .table tbody tr:last-child td { border-bottom: 0; }
.dashboard-main-body .table.table-hover tbody tr:hover td { background-color: var(--neutral-50); }
.dashboard-main-body .table-sm tbody tr td, .dashboard-main-body .table-sm thead tr th { padding: 10px 12px; }

/* ---------- Botões ---------- */
.dashboard-main-body .btn { border-radius: 8px; font-weight: 500; }
.dashboard-main-body .btn-sm { border-radius: 8px; }

/* ---------- Formulários ---------- */
.dashboard-main-body .form-label { font-weight: 600; font-size: .82rem; color: var(--text-primary-light); margin-bottom: .35rem; }
.dashboard-main-body .form-control, .dashboard-main-body .form-select { border-radius: 8px; }

/* ---------- Paginação (Bootstrap 5 → estilo WowDash) ---------- */
.dashboard-main-body .pagination { gap: .35rem; margin: 0; }
.dashboard-main-body .pagination .page-link {
    border: 0; border-radius: 8px; background: var(--neutral-200); color: var(--text-secondary-light);
    min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.dashboard-main-body .pagination .page-item.active .page-link { background: var(--primary-600); color: #fff; }
.dashboard-main-body .pagination .page-item.disabled .page-link { opacity: .45; }

/* ---------- Badges de status (subtle do Bootstrap ficam ok, só arredonda) ---------- */
.dashboard-main-body .badge { font-weight: 600; }

/* ---------- Cards de estatística (dashboards) ---------- */
.cx-card-stat { transition: transform .15s ease, box-shadow .15s ease; }
.cx-card-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15,23,42,.08); }
.cx-stat-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; }

/* ---------- Botões de ação nas tabelas → círculos WowDash ----------
   Só os botões "outline" (ver/editar/excluir) viram círculos; botões
   sólidos de texto (ex.: "Chegou", "Liberar") mantêm o formato normal. */
.dashboard-main-body td.text-end .btn-outline-secondary,
.dashboard-main-body td.text-end .btn-outline-primary,
.dashboard-main-body td.text-end .btn-outline-danger,
.dashboard-main-body td.text-nowrap .btn-outline-secondary,
.dashboard-main-body td.text-nowrap .btn-outline-primary,
.dashboard-main-body td.text-nowrap .btn-outline-danger {
    width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 6px; box-shadow: none; transition: all .15s ease;
}
.dashboard-main-body td .btn-outline-secondary { background: var(--info-focus); color: var(--info-600); }
.dashboard-main-body td .btn-outline-secondary:hover { background: var(--info-600); color: #fff; }
.dashboard-main-body td .btn-outline-primary { background: var(--success-focus); color: var(--success-600); }
.dashboard-main-body td .btn-outline-primary:hover { background: var(--success-600); color: #fff; }
.dashboard-main-body td .btn-outline-danger { background: var(--danger-focus); color: var(--danger-600); }
.dashboard-main-body td .btn-outline-danger:hover { background: var(--danger-600); color: #fff; }
.dashboard-main-body td.text-end form.d-inline, .dashboard-main-body td.text-nowrap form.d-inline { display: inline; }

/* ---------- Cards de estatística WowDash (gradient) ---------- */
.cx-stat-ico { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; flex: 0 0 auto; }

/* ---------- Grupo de ações rápidas (segmentado, com ícone colorido) ---------- */
.cx-action-group {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    background: var(--white); border: 1px solid var(--neutral-200); border-radius: 16px;
    padding: 6px; gap: 4px; box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}
.cx-action {
    --accent: var(--primary-600, #487FFF);
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .5rem .9rem; border-radius: 12px; border: 0; background: transparent;
    color: var(--text-primary-light); font-weight: 600; font-size: .9rem;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.cx-action:hover {
    color: var(--accent); transform: translateY(-2px);
    background: var(--neutral-100, #f4f6fb);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cx-action:active { transform: translateY(0); }
.cx-action-ico {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    color: #fff; font-size: 1rem; flex: 0 0 auto; background: var(--accent);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 45%, transparent);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.cx-action:hover .cx-action-ico { transform: scale(1.08) rotate(-4deg); }
.cx-action-divider { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--neutral-200); }
.cx-action-label {
    align-self: center; display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--primary-600, #487FFF); background: rgba(72, 127, 255, .1);
    padding: .38rem .6rem; border-radius: 9px; margin-right: 3px;
}
.cx-action-label i { font-size: .9rem; }

/* ---------- Botão "+ Novo" único, com menu (substitui os 3 botões expandidos) ----------
   Padrão: uma ação primária clara que agrupa as opções de criação. */
.cx-new-btn {
    display: inline-flex; align-items: center; gap: .45rem; border: 0; cursor: pointer;
    padding: .5rem .95rem; border-radius: 12px; font-weight: 700; font-size: .9rem; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-600, #487FFF) 88%, #fff), var(--primary-600, #487FFF));
    box-shadow: 0 6px 16px -3px color-mix(in srgb, var(--primary-600, #487FFF) 50%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cx-new-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px -3px color-mix(in srgb, var(--primary-600, #487FFF) 55%, transparent); }
.cx-new-btn .cx-new-caret { font-size: .7rem; opacity: .85; transition: transform .15s ease; }
.cx-new-btn[aria-expanded="true"] .cx-new-caret { transform: rotate(180deg); }

/* Disclosure nativo (<details>): posicionamento próprio, à direita, sem Popper —
   não vaza da tela nem depende de JS de posicionamento (era o que quebrava). */
.cx-new { position: relative; }
.cx-new > summary { list-style: none; user-select: none; }
.cx-new > summary::-webkit-details-marker,
.cx-new > summary::marker { display: none; content: ''; }
/* Menu de criação: itens em "ladrilho" com ícone colorido + descrição */
.cx-new-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    display: none; padding: .4rem; border-radius: 14px; min-width: 236px; background: var(--white, #fff);
    box-shadow: 0 16px 40px -8px rgba(15,23,42,.25); }
.cx-new[open] > .cx-new-menu { display: block; animation: cx-new-in .13s ease; }
@keyframes cx-new-in { from { opacity: 0; transform: translateY(-4px); } }
/* Em telas estreitas, ocupa a largura toda e abre encostado à esquerda */
@media (max-width: 575.98px) {
    .cx-new-menu { right: auto; left: 0; min-width: min(236px, calc(100vw - 2rem)); }
}
.cx-new-item { display: flex; align-items: center; gap: .7rem; width: 100%; border: 0; background: transparent;
    padding: .5rem .55rem; border-radius: 10px; cursor: pointer; text-align: left; transition: background .13s ease; }
.cx-new-item:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.cx-new-item .ico { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center;
    color: #fff; font-size: 1.05rem; background: var(--accent);
    box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--accent) 50%, transparent); }
.cx-new-item .txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cx-new-item .txt b { font-size: .88rem; color: var(--text-primary-light); font-weight: 700; }
.cx-new-item .txt small { font-size: .72rem; color: var(--text-secondary-light); }
.cx-new-item:hover .txt b { color: var(--accent); }

/* ---------- Sidebar recolhida por padrão: no mobile abre completa ---------- */
@media (max-width: 767px) {
    .sidebar.active { width: 15.625rem; }
    .sidebar.active .cx-logo-text,
    .sidebar.active .sidebar-menu li a span,
    .sidebar.active .sidebar-menu li.sidebar-menu-group-title,
    .sidebar.active .sidebar-menu li.dropdown a::after { display: inline-block !important; }
    .sidebar.active .sidebar-menu li a .menu-icon { margin-inline-end: .5rem !important; }
    .sidebar.active .sidebar-menu li.dropdown.open .sidebar-submenu,
    .sidebar.active .sidebar-menu li.dropdown.dropdown-open .sidebar-submenu { display: block !important; }
    .dashboard-main.active { margin-inline-start: 0 !important; }
}

/* ---------- Título da página no cabeçalho do topo ---------- */
.cx-topbar-title {
    display: flex; align-items: center; gap: .85rem;
    padding-left: 1.15rem; margin-left: .25rem;
    border-left: 1px solid var(--neutral-200);
}
/* Selo redondo do ícone, colorido por módulo (var --tt vem do layout) */
/* Selo do ícone da página — acabamento profissional: gradiente translúcido,
   brilho de vidro no topo e glow suave na cor do módulo. Formato squircle
   (quadrado macio), padrão de ícone de app moderno. Adapta-se claro/escuro. */
.cx-topbar-title .cx-tt-ico {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--tt, #487FFF); position: relative; overflow: hidden;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--tt, #487FFF) 22%, transparent),
        color-mix(in srgb, var(--tt, #487FFF) 7%, transparent) 72%);
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, #fff 55%, transparent),                   /* realce superior */
        inset 0 0 0 1px color-mix(in srgb, var(--tt, #487FFF) 26%, transparent),      /* contorno sutil */
        0 8px 18px -8px color-mix(in srgb, var(--tt, #487FFF) 50%, transparent);       /* glow colorido */
    transition: transform .18s ease, box-shadow .18s ease;
}
/* Camada de vidro (highlight que some no meio) */
.cx-topbar-title .cx-tt-ico::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
    background: linear-gradient(180deg, color-mix(in srgb, #fff 24%, transparent), transparent 55%);
    pointer-events: none;
}
.cx-topbar-title .cx-tt-ico > i { position: relative; z-index: 1; }
.cx-topbar-title:hover .cx-tt-ico { transform: translateY(-1px);
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, #fff 55%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--tt, #487FFF) 30%, transparent),
        0 11px 22px -8px color-mix(in srgb, var(--tt, #487FFF) 58%, transparent); }
/* Modo escuro: realce de topo mais discreto para não “estourar” */
:root[data-theme="dark"] .cx-topbar-title .cx-tt-ico::after {
    background: linear-gradient(180deg, color-mix(in srgb, #fff 12%, transparent), transparent 55%);
}
:root[data-theme="dark"] .cx-topbar-title .cx-tt-ico {
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, #fff 18%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--tt, #487FFF) 34%, transparent),
        0 8px 20px -8px color-mix(in srgb, var(--tt, #487FFF) 45%, transparent);
}
.cx-topbar-title .cx-tt-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cx-topbar-title .cx-tt-title {
    font-size: 1.28rem; font-weight: 800; line-height: 1.2;
    color: var(--text-primary-light); letter-spacing: -.02em;
}
.cx-topbar-title .sub {
    font-size: .8rem; line-height: 1.25; color: var(--text-secondary-light);
    max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1199px) { .cx-topbar-title .sub { display: none; } }

/* ---------- Estado "selecionado" da barra lateral ----------
   Só a seção ATUAL (marcada com .cx-current no layout) fica azul. Abrir um
   dropdown recolhido apenas para espiar (o WowDash adiciona .open ao clicar)
   NÃO deve marcá-lo como selecionado — senão dois itens ficam azuis ao mesmo
   tempo (o da página atual + o que foi clicado). */
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
    background-color: transparent !important;
    color: var(--text-secondary-light);
}
.sidebar-menu li.dropdown.open > a:hover,
.sidebar-menu li.dropdown.dropdown-open > a:hover {
    color: var(--primary-600);
}
.sidebar-menu li.dropdown.cx-current > a {
    background-color: var(--primary-600) !important;
    color: #fff !important;
}
.sidebar-menu li.dropdown.cx-current > a:hover {
    color: #fff !important;
}

/* ---------- Faixa de navegação FIXA: cabeçalho + abas do módulo grudados,
   fixos no topo ao rolar (navegação fluida, sempre à mão) ---------- */
.cx-topbar-sticky { position: sticky; top: 0; z-index: 1030; background: var(--neutral-50, #f5f6fa); }
.cx-topbar-sticky .navbar-header { position: static; z-index: auto; }
.cx-topbar-sticky .cx-crm-nav { position: static; top: auto; margin: 0 .9375rem .9rem; }
@media (min-width: 1400px) { .cx-topbar-sticky .cx-crm-nav { margin: 0 1.5rem .9rem; } }
/* sombra sutil na base quando a faixa está fixa (separa do conteúdo que rola) */
.cx-topbar-sticky { box-shadow: 0 6px 12px -8px rgba(15, 23, 42, .18); }

/* Topbar padronizada: MÓDULO à esquerda + ações/tema/perfil à direita, numa linha só.
   Vale para TODAS as telas (padrão do sistema). */
.navbar-header { height: auto; min-height: 4.5rem; }
.cx-topbar-row { width: 100%; min-width: 0; }
.cx-topbar-title { display: flex; align-items: center; min-width: 0; flex: 0 0 auto; }
.cx-topbar-actions { min-width: 0; row-gap: .4rem; }
.cx-topbar-actions .cx-crm-actions { border-left: 0; padding-left: 0; }
.cx-topbar-div { width: 1px; height: 26px; background: var(--neutral-200); align-self: center; flex: 0 0 auto; }
@media (max-width: 575px) { .cx-topbar-div { display: none; } .navbar-header { padding: .75rem 1rem; } }

/* Abas na MESMA linha do módulo: viram pílulas inline (sem a "casca" de barra). */
.cx-topbar-tabs { display: flex; align-items: center; min-width: 0; padding-left: .7rem; margin-left: .3rem; border-left: 1px solid var(--neutral-200); }
@media (max-width: 767px) { .cx-topbar-tabs { border-left: 0; padding-left: 0; margin-left: 0; } }
/* width:100% aqui zerava a contribuição das abas para o max-content do
   container: o cálculo virava circular e a lista nascia menor do que os
   próprios itens, escondendo "Leads" mesmo com espaço sobrando. */
.cx-topbar-tabs .cx-crm-nav { position: static; top: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; max-width: 100%; min-width: 0; }
.cx-topbar-tabs .cx-crm-nav a { padding: .42rem .8rem; font-size: .88rem; }
/* "+ Novo" ao lado das abas: mesma altura e mesmo raio dos itens da barra.
   O divisor à direita separa AÇÃO de NAVEGAÇÃO, que é o que o botão e as abas
   são: coisas diferentes que estavam coladas. */
.cx-topbar-tabs .cx-new-btn { flex: 0 0 auto; height: 38px; padding: 0 .95rem; border-radius: 8px;
    font-size: .88rem; box-shadow: none; margin-right: 0; }
.cx-topbar-tabs .cx-new-btn:hover { transform: none; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--primary-600, #487FFF) 55%, transparent); }
.cx-topbar-tabs .cx-new-btn + .cx-crm-nav {
    margin-left: .6rem; padding-left: .6rem; border-left: 1px solid var(--neutral-200);
}

/* Abas do módulo na barra do topo: mesma altura do botão e dos filtros, para a
   linha ter uma régua só. */
.cx-topbar-tabs .cx-crm-nav a { height: 38px; padding: 0 .8rem; font-size: .88rem; }

/* A aba ATIVA não compete com o "+ Novo".
   Azul cheio é a ação primária da tela; onde você está é um estado, e estado se
   marca com tom suave. Com os dois preenchidos, a barra tinha dois "botões
   principais" lado a lado e nenhum deles lia como principal. */
.cx-topbar-tabs .cx-crm-nav a.active {
    background: color-mix(in srgb, var(--primary-600, #487FFF) 12%, transparent);
    color: var(--primary-600, #487FFF);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-600, #487FFF) 26%, transparent);
}
.cx-topbar-tabs .cx-crm-nav a.active i { color: var(--primary-600, #487FFF); }
.cx-topbar-tabs .cx-crm-nav a.active:hover {
    background: color-mix(in srgb, var(--primary-600, #487FFF) 17%, transparent);
    color: var(--primary-600, #487FFF);
}

/* =====================================================================
   Busca da tela no CENTRO da barra do topo (estilo Google) + ajustes da
   linha quando esse espaço central existe (@section('topbar-center')).
   ===================================================================== */
.cx-topbar-row.has-center { gap: .625rem !important; }
/* Cede espaço para a busca central, mas nunca abaixo do botão "+ Novo":
   quem encolhe é a lista de abas, que já rola sozinha.
   min-width:min-content impedia esse encolhimento e o excedente ia parar
   fora da tela, levando junto o tema e o avatar (sem avatar, não há como
   sair do sistema). Com 0, as abas rolam e a linha sempre fecha. */
/* basis max-content: a lista de abas pede o tamanho inteiro dela e só encolhe
   quando a linha aperta. Com basis auto, o width:100% da nav resolvia contra
   o próprio container e as abas nasciam menores do que precisavam. */
.cx-topbar-row.has-center .cx-topbar-tabs { flex: 0 1 max-content !important; min-width: 0; }
.cx-topbar-row.has-center .cx-topbar-actions { flex-shrink: 0; }
/* Trava final: a barra nunca empurra conteúdo para fora da janela. */
.cx-topbar-row { overflow: hidden; }

/* A barra de abas rola quando precisa, mas sem barra de rolagem à mostra:
   uma barrinha cinza atravessada embaixo do menu parece defeito. A máscara à
   direita é o sinal de que há mais abas. */
.cx-topbar-tabs .cx-crm-nav ul { scrollbar-width: none; -ms-overflow-style: none; }
.cx-topbar-tabs .cx-crm-nav ul::-webkit-scrollbar { height: 0; display: none; }
.cx-topbar-tabs .cx-crm-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); }

/* Notebook (até 1400): antes de cortar aba, aperta o que dá para apertar —
   a busca e o respiro dos itens. */
@media (max-width: 1400px) {
    .cx-topbar-row.has-center .cx-topbar-center { min-width: 150px; flex-basis: 240px; }
    .cx-topbar-row.has-center .cx-tsearch { max-width: 340px; }
    .cx-topbar-tabs .cx-crm-nav a { padding: 0 .58rem; font-size: .85rem; gap: .35rem; }
    .cx-topbar-tabs .cx-new-btn { padding: 0 .7rem; }
    .cx-topbar-tabs .cx-new-btn + .cx-crm-nav { margin-left: .45rem; padding-left: .45rem; }
}
.cx-topbar-row.has-center .cx-topbar-tabs .cx-crm-nav { min-width: 0; }
/* Quem absorve a sobra é o bloco da direita (que já alinha ao fim), não a
   busca: com a busca crescendo, ela comia o espaço das abas e "Leads" ficava
   escondida mesmo num monitor grande. */
.cx-topbar-row.has-center .cx-topbar-actions { flex: 1 1 auto !important; flex-wrap: nowrap !important; gap: 6px !important; }
.cx-topbar-row.has-center .cx-topbar-actions .btn, .cx-topbar-row.has-center .cx-topbar-actions a { white-space: nowrap; }
/* A busca é importante, mas não é a barra inteira: com 560px ela empurrava
   os filtros de loja e usuário para um canto apertado. */
.cx-topbar-center { flex: 0 3 420px; min-width: 190px; display: flex; justify-content: center; padding: 0 6px; }
.cx-tsearch { position: relative; display: flex; align-items: center; width: 100%; max-width: 420px; }
.cx-tsearch input { width: 100%; height: 38px; border: 1.5px solid color-mix(in srgb, var(--primary-600) 26%, var(--neutral-200)); border-radius: 9px;
    background: var(--white, #fff); color: var(--text-primary-light); padding: 0 36px 0 40px; font-size: .94rem; font-weight: 500; outline: none; text-overflow: ellipsis;
    box-shadow: 0 3px 12px -4px color-mix(in srgb, var(--primary-600) 26%, transparent), 0 1px 2px rgba(15, 23, 42, .06);
    transition: border-color .18s, box-shadow .18s, background .18s; }
.cx-tsearch input::placeholder { color: var(--text-secondary-light); opacity: .9; font-weight: 400; }
.cx-tsearch:hover input { border-color: color-mix(in srgb, var(--primary-600) 45%, var(--neutral-200)); }
.cx-tsearch:focus-within input { border-color: var(--primary-600);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-600) 15%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--primary-600) 40%, transparent); }
.cx-tsearch .ico, .cx-tsearch .clr { position: absolute; display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 9px; }
.cx-tsearch .ico { left: 4px; width: 30px; height: 30px; font-size: 1rem; color: var(--primary-600); background: color-mix(in srgb, var(--primary-600) 10%, transparent); }
.cx-tsearch .ico:hover { background: var(--primary-600); color: #fff; }
.cx-tsearch .clr { right: 5px; width: 26px; height: 26px; font-size: .78rem; background: transparent; color: var(--text-secondary-light); }
.cx-tsearch .clr:hover { background: var(--neutral-100, #eef1f6); color: var(--text-primary-light); }
.cx-tsearch .clr[hidden] { display: none; }
/* Com título + "+ Novo" + 4 abas + busca + 2 filtros + tema + avatar, abaixo
   de 1440 a linha não fecha: o nome do módulo cede lugar e fica só o ícone
   (medido, não estimado: em 1280 o lado direito saía da tela). */
@media (max-width: 1440px) { .cx-topbar-row.has-center .cx-topbar-title .cx-tt-text { display: none; } }
@media (max-width: 1100px) { .cx-topbar-center { flex-basis: 220px; min-width: 150px; } }

/* =====================================================================
   Lista rica (clientes, leads e afins): cartão com linhas em grade,
   avatar com iniciais, nome em destaque, dados secundários em chips e
   ações à direita. Cada tela define as colunas com um modificador.
   ===================================================================== */
.cxl { background: var(--white, #fff); border: 1px solid var(--neutral-200); border-radius: 12px; overflow: hidden; }
.cxl-head, .cxl-row { display: grid; align-items: center; gap: 14px; padding: 11px 16px; }
.cxl-head { padding-top: 10px; padding-bottom: 10px; background: var(--neutral-50, #f8f9fc); border-bottom: 1px solid var(--neutral-200);
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary-light); }
.cxl-row { border-top: 1px solid var(--neutral-100, #eef1f6); cursor: pointer; transition: background .12s; }
.cxl-row:first-of-type { border-top: 0; }
.cxl-row:hover { background: var(--neutral-50, #f8f9fc); }
.cxl-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 700;
    background: color-mix(in srgb, var(--primary-600) 12%, transparent); color: var(--primary-600); flex: none; }
.cxl-av.pj { background: color-mix(in srgb, #7c3aed 14%, transparent); color: #7c3aed; }
.cxl-av.off { background: var(--neutral-100, #eef1f6); color: var(--text-secondary-light); }
.cxl-main { min-width: 0; }
.cxl-nm { font-weight: 700; font-size: .93rem; color: var(--text-primary-light); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cxl-nm:hover { color: var(--primary-600); }
.cxl-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: .78rem; color: var(--text-secondary-light); min-width: 0; }
.cxl-sub .sep { opacity: .5; }
.cxl-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 700;
    background: var(--neutral-100, #eef1f6); color: var(--text-secondary-light); white-space: nowrap; }
.cxl-tag i { font-size: .78rem; }
.cxl-tag.pri { background: color-mix(in srgb, var(--primary-600) 12%, transparent); color: var(--primary-600); }
.cxl-tag.vio { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; }
.cxl-cel { min-width: 0; font-size: .84rem; color: var(--text-primary-light); }
.cxl-cel .k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary-light); margin-bottom: 1px; }
.cxl-cel .v { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxl-cel .v.num { font-variant-numeric: tabular-nums; }
.cxl-cel .muted { color: var(--text-secondary-light); opacity: .8; }
.cxl-acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cxl-acts .b { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--neutral-200);
    background: var(--white, #fff); color: var(--text-secondary-light); font-size: .88rem; cursor: pointer; text-decoration: none; transition: all .12s; }
.cxl-acts .b:hover { border-color: var(--primary-600); color: var(--primary-600); background: color-mix(in srgb, var(--primary-600) 7%, #fff); }
.cxl-acts .b.danger:hover { border-color: var(--danger-main, #ef4444); color: var(--danger-main, #ef4444); background: color-mix(in srgb, var(--danger-main, #ef4444) 7%, #fff); }
.cxl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--neutral-100, #eef1f6);
    background: var(--neutral-50, #f8f9fc); font-size: .8rem; color: var(--text-secondary-light); }
.cxl-foot .pagination { margin: 0; }
/* Colunas por tela */
.cxl--cli .cxl-head, .cxl--cli .cxl-row { grid-template-columns: 38px minmax(0, 1.5fr) minmax(0, 1fr) 150px 96px 116px; }
/* Lead ganhou a coluna Veículo (Novo x Usado) entre o nome e o contato. */
.cxl--lead .cxl-head, .cxl--lead .cxl-row { grid-template-columns: 38px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 150px 110px 60px; }
.cxl--atd .cxl-head, .cxl--atd .cxl-row { grid-template-columns: 38px minmax(0, 1.6fr) 160px 140px 150px 116px; }
/* Faixa lateral com a cor do estágio (atendimentos). */
.cxl--atd .cxl-row { box-shadow: inset 3px 0 0 var(--stage, transparent); }
@media (max-width: 1200px) {
    .cxl--cli .cxl-head, .cxl--cli .cxl-row { grid-template-columns: 38px minmax(0, 1.4fr) minmax(0, 1fr) 96px 116px; }
    .cxl--cli .cxl-hide-md { display: none; }
    .cxl--lead .cxl-head, .cxl--lead .cxl-row { grid-template-columns: 38px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 110px 60px; }
    .cxl--lead .cxl-hide-md { display: none; }
    .cxl--atd .cxl-head, .cxl--atd .cxl-row { grid-template-columns: 38px minmax(0, 1.4fr) 130px 150px 116px; }
    .cxl--atd .cxl-hide-md { display: none; }
}
/* Celular: avatar à esquerda, nome e ações na 1ª linha, contato na 2ª. */
@media (max-width: 820px) {
    .cxl-head { display: none; }
    .cxl--cli .cxl-row, .cxl--lead .cxl-row, .cxl--atd .cxl-row { grid-template-columns: 38px minmax(0, 1fr) auto; row-gap: 8px; }
    .cxl-hide-sm { display: none; }
    .cxl-row > .cxl-av { grid-row: 1 / span 2; align-self: start; }
    .cxl-row > .cxl-main { grid-column: 2; grid-row: 1; }
    .cxl-row > .cxl-acts { grid-column: 3; grid-row: 1; }
    .cxl-row > .cxl-cel { grid-column: 2 / -1; grid-row: 2; }
    /* Veículo do lead desce para a 3ª linha, senão colide com o contato. */
    .cxl-row > .cxl-cel.cxl-veh { grid-row: 3; }
    .cxl-row > .cxl-cel .k { display: inline; margin-right: 6px; }
    .cxl-row > .cxl-cel .v { display: inline; }
}

/* Busca "estilo Google" de clientes (abaixo da linha do módulo/abas). */
.cx-gsearch { padding: .1rem .9375rem .5rem; }
@media (min-width: 1400px) { .cx-gsearch { padding: .1rem 1.5rem .5rem; } }
/* Compacta por padrão (alinhada à direita); expande ao focar/digitar. */
.cx-gsearch-inner { position: relative; max-width: 320px; margin: 0 0 0 auto; transition: max-width .22s ease; }
.cx-gsearch-inner:focus-within { max-width: 720px; }
.cx-gs-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary-light); font-size: 1.02rem; pointer-events: none; transition: color .15s; }
.cx-gsearch-inner:focus-within .cx-gs-ico { color: var(--primary-600); }
.cx-gs-input { width: 100%; height: 42px; border: 1px solid var(--neutral-200); border-radius: 10px; background: var(--white);
    padding: 0 44px; font-size: .92rem; color: var(--text-primary-light); outline: none; text-overflow: ellipsis;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05); transition: box-shadow .18s, border-color .18s, background .18s; }
.cx-gs-input::placeholder { color: var(--text-secondary-light); }
.cx-gs-input:focus { border-color: var(--primary-600); box-shadow: 0 0 0 4px rgba(var(--cx-primary-rgb, 72, 127, 255), .14), 0 10px 26px rgba(15, 23, 42, .12); }
/* dica de teclado "/" à direita (some ao digitar) */
.cx-gs-kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); min-width: 22px; height: 22px;
    padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
    color: var(--text-secondary-light); background: var(--neutral-100); border: 1px solid var(--neutral-200);
    border-radius: 6px; pointer-events: none; font-family: inherit; }
.cx-gs-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
    color: var(--text-secondary-light); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.cx-gs-clear:hover { background: var(--neutral-100); color: var(--text-primary-light); }
.cx-gs-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--white);
    border: 1px solid var(--neutral-200); border-radius: 14px; box-shadow: 0 20px 46px rgba(15, 23, 42, .20);
    overflow: hidden auto; max-height: 64vh; z-index: 1050; padding: 6px; }
.cx-gs-head { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-secondary-light); padding: 6px 10px 8px; }
.cx-gs-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; text-decoration: none; border-radius: 9px;
    color: var(--text-primary-light); }
.cx-gs-item:hover, .cx-gs-item.active { background: var(--neutral-50); }
.cx-gs-item .ava { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, var(--primary-600), var(--primary-500, #6f9bff));
    color: #fff; display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(15, 23, 42, .14); }
.cx-gs-item .ava.co { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.cx-gs-item .info { min-width: 0; flex: 1 1 auto; }
.cx-gs-item .info b { display: block; font-size: .89rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-gs-item .info small { display: block; color: var(--text-secondary-light); font-size: .77rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-gs-item .info small .dot { opacity: .5; margin: 0 1px; }
.cx-gs-item mark { background: rgba(var(--cx-primary-rgb, 72, 127, 255), .18); color: inherit; padding: 0 1px; border-radius: 3px; }
.cx-gs-item .go { margin-left: auto; color: var(--text-secondary-light); opacity: 0; font-size: .8rem; transition: opacity .12s; flex: 0 0 auto; }
.cx-gs-item:hover .go, .cx-gs-item.active .go { opacity: .7; }
.cx-gs-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 4px; border-top: 1px solid var(--neutral-100);
    font-size: .82rem; font-weight: 600; color: var(--primary-600); text-decoration: none; border-radius: 0 0 9px 9px; }
.cx-gs-foot:hover, .cx-gs-foot.active { background: var(--neutral-50); color: var(--primary-600); }
.cx-gs-empty { padding: 22px 16px; text-align: center; color: var(--text-secondary-light); font-size: .86rem; }
.cx-gs-empty .bi { font-size: 1.4rem; display: block; margin-bottom: 6px; opacity: .5; }

/* ---------- Sub-navegação do CRM (abas + ações numa barra só) ---------- */
.cx-crm-nav {
    background: var(--white); border: 1px solid var(--neutral-200); border-radius: 14px;
    padding: .5rem .6rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.cx-crm-nav ul { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .35rem; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; }
/* Ações rápidas encaixadas na barra (à direita) */
.cx-crm-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
    padding-left: .7rem; border-left: 1px solid var(--neutral-200); }
@media (max-width: 991px) { .cx-crm-actions { border-left: 0; padding-left: 0; width: 100%; justify-content: flex-start; } }
.cx-crm-nav ul::-webkit-scrollbar { height: 5px; }
.cx-crm-nav ul::-webkit-scrollbar-thumb { background: var(--neutral-300, #d6dae4); border-radius: 3px; }
.cx-crm-nav a {
    display: flex; align-items: center; gap: .45rem; white-space: nowrap;
    padding: .5rem .9rem; border-radius: 8px; font-weight: 500; font-size: .9rem;
    color: var(--text-secondary-light); text-decoration: none; transition: all .15s ease;
}
.cx-crm-nav a:hover { background: var(--neutral-100, #f5f6fa); color: var(--text-primary-light); }
.cx-crm-nav a.active { background: var(--primary-600); color: #fff; box-shadow: 0 6px 14px rgba(var(--cx-primary-rgb, 72, 127, 255), .3); }
.cx-crm-nav a.active i { color: #fff; }

/* ---------- Modais: cabeçalho com ícone + seções ---------- */
.cx-modal-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.25rem; flex: 0 0 auto; }
.cx-section-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-secondary-light); display: flex; align-items: center; gap: .6rem; margin: .35rem 0 .1rem; }
.cx-section-title::after { content: ''; flex: 1; height: 1px; background: var(--neutral-200); }
.modal-content.radius-16 { border: 0; box-shadow: 0 20px 60px rgba(15, 23, 42, .25); }
.modal-content.radius-16 .modal-header { padding: 1rem 1.25rem; align-items: center; }
.modal-content.radius-16 .modal-body { padding: 1.1rem 1.25rem; }
.modal-content.radius-16 .modal-footer { padding: .9rem 1.25rem; background: var(--neutral-50); }

/* ---------- Galeria de materiais de marketing (miniaturas + download) ---------- */
.cx-mat-card { transition: box-shadow .15s ease, transform .15s ease; }
.cx-mat-card:hover { box-shadow: 0 10px 24px rgba(15,23,42,.12); transform: translateY(-2px); }
.cx-mat-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--neutral-200); }
.cx-mat-thumb { position: relative; height: 180px; background: var(--neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cx-mat-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cx-mat-badge { position: absolute; top: 8px; right: 8px; z-index: 2; }
.cx-mat-bar { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(30,41,59,.9); color: #fff;
    display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; gap: 8px;
    opacity: 0; transform: translateY(100%); transition: all .18s ease; }
.cx-mat-thumb:hover .cx-mat-bar, .cx-mat-card:focus-within .cx-mat-bar { opacity: 1; transform: translateY(0); }
.cx-mat-size { font-size: .72rem; opacity: .9; }
.cx-mat-btn { width: 32px; height: 32px; border-radius: 7px; background: rgba(255,255,255,.92); color: #1f2937;
    display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; text-decoration: none; }
.cx-mat-btn:hover { background: #fff; color: var(--primary-600); }
.cx-mat-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.cx-mat-btn.danger:hover { color: var(--danger-600); }

/* ---------- Central de Leads (pré-vendas / Kanban) ---------- */
.cx-kanban { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.cx-kanban-col { flex: 1 1 0; min-width: 260px; background: var(--neutral-50, #f8f9fc); border: 1px solid var(--neutral-200); border-radius: 14px; display: flex; flex-direction: column; }
.cx-kanban-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 700; font-size: .85rem;
    border-bottom: 2px solid var(--neutral-200); border-top-left-radius: 14px; border-top-right-radius: 14px; }
.cx-kanban-head.cx-stage-inbox { border-top-color: var(--info-main, #3b82f6); }
.cx-kanban-head.cx-stage-warming { border-top-color: var(--warning-main, #f59e0b); }
.cx-kanban-head.cx-stage-qualified { border-top-color: var(--success-main, #16a34a); }
.cx-kanban-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 80px; max-height: 62vh; overflow-y: auto; }
.cx-lead-card { display: block; background: var(--white, #fff); border: 1px solid var(--neutral-200); border-radius: 11px; padding: 11px 12px;
    text-decoration: none; color: var(--text-primary-light); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.cx-lead-card:hover { box-shadow: 0 8px 20px rgba(15,23,42,.10); transform: translateY(-2px); border-color: var(--primary-600); color: var(--text-primary-light); }
.cx-lead-card .badge { font-weight: 600; }

/* Termômetro do lead — bolinha legada, usada na Central de Leads */
.cx-temp { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.cx-temp-cold { background: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
.cx-temp-warm { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.cx-temp-hot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.20); }

/* ---------- Termômetro do lead (componente <x-temperature>) ----------
   A cor do grau chega por --tg, do próprio componente. O medidor de barras
   carrega a informação de nível junto com a cor — quem não distingue azul de
   âmbar ainda lê o grau pelas barras e pelo ícone. */
.cx-thermo {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .28rem .6rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1; white-space: nowrap;
    color: var(--tg, #0EA5E9);
    background: color-mix(in srgb, var(--tg, #0EA5E9) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tg, #0EA5E9) 28%, transparent);
}
.cx-thermo i { font-size: .95rem; }
.cx-thermo-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.cx-thermo-meter span {
    width: 3px; border-radius: 2px;
    background: color-mix(in srgb, var(--tg, #0EA5E9) 25%, transparent);
}
.cx-thermo-meter span:nth-child(1) { height: 5px; }
.cx-thermo-meter span:nth-child(2) { height: 8px; }
.cx-thermo-meter span:nth-child(3) { height: 11px; }
.cx-thermo-meter span.on { background: var(--tg, #0EA5E9); }

/* Vazio numa tabela: presente para não desalinhar a coluna, apagado para não
   competir com o dado que existe ao lado. */
.cx-empty { color: var(--neutral-400, #9ca3af); }

/* Linha de tabela clicável (abre o registro). O realce de hover já vem do
   .table-hover; aqui só o cursor + uma dica sutil de que a linha é acionável. */
tr.cx-row-link { cursor: pointer; }
tr.cx-row-link:hover td { background: color-mix(in srgb, var(--primary-600, #487FFF) 5%, transparent); }
/* Botão kebab discreto: ganha cor só no hover/aberto */
tr.cx-row-link .dropdown-toggle::after { display: none; }   /* remove a setinha do Bootstrap */

/* Utility que as views já usavam mas NÃO existia em nenhum CSS (é nome do
   Tailwind; o tema é Bootstrap). Sem ela o item flex fica com min-width:auto,
   não encolhe, e a linha estoura por cima do card vizinho — era exatamente o
   bug dos botões "Liberar" na Recepção. */
.min-w-0 { min-width: 0; }

/* ---------- Tabela do Tempo de Resposta (mapa de calor) ----------
   Cada célula recebe --c (cor da faixa) e --i (intensidade, proporcional ao
   peso da faixa na linha). O fundo é um color-mix da própria cor, então o
   mesmo CSS serve para claro e escuro sem tabela de cores duplicada. */
.cx-tr-table { font-size: .8rem; }
.cx-tr-table th { font-weight: 600; font-size: .72rem; white-space: nowrap; vertical-align: middle; }
.cx-tr-dim { position: sticky; left: 0; z-index: 2; background: var(--white, #fff);
    max-width: 190px; min-width: 150px; }
.cx-tr-table tbody tr:hover .cx-tr-dim { background: var(--neutral-100, #f5f6fa); }

.cx-tr-cell {
    text-align: center; white-space: nowrap; padding: .35rem .5rem;
    background: color-mix(in srgb, var(--c, transparent) var(--i, 0%), transparent);
}
.cx-tr-cell .n { font-weight: 700; }
.cx-tr-cell .p { color: var(--text-secondary-light); margin-inline-start: .35rem;
    padding-inline-start: .35rem; border-inline-start: 1px solid var(--neutral-300, #e5e7eb); }

.cx-tr-total td { font-weight: 700; border-top: 2px solid var(--neutral-300, #e5e7eb);
    background: var(--neutral-100, #f5f6fa); }
.cx-tr-total .cx-tr-dim { background: var(--neutral-100, #f5f6fa); }

/* Faixa das zonas (Dentro do prazo / Atenção / Fora do prazo) */
.cx-tr-zones th { padding: .2rem .4rem; border: 0; }
.cx-tr-zones th span {
    display: block; border-radius: 5px; padding: .2rem .4rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--z); background: color-mix(in srgb, var(--z) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z) 30%, transparent);
}

/* TMA da linha: pílula na cor da zona — o número se autoclassifica */
.cx-tr-tma {
    display: inline-block; min-width: 58px; padding: .2rem .45rem; border-radius: 6px;
    font-weight: 700; color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent);
}

.cx-thermo-dot {
    width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; display: inline-block;
    background: var(--tg, #0EA5E9);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg, #0EA5E9) 18%, transparent);
}

/* Ícone do histórico de contatos */
.cx-touch-ico { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--primary-focus, #eaf0ff); color: var(--primary-600); font-size: .95rem; }

/* ---------- Editor de texto rico (atas) ---------- */
.cx-editor { border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; overflow: hidden; background: var(--white, #fff); }
.cx-editor-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-50, #f8f9fc); }
.cx-editor-toolbar button { border: 0; background: transparent; min-width: 32px; height: 30px; padding: 0 8px; border-radius: 6px;
    color: var(--text-secondary-light); cursor: pointer; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; }
.cx-editor-toolbar button:hover { background: var(--neutral-200); color: var(--text-primary-light); }
.cx-editor-toolbar .sep { width: 1px; background: var(--neutral-200); margin: 4px 4px; }
.cx-editor-area { min-height: 300px; max-height: 62vh; overflow-y: auto; padding: 14px 18px; outline: none; line-height: 1.65; color: var(--text-primary-light); }
.cx-editor-area h2 { font-size: 1.3rem; margin: .7em 0 .35em; }
.cx-editor-area h3 { font-size: 1.1rem; margin: .6em 0 .3em; }
.cx-editor-area ul, .cx-editor-area ol { padding-left: 1.5rem; margin: .4em 0; }
.cx-editor-area blockquote { border-left: 3px solid var(--neutral-300, #cbd5e1); margin: .5em 0; padding: .1em .9rem; color: var(--text-secondary-light); }
.cx-editor-area:empty::before { content: attr(data-placeholder); color: var(--text-secondary-light); }
/* Conteúdo renderizado da ata (show) */
.cx-ata-content h2 { font-size: 1.3rem; margin: .7em 0 .35em; }
.cx-ata-content h3 { font-size: 1.1rem; margin: .6em 0 .3em; }
.cx-ata-content ul, .cx-ata-content ol { padding-left: 1.5rem; }
.cx-ata-content blockquote { border-left: 3px solid var(--neutral-300, #cbd5e1); margin: .5em 0; padding: .1em .9rem; color: var(--text-secondary-light); }

/* ---------- Abas (detalhe de registros) ---------- */
.cx-tabs { border: 0; padding: 0 .35rem; gap: .15rem; flex-wrap: wrap; }
.cx-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
    color: var(--text-secondary-light); font-weight: 600; font-size: .9rem; padding: .85rem 1rem;
    display: inline-flex; align-items: center; gap: .45rem; }
.cx-tabs .nav-link:hover { color: var(--text-primary-light); }
.cx-tabs .nav-link.active { color: var(--primary-600); border-bottom-color: var(--primary-600); background: transparent; }
.cx-tabs .nav-link .badge { font-size: .66rem; font-weight: 700; }
.cx-sticky-side { position: sticky; top: 88px; }
@media (max-width: 991px) { .cx-sticky-side { position: static; } }

/* =====================================================================
   Refino visual — "mais leve e amigável" (2026-07-21)
   Superfícies mais macias: cantos maiores, sombra suave no lugar da borda
   dura, respiro maior e texto secundário menos pesado. Bloco isolado no
   fim do arquivo — fácil de ajustar ou remover.
   ===================================================================== */

/* Cards flutuantes: borda quase invisível + sombra leve = ar mais leve */
.dashboard-main-body .card {
    border: 1px solid color-mix(in srgb, var(--neutral-200) 60%, transparent);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 10px 30px -14px rgba(15, 23, 42, .10);
}
/* Cabeçalho/rodapé acompanham os cantos macios do card */
.dashboard-main-body .card > .card-header { border-top-left-radius: 18px; border-top-right-radius: 18px; border-bottom-color: color-mix(in srgb, var(--neutral-200) 60%, transparent); }
.dashboard-main-body .card > .card-footer { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; border-top-color: color-mix(in srgb, var(--neutral-200) 60%, transparent); }
.dashboard-main-body .card.shadow-sm { box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 10px 30px -14px rgba(15, 23, 42, .10) !important; }

/* Botões e campos com cantos mais amigáveis e transição suave */
.dashboard-main-body .btn { border-radius: 10px; }
.dashboard-main-body .btn-sm { border-radius: 9px; }
.dashboard-main-body .form-control,
.dashboard-main-body .form-select { border-radius: 10px; border-color: color-mix(in srgb, var(--neutral-200) 75%, transparent); transition: border-color .15s ease, box-shadow .15s ease; }
.dashboard-main-body .form-control:focus,
.dashboard-main-body .form-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-600, #487FFF) 15%, transparent); }
.dashboard-main-body .input-group > :first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.dashboard-main-body .input-group > :last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* Tabelas mais arejadas: linhas com mais respiro e divisórias delicadas */
.dashboard-main-body .table > :not(caption) > * > * { padding-top: .72rem; padding-bottom: .72rem; }
.dashboard-main-body .table > tbody > tr { border-color: color-mix(in srgb, var(--neutral-200) 55%, transparent); }
.dashboard-main-body .table-hover > tbody > tr:hover > * { background: color-mix(in srgb, var(--primary-600, #487FFF) 4%, transparent); }
.dashboard-main-body .table > thead th { color: var(--text-secondary-light); font-weight: 600; letter-spacing: .01em; }

/* Texto secundário um tom mais claro = menos peso visual */
.dashboard-main-body .text-muted { color: #7a8395 !important; }

/* Badges e pílulas levemente mais macias */
.dashboard-main-body .badge { border-radius: 8px; font-weight: 600; }

/* Divisórias mais suaves em geral */
.dashboard-main-body hr { border-color: color-mix(in srgb, var(--neutral-200) 60%, transparent); opacity: 1; }

/* Ícones dos submenus da barra lateral (substituem os bullets coloridos) */
.sidebar-menu .sidebar-submenu li a .cx-sub-ico { font-size: 1rem; width: 1.15rem; text-align: center; flex: 0 0 auto; }

/* Divisória de subgrupo dentro de um submenu (ex.: Administração → Cadastros/Dados) */
.sidebar-menu .sidebar-submenu li.cx-sub-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--neutral-500, #8a90a0); font-weight: 700; padding: .55rem .75rem .15rem; pointer-events: none; opacity: .85; }
.sidebar-menu .sidebar-submenu li.cx-sub-group:first-child { padding-top: .1rem; }

/* ============================================================
   KPI cards — modelo padrão do sistema (usar em Painel, SMD,
   Relatórios, Meu Dia etc. para consistência visual).
   Uso: <div class="cx-kpi-grid"> <a|div class="cx-kpi" style="--k:#487FFF"> ...
   ============================================================ */
.cx-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:1100px){ .cx-kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cx-kpi-grid { grid-template-columns:1fr; } }
.cx-kpi { --k:#487FFF; position:relative; display:block; background:#fff; border:1px solid #eceff4; border-radius:16px;
    padding:1.05rem 1.2rem 1.1rem 1.35rem; overflow:hidden; text-decoration:none; color:inherit;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cx-kpi::before { content:''; position:absolute; top:0; bottom:0; left:0; width:4px; background:var(--k); }
a.cx-kpi:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(15,23,42,.09); border-color:color-mix(in srgb,var(--k) 40%,#eceff4); }
.cx-kpi .cx-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; }
.cx-kpi .cx-kpi-lab { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#8a93a5; }
.cx-kpi .cx-kpi-val { font-size:2rem; font-weight:800; color:#0f172a; line-height:1.05; margin-top:.15rem; font-variant-numeric:tabular-nums; }
.cx-kpi .cx-kpi-val small { font-size:1.05rem; color:#9aa3b2; font-weight:600; }
.cx-kpi .cx-kpi-ico { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.45rem;
    color:var(--k); background:color-mix(in srgb,var(--k) 14%,#fff); flex:0 0 auto; }
.cx-kpi .cx-kpi-sub { font-size:.78rem; color:#94a3b8; margin-top:.55rem; display:flex; align-items:center; gap:.2rem; }
.cx-kpi .cx-kpi-bar { height:6px; border-radius:4px; background:#eef1f6; overflow:hidden; margin-top:.55rem; }
.cx-kpi .cx-kpi-bar > div { height:100%; border-radius:4px; background:var(--k); transition:width .3s ease; }
:root[data-theme="dark"] .cx-kpi { background:#1c2431; border-color:#2a3446; }
:root[data-theme="dark"] .cx-kpi .cx-kpi-val { color:#f1f5f9; }

/* =====================================================================
   IDENTIDADE VISUAL — cantos discretos (quase quadrados), global.
   Escala 4 / 6 / 8px. Círculos e switches permanecem redondos.
   ===================================================================== */
:root {
    --cx-radius: 6px; --cx-radius-sm: 4px; --cx-radius-lg: 8px;
    /* A maioria dos componentes Bootstrap herda destes tokens. */
    --bs-border-radius: 6px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 8px;
    --bs-border-radius-xl: 8px; --bs-border-radius-xxl: 10px;
}
/* Superfícies maiores → 8px */
.dashboard-main-body .card, .card, .modal-content, .offcanvas, .dropdown-menu,
.cx-new-menu, .cx-modal, .cx-gs-results, .alert, .list-group, .toast, .popover,
.accordion, .accordion-item, .table-responsive, .cx-editor,
.cx-kanban-col, .cx-kanban-head, .cx-lead-card, .cx-kpi, .cx-stat-icon { border-radius: var(--cx-radius-lg); }
/* Controles e chips → 6px */
.dashboard-main-body .btn, .btn, .dashboard-main-body .form-control, .form-control,
.dashboard-main-body .form-select, .form-select, .input-group-text, .list-group-item,
.nav-pills .nav-link, .page-link, .cx-new-item, .cx-new-item .ico, .cx-modal-ico,
.cx-kpi .cx-kpi-ico, .cx-gs-input, .cx-topbar-tabs a, .cx-chip { border-radius: var(--cx-radius); }
.badge { border-radius: var(--cx-radius-sm); }
/* Utilitários de raio do tema (usados em muitos blades) */
.radius-16, .radius-12 { border-radius: var(--cx-radius-lg) !important; }
.radius-8, .radius-10 { border-radius: var(--cx-radius) !important; }
.rounded-4, .rounded-3, .rounded-2 { border-radius: var(--cx-radius-lg) !important; }
/* O que deve continuar redondo */
.rounded-circle, .cx-temp, .cx-temp-cold, .cx-temp-warm, .cx-temp-hot,
.spinner-border, .spinner-grow, .form-switch .form-check-input,
.avatar, .cx-avatar { border-radius: 50%; }
/* Termômetro continua em pílula (é a identidade dele) */
.cx-thermo { border-radius: 999px; }

/* Telas com CSS próprio na página (Eventos, Central de Leads, Login):
   normaliza os cantos para a mesma identidade quadrada. */
/* Eventos */
.cxev-toolbar, .cxev-tab, .cxev-list, .cxev-panel, .cxev-kpi, .cxev-content { border-radius: var(--cx-radius-lg) !important; }
.cxev-field, .cxev-selwrap select, .cxev-btn, .cxev-tab .ico, .pages button { border-radius: var(--cx-radius) !important; }
/* Central de Leads: drawer/modal, abas, botões, chat e "aguardando" */
.cx-drawer, .cx-dw-summary, .cx-dw-sec, .cx-dw-tabs, .cx-wa-bar, .cx-wa-thread, .cx-wa-bubble,
.nl-content, .cx-toast, .cx-wait-bar { border-radius: var(--cx-radius-lg) !important; }
.cx-dw-tab, .cx-move-btn, .cx-temp-btn, .cx-tl-ico, .cx-wa-send, .cx-wait-bell, .cx-wait-toggle,
.cx-lc-action, .nl-head-ico, .nl-temp-btn, .cx-dw-chip { border-radius: var(--cx-radius) !important; }
.cx-lc-wait, .cx-dw-stage { border-radius: var(--cx-radius-sm) !important; }
/* Login */
.cx-field, .cx-btn, .cx-alert { border-radius: var(--cx-radius) !important; }
.cx-brand .icn, .cx-logo-icon, .cx-field input, .cx-hero .mk { border-radius: var(--cx-radius-lg) !important; }

/* ===== Seletor de visão de página (ex.: Central de Leads: Esteira · Acompanhamento) ===== */
.cx-viewsw { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--neutral-200); border-radius: 10px; background: var(--white, #fff); }
.cx-viewsw a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; font-size: .84rem; font-weight: 600;
    color: var(--text-secondary-light); text-decoration: none; transition: background .12s, color .12s; }
.cx-viewsw a:hover { background: var(--neutral-50, #f8f9fc); }
.cx-viewsw a.on { background: color-mix(in srgb, var(--primary-600) 12%, transparent); color: var(--primary-600); }

/* Agenda de OUTRO vendedor (consulta): a marca de concluído continua
   visível nos itens já feitos, mas não é um botão. */
.cxag .chk.somente-ver { cursor: default; opacity: .45; pointer-events: none; }