/* Apple-grade design tokens + animation system pra LUMA Agency.
   Referência: apple-design-system-analise.txt + apple-animacoes-completo.txt */

:root {
  /* Cores */
  --apex: #0A0908;
  --apex-soft: #1F1B17;
  --off-white: rgb(245, 245, 247);
  --light-gray: rgb(232, 232, 237);
  --text-muted: rgb(110, 110, 115);
  --text-secondary: rgb(134, 134, 139);
  --accent: rgb(0, 113, 227);
  --accent-light: rgb(41, 151, 255);
  --accent-bronze: #8B6F3D;
  --accent-bronze-light: #D4AF7F;

  /* Glass */
  --glass-light: rgba(250, 250, 252, 0.92);
  --glass-dark: rgba(18, 18, 18, 0.8);
  --glass-overlay: rgba(245, 245, 247, 0.8);

  /* Radius */
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 120px;

  /* Curves */
  --ease-apple: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 2.16, 0.64, 1);

  /* Durations */
  --t-fast: 200ms;
  --t-base: 240ms;
  --t-slow: 400ms;
  --t-reveal: 700ms;
}

html {
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background do app · azul gelo solido (sem textura, light-only).
   Dark mode foi removido a pedido do usuario · todas as regras
   [data-theme='dark'] ficam dormentes ja que o data-attr nunca eh setado. */
:root {
  --app-bg-base: #eaf2f9;  /* azul gelo · subtle blue tint */
}

body {
  font-family: 'Inter var', Inter, -apple-system, BlinkMacSystemFont,
    'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
  font-feature-settings: 'cv11';
  background-color: var(--app-bg-base);
}

/* Typography helpers (Apple scale) */
.h-display { font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.374px; }
.h-section { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.28px; }
.h-card    { font-size: 19px; font-weight: 600; line-height: 1.2;  letter-spacing: -0.19px; }
.h-eyebrow { font-size: 12px; font-weight: 600; line-height: 1.3;  letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }
.t-body    { font-size: 15px; line-height: 1.45; letter-spacing: -0.1px; }
.t-caption { font-size: 12px; line-height: 1.35; letter-spacing: -0.12px; color: var(--text-muted); }

/* Glass nav */
.glass-light {
  background: var(--glass-light);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.glass-dark {
  background: var(--glass-dark);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* Cards · branco solido (sem transparencia · contrasta com bg branco gelo) */
.card {
  border-radius: var(--radius-lg);
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.06);
  box-shadow:
    0 1px 2px rgba(10,9,8,0.03),
    0 6px 18px -10px rgba(10,9,8,0.05);
  transition: transform var(--t-base) var(--ease-apple),
              box-shadow var(--t-base) var(--ease-apple);
}
.card:hover {
  box-shadow:
    0 4px 8px rgba(10,9,8,0.08),
    0 20px 40px -12px rgba(10,9,8,0.20);
}

.card-sm { border-radius: var(--radius-md); }
.card-xs { border-radius: var(--radius-sm); }

/* Card-apple · usado em sections do dashboard, etc. Era so um modificador
   de radius mas precisa do bg branco solido pra contrastar com o fundo
   com textura. */
.card-apple {
  border-radius: var(--radius-lg);
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.06);
  box-shadow:
    0 1px 2px rgba(10,9,8,0.03),
    0 6px 18px -10px rgba(10,9,8,0.05);
  transition: box-shadow var(--t-base) var(--ease-apple);
}
.card-apple:hover {
  box-shadow:
    0 4px 8px rgba(10,9,8,0.08),
    0 20px 40px -12px rgba(10,9,8,0.20);
}
[data-theme="dark"] .card-apple { background: #1a1a1d; border-color: rgba(255,255,255,0.06); }

/* Card glass · radius 25 + sombra mais elevada · branco solido tambem */
.card-glass {
  border-radius: 25px;
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.06);
  box-shadow:
    0 2px 6px rgba(10,9,8,0.04),
    0 10px 28px -14px rgba(10,9,8,0.10);
  transition: transform var(--t-base) var(--ease-apple),
              box-shadow var(--t-base) var(--ease-apple);
}
.card-glass:hover {
  box-shadow:
    0 6px 14px rgba(10,9,8,0.10),
    0 24px 48px -14px rgba(10,9,8,0.24);
}
[data-theme="dark"] .card-glass {
  background: #1a1a1d;
  border-color: rgba(255,255,255,0.08);
}

/* Dropdown menu · branco solido tambem (estava 90% transparente) */
.glass-menu {
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.08);
  box-shadow:
    0 12px 32px -12px rgba(10,9,8,0.18),
    0 2px 6px rgba(10,9,8,0.06);
}
[data-theme="dark"] .glass-menu {
  background: #1a1a1d;
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    0 12px 32px -12px rgba(0,0,0,0.6),
    0 2px 6px rgba(0,0,0,0.3);
}

/* Buttons */
.btn-primary {
  background: var(--apex);
  color: white;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform var(--t-fast) var(--ease-spring),
              opacity var(--t-fast) var(--ease-apple);
}
.btn-primary:hover { transform: scale(1.02); opacity: 0.92; }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  background: #ffffff;
  color: var(--apex);
  border: 1px solid rgba(10,9,8,0.12);
  border-radius: var(--radius-pill);
  padding: 7px 17px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--t-fast) var(--ease-apple),
              border-color var(--t-fast) var(--ease-apple);
}
.btn-ghost:hover { background: #fafafa; border-color: rgba(10,9,8,0.2); }
[data-theme="dark"] .btn-ghost { background: #1a1a1d; color: #f5f5f7; border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .btn-ghost:hover { background: #25252a; }

.btn-accent {
  background: var(--accent);
  color: white;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  transition: transform var(--t-fast) var(--ease-spring),
              background var(--t-fast) var(--ease-apple);
}
.btn-accent:hover { transform: scale(1.02); background: var(--accent-light); }

/* Nav links */
.nav-link {
  position: relative;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  transition: color var(--t-base) var(--ease-apple);
}
.nav-link:hover { color: var(--apex); }
.nav-link.active { color: var(--apex); }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -19px;
  height: 2px;
  background: var(--apex);
  border-radius: 2px;
}

/* Reveal system (IntersectionObserver-friendly) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--ease-decel),
              transform var(--t-reveal) var(--ease-decel);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

[data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-decel), transform 600ms var(--ease-decel); }
[data-stagger].in-view > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].in-view > *:nth-child(2) { transition-delay: 60ms; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: 120ms; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: 180ms; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: 240ms; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: 300ms; }
[data-stagger].in-view > *:nth-child(7) { transition-delay: 360ms; }
[data-stagger].in-view > * { opacity: 1; transform: translateY(0); }

/* Avatar (initials bubble) */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--apex);
  color: var(--off-white);
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* Scrollbar fina (Apple-like) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10,9,8,0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(10,9,8,0.25); }

/* Chat bubbles · estilo WhatsApp refinado (sombras suaves, antialiasing) */
.bubble-in,
.bubble-out {
  border: 0;
  outline: 0;
  border-radius: 14px;
  padding: 10px 14px 8px 14px;
  max-width: 78%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  /* Quebra palavras longas sem URL/codigo sair do balao · evita
     overflow horizontal em tela de notebook estreita. */
  word-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.bubble-in {
  background: white;
  color: #111b21;
}
.bubble-out {
  background: #d9fdd3;
  color: #111b21;
}
@keyframes bubble-pop-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.bubble-meta {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(10,9,8,0.5);
  margin-top: 2px;
  text-align: right;
}
.bubble-out .bubble-meta { color: #667781; }

/* Optimistic UI: estados de envio */
.conv-pending .bubble-out {
  position: relative;
}
.conv-pending .bubble-out::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: convShimmer 1.4s linear infinite;
  opacity: 0.6;
}
@keyframes convShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.conv-failed .bubble-out {
  border: 1px solid #fecaca;
  background-color: #fff1f2;
}

/* Painel da conversa: altura calculada pra ocupar a tela inteira em mobile,
   menos sidebar/topbar/bordas. Em desktop usa altura limitada (cabe junto com header). */
.conv-panel-card {
  height: calc(100dvh - 16rem);
  min-height: 360px;
  overflow: hidden;
  /* Override .card defaults · evita borda dupla sutil contra o offwhite */
  border: 1px solid rgba(10,9,8,0.06);
  background: white;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(10,9,8,0.05), 0 8px 24px -12px rgba(10,9,8,0.08);
}
@media (max-width: 767px) {
  .conv-panel-card {
    /* 100dvh já desconta a barra do iOS Safari quando ela aparece. */
    height: calc(100dvh - 8rem);
    border-radius: 12px;
  }
}
/* Compose: respeita safe-area do iPhone (Dynamic Island/home indicator) */
.conv-compose {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* ============================================================
   Tabelas responsivas: viram cards verticais em telas estreitas
   ============================================================
   Aplicação:
     <div class="table-wrap table-stack">
       <table>
         <thead>...</thead>
         <tbody>
           <tr>
             <td data-label="Slug">...</td>
             ...
           </tr>
         </tbody>
       </table>
     </div>

   Sem .table-stack: comportamento normal (scroll horizontal). */
@media (max-width: 640px) {
  .table-stack thead { display: none; }
  .table-stack table,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td { display: block; width: 100%; }
  .table-stack tbody { padding: 6px; }
  .table-stack tr {
    border: 1px solid rgba(10,9,8,0.08);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(10,9,8,0.03);
  }
  .table-stack td {
    border: none !important;
    padding: 4px 0 !important;
    text-align: left !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px !important;
    min-height: 28px;
  }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(10,9,8,0.5);
    font-weight: 600;
    flex-shrink: 0;
  }
  /* Última célula (botão de ação) ocupa linha inteira centralizada */
  .table-stack td.td-actions {
    justify-content: flex-end;
    padding-top: 6px !important;
    margin-top: 4px;
    border-top: 1px dashed rgba(10,9,8,0.06) !important;
  }
  .table-stack td.td-actions::before { display: none; }
  /* Empty state ocupa célula inteira */
  .table-stack td[colspan] { padding: 16px 0 !important; }
  .table-stack td[colspan]::before { display: none; }
  /* divide-y do Tailwind some no mobile (cada row já é card) */
  .table-stack tbody.divide-y > * + *,
  .table-stack tbody[class*="divide-"] > * + * { border-top: none !important; }
}
[data-theme="dark"] .table-stack tr {
  background: #1c1c20 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .table-stack td[data-label]::before { color: rgba(255,255,255,0.5); }

/* ============================================================
   Tap targets: em telas touch, garante 44×44 mínimo nos elementos
   interativos. Aplica só no mobile pra não engordar UI desktop.
   ============================================================ */
@media (max-width: 767px) {
  /* Botões e CTAs principais */
  .btn-accent,
  .btn-primary,
  .btn-ghost {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Inputs, selects, textareas: campo mais alto pra dedo */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="url"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important; /* iOS não dá zoom em fonte ≥16px */
  }
  textarea { min-height: auto; }
  /* Selects e botões dentro de filtros (formulários nos cabeçalhos) */
  form select.border,
  form input.border,
  form button.bg-stone-900 {
    min-height: 44px;
  }
  /* Topbar buttons (notif, theme, search, hamburger) */
  .notif-toggle,
  .topbar-mobile-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  /* Sidebar links já são confortáveis, só garantir altura */
  .sidebar-link { min-height: 44px; }
  /* Botão "apagar" e similares em tabelas */
  .table-stack td.td-actions a,
  .table-stack td.td-actions button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px !important;
  }
  /* Chips de filtro */
  .chip-filter { min-height: 36px; padding-left: 14px; padding-right: 14px; }
  /* Checkbox/radio com hit-area maior via label */
  label > input[type="checkbox"],
  label > input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }
  /* Detalhes dropdown (kebab "···" do conversation panel) */
  details summary.btn-ghost {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Links com text-[11px]/text-[12px] dentro de cards: bump pro tap */
  .card a.text-\[11px\],
  .card a.text-\[12px\],
  .card-apple a.text-\[12px\] {
    display: inline-block;
    padding: 8px 6px;
    margin: -4px -6px;
  }
}


/* Kanban sub-header (sub-coluna por temperatura) */
.kanban-sub-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-top: 8px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: rgba(10,9,8,0.025);
  border-left: 3px solid var(--sub-color, #d4d4d8);
}
.kanban-sub-header:first-child {
  margin-top: 0;
}
.kanban-sub-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
[data-theme="dark"] .kanban-sub-header { background: rgba(255,255,255,0.04); }

/* Lead temperature badges */
.lead-temp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.lead-temp--quente {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  color: #b91c1c;
  border-color: #fecaca;
}
.lead-temp--morno {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #b45309;
  border-color: #fde68a;
}
.lead-temp--frio {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1e40af;
  border-color: #bfdbfe;
}
[data-theme="dark"] .lead-temp--quente {
  background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.35);
}
[data-theme="dark"] .lead-temp--morno {
  background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.35);
}
[data-theme="dark"] .lead-temp--frio {
  background: rgba(59,130,246,0.18); color: #93c5fd; border-color: rgba(59,130,246,0.35);
}

/* Validação inline de formulários */
.input-error {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 4px rgba(248,113,113,0.12) !important;
  background-color: #fff7f7;
}
.input-error:focus {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 4px rgba(248,113,113,0.18) !important;
}
.field-error {
  animation: fieldErrorIn 180ms ease-out;
}
@keyframes fieldErrorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fundo do chat tipo WhatsApp · padrão sutil cinza claro */
.chat-bg {
  background-color: #efeae2;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.4) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.3) 0%, transparent 50%);
}

/* Cores semânticas pras stages do funil */
:root {
  --stage-novo: #3b82f6;        /* azul */
  --stage-qualificando: #8b5cf6; /* violeta */
  --stage-pagamento: #f59e0b;   /* âmbar */
  --stage-confirmado: #10b981;  /* esmeralda */
  --stage-compareceu: #14b8a6;  /* teal */
  --stage-reativacao: #f97316;  /* laranja */
  --stage-encerrado: #94a3b8;   /* slate */
}

/* Coluna do kanban com faixa colorida no topo */
.kanban-col {
  border-radius: var(--radius-lg);
  background: white;
  border: 1px solid rgba(10,9,8,0.05);
  overflow: hidden;
}
.kanban-col-header {
  padding: 12px 14px 10px 14px;
  border-bottom: 1px solid rgba(10,9,8,0.05);
}
.kanban-col-body {
  padding: 10px;
  background: rgba(245, 245, 247, 0.5);
  min-height: 200px;
}

/* KPI cards (dashboard) · brancos com hover shadow.
   Os modificadores -blue/-violet/-amber etc. agora só afetam a cor do
   ícone (no .kpi-icon), o card em si fica limpo. Visual mais sóbrio,
   menos parece dashboard de marketing. */
.kpi {
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.06);
  box-shadow: 0 1px 2px rgba(10,9,8,0.02);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-apple);
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(10,9,8,0.08),
    0 20px 40px -12px rgba(10,9,8,0.20);
}
/* Stubs vazios pra compatibilidade · cards são todos brancos agora */
.kpi-blue, .kpi-violet, .kpi-amber, .kpi-emerald,
.kpi-teal, .kpi-rose, .kpi-slate, .kpi-orange {
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.06);
}

.kpi-label { font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(10,9,8,0.55); }
.kpi-value { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.5px; color: var(--apex); margin-top: 4px; }
.kpi-sub   { font-size: 12px; color: rgba(10,9,8,0.55); margin-top: 4px; }
.kpi-icon {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 12px;
  background: #f5f5f7;
  border: 1px solid rgba(10,9,8,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Calendário (página de agendamentos) */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: rgba(10,9,8,0.06);
  border: 1px solid rgba(10,9,8,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cal-head {
  background: rgba(245, 245, 247, 0.9);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(10,9,8,0.5);
  padding: 8px 0;
}
.cal-cell {
  background: white;
  min-height: 96px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background var(--t-base);
}
.cal-cell:hover { background: #f5f5f7; }
.cal-cell.out   { background: #ffffff; color: rgba(10,9,8,0.35); }
.cal-cell.today { background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); }
.cal-cell.has-appts { cursor: pointer; }
.cal-day {
  font-size: 12px;
  font-weight: 600;
  color: rgba(10,9,8,0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal-cell.today .cal-day-num {
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 15px;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.cal-day-count {
  font-size: 10px;
  color: rgba(10,9,8,0.45);
  font-weight: 500;
}
.cal-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  /* Fundo tintado (14% da cor do status) + borda esquerda sólida e
     bordas laterais sutis. Funciona em browsers recentes (color-mix). */
  background: color-mix(in srgb, var(--stage-color, #94a3b8) 14%, white);
  border: 1px solid color-mix(in srgb, var(--stage-color, #94a3b8) 18%, transparent);
  border-left: 3px solid var(--stage-color, #94a3b8);
  color: var(--apex);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--t-base);
}
.cal-pill:hover {
  background: color-mix(in srgb, var(--stage-color, #94a3b8) 22%, white);
  transform: translateY(-1px);
}
.cal-pill-time { font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal-pill-name { color: rgba(10,9,8,0.6); overflow: hidden; text-overflow: ellipsis; }
.cal-pill-prof {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(10,9,8,0.06);
  color: rgba(10,9,8,0.55);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 14px;
}
.cal-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--stage-color, #94a3b8);
  flex-shrink: 0;
}
.cal-more {
  font-size: 10px;
  color: rgba(10,9,8,0.5);
  font-weight: 500;
  padding: 2px 6px;
}
/* ============================================================
   Indicador visual "preenchido / salvo" · campos com valor ganham
   [data-filled] via forms.js. Quando NAO estao em foco, o fundo
   fica cinza claro · sinaliza ao cliente que aquela info ja foi
   configurada. Em foco, volta pra branco · mostra que ta editavel.
   ============================================================ */
input[data-filled]:not(:focus),
textarea[data-filled]:not(:focus),
select[data-filled]:not(:focus) {
  background-color: #f5f5f4; /* stone-100 */
  color: #44403c;             /* stone-700 */
}
input[data-filled]:focus,
textarea[data-filled]:focus,
select[data-filled]:focus {
  background-color: #ffffff;
}

[data-theme="dark"] input[data-filled]:not(:focus),
[data-theme="dark"] textarea[data-filled]:not(:focus),
[data-theme="dark"] select[data-filled]:not(:focus) {
  background-color: #1f1f23;
  color: #d6d3d1;
}

/* Time inputs · custom wheel picker (iOS-style) */
input[type="time"].time-wheel-source { display: none; }

.time-wheel-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(10,9,8,0.12);
  background: white;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--apex);
  cursor: pointer;
  min-width: 84px;
  transition: all var(--t-fast);
}
.time-wheel-trigger:hover {
  border-color: rgba(10,9,8,0.22);
  background: rgba(245,245,247,0.7);
}
.time-wheel-trigger:focus {
  outline: none;
  border-color: rgba(96,165,250,0.5);
  box-shadow: 0 0 0 4px rgba(96,165,250,0.15);
}

.time-wheel-overlay {
  position: fixed; inset: 0;
  background: rgba(10,9,8,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 60;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.time-wheel-overlay.open { display: flex; animation: cmdk-overlay-in 200ms var(--ease-decel); }

.time-wheel-modal {
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.08);
  border-radius: 24px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 24px 60px -16px rgba(10,9,8,0.25);
  animation: cmdk-modal-in 220ms var(--ease-decel);
}
.time-wheel-header {
  text-align: center;
  font-size: 13px;
  color: rgba(10,9,8,0.5);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}
.time-wheel-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  height: 220px;
  margin-bottom: 16px;
}
.time-wheel-separator {
  font-size: 28px;
  font-weight: 600;
  color: rgba(10,9,8,0.4);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.time-wheel-col {
  height: 220px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  padding: 88px 0; /* 88 = 220/2 - 22 (item half height) · centro alinha */
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
  cursor: grab;
}
.time-wheel-col:active,
.time-wheel-col.is-dragging { cursor: grabbing; }
.time-wheel-col::-webkit-scrollbar { display: none; }

/* Wrap pra coluna · permite ancorar setas em cima/em baixo */
.time-wheel-col-wrap {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.time-wheel-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,9,8,0.04);
  border: 1px solid rgba(10,9,8,0.08);
  border-radius: 8px;
  color: rgba(10,9,8,0.55);
  font-size: 11px;
  cursor: pointer;
  z-index: 3;
  transition: background var(--t-fast) var(--ease-apple), color var(--t-fast) var(--ease-apple);
  user-select: none;
}
.time-wheel-arrow:hover { background: rgba(29,78,216,0.08); color: #1d4ed8; }
.time-wheel-arrow:active { transform: translateX(-50%) scale(0.95); }
.time-wheel-arrow.up { top: 4px; }
.time-wheel-arrow.down { bottom: 4px; }
.time-wheel-item {
  scroll-snap-align: center;
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: rgba(10,9,8,0.4);
  transition: color 150ms var(--ease-apple), font-weight 150ms var(--ease-apple);
}
.time-wheel-item.is-selected {
  color: #1d4ed8;
  font-weight: 700;
}
.time-wheel-item.is-near {
  color: rgba(10,9,8,0.65);
}
.time-wheel-band {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 14px;
  background: rgba(147,197,253,0.22);   /* azul mais claro */
  border-top: 1px solid rgba(147,197,253,0.45);
  border-bottom: 1px solid rgba(147,197,253,0.45);
  pointer-events: none;
  z-index: 1;
}
.time-wheel-actions {
  display: flex; gap: 8px;
}
.time-wheel-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);
}
.time-wheel-cancel {
  background: rgba(10,9,8,0.05);
  color: rgba(10,9,8,0.7);
}
.time-wheel-cancel:hover { background: rgba(10,9,8,0.09); }
.time-wheel-confirm {
  background: var(--apex);
  color: white;
}
.time-wheel-confirm:hover { background: rgba(10,9,8,0.85); }

/* Day popover · abre ao clicar em qualquer lugar da cal-cell */
.day-popover-overlay {
  position: fixed; inset: 0;
  background: rgba(10,9,8,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 50;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  animation: cmdk-overlay-in 200ms var(--ease-decel);
}
.day-popover-overlay.open { display: flex; }
.day-popover {
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.08);
  border-radius: 20px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px -16px rgba(10,9,8,0.25);
}
.day-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.day-popover-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--apex);
  text-transform: capitalize;
}
.day-popover-close {
  background: rgba(10,9,8,0.04);
  border: none; border-radius: 10px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(10,9,8,0.5);
  transition: all var(--t-fast);
}
.day-popover-close:hover { background: rgba(10,9,8,0.08); color: var(--apex); }
.day-popover-list {
  display: flex; flex-direction: column; gap: 8px;
}
.day-popover-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.06);
  border-radius: 14px;
  text-decoration: none;
  color: var(--apex);
  transition: all var(--t-base);
}
.day-popover-item:hover {
  background: white;
  border-color: rgba(10,9,8,0.12);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(10,9,8,0.08);
}
.day-popover-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  min-width: 50px;
}
.day-popover-name {
  flex: 1;
  font-size: 13px;
  color: rgba(10,9,8,0.75);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.day-popover-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--stage-color, rgba(10,9,8,0.06));
  color: rgba(255,255,255,0.95);
}
.day-popover-empty {
  text-align: center; color: rgba(10,9,8,0.4);
  font-size: 13px; padding: 24px 0;
}

/* Cores oficiais da agenda · vide schema discutido com Gustavo:
   amarelo    → aguardando pagamento (pending_payment)
   laranja    → pago, lembrete enviado mas paciente nao confirmou (confirmed sem reminder_confirmed_at)
   verde      → paciente confirmou presenca (confirmed_attendance · estado derivado)
   preto      → paciente compareceu (attended)
   vermelho   → faltou (no_show)
   tracejado  → cancelado (canceled) */
/* Legenda de cores do calendario · linha de chips Cor + Rotulo PT-BR.
   Renderizada ABAIXO do grid. */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  padding: 8px 12px;
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  font-size: 11px;
  color: #57534e;
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--stage-color, #9ca3af);
  border: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
[data-theme="dark"] .cal-legend {
  background: #1a1a1d;
  border-color: rgba(255,255,255,0.06);
  color: #a8a29e;
}

.cal-status-pending_payment      { --stage-color: #eab308; }  /* amarelo claro */
.cal-status-pending              { --stage-color: #eab308; }  /* alias legado */
.cal-status-confirmed            { --stage-color: #f97316; }  /* laranja */
.cal-status-confirmed_attendance { --stage-color: #10b981; }  /* verde */
.cal-status-attended             { --stage-color: #0a0908; }  /* preto */
.cal-status-no_show              { --stage-color: #ef4444; }  /* vermelho */
.cal-status-canceled             { --stage-color: #d6d3d1; }  /* cinza claro */

.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: white;
  border: 1px solid rgba(10,9,8,0.08);
  color: rgba(10,9,8,0.7);
  transition: all var(--t-base);
}
.cal-nav-btn:hover { background: rgba(245,245,247,1); border-color: rgba(10,9,8,0.16); }

@media (max-width: 768px) {
  .cal-cell { min-height: 60px; padding: 4px 5px; }
  .cal-pill-name { display: none; }
}

/* Conversas — chips de filtro (buckets) */
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(10,9,8,0.08);
  font-size: 13px;
  font-weight: 500;
  color: rgba(10,9,8,0.75);
  white-space: nowrap;
  transition: all var(--t-base);
}
.chip-filter:hover { border-color: rgba(10,9,8,0.18); transform: translateY(-1px); }
.chip-filter .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 7px;
  height: 20px;
  border-radius: 999px;
  background: rgba(10,9,8,0.06);
  font-size: 11px;
  font-weight: 600;
  color: rgba(10,9,8,0.6);
  font-variant-numeric: tabular-nums;
}
.chip-filter.active {
  background: var(--apex);
  color: white;
  border-color: var(--apex);
}
.chip-filter.active .chip-count {
  background: rgba(255,255,255,0.18);
  color: white;
}
.chip-rose.active    { background: #e11d48; border-color: #e11d48; }
.chip-amber.active   { background: #d97706; border-color: #d97706; }
.chip-orange.active  { background: #ea580c; border-color: #ea580c; }
.chip-emerald.active { background: #059669; border-color: #059669; }
.chip-blue.active    { background: #2563eb; border-color: #2563eb; }
.chip-slate.active   { background: var(--apex); border-color: var(--apex); }

/* Conversas — split view */
.conv-split {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 16px;
  align-items: stretch;
}
.conv-list-wrap {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(10,9,8,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 16rem);
}
.conv-list-header {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(10,9,8,0.05);
  background: rgba(245,245,247,0.6);
}
.conv-list { flex: 1; overflow-y: auto; }
.conv-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(10,9,8,0.04);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-base);
}
.conv-card:hover { background: rgba(245,245,247,0.5); }
.conv-card.selected { background: linear-gradient(90deg, rgba(0,113,227,0.06) 0%, rgba(0,113,227,0.02) 100%); }
.conv-card.selected::before {
  content: '';
  width: 3px;
  background: var(--stage-novo);
  margin-left: -14px;
  margin-right: 11px;
  border-radius: 0 2px 2px 0;
}
.conv-card-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  color: #5b21b6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid rgba(10,9,8,0.04);
}
.conv-card-body { flex: 1; min-width: 0; }
.conv-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.conv-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--apex);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.conv-card-time {
  font-size: 11px;
  color: rgba(10,9,8,0.45);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.conv-card-snippet {
  font-size: 12px;
  color: rgba(10,9,8,0.55);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.conv-card-arrow { color: rgba(10,9,8,0.4); margin-right: 3px; }
.conv-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.conv-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.conv-badge-unread { background: #2563eb; color: white; }
.conv-badge-niche  { background: rgba(10,9,8,0.05); color: rgba(10,9,8,0.6); text-transform: lowercase; }
.conv-badge-fup    { background: #fed7aa; color: #9a3412; }
.conv-badge-react  { background: #fde68a; color: #92400e; }
.conv-badge-giveup { background: #fecaca; color: #991b1b; }
.conv-badge-opt    { background: #fecaca; color: #991b1b; }
.conv-badge-arch   { background: #e2e8f0; color: #475569; }

.conv-panel-wrap { min-width: 0; overflow: hidden; }
.conv-empty {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(10,9,8,0.06);
  height: calc(100dvh - 16rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.conv-empty .card { display: none; }

/* Laptops 13-14": reduz coluna da lista pra deixar mais espaco pro thread.
   Acima de 1366px volta pro min 320/max 380. */
@media (min-width: 1025px) and (max-width: 1366px) {
  .conv-split {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 1024px) {
  .conv-split { grid-template-columns: 1fr; }
  .conv-list-wrap { height: auto; max-height: 50vh; }
}

/* Botão voltar do painel mobile */
.conv-back {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 8px;
  margin-bottom: 8px;
  background: white;
  border: 1px solid rgba(10,9,8,0.08);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(10,9,8,0.7);
  cursor: pointer;
}
.conv-back:active { background: rgba(245,245,247,1); }

/* Mobile single-pane: alterna lista vs painel */
@media (max-width: 768px) {
  .conv-split {
    display: block; /* sai do grid pra controlar visibilidade */
  }
  .conv-list-wrap { max-height: none; height: calc(100dvh - 18rem); display: flex; }
  .conv-panel-wrap { display: none; }
  .conv-split.conv-mobile-show-panel .conv-list-wrap { display: none; }
  .conv-split.conv-mobile-show-panel .conv-panel-wrap { display: block; }
  .conv-split.conv-mobile-show-panel .conv-back { display: inline-flex; }
  .conv-split.conv-mobile-show-panel .conv-empty { height: calc(100dvh - 14rem); }
  /* Painel da conversa em altura cheia no mobile */
  .conv-panel-wrap .card { height: calc(100dvh - 14rem) !important; }
}

/* Mobile drawer nav */
.mobile-nav-link {
  display: block;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(10,9,8,0.75);
  border-radius: 10px;
  letter-spacing: -0.01em;
}
.mobile-nav-link:active,
.mobile-nav-link:hover { background: rgba(10,9,8,0.04); color: var(--apex); }
.mobile-nav-link.active {
  background: rgba(0,113,227,0.08);
  color: rgb(0,113,227);
  font-weight: 600;
}

/* Mobile-specific overrides */
@media (max-width: 768px) {
  /* Conversation panel: ocupar tela toda no mobile */
  .conv-list-wrap { height: auto; max-height: 60vh; }
  .conv-empty { height: 40vh; }
  .conv-card { padding: 11px 12px; }
  .conv-card-avatar { width: 36px; height: 36px; }
  .conv-card-name { font-size: 13.5px; }
  .conv-card-snippet { font-size: 11.5px; }

  /* Kanban: mais estreito no mobile */
  .kanban-col-body { min-height: 100px; }

  /* KPI dashboard: padding menor */
  .kpi { padding: 16px 18px; }
  .kpi-value { font-size: 26px; }

  /* Tabelas com scroll horizontal */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 560px; }

  /* Chips de filtro: scroll horizontal sem corte */
  .chip-filter { padding: 6px 11px; font-size: 12.5px; }
  .chip-filter .chip-count { min-width: 18px; height: 18px; font-size: 10px; padding: 0 5px; }
}

/* Touch targets mais generosos no mobile */
@media (max-width: 768px) and (pointer: coarse) {
  .btn-ghost, .btn-accent { min-height: 40px; }
  input, select, textarea { font-size: 16px !important; } /* evita zoom no iOS */
}

/* ========================================================================
   QUICK WINS · polish do front-end
   ======================================================================== */

/* C11: 100dvh em vez de 100vh — evita corte com Dynamic Island/teclado iOS */
.h-screen-d { height: 100dvh; }
.min-h-screen-d { min-height: 100dvh; }

/* A3: Skeleton loaders */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(10,9,8,0.05) 0%, rgba(10,9,8,0.09) 50%, rgba(10,9,8,0.05) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line { height: 12px; margin-bottom: 6px; }
.skeleton-line.w-full { width: 100%; }
.skeleton-line.w-2-3 { width: 66%; }
.skeleton-line.w-1-2 { width: 50%; }
.skeleton-line.w-1-3 { width: 33%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card {
  padding: 16px;
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(10,9,8,0.05);
}

/* A4: Toast notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  background: white;
  border: 1px solid rgba(10,9,8,0.08);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--apex);
  box-shadow: 0 8px 24px rgba(10,9,8,0.08), 0 2px 6px rgba(10,9,8,0.04);
  pointer-events: auto;
  animation: toast-in 0.32s var(--ease-spring);
  transition: opacity 0.32s var(--ease-decel), transform 0.32s var(--ease-decel);
}
.toast.toast-out {
  opacity: 0;
  transform: translateX(20px);
}
.toast-success { border-left: 3px solid #10b981; }
.toast-error { border-left: 3px solid #ef4444; }
.toast-info { border-left: 3px solid #3b82f6; }
.toast-icon { flex-shrink: 0; }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@media (max-width: 640px) {
  .toast-container { left: 12px; right: 12px; max-width: none; top: 12px; }
}

/* A5: Tooltips (puro CSS · zero JS) */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(10,9,8,0.92);
  color: white;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-decel), transform 160ms var(--ease-decel);
  z-index: 50;
  box-shadow: 0 4px 12px rgba(10,9,8,0.15);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }

/* A2: Empty states */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f5f5f7 0%, #ebebed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10,9,8,0.35);
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--apex);
  letter-spacing: -0.01em;
}
.empty-state-text {
  font-size: 13px;
  color: rgba(10,9,8,0.55);
  max-width: 360px;
  line-height: 1.5;
}
.empty-illu {
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 6px rgba(10,9,8,0.04));
  animation: emptyIlluIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.empty-illu svg { display: block; max-width: 140px; height: auto; }
@keyframes emptyIlluIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="dark"] .empty-illu { opacity: 0.85; }
[data-theme="dark"] .empty-illu svg rect[fill="#fff"],
[data-theme="dark"] .empty-illu svg rect[fill="white"] { fill: #1c1c20; }
[data-theme="dark"] .empty-state-text { color: rgba(255,255,255,0.55); }

/* C13: View transitions API · transição suave entre páginas */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}
::view-transition-new(root) {
  animation: 200ms cubic-bezier(0.0, 0, 0.2, 1) both fade-in;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ========================================================================
   B6: Sidebar lateral colapsável
   ======================================================================== */

:root {
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--t-base) var(--ease-apple);
}
[data-sidebar="collapsed"] .app-shell {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

/* Overlay só existe no DOM mas está invisível por padrão; mobile media
   query torna visível quando data-sidebar-mobile="open". Sem isso, o
   div ocupava a 1ª coluna do grid no desktop e empurrava a sidebar pra
   direita. */
.sidebar-overlay { display: none; }

.sidebar {
  position: sticky;
  top: 12px;
  align-self: start;
  height: calc(100dvh - 24px);
  margin: 12px 0 12px 12px;
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.06);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
  box-shadow: 0 4px 16px -8px rgba(10,9,8,0.08);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--apex);
  border-bottom: 1px solid rgba(10,9,8,0.05);
  flex-shrink: 0;
  height: var(--topbar-h);
}
.sidebar-brand svg { flex-shrink: 0; }
.sidebar-brand-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
[data-sidebar="collapsed"] .sidebar-brand-text { display: none; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 10px 10px 10px;
  scrollbar-width: thin;
}
.sidebar-group {
  margin-bottom: 18px;
}
.sidebar-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(10,9,8,0.4);
  padding: 0 10px 6px 10px;
  white-space: nowrap;
}
[data-sidebar="collapsed"] .sidebar-group-label {
  visibility: hidden;
  height: 8px;
  padding: 0;
  /* Texto ainda flui horizontalmente mesmo invisivel · clipa pra nao
     gerar scroll horizontal no .sidebar-nav. */
  overflow: hidden;
}

/* Defesa em profundidade · garante que nenhum overflow horizontal
   escape do .sidebar-nav no modo colapsado. */
[data-sidebar="collapsed"] .sidebar-nav { overflow-x: hidden; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: rgba(10,9,8,0.65);
  text-decoration: none;
  margin-bottom: 1px;
  position: relative;
  transition: background var(--t-fast) var(--ease-apple), color var(--t-fast) var(--ease-apple);
}
.sidebar-link:hover { background: rgba(10,9,8,0.04); color: var(--apex); }
.sidebar-link.active {
  background: rgba(0,113,227,0.08);
  color: rgb(0,113,227);
  font-weight: 600;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px; bottom: 8px;
  width: 3px;
  background: rgb(0,113,227);
  border-radius: 0 3px 3px 0;
}
.sidebar-link-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-link-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-sidebar="collapsed"] .sidebar-link {
  justify-content: center;
  padding: 9px 0;
}
[data-sidebar="collapsed"] .sidebar-link-label { display: none; }
[data-sidebar="collapsed"] .sidebar-link[data-tooltip]::after {
  left: calc(100% + 8px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(-4px);
}
[data-sidebar="collapsed"] .sidebar-link[data-tooltip]:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* Sidebar colapsado · tooltip dos botoes auxiliares some (Recolher,
   atribuicao 'by ELEV Tech' / 'Dr. Gustavo · admin', Sair).
   Icones sao auto-explicativos. Manter so o tooltip dos sidebar-link
   principais (Visao geral, Agenda, etc · esses precisam pra navegacao). */
[data-sidebar="collapsed"] .sidebar-collapse[data-tooltip]::after,
[data-sidebar="collapsed"] .sidebar-tenant[data-tooltip]::after,
[data-sidebar="collapsed"] .sidebar-logout[data-tooltip]::after {
  display: none;
}

.sidebar-foot {
  flex-shrink: 0;
  padding: 10px 14px 14px 14px;
  border-top: 1px solid rgba(10,9,8,0.05);
}
.sidebar-tenant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(10,9,8,0.04);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(10,9,8,0.7);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
[data-sidebar="collapsed"] .sidebar-tenant {
  background: transparent;
  padding: 4px;
  justify-content: center;
}
[data-sidebar="collapsed"] .sidebar-tenant-name { display: none; }
.sidebar-tenant-avatar {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--apex);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.sidebar-tenant-logo {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(10,9,8,0.04);
}
.sidebar-elev-mark {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-tenant-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-collapse {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  margin-top: 8px;
  border-radius: 10px;
  color: rgba(10,9,8,0.55);
  font-size: 11px;
  background: transparent;
  transition: background var(--t-fast) var(--ease-apple), color var(--t-fast) var(--ease-apple);
}
.sidebar-collapse:hover { background: rgba(10,9,8,0.05); color: var(--apex); }
[data-sidebar="collapsed"] .sidebar-collapse-label { display: none; }
[data-sidebar="collapsed"] .sidebar-collapse-icon { transform: rotate(180deg); }

.sidebar-logout-form { width: 100%; margin-top: 8px; }
.sidebar-logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 10px;
  color: rgba(10,9,8,0.55);
  font-size: 11px;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-apple), color var(--t-fast) var(--ease-apple);
}
.sidebar-logout:hover { background: rgba(220,38,38,0.08); color: #b91c1c; }
[data-sidebar="collapsed"] .sidebar-logout-label { display: none; }
[data-theme="dark"] .sidebar-logout { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .sidebar-logout:hover { background: rgba(248,113,113,0.12); color: #fca5a5; }

/* Alert strip · cards flutuantes acima do conteudo (configuracao pendente,
   periodo de teste, atendimento pausado). Cards arredondados, branco-tinted,
   borda esquerda colorida pra status. */
.alert-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 28px 0 28px;
}
.alert-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(10,9,8,0.08);
  text-decoration: none;
  transition: box-shadow var(--t-base) var(--ease-apple),
              transform var(--t-base) var(--ease-apple);
  box-shadow: 0 2px 6px rgba(10,9,8,0.04),
              0 8px 22px -10px rgba(10,9,8,0.08);
}
a.alert-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(10,9,8,0.08),
              0 16px 32px -12px rgba(10,9,8,0.16);
}
.alert-card--amber .alert-text { color: #78350f; }
.alert-card--amber .alert-cta { color: #92400e; }
.alert-card--blue .alert-text { color: #1e3a8a; }
.alert-card--red .alert-text { color: #7f1d1d; }
.alert-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: #fef3c7;
  color: #78350f;
  font-size: 11px;
  font-weight: 700;
}
.alert-text { flex: 1; font-size: 13px; line-height: 1.4; }
.alert-cta { flex-shrink: 0; font-size: 12px; font-weight: 600; }

/* Topbar transparente · textura do body aparece atras */
.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 22px;
  height: var(--topbar-h);
}

.app-content {
  padding: 24px 28px 40px 28px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Dashboards data-rich (financeiro, diagnostico) abrem pra mais largura ·
   conteúdo se aproveita do desktop wide em vez de ficar comprimido. */
.app-content.dashboard-wide {
  max-width: 1600px;
}

/* Kanban (funil) precisa de tela inteira · colunas lado a lado, paciente
   olha de relance. Remove max-width pra ocupar toda a área disponível
   (já descontando sidebar). */
.app-content.dashboard-full {
  max-width: none;
}

/* Layout-main precisa de min-width 0 pro grid funcionar com filhos largos
   (ex: kanban com colunas min-w-max). Senao o conteudo empurra o layout
   pra direita e a tela corta. */
.layout-main {
  min-width: 0;
  overflow-x: hidden;
}

/* Laptops 13"-15" (notebooks · 901-1366px): sidebar mais enxuta e padding
   menor pro conteudo nao ficar cortado. Acima de 1366px (monitor externo,
   desktop) volta pros valores cheios. */
@media (min-width: 901px) and (max-width: 1366px) {
  :root {
    --sidebar-w: 196px;
    --topbar-h: 52px;
  }
  .app-content { padding: 18px 20px 32px 20px; }
  .sidebar { margin: 10px 0 10px 10px; }
  .sidebar-brand { padding: 14px 14px 10px 14px; }
  .sidebar-link { padding: 8px 12px; }
}

/* Mobile: sidebar vira drawer overlay */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100dvh;
    width: var(--sidebar-w);
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease-apple);
    box-shadow: 4px 0 20px rgba(10,9,8,0.12);
  }
  [data-sidebar-mobile="open"] .sidebar { transform: translateX(0); }

  .sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(10,9,8,0.4);
    z-index: 28;
    animation: cmdk-overlay-in 200ms var(--ease-decel);
  }
  [data-sidebar-mobile="open"] .sidebar-overlay { display: block !important; }

  .topbar { padding: 0 12px; }
  .app-content { padding: 14px 12px 28px 12px; }
  .topbar-mobile-toggle { display: inline-flex !important; }

  /* Alert strip · padding lateral menor pra nao desperdicar espaco */
  .alert-strip { padding: 10px 12px 0 12px; gap: 8px; }
  .alert-card { padding: 10px 12px; border-radius: 14px; }
  .alert-text { font-size: 12px; }
  .alert-cta { font-size: 11px; }

  /* Cards · radius e padding menores em mobile */
  .card, .card-apple { border-radius: 18px; padding: 16px !important; }
  .card-glass { border-radius: 20px; padding: 16px !important; }

  /* Headings menores · h-display ocupa muito espaco em mobile */
  .h-display { font-size: 26px; }
  .h-section { font-size: 22px; }

  /* Inputs · 16px pra evitar zoom auto do iOS Safari */
  input[type="text"], input[type="email"], input[type="url"],
  input[type="tel"], input[type="number"], input[type="password"],
  input[type="search"], textarea, select {
    font-size: 16px !important;
  }

  /* Topbar mobile toggle · botao mais visivel sobre textura */
  .topbar-mobile-toggle {
    background: #ffffff;
    border: 1px solid rgba(10,9,8,0.08);
    border-radius: 10px;
    padding: 8px;
  }

  /* KPI cards · 1 coluna em mobile pra leitura confortavel */
  .kpi-scroll { grid-template-columns: 1fr !important; gap: 10px !important; }
  .kpi { padding: 16px 18px; }
  .kpi-value { font-size: 26px; }

  /* Calendar · cell menor + header label compacto */
  .cal-cell { min-height: 56px; padding: 4px 5px; }
  .cal-day-num { font-size: 11px; }
  .cal-pill { padding: 2px 5px; font-size: 10px; }
  .cal-pill-prof { display: none; }

  /* Forms · botao salvar full-width em mobile */
  form .flex.justify-end { flex-wrap: wrap; }
  form .flex.justify-end .btn-accent,
  form .flex.justify-end .btn-ghost { flex: 1; justify-content: center; min-height: 44px; }
}
.topbar-mobile-toggle {
  display: none !important;
  margin-right: auto;
}

/* Dark mode overrides pra sidebar */
[data-theme="dark"] .sidebar {
  background: #0e0e10;
  border-right-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .sidebar-brand { border-bottom-color: rgba(255,255,255,0.06); color: #f5f5f7; }
[data-theme="dark"] .sidebar-link { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.05); color: #f5f5f7; }
[data-theme="dark"] .sidebar-link.active { background: rgba(96,165,250,0.18); color: #93c5fd; }
[data-theme="dark"] .sidebar-link.active::before { background: #93c5fd; }
[data-theme="dark"] .sidebar-foot { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .sidebar-tenant { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
[data-theme="dark"] .sidebar-tenant-avatar { background: rgba(255,255,255,0.1); color: #f5f5f7; }
[data-theme="dark"] .topbar { background: rgba(15,15,18,0.85); border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .notif-toggle { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .notif-toggle:hover { background: rgba(255,255,255,0.08); color: #f5f5f7; }

/* B9: Dark mode · "beta" — overrides básicos. Templates ainda usam Tailwind
   estático em muitos lugares, então não fica 100% mas melhora bastante. */
[data-theme="dark"] {
  --apex: #f5f5f7;
  --apex-soft: #d4d4d8;
  --off-white: #0a0a0c;
  --light-gray: #18181b;
  --text-muted: #a1a1aa;
  --text-secondary: #71717a;
  --glass-light: rgba(15,15,18,0.85);
}
[data-theme="dark"] body { background-color: #0a0a0c; color: #f5f5f7; }
[data-theme="dark"] .bg-offwhite,
[data-theme="dark"] .bg-white { background: #18181b !important; color: #f5f5f7; }
[data-theme="dark"] .glass-light {
  background: rgba(15,15,18,0.85);
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .card {
  background: #1a1a1d;
  border-color: rgba(255,255,255,0.06);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.4),
    0 6px 18px -10px rgba(0,0,0,0.5);
}
[data-theme="dark"] .card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 4px rgba(0,0,0,0.4),
    0 14px 28px -12px rgba(0,0,0,0.55);
}
[data-theme="dark-legacy-removed"] .card,
[data-theme="dark"] .card-sm,
[data-theme="dark"] .card-apple,
[data-theme="dark"] .card-xs {
  background: #1c1c20;
  border-color: rgba(255,255,255,0.06);
  color: #f5f5f7;
}
[data-theme="dark"] .card:hover { box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5); }
[data-theme="dark"] .text-apex { color: #f5f5f7 !important; }
[data-theme="dark"] .text-stone-900,
[data-theme="dark"] .text-stone-800,
[data-theme="dark"] .text-stone-700,
[data-theme="dark"] .text-stone-600 { color: #d4d4d8 !important; }
[data-theme="dark"] .text-stone-500,
[data-theme="dark"] .text-stone-400 { color: #a1a1aa !important; }
[data-theme="dark"] .text-stone-300,
[data-theme="dark"] .text-stone-200 { color: #71717a !important; }
[data-theme="dark"] .border-stone-200,
[data-theme="dark"] .border-stone-300,
[data-theme="dark"] .border-stone-100 { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .bg-stone-50,
[data-theme="dark"] .bg-stone-100 { background: #27272a !important; color: #d4d4d8 !important; }
[data-theme="dark"] .divide-stone-100 > * + * { border-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1c1c20 !important;
  color: #f5f5f7 !important;
  border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .btn-ghost { border-color: rgba(255,255,255,0.12); color: #f5f5f7; }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .nav-link { color: #a1a1aa; }
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active { color: #f5f5f7; }
[data-theme="dark"] .nav-link.active::after { background: #f5f5f7; }
[data-theme="dark"] .conv-list-wrap,
[data-theme="dark"] .conv-empty,
[data-theme="dark"] .kanban-col { background: #1c1c20; border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .kanban-col-body { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .conv-card-name { color: #f5f5f7; }
[data-theme="dark"] .cmdk-modal,
[data-theme="dark"] .toast,
[data-theme="dark"] .notif-dropdown { background: #1c1c20; color: #f5f5f7; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cmdk-input-wrap input { color: #f5f5f7; }
[data-theme="dark"] .cmdk-item.selected { background: rgba(96,165,250,0.15); }
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
}
[data-theme="dark"] .empty-state-icon { background: linear-gradient(135deg, #27272a 0%, #18181b 100%); color: rgba(255,255,255,0.35); }
[data-theme="dark"] .empty-state-title { color: #f5f5f7; }
[data-theme="dark"] .chip-filter { background: #1c1c20; border-color: rgba(255,255,255,0.08); color: #d4d4d8; }
[data-theme="dark"] .chip-filter .chip-count { background: rgba(255,255,255,0.08); color: #d4d4d8; }
[data-theme="dark"] .table-wrap thead { background: #18181b !important; }

/* Dark mode · refinamentos */
/* Chat: fundo + bolhas ajustados pra dark sem perder leitura */
[data-theme="dark"] .chat-bg {
  background-color: #111114;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.02) 0%, transparent 50%);
}
[data-theme="dark"] .bubble-in {
  background: #1f1f23 !important;
  color: #e4e4e7 !important;
}
[data-theme="dark"] .bubble-out {
  background: #1f3a2f !important;
  color: #d1fae5 !important;
}
[data-theme="dark"] .bubble-out .bubble-meta { color: rgba(167,243,208,0.6); }
[data-theme="dark"] .bubble-in .bubble-meta { color: rgba(255,255,255,0.4); }

/* Cores de aviso (trial, suspended, banners) ficam legíveis no dark */
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-amber-50\/70,
[data-theme="dark"] .bg-amber-50\/60,
[data-theme="dark"] .bg-amber-50\/40 { background: rgba(245,158,11,0.10) !important; }
[data-theme="dark"] .bg-amber-100 { background: rgba(245,158,11,0.18) !important; }
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900 { color: #fcd34d !important; }
[data-theme="dark"] .border-amber-100,
[data-theme="dark"] .border-amber-200 { border-color: rgba(245,158,11,0.25) !important; }

[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-50\/60,
[data-theme="dark"] .bg-blue-50\/40 { background: rgba(59,130,246,0.10) !important; }
[data-theme="dark"] .bg-blue-100 { background: rgba(59,130,246,0.18) !important; }
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900 { color: #93c5fd !important; }
[data-theme="dark"] .border-blue-100,
[data-theme="dark"] .border-blue-200 { border-color: rgba(59,130,246,0.25) !important; }

[data-theme="dark"] .bg-emerald-50 { background: rgba(16,185,129,0.10) !important; }
[data-theme="dark"] .bg-emerald-100 { background: rgba(16,185,129,0.18) !important; }
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-800,
[data-theme="dark"] .text-emerald-900 { color: #6ee7b7 !important; }
[data-theme="dark"] .border-emerald-100,
[data-theme="dark"] .border-emerald-200 { border-color: rgba(16,185,129,0.25) !important; }

[data-theme="dark"] .bg-red-50 { background: rgba(239,68,68,0.10) !important; }
[data-theme="dark"] .bg-red-100 { background: rgba(239,68,68,0.18) !important; }
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-900 { color: #fca5a5 !important; }
[data-theme="dark"] .border-red-100,
[data-theme="dark"] .border-red-200 { border-color: rgba(239,68,68,0.25) !important; }

[data-theme="dark"] .bg-orange-50 { background: rgba(249,115,22,0.10) !important; }
[data-theme="dark"] .text-orange-700 { color: #fdba74 !important; }

/* Botão preto (bg-stone-900) vira inverso no dark */
[data-theme="dark"] .bg-stone-900 { background: #f5f5f7 !important; color: #0a0a0c !important; }
[data-theme="dark"] .bg-stone-900:hover { background: #e4e4e7 !important; }

/* Validação inline no dark */
[data-theme="dark"] .input-error {
  background-color: rgba(239,68,68,0.06) !important;
  border-color: rgba(248,113,113,0.5) !important;
}
[data-theme="dark"] .field-error { color: #fca5a5 !important; }

/* Header da agenda / detalhes */
[data-theme="dark"] .bg-white\/70 { background: rgba(28,28,32,0.7) !important; }
[data-theme="dark"] .bg-white\/80 { background: rgba(28,28,32,0.85) !important; color: #d4d4d8 !important; }
[data-theme="dark"] .bg-white\/90 { background: rgba(28,28,32,0.9) !important; }

/* Avatar circle */
[data-theme="dark"] .avatar { background: #27272a !important; color: #f5f5f7 !important; }

/* Calendar grid (admin) */
[data-theme="dark"] .cal-cell { background: #1c1c20 !important; border-color: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .cal-cell--today { background: rgba(96,165,250,0.10) !important; }
[data-theme="dark"] .cal-cell--out { background: rgba(255,255,255,0.02) !important; color: rgba(255,255,255,0.3) !important; }

/* Onboarding progress bar */
[data-theme="dark"] .onboarding-step--current { background: rgba(96,165,250,0.18) !important; color: #93c5fd !important; }
[data-theme="dark"] .onboarding-step--done { color: #6ee7b7 !important; }

/* Códigos / mono */
[data-theme="dark"] code { background: rgba(255,255,255,0.06) !important; color: #e4e4e7 !important; }

/* Badges status (active/canceled/etc) — herdam os bg-emerald-50 etc acima */

/* ============================================================
   Print styles · agenda, conversas, relatórios
   Esconde sidebar/topbar/banners, força fundo branco, evita
   quebras horríveis em listas e tabelas.
   ============================================================ */
@media print {
  /* Sempre claro pra impressão, mesmo se o usuário estiver no dark */
  html[data-theme="dark"] {
    --apex: #0a0908;
    --apex-soft: #1f1b17;
  }
  body, html {
    background: white !important;
    color: black !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Esconde chrome */
  .sidebar,
  .topbar,
  .sidebar-overlay,
  .notif-toggle,
  .notif-dropdown,
  .cmdk-overlay,
  .toast-wrap,
  .conv-send-form,
  details summary,
  .no-print {
    display: none !important;
  }
  /* Layout vira fluxo normal */
  .app-shell {
    display: block !important;
  }
  .layout-main {
    margin: 0 !important;
    padding: 0 !important;
  }
  .app-content {
    padding: 0 !important;
    max-width: none !important;
  }
  /* Cards/cartões viram blocos sem sombra */
  .card, .card-sm, .card-apple, .card-xs {
    box-shadow: none !important;
    border: 1px solid #d4d4d8 !important;
    background: white !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Tabelas: cabeçalho repete em cada página */
  table { border-collapse: collapse; width: 100%; }
  thead { display: table-header-group; }
  tr, td, th { page-break-inside: avoid; break-inside: avoid; }
  th, td { border-bottom: 1px solid #e4e4e7 !important; padding: 6px 8px !important; font-size: 11px !important; }
  /* Tipografia mais densa */
  h1 { font-size: 18pt !important; margin-bottom: 8px !important; }
  h2 { font-size: 13pt !important; margin: 10px 0 6px !important; }
  h3 { font-size: 11pt !important; margin: 8px 0 4px !important; }
  p, td, th, li { font-size: 10pt !important; line-height: 1.4 !important; }
  /* Links sem injetar URL · usuário não pediu PDF com link copiável.
     Anterior injetava "(https://...)" ao lado de cada link · poluía. */
  a[href]::after { content: "" !important; }
  a { color: black !important; text-decoration: none !important; }
  /* Conversa: mensagens em coluna sem fundo verde */
  .chat-bg {
    background: white !important;
  }
  .bubble-in, .bubble-out {
    background: white !important;
    border: 1px solid #e4e4e7 !important;
    color: black !important;
    max-width: 100% !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .msg-scroll {
    height: auto !important;
    overflow: visible !important;
  }
  /* Calendário: respeita as células */
  .cal-grid {
    page-break-inside: avoid;
    /* Tailwind grid-cols-7 vira fluxo flex em print quando classe Tailwind
       não survives · força grid CSS nativo */
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
  }
  .cal-head {
    text-align: center;
    font-weight: 600;
    font-size: 9pt !important;
    color: #555 !important;
    padding: 4px 2px !important;
    border-bottom: 1px solid #d4d4d8;
  }
  .cal-cell {
    border: 1px solid #d4d4d8 !important;
    min-height: 70px !important;
    padding: 4px !important;
    background: white !important;
    page-break-inside: avoid;
  }
  .cal-cell.out { opacity: 0.4; }
  .cal-cell.today { background: #f4f4f5 !important; }
  .cal-day { display: flex; justify-content: space-between; margin-bottom: 3px; }
  .cal-day-num { font-weight: 600; font-size: 10pt !important; }
  .cal-day-count {
    background: #1c1917 !important; color: white !important;
    border-radius: 8px; padding: 0 5px !important;
    font-size: 8pt !important; line-height: 1.4;
  }
  .cal-pill {
    display: block !important;
    background: white !important;
    border: 1px solid #d4d4d8 !important;
    padding: 1px 4px !important;
    margin-bottom: 2px;
    font-size: 8pt !important;
    line-height: 1.2 !important;
    border-radius: 3px;
    text-decoration: none !important;
    color: black !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cal-pill-time { font-weight: 600; margin-right: 3px; }
  .cal-pill-name { font-weight: 400; }
  .cal-pill-prof { display: none !important; }
  .cal-more { font-size: 8pt !important; color: #555 !important; margin-top: 2px; }
  /* Esconde o popover do dia e overlay */
  .day-popover-overlay, .cal-day-data, .day-popover { display: none !important; }
  /* Esconde a legenda do calendar grid em print */
  .cal-legend { display: none !important; }
  /* Esconde nav do calendar (anterior/próximo/Hoje) */
  .cal-nav-btn { display: none !important; }
  /* Cabeçalho impresso: marca discreta */
  .print-header {
    display: block !important;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #d4d4d8;
    font-size: 10pt;
    color: #555;
  }
  /* Quebras de página manuais */
  .page-break { page-break-before: always; }
}
.print-header { display: none; }
.print-only { display: none; }
@media print { .print-only { display: block !important; } }

/* B7: Cmd+K · busca global */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,9,8,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px;
  animation: cmdk-overlay-in 180ms var(--ease-decel);
}
.cmdk-overlay.hidden { display: none; }
@keyframes cmdk-overlay-in { from { opacity: 0; } }

.cmdk-modal {
  width: 100%;
  max-width: 580px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(10,9,8,0.25), 0 4px 12px rgba(10,9,8,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  animation: cmdk-modal-in 220ms var(--ease-spring);
}
@keyframes cmdk-modal-in {
  from { transform: translateY(-8px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(10,9,8,0.06);
}
.cmdk-input-wrap input {
  flex: 1;
  font-size: 15px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--apex);
}
.cmdk-input-wrap input::placeholder { color: rgba(10,9,8,0.4); }
.cmdk-input-wrap kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(10,9,8,0.55);
  background: rgba(10,9,8,0.06);
  padding: 2px 6px;
  border-radius: 5px;
  text-transform: uppercase;
}

.cmdk-results {
  overflow-y: auto;
  padding: 6px 6px 10px 6px;
}
.cmdk-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(10,9,8,0.5);
  padding: 10px 12px 4px 12px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--apex);
  transition: background 100ms var(--ease-apple);
}
.cmdk-item.selected { background: rgba(0,113,227,0.08); }
.cmdk-item:hover { background: rgba(0,113,227,0.05); }
.cmdk-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(10,9,8,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10,9,8,0.65);
}
.cmdk-label {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-hint {
  font-size: 11px;
  color: rgba(10,9,8,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.cmdk-empty {
  padding: 24px;
  text-align: center;
  color: rgba(10,9,8,0.5);
  font-size: 13px;
}

/* B8: Notifications panel */
.notif-wrap { position: relative; }
.notif-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: rgba(10,9,8,0.65);
  transition: background var(--t-fast) var(--ease-apple), color var(--t-fast) var(--ease-apple);
}
.notif-toggle:hover { background: rgba(10,9,8,0.05); color: var(--apex); }
.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid white;
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(10,9,8,0.08);
  box-shadow: 0 12px 32px rgba(10,9,8,0.12);
  z-index: 50;
  padding: 6px;
  animation: notif-in 200ms var(--ease-spring);
}
@keyframes notif-in { from { opacity: 0; transform: translateY(-6px); } }
.notif-dropdown.hidden { display: none; }
.notif-dropdown-header {
  padding: 10px 12px 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(10,9,8,0.55);
}
.notif-empty { padding: 28px 16px; text-align: center; color: rgba(10,9,8,0.5); font-size: 13px; }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--apex);
  transition: background 100ms var(--ease-apple);
}
.notif-item:hover { background: rgba(10,9,8,0.04); }
.notif-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-amber .notif-icon  { background: #fef3c7; color: #b45309; }
.notif-rose  .notif-icon  { background: #ffe4e6; color: #be123c; }
.notif-blue  .notif-icon  { background: #dbeafe; color: #1d4ed8; }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-label { font-size: 13px; font-weight: 500; line-height: 1.35; }
.notif-hint { font-size: 11px; color: rgba(10,9,8,0.5); }

@media (max-width: 480px) {
  .notif-dropdown { width: calc(100vw - 24px); right: -8px; }
}

/* C10: KPIs · em mobile vira scroll horizontal pra economizar vertical */
@media (max-width: 640px) {
  .kpi-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 4px 16px 12px 16px;
    scroll-snap-type: x mandatory;
  }
  .kpi-scroll > .kpi {
    flex: 0 0 70%;
    scroll-snap-align: start;
    min-width: 240px;
  }
}

/* ============================================================
   Toast system · use window.toast({title, message, kind})
   kind: success (default) | error | info | warning
   ============================================================ */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 12px 32px -8px rgba(10, 9, 8, 0.18), 0 2px 6px rgba(10, 9, 8, 0.06);
  padding: 12px 14px 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transform: translateX(120%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms;
  opacity: 0;
}
.toast.toast--in { transform: translateX(0); opacity: 1; }
.toast.toast--out { transform: translateX(120%); opacity: 0; }
.toast-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.toast-success .toast-dot { background: #10b981; }
.toast-error   .toast-dot { background: #dc2626; }
.toast-info    .toast-dot { background: #3b82f6; }
.toast-warning .toast-dot { background: #f59e0b; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.toast-message { font-size: 12.5px; color: rgba(10, 9, 8, 0.65); line-height: 1.4; margin-top: 2px; }
.toast-close {
  background: transparent;
  border: 0;
  font-size: 16px;
  color: rgba(10, 9, 8, 0.4);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  flex-shrink: 0;
}
.toast-close:hover { color: rgba(10, 9, 8, 0.75); }

/* ============================================================
   Skeleton loaders · class="skeleton" pra placeholder shimmering
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f4f4f3 0%, #ebebea 50%, #f4f4f3 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  display: inline-block;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line { height: 14px; width: 100%; margin: 4px 0; }
.skeleton-block { height: 120px; width: 100%; }

/* ============================================================
   Transições suaves · btn-press, card-hover, page enter
   ============================================================ */
button:active:not(:disabled),
.btn-accent:active,
.btn-ghost:active {
  transform: scale(0.97);
}
button, .btn-accent, .btn-ghost, a.card, a[class*="hover:shadow"] {
  transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 200ms ease,
              background-color 150ms ease,
              border-color 150ms ease;
}

/* Page enter fade-in */
@media (prefers-reduced-motion: no-preference) {
  body { animation: page-enter 240ms cubic-bezier(0.32, 0.72, 0, 1); }
  @keyframes page-enter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   Sparklines (canvas-based, ver forms.js / sparkline.js)
   ============================================================ */
.sparkline { display: block; }

/* ============================================================
   Drag-drop kanban + density toggle
   ============================================================ */
.kanban-card-dragging { opacity: 0.5; transform: rotate(1deg); }
.kanban-col-body.is-drag-over {
  background: color-mix(in oklab, var(--stage-color, #94a3b8) 10%, transparent);
  border-radius: 16px;
  outline: 2px dashed color-mix(in oklab, var(--stage-color, #94a3b8) 50%, transparent);
  outline-offset: -4px;
}

/* Compact: esconde detalhes secundários nos cards do kanban */
.kanban-density-compact .kanban-col-body > [data-conv-id] > a { padding: 10px 12px; }
.kanban-density-compact .kanban-col-body > [data-conv-id] > a > div:not(:first-child):not(:last-child) {
  display: none;
}
.kanban-density-compact .kanban-col-body > [data-conv-id] > a > div:last-child {
  margin-top: 6px; padding-top: 6px;
}

/* ============================================================
   Typing indicator (3 dots animados)
   ============================================================ */
.typing {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: 8px 14px;
}
.typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.35);
  animation: typing-bounce 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* ============================================================
   Onboarding stepper Apple-grade
   ============================================================ */
.ob-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  padding: 4px 0 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ob-stepper::-webkit-scrollbar { display: none; }

.ob-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 88px;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms ease;
}
.ob-step + .ob-step::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: rgba(10, 9, 8, 0.08);
  z-index: 0;
  transition: background 320ms ease;
}
.ob-step.is-done + .ob-step::before,
.ob-step.is-current + .ob-step::before { background: rgba(10, 9, 8, 0.08); }
.ob-step.is-done::before {
  background: linear-gradient(90deg, #10b981 0%, #10b981 100%);
}

.ob-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: white;
  border: 2px solid rgba(10, 9, 8, 0.1);
  color: rgba(10, 9, 8, 0.45);
  position: relative;
  z-index: 1;
  transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.04);
}
.ob-step.is-current .ob-circle {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: #2563eb;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35), 0 0 0 4px rgba(59, 130, 246, 0.12);
  transform: scale(1.08);
}
.ob-step.is-done .ob-circle {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: #059669;
  color: white;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.ob-step.is-done .ob-circle svg {
  animation: ob-check-draw 360ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
@keyframes ob-check-draw {
  0% { stroke-dasharray: 24; stroke-dashoffset: 24; transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { stroke-dasharray: 24; stroke-dashoffset: 0; transform: scale(1); }
}
.ob-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(10, 9, 8, 0.55);
  margin-top: 8px;
  text-align: center;
  line-height: 1.25;
  max-width: 96px;
  letter-spacing: -0.005em;
}
.ob-step.is-current .ob-label { color: #2563eb; font-weight: 600; }
.ob-step.is-done .ob-label { color: rgba(10, 9, 8, 0.7); }

@media (max-width: 640px) {
  .ob-label { display: none; }
  .ob-step { min-width: 56px; }
}

/* ============================================================
   Cards de tutorial Apple-grade
   ============================================================ */
.tutorial-card {
  background: white;
  border: 1px solid rgba(10, 9, 8, 0.06);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 1px 0 rgba(10, 9, 8, 0.02), 0 8px 24px -12px rgba(10, 9, 8, 0.08);
  animation: ob-step-in 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ob-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.tutorial-step {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  align-items: flex-start;
  border-bottom: 1px solid rgba(10, 9, 8, 0.04);
}
.tutorial-step:last-child { border-bottom: 0; padding-bottom: 0; }
.tutorial-step:first-child { padding-top: 0; }
.tutorial-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.06));
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tutorial-step-body { flex: 1; min-width: 0; }
.tutorial-step-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(10, 9, 8, 0.85);
  line-height: 1.4;
}
.tutorial-step-hint {
  font-size: 12.5px;
  color: rgba(10, 9, 8, 0.55);
  line-height: 1.5;
  margin-top: 4px;
}
.tutorial-step-hint code {
  background: rgba(10, 9, 8, 0.05);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11.5px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  color: rgba(10, 9, 8, 0.75);
}
.tutorial-step-hint a {
  color: #2563eb;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
}
.tutorial-step-hint a:hover { border-bottom-color: rgba(37, 99, 235, 0.7); }

.tutorial-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: #2563eb;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 16px;
  transition: all 200ms ease;
}
.tutorial-cta:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

/* ============================================================
   Dark mode · refinamentos pros componentes novos
   ============================================================ */

/* Onboarding stepper */
[data-theme="dark"] .ob-step + .ob-step::before { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ob-step.is-done::before { background: linear-gradient(90deg, #10b981 0%, #10b981 100%); }
[data-theme="dark"] .ob-circle {
  background: #1c1c20;
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[data-theme="dark"] .ob-step.is-current .ob-circle {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59,130,246,0.4), 0 0 0 4px rgba(59,130,246,0.18);
}
[data-theme="dark"] .ob-step.is-done .ob-circle {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
  color: white;
}
[data-theme="dark"] .ob-label { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .ob-step.is-current .ob-label { color: #93c5fd; }
[data-theme="dark"] .ob-step.is-done .ob-label { color: rgba(255,255,255,0.75); }

/* Tutorial cards */
[data-theme="dark"] .tutorial-card {
  background: #1c1c20;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
}
[data-theme="dark"] .tutorial-step { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .tutorial-step-num {
  background: linear-gradient(180deg, rgba(96,165,250,0.18), rgba(96,165,250,0.08));
  color: #93c5fd;
}
[data-theme="dark"] .tutorial-step-title { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .tutorial-step-hint { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .tutorial-step-hint code { background: rgba(255,255,255,0.08); color: #e4e4e7; }
[data-theme="dark"] .tutorial-step-hint a { color: #93c5fd; border-bottom-color: rgba(147,197,253,0.4); }
[data-theme="dark"] .tutorial-step-hint a:hover { border-bottom-color: rgba(147,197,253,0.8); }
[data-theme="dark"] .tutorial-cta {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.25);
  color: #93c5fd;
}
[data-theme="dark"] .tutorial-cta:hover {
  background: rgba(59,130,246,0.18);
  border-color: rgba(59,130,246,0.40);
}

/* Toast no dark */
[data-theme="dark"] .toast {
  background: rgba(28,28,32,0.96);
  border-color: rgba(255,255,255,0.08);
  color: #e4e4e7;
}
[data-theme="dark"] .toast-title { color: #f5f5f7; }
[data-theme="dark"] .toast-message { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .toast-close { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .toast-close:hover { color: rgba(255,255,255,0.85); }

/* Skeleton */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
}

/* Quick replies (chat compose) */
[data-theme="dark"] [data-quick-replies] button {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.75) !important;
}
[data-theme="dark"] [data-quick-replies] button:hover {
  background: rgba(255,255,255,0.12) !important;
}

/* Density toggle (kanban) */
[data-theme="dark"] #density-toggle { background: rgba(255,255,255,0.06); }
[data-theme="dark"] #density-toggle button.bg-white {
  background: #2a2a2e !important;
  color: #f5f5f7 !important;
}
[data-theme="dark"] #density-toggle button:not(.bg-white) {
  color: rgba(255,255,255,0.55) !important;
}

/* Conversation panel: AI paused banner */
[data-theme="dark"] .bg-amber-50.border-amber-200\/60 {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.25) !important;
}

/* Heatmap dia × hora (cells azul mantém visibilidade) */
[data-theme="dark"] .grid > div[style*="rgba(59, 130, 246"] { /* cells já são alpha-based, OK */ }

/* Sandbox cockpit aside */
[data-theme="dark"] aside.card pre {
  color: rgba(255,255,255,0.7) !important;
}

/* Form helpers extras pra Tailwind classes nuas */
[data-theme="dark"] .text-stone-100 { color: rgba(255,255,255,0.85) !important; }
[data-theme="dark"] .text-stone-50 { color: rgba(255,255,255,0.92) !important; }
[data-theme="dark"] .bg-stone-200,
[data-theme="dark"] .bg-stone-300 { background: rgba(255,255,255,0.10) !important; }
[data-theme="dark"] .bg-violet-50,
[data-theme="dark"] .bg-violet-100 { background: rgba(139,92,246,0.15) !important; }
[data-theme="dark"] .text-violet-700,
[data-theme="dark"] .text-violet-800,
[data-theme="dark"] .text-violet-900 { color: #c4b5fd !important; }
[data-theme="dark"] .from-emerald-50 { --tw-gradient-from: rgba(16,185,129,0.12) !important; }
[data-theme="dark"] .to-blue-50 { --tw-gradient-to: rgba(59,130,246,0.10) !important; }
[data-theme="dark"] .from-blue-50,
[data-theme="dark"] .to-blue-50,
[data-theme="dark"] .from-blue-100 { --tw-gradient-from: rgba(59,130,246,0.10) !important; }

/* Bubbles pop-in animation (mantém no dark) */
[data-theme="dark"] .bubble-out {
  background: linear-gradient(180deg, #1f3a2f 0%, #1a3329 100%) !important;
}

/* Service form radio toggle */
[data-theme="dark"] input[type="radio"] {
  accent-color: #60a5fa;
}
[data-theme="dark"] input[type="checkbox"] {
  accent-color: #60a5fa;
}

/* Banner azul "gerenciado pela LUMA Agency" no /secrets */
[data-theme="dark"] .bg-blue-50\/30 {
  background: rgba(59,130,246,0.08) !important;
}

/* Service price card meta info no dark */
[data-theme="dark"] .text-stone-600 { color: rgba(255,255,255,0.7) !important; }

/* Form field placeholder no dark — alguns ficam invisíveis */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

/* Onboarding wizard checkmark inside ob-circle (svg uses currentColor) */
[data-theme="dark"] .ob-step.is-done .ob-circle svg { color: white; }

/* ============================================================
   Splash screen ELEV (1ª visita do cliente no portal)
   ============================================================ */
#luma-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;            /* bloqueia clique só quando .splash--in liga */
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  padding: 24px;
}
#luma-splash.splash--in {
  opacity: 1;
  pointer-events: all;
}
#luma-splash.splash--out {
  opacity: 0;
  pointer-events: none;
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5vw, 48px);
  text-align: center;
  transform: translateY(16px);
  opacity: 0;
  animation: splash-rise 1800ms cubic-bezier(0.32, 0.72, 0, 1) 400ms forwards;
}
@keyframes splash-rise {
  to { transform: translateY(0); opacity: 1; }
}
.splash-apex {
  width: clamp(160px, 30vw, 320px);
  height: clamp(160px, 30vw, 320px);
  color: #fff;
  /* path length real ≈ 97.6 (dois segmentos de ~48.8 cada).
     dasharray match → 100% da duração é desenho visível. */
  stroke-dasharray: 98;
  stroke-dashoffset: 98;
  animation: splash-apex-draw 4200ms cubic-bezier(0.4, 0, 0.2, 1) 600ms forwards;
  filter: drop-shadow(0 8px 40px rgba(255,255,255,0.18));
}
@keyframes splash-apex-draw {
  0%   { stroke-dashoffset: 98; opacity: 0;   transform: scale(0.92); }
  10%  {                        opacity: 1;                            }
  100% { stroke-dashoffset: 0;  opacity: 1;   transform: scale(1);    }
}
.splash-text-block {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.splash-greeting {
  font-family: var(--font-display, "Inter", -apple-system, sans-serif);
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: rgba(255,255,255,0.65);
  animation: splash-fade-in 1400ms ease 3000ms backwards;
}
.splash-doctor {
  font-family: var(--font-display, "Inter", -apple-system, sans-serif);
  font-size: clamp(44px, 9vw, 64px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
  color: #fff;
  animation: splash-fade-in 1400ms ease 3800ms backwards;
}
@media (min-width: 768px) {
  .splash-doctor { font-size: clamp(64px, 7.5vw, 104px); letter-spacing: -0.04em; }
}
.splash-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.splash-elev {
  font-family: var(--font-display, "Inter", -apple-system, sans-serif);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #fff;
  margin: 0;
  padding-left: 0.18em;
  animation: splash-fade-in 1400ms ease 4400ms backwards;
}
.splash-tagline {
  font-family: var(--font-display, "Inter", -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0;
  padding-left: 0.5em;
  animation: splash-fade-in 1400ms ease 5000ms backwards;
}
@media (min-width: 768px) {
  .splash-tagline { font-size: 14px; letter-spacing: 0.6em; }
}
.splash-hint {
  position: absolute;
  bottom: clamp(56px, 10vh, 96px);
  left: 0; right: 0;
  text-align: center;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;          /* branco sólido — visibilidade vem via opacity */
  opacity: 0;           /* invisível antes da animação */
  margin: 0;
  /* both = aplica from antes do delay e mantém to no fim */
  animation:
    splash-hint-in 900ms ease 6200ms both,
    splash-hint-pulse 2200ms ease-in-out 7200ms infinite;
}
@keyframes splash-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes splash-hint-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 0.85; transform: translateY(0); }
}
@keyframes splash-hint-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-content,
  .splash-apex,
  .splash-doctor,
  .splash-tagline { animation: none; }
}

/* ============================================================
   Glass premium · sistema apple-grade
   ============================================================ */
.glass-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.52) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 1px 2px rgba(10,9,8,0.04),
    0 8px 24px -10px rgba(10,9,8,0.06);
  transition: box-shadow 240ms cubic-bezier(.2,.8,.2,1);
}
.glass-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 2px 4px rgba(10,9,8,0.04),
    0 16px 36px -12px rgba(10,9,8,0.10);
}
.glass-card-elevated {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 100%);
}
[data-theme="dark"] .glass-card {
  background:
    linear-gradient(180deg, rgba(28,28,32,0.82) 0%, rgba(20,20,24,0.62) 100%);
  border-color: rgba(255,255,255,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.4),
    0 8px 24px -10px rgba(0,0,0,0.5);
}
[data-theme="dark"] .glass-card-elevated {
  background:
    linear-gradient(180deg, rgba(32,32,36,0.92) 0%, rgba(24,24,28,0.78) 100%);
}

/* Glass KPI · sóbrio, accent só no número */
.glass-kpi {
  position: relative;
  padding: 20px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 100%);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 1px 2px rgba(10,9,8,0.04),
    0 8px 20px -12px rgba(10,9,8,0.06);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1),
              box-shadow 240ms cubic-bezier(.2,.8,.2,1);
}
.glass-kpi:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 2px 4px rgba(10,9,8,0.05),
    0 14px 28px -12px rgba(10,9,8,0.10);
}
.glass-kpi-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(10,9,8,0.5);
  margin-bottom: 10px;
}
.glass-kpi-eyebrow svg {
  width: 14px; height: 14px;
  opacity: 0.75;
}
.glass-kpi-value {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--apex);
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.glass-kpi-sub {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(10,9,8,0.55);
  letter-spacing: -0.1px;
}
[data-theme="dark"] .glass-kpi {
  background:
    linear-gradient(180deg, rgba(32,32,36,0.85) 0%, rgba(22,22,26,0.65) 100%);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .glass-kpi-eyebrow { color: rgba(245,245,247,0.55); }
[data-theme="dark"] .glass-kpi-sub { color: rgba(245,245,247,0.55); }
[data-theme="dark"] .glass-kpi-value { color: rgba(245,245,247,0.95); }

/* Delta pill · só usa cor quando faz sentido */
.delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.1px;
  font-feature-settings: "tnum" 1;
}
.delta-up   { background: rgba(16,185,129,0.10); color: #047857; }
.delta-down { background: rgba(244, 63, 94,0.10); color: #be123c; }
.delta-flat { background: rgba(120,113,108,0.10); color: rgba(10,9,8,0.55); }
[data-theme="dark"] .delta-up   { background: rgba(16,185,129,0.18); color: #34d399; }
[data-theme="dark"] .delta-down { background: rgba(244, 63, 94,0.18); color: #fb7185; }
[data-theme="dark"] .delta-flat { background: rgba(245,245,247,0.10); color: rgba(245,245,247,0.55); }

/* Sparkline · SVG inline minimalista */
.spark { display: block; width: 100%; height: 38px; overflow: visible; }
.spark-line { stroke: var(--apex); stroke-width: 1.6; fill: none; opacity: 0.85; }
.spark-area { fill: var(--apex); opacity: 0.06; }
.spark-dot  { fill: var(--apex); }
.spark-money .spark-line { stroke: #047857; }
.spark-money .spark-area { fill: #10b981; opacity: 0.10; }
.spark-money .spark-dot  { fill: #047857; }
[data-theme="dark"] .spark-line { stroke: rgba(245,245,247,0.85); }
[data-theme="dark"] .spark-area { fill: rgba(245,245,247,0.85); opacity: 0.06; }
[data-theme="dark"] .spark-dot  { fill: rgba(245,245,247,0.95); }
[data-theme="dark"] .spark-money .spark-line { stroke: #34d399; }
[data-theme="dark"] .spark-money .spark-dot  { fill: #34d399; }

/* Heatmap · grid 7 × 24 (dia da semana × hora) */
.heatmap {
  display: grid;
  grid-template-columns: 22px repeat(24, 1fr);
  gap: 3px;
  font-size: 10px;
  color: rgba(10,9,8,0.4);
}
.heatmap-row-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(10,9,8,0.5);
  text-align: right;
  padding-right: 6px;
  align-self: center;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(10,9,8,0.04);
  transition: transform 120ms;
}
.heatmap-cell:hover {
  transform: scale(1.4);
  z-index: 2;
  box-shadow: 0 4px 8px rgba(10,9,8,0.15);
}
[data-theme="dark"] .heatmap-row-label { color: rgba(245,245,247,0.5); }
[data-theme="dark"] .heatmap-cell { background: rgba(245,245,247,0.04); }

/* Funnel bar · barra simples horizontal */
.funnel-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(10,9,8,0.05);
}
.funnel-row:last-child { border-bottom: 0; }
.funnel-bar {
  position: relative;
  height: 6px;
  background: rgba(10,9,8,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.funnel-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--apex) 0%, rgba(201,162,39,0.7) 100%);
  border-radius: 3px;
}
.funnel-bar-fill-money {
  background: linear-gradient(90deg, #047857 0%, #10b981 100%);
}
[data-theme="dark"] .funnel-row { border-bottom-color: rgba(245,245,247,0.06); }
[data-theme="dark"] .funnel-bar { background: rgba(245,245,247,0.08); }

/* Section title premium */
.h-overline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(10,9,8,0.45);
  margin-bottom: 4px;
}
[data-theme="dark"] .h-overline { color: rgba(245,245,247,0.45); }