/*
 * css/components/auth.css — Indicador de autenticación del encabezado.
 *
 * 12-oct, fase 3 del kit de estilo: extraído del <style> de index.html (mismas reglas). El orden
 * de carga (index.html) es base -> components -> views; la verificación comparó los estilos
 * calculados de toda la página antes y después.
 */

.auth-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem;
  color: var(--text-dim); margin-top: 4px;
}
.auth-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.auth-dot.ok { background: var(--ok); }
.auth-dot.bad { background: var(--err); }
.auth-dot.warn { background: var(--gold); }
.auth-dot.wait { background: var(--accent); animation: authpulse 1.2s ease-in-out infinite; }
@keyframes authpulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .auth-dot.wait { animation: none; } }
.auth-badge { flex-wrap: wrap; }
.auth-badge .auth-btn { padding: 3px 10px; font-size: 0.75rem; }
.auth-badge .auth-err { color: var(--err); }
/* 20-oct: desde cuándo vale la autenticación, junto a la cuenta */
.auth-since { color: var(--text-dim); font-size: 0.8rem; margin-left: 4px; white-space: nowrap; }