/* Inscripción: lo común a todos los pasos (individual, delegación y
   preinscripción) — fondo, contenedor, encabezado con el indicador de
   pasos y el ajuste de .modality-page. */

html:has(.delegacion-page),
body:has(.delegacion-page) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body:has(.delegacion-page) > #header {
    display: none !important;
}

body:has(.delegacion-page) > #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

body:has(.inscripcion-page-shell) {
    background: #dfe5eb;
}

.inscripcion-page-shell {
    min-height: calc(100vh - 120px);
    background: #dfe5eb;
    width: calc(100% - 40px);
    max-width: 1180px;
    margin: 0 auto;
}

.modality-page {
    padding: 20px 0 40px;
    background: #dfe5eb;
}

/* .modality-page centra su contenido verticalmente (ver publico/modalidad.css),
   pensado para "Elige tu modalidad" (una sola tarjeta corta). En los pasos
   del flujo de inscripción (que además ya tienen su propio encabezado con
   el indicador de pasos arriba) eso empuja el contenido bien abajo cuando
   la tarjeta es corta (p. ej. el paso de subir el voucher) — aquí se
   desactiva ese centrado para que el contenido empiece justo debajo del
   encabezado, sin dejar un hueco grande arriba.  */
.inscripcion-page-shell .modality-page {
    min-height: 0;
    align-items: flex-start;
    justify-content: flex-start;
}

/* El contenido de cada paso empieza justo debajo de los pasos: el espacio
   lo da solo el margen inferior de .delegacion-progress. */
.inscripcion-page-shell .modality-page,
.inscripcion-page-shell .modality-page .modality-dialog {
    padding-top: 0;
}

.modality-page .modality-dialog {
    width: min(100%, 1200px);
    margin: 0 auto;
    background: transparent;
    border: 1px solid rgba(28, 67, 110, 0.08);
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(18, 36, 63, 0.09);
    padding: 26px 28px 30px;
    transform: none;
}

/* Flujo de inscripción por delegación */
.delegacion-page {
    min-height: 100vh;
    margin-top: 0;
    border-top: 0;
    padding-bottom: 42px;
    background: #f1f6fc;
    color: #101c37;
}

.delegacion-brand-shell {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    background: transparent;
}

.delegacion-brand-shell .ola2000-topbar {
    min-height: 128px;
}

.delegacion-hero {
    width: min(100% - 110px, 1060px);
    margin: 0 auto;
    padding: 24px 20px 18px;
    border-bottom: 4px solid #2375ed;
    background: #101a34;
    color: #fff;
    text-align: center;
}
.delegacion-hero-badge { display: inline-block; padding: 5px 15px; border-radius: 999px; background: #12b8df; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.delegacion-hero h1 { margin: 10px 0 3px; color: #d7fa55; font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -.04em; }
.delegacion-hero p { margin: 0; color: #fff; font-size: .72rem; }
.delegacion-hero-rule { display: block; width: 36px; height: 3px; margin: 12px auto 0; background: #2375ed; }

/* Flujo individual: el banner comparte partial con el de delegación, pero
   acá el contenido de abajo es más ancho (.inscripcion-page-shell, hasta
   1180px) que la tarjeta de delegación (1060px) — que el banner llegue
   hasta donde terminan los dos cuadros de registro. Solo desde el ancho
   donde ya no aplica el angosto de .delegacion-hero para celular (ver
   media query más abajo), para no pisarlo en pantallas chicas. */
@media (min-width: 761px) {
    body:has(.inscripcion-page-shell) .delegacion-hero {
        width: calc(100% - 40px);
        max-width: 1180px;
    }
}
/* Pasos del proceso: círculos unidos por una línea que se pinta al avanzar.
   Completado = azul con ✓, actual = borde azul con halo, pendiente = gris. */
.delegacion-progress { width: min(100% - 160px, 600px); margin: 22px auto 30px; display: grid; grid-template-columns: repeat(5, 1fr); }
.delegacion-step { position: relative; display: grid; justify-items: center; gap: 8px; color: #9aa9bd; }
.delegacion-step::before { content: ""; position: absolute; top: 17px; left: calc(50% + 22px); width: calc(100% - 44px); height: 3px; border-radius: 3px; background: #dfe7f1; }
.delegacion-step.is-complete::before { background: linear-gradient(90deg, #2375ed, #4f9bff); }
.delegacion-step:last-child::before { display: none; }
.delegacion-step span { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #d5dfeb; border-radius: 50%; background: #fff; color: #9aa9bd; font-size: .8rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.delegacion-step small { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-align: center; }
.delegacion-step.is-active span { border-color: #2375ed; color: #2375ed; box-shadow: 0 0 0 6px rgba(35, 117, 237, .15); transform: scale(1.08); }
.delegacion-step.is-active small { color: #2375ed; }
.delegacion-step.is-complete span { border-color: transparent; background: linear-gradient(135deg, #2375ed, #4f9bff); color: transparent; box-shadow: 0 6px 14px rgba(35, 117, 237, .28); }
.delegacion-step.is-complete span::after { content: "✓"; position: absolute; color: #fff; font-size: .95rem; }
.delegacion-step.is-complete small { color: #17243f; }

@media (max-width: 820px) {
    .modality-page .modality-dialog {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 600px) {
    body:has(.inscripcion-page-shell) {
        overflow-x: hidden;
    }

    /* En celular, menos espacio bajo los pasos. */
    .delegacion-progress {
        margin-bottom: 16px;
    }

}
@media (max-width: 760px) { .delegacion-brand-shell, .delegacion-hero { width: calc(100% - 24px); } .delegacion-progress { width: calc(100% - 24px); } .delegacion-step small { font-size: .5rem; letter-spacing: .02em; } }