/* Inscripciones — formulario público de reserva de cupo.
   Tema oscuro + brand tokens, mobile-first. El wizard/UX de password se
   hidrata con JS (.is-wizard); sin JS todos los campos quedan visibles. */

.mo-torneo-invierno-reserva {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
    /* El form va directo sobre el fondo oscuro → labels/textos en claro.
       Los inputs (fondo claro) fijan su texto oscuro más abajo. */
    color: var(--mo-torneo-invierno-on-surface);
}

.mo-torneo-invierno-reserva__title {
    color: var(--mo-torneo-invierno-primary);
    border-bottom: 3px solid var(--mo-torneo-invierno-primary-strong);
    padding-bottom: .4rem;
    margin-bottom: 1.5rem;
}

.mo-torneo-invierno-reserva__intro {
    color: var(--mo-torneo-invierno-on-surface-muted);
}
.mo-torneo-invierno-reserva__intro a {
    color: var(--mo-torneo-invierno-surface-link);
}

/* ── Agrupaciones ──────────────────────────────────────────────────────── */
.mo-torneo-invierno-reserva__group {
    border: 1px solid rgba(152, 206, 240, .18);
    background: rgba(152, 206, 240, .04);
    border-radius: var(--mo-torneo-invierno-radius-lg, .75rem);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0 0 1.25rem;
}

.mo-torneo-invierno-reserva__group legend {
    font-weight: 600;
    color: var(--mo-torneo-invierno-accent);
    padding: 0 .5rem;
    letter-spacing: .01em;
}

.mo-torneo-invierno-reserva__field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0 0 1rem;
}

.mo-torneo-invierno-reserva__field:last-child {
    margin-bottom: 0;
}

.mo-torneo-invierno-reserva__field label {
    font-weight: 600;
}

/* ── Controles: nada de estilos del navegador ─────────────────────────── */
.mo-torneo-invierno-reserva__field input[type="text"],
.mo-torneo-invierno-reserva__field input[type="email"],
.mo-torneo-invierno-reserva__field input[type="password"],
.mo-torneo-invierno-reserva__field input[type="tel"],
.mo-torneo-invierno-reserva__field input[type="number"],
.mo-torneo-invierno-reserva__field select,
.mo-torneo-invierno-reserva__field textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid #c9d3e6;
    border-radius: var(--mo-torneo-invierno-radius-md, .5rem);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    /* Inputs con fondo claro → texto oscuro (no heredar el claro del form). */
    background: var(--mo-torneo-invierno-white);
    color: var(--mo-torneo-invierno-contrast);
    transition: border-color var(--mo-torneo-invierno-transition-fast, 150ms ease),
                box-shadow var(--mo-torneo-invierno-transition-fast, 150ms ease);
    -webkit-appearance: none;
    appearance: none;
}

.mo-torneo-invierno-reserva__field input::placeholder,
.mo-torneo-invierno-reserva__field textarea::placeholder {
    color: #8a93a6;
}

.mo-torneo-invierno-reserva__field input:focus,
.mo-torneo-invierno-reserva__field select:focus,
.mo-torneo-invierno-reserva__field textarea:focus {
    outline: none;
    border-color: var(--mo-torneo-invierno-primary);
    box-shadow: 0 0 0 3px rgba(55, 90, 252, .28);
}

.mo-torneo-invierno-reserva__field input:disabled,
.mo-torneo-invierno-reserva__field select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Select: quitar la flecha nativa y dibujar una propia (celeste). */
.mo-torneo-invierno-reserva__field select {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B97C9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    cursor: pointer;
}

.mo-torneo-invierno-reserva__field select option:disabled {
    color: #9aa3b2;
}

.mo-torneo-invierno-reserva__hint {
    font-size: .85rem;
    color: var(--mo-torneo-invierno-on-surface-muted);
}

.mo-torneo-invierno-reserva__field-msg {
    font-size: .85rem;
    color: var(--mo-torneo-invierno-error);
    min-height: 1.1em;
}
.mo-torneo-invierno-reserva__field.has-error input {
    border-color: var(--mo-torneo-invierno-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .22);
}

/* ── Contraseña: input + toggle ojo ───────────────────────────────────── */
.mo-torneo-invierno-reserva__pass {
    position: relative;
    display: block;
}
.mo-torneo-invierno-reserva__pass input {
    padding-right: 2.8rem;
}
.mo-torneo-invierno-reserva__pass-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    opacity: .6;
    border-radius: 0 var(--mo-torneo-invierno-radius-md, .5rem) var(--mo-torneo-invierno-radius-md, .5rem) 0;
    transition: opacity var(--mo-torneo-invierno-transition-fast, 150ms ease);
}
.mo-torneo-invierno-reserva__pass-toggle:hover,
.mo-torneo-invierno-reserva__pass-toggle.is-on {
    opacity: 1;
}
.mo-torneo-invierno-reserva__pass-toggle:focus-visible {
    outline: 2px solid var(--mo-torneo-invierno-primary);
    outline-offset: -2px;
}

/* ── Medidor de fuerza ────────────────────────────────────────────────── */
.mo-torneo-invierno-reserva__meter {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.mo-torneo-invierno-reserva__meter-bar {
    flex: 1;
    height: 6px;
    border-radius: var(--mo-torneo-invierno-radius-full, 9999px);
    background: rgba(152, 206, 240, .2);
    overflow: hidden;
}
.mo-torneo-invierno-reserva__meter-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--mo-torneo-invierno-on-surface-muted);
    transition: width var(--mo-torneo-invierno-transition-normal, 250ms ease),
                background-color var(--mo-torneo-invierno-transition-normal, 250ms ease);
}
.mo-torneo-invierno-reserva__meter-fill[data-level="weak"]   { background: var(--mo-torneo-invierno-error); }
.mo-torneo-invierno-reserva__meter-fill[data-level="medium"] { background: var(--mo-torneo-invierno-warning); }
.mo-torneo-invierno-reserva__meter-fill[data-level="strong"] { background: var(--mo-torneo-invierno-success); }
.mo-torneo-invierno-reserva__meter-label {
    font-size: .8rem;
    font-weight: 600;
    min-width: 3.2em;
    color: var(--mo-torneo-invierno-on-surface-muted);
}

/* ── Wizard: indicador de pasos ───────────────────────────────────────── */
.mo-torneo-invierno-wizard__steps {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    gap: .5rem;
}
/* Sin JS el indicador no tiene sentido (todo visible) → oculto hasta hidratar. */
.mo-torneo-invierno-wizard__steps[aria-hidden="true"] {
    display: none;
}
.mo-torneo-invierno-wizard__dot {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--mo-torneo-invierno-radius-md, .5rem);
    background: rgba(152, 206, 240, .06);
    border: 1px solid rgba(152, 206, 240, .16);
    color: var(--mo-torneo-invierno-on-surface-muted);
    font-size: .9rem;
    transition: color var(--mo-torneo-invierno-transition-fast, 150ms ease),
                border-color var(--mo-torneo-invierno-transition-fast, 150ms ease),
                background-color var(--mo-torneo-invierno-transition-fast, 150ms ease);
}
.mo-torneo-invierno-wizard__dot-num {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(152, 206, 240, .16);
    color: var(--mo-torneo-invierno-on-surface);
    font-weight: 700;
    font-size: .85rem;
}
.mo-torneo-invierno-wizard__dot-label {
    font-weight: 600;
}
.mo-torneo-invierno-wizard__dot.is-active {
    color: var(--mo-torneo-invierno-on-surface);
    border-color: var(--mo-torneo-invierno-primary);
    background: rgba(55, 90, 252, .14);
}
.mo-torneo-invierno-wizard__dot.is-active .mo-torneo-invierno-wizard__dot-num {
    background: var(--mo-torneo-invierno-primary);
    color: var(--mo-torneo-invierno-white);
}
.mo-torneo-invierno-wizard__dot.is-done .mo-torneo-invierno-wizard__dot-num {
    background: var(--mo-torneo-invierno-success);
    color: var(--mo-torneo-invierno-white);
}

/* ── Wizard: pasos ────────────────────────────────────────────────────── */
/* Con JS (.is-wizard) sólo se muestra el paso activo; sin JS todos visibles. */
.mo-torneo-invierno-wizard.is-wizard .mo-torneo-invierno-wizard__step {
    display: none;
}
.mo-torneo-invierno-wizard.is-wizard .mo-torneo-invierno-wizard__step.is-active {
    display: block;
    animation: mo-torneo-invierno-step-in var(--mo-torneo-invierno-transition-normal, 250ms ease);
}
@keyframes mo-torneo-invierno-step-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mo-torneo-invierno-wizard.is-wizard .mo-torneo-invierno-wizard__step.is-active { animation: none; }
}

/* Navegación de pasos (Siguiente/Atrás/Enviar). */
.mo-torneo-invierno-wizard__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}
.mo-torneo-invierno-wizard__nav .mo-torneo-invierno-btn {
    flex: 1 1 auto;
    min-width: 8rem;
    justify-content: center;
}
/* Sin JS los botones de navegación de pasos no hacen nada → ocultos hasta
   hidratar (el submit sí queda visible y funcional). */
.mo-torneo-invierno-wizard__nav [data-step-next],
.mo-torneo-invierno-wizard__nav [data-step-prev] {
    display: none;
}
.mo-torneo-invierno-wizard.is-wizard [data-step-next],
.mo-torneo-invierno-wizard.is-wizard [data-step-prev] {
    display: inline-flex;
}

/* Botón "fantasma" para Atrás (no pisa el primario). */
.mo-torneo-invierno-btn--ghost {
    background: transparent;
    color: var(--mo-torneo-invierno-on-surface);
    border: 1px solid rgba(152, 206, 240, .4);
}
.mo-torneo-invierno-btn--ghost:hover {
    background: rgba(152, 206, 240, .1);
    border-color: var(--mo-torneo-invierno-accent);
}

.mo-torneo-invierno-reserva__submit {
    margin-top: 1.5rem;
}

.mo-torneo-invierno-reserva--ok .mo-torneo-invierno-notice h2 {
    margin-top: 0;
}

/* ── Mobile-first: la mayoría entra desde el teléfono ─────────────────── */
@media (max-width: 480px) {
    .mo-torneo-invierno-reserva {
        padding: .75rem;
    }
    .mo-torneo-invierno-reserva__group {
        padding: .85rem 1rem 1rem;
    }
    /* Indicador compacto: sólo el número visible, el label se oculta. */
    .mo-torneo-invierno-wizard__dot-label {
        display: none;
    }
    .mo-torneo-invierno-wizard__dot {
        justify-content: center;
        padding: .5rem;
    }
    /* Nav apilado y a lo ancho para pulgares. */
    .mo-torneo-invierno-wizard__nav .mo-torneo-invierno-btn {
        flex-basis: 100%;
    }
}


/* ==========================================================================
   Cards por categoría (info pública de /inscripciones/)
   Bloque MUDADO desde assets/css/home.css: las cards dejaron la home y son hoy
   el cuerpo informativo de /inscripciones/, que carga esta hoja. Tema oscuro
   sobre el fondo navy: superficie translúcida + glow celeste. Mobile-first:
   1 col → 2-3 en tablet/desktop vía auto-fill. Clases mo-tdi-insc-* = contrato
   con el agente visual (cc). Con las inscripciones CERRADAS el markup viene sin
   monto ni CTA (lo decide el template, no el CSS).
   ========================================================================== */

/* La sección va a lo ancho de la página, fuera del ancho acotado del form
   (.mo-torneo-invierno-reserva) — antes esto lo daba .home-section de home.css,
   que en esta página no está cargada. */
.mo-tdi-insc-seccion {
	margin: var(--mo-torneo-invierno-space-10, 2.5rem) auto 0;
	color: var(--mo-torneo-invierno-on-surface);
}

.mo-tdi-insc-seccion__header {
	margin-bottom: var(--mo-torneo-invierno-space-6, 1.5rem);
}

.mo-tdi-insc-seccion__title {
	margin: 0;
	font-size: var(--mo-torneo-invierno-text-2xl);
	font-weight: 700;
	color: var(--mo-torneo-invierno-on-surface);
}

.mo-tdi-insc-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Mobile-first: 1 columna; a partir de ~260px de ancho de card el
	   auto-fill agrega 2-3 columnas en tablet/desktop. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--mo-torneo-invierno-space-6);
}

.mo-tdi-insc-card {
	display: flex;
	flex-direction: column;
	gap: var(--mo-torneo-invierno-space-3);
	padding: var(--mo-torneo-invierno-space-6);
	/* Superficie translúcida sobre el navy + borde celeste tenue. */
	background: rgba(152, 206, 240, 0.06);
	border: 1px solid rgba(152, 206, 240, 0.18);
	border-radius: var(--mo-torneo-invierno-radius-lg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform var(--mo-torneo-invierno-transition-fast),
	            border-color var(--mo-torneo-invierno-transition-fast),
	            box-shadow var(--mo-torneo-invierno-transition-fast);
}

.mo-tdi-insc-card:hover {
	transform: translateY(-2px);
	border-color: rgba(152, 206, 240, 0.45);
	/* Glow celeste al hacer hover. */
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
	            0 0 0 1px rgba(152, 206, 240, 0.25),
	            0 0 24px rgba(55, 90, 252, 0.20);
}

.mo-tdi-insc-card__nombre {
	margin: 0;
	font-size: var(--mo-torneo-invierno-text-xl);
	font-weight: 700;
	line-height: 1.25;
	color: var(--mo-torneo-invierno-on-surface);
}

/* Badge de rama (Masculino / Femenino / Mixto): chip bajo el nombre.
   Dorado de la paleta para que resalte sobre el fondo navy. Masculino/Mixto =
   chip dorado sólido con texto oscuro; Femenino = variante dorada suave. */
.mo-tdi-insc-card__rama {
	display: inline-block;
	align-self: flex-start;
	padding: var(--mo-torneo-invierno-space-1) var(--mo-torneo-invierno-space-3);
	border-radius: var(--mo-torneo-invierno-radius-md);
	font-size: var(--mo-torneo-invierno-text-sm);
	font-weight: 700;
	line-height: 1.2;
	color: var(--mo-torneo-invierno-contrast);
	background: var(--mo-torneo-invierno-gold);
	border: 1px solid var(--mo-torneo-invierno-gold);
}

.mo-tdi-insc-card__rama--femenina {
	color: var(--mo-torneo-invierno-gold);
	background: rgba(242, 183, 5, 0.14);
	border-color: var(--mo-torneo-invierno-gold);
}

/* Monto: el dato destacado de la card (sólo con inscripciones abiertas). */
.mo-tdi-insc-card__monto {
	margin: 0;
	font-size: var(--mo-torneo-invierno-text-2xl);
	font-weight: 700;
	color: var(--mo-torneo-invierno-accent);
}

.mo-tdi-insc-card__cupo {
	margin: 0;
	font-size: var(--mo-torneo-invierno-text-sm);
	font-weight: 600;
	color: var(--mo-torneo-invierno-on-surface-muted);
}

/* Empuja el CTA al pie → cards de igual alto con el botón alineado. */
.mo-tdi-insc-card__cta-wrap {
	margin-top: auto;
	padding-top: var(--mo-torneo-invierno-space-2);
}

.mo-tdi-insc-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--mo-torneo-invierno-space-3) var(--mo-torneo-invierno-space-5);
	font-size: var(--mo-torneo-invierno-text-base);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--mo-torneo-invierno-primary);
	border-radius: var(--mo-torneo-invierno-radius-md);
	background-color: var(--mo-torneo-invierno-primary);
	color: var(--mo-torneo-invierno-white);
	cursor: pointer;
	transition: background-color var(--mo-torneo-invierno-transition-fast),
	            border-color var(--mo-torneo-invierno-transition-fast),
	            box-shadow var(--mo-torneo-invierno-transition-fast);
}

.mo-tdi-insc-card__cta:hover {
	background-color: var(--mo-torneo-invierno-primary-strong);
	border-color: var(--mo-torneo-invierno-primary-strong);
	box-shadow: 0 0 20px rgba(55, 90, 252, 0.35);
}

.mo-tdi-insc-card__cta:focus-visible {
	outline: 2px solid var(--mo-torneo-invierno-accent);
	outline-offset: 2px;
}

/* Estado agotado: card atenuada, "Agotado" resaltado en cálido. */
.mo-tdi-insc-card--agotado {
	opacity: 0.72;
}

.mo-tdi-insc-card--agotado:hover {
	transform: none;
	border-color: rgba(152, 206, 240, 0.18);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.mo-tdi-insc-card--agotado .mo-tdi-insc-card__cupo {
	color: var(--mo-torneo-invierno-warning);
}

@media (max-width: 768px) {
	.mo-tdi-insc-cards {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: var(--mo-torneo-invierno-space-4);
	}
}

@media (max-width: 480px) {
	.mo-tdi-insc-cards {
		grid-template-columns: 1fr;
	}
}