/*
|--------------------------------------------------------------------------
| Formulario de registro en tres pasos
|--------------------------------------------------------------------------
|
| Lo incluyen las dos landings, las plantillas de campana y la vista de
| evento, asi que el enlace vive en el propio partial: asi ninguna vista
| puede quedarse sin estos estilos por olvido.
*/

    .contenedor_principal {
        overflow: hidden;
        overflow-x: hidden;
    }

    /* Opción 3: Estilo Bootstrap nativo (más simple) */
    .form-select {
        display: block;
        width: 100%;
    }

    .form-select.is-invalid {
        border-color: #dc3545;
    }

    .form-select.is-invalid~.invalid-feedback {
        display: block;
    }


    .container-input {
        width: -webkit-fill-available;
    }

    .select-otro {
        display: inline-flex;
    }

    /* ---- Campos que abre el perfil ----------------------------------- */

    /* Un filete y una sangría marcan que estos campos cuelgan de la respuesta
       anterior, en vez de parecer preguntas sueltas que brotaron solas. */
    .campo-dependiente {
        border-left: 2px solid rgba(3, 84, 126, .22);
        padding-left: 12px;
        margin-left: 2px;
    }

    .campo-entra {
        animation: campoEntra .32s cubic-bezier(.22, .68, .36, 1) both;
    }

    @keyframes campoEntra {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* El campo recién enfocado se delinea para que se vea a dónde fue el
       cursor cuando aparecen tres de golpe. */
    .campo-dependiente .form-control:focus,
    .campo-dependiente .form-select:focus {
        border-color: #03547e;
        box-shadow: 0 0 0 .18rem rgba(3, 84, 126, .14);
    }

    @media (prefers-reduced-motion: reduce) {
        .campo-entra {
            animation: none;
        }
    }

    .form-container img.img-fluid {
        width: 34px !important;
        height: 34px !important;
        /* top: 50%;
    left: 10px; */
        /* transform: translateY(-50%); */
        margin-right: 15px;
    }

    /* ===================================================================
       Iconos dentro del campo
       ===================================================================
       Los iconos son de trazo oscuro y el formulario va directo sobre el
       degradado de la sede -azul en CDMX, turquesa en GDL-, así que a la
       intemperie se pierden. Puestos sobre el fondo blanco del campo se
       leen igual en las dos ediciones y de paso recuperan el ancho que
       ocupaban a la izquierda.
       =================================================================== */

    .select-otro {
        width: 100%;
    }

    /* La etiqueta flotante es `position: absolute`, y esta es la caja contra
       la que se posiciona. Tiene que estar aqui: la landing carga Bootstrap 4,
       que no conoce `.form-floating`, asi que nadie mas le da `position` al
       contenedor. */
    .container-input {
        position: relative;
        width: 100%;
        min-width: 0;
    }

    /* El icono se dibuja dentro del campo. Se centra contra los 45px del
       control y no contra todo el contenedor, porque debajo del control
       cuelga el aviso de error y correrlo movería el icono. */
    .container-input > .mt-2 {
        position: absolute;
        left: 14px;
        top: 22.5px;
        transform: translateY(-50%);
        margin: 0 !important;
        line-height: 0;
        pointer-events: none;
        z-index: 3;
    }

    /* max-width es lo que importa aqui: `.img-fluid` trae `max-width: 100%`,
       que encogeria el icono. */
    .container-input > .mt-2 img {
        display: block;
        margin: 0 !important;
        width: 24px !important;
        height: 24px !important;
        max-width: none !important;
        opacity: .7;
    }

    .form-floating .form-control {
        padding: 22px 16px 5px 10px;
    }

    .form-floating .form-select {
        padding: 18px 16px 5px 6px;
    }

    .form-floating>.form-select:not(.has-value):not(:focus)~label {
        opacity: 1 !important;
        transform: translateX(0) translateY(0) scale(1) !important;
    }

    .form-floating>.form-control:focus~label,
    .form-floating>.form-control:not(:placeholder-shown)~label,
    .form-floating>.form-control.has-value~label,
    .form-floating>.form-select:focus~label,
    .form-floating>.form-select.has-value~label {
        opacity: 0.65;
        top: 2px;
        left: 70px;
        font-size: 0.75rem;
        color: #03547e;
    }

    .form-floating>label {
        top: 13px;
        left: 70px;
        position: absolute;
        transition: all 0.2s ease;
        color: #6c757d;
        pointer-events: none;
    }

    .form-floating>label span {
        color: #dc3545;
    }

    /* El hueco del icono: ocupa de 14px a 38px, y el texto arranca en 50px. */
    .form-floating .form-control,
    .form-floating .form-select {
        padding-left: 50px !important;
    }

    /* `.has-value` acompana a `:placeholder-shown` porque cuando el valor se
       pone por codigo -al volver del cambio de idioma- el navegador no
       recalcula ese pseudo-selector en el hermano, y la etiqueta se quedaba
       encima del texto. */
    .form-floating > label,
    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating > .form-control.has-value ~ label,
    .form-floating > .form-select:focus ~ label,
    .form-floating > .form-select.has-value ~ label {
        left: 50px;
    }

    .container-input > .form-control.is-invalid,
    .container-input > .form-select.is-invalid {
        border-color: #c0392b;
    }

    /* ===================================================================
       Registro en tres pasos
       ===================================================================
       Son los mismos campos de siempre: lo que cambia es que se muestran
       por tramos y que hay una barra que dice cuánto falta. Todos siguen
       en el DOM, así que el formulario envía igual que antes.
       =================================================================== */

    .wizard-paso[hidden],
    .wizard-legal[hidden],
    .div-registrarme[hidden],
    .wizard-btn[hidden] {
        display: none !important;
    }

    .wizard-paso {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        animation: wizardEntra .3s ease both;
    }

    @keyframes wizardEntra {
        from { opacity: 0; transform: translateX(10px); }
        to { opacity: 1; transform: translateX(0); }
    }

    /* ---- Barra de avance ---- */

    .wizard-barra {
        display: flex;
        gap: 10px;
        width: 100%;
        margin-bottom: 22px;
        padding-inline: 15px;
    }

    .wizard-paso-marca {
        flex: 1;
        min-width: 0;
        display: grid;
        gap: 7px;
    }

    .wizard-paso-marca i {
        display: block;
        height: 4px;
        border-radius: 99rem;
        background: rgba(255, 255, 255, .35);
        transition: background .3s ease;
    }

    /* Cada rótulo va sobre su propia pastilla porque la barra se apoya en la
       zona media del degradado, donde el blanco sólo rinde 5.37:1 en CDMX y
       3.76:1 en GDL. Sobre el velo oscuro el blanco sube a 7.99:1 y 6.50:1
       respectivamente, igual en las dos sedes. */
    .wizard-paso-marca span {
        justify-self: start;
        max-width: 100%;
        padding: 3px 10px;
        border-radius: 99rem;
        background: rgba(3, 52, 74, .45);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .03em;
        transition: background .3s ease, color .3s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* El filete del paso en curso y de los ya cubiertos va en blanco sólido
       contra el velo del resto, que es lo que marca el avance. */
    .wizard-paso-marca.es-activo i,
    .wizard-paso-marca.es-hecho i {
        background: #fff;
    }

    /* El paso en curso invierte la pastilla: fondo blanco y rótulo en el
       acento de la edición, que cada hoja de estilos define por su cuenta
       (azul en CDMX, turquesa en GDL). Así destaca sin recurrir a un color
       que sólo funcione en una de las dos. */
    .wizard-paso-marca.es-activo span,
    .wizard-paso-marca.es-hecho span {
        background: #fff;
        color: var(--acento-edicion, #03547e);
    }

    /* ---- Botones de avance ---- */

    .wizard-acciones {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-top: 6px;
        padding-inline: 15px;
    }

    .wizard-btn {
        height: 43px;
        padding-inline: 26px;
        border-radius: 99rem;
        border: 2px solid #fff;
        background: transparent;
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        cursor: pointer;
        transition: background .18s ease, color .18s ease;
    }

    .wizard-btn.es-siguiente {
        flex: 1;
        background: #fff;
        color: #03547e;
    }

    .wizard-btn:hover {
        background: rgba(255, 255, 255, .88);
        color: #03547e;
    }

    .wizard-acciones .div-registrarme {
        flex: 1;
        margin: 0;
    }

    /* ---- Aviso de "ya te conocemos" ----
       Va dentro del formulario y no en una ventana emergente: la persona
       necesita leer que sus datos se van a ACTUALIZAR mientras los revisa.

       El fondo es un gris claro y no el degradado de la sede porque el aviso
       cae justo sobre ese degradado, que recorre de un tono medio a uno
       claro: ahi ningun color de texto aguanta todo el recorrido. Sobre este
       gris, el acento de cada edicion da 7.31:1 en CDMX y 5.74:1 en GDL.

       El gris tambien lo separa de los campos, que son blancos; por eso el
       fondo es un punto mas claro que el borde, para que el contorno se siga
       viendo.

       La identidad entra por la insignia y el titulo, que van en el acento de
       la sede. El contorno se queda en gris: un filete lateral de color es un
       recurso de plantilla, y aqui competia con la insignia en vez de
       acompanarla. */
    .reconocido {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: calc(100% - 30px);
        margin: 0 15px 16px;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid #dfe5ea;
        background: #eef3f7;
        box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .45);
        animation: wizardEntra .3s ease both;
    }

    /* La insignia: el dibujo va en el acento de la sede y el circulo es ese
       mismo color rebajado. `currentColor` es lo que permite que el SVG y el
       fondo salgan del mismo tono sin repetirlo. */
    .reconocido-marca {
        position: relative;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        color: var(--acento-edicion, #03547e);
    }

    .reconocido-marca::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 50%;
        background: currentColor;
        opacity: .12;
    }

    .reconocido-marca svg {
        position: relative;
        width: 21px;
        height: 21px;
    }

    .reconocido-texto {
        flex: 1;
        min-width: 0;
    }

    .reconocido-titulo {
        margin: 2px 0 3px;
        color: var(--acento-edicion, #03547e);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
    }

    .reconocido-cuerpo {
        margin: 0;
        color: #44515c;
        font-size: 14px;
        line-height: 1.5;
    }


    /* El campo que no pasó la revisión del paso */
    .form-control.wizard-falta,
    .form-select.wizard-falta {
        border-color: #c0392b;
        box-shadow: 0 0 0 .18rem rgba(192, 57, 43, .16);
    }

    /* Los avisos de error se dibujan sobre el degradado de la edición, que
       recorre de un tono medio a uno claro. Ahí ningún color de texto plano
       alcanza el 4.5:1 que pide AA en todo el recorrido: el rojo de Bootstrap
       se queda en 1.06:1 sobre CDMX y en 1.33:1 sobre GDL. La pastilla le da
       al aviso una superficie propia y constante, de modo que el mismo rojo
       se lee igual en las dos sedes (6.5:1 sobre blanco). El filete lateral
       conserva el rojo vivo como señal, sin encargarle a él la lectura. */
    #formregister .invalid-feedback {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        margin-top: 7px;
        padding: 5px 11px 5px 31px;
        border-radius: 7px;
        border: 1px solid #e0a9a2;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23c0392b'/%3E%3Crect x='7.1' y='3.7' width='1.8' height='5.3' rx='.9' fill='%23fff'/%3E%3Ccircle cx='8' cy='11.7' r='1.05' fill='%23fff'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 9px center;
        background-size: 15px 15px;
        color: #a52a1f;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        box-shadow: 0 1px 4px rgba(2, 40, 60, .22);
    }

    /* El aviso de obligatorios y el de términos van sobre el degradado, que
       recorre de un tono medio a uno claro: ningún color de texto se sostiene
       en todo ese recorrido. El velo les da un fondo constante sin volverlos
       otra tarjeta que compita con los campos, y deja ver el degradado a
       través. Medido en el último paso: 5.97:1 en CDMX y 4.88:1 en GDL. */
    .wizard-legal {
        margin-top: 12px;
        padding: 8px 14px;
        border-radius: 10px;
        background: rgba(2, 45, 66, .22);
    }

    .wizard-legal .obligatorio,
    .wizard-legal .clic-tyc {
        margin-bottom: 0;
        color: #fff;
        font-size: 13.5px;
    }

    .wizard-legal .obligatorio + .clic-tyc {
        margin-top: 3px;
    }

    /* El asterisco viene con `style="color:red"` en el propio texto traducido,
       y ese rojo sobre el velo se queda en 1.4:1. Va en blanco y no en un rojo
       claro porque sobre el turquesa de GDL ningún tono que siga leyéndose
       como rojo alcanza el 4.5:1; el negrita lo separa del resto de la frase.
       El rojo sigue estando donde hace falta: en los asteriscos de cada
       etiqueta, que van sobre el blanco del campo. El `!important` es lo único
       que gana sobre un estilo en línea. */
    .wizard-legal .obligatorio span {
        color: #fff !important;
        font-weight: 700;
    }

    /* Sobre el velo la liga se distingue por el subrayado y el peso: el acento
       de la edición es demasiado oscuro para este fondo. */
    .wizard-legal .clic-tyc > .terminos-condiciones {
        color: #fff;
        text-decoration: underline;
        font-weight: 700;
    }

    /* ---- Celular ----
       Debajo de 480px la landing ya pone el formulario a una columna y le
       quita el relleno lateral, así que aquí sólo se ajusta lo del asistente:
       la barra se aprieta, los botones ocupan el ancho completo y el campo
       crece a 16px para que iOS no haga zoom al enfocarlo. */
    @media (max-width: 575px) {
        .wizard-barra {
            gap: 6px;
            margin-bottom: 18px;
            padding-inline: 11px;
        }

        .wizard-paso-marca span {
            font-size: 12px;
            letter-spacing: 0;
        }

        .wizard-acciones {
            gap: 9px;
            padding-inline: 11px;
        }

        .wizard-btn {
            flex: 1;
            padding-inline: 12px;
            font-size: 15.5px;
            min-width: 0;
        }

        .wizard-btn.es-atras { flex: 0 1 34%; }

        /* 16px es el mínimo que evita el zoom automático de Safari en iOS.
           El icono se recorre a 12px y mide 21px, así que termina en 33 y el
           texto arranca en 45: el hueco se conserva proporcional. */
        .form-floating .form-control,
        .form-floating .form-select {
            font-size: 16px;
            padding-left: 45px !important;
        }

        .form-floating > label,
        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label,
        .form-floating > .form-control.has-value ~ label,
        .form-floating > .form-select:focus ~ label,
        .form-floating > .form-select.has-value ~ label {
            left: 45px;
        }

        .container-input > .mt-2 { left: 12px; }

        .container-input > .mt-2 img {
            width: 21px !important;
            height: 21px !important;
        }
    }

    /* Pantallas muy angostas: la etiqueta del paso estorba más de lo que
       ayuda, y la barra sola ya dice en cuál va. */
    @media (max-width: 370px) {
        .wizard-paso-marca span { display: none; }
        .wizard-barra { margin-bottom: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .wizard-paso { animation: none; }
    }