/* NUVIO - Sistema de diseño */
:root {
  --nuvit-900: #0B3D91;
  --nuvit-800: #114BB0;
  --nuvit-700: #1E6BD6;
  --nuvit-600: #2A8AE6;
  --nuvit-500: #38B6FF;
  --nuvit-100: #DCEEFB;
  --nuvit-50:  #F0F7FF;
  --gray-bg:   #F7F8FA;
  --gray-line: #ECEEF2;
  --ink-900:   #0B1220;
  --ink-700:   #2A3142;
  --ink-500:   #5B6478;
  --ink-300:   #98A2B3;
}

html, body { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--ink-900); background: #fff; -webkit-font-smoothing: antialiased; }
body.app { background: var(--gray-bg); }

/* Gradientes y utilidades */
.bg-nuvit-grad { background: linear-gradient(135deg, #0B3D91 0%, #1E6BD6 55%, #38B6FF 100%); }
.bg-nuvit-soft { background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%); }
.text-nuvit { color: var(--nuvit-900); }
.text-nuvit-600 { color: var(--nuvit-700); }
.bg-nuvit { background: var(--nuvit-900); }
.bg-nuvit-700 { background: var(--nuvit-700); }
.bg-nuvit-50 { background: var(--nuvit-50); }
.border-nuvit { border-color: var(--nuvit-900); }
.ring-nuvit:focus { box-shadow: 0 0 0 3px rgba(30,107,214,.18); border-color: var(--nuvit-700); }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:12px; font-weight:600; transition:.2s ease; font-size:.92rem; }
.btn-primary { background: var(--nuvit-900); color:#fff; }
.btn-primary:hover { background: var(--nuvit-800); transform: translateY(-1px); box-shadow:0 10px 25px -10px rgba(11,61,145,.5); }
.btn-ghost { background:#fff; color: var(--nuvit-900); border:1px solid var(--gray-line); }
.btn-ghost:hover { border-color: var(--nuvit-700); color: var(--nuvit-700); }
.btn-soft { background: var(--nuvit-50); color: var(--nuvit-900); }
.btn-soft:hover { background: var(--nuvit-100); }

.card { background:#fff; border:1px solid var(--gray-line); border-radius:18px; }
.card-hover { transition: .25s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(11,18,32,.15); border-color: #d9e2dc; }

.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .65rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.chip-green { background: var(--nuvit-50); color: var(--nuvit-900); }
.chip-sky { background: #E0F2FE; color: #075985; }
.chip-amber { background:#FEF3C7; color:#92400E; }
.chip-red { background:#FEE2E2; color:#991B1B; }
.chip-blue { background:#DBEAFE; color:#1E40AF; }
.chip-gray { background:#F1F3F7; color:#475569; }

/* Sidebar */
.app-shell { display:grid; grid-template-columns: 260px 1fr; min-height:100vh; }
@media (max-width: 1024px) { .app-shell { grid-template-columns: 1fr; } .sidebar { display:none; } }
.sidebar { background:#fff; border-right:1px solid var(--gray-line); padding:18px 14px; position:sticky; top:0; height:100vh; overflow:auto; }
.side-link { display:flex; align-items:center; gap:.75rem; padding:.65rem .8rem; border-radius:10px; color: var(--ink-700); font-weight:500; font-size:.92rem; }
.side-link:hover { background: var(--nuvit-50); color: var(--nuvit-900); }
.side-link.active { background: var(--nuvit-900); color:#fff; }
.side-link.active svg { color:#fff; }
.side-section { font-size:.7rem; font-weight:700; color: var(--ink-300); letter-spacing:.08em; text-transform:uppercase; padding: 18px 12px 6px; }

/* Topbar */
.topbar { background:#fff; border-bottom:1px solid var(--gray-line); padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; }

/* Table */
.tbl { width:100%; border-collapse:separate; border-spacing:0; }
.tbl th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-500); padding:14px 16px; background:#FAFBFC; border-bottom:1px solid var(--gray-line); }
.tbl td { padding:14px 16px; border-bottom:1px solid var(--gray-line); font-size:.92rem; color: var(--ink-700); }
.tbl tr:hover td { background:#FAFBFC; }

/* Inputs */
.input { width:100%; padding:.7rem .9rem; border:1px solid var(--gray-line); border-radius:12px; font-size:.95rem; background:#fff; transition:.15s; }
.input:focus { outline:none; border-color: var(--nuvit-700); box-shadow: 0 0 0 4px rgba(30,107,214,.12); }
.label { font-size:.82rem; font-weight:600; color: var(--ink-700); margin-bottom:.4rem; display:block; }

/* Animaciones */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes fadeUp { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
.fade-up { animation: fadeUp .7s ease both; }
.delay-1 { animation-delay:.1s } .delay-2 { animation-delay:.2s } .delay-3 { animation-delay:.3s } .delay-4 { animation-delay:.4s }

/* Scroll bar */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#d6dbe3; border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#b8c0cc; }

/* Avatar */
.avatar { width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:.82rem; }

/* KPI ring */
.kpi-ring { background: conic-gradient(var(--nuvit-700) var(--p,72%), #E3ECF7 0); border-radius:999px; padding:6px; }
.kpi-ring > div { background:#fff; border-radius:999px; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:700; color: var(--nuvit-900); }

/* Dark mode (toggle) */
body.dark { background:#0B1220; color:#E6E8EE; }
body.dark .card, body.dark .topbar, body.dark .sidebar { background:#121A2B; border-color:#1E2A44; }
body.dark .tbl th { background:#0F1626; color:#8A93A6; border-color:#1E2A44; }
body.dark .tbl td { color:#D4D9E4; border-color:#1E2A44; }
body.dark .side-link { color:#C7CDDB; }
body.dark .side-link:hover { background:#1A2336; color:#fff; }
body.dark .input { background:#0F1626; border-color:#1E2A44; color:#E6E8EE; }

/* Logo */
.logo-mark { width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg,#0B3D91,#38B6FF); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; box-shadow: 0 8px 20px -8px rgba(11,61,145,.55); }

/* Marquee */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); overflow:hidden; }
.marquee-track { display:flex; gap:48px; animation: marquee 28s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }