/* ════════════════════════════════════════════════════════════════════
   COP · EL INTERRUPTOR — UN SOLO ARCHIVO  (31/08/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: *«en las tres tabs de rankings quiero un botón como el de
   “solo en vivo” de Resultados, pero para mostrar sólo a tus amigos»*.

   ⚠⚠ NO ES UNA COPIA DEL DE RESULTADOS: ES EL DE RESULTADOS, MUDADO.
   Vivía escrito adentro de `resultados-en-vivo.html` —`.re-live-toggle`,
   `.re-switch`, `.re-knob`— y el pedido lo pone en una segunda pantalla.
   Copiarlo habría dejado dos interruptores que se ven iguales hoy y se
   separan en el primer ajuste: la misma historia de la escalera, del
   cartel de recompensas y de las cuatro tarjetas de historial.

   ⚠ LO QUE **NO** SE MUDÓ ES EL TAMAÑO. En Resultados el interruptor es
   una de tres columnas de ancho fijo (`--side-w`), y ese ancho es de esa
   pantalla, no del componente. Acá va la FORMA —el riel, la bola, el
   marco, los colores y la animación—; el ancho y el alto los pone quien
   lo usa. Mudar también la medida habría atado el ranking al layout de
   tres columnas de otra pantalla.

   ⚠ EL COLOR ES UNA PERILLA. En Resultados el encendido es rojo («en
   vivo»); en Rankings, el celeste de la app. Una clase por color habría
   sido un archivo que crece con cada pantalla nueva.
   ════════════════════════════════════════════════════════════════════ */

.cop-sw{
  /* el color de «encendido». Rojo por defecto, que es el que ya tenía
     el único interruptor que existía cuando este archivo nació. */
  --sw-color: var(--red, #ff3b47);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  /* ⚠ SIN CAJA (Franco, 01/09/2026, tanda BD): *«eliminá el contorno y
     el color de fondo diferente del botón de amigos… y los contornos de
     los botones de switch de en vivo»*. El interruptor apoya sobre el
     fondo de la página: lo que dice si está prendido son el riel y la
     bola, que ya cambian de color solos. El radio queda para el área
     de toque. */
  background:transparent;border:none;border-radius:14px;
  /* ⚠ SIN RELLENO ARRIBA Y ABAJO: quien lo usa le pone un alto fijo, y
     con alto fijo un relleno vertical sólo puede apretar el contenido
     hacia adentro o desbordarlo. El aire lateral se queda, que es el que
     separa el ícono del borde. */
  padding:0 .7rem;
  cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-sm, .8rem);
  color:var(--text-dim,#8b93a7);white-space:nowrap;
  transition:border-color .2s,color .2s;
}
.cop-sw-ico{display:inline-flex;color:var(--sw-color);flex:0 0 auto}
.cop-sw-ico svg{width:18px;height:18px}

/* ⚠ EL RÓTULO ES OPCIONAL. El de Resultados no lo lleva —el ícono de
   «en vivo» al lado de la fila de días ya se entiende— y el de amigos
   sí: un ícono de dos personas sin texto, arriba de un ranking, puede
   leerse como «ver perfiles». Si el marcado no lo pone, no ocupa. */
.cop-sw-txt{flex:0 0 auto}

.cop-sw-riel{
  width:34px;height:20px;border-radius:99px;background:#2a2f3d;
  position:relative;transition:background .2s;flex:0 0 auto;
}
.cop-sw-bola{
  position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform .2s;
}
.cop-sw.on{color:#fff}
.cop-sw.on .cop-sw-riel{background:var(--sw-color)}
.cop-sw.on .cop-sw-bola{transform:translateX(14px)}

/* ⚠ CON TECLADO TAMBIÉN: es un `<button>`, así que el foco tiene que
   verse. Sin esto, quien navega con tabulador no sabe dónde está. */
.cop-sw:focus-visible{outline:2px solid var(--primary);outline-offset:3px}