/* ============================================================
   CRM THR — Sistema de diseño
   Two-tone: azul noche + blanco. Plus Jakarta Sans. Material Symbols.
   ============================================================ */

:root {
  /* Two-tone surfaces */
  --bg-dark: #0A1929;
  --bg-panel: #0D2137;
  --border-dark: #1E3A5F;

  /* Accents */
  --accent-blue: #3B9EEB;
  --accent-blue-deep: #0055CC;
  --hot-orange: #EA580C;
  --success-green: #10B981;

  /* Content */
  --content-bg: #FFFFFF;
  --surface: #F8FAFC;
  --surface-2: #F1F5F9;
  --border-light: #E2E8F0;
  --text-primary: #0A1929;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  /* Tints */
  --tint-blue: #F0F6FF;
  --tint-blue-2: #EEF4FF;
  --tint-orange: #FFF0E6;
  --tint-green: #ECFDF5;

  --radius-card: 12px;
  --radius-btn: 7px;
  --radius-pill: 20px;

  --shadow-pop: 0 16px 48px -12px rgba(10, 25, 41, 0.30);
  --shadow-soft: 0 2px 8px -2px rgba(10, 25, 41, 0.08);

  --topbar-h: 52px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* WhatsApp */
  --wa-bg: #EFEAE2;
  --wa-sent: #D9FDD3;
  --wa-recv: #FFFFFF;
  --wa-text: #111B21;
  --wa-sub: #667781;
}

/* Modo oscuro (las áreas de contenido también pasan a azul noche) */
[data-theme="dark"] {
  --content-bg: #0A1929;
  --surface: #0D2137;
  --surface-2: #0F2742;
  --border-light: #1E3A5F;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --tint-blue: #102A45;
  --tint-blue-2: #112F4E;
  --tint-orange: #2A1810;
  --tint-green: #0C2A22;

  --wa-bg: #0B141A;
  --wa-sent: #005C4B;
  --wa-recv: #202C33;
  --wa-text: #E9EDEF;
  --wa-sub: #8696A0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg-dark);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

#root { height: 100vh; }

.msym {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; user-select: none; vertical-align: middle;
}

/* Scrollbars */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.28); border-radius: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ===================== APP SHELL ===================== */
.app { height: 100vh; display: flex; flex-direction: column; background: var(--content-bg); }

.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  background: var(--bg-dark); display: flex; align-items: center;
  padding: 0 18px; gap: 18px; z-index: 50; position: relative;
  border-bottom: 1px solid var(--border-dark);
}
.brand { display: flex; align-items: center; gap: 11px; padding-right: 6px; }
.brand-user { color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; letter-spacing: -0.01em; }
.brand-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.14); }
.logo-thr-img { height: 21px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 14px; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px;
  border-radius: 8px; cursor: pointer; color: rgba(255,255,255,0.55);
  font-size: 13px; font-weight: 600; transition: background .14s, color .14s; white-space: nowrap;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.nav-item.active { color: #fff; }
.nav-box {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(255,255,255,0.07); transition: background .14s;
}
.nav-box .msym { color: rgba(255,255,255,0.45); transition: color .14s; }
.nav-item:hover .nav-box .msym { color: rgba(255,255,255,0.75); }
.nav-item.active .nav-box { background: var(--accent-blue); }
.nav-item.active .nav-box .msym { color: var(--bg-dark); }

.icon-btn {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  cursor: pointer; color: var(--text-secondary); position: relative;
  transition: background .14s, color .14s; border: none; background: transparent;
  text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); }
.topbar .icon-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }

.module-root { flex: 1; min-height: 0; display: flex; background: var(--content-bg); }

/* ===================== GENÉRICOS ===================== */
.label-xs { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.split-pane { display: flex; width: 100%; min-height: 0; }

/* Avatar */
.av { border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.badge-pros { background: var(--tint-blue-2); color: var(--accent-blue-deep); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: var(--radius-btn); font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: filter .14s, background .14s, transform .06s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: default; }
.btn-action { background: var(--accent-blue); color: var(--bg-dark); font-weight: 700; }
.btn-action:hover:not(:disabled) { filter: brightness(1.06); }
.btn-secondary { background: var(--content-bg); border-color: var(--border-light); color: var(--text-secondary); }
.btn-secondary:hover:not(:disabled) { background: var(--surface); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn-icon-sq { width: 38px; padding: 0; }

/* Tarjetas */
.card { background: var(--content-bg); border: 1px solid var(--border-light); border-radius: var(--radius-card); }

/* Inputs */
.input {
  width: 100%; height: 40px; padding: 0 13px; border-radius: var(--radius-btn);
  border: 1px solid var(--border-light); background: var(--content-bg);
  font-family: var(--font); font-size: 13px; color: var(--text-primary);
  outline: none; transition: border-color .14s, box-shadow .14s;
}
.input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59,158,235,0.14); }
textarea.input { height: auto; padding: 11px 13px; resize: vertical; line-height: 1.5; }

/* Chips de palabra clave */
.kw {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-secondary);
}

/* Píldoras de filtro */
.fpill {
  height: 30px; padding: 0 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; transition: background .14s; font-family: var(--font);
}

/* Modal */
.overlay {
  position: fixed; inset: 0; background: rgba(10,25,41,0.5); backdrop-filter: blur(2px);
  z-index: 200; display: grid; place-items: center; animation: fadeIn .18s ease;
}
.modal { background: var(--content-bg); border-radius: 16px; box-shadow: var(--shadow-pop); animation: popIn .2s cubic-bezier(.2,.8,.3,1); }

/* Animaciones */
@keyframes fadeUp { from { transform: translateY(9px); } to { transform: translateY(0); } }
@keyframes fadeIn { from { transform: translateY(2px); } to { transform: translateY(0); } }
@keyframes popIn { from { transform: scale(.97); } to { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-up { animation: fadeUp .34s cubic-bezier(.2,.7,.3,1) both; }
.fade-in { animation: fadeIn .3s ease both; }
.pop-in { animation: popIn .18s cubic-bezier(.2,.8,.3,1) both; }

.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(59,158,235,0.25);
  border-top-color: var(--accent-blue-deep); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}