/* simulador-form-layout.css - Estilo "Dream Style" Clean Layout */

:root {
    /* Variables de transición y sombras ajustadas al tema Deep Blue */
    --wow-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --card-padding: 0px; /* Quitamos padding extra para que se vea limpio */
}

/* 1. CONTENEDOR PRINCIPAL (GRID) */
.wow-form-container {
    width: 100%;
    display: grid;
    /* En móvil: 1 columna. En desktop se ajusta abajo */
    grid-template-columns: 1fr; 
    gap: 20px; 
    margin-bottom: 30px;
    align-items: end; /* Alinea los elementos a la base */
}

/* 2. TARJETA DE CAMPO (Wrapper de cada input) */
.wow-card {
    /* Eliminamos el fondo de tarjeta para imitar la imagen (solo el input debe tener fondo) */
    background: transparent; 
    border: none;
    box-shadow: none;
    padding: 0;
    
    display: flex;
    flex-direction: column;
    position: relative;
    transition: var(--wow-transition);
}

/* Efecto hover sutil (opcional, solo movimiento) */
.wow-card:hover {
    transform: translateY(-2px);
}

/* 3. CABECERA DEL CAMPO (Label + Icono) */
.wow-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px; /* Espacio entre título e input */
    padding-left: 5px; /* Pequeña indentación visual */
}

/* Iconos circulares pequeños (Estilo Dream) */
.wow-icon {
    font-size: 0.9rem; 
    color: var(--c-icon-blue); /* Cyan brillante */
    width: auto; 
    height: auto;
    background: transparent; /* Sin fondo de caja */
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Labels (Textos blancos puros como en la imagen) */
.f-label {
    font-size: 0.85rem; 
    font-weight: 600; /* Semi-bold */
    color: #ffffff;   /* Blanco puro */
    text-transform: none; /* Quitamos mayúsculas forzadas para se vea más amable */
    margin-bottom: 0;
    letter-spacing: 0.3px;
    opacity: 0.95;
}

/* 4. WRAPPER DEL INPUT */
.input-wrapper-wow {
    width: 100%;
    position: relative;
    /* Aquí es donde irá el estilo del input blanco en el siguiente archivo */
}

/* Info Rango (Debajo del input) */
.info-rango {
    font-size: 0.7rem;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.5); /* Texto grisáceo/transparente */
    font-weight: 400;
    text-align: left;
    padding-left: 5px;
    min-height: 18px; /* Evita saltos de altura */
}

/* --- MEDIA QUERIES (ADAPTACIÓN) --- */

/* Tablet y Desktop: Diseño Horizontal de 3 Columnas */
@media (min-width: 768px) {
    .wow-form-container {
        /* Proporciones similares a la imagen: Grande - Medio - Medio */
        grid-template-columns: 1.5fr 1fr 1fr; 
        gap: 25px; /* Más aire entre columnas */
    }
}

/* Ajustes finos para pantallas gigantes */
@media (min-width: 1200px) {
    .wow-form-container {
        gap: 30px;
    }
    
    .f-label {
        font-size: 0.9rem;
    }
}