/* ============================================================
   KeS Metas — Estilos de aplicação (sobre os tokens da marca)
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--kes-ink);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
::selection { background: rgba(224,60,49,.35); }

/* Scrollbar discreta */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--kes-navy-700); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Tipo utilitário ---------- */
.eyebrow { font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--fg-accent); }
.muted { color: var(--fg3); }
.fg2 { color: var(--fg2); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn { font-weight: 700; font-size: 14px; border: 0; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 9px; padding: 12px 20px;
  border-radius: var(--radius-pill); transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap; line-height: 1; }
.btn:active { transform: scale(.978); }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--kes-red); color: #fff; }
.btn-primary:hover { background: var(--kes-red-600); box-shadow: var(--shadow-red); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.22); }
.btn-ghost:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.04); }
.btn-subtle { background: var(--kes-navy-800); color: var(--fg1); border: 1px solid var(--border-dark); }
.btn-subtle:hover { background: var(--kes-navy-700); }
.btn-danger { background: transparent; color: var(--kes-red-400); border: 1.5px solid rgba(224,60,49,.4); }
.btn-danger:hover { background: rgba(224,60,49,.12); border-color: var(--kes-red); color: var(--kes-red-400); }
.btn-sm { padding: 9px 15px; font-size: 13px; }
.btn-icon { padding: 9px; width: 38px; height: 38px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .disc { width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.18);
  display: grid; place-items: center; }
.btn .disc svg { width: 12px; height: 12px; }

/* ============================================================
   CARTÕES / SUPERFÍCIES
   ============================================================ */
.card { background: var(--bg2); border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); }
.card-pad { padding: var(--space-5); }

/* ============================================================
   LAYOUT / SHELL
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar { width: 256px; flex-shrink: 0; background: var(--kes-navy); border-right: 1px solid var(--border-dark);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 22px 22px 18px; }
.sidebar-brand img { width: 38px; height: 38px; object-fit: contain; }
.sidebar-brand .bn { font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1; }
.sidebar-brand .bs { font-size: 11px; color: var(--fg3); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }
.nav { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; flex: 1; overflow-y: auto; }
.nav-section { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3);
  font-weight: 700; padding: 16px 12px 7px; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: var(--radius-md);
  color: var(--fg2); font-weight: 600; font-size: 14px; cursor: pointer; border: 0; background: transparent;
  width: 100%; text-align: left; transition: all var(--dur-fast) var(--ease-out); }
.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--fg1); }
.nav-item.active { background: rgba(224,60,49,.14); color: #fff; }
.nav-item.active svg { color: var(--kes-red-400); }
.nav-item .nav-badge { margin-left: auto; font-size: 11px; background: var(--kes-navy-700); color: var(--fg2);
  padding: 2px 8px; border-radius: 999px; font-weight: 700; }

.sidebar-foot { padding: 14px; border-top: 1px solid var(--border-dark); }
.userchip { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--radius-md); }
.userchip .meta { min-width: 0; flex: 1; }
.userchip .nm { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .rl { font-size: 11px; color: var(--fg3); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 28px 34px 56px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* Topbar */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 24px; }
.topbar .ttl h1 { margin: 0; font-size: var(--text-3xl); }
.topbar .ttl p { margin: 6px 0 0; color: var(--fg2); font-size: 14px; }
.topbar .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Avatar */
.avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700;
  flex-shrink: 0; letter-spacing: .02em; }

/* Mobile chrome (escondido no desktop) */
.mobile-appbar { display: none; }
.bottomnav { display: none; }

/* ============================================================
   GRID DE MÉTRICAS
   ============================================================ */
.section-label { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; }
.section-label .eyebrow { margin: 0; }
.section-label .rule { flex: 1; height: 1px; background: var(--border-dark); }

.goals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Cartão de meta (topo) */
.goal-card { background: var(--bg2); border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.goal-card .gc-ico { width: 42px; height: 42px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: rgba(224,60,49,.13); color: var(--kes-red-400); }
.goal-card .gc-ico svg { width: 22px; height: 22px; }
.goal-card .gc-lbl { font-size: 12px; color: var(--fg3); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.goal-card .gc-val { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.goal-card .gc-sub { font-size: 12.5px; color: var(--fg2); }

/* Cartão de indicador com progresso */
.metric-card { background: var(--bg2); border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.metric-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.metric-head .mh-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.metric-head .mh-ico { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--kes-navy-700); color: var(--fg2); flex-shrink: 0; }
.metric-head .mh-ico svg { width: 18px; height: 18px; }
.metric-head .mh-name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.metric-head .mh-edit { color: var(--fg3); background: transparent; border: 0; cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.metric-head .mh-edit:hover { color: var(--kes-red-400); background: rgba(255,255,255,.05); }
.metric-head .mh-edit svg { width: 15px; height: 15px; }
.metric-lock { color: var(--fg3); }
.metric-lock svg { width: 14px; height: 14px; }
.metric-val { display: flex; align-items: baseline; gap: 8px; }
.metric-val .mv { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.metric-val .mt { font-size: 13px; color: var(--fg3); font-weight: 600; }
.metric-pct { margin-left: auto; font-size: 13px; font-weight: 800; }

/* Barra de progresso */
.progress { height: 9px; border-radius: 999px; background: var(--kes-navy-700); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; transition: width var(--dur-slow) var(--ease-out); }
.tone-ok   { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-bad  { color: var(--kes-red-400); }
.bar-ok   { background: var(--ok); }
.bar-warn { background: var(--warn); }
.bar-bad  { background: var(--kes-red); }
.bar-brand { background: var(--kes-red); }

.metric-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--fg3); }
.metric-foot .src { display: inline-flex; align-items: center; gap: 5px; }
.metric-foot .src svg { width: 13px; height: 13px; }

/* ============================================================
   FILTRO DE PERÍODO
   ============================================================ */
.period { position: relative; }
.period-trigger { display: inline-flex; align-items: center; gap: 9px; background: var(--kes-navy-800);
  border: 1px solid var(--border-dark); color: var(--fg1); padding: 10px 15px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 13.5px; cursor: pointer; }
.period-trigger:hover { border-color: rgba(255,255,255,.28); }
.period-trigger svg { width: 16px; height: 16px; color: var(--fg3); }
.period-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 290px;
  background: var(--bg2); border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 14px; }
.period-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip { background: var(--kes-navy-700); border: 1px solid transparent; color: var(--fg1); padding: 9px 12px;
  border-radius: var(--radius-md); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.chip:hover { border-color: rgba(255,255,255,.2); }
.chip.active { background: rgba(224,60,49,.16); border-color: var(--kes-red); color: #fff; }
.period-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-dark); }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.field-group { display: flex; flex-direction: column; gap: 7px; }
label.lbl { font-size: 12px; font-weight: 600; color: var(--fg2); letter-spacing: .02em; }
.field { width: 100%; background: var(--kes-navy-700); border: 1px solid var(--border-dark); color: #fff;
  font-size: 14.5px; padding: 12px 14px; border-radius: var(--radius-md); outline: none;
  transition: all var(--dur-fast) var(--ease-out); }
.field::placeholder { color: var(--fg3); }
.field:focus { border-color: var(--kes-red); box-shadow: 0 0 0 3px rgba(224,60,49,.22); }
select.field { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C8794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }
textarea.field { resize: vertical; min-height: 84px; line-height: 1.5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-err { color: var(--kes-red-400); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.form-err svg { width: 14px; height: 14px; }

/* ============================================================
   MODAL
   ============================================================ */
.overlay { position: fixed; inset: 0; background: rgba(8,12,16,.66); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { width: 100%; max-width: 520px; background: var(--bg2); border: 1px solid var(--border-dark);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;
  animation: rise var(--dur-base) var(--ease-out); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 22px; border-bottom: 1px solid var(--border-dark); position: sticky; top: 0; background: var(--bg2); z-index: 1; }
.modal-head h3 { margin: 0; font-size: var(--text-xl); }
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 0 22px 22px; }
.iconbtn { background: transparent; border: 0; color: var(--fg3); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.iconbtn:hover { color: #fff; background: rgba(255,255,255,.06); }
.iconbtn svg { width: 20px; height: 20px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }

/* ============================================================
   TABELA (consolidado admin)
   ============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-dark); border-radius: var(--radius-lg); background: var(--bg2); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 760px; }
table.tbl th, table.tbl td { padding: 14px 16px; text-align: left; font-size: 13.5px; }
table.tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg3);
  font-weight: 700; border-bottom: 1px solid var(--border-dark); background: var(--kes-navy); position: sticky; top: 0; }
table.tbl tbody tr { border-bottom: 1px solid var(--border-dark); cursor: pointer; transition: background var(--dur-fast); }
table.tbl tbody tr:last-child { border-bottom: 0; }
table.tbl tbody tr:hover { background: rgba(255,255,255,.025); }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.tbl th.num { text-align: right; }
.cell-user { display: flex; align-items: center; gap: 11px; }
.cell-user .nm { font-weight: 700; }
.cell-user .em { font-size: 11.5px; color: var(--fg3); }

.mini-bar { height: 6px; border-radius: 999px; background: var(--kes-navy-700); overflow: hidden; width: 80px; margin-top: 5px; }
.mini-bar > i { display: block; height: 100%; border-radius: 999px; }

/* ============================================================
   BADGES / PÍLULAS DE STATUS
   ============================================================ */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .02em; }
.badge svg { width: 13px; height: 13px; }
.badge-ok   { background: rgba(43,182,115,.15); color: var(--ok); }
.badge-warn { background: rgba(242,169,59,.15); color: var(--warn); }
.badge-bad  { background: rgba(224,60,49,.15); color: var(--kes-red-400); }
.badge-sync { background: rgba(62,142,222,.14); color: #6FB2F2; }
.badge-muted{ background: var(--kes-navy-700); color: var(--fg2); }
.badge-role { background: rgba(224,60,49,.14); color: var(--kes-red-400); }

/* ============================================================
   AGENDAMENTOS
   ============================================================ */
.agenda-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 22px; align-items: start; }
.meeting-row { display: flex; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--border-dark); }
.meeting-row:last-child { border-bottom: 0; }
.meeting-date { width: 58px; flex-shrink: 0; text-align: center; background: var(--kes-navy-700); border-radius: var(--radius-md); padding: 8px 4px; }
.meeting-date .d { font-size: 20px; font-weight: 800; line-height: 1; }
.meeting-date .m { font-size: 10.5px; text-transform: uppercase; color: var(--fg3); font-weight: 700; margin-top: 3px; }
.meeting-info { flex: 1; min-width: 0; }
.meeting-info .mt { font-weight: 700; font-size: 14.5px; }
.meeting-info .ms { font-size: 12.5px; color: var(--fg2); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.meeting-info .ms span { display: inline-flex; align-items: center; gap: 5px; }
.meeting-info .ms svg { width: 13px; height: 13px; color: var(--fg3); }
.meeting-author { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: var(--fg2); }
.meeting-author strong { color: var(--fg1); }

.empty { text-align: center; padding: 48px 24px; color: var(--fg3); }
.empty svg { width: 40px; height: 40px; margin-bottom: 12px; opacity: .6; }

/* ============================================================
   GRÁFICO (sparkline / barras)
   ============================================================ */
.chart-card { background: var(--bg2); border: 1px solid var(--border-dark); border-radius: var(--radius-lg); padding: 20px 22px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.chart-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-tab { background: var(--kes-navy-700); border: 1px solid transparent; color: var(--fg2); font-size: 12px; font-weight: 700;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.chart-tab:hover { color: #fff; }
.chart-tab.active { background: rgba(224,60,49,.16); border-color: var(--kes-red); color: #fff; }

/* segmented control (modo do gráfico) */
.seg { display: inline-flex; background: var(--kes-navy-700); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--fg2); font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.seg button:hover { color: #fff; }
.seg button.active { background: var(--kes-red); color: #fff; }

/* ranking / competição */
.rank-list { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.rank-row { display: flex; align-items: center; gap: 13px; }
.rank-pos { width: 26px; flex-shrink: 0; text-align: center; font-weight: 800; color: var(--fg3); font-size: 13.5px;
  display: grid; place-items: center; }
.rank-row.leader .rank-pos { color: var(--kes-red-400); }
.rank-meta { flex: 1; min-width: 0; }
.rank-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.rank-track { height: 10px; border-radius: 999px; background: var(--kes-navy-700); overflow: hidden; }
.rank-track > i { display: block; height: 100%; border-radius: 999px; transition: width var(--dur-slow) var(--ease-out); }
.rank-val { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; flex-shrink: 0; }
.rank-row.me .rank-name > span:first-child { color: var(--kes-red-400); }
.rank-row.me .rank-pos { color: var(--kes-red-400); }

/* ============================================================
   GOOGLE CONNECT
   ============================================================ */
.gbtn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #3c4043; border: 0;
  font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: var(--radius-pill); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); }
.gbtn:hover { box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.gbtn:disabled { opacity: .7; cursor: wait; }
.gbtn svg { width: 18px; height: 18px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-aside { background: var(--kes-navy); position: relative; overflow: hidden; padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--border-dark); }
.login-aside .pattern { position: absolute; inset: 0; opacity: .05;
  background-image: radial-gradient(var(--kes-red) 1.5px, transparent 1.5px); background-size: 26px 26px; }
.login-aside .glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -180px; top: 40%;
  background: radial-gradient(circle, rgba(224,60,49,.28), transparent 62%); filter: blur(20px); }
.login-form-side { display: grid; place-items: center; padding: 40px; background: var(--kes-ink); }
.login-card { width: 100%; max-width: 380px; }
.quick-access { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.quick-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--kes-navy-800); border: 1px solid var(--border-dark); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); color: var(--fg1); }
.quick-btn:hover { border-color: var(--kes-red); background: var(--kes-navy-700); }
.quick-btn .qa-meta { flex: 1; min-width: 0; }
.quick-btn .qa-nm { font-weight: 700; font-size: 13.5px; }
.quick-btn .qa-rl { font-size: 11.5px; color: var(--fg3); }
.quick-btn .qa-go { color: var(--fg3); }
.quick-btn:hover .qa-go { color: var(--kes-red-400); }
.divider-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--fg3); font-size: 12px; font-weight: 600; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--border-dark); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1080px) {
  .agenda-layout { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .sidebar { display: none; }
  .mobile-appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; background: var(--kes-navy); border-bottom: 1px solid var(--border-dark);
    position: sticky; top: 0; z-index: 50; }
  .mobile-appbar .mb-brand { display: flex; align-items: center; gap: 10px; }
  .mobile-appbar .mb-brand img { width: 30px; height: 30px; }
  .mobile-appbar .mb-brand .bn { font-weight: 800; font-size: 15px; }
  .content { padding: 18px 16px 100px; }
  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--kes-navy); border-top: 1px solid var(--border-dark); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .bottomnav .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 7px 4px; border-radius: var(--radius-md); color: var(--fg3); background: transparent; border: 0; cursor: pointer; }
  .bottomnav .bn-item svg { width: 21px; height: 21px; }
  .bottomnav .bn-item span { font-size: 10px; font-weight: 700; }
  .bottomnav .bn-item.active { color: var(--kes-red-400); }
  .topbar .ttl h1 { font-size: var(--text-2xl); }
}
@media (max-width: 560px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .topbar .actions { width: 100%; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
}

/* ============================================================
   CRM — Funil / Kanban
   ============================================================ */
.crm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.search-box { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--fg3); width: 16px; height: 16px; pointer-events: none; }
.search-box input { padding-left: 38px; }
.crm-toolbar select.field { width: auto; min-width: 150px; padding-top: 10px; padding-bottom: 10px; }

.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }
.kcol { flex: 0 0 290px; width: 290px; background: var(--kes-navy); border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg); display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.kcol.dragover { border-color: var(--kes-red); box-shadow: 0 0 0 2px rgba(224,60,49,.3) inset; }
.kcol-head { padding: 14px 15px 10px; position: sticky; top: 0; }
.kcol-head .kh-top { display: flex; align-items: center; gap: 8px; }
.kcol-head .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.kcol-head .knm { font-weight: 700; font-size: 13.5px; flex: 1; }
.kcol-head .kct { font-size: 12px; font-weight: 700; color: var(--fg2); background: var(--kes-navy-700); border-radius: 999px; padding: 2px 9px; }
.kcol-head .kval { font-size: 12px; color: var(--fg3); margin-top: 5px; font-weight: 600; }
.kcol-body { padding: 6px 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 60px; }
.kcol-empty { text-align: center; color: var(--fg3); font-size: 12px; padding: 18px 8px; border: 1px dashed var(--border-dark); border-radius: var(--radius-md); }

.kcard { background: var(--bg2); border: 1px solid var(--border-dark); border-radius: var(--radius-md);
  padding: 12px 13px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); position: relative; }
.kcard:hover { border-color: rgba(255,255,255,.22); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.kcard.dragging { opacity: .4; }
.kcard .kc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kcard .kc-nm { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.kcard .kc-emp { font-size: 12px; color: var(--fg2); margin-top: 2px; }
.kcard .kc-val { font-weight: 800; font-size: 13px; color: var(--ok); white-space: nowrap; }
.kcard .kc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.kcard .kc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; gap: 8px; }
.kcard .kc-foot .origem { font-size: 11px; color: var(--fg3); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.kcard .kc-actions { display: flex; gap: 4px; }
.kcard .kc-actions button { background: var(--kes-navy-700); border: 0; color: var(--fg2); width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.kcard .kc-actions button:hover { color: #fff; background: var(--kes-red); }
.kcard .kc-actions svg { width: 14px; height: 14px; }

.tag { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: .02em;
  background: var(--kes-navy-700); color: var(--fg2); }
.tag.t-quente { background: rgba(224,60,49,.16); color: var(--kes-red-400); }
.tag.t-morno  { background: rgba(242,169,59,.16); color: var(--warn); }
.tag.t-frio   { background: rgba(62,142,222,.16); color: #6FB2F2; }

/* chips de tags no formulário */
.tagedit { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tagedit .tg { display: inline-flex; align-items: center; gap: 6px; background: var(--kes-navy-700); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12px; font-weight: 600; }
.tagedit .tg button { background: transparent; border: 0; color: var(--fg3); cursor: pointer; display: grid; place-items: center; padding: 2px; }
.tagedit .tg button:hover { color: var(--kes-red-400); }

/* convidados (chips de e-mail) */
.guest-list { display: flex; flex-wrap: wrap; gap: 7px; }
.guest { display: inline-flex; align-items: center; gap: 7px; background: var(--kes-navy-700); border-radius: 999px; padding: 5px 8px 5px 11px; font-size: 12.5px; }
.guest .av { width: 20px; height: 20px; border-radius: 50%; background: var(--kes-red); display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.guest button { background: transparent; border: 0; color: var(--fg3); cursor: pointer; display: grid; place-items: center; }
.guest button:hover { color: var(--kes-red-400); }

.meetlink { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6FB2F2; word-break: break-all; }
.meetlink svg { flex-shrink: 0; }

/* import dropzone */
.model-tbl { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 11.5px; }
.model-tbl th { text-align: left; padding: 8px 10px; background: var(--kes-navy); color: var(--fg-accent);
  font-weight: 700; letter-spacing: .03em; border-bottom: 1px solid var(--border-dark); white-space: nowrap; }
.model-tbl td { padding: 8px 10px; color: var(--fg2); border-bottom: 1px solid var(--border-dark); white-space: nowrap; }
.model-tbl tbody tr:last-child td { border-bottom: 0; }
.dropzone { border: 1.5px dashed var(--border-dark); border-radius: var(--radius-lg); padding: 28px; text-align: center; cursor: pointer; transition: all var(--dur-fast); }
.dropzone:hover { border-color: var(--kes-red); background: rgba(224,60,49,.04); }
.dropzone svg { width: 34px; height: 34px; color: var(--fg3); margin-bottom: 8px; }

/* stage editor rows */
.stage-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-dark); }
.stage-row:last-child { border-bottom: 0; }
.stage-row .handle { color: var(--fg3); display: flex; flex-direction: column; }
.stage-row .ord { display: flex; gap: 2px; }
.stage-row .ord button { background: var(--kes-navy-700); border: 0; color: var(--fg2); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.stage-row .ord button:hover { color: #fff; }
.stage-row .ord button:disabled { opacity: .3; cursor: not-allowed; }

@media (max-width: 860px) {
  .kcol { max-height: none; }
}