/* app.css — Componentes UI modernos para Orion Mind (complementa Tailwind CDN) */
:root {
  --orion-primary: #1E90FF;
  --orion-accent:  #2FB8F0;
  --orion-navy:    #0A1A3C;
}

* { font-family: 'Inter', 'Poppins', ui-sans-serif, system-ui, sans-serif; }

/* ===== Scrollbar moderna ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== Botones ===== */
.btn-glow { transition: box-shadow .2s ease, transform .2s ease; }
.btn-glow:hover { box-shadow: 0 0 18px rgba(47,184,240,.55); transform: translateY(-1px); }

/* ===== Cards ===== */
.card-glass { background: rgba(255,255,255,.6); backdrop-filter: blur(6px); border: 1px solid rgba(199,204,212,.4); }
.card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; }
.card-hover:hover { box-shadow: 0 10px 30px rgba(0,0,0,.10); transform: translateY(-2px); }

/* ===== Stat cards (KPIs) ===== */
.stat-card { position: relative; overflow: hidden; }
.stat-card::after { content:''; position:absolute; right:-12px; top:-12px; width:80px; height:80px; border-radius:50%; opacity:.06; background: currentColor; }

/* ===== Badges ===== */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; }
.badge-success { background:#dcfce7; color:#166534; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-danger  { background:#fee2e2; color:#991b1b; }
.badge-info    { background:#dbeafe; color:#1e40af; }
.badge-neutral { background:#f1f5f9; color:#475569; }
.badge-purple  { background:#f3e8ff; color:#6b21a8; }

/* ===== Tablas modernas ===== */
.table-modern { width:100%; border-collapse:separate; border-spacing:0; }
.table-modern thead th { background:#f8fafc; color:#64748b; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:12px 16px; border-bottom:1px solid #e2e8f0; text-align:left; }
.table-modern thead th:first-child { border-top-left-radius:12px; }
.table-modern thead th:last-child  { border-top-right-radius:12px; }
.table-modern tbody td { padding:14px 16px; border-bottom:1px solid #f1f5f9; font-size:14px; }
.table-modern tbody tr { transition: background .15s; }
.table-modern tbody tr:hover { background:#f8fafc; }
.table-modern tbody tr:last-child td { border-bottom:none; }

/* ===== Formularios ===== */
.input-modern { width:100%; padding:10px 14px; border:1px solid #e2e8f0; border-radius:10px; font-size:14px; transition: all .2s; background:#fff; }
.input-modern:focus { outline:none; border-color: var(--orion-primary); box-shadow: 0 0 0 3px rgba(30,144,255,.12); }
.label-modern { display:block; font-size:13px; font-weight:500; color:#334155; margin-bottom:6px; }

/* ===== Animaciones ===== */
@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.animate-fade-in { animation: fadeIn .3s ease-out; }
@keyframes slideIn { from{opacity:0; transform:translateX(-12px);} to{opacity:1; transform:translateX(0);} }
.animate-slide-in { animation: slideIn .25s ease-out; }

/* ===== Progress bars ===== */
.progress { height:6px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.progress-bar { height:100%; border-radius:999px; transition: width .4s ease; }

/* ===== Empty state ===== */
.empty-state { text-align:center; padding:48px 24px; color:#94a3b8; }
.empty-state svg { margin: 0 auto 16px; opacity:.4; }