/* ═══════════════════════════════════════════════════════════════
   iATKOS Admin — Estilos complementarios
   (diseño principal via Tailwind CSS CDN)
   ═══════════════════════════════════════════════════════════════ */

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* Smooth scroll global */
html { scroll-behavior: smooth; }

/* Toast animation */
.toast-enter-active { animation: toastIn 0.3s ease; }
.toast-leave-active { animation: toastOut 0.3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } }

/* Prose overrides for tutorial preview */
.prose-invert h3 { color: #f1f5f9; font-size: 1.1em; margin-bottom: 0.5em; }
.prose-invert h4 { color: #a1a1aa; font-size: 0.95em; margin-top: 1.2em; }
.prose-invert h5 { color: #d4d4d8; font-size: 0.88em; }
.prose-invert code { background: #18181b; color: #f4f4f5; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.85em; }
.prose-invert a { color: #ffffff; text-decoration: underline; }
.prose-invert a:hover { color: #a1a1aa; }

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  height: 4px;
  background: #27272a;
  border-radius: 2px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #09090b;
}

/* Animate pulse for status dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}