/* ==========================================================================
   SORTEOWEB · Estilos de la vista pública GANADORES (view/ganadores.php)
   Requiere assets/css/style.css y tickets.css (fondo .tk, .tk-hero, .input) antes.
   [1] Layout y selector de sorteos   [2] Cabecera del sorteo   [3] Ranking de ganadores
   [4] Participantes   [5] Responsive
   ========================================================================== */

/* [1] LAYOUT Y SELECTOR DE SORTEOS ========================================= */
.gn-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.gn [hidden] { display: none !important; }
.gn-sorteos { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: 1.2rem; }
.gn-sorteos__titulo { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: .6rem; }
.gn-sorteos__lista { display: grid; gap: .5rem; }
.gn-chip {
    display: grid; gap: .15rem; width: 100%; padding: .75rem .95rem; text-align: left; font: inherit; color: var(--text); cursor: pointer;
    background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    border: 1.5px solid var(--border); border-radius: 16px; transition: border-color .2s, background .2s, transform .2s;
}
.gn-chip b { font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.gn-chip small { color: var(--muted); font-size: .76rem; }
.gn-chip:hover { transform: translateY(-2px); border-color: rgba(var(--sky-rgb), .55); }
.gn-chip.is-active { border-color: var(--blue-bright); background: linear-gradient(160deg, rgba(var(--blue-bright-rgb), .28), rgba(var(--blue-bright-rgb), .08)); box-shadow: 0 0 22px rgba(var(--blue-bright-rgb), .3); }
.gn-msg { color: var(--muted); text-align: center; padding: 1rem; }

.gn-contenido { display: grid; gap: 1.3rem; min-width: 0; animation: tk-up .5s cubic-bezier(.2, .8, .2, 1) both; }

/* [2] CABECERA DEL SORTEO =================================================== */
.gn-cabecera {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding: 1.3rem 1.5rem;
    background: linear-gradient(160deg, rgba(var(--blue-bright-rgb), .22), rgba(255, 255, 255, .03));
    border: 1px solid var(--border); border-radius: var(--radius);
}
.gn-cabecera h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; line-height: 1.2; outline: none; overflow-wrap: anywhere; }
.gn-cabecera__fecha { color: var(--muted); margin-top: .3rem; font-size: .92rem; }
.gn-estado { padding: .3rem .85rem; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; white-space: nowrap; }
.gn-estado--abierto { color: #8bf6bd; background: rgba(58, 222, 140, .14); border: 1px solid rgba(58, 222, 140, .5); }
.gn-estado--realizado { color: #ffe08a; background: rgba(255, 201, 60, .14); border: 1px solid rgba(255, 201, 60, .5); }

.gn-bloque {
    padding: 1.4rem 1.5rem; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.gn-bloque__titulo { font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem; }
.gn-bloque__titulo small { color: var(--muted); font-weight: 600; font-size: .85rem; }

/* [3] RANKING DE GANADORES ================================================== */
.gn-podio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.gn-puesto { display: grid; justify-items: center; align-content: start; gap: .25rem; padding: 1.2rem .8rem; text-align: center; border: 1.5px solid var(--border); border-radius: 18px; background: rgba(255, 255, 255, .04); }
.gn-puesto__medalla { font-size: 2.4rem; line-height: 1; }
.gn-puesto__lugar { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gn-puesto__nombre { font-weight: 800; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.gn-puesto__codigo { font-family: var(--font-num); font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: var(--sky); }
.gn-puesto__premio { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.gn-puesto--1 { border-color: rgba(255, 201, 60, .8); background: linear-gradient(170deg, rgba(255, 201, 60, .2), rgba(255, 201, 60, .03)); box-shadow: 0 0 30px rgba(255, 201, 60, .2); }
.gn-puesto--2 { border-color: rgba(214, 226, 240, .6); background: linear-gradient(170deg, rgba(214, 226, 240, .14), rgba(214, 226, 240, .02)); }
.gn-puesto--3 { border-color: rgba(222, 150, 90, .65); background: linear-gradient(170deg, rgba(222, 150, 90, .16), rgba(222, 150, 90, .02)); }
.gn-puesto.is-vacio { opacity: .5; border-style: dashed; box-shadow: none; background: rgba(255, 255, 255, .02); }
.gn-puesto.is-vacio .gn-puesto__nombre { font-weight: 600; font-size: .9rem; color: var(--muted); }

/* [4] PARTICIPANTES ========================================================= */
.gn-premios { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.gn-premio { position: relative; cursor: pointer; }
.gn-premio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gn-premio span { display: inline-block; padding: .4rem .85rem; font-size: .82rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; transition: background .2s, color .2s; }
.gn-premio span small { font-weight: 500; }
.gn-premio input:checked + span { color: #fff; background: var(--grad-btn); border-color: transparent; }
.gn-premio input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.gn-buscar { position: relative; display: block; margin-bottom: 1rem; }
.gn-buscar svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.gn-buscar .input { width: 100%; padding-left: 2.6rem; }
.gn-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gn-tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.gn-ticket { display: grid; gap: .15rem; padding: .8rem .95rem; background: rgba(3, 11, 36, .45); border: 1px solid var(--border); border-radius: 14px; }
.gn-ticket__nombre { font-weight: 700; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.gn-ticket__codigo { font-family: var(--font-num); font-size: .82rem; font-weight: 700; letter-spacing: .05em; color: var(--sky); }
.gn-ticket__premio { font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.gn-ticket__estado { justify-self: start; margin-top: .3rem; padding: .15rem .6rem; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #cfe6ff; border: 1px solid rgba(var(--sky-rgb), .4); border-radius: 999px; }
.gn-ticket.is-ganador { border-color: rgba(255, 201, 60, .7); background: rgba(255, 201, 60, .1); }
.gn-ticket.is-ganador .gn-ticket__estado { color: #ffe08a; border-color: rgba(255, 201, 60, .6); }
.gn-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.1rem; color: var(--muted); font-size: .85rem; }
.gn-pager .btn:disabled { opacity: .4; cursor: not-allowed; animation: none; }

/* [5] RESPONSIVE ============================================================ */
@media (max-width: 900px) {
    .gn-layout { grid-template-columns: 1fr; }
    .gn-sorteos { position: static; }
    .gn-sorteos, .gn-sorteos__lista { min-width: 0; max-width: 100%; }
    .gn-sorteos__lista { grid-auto-flow: column; grid-auto-columns: minmax(200px, 78%); overflow-x: auto; padding-bottom: .3rem; scroll-snap-type: x mandatory; }
    .gn-chip { scroll-snap-align: start; }
}
@media (max-width: 560px) {
    .gn-bloque, .gn-cabecera { padding: 1.1rem 1rem; }
    .gn-podio { grid-template-columns: 1fr 1fr; }
    .gn-tickets { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .gn-ticket { padding: .65rem .7rem; }
    .gn-ticket__premio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}