/*
    ARCHIVO: inicio.css
    DESCRIPCIÓN: Estilos específicos para la página de inicio (página de validación de certificados).
    Define la apariencia de la sección principal (hero), el formulario de validación y sus elementos.
*/

/* -------------------------------------------
    Animaciones y Sección Hero
------------------------------------------- */

/* Animación para que los elementos aparezcan desde la izquierda */
@keyframes panFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Sección superior con la imagen de banner */
.hero {
    width: 100%;
    height: 20vh; /* Altura del 20% de la ventana */
    background-color: #e0e0e0; /* Color de fondo mientras carga la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen cubre el contenedor sin deformarse */
}

/* -------------------------------------------
    Sección de Validación
------------------------------------------- */

.validation-section {
    max-width: 800px;
    margin: 2rem auto; /* Centrado horizontal */
    padding: 0 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* Contiene las animaciones */
}

.validation-section h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: normal;
    white-space: normal;
    opacity: 0; /* Oculto para animar */
    animation: panFromLeft 0.7s ease-out 0.3s forwards; /* Aplica animación con retraso */
}

.validation-section p {
    color: var(--color-texto-gris);
    font-size: 1rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: panFromLeft 0.7s ease-out 0.5s forwards; /* Aplica animación con más retraso */
}

/* -------------------------------------------
    Formulario de Validación
------------------------------------------- */

.validation-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.input-container {
    position: relative;
    opacity: 0;
    animation: panFromLeft 0.7s ease-out 0.7s forwards; /* Animación con más retraso */
}

/* Campo de texto para ingresar el código */
.input-container input {
    width: 100%;
    padding: 1rem;
    padding-right: 3.5rem; /* Espacio para el ícono de la cámara */
    border: 2px solid var(--color-principal);
    font-size: 1rem;
    font-family: var(--font-principal);
}

/* Ícono de la cámara (si se implementa la funcionalidad) */
.input-container .fa-camera {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-principal);
    cursor: pointer;
    font-size: 1.2rem;
}

/* Botón "VALIDAR CERTIFICADO" */
#validate-btn {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border: 2px solid var(--color-principal);
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    width: 100%;
    align-self: center;
    opacity: 0;
    animation: panFromLeft 0.7s ease-out 0.9s forwards; /* Animación con el mayor retraso */
}

#validate-btn:hover:not(:disabled) {
    background-color: var(--color-blanco);
    color: var(--color-principal);
}

/* Estilo del botón cuando está deshabilitado */
#validate-btn:disabled {
    background-color: #cccccc;
    border-color: #cccccc;
    cursor: not-allowed;
}

/* -------------------------------------------
    Ajustes para Dispositivos Medianos y Grandes
------------------------------------------- */

@media (min-width: 576px) {
    #validate-btn {
        width: 50%; /* El botón no ocupa todo el ancho */
    }
}

@media (min-width: 768px) {
    .validation-section h1 {
        font-size: 2.5rem;
    }

    .validation-section p {
        font-size: 1.1rem;
    }

    .validation-form {
        gap: 1.5rem;
    }

    .input-container input {
        padding: 1.2rem;
    }
}