@import url('headercontacto.css');
@import url('maincontacto.css');
@import url('asidecontacto.css');
@import url('footercontacto.css');

/* Estilo para el formulario */
form {
    width: 750px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
    padding: 20px; /* Espaciado interno */
    background-color: #f9f9f9; /* Fondo claro */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;   
}

/* Estilo para todos los campos de entrada y textarea */
form input,
form textarea {
    width: 100%; /* Ocupa todo el ancho del formulario */
    padding: 12px; /* Espaciado interno */
    margin-bottom: 20px; /* Espaciado inferior */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 1em; /* Tamaño del texto */
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
    background-color: #fff; /* Fondo blanco */
    transition: all 0.3s ease; /* Transición suave para el borde y sombra */
}

/* Estilo para los campos de entrada al enfocarse */
form input:focus,
form textarea:focus {
    border-color: #007BFF; /* Cambia el color del borde al enfocar */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra azul al enfocar */
    outline: none; /* Elimina el contorno predeterminado */
}

/* Estilo para las etiquetas */
form label {
    display: inline-flex; /* Asegura que las etiquetas estén en su propia línea */
    font-size: 1em; /* Tamaño del texto */
    color: #333; /* Color del texto */
    margin-bottom: 5px; /* Espaciado inferior */
    font-weight: bold; /* Resalta las etiquetas */
    width: fit-content;
    align-items: center;
    gap: 5px;
    margin-right: 30px;
}

form label.labelRadio {
    display: inline-flex; /* Asegura que las etiquetas estén en su propia línea */
    font-size: 1em; /* Tamaño del texto */
    color: #333; /* Color del texto */
    margin-bottom: 5px; /* Espaciado inferior */
    font-weight: bold; /* Resalta las etiquetas */
    width: fit-content;
    align-items: center;
    gap: 5px;
    margin-right: 30px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Estilo para el botón de envío */
form button{
    display: inline-block;
    background-color: #007BFF; /* Fondo azul */
    color: #fff; /* Texto blanco */
    padding: 12px 20px; /* Espaciado interno */
    font-size: 1em; /* Tamaño del texto */
    border: none; /* Sin borde */
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    vertical-align: middle;
    margin: 20px;
    
    bottom: 0;
}

/* Efecto hover para el botón */
form button[type="submit"]:hover {
    background-color: #0056b3; /* Fondo más oscuro al pasar el cursor */
    transform: translateY(-2px); /* Eleva ligeramente el botón */
}

/* Efecto activo para el botón */
form button[type="submit"]:active {
    background-color: #003f7f; /* Fondo aún más oscuro al hacer clic */
    transform: translateY(0); /* Restaura la posición */
}

fieldset{
    margin: 50px;
    text-align: left;
}  

input[type="checkbox"] ,input[type="radio"] {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 40px;
    align-items: center;
    position: relative;
    top: 5px;
}

/* Asegurar que la etiqueta de país esté en una línea separada */
form label[for="pais"] {
    display: block; /* Coloca la etiqueta en su propia línea */
    margin-bottom: 5px; /* Espaciado inferior para separar del input */
    font-size: 1em; /* Tamaño del texto */
    color: #333; /* Color del texto */
    font-weight: bold; /* Resalta la etiqueta */
}

/* Opcional: Ajustar el input de país */
form input#pais {
    width: 100%; /* Asegura que el input ocupe todo el ancho disponible */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 15px; /* Espaciado inferior */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 1em; /* Tamaño del texto */
    display: inline-flex;
}