/* ============================================================
   alta.css — Estilos del formulario público de alta de participante
   Paleta y estructura basadas en el mock docs/mocks/REGISTRO/
   Google Fonts y FontAwesome se cargan en _AltaLayout.cshtml vía CDN.
   ============================================================ */

/* --- VARIABLES --- */
:root {
    --alta-blue: #2800ff;
    --alta-orange: #fc4d0f;
    --alta-green: #216700;
    --alta-gold-gradient: linear-gradient(to right, #fac80d 0%, #e9d96f 51%, #fac80d 100%);
}

/* --- RESET BÁSICO --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- BODY --- */
body.alta-page {
    font-family: "Roboto", sans-serif;
    color: #000000;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- HEADER --- */
header {
    background-image: var(--alta-gold-gradient);
}

header .contenedorHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    width: 95%;
    margin: auto;
    max-width: 1500px;
    padding: 25px 0;
}

header .contenedorHeader .logo {
    width: 140px;
}

header .contenedorHeader .logo img {
    width: 100%;
}

/* --- MAIN --- */
main {
    flex: 1;
    background: url('/images/alta/fondoRegistro.webp') center center / cover no-repeat;
    padding: 5%;
}

/* --- CONTENEDOR PRINCIPAL (2 columnas) --- */
main .contenedorPrincipal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    max-width: 1500px;
    margin: 0 auto;
    width: 95%;
}

/* --- COLUMNA IZQUIERDA: imagen portada --- */
main .contenedorPrincipal .cerditoAniversario {
    width: 600px;
    flex-grow: 1;
    margin-right: 20px;
    max-width: 600px;
}

main .contenedorPrincipal .cerditoAniversario img {
    width: 100%;
    display: block;
}

/* --- COLUMNA DERECHA: formulario --- */
main .contenedorPrincipal .contenedorDerecha {
    width: 55%;
    color: white;
}

main .contenedorPrincipal .contenedorDerecha h2 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

main .contenedorPrincipal .contenedorDerecha p {
    font-size: 1em;
    font-weight: 300;
    line-height: 30px;
    margin: 0 0 16px 0;
}

main .contenedorPrincipal .contenedorDerecha p .bold {
    font-weight: 500;
}

/* --- CAMPOS DEL FORMULARIO --- */
.camposRegistro .formRegistro input[type="text"],
.camposRegistro .formRegistro input[type="email"],
.camposRegistro .formRegistro input[type="password"],
.camposRegistro .formRegistro select {
    padding: 1em;
    border-radius: 5px;
    background-color: white;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    min-height: 50px;
    width: 100%;
    font-family: "Roboto", sans-serif;
    font-size: 1em;
    color: #000000;
}

.camposRegistro .formRegistro input[type="text"]:focus,
.camposRegistro .formRegistro input[type="email"]:focus,
.camposRegistro .formRegistro input[type="password"]:focus,
.camposRegistro .formRegistro select:focus {
    outline: 2px solid #fac80d;
    border-color: #fac80d;
}

/* Fila completa */
.contenedorDerecha .camposRegistro .formRegistro .completo {
    width: 100%;
    display: block;
}

/* El select de Provincia ocupa el 100% de su contenedor .completo,
   con la misma caja que los inputs (width forzado a nivel de elemento
   porque los navegadores pueden ignorar la herencia de width en select). */
.contenedorDerecha .camposRegistro .formRegistro .completo select {
    width: 100%;
}

/* Media fila (2 inputs en la misma fila).
   Los hijos directos de .mitad son divs wrapper (necesarios para alojar
   el mensaje de validación ASP.NET junto a cada input), no inputs sueltos.
   Se reparte el espacio flex entre esos wrappers, y el input dentro
   de cada wrapper ocupa el 100% de su columna. */
.contenedorDerecha .camposRegistro .formRegistro .mitad {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 15px;
}

.contenedorDerecha .camposRegistro .formRegistro .mitad > div {
    flex: 1 1 0;
    min-width: 0;
}

.contenedorDerecha .camposRegistro .formRegistro .mitad > div input {
    width: 100%;
    margin-bottom: 20px;
}

/* --- MENSAJES DE VALIDACIÓN ASP.NET --- */
/* Errores bajo cada campo, sin romper el grid .mitad/.completo */
.camposRegistro .formRegistro .field-validation-error,
.camposRegistro .formRegistro .text-danger {
    display: block;
    color: #e53e3e;
    font-size: 0.8em;
    margin-top: -4px;
    margin-bottom: 8px;
    width: 100%;
}

.camposRegistro .formRegistro input.input-validation-error,
.camposRegistro .formRegistro select.input-validation-error {
    border-color: #e53e3e;
    background-color: #fff5f5;
}

/* Resumen de validación en la cabecera del form */
.camposRegistro .formRegistro .validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
}

.camposRegistro .formRegistro .validation-summary-errors ul li {
    color: #e53e3e;
    font-size: 0.85em;
    margin-bottom: 4px;
}

/* --- TÉRMINOS, COMUNICACIONES Y BOTÓN --- */
.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 12px;
}

.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .terminosYcomunicaciones {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 55%;
    font-size: 0.8em;
}

.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .terminosYcomunicaciones .flexTerminos {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 8px;
}

.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .terminosYcomunicaciones .flexTerminos input[type="checkbox"] {
    margin-right: 6px;
    margin-top: 3px;
    width: auto;
    flex-shrink: 0;
}

.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .terminosYcomunicaciones .flexTerminos label a {
    color: var(--alta-blue);
    text-decoration: underline;
}

.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .terminosYcomunicaciones .flexTerminos label a:hover {
    opacity: 0.8;
}

/* Mensajes de validación de los checkboxes */
.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .terminosYcomunicaciones .field-validation-error,
.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .terminosYcomunicaciones .text-danger {
    font-size: 0.85em;
    color: #e53e3e;
    display: block;
    margin-top: 4px;
}

/* --- BOTÓN REGISTRARSE --- */
.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro button[type="submit"],
.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .btn-registrar {
    border-radius: 5px;
    background: var(--alta-gold-gradient);
    color: var(--alta-green);
    text-align: center;
    padding: 0 40px;
    font-size: 1.2em;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: "Roboto", sans-serif;
    align-self: center;
    min-height: 50px;
}

.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro button[type="submit"]:hover,
.contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .btn-registrar:hover {
    text-decoration: underline;
}

/* --- TEXTO DE CAMPOS OBLIGATORIOS --- */
.camposRegistro .obligatorio {
    font-size: 0.8em;
    color: white;
    margin-bottom: 12px;
    margin-top: 4px;
}

/* --- FOOTER --- */
footer {
    background-image: var(--alta-gold-gradient);
}

footer .contenedorFooter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8px;
    color: var(--alta-blue);
    width: 95%;
    margin: auto;
    max-width: 1500px;
}

footer .telefono a {
    font-weight: 900;
    color: var(--alta-blue);
    text-decoration: underline;
}

footer .telefono a:hover {
    text-decoration: underline;
}

/* --- BLOQUES DE ESTADO (PeriodoCerrado / RegistroExitoso) --- */
.alta-estado {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 2em;
    text-align: center;
    color: #333;
    max-width: 600px;
    margin: 2em auto;
}

.alta-estado h2 {
    color: var(--alta-green);
    margin-bottom: 0.5em;
}

/* --- RESPONSIVE: ≤1100px --- */
@media screen and (max-width: 1100px) {
    header .contenedorHeader {
        flex-direction: column;
        align-items: center;
    }

    header .contenedorHeader .logo {
        margin-bottom: 15px;
    }

    main .contenedorPrincipal {
        flex-direction: column-reverse;
    }

    main .contenedorPrincipal .contenedorDerecha {
        width: 100%;
        margin-left: inherit;
    }

    /* Ocultar columna imagen en móvil */
    main .contenedorPrincipal .cerditoAniversario {
        display: none;
    }

    .contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro {
        flex-direction: column;
    }

    .contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .terminosYcomunicaciones {
        width: 100%;
    }

    .contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro button[type="submit"],
    .contenedorDerecha .camposRegistro .formRegistro .terminosYbotonRegistro .btn-registrar {
        padding: 15px;
        width: 100%;
        margin-top: 12px;
    }
}

/* --- RESPONSIVE: ≤500px --- */
@media screen and (max-width: 500px) {
    main .contenedorPrincipal .contenedorDerecha p {
        font-size: 1em;
        line-height: 20px !important;
    }

    footer .contenedorFooter {
        flex-direction: column;
        align-items: flex-start;
    }

    footer .contenedorFooter .telefono {
        margin-top: 10px;
    }
}

/* --- FORMULARIO INLINE DE LOGIN EN CABECERA --- */

/* Contenedor del lado derecho del header; apila la fila de inputs y el
   enlace de reset en columna. */
header .contenedorHeader .alta-login {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* El form agrupa la fila de inputs y los elementos secundarios. */
#login-inline-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* Fila horizontal: Email | Contraseña | botón INICIAR SESIÓN. */
.alta-login-fila {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Inputs del formulario inline (estilados según el mock: fondo blanco,
   bordes redondeados, padding generoso). */
#login-inline-form input.completo {
    padding: 0.6em 0.8em;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 0.9em;
    color: #000;
    min-height: 40px;
    width: 160px;
}

#login-inline-form input.completo:focus {
    outline: 2px solid #fac80d;
    border-color: #fac80d;
}

/* Botón submit: verde corporativo con texto dorado, alineado en fila. */
#login-inline-form button[type=submit] {
    background-color: #216700;
    color: #ffca0a;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 0.6em 1.2em;
    font-family: Roboto, sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    min-height: 40px;
    text-transform: uppercase;
    white-space: nowrap;
}

#login-inline-form button[type=submit]:hover {
    opacity: 0.9;
}

/* Mensaje de error inline: colapsado cuando está vacío (:not(:empty)),
   visible y discreto cuando contiene texto de error. */
#login-inline-error,
.alta-login-error {
    display: block;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 0.8em;
    color: #e53e3e;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    padding: 0;
    transition: max-height 0.2s ease, padding 0.2s ease;
    width: 100%;
}

#login-inline-error:not(:empty),
.alta-login-error:not(:empty) {
    max-height: 80px;
    padding: 4px 8px;
}

/* Enlace de restablecer contraseña debajo de la fila de inputs. */
.alta-login-reset {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-align: right;
    margin-top: 2px;
}

.alta-login-reset:hover {
    color: #ffffff;
}

/* Ajuste responsive ≤1100px: el header pasa a columna; el formulario
   inline se centra y los inputs pasan a flex-wrap para no desbordar. */
@media screen and (max-width: 1100px) {
    header .contenedorHeader .alta-login {
        align-items: center;
        width: 100%;
    }

    #login-inline-form {
        width: 100%;
        align-items: center;
    }

    .alta-login-fila {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    #login-inline-form input.completo {
        width: 100%;
        min-width: 0;
        flex: 1 1 140px;
    }
}