/* ═══════════════════════════════════════════════════════════════════
   DOT TOKEN — iTORQ Design System
   Fuente de verdad para todos los indicadores circulares de estado.
   Importar DESPUÉS de tokens.css y components.css.

   Uso rápido:
     <span class="dot ok"></span>              — OK verde
     <span class="dot bad lg glow"></span>     — Crítico grande con aura
     <span class="dot ok xs pulse"></span>     — Activo pequeño pulsante
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. BASE ─────────────────────────────────────────────────────── */
/*
   Dot sin modificador: círculo gris de 8×8px.
   Sin clase adicional representa "sin estado" / pendiente / inactivo.
*/
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray);  /* #8b949e — sin estado */
}


/* ── 2. ESTADOS SEMÁNTICOS ───────────────────────────────────────── */
/*
   Cada modificador mapea a un color semántico del design token.
   Se combinan con tamaño, glow y pulse libremente.
*/
.dot.ok    { background: var(--green);     }  /* OK / Conforme / Activo           */
.dot.warn  { background: var(--yellow);    }  /* Advertencia / Observado           */
.dot.alert { background: var(--orange);    }  /* Alerta media / En curso           */
.dot.bad   { background: var(--red);       }  /* Crítico / No conforme             */
.dot.info  { background: var(--cyan);      }  /* Informativo                       */
.dot.maint { background: var(--alert);     }  /* Mantenimiento / Servicio en zona  */
.dot.live  { background: var(--green);
             animation: dot-pulse 1.6s ease-in-out infinite; } /* En línea — verde pulsante */
.dot.tapon { background: var(--line-hard); }  /* Tapón de diseño — inerte          */


/* ── 3. TAMAÑOS ──────────────────────────────────────────────────── */
/*
   xs=6px  sm=7px  md=8px(default)  lg=12px  xl=14px
   Combinar con cualquier estado: class="dot lg ok"
*/
.dot.xs { width: 6px;  height: 6px; }
.dot.sm { width: 7px;  height: 7px; }
.dot.lg { width: 12px; height: 12px; }
.dot.xl { width: 14px; height: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }


/* ── 4. GLOW ─────────────────────────────────────────────────────── */
/*
   Aura de luz alrededor del dot, por color de estado.
   Combinar con estado y tamaño: class="dot lg glow ok"
   Nota: .xl ya tiene su propio box-shadow; glow lo sobreescribe.
*/
.dot.glow.ok   { box-shadow: 0 0 8px rgba(74,  222, 128, .5); }
.dot.glow.warn { box-shadow: 0 0 8px rgba(250, 204,  21, .5); }
.dot.glow.bad  { box-shadow: 0 0 7px rgba(248, 113, 113, .7); }


/* ── 5. PULSE ────────────────────────────────────────────────────── */
/*
   Animación de opacidad cíclica para indicar estado "vivo".
   Combinar con cualquier estado: class="dot ok xs pulse"
   (.live ya incluye esta animación internamente)
*/
.dot.pulse { animation: dot-pulse 1.6s ease-in-out infinite; }

@keyframes dot-pulse {
  50% { opacity: 0.4; }
}