/* Modo online, tienda y ajustes de tarjetas. */

/* Tarjetas de candidato del mismo alto aunque el nombre sea largo. */
.tarjetas { align-items: stretch; }
.tarjeta.cand { display: flex; flex-direction: column; }
.tarjeta.cand .tarjeta-pie { flex: 1; }
.candado { position: absolute; inset: auto 8px 8px; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(15, 20, 30, .82); color: #fff; font: 800 14px var(--titulos); }
.tarjeta.cand:has(.candado) .retrato img { filter: grayscale(.6); }

/* ---------------------------------------------------------------- online */
.on-caja { display: grid; justify-items: center; align-content: center; gap: 18px; }
.on-nombre { display: flex; align-items: center; gap: 10px; font: 700 15px var(--titulos); text-transform: uppercase; letter-spacing: .06em; }
.on-nombre input, .on-codigo input { font: 600 16px var(--texto); padding: 8px 12px; border: 2px solid var(--borde); border-radius: 10px; width: 220px; }
.on-codigo { display: flex; gap: 6px; }
.on-codigo input { width: 110px; text-transform: uppercase; letter-spacing: .2em; text-align: center; }
.on-unirse { cursor: default; }
.on-sala { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 16px; align-content: start; padding: 10px 0; }
.on-jugadores, .on-eleccion { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 4px 14px rgba(20, 30, 45, .1); display: grid; gap: 8px; align-content: start; }
.on-sala h4 { margin: 0; font: 800 15px var(--titulos); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.on-jug { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #f4f6f8; }
.on-jug.yo { background: #fff3e8; box-shadow: inset 0 0 0 2px var(--naranja); }
.on-jug img { height: 22px; max-width: 44px; object-fit: contain; }
.on-jug small { margin-left: auto; color: var(--gris); font-size: 11px; }
.on-partidos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.on-partido { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 2px solid transparent; border-radius: 10px; background: #f4f6f8; cursor: pointer; font: 700 12px var(--titulos); }
.on-partido img { height: 40px; max-width: 90%; object-fit: contain; }
.on-partido.elegido { border-color: var(--c1); background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.on-partido:disabled { opacity: .45; cursor: not-allowed; }
.on-cands { display: flex; flex-wrap: wrap; gap: 8px; }
.on-cand { position: relative; display: grid; justify-items: center; gap: 2px; width: 84px; padding: 6px 4px; border: 2px solid transparent; border-radius: 10px; background: #f4f6f8; cursor: pointer; font: 700 12px var(--titulos); }
.on-cand img { width: 56px; height: 64px; object-fit: contain; object-position: 50% 100%; }
.on-cand.elegido { border-color: var(--naranja); background: #fff; }
.on-cand > i { position: absolute; top: 6px; right: 8px; color: #1c2733; }
.esperando { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: #1c2733; color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.esperando i { font-size: 22px; animation: girar-reloj 1.4s linear infinite; }
.esperando strong { display: block; font: 800 16px var(--titulos); text-transform: uppercase; }
.esperando small { opacity: .85; }
@keyframes girar-reloj { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- tienda */
.caja-modal.tienda { width: min(620px, 100%); }
.tienda .cuerpo-modal { justify-items: stretch; text-align: left; max-height: 70vh; overflow-y: auto; }
.tienda h4 { margin: 4px 0 0; }
.ti-pase { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 12px; background: linear-gradient(110deg, #f6b40e, #f2711c); color: #1c2733; cursor: pointer; text-align: left; }
.ti-pase i { font-size: 26px; }
.ti-pase b { display: block; font: 800 18px var(--titulos); text-transform: uppercase; }
.ti-pase em { font: 800 20px var(--titulos); font-style: normal; background: #1c2733; color: #fff; padding: 4px 10px; border-radius: 8px; }
.ti-pase-ok { margin: 0; padding: 10px; border-radius: 10px; background: #fff6dc; font-weight: 700; }
.ti-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.ti-item { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #f4f6f8; border-left: 4px solid var(--c1); }
.ti-item.foco { box-shadow: inset 0 0 0 2px var(--naranja); }
.ti-item img { width: 40px; height: 44px; object-fit: contain; object-position: 50% 100%; }
.ti-item b { display: block; font-size: 13px; }
.ti-item small { color: var(--gris); font-size: 11px; }
.ti-ok { color: #2e9e44; font-size: 18px; }
.link-creditos { justify-self: center; border: 0; background: none; color: var(--gris); font-size: 12px; text-decoration: underline; cursor: pointer; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) {
  .on-sala { grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 4px 0; }
  .on-partidos { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .on-partido img { height: 26px; }
  .on-cand { width: 64px; }
  .on-cand img { width: 40px; height: 44px; }
}

/* Online: nombre de cada jugador debajo de su círculo. */
.hud-cand { position: relative; }
.hud-jugador { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 0 6px; border-radius: 6px; background: #1c2733; color: #fff; font: 700 10px var(--texto); white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.hud-cand.yo .hud-jugador { background: var(--naranja); }

.ficha-premio { margin: 4px 0 0; font-size: 12px; color: #1d6b2e; background: #e8f6ec; border-radius: 8px; padding: 4px 8px; }
.premio .premio-cara { width: 120px; height: 140px; object-fit: contain; object-position: 50% 100%; }
.ficha-btns { flex-wrap: wrap; }
.ficha-btns .ficha-premio { flex-basis: 100%; order: -1; }

/* Menú del anfitrión en la sala online. */
.anfitrion { display: grid; gap: 8px; margin-top: 4px; padding: 10px; border-radius: 10px; background: #fff8e6; border: 2px solid #f6c445; }
.anfitrion h4 { color: #8a6100; }
.an-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.an-fila .segmentado button { padding: 4px 10px; font-size: 13px; }
.an-bots { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.an-bot { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; }
.an-bot img { height: 22px; max-width: 44px; object-fit: contain; }
.an-bot select { font: 500 13px var(--texto); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--borde); border-left: 4px solid var(--c1); }
.on-expulsar { margin-left: auto; border: 0; background: #fde4e4; color: var(--rojo); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; }
.on-jugadores { max-height: calc(100dvh - 150px); overflow-y: auto; }

/* Resultado de la PASO. */
.pf-lista { display: grid; gap: 8px; width: min(640px, 100%); margin: 0 auto; }
.pf-fila { display: grid; grid-template-columns: 26px 54px 1fr 1.2fr 64px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(20, 30, 45, .1); border-left: 6px solid var(--c1); }
.pf-fila.yo { box-shadow: 0 0 0 3px var(--naranja), 0 3px 10px rgba(20, 30, 45, .1); }
.pf-pos { font: 800 22px var(--titulos); color: var(--gris); }
.pf-fila img { width: 54px; height: 60px; object-fit: contain; object-position: 50% 100%; }
.pf-fila small { color: var(--naranja); }
.pf-barra { height: 14px; border-radius: 7px; background: #e8ecf0; overflow: hidden; }
.pf-barra span { display: block; height: 100%; background: var(--c1); }
.pf-fila > b:last-child { font: 800 18px var(--titulos); text-align: right; }
.ti-puntos { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #eef4fb; font-size: 14px; }
.premio-cara.repetido { filter: grayscale(.5); }
.mn-pie { display: flex; justify-content: center; align-items: center; gap: 14px; }
.mn-como { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid var(--borde); border-radius: 8px; background: rgba(255, 255, 255, .85); color: var(--gris); font: 700 14px var(--titulos); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.mn-como:hover { color: var(--tinta); background: #fff; }
.mn-racha { font: 600 13px var(--texto); color: #c25b00; }
.menu-ppal { grid-template-rows: auto 1fr auto; }

/* Aviso de cambio de anfitrión */
.red-aviso { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 60; background: #1d2530; color: #fff;
  padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: calc(100% - 32px); }
.red-aviso i { color: #f5b81c; margin-right: 6px; }

/* PASO: negociación de la lista de mesa */
.mesa button.pf-fila { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.mesa .pf-fila.elegido { box-shadow: 0 0 0 3px var(--c1); }
.pf-barra { position: relative; }
.pf-may { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #1d2530; }
.mesa-suma { margin: 10px auto 4px; text-align: center; font-size: 15px; color: #5d646c; }
.mesa-suma.ok { color: #23955a; }
.mesa-tit { margin: 10px 0 6px; text-align: center; }
.mesa-ofertas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; margin: 0 auto; }
.mesa-oferta { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 2px solid #d9dee4; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.mesa-oferta i { color: #f2711c; }
.mesa-oferta.elegido { border-color: #f2711c; background: #fff3ea; font-weight: 700; }
.mesa-msg { text-align: center; color: #c0392b; font-weight: 600; margin: 10px 0 0; }
.mesa-msg.ok { color: #23955a; }

/* Resultado de la PASO y lista de mesa: con scroll si no entran (celular acostado) */
.seleccion.paso-final { overflow-y: auto; max-height: 100dvh; }
@media (orientation: landscape) and (max-height: 520px) {
  .paso-final .pf-fila { padding-top: 4px; padding-bottom: 4px; }
  .paso-final .pf-fila { grid-template-columns: 26px 36px 1fr 1.2fr 64px; }
  .paso-final .pf-fila img { width: 36px; height: 40px; }
  .paso-final .sub { margin: 2px 0; }
  .mesa-ofertas { gap: 6px; }
  .mesa-oferta { padding: 6px 10px; font-size: 12px; }
}
/* Número de delegados: el nombre del órgano debajo, sin salirse de la fila */
.pf-fila { grid-template-columns: 26px 54px 1fr 1.2fr auto; }
.pf-fila > b:last-child { display: grid; justify-items: end; line-height: 1; min-width: 64px; }
.pf-fila > b:last-child small { font: 600 10px "Barlow", sans-serif; text-transform: lowercase; }

/* Resultado de la PASO y lista de mesa: número de delegados en una pastilla, sin desbordes */
.paso-final .pf-fila { grid-template-columns: 26px 46px minmax(120px, 1fr) minmax(120px, 1.2fr) 92px; }
.paso-final .pf-fila > b:last-child { display: grid; justify-items: center; align-content: center; min-width: 0; padding: 4px 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--c1) 12%, #fff); font: 800 22px var(--titulos); line-height: 1; color: #1d2530; }
.paso-final .pf-fila > b:last-child small { margin-top: 2px; font: 700 9px "Barlow", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #5d646c; }