/* ════════════════════════════════════════════════════════════
   CENTRAL DE ÁNGELES — COMPONENTS · Indicadores de estado: badges, dots, pulse, alertas, empty, utilidades
   ⚠ Consume css/tokens.css. Parte del set de componentes por dominio.
   Ver css/components/_index.css para el mapa completo.
   ════════════════════════════════════════════════════════════ */

/* ── BADGES ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid;
  white-space: nowrap;
}
.badge-success { background: var(--success-light); color: var(--success-text); border-color: var(--success-border); }
.badge-warning { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); }
.badge-danger  { background: var(--danger-light);  color: var(--danger-text);  border-color: var(--danger-border); }
.badge-info    { background: var(--info-light);    color: var(--info-text);    border-color: var(--info-border); }
.badge-neutral { background: var(--surface-3); color: var(--text-3); border-color: var(--border-1); }
.badge-gps     { background: var(--gps-light); color: var(--success-text); border-color: var(--success-border); }

.dot, .b-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.b-dot { width: 5px; height: 5px; }

/* ── ESTADO / PULSE ────────────────────────────────────── */
.pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pulse-on   { background: var(--success); animation: cean-pulse 2s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(0,168,107,0.2); }
.pulse-warn { background: var(--warning); animation: cean-pulse 2s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(217,119,6,0.2); }
.pulse-off  { background: var(--text-4); }
.pulse-alrt { background: var(--danger);  animation: cean-pulse 1s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(220,38,38,0.2); }
@keyframes cean-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}


/* ── ALERTAS ───────────────────────────────────────────── */
.alert-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: var(--text-md);
  box-shadow: var(--shadow-sm);
}
.alert-ico { font-size: var(--text-lg); flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert-desc  { font-size: var(--text-sm); opacity: 0.85; }
.alert-s { background: var(--success-light); border-color: var(--success-border); color: var(--success-text); }
.alert-w { background: var(--warning-light); border-color: var(--warning-border);  color: var(--warning-text); }
.alert-d { background: var(--danger-light);  border-color: var(--danger-border);  color: var(--danger-text); }
.alert-i { background: var(--info-light);    border-color: var(--info-border);  color: var(--info-text); }


/* ── EMPTY STATE ───────────────────────────────────────── */
.empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-4);
}
.empty-ico { font-size: var(--display-lg); margin-bottom: 8px; }
.empty-title { font-family: var(--font-display); color: var(--text-2); font-size: var(--text-lg); font-weight: 600; margin-bottom: 4px; }
.empty-desc { font-size: var(--text-md); }

/* ── UTILIDADES ────────────────────────────────────────── */
/* Colores de texto semánticos — usar en vez de style="color:..."
   inline (el markup generado desde .NET solo decide la clase). */
.text-success  { color: var(--success-text); }
.text-warning  { color: var(--warning-text); }
.text-danger   { color: var(--danger-text); }
.text-electric { color: var(--electric-text); }
.text-muted    { color: var(--text-4); }

/* Fondos para .dot / .b-dot / .legend-dot */
.dot-success  { background: var(--success); }
.dot-warning  { background: var(--warning); }
.dot-danger   { background: var(--danger); }
.dot-electric { background: var(--electric); }
.dot-muted    { background: var(--text-4); }

/* Celda "última señal vieja" — selector compuesto para ganar sobre .cean-table td */
.cell-stale { font-size: var(--text-sm); }
.cean-table td.cell-stale { color: var(--danger-text); }


/* ── BADGE VARIANTES ADICIONALES ── */
.badge-warn  { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); }
.badge-muted { background: var(--surface-3); color: var(--text-4); border-color: var(--border-1); }