/* ── Scrollbar personalizado ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Sidebar scrollbar oscuro ── */
#sidebar ::-webkit-scrollbar-thumb { background: #374151; }
#sidebar ::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ── Transiciones de vista ── */
.view-enter { animation: fadeSlideIn 0.2s ease forwards; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Sidebar nav active ── */
.nav-item-active {
  background-color: #4f46e5 !important;
  color: #fff !important;
}
.nav-item-active svg { color: #fff !important; }

/* ── Table hover ── */
.table-row:hover { background-color: #f9fafb; }

/* ── Badge estados ── */
.badge-activo   { background:#d1fae5; color:#065f46; }
.badge-inactivo { background:#fee2e2; color:#991b1b; }
.badge-pendiente{ background:#fef3c7; color:#92400e; }

/* ── Focus global ── */
*:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Prevent layout shift while loading ── */
#view-login, #view-app { transition: opacity 0.15s ease; }