/* Página pública: tema oscuro azul marino con lima. */
body.publico {
  --fondo: #00263a;
  --tarjeta: #07324b;
  --borde: rgba(255,255,255,.1);
  --borde-2: rgba(255,255,255,.18);
  --texto: #f3f7fa;
  --texto-2: rgba(243,247,250,.75);
  --texto-3: rgba(243,247,250,.5);
  --sombra: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.18);
  --sombra-alta: 0 14px 40px rgba(0,0,0,.35);
  color-scheme: dark;
  background: radial-gradient(1200px 600px at 10% -10%, #0b3a55 0%, transparent 60%), var(--fondo);
  background-attachment: fixed;
}
.publico a { color: var(--lima); }
.pub-cab { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px); background: rgba(0,38,58,.82); border-bottom: 1px solid var(--borde); }
.pub-cab .dentro { max-width: 1180px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.pub-cab .logos img:first-child { height: 30px; }
.pub-cab .logos img:last-child { height: 38px; }
.pub-cab nav { margin-left: auto; display: flex; gap: 4px; }
.pub-cab nav a { color: var(--texto-2); text-decoration: none; font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.pub-cab nav a.activo, .pub-cab nav a:hover { color: var(--lima); background: rgba(191,224,0,.1); }
.pub-cuerpo { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
.pub-portada { padding: 18px 0 26px; }
.pub-portada h1 { font-size: clamp(28px, 5vw, 44px); letter-spacing: -.02em; }
.pub-portada p { color: var(--texto-2); margin: 8px 0 0; }
.publico .btn { background: transparent; color: var(--texto); border-color: var(--borde-2); }
.publico .btn:hover { border-color: var(--lima); }
.publico .chip { background: transparent; color: var(--texto); border-color: var(--borde-2); }
.publico .chip.activo { background: var(--lima); color: var(--azul); border-color: var(--lima); }
.publico .chip.activo .cuenta { background: rgba(0,38,58,.15); color: var(--azul); }
.publico .chip .cuenta { background: rgba(255,255,255,.1); }
.publico .etiqueta { background: rgba(255,255,255,.1); color: var(--texto-2); }
.publico .etiqueta.lima { background: rgba(191,224,0,.16); color: var(--lima); }
.publico .etiqueta.azul { background: rgba(120,170,255,.16); color: #a9c6ff; }
.publico .pestanas button.activo { color: var(--lima); }
.publico .tabla tbody tr:hover { background: rgba(255,255,255,.03); }
.publico .posicion { background: rgba(255,255,255,.08); }
.publico .posicion.oro { background: var(--lima); color: var(--azul); }
.publico .grupo .cab { background: rgba(255,255,255,.04); border-bottom: 1px solid var(--borde); }
.publico .partido-linea { cursor: default; }
.publico .partido-linea:hover { background: transparent; }
.publico .marcador-mini { background: rgba(255,255,255,.08); }
.publico .marcador-mini.pend { border-color: var(--borde-2); }
.publico .llave-partido { background: #0a3a56; border-color: var(--borde); }
.publico .llave-lado + .llave-lado { border-top-color: var(--borde); }
.publico .llave-lado.gana { background: rgba(191,224,0,.12); }
.publico .llave .ronda:not(:last-child) .cruce::after, .publico .llave .ronda:not(:first-child) .cruce::before { border-color: rgba(255,255,255,.18); }
.publico .aviso { background: rgba(120,170,255,.12); color: #cfe0ff; }
.publico .vacio .icono { background: rgba(191,224,0,.12); color: var(--lima); }
.publico .esqueleto { background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 100%); background-size: 200% 100%; }
.pub-dia { display: grid; gap: 10px; }
.pub-hora { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; }
.pub-hora > .h { font-weight: 800; font-size: 18px; color: var(--lima); padding-top: 10px; font-variant-numeric: tabular-nums; }
.pub-partidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.pub-partido { background: var(--tarjeta); border: 1px solid var(--borde); border-left: 5px solid var(--color); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.pub-partido .meta { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); display: flex; justify-content: space-between; gap: 8px; }
.pub-partido .lado { display: flex; justify-content: space-between; gap: 10px; font-weight: 650; }
.pub-partido .lado.gana { color: var(--lima); font-weight: 800; }
.pub-partido .sets { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.pub-pie { text-align: center; color: var(--texto-3); font-size: 13px; padding: 30px 16px; }

/* ---------- Actualización 4 ---------- */
/* Buscador */
.pub-buscar { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--borde-2); border-radius: 14px; padding: 0 14px; margin: 4px 0 16px; max-width: 520px; transition: border-color .2s, background .2s; }
.pub-buscar:focus-within { border-color: var(--lima); background: rgba(255,255,255,.09); }
.pub-buscar svg { width: 19px; height: 19px; color: var(--texto-3); flex: none; }
.pub-buscar input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--texto); font: inherit; font-size: 16px; padding: 12px 0; }
.pub-buscar input::-webkit-search-cancel-button { display: none; }
.pub-buscar .limpiar { background: none; border: 0; color: var(--texto-3); cursor: pointer; display: grid; place-items: center; padding: 4px; }
.pub-buscar .limpiar svg { width: 16px; height: 16px; }

/* Selectores tipo WPR */
.pub-filtros, .pub-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.pub-select { display: flex; flex-direction: column; background: rgba(255,255,255,.05); border: 1px solid var(--borde-2); border-radius: 12px; padding: 6px 12px 4px; min-width: 200px; }
.pub-select span { font-size: 11.5px; font-weight: 700; color: var(--lima); letter-spacing: .02em; }
.pub-select select { background: transparent; border: 0; color: var(--texto); font: inherit; font-weight: 700; font-size: 15px; padding: 2px 0 4px; outline: 0; cursor: pointer; }
.pub-select select option { background: #00263a; color: #fff; }
.pub-ocultar { color: var(--texto-2); padding: 0 6px 10px; }
.pub-barra .segmentado { margin-left: auto; }
.publico .segmentado { background: rgba(255,255,255,.06); }
.publico .segmentado button { color: var(--texto-2); }
.publico .segmentado button.activo { background: var(--lima); color: var(--azul); }
@media (max-width: 700px) { .pub-select { min-width: 0; flex: 1 1 45%; } .pub-barra .segmentado { margin-left: 0; width: 100%; } }

/* Cuadrícula por cancha */
.pub-columnas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.pub-columna { display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; animation: aparecer .3s var(--curva); }
.pub-cancha { background: var(--lima); color: var(--azul); font-weight: 800; text-align: center; padding: 11px 10px; border-radius: 12px; letter-spacing: .02em; }
.pub-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.pub-dia-titulo { margin: 12px 0 10px; color: var(--lima); }

/* Tarjeta de partido */
.pt { background: var(--tarjeta); border: 1px solid var(--borde); border-top: 4px solid var(--color); border-radius: 12px; padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.pt-cab { display: flex; align-items: center; gap: 8px; }
.pt-hora { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.pt-lugar { font-size: 12px; font-weight: 700; color: var(--texto-2); }
.pt-estado { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lima); border: 1px solid rgba(191,224,0,.4); border-radius: 6px; padding: 2px 6px; }
.pt-fila { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; }
.pt-fila.gana { background: rgba(191,224,0,.12); }
.pt-fila.gana .pt-nombres { font-weight: 800; color: #fff; }
.pt-fila.pierde .pt-nombres { color: var(--texto-2); }
.pt-nombres { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; line-height: 1.3; }
.pt-sets { display: flex; gap: 4px; align-items: center; }
.pt-set { min-width: 26px; height: 28px; display: grid; place-items: center; border: 1px solid var(--borde-2); border-radius: 7px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.pt-set.g { background: var(--lima); border-color: var(--lima); color: var(--azul); font-weight: 800; }
.pt-wo { font-weight: 800; color: var(--lima); font-size: 13px; }
.pt-check { color: var(--lima); display: grid; place-items: center; }
.pt-check svg { width: 16px; height: 16px; }
.pt-pie { font-size: 12px; color: var(--texto-3); font-weight: 650; text-align: center; border-top: 1px solid var(--borde); padding-top: 6px; }

/* Línea de tiempo y vista general */
.pub-linea-env { overflow-x: auto; padding: 8px; }
.pub-linea, .pub-general { border-collapse: separate; border-spacing: 6px; min-width: max-content; }
.pub-linea th, .pub-general th { font-size: 12px; font-weight: 800; color: var(--lima); text-align: center; padding: 4px 6px; white-space: nowrap; }
.pub-linea tbody th { text-align: right; position: sticky; left: 0; background: var(--tarjeta); z-index: 1; }
.pub-general tbody th { font-variant-numeric: tabular-nums; }
.pub-linea td, .pub-general td { vertical-align: top; min-width: 190px; }
.pub-general td { min-width: 130px; }
.pt-mini { background: rgba(255,255,255,.05); border: 1px solid var(--borde); border-left: 4px solid var(--color); border-radius: 9px; padding: 6px 8px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.pt-mini > div:not(.pt-mini-cat) { display: flex; justify-content: space-between; gap: 8px; }
.pt-mini b { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.pt-mini .gana { color: var(--lima); font-weight: 800; }
.pt-mini-cat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
.pt-mini.compacto { font-size: 11px; padding: 4px 6px; }

/* Grupos en matriz con el estilo oscuro */
.publico .matriz th { background: rgba(255,255,255,.04); color: var(--texto-2); border-bottom-color: var(--borde); }
.publico .matriz td { border-bottom-color: var(--borde); }
.publico .matriz .mz-pos { border-left-color: var(--borde); }
.publico .mz-diagonal { background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, rgba(255,255,255,.08) 6px 12px); }
.publico .mz-celda.gano { background: rgba(31,157,90,.16); }
.publico .mz-celda.perdio { background: rgba(214,69,61,.12); }
.publico .mz-cancha { color: var(--texto-3); }
.publico .mz-notas { border-top-color: var(--borde); }
.publico .mz-notas p { color: var(--texto-2); }
.publico .mz-celda.pend .mz-cargar { color: var(--texto-2); }
.publico .matriz tr.clasifica td.mz-pareja { background: rgba(191,224,0,.08); box-shadow: inset 4px 0 0 var(--lima); }
.publico .grupo .cab .cab-estado { color: var(--texto-3); }
.publico .posicion.pasa { background: var(--lima); color: var(--azul); }

/* Resultados de búsqueda */
.publico tr.buscado td, .publico .llave-lado.buscado { box-shadow: inset 0 0 0 2px var(--lima); }

/* Documentos */
.pub-doc { display: flex; gap: 14px; align-items: center; padding: 16px; text-decoration: none; color: var(--texto); transition: transform .15s var(--curva), border-color .2s; }
.pub-doc:hover { transform: translateY(-2px); border-color: var(--lima); }
.pub-doc .doc-icono { width: 44px; height: 44px; border-radius: 12px; background: rgba(191,224,0,.14); color: var(--lima); display: grid; place-items: center; flex: none; }
.pub-doc .doc-icono svg { width: 22px; height: 22px; }

/* ---------- Actualización 5 ---------- */
.publico .mz-celda.vivo { background: rgba(191,224,0,.12); }
.publico .mz-vivo { color: var(--lima); }
.publico .matriz .mz-tot small { color: var(--texto-3); }
/* Selectores: letra de 16 px para que el teléfono no haga zoom al tocarlos */
.pub-select select, .pub-buscar input { font-size: 16px; }

/* Cuadrícula centrada: columnas del mismo ancho */
.pub-columnas { grid-auto-columns: minmax(250px, 320px); justify-content: safe center; }
.pub-columna > .pt { flex: none; }
.pub-columna { min-width: 0; }

/* Tarjeta estilo WPR */
.pt { gap: 8px; padding: 10px 12px; border-top-width: 4px; }
.pt-cab { min-height: 22px; }
.pt-estado.vivo { color: var(--azul); background: var(--lima); border-color: var(--lima); display: inline-flex; align-items: center; gap: 5px; }
.pt-vivo { display: inline-flex; align-items: center; }
.pt-pareja { text-align: center; font-size: 14px; font-weight: 650; line-height: 1.3; padding: 4px 6px; border-radius: 8px; }
.pt-pareja.gana { color: var(--lima); font-weight: 800; background: rgba(191,224,0,.08); }
.pt-pareja.pierde { color: var(--texto-2); }
.pt-vs { text-align: center; font-style: italic; font-weight: 800; color: var(--lima); font-size: 14px; letter-spacing: .04em; }
.pt-marcador { display: grid; grid-template-columns: repeat(var(--sets), 30px); gap: 4px; justify-content: center; }
.pt-set { width: 30px; min-width: 0; height: 28px; }
.pt-pie { margin-top: 2px; }

/* Teléfono: lista por hora con todos los partidos del día */
.pub-movil { display: flex; flex-direction: column; gap: 14px; }
.pub-movil-hora { display: flex; flex-direction: column; gap: 10px; }
.pub-movil-h { font-weight: 800; color: var(--lima); font-size: 17px; border-bottom: 1px solid var(--borde); padding-bottom: 4px; }

/* Línea de tiempo y vista general: centradas y con marcadores alineados */
.pub-linea-env, .pub-general-env { overflow-x: auto; padding: 10px; display: flex; justify-content: safe center; }
.pub-linea { table-layout: fixed; }
.pub-linea td, .pub-linea thead th:not(.pub-esquina) { width: 210px; }
.pub-linea .pub-esquina { width: 120px; }
.pub-linea { margin: 0 auto; }
.pub-linea td { min-width: 200px; }
.pub-linea th.pub-esquina, .pub-general th.pub-esquina { background: transparent; }
.pt-libre { height: 64px; border: 1px dashed var(--borde); border-radius: 9px; }
.pub-general { width: 100%; table-layout: fixed; margin: 0 auto; }
.pub-general th:first-child { width: 72px; }
.pub-general td { min-width: 0; }
.pt-mini { min-width: 0; }
.ptm-fila { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--sets), 22px); gap: 2px; align-items: center; }
.ptm-fila b { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.ptm-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptm-fila.gana { color: var(--lima); font-weight: 800; }
.pt-mini.vivo { border-color: rgba(191,224,0,.5); }
.pt-mini.compacto .ptm-fila { grid-template-columns: minmax(0, 1fr) repeat(var(--sets), 16px); }
.pt-mini-cat .pt-vivo { color: var(--lima); }
.pt-mini-cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.publico mark.resaltado { background: var(--lima); color: var(--azul); }
.pub-general-env { display: block; }
.pub-general { min-width: 640px; }

/* Actualización 6: portada, puntos en vivo */
.ficha-torneo.sin-portada { grid-template-columns: 1fr; }
.pt-set.pt-puntos { background: var(--azul); border-color: var(--azul); color: var(--lima); font-weight: 800; }
.ptm-puntos { font-style: normal; font-weight: 800; color: var(--azul); background: var(--lima); border-radius: 5px; padding: 0 5px; font-size: .9em; margin-left: 4px; }

/* ---------- Actualización 7 ---------- */
/* Cuadrícula: una sola rejilla canchas × horas; tarjetas del mismo tamaño y alineadas */
.pub-tablero-env { overflow-x: auto; padding-bottom: 6px; }
.pub-tablero { display: grid; grid-template-columns: repeat(var(--columnas), minmax(240px, 300px)); gap: 10px; justify-content: safe center; align-items: stretch; }
.pub-tablero > div:not(.pub-cancha) { display: flex; min-width: 0; }
.pub-tablero .pt { flex: 1; min-width: 0; }
.pt-hueco { border: 1px dashed var(--borde); border-radius: 12px; display: grid !important; place-items: center; color: var(--texto-3); font-size: 12px; font-weight: 700; min-height: 120px; }
.pt-hueco span { opacity: .6; }
.pt-pareja { min-height: 46px; display: flex; flex-direction: column; justify-content: center; }
.pt-pareja > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-centro { height: 64px; display: grid; place-items: center; }
.pt-pie { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-cab { white-space: nowrap; }

/* Línea de tiempo (lista por hora) */
.pub-tl { padding: 4px 0; }
.tl-fila { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--borde); border-left: 4px solid var(--color); }
.tl-fila:last-child { border-bottom: 0; }
.tl-fila.vivo { background: rgba(191,224,0,.05); }
.tl-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-info small { color: var(--texto-3); font-size: 12px; font-weight: 650; }
.tl-hora { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-hora b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tl-cancha { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--texto-2); }
.tl-hora .pt-estado { margin-left: 0; }
.tl-pareja { font-size: 14px; font-weight: 650; line-height: 1.35; min-width: 0; }
.tl-pareja > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-pareja.l1 { text-align: right; }
.tl-pareja.gana { color: #fff; font-weight: 800; }
.tl-pareja.pierde { color: var(--texto-2); }
.tl-sets { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 64px; }
.tl-set { display: grid; grid-template-columns: 28px 28px; gap: 4px; }
.tl-set span { height: 24px; display: grid; place-items: center; border: 1px solid var(--borde-2); border-radius: 6px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.tl-set span.g { background: var(--lima); border-color: var(--lima); color: var(--azul); font-weight: 800; }
.tl-set.puntos span { background: var(--azul); border-color: var(--azul); color: var(--lima); }
.tl-vs { font-style: italic; font-weight: 800; color: var(--lima); }
.tl-wo { font-weight: 800; color: var(--lima); font-size: 13px; }
@media (max-width: 700px) {
  .tl-fila { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 10px; padding: 10px 12px; }
  .tl-info { grid-column: 1 / -1; }
  .tl-pareja { font-size: 13px; }
}

/* Vista general: una fila por cancha */
.pub-vg { padding: 6px; overflow-x: auto; }
.pub-vg-fila { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.pub-vg-fila:last-child { border-bottom: 0; }
.pub-vg-cancha { display: grid; place-items: center; text-align: center; background: rgba(255,255,255,.05); border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--lima); padding: 6px; }
.pub-vg-partidos { display: flex; gap: 8px; flex-wrap: wrap; }
.vg-pt { width: 178px; border: 1px solid var(--borde); border-left: 3px solid var(--color); border-radius: 9px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,.03); }
.vg-estado { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-3); }
.vg-pt.jugado .vg-estado { color: #4ccf86; }
.vg-pt.en_juego .vg-estado { color: var(--lima); }
.vg-pt.en_juego { border-color: rgba(191,224,0,.5); }
.vg-cab { font-size: 11px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-cab b { color: var(--texto); }
.vg-pareja { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11.5px; color: var(--texto-2); }
.vg-pareja span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-pareja.gana { color: #fff; font-weight: 800; }
.vg-check { color: #4ccf86; display: grid; }
.vg-check svg { width: 13px; height: 13px; }
@media (max-width: 700px) {
  .pub-vg-fila { grid-template-columns: 1fr; }
  .pub-vg-cancha { place-items: start; text-align: left; background: transparent; padding: 2px 4px; }
  .pub-vg-partidos { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .vg-pt { flex: none; width: 160px; }
}

.publico .mz-num { background: rgba(255,255,255,.1); color: var(--lima); }
.mz-chica .mz-vivo { font-size: 0 !important; gap: 0; }
.mz-chica .mz-vivo i { width: 8px; height: 8px; }
/* Contenido "como en la PC" achicado para el teléfono */
.ajustado { width: 100%; overflow-x: auto; overflow-y: hidden; }
.ajustado.achicado { -webkit-overflow-scrolling: touch; }
.ajustado-lienzo { position: relative; }
.ajustado.achicado .ajustado-in { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.ajustado.achicado .tabla-envoltura { overflow: visible; }
.ajustado.achicado .matriz td.mz-pareja { white-space: nowrap; }
.ajustado-in > .pila, .ajustado-in { min-width: 0; }
.pt-set sup, .tl-set sup { font-size: 9px; margin-left: 1px; line-height: 0; position: relative; top: -5px; }
.pt-set { position: relative; }
.ajustado.achicado .matriz th.mz-pareja { width: 150px; }
.ajustado.achicado .matriz th.mz-tot { width: 74px; }
.ajustado.achicado .matriz th.mz-pos { width: 48px; }
.ajustado.achicado .matriz th, .ajustado.achicado .matriz td { padding-left: 4px; padding-right: 4px; }
.ajustado.achicado .matriz td.mz-pareja, .ajustado.achicado .matriz th.mz-pareja { padding-left: 12px; }
.pt.editable { cursor: pointer; }
.pt-lapiz { margin-left: 6px; width: 30px; height: 30px; border-radius: 9px; background: var(--lima); color: var(--azul); display: grid; place-items: center; flex: none; }
.pt-lapiz svg { width: 16px; height: 16px; }
.pt-lapiz.bloqueado { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.pt-centro { height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.pt-nota { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--texto-3); text-transform: uppercase; line-height: 1; }
.logo-feni { display: none; }
body[data-fenipadel="si"] .logo-feni { display: block; }

.publico a.chip { text-decoration: none; }
.publico .rk-tabla td strong { white-space: nowrap; }

/* ---------- Aviso para instalar la app (Actualización 21) ---------- */
.pi-capa { position: fixed; inset: 0; z-index: 900; background: rgba(0, 20, 32, .62); display: flex; align-items: flex-end; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); animation: pi-aparecer .25s ease; }
.pi-caja { position: relative; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: #00263a;
  border-radius: 24px; padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: pi-subir .32s cubic-bezier(.2,.8,.2,1); }
.pi-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef2f5; color: #4a6070; display: grid; place-items: center; cursor: pointer; }
.pi-x svg { width: 18px; height: 18px; }
.pi-cab { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.pi-icono { flex: none; width: 60px; height: 60px; border-radius: 15px; box-shadow: 0 6px 16px rgba(0,38,58,.25); }
.pi-caja h2 { margin: 0; font-size: 19px; line-height: 1.2; color: #00263a; letter-spacing: -.01em; }
.pi-caja p { margin: 4px 0 0; font-size: 14px; color: #4a6272; line-height: 1.38; }
/* Pasos: número, texto y el dibujo del botón que hay que tocar */
.pi-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pi-pasos li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; background: #f2f6f9; border-radius: 14px; }
.pi-num { width: 28px; height: 28px; border-radius: 50%; background: #bfe000; color: #00263a; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.pi-txt { font-size: 15px; line-height: 1.35; color: #0f2233; }
.pi-txt b { font-weight: 800; color: #00263a; }
.pi-txt small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: #5b7181; }
.pi-ver { display: flex; justify-content: flex-end; }
/* Un dibujo ancho (fila de menú) va debajo del texto */
.pi-pasos li:has(.pi-dib.fila) .pi-ver { grid-column: 2 / -1; justify-content: flex-start; }
.pi-dib { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: 12px; padding: 8px 11px; }
.pi-dib svg { width: 21px; height: 21px; flex: none; }
.pi-dibs { display: inline-flex; gap: 6px; }
/* iPhone: azul del sistema sobre gris claro */
.pi-dib.ios { background: #fff; color: #0a84ff; border: 1px solid #dfe3e8; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pi-dib.ios.redondo { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.pi-dib.ios.texto { color: #0a84ff; font-weight: 700; font-size: 16px; background: transparent; border-color: transparent; box-shadow: none; padding: 8px 4px; }
/* Android: gris de Material */
.pi-dib.android { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.pi-dib.android.redondo { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.pi-dib.android.texto { color: #fff; background: #1a73e8; border-color: #1a73e8; border-radius: 999px; padding: 9px 16px; font-weight: 700; }
/* Fila de menú (hoja de Compartir o menú del navegador) */
.pi-dib.fila { min-width: 190px; justify-content: space-between; gap: 14px; padding: 10px 12px; font-weight: 500; color: #111; border-radius: 12px; }
.pi-dib.fila.ios svg { color: #111; }
.pi-dib.fila.android svg { color: #5f6368; }
/* Botones */
.pi-caja .btn.grande { width: 100%; justify-content: center; min-height: 50px; font-size: 16px; font-weight: 800; gap: 8px; }
.pi-caja .btn.lima { background: #bfe000; border-color: #bfe000; color: #00263a; }
.pi-caja .pi-instalar { min-height: 58px; font-size: 18px; border-radius: 16px; box-shadow: 0 8px 22px rgba(191,224,0,.45); }
.pi-caja .btn.pi-ahora { background: #f2f6f9; border-color: #e1e8ee; color: #00263a; }
.pi-caja .btn.pi-copiar { background: #00263a; border-color: #00263a; color: #fff; }
.pi-caja .btn.pi-copiar svg { width: 20px; height: 20px; color: #bfe000; }
.pi-caja .btn.pi-copiar.ok { background: #e9f7c2; border-color: #c9dd55; color: #3e5600; }
.pi-caja .btn.pi-copiar.ok svg { color: #4b6800; }
.pi-enlace { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid #c8d4de; border-radius: 12px; color: #0f2233; background: #f7f9fb; }
@keyframes pi-aparecer { from { opacity: 0; } }
@keyframes pi-subir { from { transform: translateY(30px); opacity: 0; } }
/* Arriba cuando los botones del navegador están abajo, con una flecha que señala dónde tocar */
.pi-capa.arriba { align-items: flex-start; }
.pi-capa.arriba .pi-caja { animation-name: pi-bajar; }
@keyframes pi-bajar { from { transform: translateY(-30px); opacity: 0; } }
.pi-flecha { position: fixed; z-index: 901; width: 54px; height: 54px; border-radius: 50%; background: #bfe000; color: #00263a; display: grid; place-items: center; font-size: 30px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.35); pointer-events: none; }
.pi-flecha.abajo { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); animation: pi-rebote-abajo 1s ease-in-out infinite; }
.pi-flecha.arriba { top: calc(10px + env(safe-area-inset-top, 0px)); animation: pi-rebote-arriba 1s ease-in-out infinite; }
.pi-flecha.derecha { right: 18px; }
.pi-flecha.centro { left: calc(50% - 27px); }
@keyframes pi-rebote-abajo { 50% { transform: translateY(8px); } }
@keyframes pi-rebote-arriba { 50% { transform: translateY(-8px); } }
@media (max-height: 640px) {
  .pi-cab .pi-icono { width: 48px; height: 48px; border-radius: 12px; }
  .pi-caja { gap: 9px; padding-top: 14px; }
  .pi-pasos li { padding: 8px 10px; }
  .pi-txt { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pi-capa, .pi-caja, .pi-flecha { animation: none !important; } }
/* Dibujos de las barras del navegador (Actualización 23): lo que la persona ve en su teléfono, con el botón que debe
   tocar resaltado en lima. En el iPhone se dibujan las dos formas posibles de la barra de abajo de Safari. */
.pi-barras { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; min-width: 0; }
.pi-opcion { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pi-opcion-txt { font-size: 13px; line-height: 1.35; color: #3d5466; }
.pi-opcion-txt b { font-weight: 800; color: #00263a; }
.pi-nota { font-size: 12.5px; line-height: 1.35; color: #5b7181; }
.pi-nota b { font-weight: 800; color: #00263a; }
.pi-dibujo { display: flex; min-width: 0; }
.pi-barra { display: flex; align-items: center; justify-content: space-around; gap: 4px; width: 100%; max-width: 300px; padding: 5px 8px; border-radius: 16px; background: #f9f9fb; border: 1px solid #d9dfe5; box-shadow: 0 1px 2px rgba(0,0,0,.06); color: #0a84ff; }
.pi-barra i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: inherit; font-style: normal; }
.pi-barra i svg { width: 20px; height: 20px; }
.pi-barra i.toca { background: #bfe000; color: #00263a; box-shadow: 0 0 0 3px rgba(191,224,0,.45); }
.pi-dir { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 17px; background: #eef0f3; color: #1c1c1e; font-size: 13px; font-weight: 600; }
.pi-dir > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Safari compacta (iPhone, Safari 26): atrás, la dirección y los 3 puntos, sueltos. */
.pi-barra.compacta { justify-content: space-between; gap: 6px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.pi-barra .bola { background: #f2f3f5; border: 1px solid #d9dfe5; color: #1c1c1e; }
.pi-barra .bola.toca { background: #bfe000; border-color: #bfe000; color: #00263a; }
.pi-barra.compacta .pi-dir { border: 1px solid #d9dfe5; background: #f2f3f5; }
/* Solo la dirección (cuando Safari esconde los botones al bajar por la página). */
.pi-barra.sola { width: auto; max-width: 220px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.pi-barra.sola .pi-dir { height: 28px; font-size: 12px; padding: 0 14px; border: 1px solid #d9dfe5; box-shadow: 0 0 0 3px rgba(191,224,0,.55); }
.pi-opcion.chico .pi-opcion-txt { font-size: 12.5px; }
/* Chrome del iPhone: Compartir dentro de la dirección, a la derecha. */
.pi-barra.chrome { padding: 5px; }
.pi-barra.chrome .pi-dir { justify-content: space-between; padding: 0 3px 0 14px; }
.pi-barra.chrome .pi-dir i { width: 30px; height: 30px; }
/* Android: Chrome (arriba), Samsung (abajo) y los navegadores de otras apps. */
.pi-barra.android { color: #3c4043; background: #fff; border-color: #dadce0; }
.pi-barra.android .pi-dir { justify-content: flex-start; background: #f1f3f4; color: #202124; }
.pi-cuenta { font-style: normal; flex: none; width: 21px; height: 21px; border: 2px solid currentColor; border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 800; line-height: 1; }
.pi-barra.samsung { justify-content: space-between; }
.pi-barra.samsung i { width: 32px; height: 32px; }
.pi-barra.interna { justify-content: space-between; background: #fff; color: #1c1c1e; }
.pi-barra.interna .pi-dir { background: transparent; font-weight: 700; }
@media (max-height: 700px) {
  /* Teléfonos chicos (ej. iPhone SE): el aviso más compacto para que quepa entero. */
  .pi-cab p { display: none; }
  .pi-caja h2 { font-size: 17px; }
  .pi-pasos li { padding: 7px 9px; gap: 3px 10px; }
  .pi-txt { font-size: 13.5px; }
  .pi-opcion-txt { font-size: 12.5px; }
  .pi-barras { gap: 6px; }
  .pi-barra { padding: 3px 6px; }
  .pi-barra i { width: 30px; height: 30px; }
  .pi-barra i svg { width: 18px; height: 18px; }
  .pi-dir { height: 30px; }
  .pi-dib.ios.redondo, .pi-dib.android.redondo { width: 38px; height: 38px; }
  .pi-dib.fila { padding: 8px 11px; }
  .pi-caja .btn.grande { min-height: 44px; }
}

/* ---------- Ganadores: podio animado (Actualización 21) ---------- */
.gn-grilla { align-items: start; }
.gn { container-type: inline-size; background: #fff; border: 1px solid var(--borde); border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); }
/* Escenario azul con un brillo lima detrás del 1.º */
.gn-escenario { position: relative; overflow: hidden; isolation: isolate; padding: 16px 14px 0; color: #fff; border-top: 4px solid var(--color);
  background: radial-gradient(75% 62% at 50% 40%, rgba(191,224,0,.2), rgba(191,224,0,0) 70%), linear-gradient(180deg, #003250 0%, #00263a 58%, #001b2a 100%); }
.gn-titulo { position: relative; z-index: 2; margin: 0; display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.gn-titulo i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--color); box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.gn-podio { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr); align-items: end; gap: 8px; max-width: 440px; margin: 8px auto 0; }
/* Sin 3er lugar (semifinal con BYE) o sin subcampeón: solo las columnas que hay, centradas. */
.gn-podio.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); max-width: 300px; }
.gn-podio.n1 { grid-template-columns: minmax(0, 1fr); max-width: 160px; }
.gn-col { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.gn-rayos { position: absolute; z-index: -1; left: 50%; top: 34px; width: 330px; height: 330px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.08) 0deg 7deg, rgba(255,255,255,0) 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 20%, transparent 64%); mask-image: radial-gradient(circle, #000 0%, #000 20%, transparent 64%); }
/* Nombres arriba de cada columna */
.gn-quien { display: flex; flex-direction: column; gap: 7px; margin-bottom: 9px; text-align: center; min-width: 0; max-width: 100%; }
.gn-pareja { display: flex; flex-direction: column; line-height: 1.22; }
.gn-pareja b { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); overflow-wrap: anywhere; }
.gn-col.l1 .gn-pareja b { font-size: 14.5px; font-weight: 800; color: #fff; }
.gn-quien.doble { gap: 6px; }
.gn-quien.doble .gn-pareja b { font-size: 12px; }
.gn-quien.doble .gn-pareja + .gn-pareja { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.18); }
.gn-pareja.vacia { color: rgba(255,255,255,.45); font-weight: 800; }
/* Podio angosto (teléfono): inicial y apellido (M. Estrada); podio ancho: nombre completo. */
.gn-pareja b.gn-largo { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Columnas: plata, lima y bronce */
.gn-bloque { position: relative; width: 100%; display: flex; justify-content: center; padding-top: 10px; border-radius: 12px 12px 0 0; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -12px 18px rgba(0,0,0,.12); }
.gn-col.l1 .gn-bloque { height: 122px; background: linear-gradient(180deg, #dcf65a 0%, #bfe000 42%, #9dbb00 100%); }
.gn-col.l2 .gn-bloque { height: 88px; background: linear-gradient(180deg, #f6f9fb 0%, #d3dbe2 48%, #a9b5c0 100%); }
.gn-col.l3 .gn-bloque { height: 66px; background: linear-gradient(180deg, #f6caa3 0%, #db9564 48%, #b5703c 100%); }
.gn-num { font-size: 40px; font-weight: 800; line-height: 1; color: #00263a; opacity: .88; font-variant-numeric: tabular-nums; }
.gn-col.l1 .gn-num { font-size: 50px; }
.gn-col.l3 .gn-num { font-size: 34px; }
/* Trofeo lima con brillo y chispas */
.gn-trofeo { position: relative; width: 68px; height: 68px; margin-bottom: 8px; }
.gn-copa { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 6px 14px rgba(191,224,0,.35)); }
.gn-chispa { position: absolute; width: 14px; height: 14px; color: #fff; opacity: 0; }
.gn-chispa.c1 { left: -14px; top: 8px; }
.gn-chispa.c2 { right: -16px; top: -2px; width: 18px; height: 18px; color: #bfe000; }
.gn-chispa.c3 { right: -8px; top: 40px; width: 10px; height: 10px; }
.gn-chispa.c4 { left: -6px; top: 42px; width: 11px; height: 11px; color: #bfe000; }
/* Lista de posiciones */
.gn-lista { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.gn-lista li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px 11px 12px; border-radius: 14px; background: #f4f7fa; }
.gn-lista li.l1 { background: rgba(191,224,0,.24); }
.gn-medalla { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #00263a; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.gn-lista li.l1 .gn-medalla { background: linear-gradient(145deg, #e3fb6a, #a6c400); }
.gn-lista li.l2 .gn-medalla { background: linear-gradient(145deg, #f3f6f9, #a9b4bf); }
.gn-lista li.l3 .gn-medalla { background: linear-gradient(145deg, #f2b98a, #b5703c); }
.gn-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gn-nombres { display: flex; flex-direction: column; min-width: 0; line-height: 1.28; }
.gn-nombres b { font-size: 15px; font-weight: 700; color: #0f2233; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-lista li.l1 .gn-nombres b { font-weight: 800; color: #00263a; }
.gn-puesto { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #6c7f8d; }
.gn-lista li.l1 .gn-puesto { color: #4b6800; }
@container (min-width: 560px) {
  .gn-pareja b.gn-largo { display: block; }
  .gn-pareja b.gn-corto { display: none; }
}
@media (min-width: 700px) {
  .gn-escenario { padding: 18px 20px 0; }
  .gn-trofeo { width: 76px; height: 76px; }
  .gn-rayos { top: 38px; width: 380px; height: 380px; }
  .gn-col.l1 .gn-bloque { height: 136px; }
  .gn-col.l2 .gn-bloque { height: 98px; }
  .gn-col.l3 .gn-bloque { height: 72px; }
}

/* Animación (solo transform y opacity). "espera": oculto hasta que el podio se ve; "animar": entra todo en orden. */
.gn.espera .gn-bloque, .gn.espera .gn-quien, .gn.espera .gn-trofeo, .gn.espera .gn-rayos, .gn.espera .gn-lista li { opacity: 0; }
.gn.animar .gn-bloque { animation: gn-sube .62s cubic-bezier(.2, 1.22, .36, 1) both; }
.gn.animar .gn-col.l3 .gn-bloque { animation-delay: .1s; }
.gn.animar .gn-col.l2 .gn-bloque { animation-delay: .38s; }
.gn.animar .gn-col.l1 .gn-bloque { animation-delay: .66s; animation-duration: .72s; }
.gn.animar .gn-quien { animation: gn-aparece .42s ease-out both; }
.gn.animar .gn-col.l3 .gn-quien { animation-delay: .52s; }
.gn.animar .gn-col.l2 .gn-quien { animation-delay: .8s; }
.gn.animar .gn-col.l1 .gn-quien { animation-delay: 1.16s; }
.gn.animar .gn-rayos { animation: gn-rayos 2.6s cubic-bezier(.2, .7, .2, 1) .95s both; }
.gn.animar .gn-trofeo { animation: gn-trofeo .8s cubic-bezier(.3, 1.3, .5, 1) 1.28s both; }
.gn.animar .gn-destello { animation: gn-destello .75s ease-in-out 2.02s both; }
.gn.animar .gn-chispa { animation: gn-chispa 1s ease-in-out 1.9s 2 both; }
.gn.animar .gn-chispa.c2 { animation-delay: 2.05s; }
.gn.animar .gn-chispa.c3 { animation-delay: 2.2s; }
.gn.animar .gn-chispa.c4 { animation-delay: 2.35s; }
.gn.animar .gn-lista li { animation: gn-desliza .48s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1.5s + var(--i, 0) * .11s); }
@keyframes gn-sube { from { transform: translateY(104%); } to { transform: none; } }
@keyframes gn-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gn-rayos { from { opacity: 0; transform: translate(-50%, -50%) rotate(-40deg) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes gn-trofeo {
  0% { opacity: 0; transform: translateY(26px) scale(.3) rotate(-14deg); }
  55% { opacity: 1; transform: translateY(-8px) scale(1.14) rotate(5deg); }
  76% { transform: translateY(2px) scale(.95) rotate(-2deg); }
  90% { transform: translateY(-1px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes gn-destello { from { transform: translateX(-16px) skewX(-18deg); } to { transform: translateX(62px) skewX(-18deg); } }
@keyframes gn-chispa { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 100% { opacity: 0; transform: scale(.3) rotate(90deg); } }
@keyframes gn-desliza { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
/* Reducir movimiento: todo quieto y a la vista. */
@media (prefers-reduced-motion: reduce) {
  .gn .gn-bloque, .gn .gn-quien, .gn .gn-trofeo, .gn .gn-rayos, .gn .gn-lista li, .gn .gn-destello, .gn .gn-chispa { animation: none !important; }
  .gn.espera .gn-bloque, .gn.espera .gn-quien, .gn.espera .gn-trofeo, .gn.espera .gn-rayos, .gn.espera .gn-lista li { opacity: 1; }
}

/* ---------- Hoja de un partido: verlo y compartirlo en historias o WhatsApp (Actualización 21) ---------- */
.cp-ayuda { margin: 2px 4px 0; font-size: 13px; font-weight: 600; color: var(--texto-3); text-align: center; }
.cp-fondo { position: fixed; inset: 0; z-index: 800; background: rgba(0,20,32,.55); display: flex; align-items: flex-end; justify-content: center; animation: cp-fondo .2s ease; }
.cp-hoja { position: relative; width: 100%; max-width: 520px; max-height: calc(100% - max(16px, env(safe-area-inset-top, 0px))); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: #0f2233; border-radius: 26px 26px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: cp-sube .3s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 700px) { .cp-fondo { align-items: center; padding: 20px; } .cp-hoja { border-radius: 26px; padding-top: 16px; padding-bottom: 18px; } .cp-asa { display: none; } }
.cp-asa { align-self: center; width: 42px; height: 5px; border-radius: 3px; background: #d5dde4; margin: 2px 0; }
.cp-cab { display: flex; align-items: center; gap: 8px; padding-right: 40px; flex-wrap: wrap; }
.cp-cat { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; color: #0f2233; background: #eef2f5; border-radius: 999px; padding: 5px 11px; }
.cp-cat i { width: 9px; height: 9px; border-radius: 50%; background: var(--cat); }
.cp-ronda { font-weight: 800; font-size: 15px; color: #00263a; }
.cp-ronda em { font-style: normal; font-size: 12px; font-weight: 800; color: #6c7f8d; border: 1px solid #dbe3ea; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.cp-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef2f5; color: #4a6070; display: grid; place-items: center; cursor: pointer; }
.cp-x svg { width: 18px; height: 18px; }
.cp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; align-items: center; }
.cp-partido { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-estado { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4b6800; background: #eef7b8; border-radius: 7px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 6px; }
.cp-estado.vivo { background: #bfe000; color: #00263a; }
.cp-estado.vivo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: latido 1.4s ease-in-out infinite; }
.cp-lado { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #f4f7fa; }
.cp-lado.gana { background: rgba(191,224,0,.28); }
.cp-lado.pierde .cp-nombres b { color: #6c7f8d; }
.cp-lado.vacia .cp-nombres b { font-style: italic; color: #4a6070; }
.cp-nombres { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cp-nombres b { font-size: 16px; font-weight: 800; color: #0f2233; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-sets { display: flex; gap: 4px; flex: none; }
.cp-sets i { font-style: normal; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid #c8d4de; font-weight: 800; font-size: 15px; color: #4a6070; font-variant-numeric: tabular-nums; padding: 0 4px; }
.cp-sets i.g { background: #00263a; border-color: #00263a; color: #bfe000; }
.cp-vs { align-self: center; font-style: italic; font-weight: 800; color: #7a8d9b; font-size: 13px; line-height: 1; }
.cp-vista { width: 104px; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #00263a; box-shadow: 0 8px 20px rgba(0,38,58,.25); cursor: pointer; display: grid; place-items: center; color: rgba(255,255,255,.7); font: inherit; font-size: 12px; font-weight: 700; }
.cp-vista img { width: 100%; height: 100%; object-fit: cover; display: block; animation: cp-aparece .3s ease; }
.cp-cargando { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(191,224,0,.25); border-top-color: #bfe000; animation: cp-gira .8s linear infinite; }
.cp-info { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cp-info li { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; color: #0f2233; background: #f4f7fa; border-radius: 10px; padding: 7px 11px; min-height: 36px; }
.cp-info svg { width: 18px; height: 18px; color: #00263a; flex: none; }
.cp-info .pub-cancha-num { min-width: 22px; height: 22px; font-size: 13px; border-radius: 6px; padding: 0 5px; }
.cp-botones { display: flex; flex-direction: column; gap: 8px; }
.cp-botones .btn.grande { width: 100%; justify-content: center; gap: 10px; min-height: 54px; font-size: 16.5px; font-weight: 800; border-radius: 16px; }
.cp-botones .btn.cp-historias { background: #bfe000; border-color: #bfe000; color: #00263a; }
.cp-botones .btn.cp-whatsapp { background: #00263a; border-color: #00263a; color: #fff; }
.cp-botones .btn.cp-whatsapp svg { color: #25d366; }
.cp-botones .btn:disabled { opacity: .55; }
.cp-aviso { margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: #3e5600; background: #eef7b8; border-radius: 12px; padding: 10px 12px; }
.cp-reintentar { padding: 8px; text-align: center; line-height: 1.3; font-size: 11px; color: rgba(255,255,255,.85); }
/* Navegador de Instagram, Facebook o TikTok: la imagen grande para guardarla manteniéndola presionada. */
.cp-guardar { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); background: rgba(0,20,32,.92); animation: cp-fondo .2s ease; }
.cp-guardar-caja { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-align: center; }
.cp-guardar-titulo { margin: 0; font-size: 18px; font-weight: 800; color: #bfe000; }
.cp-guardar-sub { margin: -4px 0 0; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.cp-guardar-img { width: auto; max-width: 100%; height: min(58vh, 560px); aspect-ratio: 9 / 16; object-fit: contain; border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,.45); -webkit-touch-callout: default; user-select: auto; }
.cp-guardar-nota { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.75); }
.cp-guardar-nota b { color: #fff; }
.cp-guardar .cp-botones { width: 100%; }
.cp-botones .btn.cp-listo { background: #fff; border-color: #fff; color: #00263a; }
/* Buscador: el jugador también juega en otra categoría (enlace a esa categoría). */
.pub-tambien { display: flex; flex-direction: column; gap: 6px; }
.pub-tambien p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #0f2233; background: #f3f9d2; border: 1px solid #dcec8c; border-radius: 12px; padding: 9px 12px; }
.pub-tambien svg { width: 17px; height: 17px; flex: none; color: #4b6800; }
.pub-tambien-cat { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: #00263a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes cp-fondo { from { opacity: 0; } }
@keyframes cp-sube { from { transform: translateY(40%); opacity: .6; } }
@keyframes cp-aparece { from { opacity: 0; } }
@keyframes cp-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cp-fondo, .cp-hoja, .cp-vista img { animation: none; } .cp-cargando { animation-duration: 2.4s; } }

/* La entrada de la página (admin.css: entrar-pagina … both) dejaba un transform "quieto" al terminar, y con eso todo lo
   "fixed" de adentro (la hoja del partido, la hoja de la vista C) quedaba pegado a la página y no a la pantalla:
   al tocar un partido abajo de la lista, la hoja salía fuera de la vista. Al terminar, la animación ya no se aplica. */
.publico .pagina { animation-fill-mode: backwards; }

/* ---------- Seguir jugadores: estrella del buscador, franja "Mis partidos" y partidos marcados en la cuadrícula ---------- */
.sg-estrella { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; border: 1.5px solid #c8d4de; background: #fff; color: #6c7f8d; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, transform .12s; }
.sg-estrella:active { transform: scale(.94); }
.sg-estrella.activa { background: #bfe000; border-color: #bfe000; color: #00263a; }
.sg-estrella.con-texto { padding: 0 12px 0 10px; }
.sg-estrella:focus-visible { outline: 3px solid #00263a; outline-offset: 2px; }
.sg-estrella svg { flex: none; }
.sg-buscados { display: flex; flex-direction: column; gap: 8px; }
.sg-ayuda { margin: 0 2px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--texto-3); line-height: 1.35; }
.sg-ayuda svg { flex: none; color: #9dbb00; }
.sg-buscados-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.sg-buscado { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--borde); border-radius: 14px; padding: 8px 8px 8px 14px; box-shadow: var(--sombra); }
.sg-buscado.activo { border-color: #bfe000; box-shadow: 0 0 0 2px #bfe000; }
.sg-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-nombre b { font-size: 15.5px; color: #0f2233; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-nombre small { font-size: 12.5px; font-weight: 600; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg { background: #fff; border: 1.5px solid #dcec8c; border-radius: 18px; padding: 8px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.sg-cab { padding: 2px 6px 0; }
.sg-cab h3 { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 800; color: #00263a; }
.sg-cab h3 svg { color: #9dbb00; }
.sg-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 900px) { .sg-lista { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }
.sg-fila { position: relative; display: flex; align-items: flex-start; gap: 6px; background: #f5f8fb; border-radius: 13px; padding: 6px; border-left: 4px solid var(--cat, #bfe000); min-width: 0; }
.sg-fila.vivo { background: #f2f8d0; }
.sg-fila.fin { align-items: center; }
.sg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 1px 2px; border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sg-fila.fin .sg-info { cursor: default; }
.sg-info:focus-visible { outline: 3px solid #bfe000; outline-offset: 2px; }
.sg-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 30px; padding-right: 96px; }
.sg-fila.fin .sg-l1 { padding-right: 0; min-height: 0; }
.sg-quien { min-width: 0; font-size: 15px; font-weight: 800; color: #0f2233; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-que { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: #4a6070; white-space: nowrap; }
.sg-ronda { font-size: 12.5px; font-weight: 700; color: #4a6070; white-space: nowrap; }
.sg-que i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.sg-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 13.5px; font-weight: 600; color: #233847; min-width: 0; }
.sg-hora { font-weight: 800; color: #00263a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-vivo { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: #00263a; background: #bfe000; border-radius: 6px; padding: 1px 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-vivo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: latido 1.4s ease-in-out infinite; }
.sg-cancha { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-weight: 700; color: #0f2233; }
.sg-cancha em { font-style: normal; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 6px; background: #00263a; color: #bfe000; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; line-height: 1; }
.sg-rival { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4a6070; }
.sg-rival small { font-size: 12px; color: var(--texto-3); }
.sg-l3 { font-size: 12.5px; font-weight: 800; color: #8a5300; }
.sg-tenue { color: var(--texto-3); }
.sg-ir { position: absolute; top: 6px; right: 6px; min-height: 30px; padding: 0 10px; border-radius: 9px; border: 1.5px solid #00263a; background: #fff; color: #00263a; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.sg-ir:hover { background: #00263a; color: #fff; }
.sg-ir:active { transform: scale(.97); }
.sg-mas { align-self: center; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 800; color: #00263a; text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px; cursor: pointer; }
.sg-quitado { margin: 0; padding: 2px 6px; font-size: 13px; color: var(--texto-2); text-align: center; }
.sg-quitado button { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: #00263a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* En la cuadrícula: borde lima por fuera y una estrella en la esquina (el lima de adentro sigue siendo el de la pareja
   ganadora). */
.pt.sigue { position: relative; box-shadow: 0 0 0 3px #bfe000, var(--sombra); }
.pt-sigue { position: absolute; top: -11px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #bfe000; color: #00263a; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,38,58,.28); z-index: 1; }
/* "Ver cancha": el partido se resalta un momento. */
.pt-foco > .pt { animation: pt-foco 1s ease-in-out 3; }
@keyframes pt-foco { 0%, 100% { box-shadow: 0 0 0 3px #bfe000, var(--sombra); } 50% { box-shadow: 0 0 0 10px rgba(191,224,0,.9), 0 12px 30px rgba(0,38,58,.3); } }
@media (prefers-reduced-motion: reduce) { .pt-foco > .pt { animation: none; box-shadow: 0 0 0 7px #bfe000; } .sg-vivo i { animation: none; } }
/* En la franja todos se siguen: la estrella es más liviana (se toca para dejar de seguir). */
.sg-fila .sg-estrella { min-width: 34px; height: 34px; padding: 0; border-radius: 50%; border-color: transparent; background: transparent; color: #8fae00; }
.sg-fila .sg-estrella:hover { background: #eef6c4; }