/* ========== Estilos base para el encabezado (Enfoque Mobile First) ========== */
.principal__section--contacto {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el formulario en la sección. */
}

/* Contenedor principal del formulario. */
.formulario {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

/* Contenedor para agrupar campos de entrada (Nombre y Apellido). */
.formulario__fila {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Contenedor para un par de etiqueta + campo de entrada. */
.formulario__campo {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;  /* Necesario para posicionar mensajes de error si fuera preciso. */
}

/* Etiqueta del campo. */
.campo__label {
    text-transform: capitalize;
    padding-inline-start: 1rem;
    color: var(--accent-color);
    font-family: inherit; /* Hereda la fuente del body. */
}

/* Campo de entrada (input, textarea). */
.campo__input {
    inline-size: 100%;
    border-radius: 0.5rem;
    border: none;
    padding: 0.5rem 1rem;
    font-family: inherit;
    /* Se inicia con un borde transparente para evitar un "salto" al añadir el borde de validación. */
    border: 2px solid transparent;
    transition: border-color 0.3s ease, outline-color 0.3s ease;
}

/* --- ESTILOS DE VALIDACIÓN CON CSS --- */
/* Cuando el input es válido y el usuario ha escrito algo (no muestra el placeholder). */
.campo__input:valid:not(:placeholder-shown) {
    border-color: var(--secondary-accent-color);
}

/* Cuando el input es inválido y el usuario ha escrito algo. */
.campo__input:invalid:not(:placeholder-shown) {
    border-color: #ff6b6b;
    outline-color: #ff6b6b;
}

/* Estilo de foco accesible: se muestra al navegar con teclado. */
.campo__input:focus-visible {
    outline: 2px solid var(--accent-color);
}

/* --- MENSAJES DE ERROR --- */
/* mensajes de error */
.campo__error-mensaje {
    display: none;
    color: #ff6b6b;
    font-size: 0.8rem;
    padding-inline-start: 1rem;
}

/* Muestra el mensaje de error cuando el campo adyacente es inválido y el usuario ha interactuado */
.campo__input:invalid:not(:placeholder-shown)+.campo__error-mensaje {
    display: block;
}

/* Contenedor de los botones del formulario. */
.formulario__botones {
    display: flex;
    flex-direction: column; /* Apila los botones en mobile. */
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Estilo base para los botones. */
.formulario__boton {
    inline-size: 8rem;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Estilo específico para los botones principales. */
.formulario__boton--enviar,
.formulario__boton--cancelar {
    outline: 2px solid var(--secondary-accent-color);
}

/* Cambio de color específico para el botón de enviar. */
.formulario__boton:hover,
.formulario__boton:active {
    transform: scale(1.2);
}

/* Cambio de color específico para el botón de enviar. */
.formulario__boton--enviar:hover,
.formulario__boton--enviar:active {
    background-color: var(--accent-color);
}

/* ========== Estilos Responsivos (Tablet y superiores) ========== */
/* ========== Tablet ========== */
@media (min-width: 768px) {
    .formulario {
        /* Reduce el ancho del formulario en pantallas más grandes. */
        inline-size: 80%;
    }

    .formulario__fila {
        inline-size: 100%;
        flex-direction: row;
    }

    /* Coloca los campos agrupados en una fila horizontal. */
    .campo__input {
        max-inline-size: 100%;
    }

    /* Los botones se colocan en una fila. */
    .formulario__botones {
        flex-direction: row;
    }
}

/* ========== Desktop ========== */
@media (min-width: 1024px) {
     /* Espacio para posibles ajustes en pantallas de escritorio. */
}