/* ── Global ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { background-color: #F1F5F9; }

/* ── Sidebar ─────────────────────────────────────── */
.sidebar { background: linear-gradient(180deg, #0A1628 0%, #0D1E3A 100%); }

.nav-link { color: #94A3B8; }
.nav-link:hover { background: rgba(255,255,255,0.06); color: #E2E8F0; }
.nav-active { background: rgba(59,130,246,0.15) !important; color: #60A5FA !important; border-left: 2px solid #3B82F6; }

/* ── Cards ─────────────────────────────────────── */
.card { background: #fff; border-radius: 16px; border: 1px solid #E2E8F0; box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04); transition: box-shadow 0.2s, transform 0.2s; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.card-stat { padding: 20px 24px; }

/* ── KPI icons ─────────────────────────────────── */
.kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Badges ─────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.badge-queja { background: #FEE2E2; color: #DC2626; }
.badge-reclamo { background: #FEF3C7; color: #D97706; }
.badge-peticion { background: #DBEAFE; color: #1D4ED8; }
.badge-sugerencia { background: #D1FAE5; color: #059669; }
.badge-resuelto { background: #D1FAE5; color: #059669; }
.badge-proceso { background: #FEF3C7; color: #D97706; }
.badge-pendiente { background: #FEE2E2; color: #DC2626; }
.badge-alta { background: #FEE2E2; color: #DC2626; }
.badge-media { background: #FEF3C7; color: #D97706; }
.badge-baja { background: #F0FDF4; color: #15803D; }

/* ── Tables ─────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { background: #F8FAFC; color: #64748B; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 16px; border-bottom: 1px solid #E2E8F0; text-align: left; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid #F1F5F9; color: #1E293B; vertical-align: middle; }
.data-table tr:hover td { background: #F8FAFC; }
.data-table tr:last-child td { border-bottom: none; }

/* ── Chat ─────────────────────────────────────── */
.chat-bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; }
.chat-user { background: #1B4F8A; color: white; border-bottom-right-radius: 4px; margin-left: auto; }
.chat-ai { background: white; color: #1E293B; border: 1px solid #E2E8F0; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.chat-ai strong { color: #1B4F8A; }

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

@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.typing-dot { width:6px; height:6px; border-radius:50%; background:#94A3B8; animation: pulse-dot 1.2s ease infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Filters ─────────────────────────────────────── */
.filter-select { background: white; border: 1px solid #E2E8F0; border-radius: 8px; padding: 6px 12px; font-size: 13px; color: #334155; outline: none; cursor: pointer; }
.filter-select:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }

/* ── Progress bar ─────────────────────────────────── */
.progress-bar { height: 6px; border-radius: 99px; background: #EFF6FF; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; transition: width 1s ease; }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }

/* ── Response preview ─────────────────────────────── */
.response-preview { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 20px; font-size: 13px; line-height: 1.8; color: #334155; white-space: pre-wrap; font-family: 'Inter', sans-serif; min-height: 200px; }

/* ── Cluster dot ─────────────────────────────────── */
.cluster-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ── Stat trend ─────────────────────────────────── */
.trend-up { color: #10B981; }
.trend-down { color: #EF4444; }