/* Copa SDS IV Edición · Inscripción de jugadores (complementa styles.css) */
.status {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 18px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.06);
  font: 700 12.5px/1 var(--display); letter-spacing: .04em; color: var(--white);
}
.pill b { color: var(--yellow); font-weight: 800; }
.pill.ok b { color: var(--ok); }
.pill.warn { border-color: rgba(241,196,25,.5); }
.pill.closed { border-color: rgba(255,122,122,.5); color: #ffd0d0; }

.invite {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 14px;
  background: rgba(241,196,25,.1); border: 1px solid rgba(241,196,25,.45); font-size: 14.5px;
}
.invite strong { color: var(--yellow); }
.invite.bad { background: rgba(255,122,122,.1); border-color: rgba(255,122,122,.5); color: #ffd0d0; }
.code-row { display: flex; gap: 8px; }
.code-row input { text-transform: uppercase; letter-spacing: .08em; }
.code-row .btn { flex: none; min-height: 52px; padding: 0 18px; }

.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg.six { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.seg.six button { min-height: 46px; padding: 0; font-size: 14px; }
.seg.pay { grid-template-columns: 1fr 1fr; }
.seg.pay button { padding: 8px 10px; font-size: 14px; }

.cat {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px;
  border-radius: 12px; background: rgba(31,95,209,.18); border: 1px solid rgba(31,95,209,.5); font-size: 14px;
}
.cat-badge {
  flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px;
  background: var(--blue); color: #fff; font: 900 18px/1 var(--display);
}

.paybox {
  margin: 14px 0 18px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 14.5px;
}
.paybox h4 { margin: 0 0 8px; font: 800 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.paybox p { margin: 0 0 6px; white-space: pre-line; overflow-wrap: anywhere; }
.paybox .amount { font: 900 24px/1.1 var(--display); color: var(--white); margin: 0 0 8px; }
.paybox .amount small { font: 600 13px/1 var(--body); color: var(--muted); }
.copy { margin-top: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.06); color: var(--white); font: 700 13px/1 var(--body); cursor: pointer; }

select {
  width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--white);
  font: 500 16px/1.4 var(--body);
}
input[type=number] {
  width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--white);
  font: 500 16px/1.4 var(--body); -moz-appearance: textfield;
}
input[type=number]:focus { outline: none; border-color: var(--yellow); }
.field.has-error input[type=number] { border-color: var(--danger); }
.field .check { margin-top: 10px; }

/* Invitación especial */
.pill.gold { border-color: var(--yellow); background: rgba(241,196,25,.14); }
.guest {
  position: relative; margin: 0 0 22px; padding: 26px 22px 22px; text-align: center;
  border: 1.5px solid var(--yellow); border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(241,196,25,.22), rgba(7,11,20,.6) 70%);
  box-shadow: inset 0 0 0 6px rgba(241,196,25,.08);
}
.guest-tag { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .28em; color: var(--yellow); }
.guest-name { margin: 10px 0 6px; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 6vw, 32px); line-height: 1.1; color: #fff; }
.guest-text { margin: 0 0 6px; color: #fff; }
.guest-text b { color: var(--yellow); }
.guest-from { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.guest-price { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.guest-code { display: inline-block; margin-top: 12px; padding: 4px 12px; border: 1px dashed rgba(241,196,25,.6); border-radius: 999px; font-size: 12px; letter-spacing: .12em; color: var(--yellow); }
.code-toggle { margin: 0 0 18px; }
.code-toggle summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 6px 0; }
.code-toggle .field { margin-top: 10px; }
.pay-note { font-size: 13px; color: var(--yellow); }

/* Confirmación / mi inscripción */
.done-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0; }
.pase { width: min(100%, 340px); padding: 18px 18px 16px; text-align: center; border: 2px solid var(--yellow); border-radius: 20px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(31,95,209,.35), transparent 60%), linear-gradient(170deg, #0f1a33, #070b14 75%);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 0 0 1px rgba(241,196,25,.18); }
.pase p { margin: 0; }
.pase-logos { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.pase-logos .sds { height: 42px; width: auto; }
.pase-logos .club { display: inline-flex; align-items: center; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.25); }
.pase-logos .club img { height: 40px; width: auto; display: block; }
.pase-kicker { color: var(--yellow); font: 800 10.5px/1.3 Montserrat, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.pase-name { color: #fff; font: 900 21px/1.15 Montserrat, sans-serif; text-transform: uppercase; margin: 9px 0 14px !important; overflow-wrap: anywhere; }
.pase-qr img { display: block; margin: 0 auto; background: #fff; border-radius: 14px; padding: 10px; width: 200px; height: 200px; }
.pase-cut { border-top: 2px dashed rgba(255,255,255,.2); margin: 16px -18px 12px; }
.pase-meta { color: #e6ebf5; font-size: 13.5px; line-height: 1.55; }
.pase-meta b { color: #fff; }
.pase-id { color: var(--yellow); font-weight: 800; font-size: 12.5px; letter-spacing: .18em; margin-top: 6px !important; }
.done-qr small { color: var(--muted); }
.done-details { text-align: left; margin: 14px 0; width: 100%; }
#myLink { margin: 6px 0 10px; }
.btn-link-danger { display: block; margin: 18px auto 0; background: none; border: 0; color: var(--danger); font: 600 14px var(--body); text-decoration: underline; cursor: pointer; padding: 8px; }
.btn-link-danger:disabled { opacity: .5; }

/* ===== Flujo guiado: progreso como un hoyo de golf ===== */
.prog { position: relative; height: 54px; margin: 4px 6px; }
.hole-fair { position: absolute; left: 14px; right: 22px; top: 30px; height: 10px; border-radius: 999px; background: rgba(47,143,78,.25); overflow: hidden; }
.hole-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2f8f4e, #3aa35c); transition: width .7s cubic-bezier(.3,.7,.3,1); }
.hole-tee { position: absolute; left: 12px; top: 32px; width: 4px; height: 12px; border-radius: 2px; background: var(--yellow); }
.hole-ball { --p: 0; position: absolute; top: 24px; left: calc(14px + (100% - 36px) * var(--p)); width: 0; height: 0; transition: left .7s cubic-bezier(.3,.7,.3,1); }
.hole-ball span { position: absolute; left: -8px; top: -2px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 55%, #cfd6e0); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.hole-ball.hop span { animation: hop .7s cubic-bezier(.3,.7,.3,1); }
@keyframes hop { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-26px) rotate(240deg); } 80% { transform: translateY(0) rotate(400deg); } 90% { transform: translateY(-4px) rotate(430deg); } 100% { transform: translateY(0) rotate(450deg); } }
.hole-flag { position: absolute; right: 4px; top: 4px; width: 24px; height: 40px; color: #fff; }
.hole-flag-cloth { transform-box: fill-box; transform-origin: left center; animation: wave 1.6s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.86); } }
.shot { margin: 0 0 14px; text-align: center; font: 800 11.5px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Pantallas */
.screens { position: relative; min-height: 300px; }
.scr { display: none; text-align: center; }
.scr.is-active { display: block; animation: inR .45s cubic-bezier(.2,.8,.2,1) both; }
.scr.is-active.from-left { animation-name: inL; }
@keyframes inR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes inL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.scr.is-active.shake { animation: shake .4s ease both; }
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
.scr h3 { margin: 4px 0 8px; font: 900 clamp(22px, 5.6vw, 28px)/1.15 var(--display); color: #fff; }
.scr-sub { margin: 0 auto 16px; max-width: 34ch; color: var(--muted); font-size: 15px; }
.scr .field, .scr .check { text-align: left; }
.scr-icon { width: 132px; height: 88px; margin: 0 auto 6px; }
.scr-icon svg { width: 100%; height: 100%; overflow: visible; }

/* Animaciones de los íconos */
.ico-tee .i-club { transform-origin: 22px 4px; animation: waggle 2.4s ease-in-out infinite; }
@keyframes waggle { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
.scr.swing .ico-tee .i-club { animation: swing .5s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes swing { 0% { transform: rotate(0); } 40% { transform: rotate(-45deg); } 100% { transform: rotate(35deg); } }
.scr.swing .ico-tee .i-ball { animation: launch .55s .2s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes launch { to { transform: translate(90px, -80px) scale(.3); opacity: 0; } }
.i-bounce { animation: bounce .55s cubic-bezier(.5,0,.5,1) infinite alternate; }
@keyframes bounce { from { transform: translateY(-22px); } to { transform: translateY(6px); } }
.i-shadow { transform-origin: 60px 74px; animation: shadow .55s cubic-bezier(.5,0,.5,1) infinite alternate; }
@keyframes shadow { from { transform: scaleX(.55); opacity: .15; } to { transform: scaleX(1); opacity: .35; } }
.i-float { animation: float 2.6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.i-rock { transform-origin: 60px 66px; animation: rock 2.2s ease-in-out infinite; }
@keyframes rock { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.i-rock2 { transform-origin: 60px 76px; animation: rock 3s ease-in-out infinite; }
.i-bob { animation: bob .25s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-2px); } }
.i-wheel { animation: spin .7s linear infinite; }
.i-wheel.w1 { transform-origin: 36px 63px; }
.i-wheel.w2 { transform-origin: 82px 63px; }
@keyframes spin { to { transform: rotate(360deg); } }
.i-road { animation: road .5s linear infinite; }
@keyframes road { to { stroke-dashoffset: 16; } }
.i-cloth { transform-box: fill-box; transform-origin: left center; animation: wave 1.4s ease-in-out infinite; }
.ico-flag .i-putt { animation: putt 2.8s cubic-bezier(.3,.6,.4,1) infinite; }
@keyframes putt { 0%,15% { transform: translateX(0); opacity: 1; } 70% { transform: translateX(31px); opacity: 1; } 78% { transform: translate(32px, 4px) scale(.4); opacity: 0; } 100% { opacity: 0; } }
.ico-green .i-putt { animation: putt2 2.8s cubic-bezier(.3,.6,.4,1) infinite; }
@keyframes putt2 { 0%,15% { transform: translateX(0); opacity: 1; } 70% { transform: translateX(61px); opacity: 1; } 78% { transform: translate(62px, 2px) scale(.4); opacity: 0; } 100% { opacity: 0; } }
.i-sway { transform-origin: 60px 10px; animation: rock 2.6s ease-in-out infinite; }
.i-spin { transform-box: fill-box; transform-origin: center; animation: coin 2.4s ease-in-out infinite; }
@keyframes coin { 0%,40% { transform: scaleX(1); } 60% { transform: scaleX(.1); } 80%,100% { transform: scaleX(1); } }

/* Opciones grandes tipo tarjeta */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices.three { grid-template-columns: repeat(3, 1fr); }
.choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 108px; padding: 12px 8px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #fff;
  font: 700 15px/1.2 var(--body); transition: transform .15s, border-color .15s, background .15s;
}
.choice:hover { border-color: rgba(241,196,25,.6); }
.choice:active { transform: scale(.96); }
.choice[aria-checked="true"] { border-color: var(--yellow); background: rgba(241,196,25,.14); box-shadow: 0 0 0 3px rgba(241,196,25,.18); }
.choice[aria-checked="true"] .choice-ico { animation: pick .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pick { from { transform: scale(.6); } to { transform: scale(1); } }
.choice-ico { font-size: 34px; line-height: 1; }
.choices.three .choice { min-height: 96px; font-size: 13.5px; }
.choices.three .choice-ico { font-size: 28px; }
.field.has-error .choice { border-color: var(--danger); }
#skipBtn { color: var(--muted); }

/* Resumen editable */
.scr .summary { text-align: left; }
.scr .summary h3 { font: 800 12px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin: 0 0 10px; }
.summary .editable { cursor: pointer; }
.summary dd.editable:hover { color: var(--yellow); }

/* ===== Final: la bola cae en el hoyo ===== */
.done { text-align: center; }
.cup-scene { position: relative; width: min(320px, 100%); margin: 0 auto 4px; }
.cup-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.cup-ball { transform: translate(160px, 89px); }
.cup-cloth { transform-box: fill-box; transform-origin: left center; animation: wave 1.4s ease-in-out infinite; }
.done.play .cup-ball { animation: roll 1.5s cubic-bezier(.25,.6,.4,1) both; }
@keyframes roll {
  0% { transform: translate(20px, 30px); }
  30% { transform: translate(70px, -10px); }
  55% { transform: translate(120px, 89px); }
  85% { transform: translate(158px, 90px); }
  100% { transform: translate(160px, 100px) scale(.2); opacity: 0; }
}
.done.static .cup-ball { opacity: 0; }
.done.play .cup-flag { animation: lift .6s 1.45s ease-out both; }
@keyframes lift { 40% { transform: translateY(-14px); } }
.done-kicker { margin: 0; font: 900 13px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); }
.done.play .done-kicker { animation: pop .5s 1.5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.confetti { position: absolute; inset: 0 -20px; pointer-events: none; }
.cf { position: absolute; top: 30%; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: cf 2s ease-in forwards; }
.cf.ball { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset -2px -2px 0 #cfd6e0; }
@keyframes cf {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  25% { opacity: 1; transform: translate(calc(var(--dx) * .5), -90px) rotate(180deg); }
  100% { opacity: 0; transform: translate(var(--dx), 220px) rotate(720deg); }
}

/* Info de viaje */
.travel { margin: 20px 0 6px; text-align: left; }
.travel h3 { margin: 0 0 4px; font: 900 20px/1.2 var(--display); text-align: center; }
.travel > .muted { text-align: center; margin: 0 0 12px; }
.travel-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.travel-card { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.05); }
.travel-card h4 { margin: 0 0 6px; font: 800 15px/1.2 var(--display); }
.travel-card p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.travel-links { display: flex; flex-wrap: wrap; gap: 6px; }
.travel-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(241,196,25,.5); color: var(--yellow); font: 700 13px/1 var(--body); text-decoration: none; }
.travel-link:hover { background: rgba(241,196,25,.12); }
.travel-link.wa { border-color: #25d366; color: #25d366; }

@media (prefers-reduced-motion: reduce) {
  .scr-icon *, .prog *, .cup-scene *, .scr.is-active, .choice-ico { animation: none !important; transition: none !important; }
  .cup-ball { opacity: 0; }
}

/* Qué incluye la inscripción (pantalla de bienvenida del asistente) */
.incluye { margin-top: 18px; padding: 14px 12px; box-sizing: border-box; width: 100%; border: 1px solid rgba(241,196,25,.35); border-radius: 16px; background: rgba(11,18,34,.55); }
.incluye-tag { margin: 0 0 12px; font: 800 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
.incluye-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; text-align: left; }
.incluye-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 8px; border-radius: 12px; background: rgba(255,255,255,.04); font: 700 13.5px/1.2 var(--display); color: #fff; }
.incluye-list li:last-child { grid-column: 1 / -1; justify-content: center; }
.incluye-list svg { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: rgba(241,196,25,.12); fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 360px) { .incluye-list { grid-template-columns: 1fr; } .incluye-list li:last-child { justify-content: flex-start; } }
@media (max-width: 480px) {
  .incluye-list li { gap: 8px; padding: 8px 6px; font-size: 12.5px; }
  .incluye-list svg { width: 26px; height: 26px; padding: 4px; }
}

/* Cambio de método de pago en "mi inscripción" */
.pago-cambio { margin: 16px 0; text-align: left; }
.pago-cambio summary { cursor: pointer; font: 800 13px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.pago-cambio .choice small { color: var(--muted); font-weight: 500; }
.pago-cambio .field { margin-top: 12px; }
.pago-cambio .btn { margin-top: 14px; width: 100%; }

/* Nota de edad mínima */
.edad-nota { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); font-size: 14px; line-height: 1.45; text-align: left; color: #e8ecf4; }
.edad-nota svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; }
.edad-nota b { color: #fff; }