/**
 * ============================================================
 * ESTILOS DEL FORMULARIO DE REGISTRO
 * ============================================================
 * 
 * Este archivo contiene los estilos especificos para el formulario
 * de registro de leads (registro.html).
 * 
 * Caracteristicas:
 * - Paleta de colores profesional (gris suave + acento azul)
 * - Diseno responsive con Bootstrap
 * - Variables CSS para personalizacion dinamica por familia
 * - Efectos visuales sutiles (sombras, transiciones)
 * 
 * Variables CSS dinamicas (inyectadas por JS):
 *   --color-primario   : Color principal de la familia seleccionada
 *   --color-acento     : Color de acentos y estados focus
 *   --color-btn        : Color de botones
 *   --color-btn-border : Color de bordes de botones
 * 
 * ============================================================
 */

/* ---------------------------------------------------------
   VARIABLES CSS GLOBALES
   --------------------------------------------------------- */

:root {
    /* Paleta base profesional */
    --color-fondo: #ffffff;
    --color-texto: #000000;      /* Negro */
    --color-acento: #36B1B1;     /* Turquesa / Cian */
    --color-borde: #CCCCCC;      /* Gris claro inputs */
    --color-input: #ffffff;      /* Blanco fondo inputs */
    --color-btn-bg: #36B1B1;
    --color-btn-text: #ffffff;
    --color-link: #36B1B1;
}

/* ---------------------------------------------------------
   ESTILOS BASE
   --------------------------------------------------------- */

body {
    /* Fondo gris suave para no usar blanco puro */
    background-color: #f9fafb;
    color: var(--color-texto);
    font-family: 'Helvetica', 'Arial', sans-serif;
    margin: 0;
    padding: 0;
   
}

/* =========================================================
   IMAGEN DE FONDO GENERAL (Fondo.avif)
   Se usa un pseudo-elemento fijo para colocar la imagen detrás
   de todo el contenido y aplicar un desenfoque sin afectar al
   propio formulario. Ajusta `filter` según el nivel de desenfoque
   deseado.
*/

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('../imagenes/Fondo.avif') center/cover no-repeat;
    filter: blur(2px);
    z-index: -1;
    /* Aseguramos que el pseudo-elemento no se pase ni un pixel */
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------
   TARJETA PRINCIPAL
   --------------------------------------------------------- */

.card {
    border-radius: 16px;
    background-color: #ffffff;
    border: 1px solid var(--color-borde);
    /* Sombra muy sutil */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.card-header {
    background: transparent;
    border-bottom: none;
    padding-bottom: 1.5rem !important;
}

/* TITULOS: Sans-Serif geométrica en peso Bold */
#titulo-familia {
    color: #000000 !important;
    font-weight: 700 !important;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

/* SUBTITULO: Gris Medio */
#subtitulo-familia {
    color: #666666 !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

.logo-img {
    width: 230px;
    margin: 0 auto 10px auto;
    /* Sin sombra para fondo blanco */
    filter: none;
}

/* ---------------------------------------------------------
   IMAGEN LATERAL PARA FAMILIA
   --------------------------------------------------------- */
   
/* Imagenes independientes para control individual de posicion */
/* NOTA: Las posiciones especificas ahora se aplican solo en Desktop (ver media query abajo) */
#familia_jetour {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1.15;
    /* top/left movidos a media query desktop */
    /* Ejemplo: transform: translate(10px, -20px); */
}

#familia_phev {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1.15;
     /* Escala general para esta imagen */
    /* top/left/transform movidos a media query desktop */
    /* Ejemplo: top: 10px; left: 10px; */
}

#familia_old {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1.15; /* Mantiene proporción cuadrada */
    /* Ejemplo: top: 10px; left: 10px; */
}

/* ---------------------------------------------------------
   CENTRADO GENERAL DE IMÁGENES
   ---------------------------------------------------------
   A veces los distintos formularios incluyen imágenes (logo,
   visualización de familia, etc.) que deberían aparecer siempre
   centradas horizontalmente. La regla global `img` asegura que
   cualquier <img> dentro de las páginas de registro se sitúe en
   el centro de su contenedor. Se pueden sobrescribir en casos
   puntuales si se necesita otro comportamiento.
*/

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------
   OCULTAR IMAGENES SIN FUENTE
   ---------------------------------------------------------
   Algunas vistas cargan inicialmente un <img> con src="" y
   mientras el script asigna la ruta correcta el navegador
   muestra un icono roto. Esta regla evita que se muestre el
   elemento si no hay una dirección válida.
*/

img[src=""],
img:not([src]) {
    display: none !important;
}

/* utility class used in HTML for fallback */
.object-fit-cover {
    object-fit: cover;
}

/* ---------------------------------------------------------
   WRAPPERS PARA FORMULARIO E IMAGEN
   --------------------------------------------------------- */

/* Animacion de entrada suave */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animacion de entrada para la imagen (Efecto Cine) */
@keyframes zoomInReveal {
    0% {
        opacity: 0;
        transform: scale(1.15); /* Empieza un poco mas grande */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Termina en su tamaño normal */
    }
}

.form-wrapper {
    position: relative;
    padding: 2rem;
    /* Efecto Glassmorphism sutil */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.image-wrapper img {
    width: 100%;           /* force the image to fill wrapper completely */
    height: 100%;
    justify-content: center;
    object-fit: cover;
    animation: zoomInReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* Animacion suave */
    /* border-radius se maneja en media queries */
}

/* ---------------------------------------------------------
   MEDIA QUERIES - RESPONSIVE DESIGN AVANZADO
   --------------------------------------------------------- */

/* DESKTOP (Pantallas grandes) */
@media (min-width: 992px) {
    .form-wrapper {
        left: -50px; /* Efecto de superposicion lateral original */
    }

    #familia_jetour {
        top: -2px; left: 25px;
    }

    #familia_phev {
        top: -2px; left: 25px;
    }

    #familia_old {
        top: -2px; left: 25px;
    }
}

/* MOBILE & TABLET (Pantallas pequeñas) */
@media (max-width: 991px) {
    .form-wrapper {
        left: 0;
        /* Eliminamos margen negativo para que el formulario encabece la vista */
        margin-top: 0; 
        border-radius: 24px 24px 16px 16px;
        /* Sombra mas suave hacia arriba */
        box-shadow: 0 -8px 25px rgba(0,0,0,0.06) !important;
        z-index: 10;
        /* Menos padding en movil para ganar espacio para los inputs */
        padding: 1.5rem 1.25rem !important;
    }

    .image-wrapper {
        /* Altura auto para mantener proporción de la imagen */
        height: auto;
        min-height: unset;
        width: 100%;
        border-radius: 24px;
        margin-bottom: 25px; /* Espacio entre imagen y formulario */
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        position: relative;
        z-index: 1;
        /* Asegurar que el contenedor se ajuste al contenido */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image-wrapper img {
        /* Cambiar a contain para mostrar toda la imagen sin recortes */
        object-fit: contain;
        width: 100%;
        height: auto;
        max-height: 85vh;
        /* Mantener la relación de aspecto */
        display: block;
    }

    /* Ajuste de logo y textos para ganar espacio vertical */
    .logo-img {
        max-width: 100px;
        margin-bottom: 10px;
    }
    #titulo-familia {
        font-size: 1.35rem;
    }

    /* Reseteamos transformaciones especificas */
    #familia_jetour, #familia_phev, #familia_old {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Ajuste específico para pantallas muy pequeñas */
@media (max-width: 576px) {
    .image-wrapper img {
        max-height: 70vh;
    }
}

/* Ajuste para pantallas muy grandes en móvil */
@media (min-width: 768px) and (max-width: 991px) {
    .image-wrapper img {
        max-height: 90vh;
    }
}

/* Ajustes ultra-compactos para iPhone SE y similares */
@media (max-width: 380px) {
    .form-wrapper {
        padding: 1.25rem 1rem !important;
    }
}

/* ---------------------------------------------------------
   CAMPOS DE FORMULARIO
   --------------------------------------------------------- */

/* Icono al inicio del input */
.input-group-text {
    background-color: var(--color-input);
    background-color: #ffffff;
    border: 1px solid var(--color-borde);
    border-right: none;
    color: var(--color-acento);
}

/* ETIQUETAS (LABELS): Sans-Serif Regular, Mayúsculas, Negro */
.form-label {
    color: #000000 !important;
    font-weight: 400 !important; /* Regular */
    text-transform: uppercase;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 0.85rem;
}

/* Input y select base */
.form-control, 
.form-select {
    background-color: var(--color-input);
    background-color: #ffffff;
    border: 1px solid var(--color-borde);
    border-left: none;
    color: var(--color-texto);
    color: #000000;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente sistema */
    transition: all 0.3s ease;
}

/* Placeholder de inputs */
/* Placeholder de inputs: Gris Medio */
.form-control::placeholder {
    color: #666;
    color: #666666;
}

/* ---------------------------------------------------------
   ESTADOS FOCUS DE INPUTS
   --------------------------------------------------------- */

.form-control:focus, 
.form-select:focus {
    background-color: #ffffff;
    border-color: var(--color-acento);
    /* Sombra del color de acento */
    box-shadow: 0 0 0 3px rgba(54, 177, 177, 0.25);
    color: #000000;
}

/* Opciones del select */
.form-select, 
.form-select option {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Opcion deshabilitada del select */
.form-select option:disabled {
    color: #666;
}

/* Icono cuando el input tiene focus */
.input-group:focus-within .input-group-text {
    border-color: var(--color-acento);
    background-color: #ffffff;
    color: var(--color-acento);
}

/* ---------------------------------------------------------
   BOTON PRINCIPAL (ENVIAR)
   BOTON PRINCIPAL (ENVIAR) - Turquesa
   --------------------------------------------------------- */

.btn-enviar {
    position: relative;
    background: #36B1B1 !important;
    color: #ffffff !important;
    border: 2px solid #36B1B1 !important;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Estado hover del boton */
.btn-enviar:hover {
    background: #2a8f8f !important; /* Un poco más oscuro */
    border-color: #2a8f8f !important;
}

/* ---------------------------------------------------------
   BOTON SECUNDARIO (REGRESAR)
   --------------------------------------------------------- */

.btn-outline-dark {
    position: static;
    margin-bottom: 10px;
}

.btn-outline-dark:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

/* ---------------------------------------------------------
   ENLACES
   --------------------------------------------------------- */

#linkPrivacidad {
    color: #36B1B1 !important;
    font-weight: 700;
}

/* ---------------------------------------------------------
   UTILIDADES
   --------------------------------------------------------- */

.text-muted {
    color: #718096 !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 768px) {
    .card {
        margin: 0 10px;
    }
    
    .logo-img {
        max-width: 140px;
    }
}