/* ================================================================
   Hotspot Admin — CSS complementario
   Tailwind CDN maneja la mayoría; aquí solo lo que no puede hacer.
   ================================================================ */

/* Necesario para que JS pueda ocultar/mostrar elementos */
.hidden { display: none !important; }

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

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

/* Checkbox hack — sidebar mobile */
#mobile-menu-toggle:checked ~ .sidebar-overlay { opacity: 1; pointer-events: auto; }
#mobile-menu-toggle:checked ~ .sidebar         { transform: translateX(0); }

/* Nav item activo */
.nav-item.active {
  background: rgba(54, 77, 255, 0.09);
  color: #364dff;
  font-weight: 600;
}

/* Spinner de carga */
.spinner {
  display: inline-block;
  border-style: solid;
  border-color: currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Código PIN */
.pin-code {
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Punto de estado MikroTik */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot-online  { background: #10B981; }
.dot-offline { background: #EF4444; }