Default

<h1 style="text-align: center;"><span style="font-size: 36pt;">¿Cuál ha sido el mejor gol de febrero?</span></h1>

<p style="text-align: center;"><span style="font-size: 14pt;">Participa votando por tu favorito y participa en el sorteo de <strong>dos entradas con experiencia prepartido para el SD Huesca - UD Almería</strong>.<strong> </strong></span></p>
<p style="text-align: center;"><span style="font-size: 14pt;">Fácil y sencillo: selecciona el gol ⬇️ y rellena el formulario </span><span style="font-size: 14pt;">➡️</span></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span style="font-size: 14pt;"><em><span style="font-size: 10pt;">* Una vez seleccionado el gol, no podrá modificarse la votación.</span></em></span></p>

<div class="golmes">
  <div class="golmes__carousel">
    <button class="golmes__arrow golmes__arrow--left" type="button" aria-label="Anterior">‹</button>
    <div class="golmes__track" id="golmes_cards"></div>
    <button class="golmes__arrow golmes__arrow--right" type="button" aria-label="Siguiente">›</button>
  </div>

  <div class="golmes__sticky" id="golmes_sticky" hidden>
    <div id="golmes_stickyText"></div>
  </div>

  
  <div class="golmes__modal" id="golmes_modal" aria-hidden="true">
    <div class="golmes__backdrop" data-golmes-close></div>
    <div class="golmes__dialog" role="dialog" aria-modal="true" aria-label="Reproductor de vídeo">
      <button class="golmes__close" type="button" data-golmes-close aria-label="Cerrar">✕</button>
      <div class="golmes__frame">
        <iframe
          id="golmes_ytFrame"
          width="100%" height="100%"
          src=""
          title="YouTube video player"
          frameborder="0"
          allow="autoplay; encrypted-media; picture-in-picture"
          allowfullscreen>
        </iframe>
      </div>
    </div>
  </div>
</div>

<style>
  .golmes { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#111; }
  .golmes__hero { max-width: 1100px; margin: 10px auto 0; padding: 0 16px; text-align:center; }
  .golmes__h1 { margin: 12px 0 6px; font-size: 40px; line-height: 1.1; }
  .golmes__p{ margin: 12px auto 0; max-width: 760px; }

  .golmes__carousel{ position:relative; max-width:1100px; margin: 44px auto 120px; padding: 0 16px; }

  /* ARROWS (versión minimal remarcada + centrada) */
  .golmes__arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    background:transparent;
    border:none;
    color:#a13324f;
    font-size:48px;
    font-weight:700;
    display:none;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5;
    opacity:.95;
    text-shadow:0 2px 6px rgba(0,0,0,.25);
    line-height:1;
    padding:0;
    transition: opacity .2s ease, transform .2s ease;
  }
  .golmes__arrow--left{ left:-8px; }
  .golmes__arrow--right{ right:-8px; }
  .golmes__arrow:hover{ opacity:1; transform:translateY(-50%) scale(1.15); }
  @media (min-width: 901px){ .golmes__arrow{ display:flex; } }

  /* TRACK */
  .golmes__track{ display:flex; gap:16px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch; padding-top:10px; padding-bottom:8px; }
  .golmes__track::-webkit-scrollbar{ height:8px; }
  .golmes__track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
  .golmes__track .golmes__card{ flex: 0 0 220px; scroll-snap-align: start; }
  @media (max-width: 420px){ .golmes__track .golmes__card{ flex-basis: 85%; }}

  /* CARDS */
  .golmes__card{ border:2px solid #13324f; border-radius:16px; overflow:hidden; background:#fff;
    box-shadow: 0 6px 22px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease, border .2s ease; }
  .golmes__card:hover{ transform: translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.12); border:3px solid #a31f34; }
  .golmes__card--selected{ border:3px solid #a31f34; box-shadow:0 0 0 3px rgba(163,31,52,.15); }

  .golmes__top{ padding:14px 14px 10px; height: 120px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start; }
  .golmes__title{ margin-top:8px; margin-bottom:8px; font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .golmes__sub{ display:flex; flex-direction:column; gap:2px; }
  .golmes__subline{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:#666; line-height:1.2; }

  .golmes__thumb{ position:relative; display:block; padding:0; border:0; width:100%; cursor:pointer; background:#000; overflow:hidden; }
  .golmes__thumb img{ width:100%; height: clamp(260px, 40vh, 380px); object-fit:cover; display:block; }

  .golmes__thumb:hover .golmes__play{ transform:translate(-50%, -50%) scale(1.08); box-shadow:0 14px 35px rgba(0,0,0,.35); }
  .golmes__play{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    width:70px; height:70px; background:#a31f34; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 25px rgba(0,0,0,.25); transition:transform .2s ease, box-shadow .2s ease; }
  .golmes__play::before{ content:""; width:0; height:0; border-left:18px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:4px; }

  .golmes__actions{ padding: 12px 14px 14px; display:flex; }
  .golmes__btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 14px; border-radius:12px;
    text-decoration:none; border:1px solid #e6e6e6; background:#111; color:#fff; font-weight:600; cursor:pointer; }
  .golmes__btn--ghost{ background:#fff; color:#111; }
  .golmes__btn--full{ width:100%; }
  .golmes__btn:disabled{ opacity:.5; cursor:not-allowed; }

  /* STICKY */
  .golmes__sticky{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #eee;
    padding: 12px 16px; display:flex; gap:12px; align-items:center; justify-content:center; z-index:999; }
  .golmes__sticky > div{ color:#111; font-weight:600; }

  /* MODAL */
  .golmes__modal{ position:fixed; inset:0; display:none; z-index:1000; }
  .golmes__modal.is-open{ display:block; }
  .golmes__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
  .golmes__dialog{ position:relative; width:320px; height:560px; margin:6vh auto 0; background:#000; border-radius:18px; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.35); }
  .golmes__close{ position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border-radius:999px;
    border:0; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; font-size:18px; }
  .golmes__frame{ position:absolute; inset:0; }
</style>

<script>
  const VOTE_ENDPOINT = "https://script.google.com/macros/s/AKfycbw4zTH0bwAdo8DXw5wUC14qNY-B3qNcTVhJgPv_f5-p8_PHf4JWPEfgjABQoU3XeAM/exec";

  const golmesData = [
    { id:"Escobar - Cádiz", youtube_id:"_WqgA9-kHwI", titulo:"Escobar", subtitulo:"SD Huesca vs Cádiz CF<br>Jornada 24<br>Estadio El Alcoraz" },
    { id:"Sielva - Sporting", youtube_id:"kb69axpKemQ", titulo:"Sielva", subtitulo:"R. Sporting vs SD Huesca<br>Jornada 25<br>Estadio El Molinón - Enrique Castro Quini" },
    { id:"Escobar - Ceuta", youtube_id:"ewozuVCHhE0", titulo:"Escobar", subtitulo:"SD Huesca vs AD Ceuta FC<br>Jornada 26<br>Estadio El Alcoraz" },
    { id:"Portillo - Ceuta", youtube_id:"sWbs9op9XKE", titulo:"Portillo", subtitulo:"SD Huesca vs AD Ceuta FC<br>Jornada 26<br>Estadio El Alcoraz" },
    { id:"Enol - Mirandes", youtube_id:"sWbs9op9XKE", titulo:"Enol", subtitulo:"SD Huesca vs CD Mirandés<br>Jornada 27<br>Estadio El Alcoraz" }
  ];

  const cards = document.getElementById("golmes_cards");
  const sticky = document.getElementById("golmes_sticky");
  const stickyText = document.getElementById("golmes_stickyText");
  const modal = document.getElementById("golmes_modal");
  const ytFrame = document.getElementById("golmes_ytFrame");

  let selected = null;
  let voteSent = false;

  function thumb(yid){
    return "https://i.ytimg.com/vi/" + yid + "/maxresdefault.jpg";
  }

  function subtitleLines(sub){
    return String(sub || "").split("<br>").map(s => s.trim()).filter(Boolean).slice(0,3);
  }

  function render(){
    cards.innerHTML = golmesData.map(v => {
      const isSel = selected && selected.id === v.id;
      const subLines = subtitleLines(v.subtitulo)
        .map(line => '<div class="golmes__subline">' + line + '</div>')
        .join('');

      return (
        '<article class="golmes__card ' + (isSel ? 'golmes__card--selected' : '') + '">' +
          '<div class="golmes__top">' +
            '<div class="golmes__title">' + v.titulo + '</div>' +
            '<div class="golmes__sub">' + subLines + '</div>' +
          '</div>' +

          '<button class="golmes__thumb" data-golmes-play="' + v.youtube_id + '" aria-label="Ver vídeo">' +
            '<img src="' + thumb(v.youtube_id) + '" alt="' + v.titulo + '">' +
            '<span class="golmes__play"></span>' +
          '</button>' +

          '<div class="golmes__actions">' +
            '<button class="golmes__btn golmes__btn--ghost golmes__btn--full" type="button" data-golmes-select="' + v.id + '" ' + ((voteSent && !isSel) ? 'disabled' : '') + '>' +
              (isSel ? 'Seleccionado ✓' : (voteSent ? 'Votación cerrada' : 'Me quedo con este')) +
            '</button>' +
          '</div>' +
        '</article>'
      );
    }).join("");
  }

  function initCarouselArrows(){
    const track = document.getElementById("golmes_cards");
    const prev = document.querySelector(".golmes__arrow--left");
    const next = document.querySelector(".golmes__arrow--right");
    if (!track || !prev || !next) return;

    function getStep(){
      const firstCard = track.querySelector(".golmes__card");
      if (!firstCard) return 240;
      const styles = window.getComputedStyle(track);
      const gap = parseFloat(styles.gap || "16") || 16;
      return firstCard.getBoundingClientRect().width + gap;
    }

    function updateArrows(){
      const styles = window.getComputedStyle(track);
      const padLeft = parseFloat(styles.paddingLeft || "0") || 0;
      const padRight = parseFloat(styles.paddingRight || "0") || 0;

      const maxScroll = track.scrollWidth - track.clientWidth;
      const x = track.scrollLeft;

      const hasOverflow = maxScroll > 10;
      if (!hasOverflow) {
        prev.style.visibility = "hidden";
        next.style.visibility = "hidden";
        return;
      }

      prev.style.visibility = (x <= padLeft + 5) ? "hidden" : "visible";
      next.style.visibility = (x >= (maxScroll - padRight - 5)) ? "hidden" : "visible";
    }

    prev.addEventListener("click", () => {
      const styles = window.getComputedStyle(track);
      const padLeft = parseFloat(styles.paddingLeft || "0") || 0;
      const target = Math.max(0, track.scrollLeft - getStep());
      track.scrollTo({ left: Math.max(0, target - padLeft), behavior: "smooth" });
    });

    next.addEventListener("click", () => {
      const styles = window.getComputedStyle(track);
      const padLeft = parseFloat(styles.paddingLeft || "0") || 0;
      track.scrollTo({ left: track.scrollLeft + getStep() + padLeft, behavior: "smooth" });
    });

    track.addEventListener("scroll", updateArrows, { passive: true });
    window.addEventListener("resize", updateArrows);
    updateArrows();
  }

  async function saveVote(v){
    try {
      const params = new URLSearchParams({
        vote_id: v.id,
        youtube_id: v.youtube_id,
        titulo: v.titulo,
        page_url: window.location.href,
        user_agent: navigator.userAgent
      });

      await fetch(VOTE_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" },
        body: params.toString()
      });
    } catch (e) {
      console.error("Error guardando voto", e);
    }
  }

  function openModal(yid){
    ytFrame.src = "https://www.youtube.com/embed/" + yid + "?autoplay=1&rel=0";
    modal.classList.add("is-open");
    document.documentElement.style.overflow = "hidden";
  }

  function closeModal(){
    modal.classList.remove("is-open");
    ytFrame.src = "";
    document.documentElement.style.overflow = "";
  }

  document.addEventListener("click", (e) => {
    const play = e.target.closest("[data-golmes-play]");
    if (play) return openModal(play.getAttribute("data-golmes-play"));

    const close = e.target.closest("[data-golmes-close]");
    if (close) return closeModal();

    const sel = e.target.closest("[data-golmes-select]");
    if (sel && !voteSent){
      selected = golmesData.find(x => x.id === sel.getAttribute("data-golmes-select"));
      voteSent = true;
      saveVote(selected);
      if (sticky) sticky.hidden = false;
      if (stickyText) stickyText.textContent = "✅ Seleccionado: " + selected.titulo;
      render();
    }
  });

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && modal.classList.contains("is-open")) closeModal();
  });

  render();
  initCarouselArrows();
</script>