/* Paquete clasificaciones — corrección del frontend 13-sep-2026 (docs/auditoria/frontend-vistas-2026-09-13.md).
   Va detrás de cyberconquer.css: hereda sus tokens (--bg-*, --fg-*, --accent*,
   --line*, --r-*) y solo añade o ajusta lo de marcadores, insignia y valoración. */

/* ── Marcadores por equipos: introducción ───────────────────────────────── */
.marcadores-intro { margin: 0 0 16px; }
.marcadores-intro-texto { color: var(--fg-dim); font-size: 14px; max-width: 68ch; margin: 0 0 6px; }
.marcadores-intro-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin: 0; font-size: 12.5px; color: var(--fg-mute);
}
.marcadores-atajo { color: var(--accent); font-weight: 600; }
/* DCC-05: medido a 390px, «Ir a tu liga (Nova)» medía 99x19. */
@media (max-width: 760px) {
  .marcadores-atajo { display: inline-flex; align-items: center; min-height: 44px; }
}
.marcadores-atajo:hover, .marcadores-atajo:focus { color: var(--accent-1); }

/* ── Tarjeta de liga ────────────────────────────────────────────────────── */
.marcadores-liga { margin-bottom: 16px; scroll-margin-top: 80px; }
.marcadores-liga-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
}
.marcadores-liga-cabecera .card-title { margin: 0; }
.marcadores-liga-cabecera .card-category { flex-basis: 100%; margin: 0; }
/* La liga propia se distingue por borde y por el rótulo «Tu liga», no solo por color. */
.marcadores-liga--propia { border-color: var(--ac-acento-borde, var(--accent-dim)); }

.marcadores-chip {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--accent-bg); color: var(--accent);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.6;
  white-space: nowrap;
}
.marcadores-chip--fila { vertical-align: 1px; margin-left: 4px; }

/* ── Fila del equipo propio ─────────────────────────────────────────────── */
.scoreboard-index .leader--propio {
  background: var(--accent-bg);
  border-radius: var(--r-sm);
  margin: 0 -8px; padding: 0 8px;
}
.scoreboard-index .leader-name a { color: var(--fg); }
.scoreboard-index .leader-name a:hover,
.scoreboard-index .leader-name a:focus { color: var(--accent); }

/* ── Estado vacío compacto en tarjetas de liga (CLA-12) ─────────────────── */
/* Medido a 390px: cada tarjeta vacía ocupaba ~260px, casi todo relleno. */
.marcadores-liga .card-body:has(> .marcadores-vacio) { padding-top: 8px; padding-bottom: 12px; }
.marcadores-liga .marcadores-vacio {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 12px; padding: 10px 14px; font-size: 13px;
}
.marcadores-vacio-texto { margin: 0; }
.marcadores-vacio-cta { margin: 0; }

/* ── Tarjeta de clasificación del widget (perfil) ───────────────────────── */
.marcadores-widget .card-body:has(> .estado-vacio-bloque) { padding-top: 8px; padding-bottom: 12px; }
.marcadores-widget .estado-vacio-bloque { padding: 12px 14px; font-size: 13px; }

/* ── Insignia pública (/badge/…) ────────────────────────────────────────── */
body.insignia-publica {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans);
}
.insignia-publica-marco {
  display: flex; align-items: flex-start; justify-content: center;
  min-height: 100vh; box-sizing: border-box;
  padding: clamp(16px, 6vw, 72px) 16px;
}
.insignia-tarjeta {
  width: 100%; max-width: 40rem; box-sizing: border-box;
  background: var(--card-grad, var(--bg-1));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.insignia-cabecera {
  display: flex; justify-content: center;
  padding: 18px 20px; border-bottom: 1px solid var(--line-soft);
}
.insignia-marca { display: block; max-width: min(240px, 70%); height: auto; }
.insignia-cuerpo { padding: clamp(20px, 5vw, 36px); text-align: center; }
.insignia-logo {
  display: block; margin: 0 auto 14px; width: 96px; height: 96px;
  object-fit: contain; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line);
}
.insignia-antetitulo {
  margin: 0 0 6px; color: var(--accent);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.insignia-titulo {
  margin: 0 0 18px; color: var(--fg);
  font-size: clamp(20px, 5vw, 28px); line-height: 1.3; font-weight: 600;
  overflow-wrap: anywhere;
}
.insignia-dato { font-family: var(--mono); color: var(--accent); }
.insignia-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.insignia-chips li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--line-soft);
  color: var(--fg-dim); font-size: 13px;
}
.insignia-chips li.insignia-chip--destacada { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.insignia-aviso {
  margin: 0 20px 16px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn);
  font-size: 13px; text-align: left;
}
.insignia-acciones {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 16px 20px 20px; border-top: 1px solid var(--line-soft);
}
.insignia-acciones .btn { margin: 0; }
/* El color de `btn-outline-secondary` se corrige una sola vez para todo el
   frontend en paquetes/estructura.css (DCC-01); aquí había un parche local. */
@media (max-width: 480px) {
  .insignia-acciones { flex-direction: column; }
  .insignia-acciones .btn { width: 100%; }
}

/* ── Valoración (VoteWidget) ────────────────────────────────────────────── */
.vote-widget-estado { display: block; min-height: 1.2em; margin-top: 4px; font-size: 12px; color: var(--fg-mute); }
.vote-widget-estado.is-ok { color: var(--accent); }
.vote-widget-estado.is-error { color: var(--danger); }