/* ══════════════════════════════════════════════════════════════════
   cop-bloqueo.css · LA FILA DE «BLOQUEAR» Y «REPORTAR»
   ------------------------------------------------------------------
   Franco, 17/09: «el botón de bloquear agregalo de forma sutil».

   ⚠⚠ NO USA `.cop-b` Y ES A PROPÓSITO. El sistema de diseño tiene
   cinco familias de cosas que se aprietan y sólo una es «botón»: la que
   ejecuta la acción principal de la pantalla. Un `.cop-b` con el marco
   en degradé al pie del perfil compite con Desafiar y se lee como si
   bloquear fuera lo que la app espera que hagas. Esto es una nota al
   pie que se puede tocar: mismo tamaño que un pie de página, tinta
   apagada, sin marco y sin fondo.

   ⚠ TAMAÑO DE TOQUE IGUAL: 44px de alto mínimo. Discreto es de color y
   de peso, no de superficie — un enlace de 20px al pie de la pantalla
   es el que se falla con el pulgar tres veces seguidas.
   ══════════════════════════════════════════════════════════════════ */

.cop-bloqueo{
  /* ⚠ `box-sizing` SE ESCRIBE ACÁ y no se confía en el reset de la
     página: hay páginas que no lo traen y ahí el padding se suma al
     ancho. */
  box-sizing:border-box;
  width:100%;
  margin-top:var(--gap-2xl,1.8rem);
  padding-top:var(--gap-lg,1rem);
  /* la separación es una LÍNEA, no una caja de otro color: es la regla
     que Franco pide siempre («sin marcos ni fondo diferente»). */
  border-top:1px solid var(--card-border,#1e2330);
  text-align:center;
}
/* ⚠ EL `[hidden]` PROPIO, SIEMPRE. `[hidden]{display:none}` del
   navegador tiene la misma especificidad que una clase y en empate gana
   la que se declara después: todo componente que declare `display` (o
   que se monte oculto) declara también el suyo. Van SIETE apariciones
   de este bug en la app. */
.cop-bloqueo[hidden]{display:none}

.cop-bloqueo .cb-fila{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--gap-lg,1rem);
}
.cop-bloqueo .cb-fila[hidden]{display:none}

.cop-bloqueo .cb-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 var(--gap-md,.7rem);
  background:none;
  border:none;
  border-radius:var(--r-card,14px);
  font-family:inherit;
  font-size:var(--fs-sm, .8rem);
  font-weight:600;
  line-height:var(--lh-base,1.3);
  color:var(--text-dim,#9aa3b5);
  text-decoration:none;
  cursor:pointer;
  transition:color .15s ease;
}
.cop-bloqueo .cb-link[hidden]{display:none}

/* la acción que de verdad corta algo se tiñe de rojo, pero sigue siendo
   texto: el color avisa, no invita */
.cop-bloqueo .cb-si{ color:var(--red,#ff3b5c) }

/* ⚠ HOVER SÓLO CON PUNTERO DE VERDAD. En el teléfono el navegador
   simula el hover al apoyar el dedo y deja pintado lo último que se
   tocó — se lee como «el diseño cambió después de usarlo». */
@media (hover:hover) and (pointer:fine){
  .cop-bloqueo .cb-link:hover{ color:var(--text,#f4f6fb) }
  .cop-bloqueo .cb-si:hover{ color:var(--red,#ff3b5c); filter:brightness(1.25) }
}

/* ⚠ EL FOCO DE TECLADO NO SE SACA. No aparece con el dedo ni con el
   mouse; sin él, quien navega con teclado o con lector de pantalla no
   sabe dónde está parado. */
.cop-bloqueo .cb-link:focus-visible{
  outline:2px solid rgba(var(--cop-acento-rgb,12,149,235),.9);
  outline-offset:2px;
}

.cop-bloqueo .cb-link:disabled{ opacity:.4; cursor:default }

.cop-bloqueo .cb-pregunta,
.cop-bloqueo .cb-nota{
  margin:0 auto var(--gap-md,.7rem);
  max-width:34ch;
  font-size:var(--fs-sm, .8rem);
  line-height:var(--lh-base,1.3);
  color:var(--text-dim,#9aa3b5);
}
.cop-bloqueo .cb-nota{ margin:var(--gap-md,.7rem) auto 0 }
.cop-bloqueo .cb-pregunta b{ color:var(--text,#f4f6fb); font-weight:700 }