/*
  Radar Alpha — Componente: Indicador de estado
  Fecha: 2026-07-27 | Versión: 1.0.0 | Estado: activo

  Ver Design Book (Parte 3 §13) y Design System Foundations (Cap. 10).
  Punto o pastilla de color + texto corto que comunica una categoría
  (Riesgo Bajo/Medio/Alto; estado de un proveedor de datos
  Activo/Degradado/Inactivo). El color es SIEMPRE semántico, nunca
  decorativo — ahí está la diferencia con Badge (§14), que es una marca
  textual neutra sin connotación de estado.

  Nunca comunica solo con el color (Foundations Cap. 11): el texto va
  siempre incluido en el propio componente, no es opcional. Por eso no
  existe una variante "solo punto".

  Sin JavaScript: es una representación estática de un dato que ya calcula
  el backend.

  Sin límite de cuántos conviven en una pantalla (Design Book Parte 7,
  Auditoría de escalabilidad de motores): hoy se usa para 3 proveedores de
  datos, y debe servir igual para N motores de análisis en Administración
  el día que existan, sin rediseñarse.

  Marcado: ver dashboard/templates/_components.html, macro `estado()`.
*/

.ra-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg);
  white-space: nowrap;
}

.ra-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex: none;
  background: var(--fg-muted);
}

/* Variante pastilla — mismo significado, más presencia visual; para
   cuando el estado es el contenido principal de su celda (ej. columna
   "Estado" de una tabla), no un metadato al lado de un nombre. */
.ra-status--pastilla {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border);
  font-size: var(--text-xs);
}

/* --- Estado de un servicio (proveedores de datos, motores) --- */
.ra-status--activo .ra-status-dot {
  background: var(--accent);
}
.ra-status--degradado .ra-status-dot {
  background: var(--warning);
}
.ra-status--inactivo .ra-status-dot {
  background: var(--danger);
}

/* --- Nivel de riesgo de un activo ---
   Mismo componente, misma escala semántica de color: verde = confianza,
   ámbar = advertencia, rojo = riesgo (Design Book §13). No se crea un
   componente aparte para riesgo: sería duplicar el mismo patrón visual
   con otro nombre. */
.ra-status--riesgo-bajo .ra-status-dot {
  background: var(--accent);
}
.ra-status--riesgo-medio .ra-status-dot {
  background: var(--warning);
}
.ra-status--riesgo-alto .ra-status-dot {
  background: var(--danger);
}

/* Sin dato real todavía — nunca se inventa un estado por defecto
   (Design Book, Parte 1: "ningún hueco vacío se rellena con un dato
   inventado"). */
.ra-status--desconocido {
  color: var(--fg-muted);
}
.ra-status--desconocido .ra-status-dot {
  background: transparent;
  border: var(--border-width) solid var(--fg-muted);
}