/* ------------------------------------------------- */
/* Estilos Globales */
body {
    margin: 0; /* Sin márgenes en el cuerpo */
    height: auto; /* Altura automática para el cuerpo */
    
    /* Usamos flexbox para centrar el contenido */
    display: flex; 
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */

    /* Configuración de la fuente y el fondo */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía */
    background-color: rgba(20, 20, 20, 1) !important; /* Color de fondo sólido */
    background-image: url('/images/fondo/fondo.jpg'); /* Imagen de fondo */
    background-size: cover; /* Hace que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen en el fondo */
}

/* ------------------------------------------------- */
/* Contenedor Principal */
.container {
    max-width: 400px; /* Limita el ancho máximo del contenedor */
    padding: 24px; /* Espacio interno alrededor del contenido */
    background-color: rgba(34, 34, 34, 0.8); /* Fondo oscuro y semitransparente */
    border-radius: 8px; /* Esquinas redondeadas */
    
    /* Usamos flexbox para centrar el contenido interno */
    display: flex; 
    justify-content: center; 
    align-items: center; 

    /* Animación de parpadeo para el contenedor */
    animation: parpadeo 1.5s infinite; 
}

/* ------------------------------------------------- */
/* Logo */
.logo {
    display: block; /* Comportamiento de bloque para el logo */
    margin: 0 auto 20px; /* Centra el logo y añade margen abajo */
    max-width: 100%; /* Asegura que el logo no sobrepase el contenedor */
    height: auto; /* Mantiene la proporción del logo */
}

/* ------------------------------------------------- */
/* Formulario */
.form-container {
    text-align: center; /* Centra el texto dentro del contenedor */
    width: 100%; /* Ancho completo */
}

h1 {
    font-size: 24px; /* Tamaño del texto del título */
    color: white; /* Color del texto en blanco */
    margin-bottom: 20px; /* Espacio debajo del título */
}

/* ------------------------------------------------- */
/* Inputs y Selects */
input[type="email"],
select {
    width: 100%; /* Ancho completo para inputs y selects */
    box-sizing: border-box; /* Incluye el padding y borde en el ancho total */
    margin-bottom: 20px; /* Espacio debajo de cada elemento */
    padding: 12px; /* Espacio interno */
    border: 1px solid #333; /* Borde oscuro */
    border-radius: 4px; /* Esquinas ligeramente redondeadas */
    background-color: #333; /* Fondo oscuro */
    color: white; /* Color del texto en blanco */
    font-size: 14px; /* Tamaño del texto */
}

/* ------------------------------------------------- */
/* Botón */
button {
    width: 100%; /* Ancho completo del botón */
    padding: 12px; /* Espacio interno */
    border: none; /* Sin borde visible */
    border-radius: 4px; /* Esquinas redondeadas */
    background-color: #e50914; /* Color de fondo rojo */
    color: white; /* Color del texto en blanco */
    font-size: 18px; /* Tamaño del texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease; /* Transición suave al cambiar de color */
}

button:hover {
    background-color: #f40612; /* Color de fondo más claro al pasar el mouse */
}

/* ------------------------------------------------- */
/* Contenedor de Resultados */
.resultado-container {
    margin-top: 20px; /* Espacio encima del contenedor de resultados */
}

.resultado {
    background-color: #444; /* Fondo gris oscuro */
    border-radius: 8px; /* Esquinas redondeadas */
    color: white; /* Color del texto en blanco */
    overflow: hidden; /* Oculta el contenido que sobresale */

    /* Usamos flexbox para centrar el contenido dentro */
    display: flex; 
    justify-content: center; /* Centra horizontalmente */
    flex-direction: column; /* Organiza el contenido en columna */
    align-items: center; /* Centra verticalmente */
}

/* ------------------------------------------------- */
/* Estilos de Tabla (si es necesario) */
td.container {
    background-color: #ffffff !important; /* Fondo blanco para celdas */
}

/* ------------------------------------------------- */
/* Animación */
@keyframes parpadeo {
    0% {
        box-shadow: 
            0 0 10px rgba(0, 255, 255, 0.5),
            0 0 20px rgba(0, 255, 255, 0.6),
            0 0 30px rgba(0, 255, 255, 0.7),
            0 0 40px rgba(0, 255, 255, 0.8); /* Sombra inicial */
    }
    50% {
        box-shadow: 
            0 0 5px rgba(0, 255, 255, 0.3),
            0 0 10px rgba(0, 255, 255, 0.4),
            0 0 15px rgba(0, 255, 255, 0.5),
            0 0 20px rgba(0, 255, 255, 0.6); /* Sombra intermedia */
    }
    100% {
        box-shadow: 
            0 0 10px rgba(0, 255, 255, 0.5),
            0 0 20px rgba(0, 255, 255, 0.6),
            0 0 30px rgba(0, 255, 255, 0.7),
            0 0 40px rgba(0, 255, 255, 0.8); /* Sombra final */
    }
}