/* Wizard de inscripción público (RSP-114). Marca RegistraSports: navy + rojo,
   Barlow Condensed para titulares, Manrope para el cuerpo. Servido como estático
   (estas vistas no pasan por el build de Vite). */

:root {
    --navy: #0b1f4d;
    --red: #c8202b;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e2e8f0;
    --bg: #f1f5f9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}

.wrap { max-width: 680px; margin: 0 auto; padding: 2.5rem 1rem 4rem; }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 30px -12px rgba(11, 31, 77, .25);
    overflow: hidden;
}

.card__header {
    background: var(--navy);
    color: #fff;
    padding: 1.75rem 2rem;
}

.card__header h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    font-size: 1.75rem;
    margin: 0;
}

.steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .8);
}

.steps__dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 999px;
    font-weight: 700; font-size: .75rem;
}

.steps__dot--on { background: var(--red); color: #fff; }
.steps__dot--off { background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .9); }
.steps__dot--done { background: #1f7a4e; color: #fff; }
.steps__sep { flex: 1; height: 2px; background: rgba(255, 255, 255, .18); border-radius: 2px; }

.card__body { padding: 2rem; }

.errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: .85rem 1rem .85rem 1.25rem;
    margin: 0 0 1.5rem;
    font-size: .9rem;
}

.errors ul { margin: 0; padding-left: 1rem; }

/* RSP-134 (Frente G): aviso de beca (informativo, cerrable) al inicio del formulario. */
.notice {
    position: relative;
    border-radius: 10px;
    padding: 1rem 2.5rem 1rem 1.25rem;
    margin: 0 0 1.5rem;
    font-size: .9rem;
}

/* RSP-164: colapsable. Por defecto se muestra solo como un enlace (el summary);
   al desplegar (<details open>) aparece el detalle dentro de la caja ámbar, para
   no ocupar espacio visual mientras está cerrado. */
.notice--scholarship {
    padding: 0;
    margin: 0 0 1.25rem;
    background: none;
    border: 0;
    color: #854d0e;
}

.notice--scholarship > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: auto;
    margin: 0;
    font-weight: 600;
    color: #b45309;
    text-decoration: underline;
    cursor: pointer;
    list-style: none;
}

.notice--scholarship > summary::-webkit-details-marker { display: none; }

.notice--scholarship > summary::before {
    content: '\25B8'; /* ▸ */
    text-decoration: none;
    transition: transform .15s ease;
}

.notice--scholarship[open] > summary::before { transform: rotate(90deg); }

.notice--scholarship[open] {
    padding: 1rem 1.25rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
}

.notice--scholarship[open] > summary { margin-bottom: .35rem; }

.notice__title { font-weight: 700; }

.notice__text { margin: .25rem 0 0; }

.notice__text a { color: inherit; font-weight: 600; }

.notice__close {
    position: absolute;
    top: .5rem;
    right: .65rem;
    background: none;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .65;
}

.notice__close:hover { opacity: 1; }

.section-title {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1rem;
    color: var(--navy);
    margin: 1.75rem 0 .25rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--line);
}

.section-title:first-child { margin-top: 0; }

.field { margin-top: 1rem; }
.field > label { display: block; }

.field__label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink);
    margin-bottom: .35rem;
}

.req { color: var(--red); }

input[type=text], input[type=email], input[type=date], input[type=month], input[type=number],
input[type=tel], input[type=password], input:not([type]), select, textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

textarea { min-height: 96px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 77, .12);
}

.password { position: relative; display: block; }

.password > input { padding-right: 2.75rem; }

.password__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.password__toggle:hover { color: var(--navy); }

.password__toggle:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 8px;
}

.password__icon { width: 1.25rem; height: 1.25rem; }

.password__icon--hide { display: none; }

.password__toggle--visible .password__icon--show { display: none; }

.password__toggle--visible .password__icon--hide { display: block; }

input[type=file] {
    width: 100%;
    font: inherit;
    font-size: .85rem;
    color: var(--muted);
    padding: .5rem 0;
}

input[type=file]::file-selector-button {
    font: inherit;
    font-weight: 600;
    margin-right: .85rem;
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--navy);
    cursor: pointer;
}

.check { display: flex; align-items: center; gap: .55rem; }

/* RSP-145: selector de mes/año (vencimiento de documentos). */
.myp { position: relative; }
.myp__control { position: relative; display: flex; align-items: center; }
.myp__input { padding-right: 2.75rem !important; cursor: pointer; }
.myp__input--invalid { border-color: var(--danger, #dc2626) !important; }
/* El ícono de calendario es decorativo: el campo abre el calendario al enfocarse. */
.myp__icon {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    width: 1.25rem; height: 1.25rem; color: var(--muted); pointer-events: none;
}
.myp__error {
    margin: .35rem 0 0; color: var(--danger, #dc2626); font-size: .82rem; line-height: 1.3;
}
.myp__error[hidden] { display: none; }
.myp__popover {
    position: fixed; z-index: 1000; width: 17rem; padding: .85rem;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 10px 30px -12px rgba(11, 31, 77, .35);
}
.myp__popover[hidden] { display: none; }
.myp__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.myp__navbtn {
    width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent;
    cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--ink); border-radius: 8px;
}
.myp__navbtn:hover:not(:disabled) { background: var(--bg); }
.myp__navbtn:disabled { opacity: .35; cursor: not-allowed; }
.myp__year { font-weight: 700; color: var(--navy); }
.myp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.myp__month {
    padding: .55rem 0; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: .9rem; color: var(--ink); border-radius: 8px;
}
.myp__month:hover:not(:disabled) { background: var(--bg); }
.myp__month--selected { background: var(--navy); color: #fff; }
.myp__month--disabled { opacity: .35; cursor: not-allowed; }
.myp__footer { margin-top: .65rem; text-align: right; }
.myp__clear {
    font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted);
    background: none; border: 0; cursor: pointer; padding: 0;
}
.myp__clear:hover { color: var(--navy); text-decoration: underline; }
.check input { width: auto; }

.actions { margin-top: 2rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    font: inherit;
    font-weight: 700;
    padding: .85rem 1.5rem;
    border: none;
    border-radius: 10px;
    background: var(--navy);
    color: #fff;
    cursor: pointer;
    transition: background .15s, transform .05s;
}

.btn:hover { background: #0a1a40; }
.btn:active { transform: translateY(1px); }

.foot { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 1.25rem; }

/* ── Pantalla de acuerdos ─────────────────────────────────────────────── */
.lead { margin: 0 0 1.25rem; color: var(--muted); font-size: .92rem; }

.doc {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: #fff;
}
.doc--release { border-color: rgba(11, 31, 77, .3); background: rgba(11, 31, 77, .03); }

.doc__head { display: flex; align-items: center; gap: .65rem; }
.doc__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
    border-radius: 10px; background: rgba(11, 31, 77, .08); font-size: 1.1rem;
}
.doc__title { font-weight: 700; color: var(--navy); }

.doc__content {
    margin-top: .85rem;
    max-height: 16rem;
    overflow-y: auto;
    white-space: pre-wrap;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .9rem 1rem;
    background: #f8fafc;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--ink);
}

.doc__details > summary {
    margin-top: .75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .88rem;
    color: var(--navy);
    list-style: none;
}
.doc__details > summary::-webkit-details-marker { display: none; }
.doc__details > summary::before { content: '▸ '; color: var(--red); }
.doc__details[open] > summary::before { content: '▾ '; }

.accept {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-top: 1.5rem;
    padding: .9rem 1rem;
    border-radius: 10px;
    background: #f1f5f9;
    font-size: .88rem;
    line-height: 1.5;
}
.accept input { margin-top: .2rem; width: auto; flex: 0 0 auto; }

.note { text-align: center; color: var(--muted); font-size: .78rem; margin: .9rem 0 0; }

/* RSP-50: checklist en vivo de la política de contraseña (criterios no cumplidos). */
.password-policy {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: .75rem 1rem .75rem 1.25rem;
    font-size: .82rem;
}

.password-policy__title { margin: 0 0 .35rem; font-weight: 600; }

.password-policy__list { margin: 0; padding-left: 1rem; }

.password-policy__list li { margin: .15rem 0; }

/* ── Pad de firma ─────────────────────────────────────────────────────── */
.sigpad {
    position: relative;
    border: 2px dashed var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.sigpad__canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.sigpad__hint {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    color: var(--muted); font-size: .9rem;
}
.btn--ghost {
    width: auto;
    margin-top: .6rem;
    padding: .45rem 1rem;
    font-size: .82rem;
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--line);
}
.btn--ghost:hover { background: #f1f5f9; }

/* ── Pantallas de confirmación final ──────────────────────────────────── */
.card__header--success { text-align: center; }
.card__subtitle { margin: .6rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.success-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; margin: 0 auto .75rem;
    border-radius: 999px;
    background: #1f7a4e; color: #fff;
    font-size: 1.5rem; font-weight: 700;
}
.input-disabled, input:disabled { background: #f1f5f9; color: var(--muted); cursor: not-allowed; }

/* ── Resumen / pago de matrícula ──────────────────────────────────────── */
.summary { width: 100%; border-collapse: collapse; margin: .25rem 0 1.25rem; font-size: .92rem; }
.summary td { padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.summary__amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary__tag {
    display: inline-block; vertical-align: middle; margin-left: .4rem;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem;
}
.summary--discount td { color: #1f7a4e; }
.summary--total td {
    border-bottom: none; border-top: 2px solid var(--line);
    padding-top: .75rem; font-weight: 700; color: var(--navy); font-size: 1.05rem;
}
.pay-error { color: var(--red); font-size: .85rem; text-align: center; margin: .75rem 0 0; min-height: 1rem; }
.pay-notice {
    border: 1px solid #fcd34d; background: #fffbeb; color: #b45309;
    border-radius: 12px; padding: 1rem 1.1rem; font-size: .88rem; margin-top: 1rem;
}
#payment-element { margin-top: 1.25rem; }

/* ── Merch en el checkout (RSP-188) ───────────────────────────────────── */
.merch { margin: 0 0 1.5rem; }
.merch__help { margin: -.4rem 0 .9rem; color: var(--muted); font-size: .86rem; }
.merch__carousel {
    display: flex; gap: .85rem; overflow-x: auto; padding: .25rem .25rem .6rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.merch-card {
    flex: 0 0 160px; scroll-snap-align: start; background: #fff;
    border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column;
}
.merch-card__media { aspect-ratio: 1 / 1; background: #f1f5f9; }
.merch-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.merch-card__placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 8px, #e2e8f0 8px, #e2e8f0 16px); }
.merch-card__body { padding: .6rem .7rem .75rem; display: flex; flex-direction: column; gap: .35rem; }
.merch-card__name { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.merch-card__price { margin: 0; font-size: .88rem; color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.merch-card__open { margin-top: auto; font-size: .82rem; padding: .4rem .6rem; }

.merch-cart { margin-top: 1rem; border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; background: #fff; }
.merch-cart__title { margin: 0 0 .6rem; font-size: .9rem; font-weight: 700; color: var(--navy); }
.merch-cart__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.merch-cart__item { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--ink); }
.merch-cart__item-info { flex: 1; }
.merch-cart__item-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.merch-cart__remove {
    border: none; background: transparent; color: var(--red); font-size: 1.1rem; line-height: 1;
    cursor: pointer; padding: 0 .25rem; border-radius: 6px;
}
.merch-cart__remove:hover { background: #fef2f2; }
.merch-cart__subtotal {
    display: flex; justify-content: space-between; margin-top: .7rem; padding-top: .6rem;
    border-top: 1px solid var(--line); font-weight: 700; color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.merch__error { text-align: left; }

/* Modal de producto */
.merch-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.merch-modal[hidden] { display: none; }
.merch-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 31, 77, .5); }
.merch-modal__dialog {
    position: relative; background: #fff; border-radius: 16px; padding: 1.4rem;
    width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; z-index: 1;
    box-shadow: 0 20px 50px rgba(11, 31, 77, .25);
}
.merch-modal__close {
    position: absolute; top: .7rem; right: .8rem; border: none; background: transparent;
    font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.merch-modal__gallery { display: flex; gap: .5rem; overflow-x: auto; margin-bottom: .9rem; }
.merch-modal__gallery img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.merch-modal__name { margin: 0 0 .2rem; font-size: 1.1rem; color: var(--ink); }
.merch-modal__price { margin: 0 0 1rem; color: var(--navy); font-weight: 700; }
.merch-modal__label { display: block; margin: .6rem 0 .3rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
.merch-modal__select, .merch-modal__qty {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; color: var(--ink); background: #fff;
}
.merch-modal__stock { margin: .4rem 0 0; font-size: .82rem; color: var(--muted); }
.merch-modal__actions { display: flex; gap: .6rem; margin-top: 1.1rem; }
.merch-modal__actions .btn { flex: 1; }