/* ══════════════════════════════════════════════════════════════════════════
   SELECTOR DE PAÍS DEL CLUB — el mismo en todas las webs del dominio
   Lo monta club-paises.js. Hereda los colores del Club con respaldo propio,
   para que también se vea bien en una página que no cargue club-ui.css.
   ══════════════════════════════════════════════════════════════════════════ */

.cp{position:relative;min-width:0}

.cp-btn{display:flex;align-items:center;gap:9px;width:100%;padding:12px 11px;border-radius:12px;
  font-size:15.5px;text-align:left;color:#fff;cursor:pointer;
  background:rgba(5,10,24,.9);border:1px solid rgba(140,170,220,.22);
  transition:border-color .15s,box-shadow .15s}
.cp-btn:hover{border-color:rgba(140,170,220,.4)}
.cp.on .cp-btn,.cp-btn:focus-visible{border-color:var(--gold,#c9a040);
  box-shadow:0 0 0 4px rgba(201,160,64,.16);outline:none}
.cp-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-tx.vacio{color:#64748f}
.cp-v{flex:none;width:16px;height:16px;fill:none;stroke:#8fa2c0;stroke-width:2.2;
  stroke-linecap:round;transition:transform .18s}
.cp.on .cp-v{transform:rotate(180deg)}
.cp-cara{flex:none;display:flex}
.cp-cara:empty{display:none}

/* la bandera: alto fijo y esquinas suaves, que es lo que las hace parecer
   un sello y no una imagen pegada */
.cp-bn{width:24px;height:18px;object-fit:cover;border-radius:3px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 1px 3px rgba(0,0,0,.4);display:block}
.cp-globo{background:linear-gradient(135deg,#2a3a5c,#16213d);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}

.cp-caja{position:absolute;z-index:120;top:calc(100% + 7px);left:0;min-width:100%;
  width:max(260px,100%);max-width:calc(100vw - 40px);border-radius:14px;overflow:hidden;
  background:#0c1529;border:1px solid rgba(140,170,220,.26);
  box-shadow:0 24px 60px rgba(0,0,0,.65)}
.cp-caja[hidden]{display:none}
/* de qué lado cae la lista lo decide club-paises.js al abrirla, midiendo
   lo que hay a cada lado: con `last-child` se salía por la izquierda cuando
   el selector de la lada era el estrecho de la fila. */
.cp-caja.der{left:auto;right:0}

.cp-buscar{padding:9px;border-bottom:1px solid rgba(140,170,220,.16)}
.cp-buscar input{width:100%;padding:9px 11px;border-radius:9px;font-size:14px;color:#fff;
  background:rgba(5,10,24,.85);border:1px solid rgba(140,170,220,.2);outline:none}
.cp-buscar input:focus{border-color:var(--gold,#c9a040)}
.cp-buscar input::placeholder{color:#64748f}

.cp-lista{max-height:268px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:5px}
.cp-op{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;
  font-size:14.4px;text-align:left;color:#dce6f7;cursor:pointer;transition:background .12s}
.cp-op:hover{background:rgba(36,104,255,.16)}
.cp-op.es{background:rgba(201,160,64,.14);color:#fff}
.cp-op b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-op i{flex:none;font-style:normal;font-size:13px;color:#8fa2c0;font-variant-numeric:tabular-nums}
.cp-op.es i{color:var(--gold-light,#e8c46a)}
.cp-nada{padding:14px;text-align:center;font-size:13px;color:#6d7d9b}