/* ==========================================================================
   SORTEOWEB · Estilos de la vista de TICKETS (view/tickets.php)
   Requiere assets/css/style.css (variables, botones, modal), cárgalo antes.
   [1] Fondo y título   [2] Layout y pasos   [3] Tarjetas de elección (sorteo / pago)
   [4] Campos           [5] Enviar           [6] Resumen
   [6b] Cantidad, promociones y desglose
   [7] Confeti de éxito [8] Animaciones      [9] Responsive
   ========================================================================== */

/* [1] FONDO Y TÍTULO ====================================================== */
.tk { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); background: radial-gradient(120% 70% at 50% 0%, var(--hero-glow, #0c2c7a) 0%, var(--bg) 60%); }

.tk-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tk-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; }
.tk-orb--1 { width: 380px; height: 380px; left: -120px; top: 40px; background: var(--blue); animation: tk-float 16s ease-in-out infinite; }
.tk-orb--2 { width: 420px; height: 420px; right: -140px; top: 320px; background: var(--blue-bright); opacity: .3; animation: tk-float 19s ease-in-out infinite reverse; }
.tk-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(var(--sky-rgb), .06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--sky-rgb), .06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.tk-hero { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.tk-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.1; margin-top: .8rem; }
.tk-hero p { color: var(--muted); margin: .7rem auto 0; max-width: 52ch; }
.tk-tag {
    display: inline-block; padding: .35rem 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sky); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
}
.tk-swap { margin-top: .9rem; font-size: .92rem; color: var(--muted); }
.tk-swap a { color: var(--sky); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tk-swap a:hover { color: var(--white); }

/* [2] LAYOUT Y PASOS ====================================================== */
.tk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }

.tk-form { display: grid; gap: 1.2rem; }

.tk-step {
    margin: 0; min-width: 0;
    padding: 1.5rem 1.5rem 1.3rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .3);
    animation: tk-up .6s cubic-bezier(.2, .8, .2, 1) both;
}
.tk-step:nth-of-type(2) { animation-delay: .08s; }
.tk-step:nth-of-type(3) { animation-delay: .16s; }

.tk-step legend { display: flex; align-items: center; gap: .7rem; padding: 0 .4rem; margin-left: -.4rem; font-size: 1.15rem; font-weight: 700; }
.tk-num {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    font-family: var(--font-num); font-weight: 800; font-size: .95rem;
    border-radius: 11px; background: var(--grad-btn); box-shadow: 0 0 18px rgba(var(--blue-bright-rgb), .55);
}
.tk-note { color: var(--muted); font-size: .92rem; margin: .2rem 0 .9rem; }
.tk-proximo { grid-column: 1 / -1; padding: 1rem 1.1rem; line-height: 1.6; color: var(--text); background: rgba(var(--blue-bright-rgb), .08); border: 1px dashed rgba(var(--sky-rgb), .45); border-radius: 14px; }   /* sin sorteos activos */

/* [3] TARJETAS DE ELECCIÓN (sorteo y método de pago) ====================== */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; margin-top: 1rem; }
.choice-grid--pay { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 0; }

.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice input:disabled { cursor: not-allowed; }

.choice__body {
    position: relative; display: grid; gap: .3rem; height: 100%;
    padding: 1rem 1rem 1rem 1rem;
    background: rgba(3, 11, 36, .55);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.choice:hover .choice__body { transform: translateY(-3px); border-color: rgba(var(--sky-rgb), .55); box-shadow: 0 10px 28px rgba(var(--blue-bright-rgb), .2); }
.choice input:focus-visible + .choice__body { outline: 2px solid var(--sky); outline-offset: 3px; }
.choice input:checked + .choice__body {
    border-color: var(--blue-bright);
    background: linear-gradient(160deg, rgba(var(--blue-bright-rgb), .28), rgba(var(--blue-rgb), .18));
    box-shadow: 0 0 0 1px var(--blue-bright), 0 0 30px rgba(var(--blue-bright-rgb), .4);
}
.choice input:disabled + .choice__body { opacity: .45; transform: none; box-shadow: none; }

/* Marca de seleccionado */
.choice__check {
    position: absolute; top: .8rem; right: .8rem; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .35); display: grid; place-items: center; transition: background .2s ease, border-color .2s ease, transform .25s ease;
}
.choice__check::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .2s ease; }
.choice input:checked + .choice__body .choice__check { background: var(--blue-bright); border-color: var(--blue-bright); transform: scale(1.1); }
.choice input:checked + .choice__body .choice__check::after { transform: rotate(-45deg) scale(1); }

/* Tarjeta de sorteo */
.sorteo__name { font-weight: 700; font-size: 1.02rem; padding-right: 1.9rem; line-height: 1.3; }
.sorteo__date { color: var(--muted); font-size: .85rem; }
.sorteo__meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; font-size: .85rem; }
.sorteo__price { font-family: var(--font-num); font-weight: 800; font-size: 1.05rem; color: var(--white); }
.sorteo__left { color: var(--sky); }
.sorteo__badge { position: static; justify-self: start; width: max-content; margin-bottom: .1rem; top: .7rem; right: 2.6rem; padding: .1rem .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ffb4c0; background: rgba(255, 77, 109, .16); border: 1px solid rgba(255, 77, 109, .5); border-radius: 999px; }

/* Tarjeta de método de pago */
.pay { display: flex; align-items: center; gap: .85rem; }
.pay__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, .07); border: 1px solid var(--border); }
.pay__icon svg { width: 28px; height: 28px; }
.pay__name { display: block; font-weight: 700; }
.pay__sub { display: block; color: var(--muted); font-size: .8rem; }
.pay .choice__check { top: 50%; margin-top: -11px; }

/* Datos del método de pago ELEGIDO (assets/js/medios-pago-vista.js; también en la vista
   previa del panel "Cuentas bancarias") */
.tk-pay-detail { margin-top: 1rem; animation: tk-up .35s cubic-bezier(.2, .8, .2, 1) both; }
.tk-pay-detail[hidden] { display: none; }
.mp-detalle { padding: 1.1rem 1.2rem; background: rgba(3, 11, 36, .55); border: 1.5px solid rgba(var(--sky-rgb), .4); border-radius: 16px; }
.mp-detalle__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.mp-detalle__head h3 { font-size: 1.05rem; margin: 0; }
.mp-qr { margin: .2rem auto .4rem; text-align: center; }
.mp-qr img { display: block; width: min(240px, 80%); margin: 0 auto; padding: .5rem; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.mp-qr figcaption { margin-top: .6rem; font-size: .88rem; color: var(--muted); }
.mp-datos { margin: .4rem 0 0; display: grid; gap: .55rem; }
.mp-dato { display: grid; gap: .1rem; }
.mp-dato dt { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mp-dato dd { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 700; font-size: 1.02rem; }
.mp-dato dd span { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .03em; overflow-wrap: anywhere; }
.mp-copiar { padding: .2rem .7rem; font-size: .74rem; font-weight: 700; color: var(--white); background: var(--glass); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.mp-copiar:hover { background: rgba(255, 255, 255, .14); }
.mp-enlace { margin-top: .2rem; }
.mp-url { margin-top: .5rem; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.mp-instr { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--border); font-size: .88rem; color: var(--muted); white-space: pre-line; }
.mp-vacio { color: var(--muted); font-size: .9rem; }

/* Skeleton de las tarjetas de sorteo */
.sk-card { display: block; height: 118px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.05) 75%); background-size: 200% 100%; animation: tk-shimmer 1.4s linear infinite; }

/* [4] CAMPOS ============================================================== */
.field { display: grid; gap: .4rem; margin-top: 1.1rem; }
.field__label { font-size: .9rem; font-weight: 600; color: var(--text); }
.field__hint { color: var(--muted); font-size: .8rem; }
.field__error { display: block; min-height: 1.1em; color: #ff8fa3; font-size: .82rem; font-weight: 500; }
.field__error:empty { min-height: 0; }
.tk-step > .field__error { margin-top: .6rem; }

.input {
    width: 100%; padding: .85rem 1rem; font: inherit; color: var(--text);
    background: rgba(3, 11, 36, .6); border: 1.5px solid var(--border); border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input::placeholder { color: rgba(157, 180, 220, .55); }
.input:hover { border-color: rgba(var(--sky-rgb), .45); }
.input:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 4px rgba(var(--blue-bright-rgb), .22), 0 0 22px rgba(var(--blue-bright-rgb), .25); background: rgba(3, 11, 36, .85); }
.input[aria-invalid="true"] { border-color: #ff4d6d; box-shadow: 0 0 0 3px rgba(255, 77, 109, .18); }

.input-group { display: flex; align-items: stretch; }
.input-group__addon { display: grid; place-items: center; padding: 0 .9rem; font-weight: 700; color: var(--sky); background: rgba(255, 255, 255, .07); border: 1.5px solid var(--border); border-right: 0; border-radius: 14px 0 0 14px; }
.input-group .input { border-radius: 0 14px 14px 0; }

/* Selector de tipo de documento */
.segmented { display: flex; flex-wrap: wrap; gap: .5rem; padding: .3rem; background: rgba(3, 11, 36, .6); border: 1.5px solid var(--border); border-radius: 16px; }
.segmented label { position: relative; flex: 1 1 auto; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: .6rem 1rem; text-align: center; font-weight: 600; font-size: .92rem; color: var(--muted); border-radius: 12px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; white-space: nowrap; }
.segmented label:hover span { color: #fff; }
.segmented input:checked + span { color: #fff; background: var(--grad-btn); box-shadow: 0 0 18px rgba(var(--blue-bright-rgb), .5); }
.segmented input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }

/* [5] ENVIAR ============================================================== */
.tk-submit { display: flex; justify-content: flex-end; animation: tk-up .6s .24s cubic-bezier(.2, .8, .2, 1) both; }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.05rem; }
.tk-submit .btn { min-width: 260px; }
.btn[disabled] { opacity: .75; cursor: progress; transform: none !important; animation: shine 5s linear infinite; }
.btn.is-loading #btnLabel::after {
    content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .6rem; vertical-align: -.15em;
    border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: tk-spin .7s linear infinite;
}

/* [6] RESUMEN ============================================================= */
.tk-summary {
    position: sticky; top: calc(var(--header-h) + 1rem);
    padding: 1.5rem;
    background: linear-gradient(170deg, rgba(var(--blue-bright-rgb), .18), rgba(255, 255, 255, .03));
    border: 1px solid var(--border); border-radius: var(--radius);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .35), 0 0 40px rgba(var(--blue-rgb), .25);
    animation: tk-up .6s .1s cubic-bezier(.2, .8, .2, 1) both;
}
.tk-summary h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.tk-summary h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sky); margin: 1.2rem 0 .6rem; }
.tk-summary__empty { color: var(--muted); font-size: .92rem; }
.tk-summary__name { font-size: 1.25rem; font-weight: 800; line-height: 1.25; margin-bottom: .8rem; }
.tk-summary__list { margin: 0; display: grid; gap: .55rem; }
.tk-summary__list > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.tk-summary__list dt { color: var(--muted); }
.tk-summary__list dd { margin: 0; font-weight: 600; text-align: right; }
.tk-summary__list--total { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.tk-total { font-family: var(--font-num); font-size: 1.25rem; color: var(--white); text-shadow: 0 0 14px rgba(var(--sky-rgb), .7); }

.tk-bar { height: 8px; margin-top: .9rem; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tk-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); box-shadow: 0 0 12px rgba(var(--blue-bright-rgb), .8); transition: width 1s cubic-bezier(.2, .8, .2, 1); }

.tk-prizes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tk-prizes li { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.tk-prizes svg { flex: none; width: 26px; height: 26px; }

/* [6b] CANTIDAD, PROMOCIONES Y DESGLOSE ================================== */
/* Ícono de cada premio en "Elige tu premio" (sin tamaño propio crecía a todo el ancho) */
#premioList .choice__body > svg { width: 40px; height: 40px; }

/* Etiqueta "N promociones" en la tarjeta de cada premio */
.sorteo__promo { justify-self: start; padding: .1rem .55rem; font-size: .72rem; font-weight: 700; color: var(--sky); background: rgba(var(--sky-rgb), .12); border: 1px solid rgba(var(--sky-rgb), .4); border-radius: 999px; }

/* Promociones del premio elegido (atajos: fijan la cantidad a ese bloque) */
.tk-promos { margin: .2rem 0 1.1rem; }
.tk-promos[hidden] { display: none; }
.tk-promos__title { font-size: .92rem; margin-bottom: .6rem; }
.tk-promos__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .6rem; margin-bottom: .5rem; }
.tk-promo {
    display: grid; gap: .15rem; text-align: left; padding: .75rem .9rem;
    background: rgba(3, 11, 36, .55); border: 1.5px dashed rgba(var(--sky-rgb), .45); border-radius: 14px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tk-promo:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--sky); }
.tk-promo:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.tk-promo:disabled { opacity: .45; cursor: not-allowed; }
.tk-promo.is-aplicada { border-style: solid; border-color: var(--blue-bright); background: linear-gradient(160deg, rgba(var(--blue-bright-rgb), .28), rgba(var(--blue-rgb), .16)); box-shadow: 0 0 22px rgba(var(--blue-bright-rgb), .35); }
.tk-promo__name { font-weight: 800; font-size: .95rem; }
.tk-promo__price { font-size: .85rem; color: var(--text); }
.tk-promo__save { font-size: .76rem; font-weight: 700; color: #7ef0b4; }

/* Selector de cantidad con + y − */
.tk-qty { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.tk-qty__btn {
    flex: none; width: 48px; height: 48px; display: grid; place-items: center;
    font-size: 1.5rem; font-weight: 700; line-height: 1; color: #fff;
    background: var(--grad-btn); border: 0; border-radius: 14px;
    box-shadow: 0 0 16px rgba(var(--blue-bright-rgb), .4); transition: transform .15s ease, opacity .2s ease;
}
.tk-qty__btn:hover:not(:disabled) { transform: translateY(-2px); }
.tk-qty__btn:active:not(:disabled) { transform: scale(.94); }
.tk-qty__btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.tk-qty__input { width: 96px; text-align: center; font-family: var(--font-num); font-weight: 800; font-size: 1.15rem; padding: .7rem .5rem; -moz-appearance: textfield; appearance: textfield; }
.tk-qty__input::-webkit-outer-spin-button, .tk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tk-qty__max { color: var(--muted); font-size: .85rem; }

/* Desglose (en el paso de cantidad y en el resumen lateral) */
.tk-breakdown { margin-top: 1rem; padding: .9rem 1rem; background: rgba(3, 11, 36, .45); border: 1px solid var(--border); border-radius: 14px; }
.tk-breakdown:empty { display: none; }
.tk-breakdown__head { margin: .2rem 0 .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.tk-breakdown__head ~ .tk-breakdown__head { margin-top: .8rem; }
.tk-breakdown__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tk-breakdown__list li { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; }
.tk-breakdown__list li span { display: grid; }
.tk-breakdown__list small { color: var(--muted); font-size: .76rem; }
.tk-breakdown__list strong { white-space: nowrap; }
.tk-breakdown__list li.is-muted { color: var(--muted); }
.tk-breakdown__save, .tk-breakdown__total { display: flex; justify-content: space-between; gap: .8rem; margin: .7rem 0 0; }
.tk-breakdown__save { font-size: .88rem; font-weight: 700; color: #7ef0b4; }
.tk-breakdown__total { padding-top: .6rem; border-top: 1px dashed var(--border); font-weight: 800; }
.tk-breakdown__total strong { font-family: var(--font-num); }
.tk-breakdown--summary { margin-top: .8rem; padding: .75rem .85rem; }

/* [6c] COMPROBANTE DE PAGO (paso "Comprobante") Y CAMPOS OPCIONALES ======== */
.tk-opcional { color: var(--muted); font-weight: 500; font-size: .8em; }
.tk-comp {
    display: block; cursor: pointer; padding: 1.2rem; text-align: center;
    border: 2px dashed rgba(var(--sky-rgb), .45); border-radius: 16px;
    background: rgba(3, 11, 36, .35); transition: border-color .2s, background .2s, box-shadow .2s;
}
.tk-comp:hover, .tk-comp:focus-visible, .tk-comp.is-dragover { border-color: var(--sky); background: rgba(var(--sky-rgb), .08); outline: none; box-shadow: 0 0 0 4px rgba(var(--sky-rgb), .15); }
.tk-comp.is-invalid { border-color: #ff6b81; }
.tk-comp__vacio { display: grid; justify-items: center; gap: .35rem; color: var(--sky); }
.tk-comp__vacio strong { color: var(--white); }
.tk-comp__vacio small { color: var(--muted); }
.tk-comp__lleno { display: flex; align-items: center; gap: 1rem; text-align: left; }
.tk-comp__lleno img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); background: #fff; flex: none; }
.tk-comp__lleno div { display: grid; gap: .5rem; justify-items: start; min-width: 0; }
.tk-comp__lleno strong { overflow-wrap: anywhere; font-size: .92rem; }
.tk-comp__vacio[hidden], .tk-comp__lleno[hidden] { display: none; }

/* [7] CONFETI DE ÉXITO ==================================================== */
.burst { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 110; pointer-events: none; }

/* [8] ANIMACIONES ========================================================= */
@keyframes tk-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes tk-float { 50% { transform: translate(40px, 30px) scale(1.1); } }
@keyframes tk-shimmer { to { background-position: -200% 0; } }
@keyframes tk-spin { to { transform: rotate(360deg); } }

/* [9] RESPONSIVE ========================================================== */
@media (max-width: 960px) {
    .tk-layout { grid-template-columns: 1fr; }
    .tk-summary { position: static; }   /* en móvil el resumen queda debajo del formulario */
}
@media (max-width: 560px) {
    .tk-step { padding: 1.2rem 1rem 1rem; }
    .segmented label { flex: 1 1 100%; }
    .tk-submit .btn { width: 100%; min-width: 0; }
    .choice-grid, .choice-grid--pay { grid-template-columns: 1fr; }
    .tk-promos__list { grid-template-columns: 1fr 1fr; }
    .tk-qty__max { flex-basis: 100%; }
}
.tk-terminos { padding: .2rem .4rem; } .tk-terminos[hidden] { display: none; } .tk-terminos a { color: var(--sky); text-decoration: underline; }