* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --primary: #4F6EF7;
  --primary-light: #EEF1FE;
  --bg: #F5F7FA;
  --card: #fff;
  --text: #1A1A2E;
  --text-secondary: #6B7280;
  --border: #E5E7EB;
  --sidebar-w: 210px;
  --green: #22C55E;
  --red: #EF4444;
  --orange: #F59E0B;
  --purple: #8B5CF6;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="dark"] {
  --bg: #111827; --card: #1F2937; --text: #F9FAFB; --text-secondary: #9CA3AF;
  --border: #374151; --primary-light: #1E293B;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { text-decoration: none; color: inherit; }

/* LOGIN */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#4F6EF7 0%,#7C3AED 100%); }
.login-card { background:#fff; border-radius:16px; padding:48px 40px; width:400px; box-shadow:0 20px 60px rgba(0,0,0,0.15); }
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo .logo-icon { margin:0 auto 12px; }
.login-logo h1 { font-size:28px; color:#1A1A2E; }
.login-logo p { color:#6B7280; font-size:14px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; }
.form-group input { width:100%; padding:12px 14px; border:1px solid #D1D5DB; border-radius:8px; font-size:14px; transition:border .2s; outline:none; }
.form-group input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,110,247,0.1); }
.error-msg { background:#FEE2E2; color:#DC2626; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; }
.btn { padding:10px 20px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:6px; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:#3B5DE7; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover { background:var(--primary-light); }
.btn-danger { background:#FEE2E2; color:#DC2626; }
.btn-success { background:#DCFCE7; color:#16A34A; }
.btn-full { width:100%; justify-content:center; padding:14px; }
.btn-icon { background:none; border:none; cursor:pointer; padding:8px; border-radius:8px; color:var(--text-secondary); }
.btn-icon:hover { background:var(--primary-light); }
.btn-sm { padding:6px 12px; font-size:12px; }

/* LAYOUT */
#app { display:flex; min-height:100vh; }
.sidebar { width:var(--sidebar-w); background:var(--card); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; transition:transform .3s; overflow-y:auto; }
.sidebar.hidden { transform:translateX(-100%); }
.main { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; transition:margin .3s; }
.sidebar.hidden + .main { margin-left:0; }
.topbar { height:56px; background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:50; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.content { flex:1; padding:24px; overflow-y:auto; }

/* SIDEBAR */
.sidebar-header { padding:16px 16px 8px; }
.sidebar-logo { display:flex; align-items:center; gap:10px; }
.sidebar-logo strong { font-size:16px; display:block; }
.sidebar-logo small { font-size:11px; color:var(--text-secondary); }
.sidebar-section { padding:8px 12px; }
.sidebar-label { font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px; padding:8px 8px 4px; display:flex; align-items:center; gap:6px; }
.company-selector { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; margin:4px 0; }
.nav-info { padding:8px; font-size:11px; color:var(--text-secondary); }
.nav-info div { font-size:12px; font-weight:600; color:var(--text); }
.nav-company-id { font-size:10px; color:var(--text-secondary); font-family:monospace; word-break:break-all; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:13px; font-weight:500; color:var(--text-secondary); transition:all .15s; }
.nav-item:hover { background:var(--primary-light); color:var(--primary); }
.nav-item.active { background:var(--primary); color:#fff; }
.sidebar-bottom { margin-top:auto; padding:12px; border-top:1px solid var(--border); }
.user-card { display:flex; align-items:center; gap:10px; padding:10px 4px; margin-top:8px; }
.user-avatar { width:32px; height:32px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.user-avatar-small { width:32px; height:32px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.user-info { font-size:12px; overflow:hidden; }
.user-info div { font-weight:600; font-size:13px; }
.user-info small { color:var(--text-secondary); }

/* PAGE HEADER */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.page-header h1 { font-size:24px; font-weight:700; }
.page-header .subtitle { font-size:14px; color:var(--text-secondary); }
.page-actions { display:flex; gap:8px; align-items:center; }

/* TABS */
.tabs { display:flex; gap:4px; margin-bottom:20px; background:var(--card); padding:4px; border-radius:10px; border:1px solid var(--border); width:fit-content; }
.tab { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; color:var(--text-secondary); transition:all .15s; border:none; background:none; }
.tab:hover { color:var(--text); }
.tab.active { background:var(--primary); color:#fff; }
.tab.active-green { background:#DCFCE7; color:#16A34A; }
.tab.active-red { background:#FEE2E2; color:#DC2626; }

/* FILTER BAR */
.filter-bar { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; }
.filter-bar h3 { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.filter-row { display:flex; gap:16px; align-items:end; flex-wrap:wrap; }
.filter-group { flex:1; min-width:180px; }
.filter-group label { font-size:12px; font-weight:600; color:var(--text-secondary); display:block; margin-bottom:4px; }
.filter-group input, .filter-group select { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--card); color:var(--text); outline:none; }
.filter-group input:focus, .filter-group select:focus { border-color:var(--primary); }
.filter-actions { display:flex; gap:8px; padding-top:20px; }
.active-filters { font-size:12px; color:var(--text-secondary); margin-top:8px; padding:6px 0; border-top:1px solid var(--border); }

/* STAT CARDS */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card { background:var(--card); border-radius:12px; padding:20px; border:1px solid var(--border); position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.stat-card.blue::before { background:var(--primary); }
.stat-card.purple::before { background:var(--purple); }
.stat-card.green::before { background:var(--green); }
.stat-card.orange::before { background:var(--orange); }
.stat-card.red::before { background:var(--red); }
.stat-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.stat-card-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.stat-card.blue .stat-card-label { color:var(--primary); }
.stat-card.purple .stat-card-label { color:var(--purple); }
.stat-card.green .stat-card-label { color:var(--green); }
.stat-card.orange .stat-card-label { color:var(--orange); }
.stat-card.red .stat-card-label { color:var(--red); }
.stat-card-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.stat-card.blue .stat-card-icon { background:rgba(79,110,247,0.1); color:var(--primary); }
.stat-card.green .stat-card-icon { background:rgba(34,197,94,0.1); color:var(--green); }
.stat-card.orange .stat-card-icon { background:rgba(245,158,11,0.1); color:var(--orange); }
.stat-card.red .stat-card-icon { background:rgba(239,68,68,0.1); color:var(--red); }
.stat-card-value { font-size:24px; font-weight:700; }
.stat-card-sub { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* CHART CARD */
.chart-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; }
.chart-card h3 { font-size:15px; font-weight:600; margin-bottom:4px; }
.chart-card .chart-subtitle { font-size:12px; color:var(--text-secondary); margin-bottom:16px; }
.chart-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.chart-totals { display:flex; gap:16px; }
.chart-total { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:700; }
.chart-total.income { background:#DCFCE7; color:#16A34A; }
.chart-total.expense { background:#FEE2E2; color:#DC2626; }

/* BALANCE CARD */
.balance-card { background:linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%); border-radius:12px; padding:28px; color:#fff; margin-bottom:20px; }
.balance-card .balance-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; opacity:.7; margin-bottom:8px; }
.balance-card .balance-icon { width:48px; height:48px; background:rgba(255,255,255,0.15); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:12px; }
.balance-card .balance-value { font-size:32px; font-weight:700; margin-bottom:8px; }
.balance-card .balance-breakdown { display:flex; gap:16px; font-size:13px; }
.balance-card .balance-breakdown span { display:flex; align-items:center; gap:4px; }
.balance-green { color:#4ADE80; }
.balance-red { color:#FB7185; }

/* TABLE */
.table-card { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.table-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.table-header h3 { font-size:15px; font-weight:600; }
.search-input { padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; width:220px; outline:none; background:var(--card); color:var(--text); }
.search-input:focus { border-color:var(--primary); }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:12px 16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); background:var(--bg); border-bottom:1px solid var(--border); }
td { padding:12px 16px; font-size:13px; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--primary-light); }
.badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-green { background:#DCFCE7; color:#16A34A; }
.badge-orange { background:#FEF3C7; color:#D97706; }
.badge-blue { background:#DBEAFE; color:#2563EB; }
.badge-red { background:#FEE2E2; color:#DC2626; }
.id-badge { background:var(--primary); color:#fff; padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; font-family:monospace; }
.table-footer { padding:12px 20px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-secondary); border-top:1px solid var(--border); }
.pagination { display:flex; gap:8px; }
.pagination button { padding:6px 12px; border:1px solid var(--border); border-radius:6px; background:var(--card); color:var(--text-secondary); font-size:13px; cursor:pointer; }
.pagination button:hover { border-color:var(--primary); color:var(--primary); }
.empty-state { text-align:center; padding:60px 20px; color:var(--text-secondary); }
.empty-state svg { margin-bottom:16px; opacity:.4; }
.empty-state p { font-size:14px; }

/* CONFIG TABS */
.config-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:24px; background:var(--card); border-radius:12px 12px 0 0; padding:0 8px; }
.config-tab { padding:14px 20px; font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; display:flex; align-items:center; gap:6px; transition:all .15s; }
.config-tab:hover { color:var(--text); }
.config-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.config-section { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; margin-bottom:20px; }
.config-section h2 { font-size:18px; font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.config-section .desc { font-size:13px; color:var(--text-secondary); margin-bottom:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-row.single { grid-template-columns:1fr; }
.form-field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.form-field input, .form-field select { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; background:var(--card); color:var(--text); outline:none; }
.form-field input:focus, .form-field select:focus { border-color:var(--primary); }
.id-display { background:var(--primary-light); border:1px solid var(--border); border-radius:8px; padding:16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.id-display .id-label { font-size:14px; font-weight:600; color:var(--primary); }
.id-display .id-sublabel { font-size:12px; color:var(--text-secondary); }
.id-display code { font-family:monospace; font-size:13px; background:var(--card); padding:6px 12px; border-radius:6px; border:1px solid var(--border); }
.copy-btn { padding:6px 10px; background:none; border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:12px; }
.copy-btn:hover { background:var(--primary-light); }

/* CATEGORY LIST */
.category-list { margin-top:16px; }
.category-item { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); }
.category-item:last-child { border-bottom:none; }
.category-actions { display:flex; gap:8px; }
.add-category-row { display:flex; gap:12px; margin-bottom:16px; }
.add-category-row input { flex:1; }

/* USERS TABLE */
.users-table { width:100%; border-collapse:collapse; margin-top:16px; }
.users-table th, .users-table td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--border); }
.users-table th { font-size:12px; font-weight:600; color:var(--text-secondary); }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:200; }
.modal { background:var(--card); border-radius:16px; padding:32px; width:480px; max-width:90vw; max-height:90vh; overflow-y:auto; }
.modal h2 { font-size:20px; margin-bottom:20px; }
.modal .form-group { margin-bottom:16px; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }

/* RESPONSIVE */
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.show { transform:translateX(0); }
  .main { margin-left:0 !important; }
  .stat-cards { grid-template-columns:1fr 1fr; }
  .filter-row { flex-direction:column; }
  .form-row { grid-template-columns:1fr; }
  .page-header { flex-direction:column; gap:12px; }
}

/* Transitions */
.fade-in { animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-secondary); }

/* ====================== WHATSAPP CHAT ====================== */
.wa-container { display:flex; height:calc(100vh - 80px); border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#d9dbd5; }
[data-theme="dark"] .wa-container { background:#0b141a; }

/* Sidebar / Chat list */
.wa-sidebar { width:340px; min-width:340px; display:flex; flex-direction:column; background:#fff; border-right:1px solid #e9edef; }
[data-theme="dark"] .wa-sidebar { background:#111b21; border-right-color:#2a3942; }
.wa-sidebar-header { padding:12px 16px; background:#f0f2f5; display:flex; align-items:center; justify-content:space-between; min-height:56px; position:relative; }
[data-theme="dark"] .wa-sidebar-header { background:#202c33; }
.wa-sidebar-header h3 { font-size:15px; font-weight:600; color:#111b21; }
[data-theme="dark"] .wa-sidebar-header h3 { color:#e9edef; }
.wa-search { padding:8px 12px; background:#f0f2f5; border-bottom:1px solid #e9edef; }
[data-theme="dark"] .wa-search { background:#111b21; border-bottom-color:#2a3942; }
.wa-search input { width:100%; padding:8px 12px; border:none; border-radius:8px; font-size:13px; background:#fff; color:#111b21; outline:none; }
[data-theme="dark"] .wa-search input { background:#202c33; color:#e9edef; }
.wa-tabs { display:flex; padding:4px 8px; gap:4px; background:#f0f2f5; }
[data-theme="dark"] .wa-tabs { background:#111b21; }
.wa-tab { padding:6px 12px; border-radius:16px; font-size:12px; cursor:pointer; border:none; background:transparent; color:#667781; font-weight:500; }
.wa-tab.active { background:#e7fce3; color:#008069; }
[data-theme="dark"] .wa-tab.active { background:#0a3a2a; color:#00a884; }
.wa-chat-list { flex:1; overflow-y:auto; }
.wa-chat-item { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; border-bottom:1px solid #f0f2f5; transition:background .1s; }
[data-theme="dark"] .wa-chat-item { border-bottom-color:#222e35; }
.wa-chat-item:hover { background:#f5f6f6; }
[data-theme="dark"] .wa-chat-item:hover { background:#202c33; }
.wa-chat-item.active { background:#f0f2f5; }
[data-theme="dark"] .wa-chat-item.active { background:#2a3942; }
.wa-chat-avatar { width:48px; height:48px; border-radius:50%; background:#dfe5e7; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex-shrink:0; }
.wa-chat-info { flex:1; min-width:0; }
.wa-chat-name { font-size:14px; font-weight:500; color:#111b21; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme="dark"] .wa-chat-name { color:#e9edef; }
.wa-chat-last { font-size:13px; color:#667781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
[data-theme="dark"] .wa-chat-last { color:#8696a0; }
.wa-chat-meta { text-align:right; flex-shrink:0; }
.wa-chat-time { font-size:11px; color:#667781; }
[data-theme="dark"] .wa-chat-time { color:#8696a0; }
.wa-chat-unread { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:18px; background:#25d366; color:#fff; font-size:11px; font-weight:700; margin-top:4px; padding:0 4px; }
.wa-chat-unread.wa-syncing { min-width:10px; width:10px; padding:0; animation:pulse-dot 1.4s ease-in-out infinite; }

/* Main chat panel */
.wa-main { flex:1; display:flex; flex-direction:column; background:#efeae2; }
[data-theme="dark"] .wa-main { background:#0b141a; }
.wa-main-header { padding:10px 16px; background:#f0f2f5; display:flex; align-items:center; gap:12px; border-bottom:1px solid #e9edef; min-height:56px; }
[data-theme="dark"] .wa-main-header { background:#202c33; border-bottom-color:#2a3942; }
.wa-main-header .wa-chat-avatar { width:40px; height:40px; font-size:16px; }
.wa-main-name { font-size:14px; font-weight:600; color:#111b21; }
[data-theme="dark"] .wa-main-name { color:#e9edef; }
.wa-main-phone { font-size:12px; color:#667781; }
[data-theme="dark"] .wa-main-phone { color:#8696a0; }
.wa-messages { flex:1; overflow-y:auto; padding:16px 48px; background:url('/wa-bg.jpg') center/cover; position:relative; }
[data-theme="dark"] .wa-messages { background:url('/wa-bg-dark.webp') center/cover; }
.wa-messages::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.12); }
[data-theme="dark"] .wa-messages::before { background:rgba(0,0,0,0.1); }
.wa-msg-row { display:flex; margin-bottom:2px; position:relative; z-index:1; }
.wa-msg-row.sent { justify-content:flex-end; }
.wa-msg-row.received { justify-content:flex-start; }
.wa-bubble { max-width:65%; padding:6px 7px 8px 9px; border-radius:7.5px; position:relative; box-shadow:0 1px 0.5px rgba(11,20,26,0.13); word-wrap:break-word; }
.wa-bubble.sent { background:#d9fdd3; border-top-right-radius:0; }
[data-theme="dark"] .wa-bubble.sent { background:#005c4b; }
.wa-bubble.received { background:#fff; border-top-left-radius:0; }
[data-theme="dark"] .wa-bubble.received { background:#202c33; }
.wa-bubble-text { font-size:14.2px; line-height:19px; color:#111b21; white-space:pre-wrap; }
[data-theme="dark"] .wa-bubble-text { color:#e9edef; }
.wa-bubble-meta { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:2px; }
.wa-bubble-time { font-size:11px; color:#667781; }
[data-theme="dark"] .wa-bubble-time { color:#8696a0; }
.wa-check { color:#53bdeb; font-size:12px; }
.wa-bubble-sender { font-size:12.5px; font-weight:500; color:#00a884; margin-bottom:2px; }
.wa-bubble-media img { max-width:300px; max-height:200px; border-radius:6px; margin-bottom:4px; cursor:pointer; }
.wa-bubble-media a { color:#039be5; font-size:13px; text-decoration:underline; }

/* Date separator */
.wa-date-sep { text-align:center; margin:12px 0; position:relative; z-index:1; }
.wa-date-sep span { background:#fff; color:#667781; font-size:12px; padding:5px 12px; border-radius:7.5px; box-shadow:0 1px 0.5px rgba(11,20,26,0.13); display:inline-block; }
[data-theme="dark"] .wa-date-sep span { background:#1d2b33; color:#8696a0; }

/* Input bar */
.wa-input-bar { display:flex; align-items:center; gap:8px; padding:6px 12px; background:#f0f2f5; border-top:1px solid #e9edef; }
[data-theme="dark"] .wa-input-bar { background:#202c33; border-top-color:#2a3942; }
.wa-input-bar input { flex:1; padding:10px 14px; border:none; border-radius:8px; font-size:14px; background:#fff; color:#111b21; outline:none; }
[data-theme="dark"] .wa-input-bar input { background:#2a3942; color:#e9edef; }
.wa-send-btn { width:40px; height:40px; border-radius:50%; border:none; background:#008069; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.wa-send-btn:hover { background:#017561; }

/* Empty state */
.wa-empty { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#f0f2f5; }
[data-theme="dark"] .wa-empty { background:#222e35; }
.wa-empty svg { width:250px; opacity:.3; margin-bottom:20px; }
.wa-empty h2 { font-size:28px; font-weight:300; color:#41525d; }
[data-theme="dark"] .wa-empty h2 { color:#8696a0; }
.wa-empty p { font-size:14px; color:#667781; margin-top:8px; }

@media(max-width:900px) { .wa-sidebar { width:100%; min-width:0; } .wa-main { display:none; } }

/* ====================== WHATSAPP CHAT v2 (group/media/audio/lightbox) ====================== */

/* Animación de aparición de mensajes */
@keyframes wa-msg-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.wa-msg-row { animation: wa-msg-in .25s ease-out; }

/* Cfg menu (gear button) */
.wa-cfg-menu { position:absolute; top:48px; right:12px; background:#fff; border:1px solid #e9edef; border-radius:8px; box-shadow:0 6px 24px rgba(11,20,26,.15); min-width:170px; z-index:80; padding:6px; animation: fadeIn .15s ease; }
[data-theme="dark"] .wa-cfg-menu { background:#233138; border-color:#374045; }
.wa-cfg-menu button { display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:transparent; cursor:pointer; font-size:13px; color:#111b21; border-radius:6px; }
[data-theme="dark"] .wa-cfg-menu button { color:#e9edef; }
.wa-cfg-menu button:hover { background:#f0f2f5; }
[data-theme="dark"] .wa-cfg-menu button:hover { background:#2a3942; }

/* Avatares con foto real cargada por loadAvatar() */
.wa-chat-avatar, .wa-msg-sender-avatar, .wa-member-avatar { position:relative; overflow:hidden; }
.wa-avatar-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; border-radius:inherit; }
.wa-avatar-img.loaded { opacity:1; }

/* Group avatar/icon */
.wa-chat-avatar.group-avatar { background:#6b7c85 !important; }
.wa-group-icon { vertical-align:middle; color:#667781; margin-right:4px; }
.wa-chat-item.is-group .wa-chat-name { color:#005c4b; }
[data-theme="dark"] .wa-chat-item.is-group .wa-chat-name { color:#06cf9c; }

/* Sender avatar al lado de bubble (solo grupos, recibidos) */
.wa-msg-row.received { gap:6px; align-items:flex-end; }
.wa-msg-sender-avatar { width:28px; height:28px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; margin-bottom:6px; cursor:default; }

/* Sync indicator */
.wa-sync-indicator { display:flex; align-items:center; gap:6px; font-size:11px; color:#667781; padding:4px 10px; background:#fff; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.08); }
[data-theme="dark"] .wa-sync-indicator { background:#222e35; color:#aebac1; }
.wa-spinner { width:14px; height:14px; border:2px solid #d9d9d9; border-top-color:#00a884; border-radius:50%; animation:spin .8s linear infinite; }
.wa-spinner.small { width:10px; height:10px; border-width:1.5px; }
@keyframes spin { to { transform:rotate(360deg); } }
.wa-main-loading { flex:1; display:flex; align-items:center; justify-content:center; background:#efeae2; }
[data-theme="dark"] .wa-main-loading { background:#0b141a; }

/* Inner wrapper para padding */
.wa-msgs-inner { display:flex; flex-direction:column; min-height:100%; }

/* Imagen — bubble eager (hoy) */
.wa-bubble-media { position:relative; }
.wa-bubble-media.wa-img-eager img { max-width:300px; max-height:240px; border-radius:6px; cursor:zoom-in; display:block; }
.wa-bubble-media.wa-img-thumb { display:inline-block; }
.wa-bubble-media.wa-img-thumb img { max-width:140px; max-height:140px; border-radius:6px; cursor:zoom-in; filter:brightness(.92); display:block; }
.wa-thumb-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.18); border-radius:6px; pointer-events:none; opacity:0; transition:opacity .15s; }
.wa-bubble-media.wa-img-thumb:hover .wa-thumb-overlay { opacity:1; }
.wa-media-download { position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
.wa-bubble-media:hover .wa-media-download { opacity:1; }
.wa-sticker { max-width:140px; max-height:140px; }

/* Imagen pending (solo thumb, esperando descarga full) */
.wa-bubble-media.wa-img-pending, .wa-bubble-media.wa-img-noload { position:relative; display:inline-block; min-width:160px; min-height:120px; }
.wa-bubble-media.wa-img-pending img { max-width:200px; max-height:200px; border-radius:6px; filter:brightness(.7); display:block; }
.wa-pending-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); border-radius:6px; cursor:pointer; }
.wa-pending-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:rgba(0,0,0,.7); color:#fff; border:none; border-radius:20px; cursor:pointer; font-size:13px; font-weight:500; }
.wa-pending-btn:hover { background:rgba(0,0,0,.85); }
.wa-pending-btn:disabled { opacity:.7; cursor:wait; }
.wa-bubble-media.wa-img-noload { background:rgba(0,0,0,.04); border-radius:6px; padding:20px; }
[data-theme="dark"] .wa-bubble-media.wa-img-noload { background:rgba(255,255,255,.06); }
.wa-pending-btn.pending-only { background:none; color:inherit; padding:0; border-radius:0; }
.wa-pending-btn.pending-only:hover { color:#00a884; background:none; }

/* ── Modal animado: bloqueo self-add ── */
.wa-self-phone-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; backdrop-filter:blur(4px); }
.wa-self-phone-overlay.open { opacity:1; }
.wa-self-phone-card { background:#fff; border-radius:18px; padding:36px 32px 28px; max-width:420px; text-align:center; box-shadow:0 25px 80px rgba(0,0,0,.45); transform:scale(.85) translateY(-20px); opacity:0; transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s; }
.wa-self-phone-overlay.open .wa-self-phone-card { transform:scale(1) translateY(0); opacity:1; }
[data-theme="dark"] .wa-self-phone-card { background:#202c33; color:#e9edef; }
.wa-self-phone-shake { display:inline-block; animation:wa-shake .6s cubic-bezier(.36,.07,.19,.97) .15s both; }
@keyframes wa-shake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); }
  40%,60% { transform: translateX(4px); }
}
.wa-self-phone-icon { font-size:64px; line-height:1; margin-bottom:16px; filter:drop-shadow(0 4px 12px rgba(245,158,11,.4)); }
.wa-self-phone-card h2 { font-size:21px; font-weight:700; color:#dc2626; margin-bottom:12px; }
[data-theme="dark"] .wa-self-phone-card h2 { color:#f87171; }
.wa-self-phone-card p { font-size:14px; color:var(--text-secondary); line-height:1.5; margin-bottom:10px; }
.wa-self-phone-hint { font-size:13px; color:#92400e; background:#fef3c7; padding:10px 14px; border-radius:10px; border:1px solid #fde68a; margin:14px 0 20px; }
[data-theme="dark"] .wa-self-phone-hint { background:rgba(146,64,14,.2); color:#fbbf24; border-color:rgba(253,230,138,.3); }
.wa-self-phone-card button { padding:12px 28px; font-size:14px; font-weight:600; min-width:140px; }

/* ── Toast notifications ── */
.wa-toast { position:fixed; top:20px; right:20px; background:#fff; border-left:4px solid #22c55e; border-radius:10px; padding:12px 16px; box-shadow:0 10px 35px rgba(0,0,0,.18); z-index:10000; display:flex; align-items:flex-start; gap:12px; min-width:280px; max-width:380px; transform:translateX(120%); opacity:0; transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.wa-toast.open { transform:translateX(0); opacity:1; }
.wa-toast-error { border-left-color:#ef4444; }
.wa-toast-info { border-left-color:#3b82f6; }
[data-theme="dark"] .wa-toast { background:#202c33; color:#e9edef; }
.wa-toast-icon { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; background:#22c55e; }
.wa-toast-error .wa-toast-icon { background:#ef4444; }
.wa-toast-info .wa-toast-icon { background:#3b82f6; }
.wa-toast-title { font-size:14px; font-weight:600; margin-bottom:2px; }
.wa-toast-msg { font-size:12px; color:var(--text-secondary); }

/* Tab Condiciones — cards de números autorizados */
.cond-item { border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:var(--card); transition:opacity .15s; }
.cond-item.cond-inactive { opacity:.55; }
.cond-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cond-actions { display:flex; gap:6px; }
.cond-perms { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; padding-top:10px; border-top:1px dashed var(--border); }
.cond-perm { display:flex; align-items:flex-start; gap:10px; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all .15s; }
.cond-perm:hover { background:var(--primary-light); }
.cond-perm.on { border-color:#22c55e; background:rgba(34,197,94,.06); }
.cond-perm input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; margin-top:2px; cursor:pointer; accent-color:#22c55e; }
.cond-perm-icon { font-size:18px; flex-shrink:0; }
.cond-perm-name { font-size:13px; font-weight:600; color:#0f172a; margin-bottom:2px; }
[data-theme="dark"] .cond-perm-name { color:#e9edef; }
.cond-perm-desc { font-size:11px; color:var(--text-secondary); line-height:1.3; }

/* Tab Condiciones — cards de comandos */
.cmd-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-top:12px; }
.cmd-card { padding:14px 16px; border:1px solid var(--border); border-radius:10px; background:var(--card); transition:transform .12s, box-shadow .12s; }
.cmd-card:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.06); }
.cmd-card-primary { border-left:3px solid #22c55e; }
.cmd-card-warning { border-left:3px solid #f59e0b; }
.cmd-card-ai { border-left:3px solid #8b5cf6; background:linear-gradient(135deg, var(--card), rgba(139,92,246,.04)); }
.cmd-name { font-family:monospace; font-size:13px; font-weight:700; color:#0f172a; margin-bottom:6px; }
[data-theme="dark"] .cmd-name { color:#e9edef; }
.cmd-desc { font-size:13px; color:var(--text-secondary); margin-bottom:8px; line-height:1.4; }
.cmd-example { font-size:11px; color:var(--text-secondary); border-top:1px dashed var(--border); padding-top:8px; line-height:1.6; }
.cmd-example code { background:rgba(0,0,0,.05); padding:2px 6px; border-radius:4px; font-size:11px; }
[data-theme="dark"] .cmd-example code { background:rgba(255,255,255,.08); }

/* Documento */
.wa-bubble-doc { display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.04); border-radius:6px; padding:8px 10px; cursor:pointer; min-width:240px; }
[data-theme="dark"] .wa-bubble-doc { background:rgba(255,255,255,.06); }
.wa-doc-info { flex:1; min-width:0; }
.wa-doc-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-doc-size { font-size:11px; color:#667781; margin-top:2px; }
.wa-doc-download { background:none; border:none; cursor:pointer; color:#54656f; padding:6px; border-radius:50%; }
.wa-doc-download:hover { background:rgba(0,0,0,.08); }

/* Audio (estilo WhatsApp) */
.wa-audio { display:flex; align-items:center; gap:10px; padding:6px 4px; min-width:260px; }
.wa-audio-play { width:36px; height:36px; border-radius:50%; border:none; background:#00a884; color:#fff; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.wa-audio-play:hover { background:#06cf9c; }
.wa-audio-wave { flex:1; display:flex; align-items:center; gap:2px; height:32px; position:relative; --prog: 0%; }
.wa-wave-bar { display:block; flex:1; min-width:2px; background:#a4b5be; border-radius:2px; transition:background .1s; }
[data-theme="dark"] .wa-wave-bar { background:#67737b; }
/* Barras "consumidas" cuando avanza la reproducción usando un overlay */
.wa-audio.playing .wa-audio-wave::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:var(--prog);
  background:linear-gradient(to right, transparent, transparent);
  pointer-events:none;
}
.wa-audio.playing .wa-wave-bar {
  animation: wa-bar-pulse 1s ease-in-out infinite;
}
@keyframes wa-bar-pulse {
  0%,100% { transform:scaleY(1); }
  50% { transform:scaleY(.65); }
}
.wa-wave-bar:nth-child(2n) { animation-delay:.1s; }
.wa-wave-bar:nth-child(3n) { animation-delay:.2s; }
.wa-wave-bar:nth-child(5n) { animation-delay:.3s; }
.wa-audio-time { font-size:11px; color:#667781; min-width:32px; text-align:right; }
.wa-audio-dl { background:none; border:none; cursor:pointer; color:#54656f; padding:4px; }

/* Lightbox */
.wa-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; opacity:0; transition:opacity .2s; display:flex; flex-direction:column; }
.wa-lightbox.open { opacity:1; }
.wa-lightbox-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; color:#fff; }
.wa-lightbox-name { font-size:14px; opacity:.8; }
.wa-lightbox-actions { display:flex; gap:8px; }
.wa-lightbox-actions button { width:40px; height:40px; border-radius:50%; border:none; background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wa-lightbox-actions button:hover { background:rgba(255,255,255,.1); }
.wa-lightbox-img-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
.wa-lightbox-img-wrap img { max-width:95%; max-height:95%; object-fit:contain; box-shadow:0 8px 40px rgba(0,0,0,.6); animation: wa-zoom-in .25s ease-out; }
@keyframes wa-zoom-in { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }

/* Members panel (slide-in derecho) */
.wa-members-panel { position:absolute; top:0; right:0; bottom:0; width:340px; background:#fff; border-left:1px solid #e9edef; transform:translateX(100%); transition:transform .25s ease-out; z-index:5; display:flex; flex-direction:column; }
[data-theme="dark"] .wa-members-panel { background:#222e35; border-color:#2a3942; }
.wa-members-panel.open { transform:translateX(0); }
.wa-members-header { padding:14px 16px; border-bottom:1px solid #e9edef; display:flex; align-items:center; justify-content:space-between; background:#f0f2f5; }
[data-theme="dark"] .wa-members-header { background:#202c33; border-color:#2a3942; }
.wa-members-header h4 { font-size:15px; font-weight:600; color:#111b21; }
[data-theme="dark"] .wa-members-header h4 { color:#e9edef; }
.wa-members-list { flex:1; overflow-y:auto; }
.wa-member-item { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:default; border-bottom:1px solid #f0f2f5; }
[data-theme="dark"] .wa-member-item { border-color:#2a3942; }
.wa-member-avatar { width:40px; height:40px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; }
.wa-member-info { flex:1; min-width:0; }
.wa-member-name { font-size:14px; font-weight:500; color:#111b21; }
[data-theme="dark"] .wa-member-name { color:#e9edef; }
.wa-member-phone { font-size:12px; color:#667781; }

/* Mensaje fallido */
.wa-msg-failed .wa-bubble { background:#ffe6e6 !important; border:1px solid #f5a6a6; }

/* Header clickable cursor en grupos */
.wa-main-header { cursor:default; }
.wa-main { position:relative; }

/* Avatar propio (me) en sidebar header */
.wa-me-avatar { width:38px; height:38px; border-radius:50%; background:#6b7c85; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; cursor:pointer; flex-shrink:0; position:relative; overflow:hidden; transition:transform .15s; }
.wa-me-avatar:hover { transform:scale(1.05); box-shadow:0 0 0 2px #00a884; }

/* Modal de perfil propio */
.wa-me-profile-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9998; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.wa-me-profile-overlay.open { opacity:1; }
.wa-me-profile-card { background:#fff; border-radius:16px; padding:32px 28px 28px; min-width:320px; max-width:380px; text-align:center; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.4); animation: wa-zoom-in .25s ease-out; }
[data-theme="dark"] .wa-me-profile-card { background:#202c33; color:#e9edef; }
.wa-me-close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:none; background:transparent; color:#54656f; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wa-me-close:hover { background:#f0f2f5; }
[data-theme="dark"] .wa-me-close:hover { background:#2a3942; }
.wa-me-profile-pic { width:140px; height:140px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:700; color:#fff; overflow:hidden; cursor:zoom-in; }
.wa-me-profile-pic img { width:100%; height:100%; object-fit:cover; cursor:zoom-in; }
.wa-me-profile-name { font-size:20px; font-weight:600; color:#111b21; margin-bottom:6px; }
[data-theme="dark"] .wa-me-profile-name { color:#e9edef; }
.wa-me-profile-phone { font-size:15px; color:#667781; margin-bottom:8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace; }
.wa-me-profile-pushname { font-size:12px; color:#8696a0; margin-bottom:16px; }
.wa-me-profile-status { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 16px; background:#dcfce7; color:#16a34a; border-radius:8px; font-size:13px; font-weight:500; margin-top:16px; }
[data-theme="dark"] .wa-me-profile-status { background:#0a3d1f; color:#4ade80; }
.wa-me-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; animation:pulse-dot 2s infinite; }

/* ====================== NOTIFICATIONS ====================== */
.notif-wrapper { position:relative; }
.notif-btn { position:relative; background:none; border:none; cursor:pointer; padding:8px; border-radius:8px; color:var(--text-secondary); transition:all .15s; }
.notif-btn:hover { background:var(--primary-light); }
.notif-badge { position:absolute; top:2px; right:2px; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:18px; background:#EF4444; color:#fff; font-size:10px; font-weight:700; padding:0 4px; }
.notif-badge.warning { background:#F59E0B; }
.notif-badge.ok { background:#22C55E; }
.notif-dropdown { position:absolute; top:calc(100% + 8px); right:0; width:360px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.15); z-index:300; display:none; overflow:hidden; }
.notif-dropdown.show { display:block; animation:fadeIn .2s ease; }
.notif-dropdown-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.notif-dropdown-header h4 { font-size:14px; font-weight:600; }
.notif-dropdown-body { max-height:320px; overflow-y:auto; }
.notif-item { display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--primary-light); }
.notif-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.notif-icon.error { background:#FEE2E2; }
.notif-icon.warning { background:#FEF3C7; }
.notif-icon.info { background:#DBEAFE; }
.notif-text h5 { font-size:13px; font-weight:600; margin-bottom:2px; }
.notif-text p { font-size:12px; color:var(--text-secondary); }
.notif-empty { padding:32px; text-align:center; color:var(--text-secondary); font-size:13px; }
.status-dots { display:flex; gap:6px; align-items:center; margin-right:4px; }
.status-dot { width:8px; height:8px; border-radius:50%; }
.status-dot.ok { background:#22C55E; }
.status-dot.err { background:#EF4444; animation:pulse-dot 2s infinite; }
.status-dot.warn { background:#F59E0B; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }