/* Grupo Nórdico — Captación › Ranking: los estilos de public/captacion-ranking.js (clases cpr-). Bloque A. Usa la paleta y
   las piezas de app.css (seg, chip, card, table.t, podio, medalla, kpi, tag, btn). */
.cpr-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cpr-subs button { padding: 6px 11px; }
.cpr-filtros { gap: 10px; margin-bottom: 14px; }
.cpr-aviso { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 9px 12px; border-radius: var(--r-s, 10px); background: var(--hielo); color: var(--azul); margin-bottom: 14px; }
.cpr-aviso .ic { flex: none; margin-top: 2px; }
.cpr-aviso a { font-weight: 700; }
.cpr-ayuda { margin: 0 0 14px; }
.cpr-pie { margin: 8px 2px 18px; }
.cpr-blq { margin-bottom: 16px; }

/* Miniaturas (pasan por el servidor; si no llegan, un marcador vacío). */
.cpr-mini { flex: none; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: #eef1f5; display: inline-grid; place-items: center; color: var(--suave); }
.cpr-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpr-mini.g { width: 100%; max-width: 150px; height: auto; aspect-ratio: 4 / 5; margin: 0 auto 8px; }
.cpr-mini.xl { width: 160px; max-width: 100%; height: auto; aspect-ratio: 4 / 5; }
.cpr-mini.vacia .ic { width: 18px; height: 18px; opacity: .6; }
.cpr-mini.vacia .red { opacity: .7; }

/* Podio y tabla. */
.cpr-podio .pd { padding: 16px 12px 14px; }
.cpr-pd .cpr-pd-q { font-size: 12px; font-weight: 600; color: var(--tinta-2); display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.cpr-pd .red { width: 18px; height: 18px; }
.clic { cursor: pointer; }
.cpr-t td { vertical-align: middle; }
.cpr-t tr.mia { background: #f4f8fe; }
.cpr-t tr.cpr-ref { background: #fafbfd; }
.cpr-pos { font-weight: 800; color: var(--azul); width: 44px; }
.cpr-pz { gap: 10px; min-width: 240px; }
.cpr-q { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.cpr-q .red { width: 18px; height: 18px; }
.cpr-leads { font: 800 18px/1 var(--fm); color: var(--azul-9); }
.cpr-ast { color: var(--ambar); font-weight: 800; margin-left: 2px; cursor: help; }
.cpr-gris { color: var(--suave); }
.cpr-ext .ic { transform: rotate(-45deg); }

/* Detalle de una pieza. */
.cpr-det { display: flex; gap: 18px; align-items: flex-start; }
.cpr-det-l { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.cpr-k { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; }
.cpr-k div { background: #f6f8fb; border-radius: 10px; padding: 8px 10px; }
.cpr-k small { display: block; font-size: 11px; color: var(--suave); font-weight: 600; }
.cpr-k b { font: 800 20px var(--fm); color: var(--azul-9); }
.cpr-chips { margin-bottom: 10px; }
.cpr-cod { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--azul-2); border-radius: 10px; margin-bottom: 10px; }
.cpr-cod > span:first-child { font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.cpr-cod b { font: 800 18px var(--fm); color: var(--azul); letter-spacing: .06em; }
.cpr-cap { white-space: pre-line; max-height: 120px; overflow: auto; }
.cpr-sec { margin-top: 18px; }
.cpr-sec h3 { font-size: 13px; margin: 0 0 8px; color: var(--azul-9); }
.cpr-linea { width: 100%; height: 120px; display: block; background: #fafbfd; border-radius: 10px; }
.cpr-ley { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px; }
.cpr-ley::before { content: ''; width: 14px; height: 3px; border-radius: 2px; background: #2459a6; }
.cpr-ley.v::before { background: #c27c0e; }
.cpr-leads-l { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.cpr-lead { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: #f6f8fb; color: inherit; text-decoration: none; flex-wrap: wrap; }
.cpr-lead:hover { background: var(--hielo); }

/* Mis piezas. */
.cpr-acc { gap: 8px; margin-bottom: 10px; }
.cpr-mp { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--linea-2); }
.cpr-mp:last-child { border-bottom: 0; }
.cpr-mp.marcador { opacity: .92; }
.cpr-mp-n, .cpr-mp-c { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.cpr-mp-n b { font: 800 17px var(--fm); color: var(--azul-9); }
.cpr-mp-c b { font: 800 15px var(--fm); color: var(--azul); letter-spacing: .05em; }
.cpr-mp-n small, .cpr-mp-c small { font-size: 11px; color: var(--suave); }
.cpr-mp-c { min-width: 84px; }
.cpr-mp-a { gap: 4px; min-width: 150px; justify-content: flex-end; }
.cpr-cta { padding: 12px 14px; border-radius: 10px; background: var(--hielo); color: var(--azul-9); font-weight: 600; margin-bottom: 10px; }
.cpr-dl { max-height: 320px; overflow: auto; }
.cpr-dli { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--linea-2); }

/* Fuentes. */
.cpr-err { color: var(--rojo); }
.cpr-aj { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 22px; }
.cpr-aj .seg { flex-wrap: wrap; }
.cpr-sw { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.cpr-sw input { margin-top: 3px; }
.cpr-sw b { display: block; font-size: 13px; }
.cpr-sw small { display: block; font-size: 12px; color: var(--suave); }

@media (max-width: 720px) {
  .cpr-subs { display: flex; width: 100%; overflow-x: auto; }
  .cpr-subs button { flex: 1 0 auto; justify-content: center; }
  .cpr-det { flex-direction: column; align-items: stretch; }
  .cpr-det-l { flex-direction: row; justify-content: space-between; }
  .cpr-mini.xl { width: 110px; }
  .cpr-mp { flex-wrap: wrap; }
  .cpr-mp .grow { min-width: calc(100% - 60px); }
  .cpr-pz { min-width: 200px; }
  .cpr-mp-a { min-width: 0; }
  /* El podio, en una fila (en el celular, una tarjeta por puesto ocupaba la pantalla entera). */
  .podio.cpr-podio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cpr-podio .pd { padding: 10px 6px 10px; }
  .cpr-podio .pd.p1 { padding-top: 14px; }
  .cpr-podio .cpr-mini.g { max-width: 72px; }
  .cpr-podio .pts { font-size: 22px; }
  .cpr-pd .cpr-pd-q { font-size: 10.5px; }
}