.bg-blur {    
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(5px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-validacion {
  background-image: url('../images/bg-auth.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---------- Chips de "Equipo conectado" ---------- */
/* Vivían en corrida.css colgando de #equipoConectado. Se traen aquí --y sin el
   id-- porque el mismo chip lo pintan ahora todas las pantallas del evento en
   #usuarios-list, y styles.css lo carga el layout: una sola definición para
   las dos, que es justo lo que evitó que la corrida y el orden del día se
   desincronizaran.

   Colores propios con variante clara (por defecto) y oscura, para no depender
   de las utilidades de Bootstrap (.bg-light/.bg-secondary) que el tema oscuro
   redefine y hacían chocar el chip con el resto del sistema. */
.cor-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  background-color: rgba(0, 0, 0, .05);
  color: #495057;
  border: 1px solid rgba(0, 0, 0, .08);
}
.cor-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  background-color: #74788d;
  color: #fff;
}
.cor-chip-badge {
  font-size: 10px;
  font-weight: 600;
  padding: .05rem .35rem;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, .12);
  color: inherit;
}

/* Un chip que ademas se pulsa: hereda el color del tema como los demas y solo
   se le nota que es boton al pasar por encima. */
button.cor-chip {
  cursor: pointer;
}
button.cor-chip:hover {
  border-color: #556ee6;
  color: #556ee6;
}

body[data-layout-mode="dark"] .cor-chip {
  background-color: rgba(255, 255, 255, .07);
  color: #c3cbe4;
  border-color: rgba(255, 255, 255, .1);
}
body[data-layout-mode="dark"] .cor-chip-avatar {
  background-color: #46506b;
  color: #eef1f7;
}
body[data-layout-mode="dark"] .cor-chip-badge {
  background-color: rgba(255, 255, 255, .18);
}

/* La barra del equipo es .d-flex (display:flex !important), así que sin nadie
   conectado hay que esconderla con una clase: `.hide()` de jQuery escribe
   display:none en línea y pierde contra el !important de Bootstrap. El `body`
   delante no sobra: a secas empata en especificidad con `.d-flex`. */
body .cor-oculto { display: none !important; }