/* ════════════════════════════════════════════════════════════════
   UP Health CRM — Design System v3 (refinamentos sobre v2)
   ──────────────────────────────────────────────────────────────
   Objetivo: elevar o nível visual sem reescrever toda a UI.
   Carregar DEPOIS do <style> inline para sobrepor por cascata.
══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Escala tipográfica refinada ── */
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;   /* base */
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 18px;
  --fs-3xl: 22px;
  --fs-4xl: 28px;
  --fs-5xl: 36px;

  /* ── Espaçamentos (4-base scale) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ── Sombras refinadas (mais sutis, em camadas) ── */
  --shadow-xs: 0 1px 2px rgba(15,14,23,.04);
  --shadow-sm: 0 1px 3px rgba(15,14,23,.06), 0 1px 2px rgba(15,14,23,.04);
  --shadow-md: 0 4px 8px -2px rgba(15,14,23,.06), 0 2px 4px -2px rgba(15,14,23,.04);
  --shadow-lg: 0 12px 20px -8px rgba(15,14,23,.10), 0 4px 8px -4px rgba(15,14,23,.04);
  --shadow-pop: 0 16px 40px -12px rgba(15,14,23,.18);

  /* ── Transições padronizadas ── */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-base: 180ms cubic-bezier(.4,0,.2,1);
  --t-slow: 260ms cubic-bezier(.4,0,.2,1);

  /* ── Ring para focus states ── */
  --ring: 0 0 0 3px rgba(86,42,153,.18);
  --ring-cr: 0 0 0 3px rgba(180,35,24,.18);
}

/* ════════════════════════════════════════════════════════════════
   TIPOGRAFIA — ritmo vertical melhor, numerals tabulares
══════════════════════════════════════════════════════════════════ */
body {
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 {
  letter-spacing: -0.018em;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
}

.h-title { font-size: var(--fs-3xl); font-weight: 500; letter-spacing: -0.022em; }
.h-section { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.015em; }
.h-card { font-size: var(--fs-lg); font-weight: 500; }
.h-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* numerals tabulares para dados financeiros/contagens */
.num, .tabular, .data-table td, .kpi-val { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════
   PAGE HEADER — título grande + breadcrumb + ações primárias
══════════════════════════════════════════════════════════════════ */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-5);
  border-bottom: 1px solid var(--ln);
  margin-bottom: var(--sp-6);
}
.page-head .ph-title-block { min-width: 0; flex: 1; }
.page-head .ph-eyebrow {
  font-size: var(--fs-xs);
  color: var(--ink4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.page-head h1 {
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.page-head .ph-sub {
  font-size: var(--fs-md);
  color: var(--ink3);
  margin-top: 2px;
}
.page-head .ph-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
   KPI CARDS — versão polida (substitui o pattern atual)
══════════════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.kpi {
  background: var(--card);
  border: 1px solid var(--ln);
  border-radius: 14px;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  position: relative;
  overflow: hidden;
}
.kpi:hover { border-color: #DADAE0; box-shadow: var(--shadow-md); }
.kpi .kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-1);
}
.kpi .kpi-label {
  font-size: var(--fs-sm);
  color: var(--ink3);
  font-weight: 500;
  letter-spacing: 0;
}
.kpi .kpi-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ln2);
  color: var(--ink3);
  flex-shrink: 0;
}
.kpi .kpi-icon .material-symbols-outlined { font-size: 20px; }
.kpi.kpi-pu .kpi-icon { background: var(--pu2); color: var(--pu); }
.kpi.kpi-ok .kpi-icon { background: var(--ok2); color: var(--ok); }
.kpi.kpi-wn .kpi-icon { background: var(--wn2); color: var(--wn); }
.kpi.kpi-cr .kpi-icon { background: var(--cr2); color: var(--cr); }
.kpi.kpi-go .kpi-icon { background: var(--go2); color: var(--wn); }
.kpi.kpi-info .kpi-icon { background: #E0EDFF; color: #1A5FB4; }
.kpi.kpi-ink3 .kpi-icon { background: var(--ln2); color: var(--ink3); }

.kpi .kpi-val {
  font-size: var(--fs-4xl);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi .kpi-val .u { color: var(--ink4); font-size: 0.55em; font-weight: 400; margin-left: 4px; }
.kpi .kpi-delta {
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink3);
  font-weight: 500;
}
.kpi .kpi-delta.up { color: var(--ok); }
.kpi .kpi-delta.dn { color: var(--cr); }
.kpi .kpi-delta .material-symbols-outlined { font-size: 14px; }
.kpi .kpi-foot { font-size: var(--fs-xs); color: var(--ink4); margin-top: var(--sp-1); }

/* ════════════════════════════════════════════════════════════════
   SECTION TABS — indicador animado + estado claro
══════════════════════════════════════════════════════════════════ */
.stabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--ln2);
  border-radius: 10px;
  border: 1px solid var(--ln);
  width: fit-content;
}
.stabs .stab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fs-md);
  color: var(--ink3);
  border: 0;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.stabs .stab:hover { color: var(--ink); }
.stabs .stab.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.stabs .stab .material-symbols-outlined { font-size: 16px; }
.stabs .stab .ct {
  font-size: 10.5px;
  background: var(--ln);
  color: var(--ink3);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.stabs .stab.active .ct { background: var(--pu2); color: var(--pu); }
.stabs .stab .ct.cr { background: var(--cr2); color: var(--cr); }

/* ════════════════════════════════════════════════════════════════
   DATA TABLE v3 — densidade certa, zebra sutil, sticky header
══════════════════════════════════════════════════════════════════ */
.tbl3 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-md);
}
.tbl3 thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ln);
  white-space: nowrap;
  z-index: 1;
}
.tbl3 tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ln);
  color: var(--ink2);
  vertical-align: middle;
}
.tbl3 tbody tr { transition: background var(--t-fast); }
.tbl3 tbody tr:hover td { background: rgba(86,42,153,.025); }
.tbl3 tbody tr:last-child td { border-bottom: 0; }
.tbl3 tbody td .strong { color: var(--ink); font-weight: 500; }
.tbl3 .num-cell { text-align: right; font-variant-numeric: tabular-nums; }

/* zebra sutilíssima — desativada por padrão; ativar com .tbl3.zebra */
.tbl3.zebra tbody tr:nth-child(odd) td { background: rgba(238,237,241,.32); }
.tbl3.zebra tbody tr:hover td { background: rgba(86,42,153,.045); }

/* ════════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════════ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
  color: var(--ink3);
  background: var(--card);
  border: 1px dashed var(--ln);
  border-radius: 14px;
}
.empty .empty-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--ln2);
  color: var(--ink4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.empty .empty-icon .material-symbols-outlined { font-size: 28px; }
.empty .empty-title {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.empty .empty-sub {
  font-size: var(--fs-md);
  color: var(--ink3);
  max-width: 360px;
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}

/* ════════════════════════════════════════════════════════════════
   FILTER CHIPS — chips removíveis para filtros aplicados
══════════════════════════════════════════════════════════════════ */
.fchips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--ln2);
  border: 1px solid var(--ln);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--ink2);
  font-weight: 500;
}
.fchip .fchip-k { color: var(--ink4); font-weight: 400; }
.fchip .fchip-x {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ink3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.fchip .fchip-x:hover { background: var(--ln); color: var(--ink); }
.fchip .fchip-x .material-symbols-outlined { font-size: 14px; }

/* ════════════════════════════════════════════════════════════════
   BUTTON REFINEMENTS — sobreposições suaves no .btn existente
══════════════════════════════════════════════════════════════════ */
.btn {
  height: 34px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:focus-visible { outline: 0; box-shadow: var(--ring); }
.btn:active { transform: translateY(0.5px); }

/* Tamanhos */
.btn.sm { height: 28px; padding: 4px 9px; font-size: var(--fs-sm); }
.btn.lg { height: 40px; padding: 9px 18px; font-size: var(--fs-lg); }

/* Variant — primary roxo brand (UP Health) com gradiente sutil */
.btn-primary, .btn-p {
  background: linear-gradient(180deg, #6635B2 0%, #562A99 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 1px 2px rgba(86,42,153,.18);
}
.btn-primary:hover, .btn-p:hover {
  background: linear-gradient(180deg, #5B2EA5 0%, #4A2287 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 2px 6px rgba(86,42,153,.28);
}
.btn-primary:focus-visible, .btn-p:focus-visible { box-shadow: var(--ring); outline: 0; }

/* Variant — purple sólido (CTA brand) */
.btn-brand {
  background: var(--pu);
  color: #fff;
  border-color: transparent;
}
.btn-brand:hover { background: #4a2287; }

/* Variant — danger */
.btn-danger {
  background: transparent;
  color: var(--cr);
  border-color: var(--cr2);
}
.btn-danger:hover { background: var(--cr2); }

/* ════════════════════════════════════════════════════════════════
   INPUT REFINEMENTS
══════════════════════════════════════════════════════════════════ */
.inp {
  height: 36px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.inp:focus { border-color: var(--pu); box-shadow: var(--ring); }

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-icon .input-icon {
  position: absolute;
  left: 11px;
  color: var(--ink4);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.input-with-icon .input-icon .material-symbols-outlined { font-size: 18px; }
.input-with-icon .inp { padding-left: 36px; }

/* ════════════════════════════════════════════════════════════════
   CHIPS / BADGES v3 — versão "soft pill" mais polida
══════════════════════════════════════════════════════════════════ */
.chip3 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ln2);
  color: var(--ink2);
  border: 1px solid transparent;
}
.chip3.pu { background: var(--pu2); color: var(--pu); }
.chip3.ok { background: var(--ok2); color: var(--ok); }
.chip3.wn { background: var(--wn2); color: var(--wn); }
.chip3.cr { background: var(--cr2); color: var(--cr); }
.chip3.go { background: var(--go2); color: var(--wn); }
.chip3.bl { background: #E0EDFF; color: #1A5FB4; }

/* Variante outline (mais elegante para status discretos) */
.chip3.out { background: transparent; border-color: var(--ln); color: var(--ink2); }
.chip3.out.pu { border-color: #D7C5F0; color: var(--pu); }
.chip3.out.ok { border-color: #B5D9C4; color: var(--ok); }
.chip3.out.wn { border-color: #E5C896; color: var(--wn); }
.chip3.out.cr { border-color: #E5BAB4; color: var(--cr); }

.chip3 .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   MODAL REFINEMENTS
══════════════════════════════════════════════════════════════════ */
.modal-overlay, [class*="modal-bg"], [class*="modal-backdrop"] {
  backdrop-filter: blur(4px);
  background: rgba(15,14,23,.40) !important;
}
.modal-content, [class*="modal-panel"] {
  box-shadow: var(--shadow-pop);
  border-radius: 16px;
}

/* ════════════════════════════════════════════════════════════════
   SCROLLBAR — mais discreto
══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ln); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink4); }

/* ════════════════════════════════════════════════════════════════
   FOCUS RING universal acessibilidade
══════════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--pu); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .inp:focus-visible, .chip3:focus-visible { outline: 0; }

/* ════════════════════════════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════════════════════════════ */
@keyframes skel { 0% { background-position: -200px 0 } 100% { background-position: calc(200px + 100%) 0 } }
.skel {
  background: linear-gradient(90deg, var(--ln2) 0%, var(--ln) 50%, var(--ln2) 100%);
  background-size: 200px 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: inline-block;
}

/* ════════════════════════════════════════════════════════════════
   SEG (segmented buttons) — usados em viewMode
══════════════════════════════════════════════════════════════════ */
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--ink3);
  cursor: pointer;
  border-radius: 8px;
  font-weight: 500;
  transition: color var(--t-fast), background var(--t-fast);
}
.seg-btn:hover { color: var(--ink); background: var(--ln2); }
.seg-btn.active {
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--ln);
}
.seg-btn .material-symbols-outlined { font-size: 16px; }

/* ════════════════════════════════════════════════════════════════
   AVATAR
══════════════════════════════════════════════════════════════════ */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--pu2);
  color: var(--pu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0;
}
.avatar.sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.avatar.lg { width: 44px; height: 44px; font-size: var(--fs-md); }
.avatar.xl { width: 64px; height: 64px; font-size: var(--fs-xl); }

/* ════════════════════════════════════════════════════════════════
   CARD v3 — polimento sutil
══════════════════════════════════════════════════════════════════ */
.card {
  border-radius: 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.card.hover:hover { border-color: #DADAE0; box-shadow: var(--shadow-md); }
.card-pad { padding: var(--sp-5); }

/* ════════════════════════════════════════════════════════════════
   DIVIDERS / SEPARATORS
══════════════════════════════════════════════════════════════════ */
.div-h { height: 1px; background: var(--ln); width: 100%; margin: var(--sp-4) 0; }
.div-v { width: 1px; background: var(--ln); align-self: stretch; margin: 0 var(--sp-4); }

/* ════════════════════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════════════════════ */
.pbar { width: 100%; height: 6px; background: var(--ln2); border-radius: 999px; overflow: hidden; }
.pbar > .pbar-fill {
  height: 100%;
  background: var(--pu);
  border-radius: 999px;
  transition: width var(--t-slow);
}
.pbar.ok > .pbar-fill { background: var(--ok); }
.pbar.wn > .pbar-fill { background: var(--wn); }
.pbar.cr > .pbar-fill { background: var(--cr); }