/* ======================= Sistema visual global (.kx-ui) =======================
   Mesmo visual do Painel em todas as telas internas, no admin, no portal e no login. Sobrescreve o Bootstrap apenas dentro
   de .kx-ui. Só aparência: nenhum dado, rota ou regra é alterado. Fonte: Inter. */
.kx-ui { --ui-border: #E2E8F0; --ui-text: #0F172A; --ui-muted: #556377; --ui-primary: #1D4ED8; --ui-primary-dark: #1E40AF; --ui-primary-soft: #EAF0FF;
  --ui-ok: #047857; --ui-bad: #DC2626; --ui-bad-text: #B91C1C;
  --bs-primary: #1D4ED8; --bs-primary-rgb: 29, 78, 216; --bs-link-color: #1D4ED8; --bs-link-color-rgb: 29, 78, 216; --bs-link-hover-color: #1E40AF;
  --bs-body-color: #0F172A; --bs-secondary-color: #556377;
  font-size: 14px; color: var(--ui-text); }

.kx-ui h1, .kx-ui .h3, .kx-ui .h4 { font-weight: 800; letter-spacing: -.02em; }
.kx-ui h1.h4 { font-size: 1.5rem; }
.kx-ui h2, .kx-ui .h5, .kx-ui .h6 { font-weight: 700; }
.kx-ui .text-secondary { color: var(--ui-muted) !important; }
.kx-ui .small, .kx-ui small { font-size: 13px; }
.kx-ui .form-text { font-size: 12.5px; color: var(--ui-muted); }
.kx-ui .bi { line-height: 1; }

/* Cartões */
.kx-ui .card { border: 1px solid var(--ui-border) !important; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important; background: #fff; }
.kx-ui .card-header { background: #fff; border-bottom: 1px solid var(--ui-border); font-weight: 700; padding: .9rem 1.25rem; border-radius: 14px 14px 0 0 !important; }
.kx-ui .card-body { padding: 1.25rem; }

/* Tabelas */
.kx-ui .table { --bs-table-hover-bg: #F6F8FC; font-size: 14px; margin-bottom: 0; }
.kx-ui .table > :not(caption) > * > * { padding: .85rem .9rem; border-bottom-color: #EDF1F6; }
.kx-ui .table thead th, .kx-ui .table-light th { background: #F8FAFC !important; color: var(--ui-muted); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--ui-border); white-space: nowrap; }
.kx-ui .table-responsive { border-radius: 14px; }

/* Campos (altura mínima 40px) */
.kx-ui .form-control, .kx-ui .form-select { min-height: 40px; border-radius: 10px; border-color: #CBD5E1; font-size: 14px; color: var(--ui-text); }
.kx-ui .form-control-sm, .kx-ui .form-select-sm { min-height: 40px; padding-top: .4rem; padding-bottom: .4rem; font-size: 14px; border-radius: 10px; }
.kx-ui .form-control::placeholder { color: #8493A8; }
.kx-ui .form-control:focus, .kx-ui .form-select:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgba(29, 78, 216, .18); }
.kx-ui .form-label { font-weight: 600; font-size: 13px; margin-bottom: .35rem; }
.kx-ui .form-check-input { width: 1.15em; height: 1.15em; }
.kx-ui .form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); }
.kx-ui .form-switch .form-check-input { width: 2.2em; height: 1.2em; }
.kx-ui .form-control-color { min-height: 40px; padding: .25rem; }

/* Botões (altura mínima 40px) */
.kx-ui .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.kx-ui .btn-sm { min-height: 40px; padding: .35rem .85rem; font-size: 13.5px; }
.kx-ui .btn-lg { min-height: 46px; font-size: 15px; }
.kx-ui .btn-close { min-height: 0; }
.kx-ui .btn:focus-visible, .kx-ui a:focus-visible, .kx-ui .form-check-input:focus-visible { outline: 3px solid rgba(29, 78, 216, .35); outline-offset: 2px; box-shadow: none; }
.kx-ui .btn-primary, .kx-ui .btn-kx { --bs-btn-bg: #1D4ED8; --bs-btn-border-color: #1D4ED8; --bs-btn-hover-bg: #1E40AF; --bs-btn-hover-border-color: #1E40AF;
  --bs-btn-active-bg: #1E3A8A; --bs-btn-active-border-color: #1E3A8A; --bs-btn-disabled-bg: #1D4ED8; --bs-btn-disabled-border-color: #1D4ED8;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; background: #1D4ED8; border-color: #1D4ED8; color: #fff; }
.kx-ui .btn-primary:hover, .kx-ui .btn-kx:hover, .kx-ui .btn-kx:focus { background: #1E40AF; border-color: #1E40AF; color: #fff; }
.kx-ui .btn-outline-primary { --bs-btn-color: #1D4ED8; --bs-btn-border-color: #1D4ED8; --bs-btn-hover-bg: #1D4ED8; --bs-btn-hover-border-color: #1D4ED8; --bs-btn-active-bg: #1E40AF; }
.kx-ui .btn-success { --bs-btn-bg: #047857; --bs-btn-border-color: #047857; --bs-btn-hover-bg: #065F46; --bs-btn-hover-border-color: #065F46; --bs-btn-active-bg: #064E3B; }
.kx-ui .btn-outline-success { --bs-btn-color: #047857; --bs-btn-border-color: #047857; --bs-btn-hover-bg: #047857; --bs-btn-hover-border-color: #047857; }
.kx-ui .btn-danger { --bs-btn-bg: #DC2626; --bs-btn-border-color: #DC2626; --bs-btn-hover-bg: #B91C1C; --bs-btn-hover-border-color: #B91C1C; }
.kx-ui .btn-outline-danger { --bs-btn-color: #B91C1C; --bs-btn-border-color: #DC2626; --bs-btn-hover-bg: #DC2626; --bs-btn-hover-border-color: #DC2626; }
.kx-ui .btn-outline-secondary { --bs-btn-color: #334155; --bs-btn-border-color: #CBD5E1; --bs-btn-hover-bg: #F1F5F9; --bs-btn-hover-color: #0F172A; --bs-btn-hover-border-color: #94A3B8; }

/* Abas e paginação */
.kx-ui .kx-tabs a { min-height: 40px; border-color: var(--ui-border); }
.kx-ui .kx-tabs a:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
.kx-ui .kx-tabs a.active { background: var(--ui-primary); border-color: var(--ui-primary); box-shadow: 0 2px 6px rgba(29, 78, 216, .28); color: #fff; }
.kx-ui .kx-tabs a.active .badge { color: var(--ui-primary) !important; }
.kx-ui .page-link { min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-primary); }
.kx-ui .page-item.active .page-link { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }

/* Etiquetas: verde = tudo certo, vermelho = problema/limite (sempre acompanhadas de texto) */
.kx-ui .badge { font-weight: 700; font-size: 12px; padding: .38em .65em; border-radius: 999px; }
.kx-ui .text-bg-primary { background-color: var(--ui-primary) !important; }
.kx-ui .text-bg-success { background-color: var(--ui-ok) !important; }
.kx-ui .text-bg-danger { background-color: var(--ui-bad) !important; }
.kx-ui .text-danger { color: var(--ui-bad-text) !important; }
.kx-ui .text-success { color: var(--ui-ok) !important; }
.kx-ui .text-primary { color: var(--ui-primary) !important; }
.kx-ui .progress { height: 8px; background: #E9EEF5; border-radius: 999px; }
.kx-ui .progress-bar.bg-primary { background-color: var(--ui-primary) !important; }
.kx-ui .progress-bar.bg-danger { background-color: var(--ui-bad) !important; }

/* Alertas, modais, listas */
.kx-ui .alert { border-radius: 12px; padding: .85rem 1.1rem; }
.kx-ui .modal-content { border: 1px solid var(--ui-border); border-radius: 14px; }
.kx-ui .modal-header, .kx-ui .modal-footer { border-color: var(--ui-border); }
.kx-ui .list-group-item { border-color: var(--ui-border); }
.kx-ui .list-group { border-radius: 14px; }
.kx-ui .nav-pills .nav-link { border-radius: 10px; }
.kx-ui .nav-pills .nav-link.active { background: var(--ui-primary); }
.kx-ui hr { border-color: var(--ui-border); opacity: 1; }
.kx-ui dt { color: var(--ui-muted); font-weight: 600; }

/* Chat: a lista de conversas mantém a paleta estilo WhatsApp; só os controles seguem o tema */
.kx-ui .kx-chat .btn { min-height: 36px; }
.kx-ui .kx-chat .kx-tabs a { min-height: 36px; }

/* Painel de visão geral do admin reaproveita os cartões do Painel do cliente */
.kx-dash .kd-card .kd-stat { text-decoration: none; }

/* ======================= Cabeçalho escuro e menu lateral agrupado ======================= */
:root { --kx-blue: #0271fc; --kx-blue-mid: #0149ec; --kx-blue-dark: #0036d6; --kx-blue-soft: #e6f0ff; }

.kx-topbar { background: #0F172A !important; border-bottom: 1px solid #1E293B !important; min-height: 60px; padding: .4rem 0; position: relative; z-index: 1030; }
.kx-topbar .navbar-brand, .kx-topbar .navbar-brand:hover { color: #fff !important; }
.kx-topbar .text-secondary { color: #CBD5E1 !important; }
.kx-topbar .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; }
.kx-topbar .btn-outline-secondary, .kx-signout { background: transparent; color: #fff; border: 1px solid #475569; }
.kx-topbar .btn-outline-secondary:hover, .kx-topbar .btn-outline-secondary:focus, .kx-signout:hover { background: #1E293B; border-color: #64748B; color: #fff; }
.kx-topbar a:focus-visible, .kx-topbar button:focus-visible, .kx-topbar input:focus-visible { outline: 3px solid rgba(147, 197, 253, .7); outline-offset: 2px; }
.kx-topbar .kx-logo-badge { background: #fff; border-radius: 10px; padding: 2px; display: inline-grid; place-items: center; }
.kx-topbar .kx-logo-badge .kx-logo { margin-block: 0; }
.kx-topbar .badge.text-bg-dark { background: #1E293B !important; color: #CBD5E1 !important; border: 1px solid #334155; }
.kx-topbar .kx-nav-link { color: #CBD5E1; }
.kx-topbar .kx-nav-link:hover, .kx-topbar .kx-nav-link.active { background: #1E293B; color: #fff; }

.kx-mark { width: 34px; height: 34px; border-radius: 9px; background: #2563EB; color: #fff; font-weight: 800; font-size: 18px; display: grid; place-items: center; line-height: 1; }
.kx-brand-name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: #fff; }
.kx-divider { width: 1px; height: 24px; background: #334155; flex-shrink: 0; }
.kx-company { color: #CBD5E1; font-weight: 400; font-size: 14px; max-width: 220px; }

.kx-search { position: relative; max-width: 520px; margin-inline: auto; }
.kx-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 16px; pointer-events: none; }
.kx-search input { width: 100%; min-height: 40px; border-radius: 10px; background: #1E293B; border: 1px solid #334155; color: #CBD5E1; padding: .4rem .9rem .4rem 2.4rem; font-size: 14px; }
.kx-search input::placeholder { color: #94A3B8; }
.kx-search input:focus { outline: none; border-color: #60A5FA; box-shadow: 0 0 0 3px rgba(96, 165, 250, .35); color: #fff; }

.kx-iconbtn { position: relative; width: 40px; height: 40px; border-radius: 10px; background: #1E293B; border: 1px solid #334155; color: #CBD5E1;
  display: grid; place-items: center; text-decoration: none; font-size: 18px; flex-shrink: 0; }
.kx-iconbtn:hover { background: #273449; color: #fff; }
.kx-iconbtn-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #DC2626; color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #0F172A; }
.kx-user { display: flex; align-items: center; gap: .6rem; }
.kx-avatar-sm { width: 36px; height: 36px; border-radius: 50%; background: #2563EB; color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.kx-user-name { display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; }
.kx-user-role { display: block; color: #CBD5E1; font-size: 12px; line-height: 1.2; }

/* Menu lateral */
.kx-side { border-right: 1px solid #E2E8F0 !important; }
.kx-side-inner { display: flex; flex-direction: column; min-height: calc(100vh - 62px); padding: 1rem .85rem; }
.kx-side-groups { flex: 1; }
.kx-group { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748B; margin: 1.1rem .6rem .45rem; }
.kx-side-groups > .kx-group:first-child { margin-top: .25rem; }
.kx-side .nav-link { display: flex; align-items: center; gap: .65rem; min-height: 40px; padding: .5rem .7rem; border-radius: 10px; color: #334155; font-weight: 500; font-size: 14px; }
.kx-side .nav-link i { font-size: 18px; width: 20px; text-align: center; color: #64748B; flex-shrink: 0; }
.kx-side .nav-link:hover:not(.active) { background: #F1F5F9; color: #0F172A; }
.kx-side .nav-link.active { background: #EFF6FF; color: #1D4ED8; font-weight: 700; box-shadow: none; }
.kx-side .nav-link.active i { color: #1D4ED8; }
.kx-side .nav-link:focus-visible { outline: 3px solid rgba(29, 78, 216, .35); outline-offset: 1px; }
.kx-count { margin-left: auto; min-width: 24px; height: 22px; padding: 0 .45rem; border-radius: 999px; background: #1D4ED8; color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.kx-side-foot { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #E2E8F0; }
.kx-side .kx-side-toggle { text-align: left; }

/* Menu recolhido (somente ícones) — apenas em telas md+ */
@media (min-width: 768px) {
  .kx-collapsed .kx-side { flex: 0 0 76px !important; width: 76px !important; max-width: 76px; }
  .kx-collapsed .kx-ui { flex: 1 1 0 !important; width: auto !important; max-width: calc(100% - 76px) !important; }
  .kx-collapsed .kx-side-inner { padding: 1rem .6rem; }
  .kx-collapsed .kx-side .nav-link { justify-content: center; padding: .5rem; position: relative; }
  .kx-collapsed .kx-side .nav-link > span:not(.kx-count) { display: none; }
  .kx-collapsed .kx-side .kx-group { font-size: 0; height: 1px; background: #E2E8F0; margin: .8rem .5rem; padding: 0; }
  .kx-collapsed .kx-side-groups > .kx-group:first-child { display: none; }
  .kx-collapsed .kx-side .kx-count { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 .3rem; font-size: 11px; margin: 0; }
  .kx-collapsed .kx-side-toggle i { transform: rotate(180deg); }
}

/* ======================= Painel: saudação, aviso de teste, indicadores, plano, consumo, blocos novos ======================= */
.kx-dash .kd-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.kx-dash .kd-head-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.kx-dash .kd-meta { color: var(--kd-muted); display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; margin: .2rem 0 0; }
.kx-dash .kd-meta .kd-dot { width: 4px; height: 4px; border-radius: 50%; background: #94A3B8; }

.kx-dash .kd-trial { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.kx-dash .kd-trial-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #1D4ED8; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; border: 1px solid #BFDBFE; }
.kx-dash .kd-trial-title { font-weight: 700; margin: 0; color: #1E3A8A; }
.kx-dash .kd-trial-text { margin: .1rem 0 0; color: #334155; }
.kx-dash .kd-trial .kd-btn { margin-left: auto; }

.kx-dash .kd-stat-num { font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.kx-dash .kd-stat.is-ok .kd-stat-ico { background: var(--kd-ok-soft); color: var(--kd-ok); }
.kx-dash .kd-stat.is-warn .kd-stat-ico { background: var(--kd-warn-soft); color: var(--kd-warn-text); }
.kx-dash .kd-stat.is-bad .kd-stat-num { color: var(--kd-text); }
.kx-dash .kd-note-warn { color: var(--kd-warn-text); }
.kx-dash .kd-note-muted { color: var(--kd-muted); }
.kx-dash .kd-stat-note { font-weight: 600; font-size: 12.5px; }

.kx-dash .kd-card-flex { display: flex; flex-direction: column; }
.kx-dash .kd-card-flex .kd-card-body { flex: 1; }
.kx-dash .kd-card-foot { border-top: 1px solid var(--kd-border); padding: .9rem 1.25rem; }
.kx-dash .kd-plan-price small { font-size: .8rem; font-weight: 500; color: var(--kd-muted); }

/* Medidores de consumo */
.kx-dash .kd-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .1rem; }
.kx-dash .kd-meter-pct { font-size: 13px; font-weight: 700; color: var(--kd-muted); }
.kx-dash .kd-meter-pct.is-bad { color: var(--kd-bad-text); }
.kx-dash .kd-meter-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
.kx-dash .kd-meter-value small { font-size: .8rem; font-weight: 500; color: var(--kd-muted); letter-spacing: 0; }
.kx-dash .kd-bar { height: 8px; }
.kx-dash .kd-meter-status { display: inline-flex; align-items: center; gap: .3rem; font-size: 12.5px; font-weight: 600; margin-top: .45rem; }
.kx-dash .kd-meter-status.is-ok { color: var(--kd-ok); }
.kx-dash .kd-meter-status.is-warn { color: var(--kd-warn-text); }
.kx-dash .kd-meter-status.is-bad { color: var(--kd-bad-text); }
.kx-dash .kd-meter-status.is-neutral { color: var(--kd-muted); }
.kx-dash .kd-limit { display: flex; gap: .65rem; align-items: flex-start; background: var(--kd-bad-soft); border: 1px solid #F5C2C2; color: var(--kd-bad-text); border-radius: 12px; padding: .8rem 1rem; margin-top: 1.1rem; }
.kx-dash .kd-limit i { font-size: 20px; flex-shrink: 0; }
.kx-dash .kd-limit a { color: var(--kd-bad-text); font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* Primeiros passos */
.kx-dash .kd-progress-label { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .4rem; }
.kx-dash .kd-steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.kx-dash .kd-steps li { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .35rem 0; border-top: 1px solid #EDF1F6; }
.kx-dash .kd-steps li:first-child { border-top: 0; }
.kx-dash .kd-step-ico { font-size: 20px; flex-shrink: 0; color: #94A3B8; }
.kx-dash .kd-steps li.is-done .kd-step-ico { color: var(--kd-ok); }
.kx-dash .kd-steps li.is-done .kd-step-text { text-decoration: line-through; color: var(--kd-muted); }
.kx-dash .kd-steps li.is-na .kd-step-text { color: var(--kd-muted); }
.kx-dash .kd-step-text { flex: 1; }
.kx-dash .kd-step-link { font-weight: 600; font-size: 13px; color: var(--kd-primary); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; min-height: 32px; }
.kx-dash .kd-step-link:hover { text-decoration: underline; }
.kx-dash .kd-tag { font-size: 12px; font-weight: 600; color: var(--kd-muted); background: #EEF1F6; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }

/* Tickets recentes */
.kx-dash .kd-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 1.1rem 1.25rem .6rem; }
.kx-dash .kd-card-head .kd-card-title { margin: 0; }
.kx-dash .kd-link { font-weight: 600; color: var(--kd-primary); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; min-height: 32px; }
.kx-dash .kd-link:hover { text-decoration: underline; }
.kx-dash .kd-table { margin: 0; }
.kx-dash .kd-table td, .kx-dash .kd-table th { vertical-align: middle; }
.kx-dash .kd-empty { text-align: center; color: var(--kd-muted); padding: 2rem 1rem; }
.kx-dash .kd-empty i { font-size: 28px; display: block; margin-bottom: .4rem; color: #94A3B8; }

/* Atalhos em cartões */
.kx-dash .kd-sc { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem; height: 100%; border: 1px solid var(--kd-border); border-radius: 14px; background: #fff;
  color: var(--kd-text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kx-dash .kd-sc:hover { border-color: #BFCDF5; box-shadow: 0 4px 14px rgba(29, 78, 216, .10); color: var(--kd-text); }
.kx-dash .kd-sc-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--kd-primary-soft); color: var(--kd-primary); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.kx-dash .kd-sc-title { font-weight: 700; display: block; }
.kx-dash .kd-sc-desc { color: var(--kd-muted); font-size: 13px; display: block; }
.kx-dash .kd-note { color: var(--kd-muted); font-size: 12.5px; margin-top: 1rem; }

/* Menu do usuário (topo) */
.kx-user-btn { background: transparent; border: 0; padding: .2rem .4rem; border-radius: 10px; cursor: pointer; }
.kx-user-btn:hover, .kx-user-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.kx-user-btn::after { margin-left: .2rem; color: #CBD5E1; }
img.kx-avatar-sm { object-fit: cover; background: #2563EB; }
.kx-user-menu { min-width: 230px; border-radius: 12px; border-color: #E2E8F0; box-shadow: 0 8px 24px rgba(15, 23, 42, .15); font-size: 14px; }
.kx-user-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; }
.kx-user-menu .dropdown-item i { font-size: 16px; color: #64748B; }
.kx-user-menu .dropdown-item.text-danger i { color: inherit; }