/* 
 * Contenedor del campo de formulario.
 * - Organiza el `label` y el `input` en una disposición vertical.
 */
 .form-field {
    display: flex; 
    flex-direction: column;
}

/* 
 * Estilo del `label`.
 * - Define el color, el tamaño de la fuente y un margen inferior para separar del `input`.
 * - Transición para animaciones suaves al cambiar de estado.
 */
.form-field label {
    color: #596265; 
    margin-bottom: 3px; 
    transition: all 0.4s ease;
}

/* 
 * Estilo base del `input`.
 * - Define el tamaño de la fuente, el color del texto y el diseño del borde inferior.
 * - Ajusta el espaciado interno para mejorar la usabilidad.
 * - Incluye una transición para animaciones suaves.
 */
.form-field input {
    color: var(--black-2); 
    border: none; 
    border-bottom: 1px solid var(--gray-4); 
    padding-top: 11px; 
    padding-bottom: 9px; 
    padding-left: 11px; 
    margin: 0px;
    outline: none; 
    max-height: 38px;
}

/* --- ESTADO PREDETERMINADO --- */
/* Como hasta ahora, sin clases específicas adicionales: */
.form-field.predeterminado label {
    color: #596265 /* Gris 2 #83899C */
 }

/* 
 * Estilo del placeholder dentro del input.
 * - Define un color más claro para diferenciar el placeholder del texto ingresado.
 */
.form-field input::placeholder {
    color: var(--gray-3); 
}


/* --- ESTADO HOVER --- */
.form-field input:hover {
    border-bottom: 1px solid var(--orange-infolaft); 
}

/* --- ESTADO PRESS (Focus) --- */
/* 
 * Estado Focus/Press del input.
 * - Cambia el borde inferior a un color más llamativo.
 * - Aplica un fondo suave para destacar el campo activo.
 */
.form-field input:focus {
    border-bottom: 1px solid var(--orange-infolaft); 
    background-color: var(--input-press); 
}

/* --- ESTADO INACTIVO (disabled) --- */
/* 
 * Estado inactivo del input.
 * - Desactiva el campo con un fondo gris claro y texto atenuado.
 * - Ajusta el color y estilo del borde inferior para indicar desactivación.
 */
.form-field input:disabled {
    border-bottom: 1px solid var(--gray-4); 
    background-color: transparent;
    cursor: not-allowed; 
}


/* --- ESTADO COMPLETO --- */
/* 
 * Estado completo del input (cuando tiene texto).
 * - Cambia el borde inferior para indicar que el campo ha sido llenado.
 */
.form-field input:not(:placeholder-shown):not(:focus) {
    border-bottom: 1px solid var(--gray-4);
}

/* 
 * Estilo del `label` cuando el campo está completo.
 * - Cambia el color del label para destacar que el campo está lleno.
 * - Aplica un peso de fuente más alto para darle mayor énfasis.
 */
.form-field input:not(:placeholder-shown) + label {
    color: var(--gray-3);  
    font-weight: bold ; 
}

/* --- ESTADO RESUMEN --- */
.form-field.resumen label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400; /* Regular */
    line-height: 20px;
    letter-spacing: 0;
    color: var(--gray-2);  
}

.form-field.resumen input {
    border-bottom: 0; /* Sin borde inferior por defecto */
    font-size: 14px;
    font-weight: 400; /* Regular */
    line-height: 20px;
    letter-spacing: 0;
    color: var(--black-2); 
    background-color: transparent; 
}

/* Al pasar el mouse, se muestra la línea naranja */
.form-field.resumen input:hover {
    border-bottom: 1px solid var(--orange-infolaft); 
}

/* --- ESTADO EDIT RESUMEN --- */
.form-field.editResumen label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400; 
    line-height: 20px;
    letter-spacing: 0;
    color: var(--gray-2);  
}

.form-field.editResumen input {
    border-bottom: none;
    pointer-events: auto;   /* Editable */
    color: var(--black-2);
}

/* Al pasar el mouse, se muestra la línea naranja */
.form-field.editResumen input:hover {
    border-bottom: 1px solid var(--orange-infolaft);
}