@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --um-blue-1:#0F4FA8;
  --um-blue-2:#1C6ED5;
  --um-blue-3:#2B8CE6;
  --um-green-1:#2E9E44;
  --um-green-2:#4FBF5A;
  --um-green-3:#6FD26F;
  --um-neutral:#1F2A33;
  --um-bg:#f6f8fb;
}

body{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14.5px;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(43,140,230,.14), transparent 60%),
              radial-gradient(900px 480px at 90% 10%, rgba(111,210,111,.14), transparent 55%),
              var(--um-bg);
  color: var(--um-neutral);
}

.um-card{
  border: 1px solid rgba(31,42,51,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(31,42,51,.08);
}

.um-btn-primary{
  background: linear-gradient(135deg, var(--um-blue-1), var(--um-blue-2));
  border: none;
}
.um-btn-primary:hover{ filter: brightness(1.03); }

.um-link{ color: var(--um-blue-2); text-decoration: none; }
.um-link:hover{ text-decoration: underline; }

.um-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(15,79,168,.08);
  color: var(--um-blue-1);
  border: 1px solid rgba(15,79,168,.16);
}

.um-input:focus{ border-color: rgba(28,110,213,.55) !important; box-shadow: 0 0 0 .25rem rgba(28,110,213,.15) !important; }

/* Tablas */
.um-row-click{ cursor: pointer; }
.um-row-click:hover{ background: rgba(28,110,213,.06); }

/* Shell + Sidebar */
.um-shell{ display:flex; min-height:100vh; }
.um-sidebar{
  width: 260px;
  padding: 18px;
  background: rgba(255,255,255,.85);
  border-right: 1px solid rgba(31,42,51,.08);
  position: sticky;
  top: 0;
  height: 100vh;
  display:flex;
  flex-direction:column;
  gap: 18px;
  backdrop-filter: blur(8px);
}
.um-sidebar-top{ display:flex; align-items:center; justify-content:center; }
.um-brand{ display:block; width:100%; text-align:center; }
.um-brand-logo{ max-width: 180px; width:100%; height:auto; }

.um-nav{ display:flex; flex-direction:column; gap:8px; }
.um-nav-link{
  display:flex;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(31,42,51,.06);
  color: var(--um-neutral);
  text-decoration:none;
  background: rgba(255,255,255,.75);
}
.um-nav-link:hover{ border-color: rgba(28,110,213,.25); box-shadow: 0 8px 20px rgba(31,42,51,.08); }
.um-nav-link.active{
  background: linear-gradient(135deg, rgba(15,79,168,.12), rgba(28,110,213,.10));
  border-color: rgba(15,79,168,.22);
  color: var(--um-blue-1);
  font-weight: 600;
}

.um-sidebar-bottom{ margin-top:auto; padding-top: 10px; border-top: 1px dashed rgba(31,42,51,.12); }

.um-main{ flex:1; }
.um-main-inner{ padding: 22px; max-width: 1180px; }

@media (max-width: 991.98px){
  .um-shell{ flex-direction:column; }
  .um-sidebar{ width:auto; height:auto; position:relative; }
}
CSS'