/* ============================================================
   TEX CRM — Design System (shadcn/ui inspired)
   Dark theme | Zinc palette | Amber primary
   ============================================================ */
[x-cloak]{display:none!important;}

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..800&display=swap');

/* ---------- CSS Custom Properties (Design System 2025) ---------- */
:root {
  --background: 220 14% 4%;
  --foreground: 210 20% 96%;
  --card: 220 13% 6%;
  --card-foreground: 210 20% 96%;
  --popover: 220 14% 7%;
  --popover-foreground: 210 20% 96%;
  --primary: 45 93% 52%;             /* TEX amber-gold */
  --primary-foreground: 30 80% 8%;
  --secondary: 220 10% 13%;
  --secondary-foreground: 210 20% 92%;
  --muted: 220 10% 12%;
  --muted-foreground: 220 8% 55%;
  --accent: 220 10% 14%;
  --accent-foreground: 210 20% 96%;
  --destructive: 0 72% 42%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 10% 14%;
  --input: 220 12% 10%;
  --ring: 45 93% 52%;
  --radius: 0.625rem;

  /* Custom TEX tokens */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 56px;
  --success: 152 76% 38%;
  --warning: 45 93% 52%;
  --info: 210 100% 56%;

  /* Semantic colors (adapt to dark/light) */
  --color-red: 0 84% 65%;
  --color-red-bg: 0 84% 65% / 0.12;
  --color-green: 152 69% 50%;
  --color-green-bg: 152 69% 50% / 0.12;
  --color-blue: 217 91% 65%;
  --color-blue-bg: 217 91% 65% / 0.12;
  --color-orange: 25 95% 60%;
  --color-orange-bg: 25 95% 60% / 0.12;
  --color-amber: 38 92% 55%;
  --color-amber-bg: 38 92% 55% / 0.12;
  --color-violet: 263 70% 65%;
  --color-violet-bg: 263 70% 65% / 0.12;
  --color-emerald: 160 84% 45%;
  --color-emerald-bg: 160 84% 45% / 0.12;
  --color-slate: 215 20% 55%;
  --color-slate-bg: 215 20% 55% / 0.12;
  --color-indigo: 239 84% 67%;
  --color-indigo-bg: 239 84% 67% / 0.12;
  --color-pink: 330 81% 60%;
  --color-pink-bg: 330 81% 60% / 0.12;
  --color-cyan: 187 85% 43%;
  --color-cyan-bg: 187 85% 43% / 0.12;
  --color-teal: 168 76% 42%;
  --color-teal-bg: 168 76% 42% / 0.12;

  /* Shadows */
  --shadow-sm: 0 1px 2px hsl(0 0% 0%/0.2);
  --shadow-md: 0 4px 12px hsl(0 0% 0%/0.25);
  --shadow-lg: 0 8px 32px hsl(0 0% 0%/0.35);
  --shadow-glow: 0 0 20px hsl(var(--primary)/0.1);
}

/* ---------- Light Mode Override ---------- */
html.light {
  --background: 0 0% 97%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 40 90% 38%;
  --primary-foreground: 40 20% 98%;
  --secondary: 220 14% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 220 14% 95%;
  --muted-foreground: 220 8% 40%;
  --accent: 220 14% 93%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 13% 88%;
  --input: 220 13% 92%;
  --ring: 40 90% 38%;
  --shadow-sm: 0 1px 3px hsl(0 0% 0%/0.06);
  --shadow-md: 0 4px 12px hsl(0 0% 0%/0.1);
  --shadow-lg: 0 8px 32px hsl(0 0% 0%/0.14);
  --shadow-glow: 0 0 20px hsl(var(--primary)/0.1);
  color-scheme: light;

  /* Semantic colors for light mode (darker for contrast on white) */
  --color-red: 0 72% 50%;
  --color-red-bg: 0 72% 50% / 0.08;
  --color-green: 152 69% 35%;
  --color-green-bg: 152 69% 35% / 0.08;
  --color-blue: 217 91% 50%;
  --color-blue-bg: 217 91% 50% / 0.08;
  --color-orange: 25 95% 48%;
  --color-orange-bg: 25 95% 48% / 0.08;
  --color-amber: 38 92% 42%;
  --color-amber-bg: 38 92% 42% / 0.08;
  --color-violet: 263 70% 50%;
  --color-violet-bg: 263 70% 50% / 0.08;
  --color-emerald: 160 84% 32%;
  --color-emerald-bg: 160 84% 32% / 0.08;
  --color-slate: 215 20% 42%;
  --color-slate-bg: 215 20% 42% / 0.08;
  --color-indigo: 239 84% 55%;
  --color-indigo-bg: 239 84% 55% / 0.08;
  --color-pink: 330 81% 48%;
  --color-pink-bg: 330 81% 48% / 0.08;
  --color-cyan: 187 85% 32%;
  --color-cyan-bg: 187 85% 32% / 0.08;
  --color-teal: 168 76% 30%;
  --color-teal-bg: 168 76% 30% / 0.08;
}

html.dark {
  color-scheme: dark;
}

/* Theme transition */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }
a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { opacity: 0.85; }

/* ---------- Utility: Colors ---------- */
.text-primary { color: hsl(var(--primary)); }
.text-muted    { color: hsl(var(--muted-foreground)); }
.text-success  { color: hsl(var(--success)); }
.text-destructive { color: hsl(var(--destructive)); }
.bg-primary    { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.bg-muted      { background-color: hsl(var(--muted)); }
.bg-card       { background-color: hsl(var(--card)); }

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

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border)/0.6);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s ease;
  overflow: hidden;
}

.sidebar-brand {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--topbar-height);
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  background: hsl(var(--primary));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: hsl(var(--primary-foreground));
  flex-shrink: 0;
}

.sidebar-brand-name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.sidebar-brand-sub {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.5rem;
}

/* Section group — collapsible, reorderable */
.sidebar-group {
  transition: opacity 0.2s ease;
}
.sidebar-group.dragging { opacity: 0.35; }

.sidebar-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--primary) / 0.8);
  padding: 0.55rem 0.75rem 0.25rem;
  margin-top: 0.4rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-section-label:hover { color: hsl(var(--primary)); }

.sidebar-section-label .section-chevron {
  width: 14px;
  height: 14px;
  opacity: 0.3;
  transition: transform 0.2s ease, opacity 0.15s;
  flex-shrink: 0;
}
.sidebar-section-label:hover .section-chevron { opacity: 0.55; }
.sidebar-group.collapsed .section-chevron { transform: rotate(-90deg); }

/* Section items — collapsible with smooth animation */
.sidebar-group-items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}
.sidebar-group-items > div {
  overflow: hidden;
}
.sidebar-group.collapsed .sidebar-group-items {
  grid-template-rows: 0fr;
  opacity: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 1px);
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  letter-spacing: -0.005em;
}

.nav-item:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.nav-item.active {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: hsl(var(--primary));
  border-radius: 0 2px 2px 0;
}

.nav-item .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  padding: 0.75rem 0.5rem;
  border-top: 1px solid hsl(var(--border));
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.25s ease;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-height);
  background: hsl(var(--background) / 0.85);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid hsl(var(--border)/0.5);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
}

.topbar-left { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 0.5rem; position: relative; }

/* ═══ TEX Search — Componente unificado de busca com autocomplete ═══ */
.tex-search{position:relative;flex:1;min-width:180px;}
.tex-search-box{display:flex;align-items:center;gap:0.4rem;background:hsl(var(--input));border:1px solid hsl(var(--border)/0.8);border-radius:var(--radius);padding:0 0.65rem;height:38px;transition:border-color 0.15s,box-shadow 0.15s;}
.tex-search-box:focus-within{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/0.12);}
.tex-search-compact{height:34px;}
.tex-search-icon{width:15px;height:15px;color:hsl(var(--muted-foreground)/0.5);flex-shrink:0;pointer-events:none;}
.tex-search-input{background:transparent;border:none;outline:none;flex:1;font-size:0.82rem;color:hsl(var(--foreground));height:100%;min-width:0;}
.tex-search-input::placeholder{color:hsl(var(--muted-foreground)/0.5);}
.tex-search-clear{background:none;border:none;cursor:pointer;color:hsl(var(--muted-foreground)/0.5);padding:2px;border-radius:4px;display:flex;align-items:center;transition:color 0.1s;}
.tex-search-clear:hover{color:hsl(var(--foreground));}
.tex-search-kbd{font-size:0.58rem;padding:0.1rem 0.35rem;border-radius:3px;background:hsl(var(--background));border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground)/0.6);font-family:inherit;flex-shrink:0;}
/* Dropdown */
.tex-search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:320px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:0 12px 40px hsl(0 0% 0%/0.35);z-index:9999;max-height:340px;overflow-y:auto;overflow-x:hidden;}
.tex-search-empty{padding:0.85rem;text-align:center;font-size:0.78rem;color:hsl(var(--muted-foreground));display:flex;align-items:center;justify-content:center;gap:0.4rem;}
.tex-search-spinner{width:14px;height:14px;border:2px solid hsl(var(--border));border-top-color:hsl(var(--primary));border-radius:50%;animation:tex-spin 0.6s linear infinite;flex-shrink:0;}
@keyframes tex-spin{to{transform:rotate(360deg)}}
/* Result item */
.tex-search-result{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0.75rem;text-decoration:none;color:hsl(var(--foreground));transition:background 0.08s;cursor:pointer;border-bottom:1px solid hsl(var(--border)/0.2);}
.tex-search-result:last-child{border-bottom:none;}
.tex-search-result:hover,.tex-search-result.active{background:hsl(var(--accent));}
.tex-search-avatar{width:30px;height:30px;border-radius:50%;background:hsl(var(--primary)/0.12);color:hsl(var(--primary));display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:800;flex-shrink:0;letter-spacing:-0.02em;}
.tex-search-info{flex:1;min-width:0;}
.tex-search-name{font-size:0.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tex-search-meta{font-size:0.68rem;color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tex-search-badge{font-size:0.55rem;padding:0.12rem 0.4rem;border-radius:3px;background:hsl(var(--muted));color:hsl(var(--muted-foreground));font-weight:700;flex-shrink:0;text-transform:uppercase;letter-spacing:0.04em;}
.tex-search-heat{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.tex-search-heat.heat-frozen{background:hsl(var(--muted-foreground)/0.3);}
.tex-search-heat.heat-cold{background:hsl(217 91% 60%);}
.tex-search-heat.heat-warm{background:hsl(38 92% 50%);}
.tex-search-heat.heat-hot{background:hsl(0 84% 60%);}
/* Topbar variant */
.topbar-right .tex-search{max-width:300px;}
@media(max-width:768px){.topbar-right .tex-search{max-width:200px;}.tex-search-kbd{display:none;}}

/* Nav buttons (back/close) */
.nav-buttons{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;}
.nav-back-btn{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.78rem;color:hsl(var(--muted-foreground));}
.nav-back-btn:hover{color:hsl(var(--foreground));}
.nav-close-btn{color:hsl(var(--muted-foreground));}.nav-close-btn:hover{color:hsl(var(--destructive));}

.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius);
}
.hamburger:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

.page-title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}
.breadcrumb a { color: hsl(var(--muted-foreground)); }
.breadcrumb a:hover { color: hsl(var(--foreground)); }
.breadcrumb .sep { opacity: 0.4; }

/* Page */
.page-body {
  flex: 1;
  padding: 1.5rem;
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- Components ---------- */

/* Card */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border)/0.7);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
.card-title { font-size: 1rem; font-weight: 600; margin: 0; }
.card-desc { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin: 0.25rem 0 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.25;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
  font-weight: 600;
  box-shadow: 0 1px 3px hsl(var(--primary)/0.3);
}
.btn-primary:hover { background: hsl(45 93% 46%); box-shadow: 0 2px 8px hsl(var(--primary)/0.35); }

.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}
.btn-secondary:hover { background: hsl(var(--accent)); }

.btn-ghost {
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-color: transparent;
}
.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

.btn-outline {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.btn-outline:hover { background: hsl(var(--accent)); }

.btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.btn-destructive:hover { background: hsl(0 62.8% 25%); }

.btn-success {
  background: hsl(var(--success));
  color: #fff;
}

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-icon { padding: 0.5rem; width: 36px; height: 36px; }
.btn-icon.btn-sm { width: 30px; height: 30px; padding: 0.25rem; }

/* Forms */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: hsl(var(--foreground));
}
.form-label.required::after { content: ' *'; color: hsl(var(--primary)); }

.input-field {
  width: 100%;
  background: hsl(var(--input));
  border: 1px solid hsl(var(--border)/0.8);
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  padding: 0.55rem 0.875rem;
  font-size: 0.85rem;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none;
}
.input-field:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
  background: hsl(var(--card));
}
.input-field:hover:not(:focus) {
  border-color: hsl(var(--border)/1.5);
}
.input-field::placeholder { color: hsl(var(--muted-foreground)); opacity: 0.7; }
.input-field:disabled { opacity: 0.5; cursor: not-allowed; }

textarea.input-field { min-height: 100px; resize: vertical; }
select.input-field { cursor: pointer; }

.form-error {
  font-size: 0.78rem;
  color: hsl(0 70% 60%);
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.form-hint {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.3rem;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-default   { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-muted     { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge-primary   { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.2); }
.badge-success   { background: hsl(var(--success) / 0.12); color: hsl(152 76% 55%); border-color: hsl(var(--success) / 0.2); }
.badge-warning   { background: hsl(var(--warning) / 0.12); color: hsl(45 93% 60%); border-color: hsl(var(--warning) / 0.2); }
.badge-destructive { background: hsl(var(--destructive) / 0.12); color: hsl(0 72% 62%); border-color: hsl(var(--destructive) / 0.2); }
.badge-blue    { background: hsl(210 100% 56% / 0.12); color: hsl(210 100% 65%); border-color: hsl(210 100% 56% / 0.2); }
.badge-violet  { background: hsl(263 70% 60% / 0.12); color: hsl(263 70% 70%); border-color: hsl(263 70% 60% / 0.2); }
.badge-cyan    { background: hsl(189 94% 43% / 0.12); color: hsl(189 94% 55%); border-color: hsl(189 94% 43% / 0.2); }
.badge-pink    { background: hsl(330 81% 60% / 0.12); color: hsl(330 81% 70%); border-color: hsl(330 81% 60% / 0.2); }

/* Avatar */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 0.65rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; }
.avatar-xl { width: 80px; height: 80px; font-size: 1.5rem; }

/* Table */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
}
.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.4);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: hsl(var(--accent) / 0.4); }
.table tr { transition: background 0.1s; }
.table-actions { display: flex; gap: 0.35rem; align-items: center; }

/* Stat Card */
.stat-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); }
.stat-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat-change { font-size: 0.78rem; display: flex; align-items: center; gap: 0.3rem; }
.stat-change.up   { color: hsl(142 76% 50%); }
.stat-change.down { color: hsl(0 72% 60%); }
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* Alert / Toast */
.alert {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.alert-success { background: hsl(var(--success) / 0.1); border-color: hsl(var(--success)); color: hsl(142 76% 60%); }
.alert-error   { background: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive)); color: hsl(0 72% 65%); }
.alert-warning { background: hsl(var(--warning) / 0.1); border-color: hsl(var(--warning)); color: hsl(47 96% 60%); }
.alert-info    { background: hsl(var(--info) / 0.1); border-color: hsl(var(--info)); color: hsl(199 69% 60%); }

/* Toast */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
}
.toast {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.4);
  animation: toastIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }

/* Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
  display: none;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.875rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
}
.dropdown-item:hover { background: hsl(var(--accent)); }
.dropdown-sep { height: 1px; background: hsl(var(--border)); margin: 0.25rem 0; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}
.modal {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-lg { max-width: 780px; }
.modal-xl { max-width: 960px; }
.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: 1rem; font-weight: 700; margin: 0; }
.modal-body { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 1.5rem; overflow-x: auto; }
.tab-btn {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: hsl(var(--foreground)); }
.tab-btn.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }

/* Search */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 0.75rem;
  width: 16px;
  height: 16px;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding-left: 2.25rem;
}

/* Kanban */
.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  align-items: flex-start;
  min-height: calc(100vh - var(--topbar-height) - 6rem);
}

.kanban-col {
  min-width: 280px;
  max-width: 300px;
  flex-shrink: 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-height) - 8rem);
}

.kanban-col-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.kanban-col-title { font-size: 0.875rem; font-weight: 600; flex: 1; }
.kanban-col-count {
  font-size: 0.72rem;
  font-weight: 700;
  background: hsl(var(--muted));
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  color: hsl(var(--muted-foreground));
}
.kanban-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kanban-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.875rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  position: relative;
  overflow: hidden;
}
.kanban-card:hover {
  border-color: hsl(var(--ring) / 0.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kanban-card.dragging { opacity: 0.5; transform: scale(0.98); }
.kanban-card.drag-over { border-color: hsl(var(--primary)); }

.kanban-card-heat {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.heat-cold   { background: hsl(199 69% 49%); }
.heat-warm   { background: hsl(47 96% 53%); }
.heat-hot    { background: hsl(0 72% 55%); }
.heat-frozen { background: hsl(240 5% 50%); }

.kanban-card-name { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; }
.kanban-card-preview { font-size: 0.78rem; color: hsl(var(--muted-foreground)); line-height: 1.4; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kanban-card-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kanban-card-time { font-size: 0.7rem; color: hsl(var(--muted-foreground)); margin-left: auto; }

/* Lead status dots for kanban */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-novo      { background: hsl(199 69% 55%); }
.dot-sdr       { background: hsl(263 70% 65%); }
.dot-qualif    { background: hsl(47 96% 55%); }
.dot-negoc     { background: hsl(142 76% 45%); }
.dot-proposta  { background: hsl(199 94% 50%); }
.dot-followup  { background: hsl(240 5% 55%); }
.dot-ganho     { background: hsl(142 76% 50%); }
.dot-perdido   { background: hsl(0 72% 55%); }

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground)/0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)/0.4); }
* { scrollbar-width: thin; scrollbar-color: hsl(var(--muted-foreground)/0.25) transparent; }

/* Loading */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.htmx-request .btn-loading-text { display: none; }
.htmx-request .btn-spinner { display: flex; }
.btn-spinner { display: none; }

/* Overlay sidebar on mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 0.6);
  z-index: 49;
}

/* Conversations panel */
.conversation-panel {
  display: flex;
  height: calc(100vh - var(--topbar-height) - 3rem);
  gap: 0;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
}
.conv-list {
  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conv-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.msg-bubble {
  max-width: 72%;
  padding: 0.6rem 0.875rem;
  border-radius: 14px;
  font-size: 0.84rem;
  line-height: 1.55;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}
.msg-in  { align-self: flex-start; background: hsl(var(--card)); border: 1px solid hsl(var(--border)/0.6); border-bottom-left-radius: 4px; }
.msg-out { align-self: flex-end; background: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.2); border-bottom-right-radius: 4px; }
.msg-ai  { align-self: flex-end; background: hsl(263 70% 50% / 0.1); border: 1px solid hsl(263 70% 50% / 0.2); border-bottom-right-radius: 4px; }
.msg-time { font-size: 0.65rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

/* Pagination */
.pagination { display: flex; gap: 0.25rem; align-items: center; }
.page-link {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.page-link:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.page-link.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }

/* Segmented control */
.segmented {
  display: inline-flex;
  background: hsl(var(--muted));
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}
.segment-btn {
  padding: 0.35rem 0.875rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.15s;
}
.segment-btn.active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 4px hsl(0 0% 0% / 0.2);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: hsl(var(--muted-foreground));
}
.empty-state-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.empty-state h3 { color: hsl(var(--foreground)); font-size: 1.1rem; margin-bottom: 0.5rem; }
.empty-state p { font-size: 0.875rem; }

/* Sidebar overlay hidden mobile */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-overlay.open { display: block; }
  .main-content { margin-left: 0; }
  .hamburger { display: flex; }
  .kanban-board { padding-bottom: 80px; }
  .page-body { padding: 1rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .modal { margin: 0.5rem; max-width: calc(100vw - 1rem); }
  .conv-list { display: none; }
  .conv-list.show { display: flex; width: 100%; }
}

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .topbar { padding: 0 1rem; }
}

/* ═══ Lead Detail (ld-) — Design System ═══ */
.ld{padding:1.25rem 1.5rem;}
.ld-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;}
.ld-header-left{display:flex;align-items:center;gap:0.75rem;flex:1;min-width:0;}
.ld-header-right{display:flex;align-items:center;gap:0.6rem;flex-shrink:0;}
.ld-avatar{width:48px;height:48px;border-radius:50%;background:hsl(var(--primary)/0.15);color:hsl(var(--primary));display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:800;flex-shrink:0;}
.ld-name{font-size:1.15rem;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ld-contact-row{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin-top:0.15rem;}
.ld-phone{font-size:0.78rem;color:hsl(var(--muted-foreground));}.ld-email{font-size:0.72rem;color:hsl(var(--muted-foreground));}
.ld-wa-link{display:inline-flex;align-items:center;gap:0.2rem;font-size:0.72rem;color:#25d366;font-weight:600;text-decoration:none;}
.ld-wa-link:hover{opacity:0.8;}
.ld-company{font-size:0.75rem;color:hsl(var(--muted-foreground));margin-top:0.1rem;}
.ld-value{font-size:1rem;font-weight:800;color:hsl(var(--primary));}.ld-value-quoted{color:hsl(142 76% 36%);}
/* Badges */
.ld-badges{display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap;margin-bottom:1rem;}
.ld-badge{font-size:0.68rem;font-weight:600;padding:0.2rem 0.55rem;border-radius:9999px;display:inline-flex;align-items:center;gap:0.25rem;background:hsl(var(--muted));color:hsl(var(--muted-foreground));border:1px solid transparent;}
.ld-badge-hot{background:rgba(239,68,68,0.12);color:#f87171;border-color:rgba(239,68,68,0.2);}
.ld-badge-warm{background:rgba(251,146,60,0.12);color:#fb923c;border-color:rgba(251,146,60,0.2);}
.ld-badge-cold{background:rgba(148,163,184,0.12);color:#94a3b8;border-color:rgba(148,163,184,0.2);}
.ld-badge-frozen{background:rgba(96,165,250,0.12);color:#60a5fa;border-color:rgba(96,165,250,0.2);}
.ld-badge-column{background:hsl(var(--primary)/0.1);color:hsl(var(--primary));border-color:hsl(var(--primary)/0.2);}
.ld-badge-ai-on{background:rgba(34,197,94,0.1);color:#22c55e;border-color:rgba(34,197,94,0.25);}
.ld-badge-ai-off{background:hsl(var(--muted));color:hsl(var(--muted-foreground)/0.6);}
.ld-badge-protected{background:rgba(245,158,11,0.1);color:#f59e0b;border-color:rgba(245,158,11,0.2);}
.ld-badge-time{background:transparent;color:hsl(var(--muted-foreground)/0.5);font-size:0.62rem;border:none;}
.ld-pulse{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:ld-pulse-anim 2s infinite;}
@keyframes ld-pulse-anim{0%,100%{opacity:1;}50%{opacity:0.3;}}
/* AI Card */
.ld-ai-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-left:3px solid hsl(var(--primary));border-radius:var(--radius);padding:0.85rem 1rem;margin-bottom:1rem;}
.ld-ai-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.35rem;}
.ld-ai-label{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:hsl(var(--primary));}
.ld-ai-score{font-size:0.65rem;font-weight:700;color:hsl(var(--muted-foreground));}
.ld-ai-text{font-size:0.82rem;line-height:1.55;color:hsl(var(--foreground)/0.9);}
.ld-ai-bar{height:3px;background:hsl(var(--border));border-radius:9999px;overflow:hidden;margin-top:0.6rem;}
.ld-ai-bar-fill{height:100%;border-radius:9999px;background:hsl(var(--primary));transition:width 0.3s;}
/* Tabs */
.ld-tabs{display:flex;gap:0;border-bottom:2px solid hsl(var(--border)/0.5);margin-bottom:0;}
.ld-tab{display:inline-flex;align-items:center;gap:0.4rem;padding:0.65rem 1rem;font-size:0.8rem;font-weight:500;color:hsl(var(--muted-foreground));background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.15s;position:relative;}
.ld-tab:hover{color:hsl(var(--foreground));background:hsl(var(--accent)/0.5);}
.ld-tab.active{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary));font-weight:600;}
.ld-tab-dot{width:6px;height:6px;border-radius:50%;background:hsl(0 72% 55%);position:absolute;top:8px;right:6px;}
.ld-tab-count{font-size:0.6rem;padding:0.1rem 0.35rem;border-radius:9999px;background:hsl(var(--muted));color:hsl(var(--muted-foreground));font-weight:700;min-width:18px;text-align:center;}
.ld-tab-content{padding-top:1rem;}
/* Messages — WhatsApp-style chat inside CRM lead detail */
.ld-messages{max-height:480px;overflow-y:auto;display:flex;flex-direction:column;gap:0.15rem;margin-bottom:0;padding:0.75rem 1.5rem;
  background-color:var(--wa-wallpaper, #0b141a);
  background-image:url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23182229;fill-opacity:0.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M30 20a4 4 0 11-8 0 4 4 0 018 0zM60 55l-6 4 6 4V55zM100 30h8v2h-8v-2zM155 25a5 5 0 110 10 5 5 0 010-10zM200 50l5-8h-10l5 8zM250 30c0 3-4 3-4 0s4-3 4 0zM30 100h6v6h-6v-6zM80 90a6 6 0 11-12 0 6 6 0 0112 0zM140 95l4-6h-8l4 6zM190 85h10v2h-10v-2zM240 100a4 4 0 11-8 0 4 4 0 018 0zM50 160l-4 6h8l-4-6zM110 150a5 5 0 110 10 5 5 0 010-10zM170 165h6v2h-6v-2zM220 155l6 4-6 4v-8zM270 160a3 3 0 11-6 0 3 3 0 016 0zM25 230a4 4 0 110 8 4 4 0 010-8zM75 220h8v2h-8v-2zM130 240l-5-8h10l-5 8zM185 225a6 6 0 11-12 0 6 6 0 0112 0zM240 235l4-6h-8l4 6zM290 220a3 3 0 11-6 0 3 3 0 016 0zM55 280l6 4-6 4v-8zM120 275a4 4 0 11-8 0 4 4 0 018 0zM175 290h6v2h-6v-2zM230 280a5 5 0 110 10 5 5 0 010-10z'/%3E%3C/svg%3E");
  border-radius:var(--radius);}
.ld-messages::-webkit-scrollbar{width:6px;background:transparent;}.ld-messages::-webkit-scrollbar-thumb{background:rgba(134,150,160,0.25);border-radius:6px;}.ld-messages::-webkit-scrollbar-thumb:hover{background:rgba(134,150,160,0.4);}
/* WhatsApp-style chat bubbles inside CRM lead detail */
.ld-messages .chat-bubble{max-width:fit-content;padding:0.4rem 0.55rem 0.2rem;border-radius:7.5px;font-size:0.87rem;line-height:1.4;position:relative;word-wrap:break-word;box-shadow:0 1px 0.5px rgba(0,0,0,0.13);color:var(--wa-text, #e9edef);}
.ld-messages .chat-bubble.chat-bubble-out,.ld-messages .chat-bubble.chat-bubble-in{max-width:65%;}
.ld-messages .chat-bubble a{color:#53bdeb;}
.ld-messages .chat-bubble-in{background:var(--wa-bubble-in, #202c33);align-self:flex-start;border-top-left-radius:0;margin-left:8px;}
.ld-messages .chat-bubble-in::before{content:'';position:absolute;top:0;left:-8px;width:8px;height:13px;background:var(--wa-bubble-in-tail, #202c33);clip-path:polygon(100% 0,0 0,100% 100%);}
.ld-messages .chat-bubble-out{background:var(--wa-bubble-out, #005c4b);align-self:flex-end;border-top-right-radius:0;margin-right:8px;}
.ld-messages .chat-bubble-out::before{content:'';position:absolute;top:0;right:-8px;width:8px;height:13px;background:var(--wa-bubble-out-tail, #005c4b);clip-path:polygon(0 0,100% 0,0 100%);}
.ld-messages .chat-bubble-sender{font-size:0.68rem;font-weight:500;margin-bottom:0.1rem;color:var(--wa-green, #00a884);}
.ld-messages .chat-bubble-sender-in{color:#e9a537;}
.ld-messages .chat-bubble-out .chat-bubble-sender{color:#53bdeb;}
.ld-messages .chat-bubble-time{font-size:0.62rem;color:var(--wa-muted, #8696a0);text-align:right;margin-top:0.15rem;display:flex;align-items:center;justify-content:flex-end;gap:0.25rem;opacity:0.8;}
.ld-messages .chat-tick{display:inline-flex;}.ld-messages .tick-sent{color:var(--wa-muted, #8696a0);}.ld-messages .tick-delivered{color:var(--wa-muted, #8696a0);}.ld-messages .tick-read{color:#53bdeb;}
.ld-messages .chat-bubble-media{margin:0.2rem 0;}.ld-messages .chat-bubble-media img{max-width:240px;max-height:200px;border-radius:6px;cursor:pointer;display:block;}
.ld-messages .chat-bubble-doc{display:flex;align-items:center;gap:0.5rem;padding:0.45rem 0.6rem;background:rgba(0,0,0,0.1);border-radius:6px;font-size:0.8rem;}
.ld-messages .chat-bubble-actions{display:none;}
.ld-send-form{display:flex;gap:0.5rem;padding:0.75rem 0;border-top:1px solid hsl(var(--border)/0.5);}
.ld-send-input{flex:1;background:hsl(var(--input));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:0.55rem 0.85rem;font-size:0.82rem;color:hsl(var(--foreground));outline:none;transition:border-color 0.15s;}
.ld-send-input:focus{border-color:hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--primary)/0.1);}
.ld-send-btn{width:40px;height:40px;border-radius:var(--radius);background:hsl(var(--primary));color:hsl(var(--primary-foreground));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity 0.15s;}
.ld-send-btn:hover{opacity:0.85;}
.ld-ai-toggle{display:flex;align-items:center;justify-content:space-between;padding:0.55rem 0.85rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);margin-top:0.5rem;}
.ld-ai-toggle-info{display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:500;}
/* Fields */
.ld-fields{display:flex;flex-direction:column;gap:0.75rem;}
.ld-field-group{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;}
.ld-field-label{display:block;font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:hsl(var(--muted-foreground));margin-bottom:0.25rem;}
.ld-field-input{height:36px;font-size:0.82rem;}
.ld-field-toggle{display:flex;align-items:center;justify-content:space-between;padding:0.65rem 0.85rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);}
.ld-field-toggle-title{font-size:0.82rem;font-weight:600;}.ld-field-toggle-desc{font-size:0.68rem;color:hsl(var(--muted-foreground));}
.ld-checkbox{accent-color:hsl(var(--primary));width:18px;height:18px;cursor:pointer;}
.ld-contact-card{margin-top:1rem;padding:0.85rem;background:hsl(var(--muted)/0.4);border:1px solid hsl(var(--border)/0.5);border-radius:var(--radius);}
.ld-contact-card-title{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:hsl(var(--muted-foreground));margin-bottom:0.5rem;}
.ld-contact-card-row{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;padding:0.2rem 0;color:hsl(var(--foreground)/0.85);}
.ld-contact-card-row i,.ld-contact-card-row svg{color:hsl(var(--muted-foreground));flex-shrink:0;}
/* Timeline */
.ld-timeline{position:relative;}
.ld-timeline-item{display:flex;gap:0.85rem;padding-bottom:1rem;position:relative;}
.ld-timeline-item:last-child{padding-bottom:0;}
.ld-timeline-dot{width:10px;height:10px;border-radius:50%;background:hsl(var(--primary));flex-shrink:0;margin-top:0.3rem;z-index:1;box-shadow:0 0 0 3px hsl(var(--background));}
.ld-timeline-line{position:absolute;left:4.5px;top:14px;bottom:0;width:1px;background:hsl(var(--border));}
.ld-timeline-item:last-child .ld-timeline-line{display:none;}
.ld-timeline-content{flex:1;min-width:0;}
.ld-timeline-action{font-size:0.82rem;font-weight:600;color:hsl(var(--foreground));}
.ld-timeline-detail{font-size:0.75rem;color:hsl(var(--muted-foreground));margin-top:0.15rem;}
.ld-timeline-change{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.72rem;margin-top:0.2rem;padding:0.2rem 0.5rem;background:hsl(var(--muted)/0.5);border-radius:var(--radius);}
.ld-timeline-old{color:hsl(var(--muted-foreground));text-decoration:line-through;}
.ld-timeline-new{color:hsl(var(--primary));font-weight:600;}
.ld-timeline-time{font-size:0.68rem;color:hsl(var(--muted-foreground)/0.7);margin-top:0.25rem;}
.ld-timeline-user{font-weight:600;color:hsl(var(--muted-foreground));}
.ld-empty{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:2.5rem 1rem;color:hsl(var(--muted-foreground)/0.5);font-size:0.82rem;}
@media(max-width:640px){.ld-header{flex-direction:column;gap:0.75rem;}.ld-header-right{width:100%;justify-content:space-between;}.ld-field-group{grid-template-columns:1fr;}.ld-tab{font-size:0.75rem;padding:0.55rem 0.75rem;}}

/* Utility classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.p-0 { padding: 0; }
.w-full { width: 100%; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.opacity-50 { opacity: 0.5; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.page-section { padding: 0; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color 0.15s;
}
.kpi-card:hover { border-color: hsl(var(--primary) / 0.4); }

.kpi-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon svg, .kpi-icon i { width: 22px; height: 22px; }
.kpi-icon-primary { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }
.kpi-icon-success { background: hsl(var(--success) / 0.15); color: hsl(142 76% 55%); }
.kpi-icon-warning { background: hsl(var(--warning) / 0.15); color: hsl(47 96% 60%); }
.kpi-icon-info    { background: hsl(199 69% 49% / 0.15); color: hsl(199 69% 60%); }

.kpi-body { flex: 1; min-width: 0; }
.kpi-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-bottom: 0.3rem; }
.kpi-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.2rem; }
.kpi-sub { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}
.dashboard-col-main { display: flex; flex-direction: column; gap: 0; }
.dashboard-col-aside { display: flex; flex-direction: column; gap: 0; }

.kanban-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.kanban-mini-col {
  background: hsl(var(--muted));
  border-radius: var(--radius);
  padding: 0.75rem 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}
.kanban-mini-col:hover { background: hsl(var(--accent)); }
.kanban-mini-label { font-size: 0.65rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.3rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.kanban-mini-count { font-size: 1.25rem; font-weight: 800; color: hsl(var(--foreground)); }

.heat-chart { padding: 0.5rem 0; }
.heat-bar-wrap { display: flex; height: 8px; border-radius: 9999px; overflow: hidden; margin-bottom: 0.75rem; }
.heat-bar-seg { height: 100%; }
.heat-legend { display: flex; gap: 1rem; flex-wrap: wrap; }
.heat-leg { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: hsl(var(--muted-foreground)); }
.heat-leg span:first-child { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.heat-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 9999px; }
.heat-badge.heat-hot { background: hsl(var(--color-red-bg)); color: hsl(var(--color-red)); }
.heat-badge.heat-warm { background: hsl(var(--color-orange-bg)); color: hsl(var(--color-orange)); }
.heat-badge.heat-cold { background: hsl(var(--color-slate-bg)); color: hsl(var(--color-slate)); }
.heat-badge.heat-frozen { background: hsl(var(--color-blue-bg)); color: hsl(var(--color-blue)); }

/* Kanban tab active state classes */
.badge-novo_lead { background: hsl(var(--color-blue-bg)); color: hsl(var(--color-blue)); }
.badge-sdr_ia    { background: hsl(var(--color-violet-bg)); color: hsl(var(--color-violet)); }
.badge-qualificado { background: hsl(var(--color-orange-bg)); color: hsl(var(--color-orange)); }
.badge-negociacao { background: hsl(var(--color-amber-bg)); color: hsl(var(--color-amber)); }
.badge-proposta  { background: hsl(var(--color-emerald-bg)); color: hsl(var(--color-emerald)); }
.badge-followup  { background: hsl(var(--color-slate-bg)); color: hsl(var(--color-slate)); }
.badge-ganho     { background: hsl(var(--color-green-bg)); color: hsl(var(--color-green)); }
.badge-perdido   { background: hsl(var(--color-red-bg)); color: hsl(var(--color-red)); }
.badge-pos_venda { background: hsl(var(--color-indigo-bg)); color: hsl(var(--color-indigo)); }
.badge-suporte   { background: hsl(var(--color-red-bg)); color: hsl(var(--color-red)); }

/* ── Auth Screen ─────────────────────────────────────────────────────────── */
.auth-screen {
  display: flex;
  min-height: 100vh;
}
.auth-brand {
  flex: 1;
  background: hsl(var(--card));
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  border-right: 1px solid hsl(var(--border));
  position: relative;
  overflow: hidden;
}
.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, hsl(47 96% 53% / 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, hsl(263 70% 60% / 0.06) 0%, transparent 60%);
  pointer-events: none;
}
@media (min-width: 1024px) { .auth-brand { display: flex; } }
.auth-brand-inner { max-width: 480px; }
.auth-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 3rem; }
.auth-logo-text { font-size: 1.25rem; font-weight: 800; }
.auth-headline { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.auth-subline { color: hsl(var(--muted-foreground)); line-height: 1.6; margin-bottom: 2.5rem; }
.auth-features { display: flex; flex-direction: column; gap: 1rem; }
.auth-feature { display: flex; align-items: flex-start; gap: 0.875rem; }
.auth-feature-icon { font-size: 1.5rem; flex-shrink: 0; }
.auth-feature-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.15rem; }
.auth-feature-desc { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

.auth-form-panel {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
@media (min-width: 1024px) { .auth-form-panel { padding: 3rem; } }
.auth-form-inner { width: 100%; }
.auth-form-header { margin-bottom: 2rem; }
.auth-form-header h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.4rem; }
.auth-form-header p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; }
.auth-footer { margin-top: 2rem; text-align: center; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.auth-form { display: flex; flex-direction: column; gap: 0; }

.input-icon-wrap { position: relative; }
.input-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: hsl(var(--muted-foreground)); pointer-events: none; }
.input-icon-wrap .input-field { padding-left: 2.5rem; }
.input-icon-right { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground)); display: flex; }

/* ── Academia ─────────────────────────────────────────────────────────────── */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.progress-bar { height: 6px; background: hsl(var(--muted)); border-radius: 9999px; overflow: hidden; margin-top: 0.5rem; }
.progress-fill { height: 100%; background: hsl(var(--primary)); border-radius: 9999px; transition: width 0.3s; }

/* ── Responsive Dashboard ────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .kanban-mini-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kanban-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Kanban tab active class ─────────────────────────────────────────────── */
.kanban-tab { display: inline-flex; align-items: center; gap: 0.3rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* .input is an alias for .input-field */
.input { width:100%; background:hsl(var(--input)); border:1px solid hsl(var(--border)); border-radius:var(--radius); color:hsl(var(--foreground)); padding:0.6rem 0.875rem; font-size:0.875rem; transition:border-color 0.15s; outline:none; }
.input:focus { border-color:hsl(var(--primary)); box-shadow:0 0 0 2px hsl(var(--primary)/0.15); }
.input::placeholder { color:hsl(var(--muted-foreground)); opacity:0.7; }
.input:disabled { opacity:0.5; cursor:not-allowed; }
textarea.input { min-height:80px; resize:vertical; }
select.input { cursor:pointer; }

/* ── Urgent Lead Card Pulse Animation ─────────────────────────────────────── */
@keyframes pulse-urgent {
  0%   { border-color: hsl(0 72% 42%); box-shadow: 0 0 0 0 hsla(0, 72%, 42%, 0.5); }
  50%  { border-color: hsl(0 72% 55%); box-shadow: 0 0 12px 4px hsla(0, 72%, 42%, 0.25); }
  100% { border-color: hsl(0 72% 42%); box-shadow: 0 0 0 0 hsla(0, 72%, 42%, 0); }
}

.card-urgent {
  border: 2px solid hsl(0 72% 42%);
  animation: pulse-urgent 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIRST — Responsividade Completa
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Touch targets: mínimo 44px para mobile ── */
@media (max-width: 768px) {
  .btn, .btn-sm, button[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    font-size: 0.85rem;
  }
  .input-field, .input, select, textarea {
    min-height: 44px;
    font-size: 16px !important; /* Previne zoom no iOS */
  }
}

/* ── Topbar mobile ── */
@media (max-width: 768px) {
  .topbar {
    padding: 0 0.75rem;
    height: 52px;
    gap: 0.5rem;
  }
  .topbar-right {
    gap: 0.35rem;
  }
  .topbar-right .tex-search {
    display: none; /* Esconde search bar, usa ícone */
  }
  .topbar .breadcrumb {
    display: none;
  }
  .topbar-right .btn-icon {
    width: 36px;
    height: 36px;
  }
}

/* ── Sidebar mobile (overlay) ── */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    z-index: 50;
    width: 260px;
    height: 100vh;
    top: 0;
    left: 0;
    transition: transform 0.25s ease;
  }
  .main-content {
    margin-left: 0 !important;
    width: 100%;
  }
  .page-body {
    padding: 0.75rem;
  }
}

/* ── Dashboard mobile ── */
@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
  }
  .kpi-card {
    padding: 0.65rem;
  }
  .kpi-value {
    font-size: 1.2rem;
  }
  .kpi-label {
    font-size: 0.65rem;
  }
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .chart-container {
    height: 200px !important;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem;
  }
}

/* ── Kanban mobile ── */
@media (max-width: 1024px) {
  .kb-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .kb-tabs::-webkit-scrollbar { display: none; }
  .kb-tab {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 768px) {
  .kb-board {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .kb-column {
    min-width: 85vw;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .kb-card {
    padding: 0.65rem;
  }
  .kb-toolbar {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .kb-toolbar select, .kb-toolbar input {
    font-size: 0.78rem;
    min-width: 120px;
  }
}

/* ── Chat WhatsApp mobile ── */
@media (max-width: 768px) {
  .conversation-panel {
    flex-direction: column;
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px); /* Dynamic viewport height */
    border: none;
    border-radius: 0;
  }
  .conv-list {
    width: 100% !important;
    max-height: 100%;
    border-right: none;
    border-bottom: 1px solid hsl(var(--border));
  }
  .conv-list:not(.show) {
    display: none;
  }
  .conv-list.show {
    display: flex !important;
  }
  .conv-main {
    flex: 1;
    min-height: 0;
  }
  .conv-messages {
    padding: 0.5rem;
  }
  .msg-bubble {
    max-width: 85% !important;
    font-size: 0.88rem;
  }
  .conv-input {
    padding: 0.5rem;
  }
  .conv-input textarea {
    font-size: 16px !important;
  }
  /* Chat header mobile */
  .chat-header {
    padding: 0.5rem 0.75rem;
  }
  .chat-contact-info {
    flex: 1;
    min-width: 0;
  }
  .chat-contact-name {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Lead Detail mobile ── */
@media (max-width: 768px) {
  .ld {
    padding: 0.75rem;
  }
  .ld-header {
    flex-direction: column;
    gap: 0.75rem;
  }
  .ld-header-right {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .ld-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.75rem;
  }
  .ld-name {
    font-size: 1rem;
  }
  .ld-badges {
    flex-wrap: wrap;
  }
  .ld-field-group {
    grid-template-columns: 1fr !important;
  }
  .ld-tab {
    font-size: 0.72rem;
    padding: 0.5rem 0.6rem;
  }
  .ld-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ld-tabs::-webkit-scrollbar { display: none; }
  .ld-messages .chat-bubble,
  .ld-messages .chat-bubble.chat-bubble-out,
  .ld-messages .chat-bubble.chat-bubble-in {
    max-width: 90% !important;
  }
}

/* ── Orçamentos / Propostas mobile ── */
@media (max-width: 768px) {
  .quotation-header {
    flex-direction: column;
    gap: 0.5rem;
  }
  .quotation-actions {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .quotation-actions .btn {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table th, table td {
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
  }
}

/* ── Configurações mobile ── */
@media (max-width: 768px) {
  .cfg-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0.5rem;
  }
  .cfg-tabs::-webkit-scrollbar { display: none; }
  .cfg-tab {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 0.5rem 0.75rem;
  }
  .cfg-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .cfg-card {
    padding: 0.75rem;
  }
  .cfg-section-title {
    font-size: 0.9rem;
  }
}

/* ── Agenda mobile ── */
@media (max-width: 768px) {
  .calendar-grid {
    font-size: 0.72rem;
  }
  .calendar-grid td {
    padding: 0.3rem;
    min-width: 36px;
    height: 36px;
  }
  .appointment-card {
    padding: 0.5rem;
  }
}

/* ── Academia mobile ── */
@media (max-width: 768px) {
  .course-grid {
    grid-template-columns: 1fr !important;
  }
  .classroom-layout {
    flex-direction: column;
  }
  .classroom-sidebar {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
  }
  .classroom-video {
    width: 100%;
  }
  .classroom-video iframe, .classroom-video video {
    height: 56.25vw; /* 16:9 ratio */
  }
}

/* ── Financeiro mobile ── */
@media (max-width: 768px) {
  .commission-grid, .subscription-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Contatos e Lista mobile ── */
@media (max-width: 768px) {
  .contact-list, .product-list {
    gap: 0.5rem;
  }
  .list-item {
    padding: 0.65rem;
  }
}

/* ── Modal mobile ── */
@media (max-width: 640px) {
  .modal, dialog {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 2rem);
    margin: 0.5rem;
    padding: 1rem;
  }
  dialog::backdrop {
    background: rgba(0,0,0,0.7);
  }
}

/* ── Calculadoras mobile ── */
@media (max-width: 768px) {
  .calc-grid {
    grid-template-columns: 1fr !important;
  }
  .calc-result {
    font-size: 0.85rem;
  }
}

/* ── Login page mobile ── */
@media (max-width: 768px) {
  .auth-container {
    flex-direction: column;
  }
  .auth-brand {
    display: none;
  }
  .auth-form-panel {
    padding: 1.5rem;
    width: 100%;
    max-width: 100%;
  }
  .auth-form-panel h1 {
    font-size: 1.3rem;
  }
}

/* ── BPMN viewer mobile ── */
@media (max-width: 768px) {
  .bpmn-pool-btn {
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
  }
  .bpmn-viewport {
    height: 300px !important;
    min-height: 200px;
  }
  .bpmn-toolbar {
    flex-wrap: wrap;
  }
  .bpmn-toolbar-hint {
    display: none;
  }
}

/* ── Print styles ── */
@media print {
  .sidebar, .topbar, .hamburger, .btn, button, .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .page-body { padding: 0; }
  body { background: white; color: black; }
}

/* ── Safe area (iPhone notch) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .conv-input, .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Smooth scrolling ── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Hover only on devices that support it ── */
@media (hover: hover) {
  .btn:hover { filter: brightness(1.08); }
  .card:hover { border-color: hsl(var(--border)/0.8); }
  .kb-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
}

/* ── Focus visible for accessibility ── */
:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}