/* ========================
   Configuración General
======================== */
/* Configuración global del cuerpo de la página */
body {
    background-image: url('/image/Fondo-web-100.jpg'); /* Fondo de la página */
    background-size: cover; /* Escala la imagen para cubrir toda la pantalla */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Fija el fondo al scroll */
    display: flex; /* Utiliza flexbox para centrar el contenido */
    align-items: center; /* Alinea verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    height: 100vh; /* Altura completa de la ventana */
    font-family: Arial, sans-serif; /* Fuente predeterminada */
    padding-bottom: 30px; /* Espaciado adicional inferior */
}

/* ========================
   Contenedor Principal y Logos
======================== */
/* Configuración del formulario principal */
.form-container {
    max-width: 500px; /* Ancho máximo */
    width: 100%; /* Ocupa el 100% del contenedor padre */
    margin: auto; /* Centra el formulario horizontalmente */
    margin-top: 30px; /* Margen superior */
    padding: 2rem; /* Espaciado interno */
    border-radius: 15px; /* Bordes redondeados */
    text-align: center; /* Texto centrado */
    font-family: Arial, sans-serif; /* Fuente del formulario */
}

/* Contenedor del logo de USACH */
.logo-usach-container {
    position: absolute; /* Posición absoluta respecto al contenedor */
    top: 12px; /* Posición desde la parte superior */
    left: 5%; /* Posición desde el borde izquierdo */
    max-width: 20%; /* Ancho máximo del contenedor */
}

/* Estilo del logo de USACH */
.logo-usach {
    width: 100%; /* Ocupa el ancho completo del contenedor */
}

/* Estilo del logo de CIDI */
.logo-cidi {
    max-width: 550px; /* Ancho máximo */
    height: auto; /* Altura automática para mantener proporción */
    margin-top: 5rem; /* Margen superior */
    margin-left: 34%; /* Margen izquierdo */
}

/* ========================
   Títulos y Estilos del Formulario
======================== */
/* Configuración del estilo de subtítulos */
h4 {
    font-size: 30px; /* Tamaño de la fuente */
    color: gray; /* Color del texto */
    margin-bottom: 20px; /* Margen inferior */
    font-weight: 500; /* Peso de la fuente */
}

/* Estilo de los títulos del formulario */
.form-container h2 {
    font-weight: bold; /* Texto en negrita */
    color: #454D66; /* Color del texto */
    font-size: 25px; /* Tamaño de la fuente */
    margin-bottom: 1.5rem; /* Margen inferior */
}

/* Estilo de los campos del formulario */
.form-control {
    width: 100%; /* Ocupa el ancho completo */
    margin-bottom: 20px; /* Margen inferior */
    background-color: #f5f5f5; /* Fondo claro */
    padding: 15px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    border: none; /* Sin bordes */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra alrededor del campo */
}

/* ========================
   Colores y Bordes de los Campos de Entrada
======================== */
/* Configuración específica para diferentes tipos de entradas */
.email-input {
    border-left: 7px solid #FFA500; /* Borde izquierdo naranja */
}

.name-input {
    border-left: 7px solid #FF0000; /* Borde izquierdo rojo */
}

.last-name-input {
    border-left: 7px solid #4CAF50; /* Borde izquierdo verde */
}

.type-unit-input {
    border-left: 7px solid #fa941d; /* Borde izquierdo naranja oscuro */
}

.unit-input {
    border-left: 7px solid #FF0000; /* Borde izquierdo rojo */
}

.others-input {
    border-left: 7px solid #4CAF50; /* Borde izquierdo verde */
}

.reason-input {
    border-left: 7px solid #800080; /* Borde izquierdo púrpura */
}

/* ========================
   Botones de Envío
======================== */
/* Estilo de los botones */
.btn-primary,
.btn-submit {
    width: 100%; /* Ocupa todo el ancho */
    padding: 12px; /* Espaciado interno */
    font-size: 20px; /* Tamaño de fuente */
    border-radius: 25px; /* Bordes redondeados */
    background-color: #454D66; /* Fondo gris oscuro */
    color: white; /* Texto blanco */
    border: none; /* Sin bordes */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    letter-spacing: 4px; /* Espaciado entre letras */
}

/* Cambio de color al pasar el cursor */
.submit-btn:hover {
    background-color: #23272b; /* Fondo más oscuro */
}

/* ========================
   Campo de Carga de Archivo Personalizado
======================== */
/* Estilo para el campo personalizado de carga de archivos */
.custom-file-upload {
    display: inline-flex; /* Alinea elementos horizontalmente */
    align-items: center; /* Alinea verticalmente */
    font-family: Arial, sans-serif; /* Fuente del campo */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    color: #007bff; /* Texto azul */
    text-decoration: underline; /* Subraya el texto */
    margin-bottom: 15px; /* Margen inferior */
}

/* Estilo de la etiqueta del archivo */
.file-label {
    cursor: pointer; /* Cambia el cursor al pasar */
}

/* Estilo para el texto del archivo elegido */
#file-chosen {
    margin-left: 15px; /* Margen izquierdo */
    font-style: italic; /* Texto en cursiva */
    color: #333; /* Color gris oscuro */
}

/* Oculta el input original */
.file-input {
    display: none;
}

/* ========================
   Footer
======================== */
/* Estilo del pie de página */
.footer {
    position: fixed; /* Fija el footer en la parte inferior */
    bottom: -20px; /* Posición desde el borde inferior */
    left: 0; /* Alinea al borde izquierdo */
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    background-color: #009975; /* Fondo verde */
    color: white; /* Texto blanco */
    text-align: center; /* Texto centrado */
    padding: 10px; /* Espaciado interno */
    font-family: Arial, sans-serif; /* Fuente del footer */
    font-weight: bold; /* Negrita */
    font-size: 13px; /* Tamaño de fuente */
    z-index: 1000; /* Asegura que el footer esté al frente */
}

/* ========================
   Ajustes Responsivos
======================== */
/* Ajustes para pantallas medianas */
@media (max-width: 768px) {
    .footer {
        font-size: 12px; /* Tamaño de fuente más pequeño */
        padding: 10px; /* Espaciado interno ajustado */
    }
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 480px) {
    .footer {
        font-size: 11px; /* Tamaño de fuente aún más pequeño */
        padding: 8px; /* Espaciado interno reducido */
        line-height: 1.2; /* Ajusta el interlineado */
    }

    .btn-primary,
    .btn-submit {
        font-size: 16px; /* Botones más pequeños */
        padding: 10px; /* Espaciado interno reducido */
    }

    .logo-usach {
        width: 150px; /* Reduce el tamaño del logo */
    }

    .logo-cidi {
        width: 80%; /* Reduce el tamaño del logo */
        margin-left: 10%; /* Ajusta la posición del logo */
    }

    .form-container {
        padding: 1.5rem; /* Ajusta el espaciado interno */
    }

        .form-container h4 {
            font-size: 18px; /* Reduce el tamaño del título */
        }

    .btn-primary,
    .btn-submit {
        font-size: 14px; /* Botones más pequeños */
    }
}