@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap");

html:has(body.preinscripcion) {
    background: #ECEEF1;
}

body.preinscripcion {
    --udeo-rojo: #c1272d;
    --udeo-rojo-hover: #9c1c24;
    --udeo-morado: #312654;
    --udeo-dorado: #f0b429;
    --udeo-verde: #388244;
    --udeo-verde-foco: rgba(56, 130, 68, 0.25);
    --udeo-texto: #241e2c;
    --udeo-muted: #5c5566;
    --udeo-linea: #e7e1e4;
    --preinscripcion-luz-x: 40%;
    position: relative;
    z-index: 0;
    margin: 0;
    min-height: 100vh;
    background-color: #ECEEF1;
    background-image: radial-gradient(
        ellipse at var(--preinscripcion-luz-x) 35%,
        #FFFFFF 0%,
        #F6F7F8 36%,
        #ECEEF1 70%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--udeo-texto);
    font-family: Roboto, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

body.preinscripcion a:focus-visible,
body.preinscripcion button:focus-visible {
    outline: 3px solid var(--udeo-dorado);
    outline-offset: 2px;
}

.preinscripcion-skip {
    position: absolute;
    left: 0.75rem;
    top: -3.5rem;
    z-index: 20;
    padding: 0.5rem 0.75rem;
    background: #fff;
    color: var(--udeo-morado);
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
}

.preinscripcion-skip:focus {
    top: 0.75rem;
}

.preinscripcion-top {
    background: var(--udeo-rojo);
    border-bottom: 4px solid var(--udeo-dorado);
    padding: 0.85rem 1rem;
    text-align: center;
}

.preinscripcion-logo {
    display: inline-block;
    width: auto;
    height: 76px;
    max-width: min(100%, 320px);
    object-fit: contain;
}

.preinscripcion-pagina {
    width: min(1200px, calc(100% - 1.5rem));
    margin: 1.5rem auto 2.5rem;
}

.preinscripcion-pagina,
.preinscripcion-layout,
.preinscripcion-secciones,
.preinscripcion-seccion,
.preinscripcion-galeria,
.preinscripcion-galeria-fija,
.preinscripcion-galeria-marco,
.preinscripcion-acciones,
.field,
body.preinscripcion .form-floating {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.preinscripcion-titulo {
    margin: 0 0 8px;
    color: var(--udeo-texto);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
}

.preinscripcion-titulo strong {
    color: var(--udeo-rojo);
    font-weight: 600;
}

.preinscripcion-intro {
    margin: 0 0 16px;
    color: var(--udeo-texto);
    font-size: 15px;
    font-weight: 400;
}

.preinscripcion-obligatorio {
    color: var(--udeo-rojo);
    font-weight: 600;
}

.preinscripcion-secciones {
    container-type: inline-size;
    container-name: formulario;
}

.preinscripcion-seccion {
    margin: 0;
}

.preinscripcion-seccion + .preinscripcion-seccion {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--udeo-linea);
}

.preinscripcion-seccion h2 {
    margin: 0 0 8px;
    color: var(--udeo-morado);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
}

.preinscripcion-seccion h2::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: 6px;
    background: var(--udeo-dorado);
}

.preinscripcion-seccion-texto,
.preinscripcion-nota {
    margin: 0 0 12px;
    color: var(--udeo-texto);
    font-size: 15px;
    font-weight: 400;
}

.preinscripcion-seccion > .row {
    margin-bottom: -14px;
}

.campo,
.campo-amplio {
    margin-bottom: 14px;
}

.field {
    margin-bottom: 0;
}

.field-help {
    margin: 4px 0 0;
    color: var(--udeo-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.field-error {
    display: block;
    margin: 4px 0 0;
    color: var(--udeo-rojo);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.field-error:empty {
    display: none;
}

.sede-fija-nota {
    display: none;
}

.field:has(select[data-sede-fija]:not([data-sede-fija=""])) .sede-fija-nota {
    display: block;
}

body.preinscripcion .form-floating > .form-control,
body.preinscripcion .form-floating > .form-select {
    height: 54px;
    min-height: 54px;
    padding: 16px 12px;
    border: 1px solid #d5ced2;
    border-radius: 0.5rem;
    background: #fff;
    color: var(--udeo-texto);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    box-shadow: none;
}

body.preinscripcion .form-floating > .form-control:not(:placeholder-shown),
body.preinscripcion .form-floating > .form-control:focus,
body.preinscripcion .form-floating > .form-control:-webkit-autofill,
body.preinscripcion .form-floating > .form-select,
body.preinscripcion .form-floating > input[type="date"].form-control {
    padding-top: 24px;
    padding-bottom: 4px;
}

body.preinscripcion .form-floating > label {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 0.75rem;
    border: 0;
    color: var(--udeo-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    top: 0;
    transform: none;
    opacity: 1;
    pointer-events: none;
}

body.preinscripcion .form-floating > .form-control:focus ~ label,
body.preinscripcion .form-floating > .form-control:not(:placeholder-shown) ~ label,
body.preinscripcion .form-floating > .form-control:-webkit-autofill ~ label,
body.preinscripcion .form-floating > .form-select ~ label,
body.preinscripcion .form-floating > input[type="date"].form-control ~ label {
    align-items: flex-start;
    height: auto;
    padding-top: 6px;
    color: var(--udeo-muted);
    font-size: 13px;
    transform: none;
    opacity: 1;
}

body.preinscripcion .form-floating > .form-control:focus,
body.preinscripcion .form-floating > .form-select:focus {
    border-color: var(--udeo-verde);
    box-shadow: 0 0 0 0.2rem var(--udeo-verde-foco);
}

body.preinscripcion .form-floating > .form-control.control-invalid,
body.preinscripcion .form-floating > .form-select.control-invalid,
body.preinscripcion .form-floating > .form-control.control-invalid:focus,
body.preinscripcion .form-floating > .form-select.control-invalid:focus {
    border-color: var(--udeo-rojo) !important;
    box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.2) !important;
}

body.preinscripcion .form-floating > .form-control::placeholder {
    color: transparent;
}

.preinscripcion-galeria {
    display: none;
}

.preinscripcion-galeria-fija {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.preinscripcion-galeria-marco {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.preinscripcion-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 400ms ease;
}

.preinscripcion-foto.is-visible {
    opacity: 1;
}

.preinscripcion-galeria-controles {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.35rem 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.preinscripcion-galeria-flecha,
.preinscripcion-galeria-punto,
.preinscripcion-galeria-pausa {
    border: 0;
    background: transparent;
    color: var(--udeo-morado);
}

.preinscripcion-galeria-flecha {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 1;
}

.preinscripcion-galeria-puntos {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.preinscripcion-galeria-punto {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border-radius: 50%;
    background: #c8c0c4;
}

.preinscripcion-galeria-punto[aria-current="true"] {
    background: var(--udeo-rojo);
}

.preinscripcion-galeria-pausa {
    grid-column: 1 / -1;
    justify-self: center;
    font-size: 12px;
    color: var(--udeo-muted);
}

.preinscripcion-galeria-pausa:hover,
.preinscripcion-galeria-pausa:focus-visible {
    color: var(--udeo-morado);
}

.preinscripcion-galeria-contador {
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
    color: var(--udeo-muted);
    font-size: 12px;
}

.preinscripcion-acciones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--udeo-linea);
}

.preinscripcion-revision {
    margin: 0;
    font-size: 15px;
}

body.preinscripcion #formulario .btn-success {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 0.5rem;
    background: var(--udeo-rojo);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

body.preinscripcion #formulario .btn-success:hover,
body.preinscripcion #formulario .btn-success:focus {
    background: var(--udeo-rojo-hover);
    color: #fff;
}

body.preinscripcion #formulario .btn-success:disabled {
    background: var(--udeo-rojo);
    color: #fff;
    opacity: 0.65;
    cursor: not-allowed;
}

.preinscripcion-footer {
    padding: 0.75rem 1rem;
    background: var(--udeo-morado);
    border-top: 4px solid var(--udeo-dorado);
    color: #fff;
    text-align: center;
}

.preinscripcion-lema {
    margin: 0 0 0.15rem;
    color: #fff;
    font-weight: 600;
}

.preinscripcion-footer p,
.preinscripcion-footer strong,
.preinscripcion-footer a {
    color: #fff;
}

.preinscripcion-footer p {
    margin: 0;
    font-size: 15px;
}

.preinscripcion-footer a {
    font-weight: 600;
    text-decoration: underline;
}

.preinscripcion-footer a:hover,
.preinscripcion-footer a:focus-visible {
    color: var(--udeo-dorado);
}

@container formulario (min-width: 540px) {
    .campo,
    .campo-amplio {
        width: 50%;
    }
}

@container formulario (min-width: 640px) {
    .campo {
        width: 33.333%;
    }

    .campo-amplio {
        width: 50%;
    }

    body.preinscripcion .form-floating > .form-control#idDPI:focus ~ label,
    body.preinscripcion .form-floating > .form-control#idDPI:not(:placeholder-shown) ~ label,
    body.preinscripcion .form-floating > .form-control#idDPI:-webkit-autofill ~ label,
    body.preinscripcion .form-floating > label[for="idDPI"] {
        font-size: 12px;
    }

    body.preinscripcion .form-floating > .form-control#intitucion:focus ~ label,
    body.preinscripcion .form-floating > .form-control#intitucion:not(:placeholder-shown) ~ label,
    body.preinscripcion .form-floating > .form-control#intitucion:-webkit-autofill ~ label {
        font-size: 13px;
    }
}

@container formulario (min-width: 800px) {
    body.preinscripcion .form-floating > .form-control#idDPI:focus ~ label,
    body.preinscripcion .form-floating > .form-control#idDPI:not(:placeholder-shown) ~ label,
    body.preinscripcion .form-floating > .form-control#idDPI:-webkit-autofill ~ label,
    body.preinscripcion .form-floating > label[for="idDPI"] {
        font-size: 13px;
    }

    body.preinscripcion .form-floating > .form-control#intitucion:focus ~ label,
    body.preinscripcion .form-floating > .form-control#intitucion:not(:placeholder-shown) ~ label,
    body.preinscripcion .form-floating > .form-control#intitucion:-webkit-autofill ~ label {
        font-size: 15px;
    }
}

@media (min-width: 768px) {
    .preinscripcion-pagina {
        width: min(1200px, calc(100% - 3rem));
    }

    .preinscripcion-acciones {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    body.preinscripcion #formulario .btn-success {
        width: auto;
        min-width: 15rem;
    }
}

@media (min-width: 1100px) {
    .preinscripcion-layout {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        column-gap: 3rem;
        align-items: start;
    }

    .preinscripcion-secciones {
        grid-column: 1;
        grid-row: 1;
    }

    .preinscripcion-galeria {
        display: block;
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        min-height: 0;
    }

    .preinscripcion-galeria-fija {
        position: sticky;
        top: 7rem;
        height: calc(100svh - 14rem);
        max-height: calc(100svh - 2rem);
    }

    .preinscripcion-acciones {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 767.98px) {
    body.preinscripcion {
        --preinscripcion-luz-x: 50%;
    }

    body.preinscripcion .form-floating > .form-control,
    body.preinscripcion .form-floating > .form-select,
    body.preinscripcion .form-floating > label {
        font-size: 16px;
    }

    body.preinscripcion .form-floating > .form-control:focus ~ label,
    body.preinscripcion .form-floating > .form-control:not(:placeholder-shown) ~ label,
    body.preinscripcion .form-floating > .form-control:-webkit-autofill ~ label,
    body.preinscripcion .form-floating > .form-select ~ label,
    body.preinscripcion .form-floating > input[type="date"].form-control ~ label {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preinscripcion-foto {
        transition: none;
    }
}

.preinscripcion-resultado {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--udeo-linea);
    border-radius: 0.75rem;
    color: var(--udeo-texto);
}

.preinscripcion-resultado:focus {
    outline: 3px solid var(--udeo-dorado);
    outline-offset: 2px;
}

.preinscripcion-resultado-titulo {
    margin: 0 0 0.5rem;
    color: var(--udeo-morado);
    font-size: 1.05rem;
    font-weight: 600;
}

.preinscripcion-resultado-codigo {
    margin: 0 0 0.75rem;
}

.preinscripcion-resultado-codigo strong,
body.preinscripcion .preinscripcion-alerta-codigo strong {
    color: var(--udeo-morado);
    font-weight: 600;
}

.preinscripcion-resultado p:last-of-type {
    margin-bottom: 0.75rem;
}

.preinscripcion-resultado-pdf {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    background: var(--udeo-rojo);
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.preinscripcion-resultado-pdf:hover,
.preinscripcion-resultado-pdf:focus-visible {
    background: var(--udeo-rojo-hover);
    color: #fff;
}

body.preinscripcion .swal2-popup {
    background: #fff;
    border-radius: 0.75rem;
    color: var(--udeo-texto);
    font-family: Roboto, "Segoe UI", sans-serif;
}

body.preinscripcion .swal2-title {
    color: var(--udeo-morado);
    font-family: inherit;
    font-weight: 600;
}

body.preinscripcion .swal2-html-container {
    color: var(--udeo-texto);
    font-family: inherit;
}

body.preinscripcion .swal2-styled.swal2-confirm {
    border-radius: 0.5rem;
    background-color: var(--udeo-rojo) !important;
    font-family: inherit;
    font-weight: 600;
}

body.preinscripcion .swal2-styled.swal2-confirm:hover,
body.preinscripcion .swal2-styled.swal2-confirm:focus {
    background-color: var(--udeo-rojo-hover) !important;
}

body.preinscripcion .swal2-styled.swal2-cancel,
body.preinscripcion .swal2-styled.swal2-deny {
    border-radius: 0.5rem;
    font-family: inherit;
}