/* ==========================================================================
   Página pública · Rifas Kiosnkof (estilos específicos de página)
   ========================================================================== */

body { padding-bottom: 5rem; }

.section-title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 850; display: flex; align-items: center; gap: var(--k-s2); }

/* ---------- Hero ---------- */
.hero {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #0b1220 0%, #143a7a 55%, #2557d6 100%);
    padding-bottom: 7rem;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 14 28 / 0.55) 0%, rgb(8 14 28 / 0.82) 100%); }
.hero__nav { display: flex; align-items: center; justify-content: space-between; padding-block: var(--k-s4); }
.hero__logo { height: 32px; width: auto; }
.hero__nav-btn { --_bg: rgb(255 255 255 / 0.12); --_fg: #fff; --_bd: rgb(255 255 255 / 0.25); backdrop-filter: blur(8px); }
.hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-s4); padding-top: clamp(2rem, 6vw, 5rem); }
.hero__status { --_bg: rgb(255 255 255 / 0.92); }
.hero__title { font-size: clamp(2.1rem, 1.3rem + 4vw, 4rem); font-weight: 900; letter-spacing: -0.035em; text-wrap: balance; max-width: 18ch; text-shadow: 0 8px 30px rgb(0 0 0 / 0.35); }
.hero__desc { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); max-width: 60ch; opacity: 0.92; text-wrap: pretty; }
.hero__prize {
    display: inline-flex; align-items: center; gap: var(--k-s4); text-align: left;
    padding: var(--k-s3) var(--k-s5) var(--k-s3) var(--k-s3); margin-top: var(--k-s2);
    background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.28);
    border-radius: var(--k-r-full); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgb(0 0 0 / 0.3);
}
.hero__prize-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--k-gold); color: #3b2600; font-size: 1.35rem; flex-shrink: 0; }
.hero__prize-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.8; }
.hero__prize-value { display: block; font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); font-weight: 850; line-height: 1.2; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k-s3); margin-top: var(--k-s3); }
.hero__ghost { --_bg: transparent; --_fg: #fff; --_bd: rgb(255 255 255 / 0.45); }

/* ---------- Datos clave ---------- */
.facts { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: var(--k-s4); margin-top: -4.5rem; position: relative; z-index: 2; }
.fact {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-s2);
    background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-r-lg);
    padding: var(--k-s5); box-shadow: var(--k-shadow);
}
.fact__icon { width: 2.75rem; height: 2.75rem; border-radius: var(--k-r); display: grid; place-items: center; background: var(--k-primary-soft); color: var(--k-primary); font-size: 1.15rem; }
.fact__icon--danger { background: var(--k-danger-soft); color: var(--k-danger); }
.fact__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--k-text-muted); }
.fact__value { font-size: 1.7rem; font-weight: 900; letter-spacing: -0.02em; }
.fact__value--sm { font-size: 1.05rem; font-weight: 750; }

.countdown { display: flex; gap: var(--k-s2); margin-top: var(--k-s2); }
.countdown__box { min-width: 4rem; padding: var(--k-s2) var(--k-s2); border-radius: var(--k-r); background: var(--k-surface-2); display: flex; flex-direction: column; }
.countdown__num { font-size: 1.6rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--k-danger); }
.countdown__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--k-text-muted); margin-top: 0.25rem; }

/* ---------- Resultado oficial ---------- */
.result {
    display: flex; align-items: center; gap: var(--k-s5); margin-top: var(--k-s6);
    background: var(--k-surface); border: 2px solid var(--k-gold); border-radius: var(--k-r-lg);
    padding: var(--k-s5); box-shadow: var(--k-shadow);
}
.result__number, .result-ball {
    display: grid; place-items: center; flex-shrink: 0; width: 6rem; height: 6rem; border-radius: 50%;
    font-size: 2.6rem; font-weight: 900; color: #3b2600;
    background: radial-gradient(circle at 30% 30%, #fff3c4, var(--k-gold) 70%);
    box-shadow: 0 10px 30px rgb(242 176 30 / 0.45), inset 0 -6px 12px rgb(0 0 0 / 0.12);
}
.result-ball { margin: var(--k-s2) auto; width: 7rem; height: 7rem; font-size: 3rem; }
.result__body { display: flex; flex-direction: column; gap: var(--k-s2); align-items: flex-start; }
.result__title { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 850; }

/* ---------- Tablero ---------- */
.board { margin-top: var(--k-s7); scroll-margin-top: var(--k-s4); }
.board__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--k-s4); margin-bottom: var(--k-s4); }
.board__head > div:first-child { display: flex; flex-direction: column; gap: var(--k-s1); max-width: 60ch; }
.board__progress { width: min(320px, 100%); display: flex; flex-direction: column; gap: var(--k-s2); }
.board__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-s3); margin-bottom: var(--k-s4); }

.legend { display: flex; flex-wrap: wrap; gap: var(--k-s4); list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--k-text-muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--k-s2); }
.legend__libre { background: var(--k-success); }
.legend__reservado { background: var(--k-warning); }
.legend__pagado { background: var(--k-danger); }

.grid {
    display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(0.4rem, 1.2vw, 0.85rem);
    padding: clamp(0.75rem, 2.5vw, 2rem); background: var(--k-surface); border: 1px solid var(--k-border);
    border-radius: var(--k-r-lg); box-shadow: var(--k-shadow-sm);
}
.num {
    aspect-ratio: 1; border-radius: var(--k-r); border: 2px solid transparent;
    font-size: clamp(1rem, 0.8rem + 1vw, 1.45rem); font-weight: 850; font-variant-numeric: tabular-nums;
    display: grid; place-items: center; position: relative;
    transition: transform 0.18s var(--k-ease), background-color 0.18s, box-shadow 0.18s, color 0.18s;
}
.num--disponible { background: var(--k-success-soft); color: var(--k-success); border-color: color-mix(in srgb, var(--k-success) 22%, transparent); }
.num--disponible:not(:disabled):hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 24px rgb(21 128 61 / 0.25); }
.num--disponible[aria-pressed="true"] { background: var(--k-success); color: #fff; transform: scale(1.04); box-shadow: 0 8px 22px rgb(21 128 61 / 0.35); }
.num--disponible[aria-pressed="true"]::after {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.6rem;
    position: absolute; top: 4px; right: 5px; opacity: 0.9;
}
.num--reservado { background: var(--k-warning-soft); color: var(--k-warning); }
.num--pagado { background: var(--k-danger-soft); color: var(--k-danger); }
.num:disabled { cursor: not-allowed; }
.num--reservado:disabled, .num--pagado:disabled { opacity: 0.8; text-decoration: line-through; text-decoration-thickness: 2px; }
.num--disponible:disabled { opacity: 0.6; }
.num--ganador { background: var(--k-gold-soft); color: #8a5a00; border-color: var(--k-gold); box-shadow: 0 0 0 4px rgb(242 176 30 / 0.25); animation: k-pulse 2s ease-in-out infinite; }
.num--ganador:disabled { opacity: 1; }
.num.is-oculto { display: none; }
@keyframes k-pulse { 50% { transform: scale(1.08); } }

/* ---------- Pasos ---------- */
.steps { margin-top: var(--k-s8); display: flex; flex-direction: column; gap: var(--k-s5); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-s4); }
.step { display: flex; flex-direction: column; gap: var(--k-s1); padding: var(--k-s5); border-radius: var(--k-r-lg); background: var(--k-surface); border: 1px solid var(--k-border); }
.step__num { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--k-night); color: #fff; font-weight: 800; margin-bottom: var(--k-s2); }

.pay { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k-s3); }
.pay--stack { flex-direction: column; align-items: stretch; }
.pay__item { display: flex; align-items: center; gap: var(--k-s3); padding: var(--k-s2) var(--k-s2) var(--k-s2) var(--k-s4); border-radius: var(--k-r); background: var(--k-surface); border: 1px solid var(--k-border); }
.pay--stack .pay__item { background: var(--k-surface-2); }
.pay__brand { font-weight: 800; font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: var(--k-r-sm); color: #fff; }
.pay__brand--nequi { background: #6b21a8; }
.pay__brand--davi { background: #c62828; }
.pay__number { font-size: 1.1rem; font-weight: 800; flex: 1; text-align: left; }

/* ---------- Consulta ---------- */
.lookup { margin-top: var(--k-s8); scroll-margin-top: var(--k-s4); }
.lookup__card { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--k-s4); padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow); }
.lookup__card .section-title i { color: var(--k-whatsapp); }
.lookup__form { display: flex; flex-wrap: wrap; gap: var(--k-s3); align-items: flex-start; }
.lookup__result:empty { display: none; }
.lookup__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--k-s2); }
.lookup__item { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s2); padding: var(--k-s3); border-radius: var(--k-r); background: var(--k-surface-2); }
.lookup__item strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.lookup__due { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-s3); padding: var(--k-s4); border-radius: var(--k-r); background: var(--k-warning-soft); margin-top: var(--k-s3); }

/* ---------- Diálogo de reserva ---------- */
.ticket-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s3); padding: var(--k-s4); border-radius: var(--k-r); background: var(--k-surface-2); border: 1px dashed var(--k-border); }
.ticket-summary__nums { display: flex; flex-wrap: wrap; gap: var(--k-s2); }
.ticket-summary__nums span { min-width: 2.75rem; padding: 0.35rem 0.5rem; text-align: center; border-radius: var(--k-r-sm); background: var(--k-success); color: #fff; font-weight: 850; font-variant-numeric: tabular-nums; }
.ticket-summary__total { display: flex; flex-direction: column; align-items: flex-end; }
.ticket-summary__total strong { font-size: 1.5rem; font-weight: 900; }

/* ---------- Barra de selección ---------- */
.selection {
    position: fixed; inset: auto 0 0 0; z-index: 1500; padding: var(--k-s3) 0 calc(var(--k-s3) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--k-surface) 92%, transparent); backdrop-filter: blur(12px);
    border-top: 1px solid var(--k-border); box-shadow: 0 -10px 30px rgb(15 23 42 / 0.12);
    animation: k-slide-up 0.25s var(--k-ease);
}
.selection__inner { display: flex; align-items: center; gap: var(--k-s3); }
.selection__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.selection__info span { color: var(--k-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes k-slide-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Footer y flotante ---------- */
.footer { margin-top: var(--k-s8); padding: var(--k-s7) 0; background: var(--k-night); color: #c8d0de; }
.footer__logo { height: 38px; width: auto; margin-inline: auto; }
.fab-whatsapp {
    position: fixed; right: var(--k-s4); bottom: var(--k-s4); z-index: 1400; width: 3.5rem; height: 3.5rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--k-whatsapp); color: #fff; font-size: 1.75rem; text-decoration: none;
    box-shadow: 0 12px 30px rgb(31 168 85 / 0.45); transition: transform 0.2s var(--k-ease);
}
.fab-whatsapp:hover { transform: scale(1.08); }
body:has(.selection:not([hidden])) .fab-whatsapp { bottom: 5.5rem; }

.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 5000; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .facts { grid-template-columns: 1fr 1fr; }
    .fact--wide { grid-column: 1 / -1; order: -1; }
    .steps__list { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .facts { grid-template-columns: 1fr; margin-top: -3.5rem; }
    .result { flex-direction: column; text-align: center; }
    .result__body { align-items: center; }
    .hero__prize { border-radius: var(--k-r-lg); }
    .lookup__form > .k-btn { width: 100%; }
    .selection__clear { display: none; }
    .countdown__box { min-width: 3.4rem; }
}