/* css/style.css */

/* Variables para la paleta de colores de Padel 30-15 */
:root {
    --color-neon-green: #90EE02; /* Verde neón brillante, ajustado para web */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-dark-grey: #222222; /* Para el fondo de contenedores, contrasta con el negro puro */
    --color-light-grey: #DDDDDD; /* Para bordes o separadores sutiles (no muy usado en esta paleta) */
    --color-error: #FF6347; /* Un rojo vibrante para mensajes de error, contrastante */
    --font-primary: 'Arial', sans-serif; /* Fuente principal */
    /* Puedes añadir más fuentes si las importas (ej. Google Fonts) */
    /* --font-secondary: 'Montserrat', sans-serif; */
}

/* Estilos Generales para el Body */
body {
    font-family: var(--font-primary); /* Usa la fuente definida */
    margin: 0;
    padding: 20px;
    background-color: var(--color-black); /* Fondo principal negro */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa al menos el 100% de la altura de la ventana */
    box-sizing: border-box; /* Incluye padding y borde en el ancho/alto total */
    color: var(--color-white); /* Color de texto predeterminado para el body */
    line-height: 1.6; /* Espaciado entre líneas para mejor lectura */
}

/* Contenedor Principal del Formulario/Contenido */
.container {
    background-color: var(--color-dark-grey); /* Fondo gris oscuro para el contenedor */
    padding: 30px;
    border-radius: 10px; /* Bordes ligeramente redondeados */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Sombra para darle profundidad */
    max-width: 500px; /* Ancho máximo del contenedor */
    width: 100%; /* Ocupa todo el ancho disponible hasta el max-width */
    text-align: center;
    border: 1px solid var(--color-neon-green); /* Borde sutil del color principal */
}

/* Estilos para el Título Principal */
h1 {
    color: var(--color-neon-green); /* Títulos en verde neón */
    margin-bottom: 25px;
    font-size: 2.2em; /* Tamaño de fuente más grande */
    text-transform: uppercase; /* Convertir a mayúsculas */
    letter-spacing: 1.5px; /* Espaciado entre letras para un efecto "deportivo" */
    font-weight: bold; /* Negrita */
}

/* Contenedor del Logo */
.logo-container {
    margin-bottom: 25px; /* Espacio debajo del logo */
    text-align: center; /* Centra el contenido (la imagen) */
}

/* Imagen del Logo */
.logo {
    max-width: 180px; /* Ancho máximo para el logo, ajusta según el tamaño de tu imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Para permitir que margin: auto lo centre */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    filter: drop-shadow(0 0 8px var(--color-neon-green)); /* Sombra exterior para un efecto de brillo */
    /* Puedes experimentar con box-shadow si el logo tiene fondo transparente y quieres una "caja de sombra" */
}

/* Grupo de Formulario (Label + Input) */
.form-group {
    margin-bottom: 25px;
    text-align: left; /* Alinea el label y el input a la izquierda */
}

/* Etiquetas del Formulario */
label {
    display: block; /* Cada label en su propia línea */
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--color-white); /* Etiquetas en blanco */
    font-size: 1.1em;
}

/* Campos de Entrada de Correo */
input[type="email"] {
    width: calc(100% - 24px); /* 100% menos el padding y los bordes */
    padding: 12px;
    border: 2px solid var(--color-neon-green); /* Borde verde neón */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 1.05em;
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    background-color: var(--color-black); /* Fondo del input negro */
    color: var(--color-white); /* Color del texto dentro del input */
    caret-color: var(--color-neon-green); /* Color del cursor (caret) */
}

/* Placeholder del Input */
input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6); /* Placeholder más sutil */
}

/* Estilo del Input al Enfocar (Focus) */
input[type="email"]:focus {
    border-color: var(--color-white); /* Borde blanco al enfocar */
    outline: none; /* Elimina el contorno predeterminado del navegador */
    box-shadow: 0 0 10px rgba(144, 238, 2, 0.5); /* Sombra brillante alrededor del input */
}

/* Estilos para los Botones (General) */
button {
    background-color: var(--color-neon-green); /* Fondo verde neón */
    color: var(--color-black); /* Texto del botón en negro para contraste */
    padding: 15px 30px;
    border: none; /* Sin borde */
    border-radius: 8px;
    cursor: pointer; /* Indica que es clickeable */
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves para hover */
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 300px; /* Ancho máximo del botón */
    margin-top: 20px;
    text-transform: uppercase; /* Texto del botón en mayúsculas */
    letter-spacing: 1px;
}

/* Efecto Hover para los Botones */
button:hover {
    background-color: var(--color-white); /* Blanco al pasar el mouse */
    color: var(--color-black); /* Texto negro al pasar el mouse */
    transform: translateY(-2px); /* Pequeño efecto de "elevación" */
}

/* Área de Visualización del Código QR */
.qr-code-display {
    margin: 40px 0; /* Espacio arriba y abajo */
    border: 2px dashed var(--color-neon-green); /* Borde punteado en verde neón */
    padding: 25px;
    border-radius: 12px;
    background-color: var(--color-black); /* Fondo del área del QR negro */
}

/* Imagen del Código QR */
.qr-image {
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: auto; /* Mantiene la proporción */
    display: block; /* Elimina el espacio extra debajo de las imágenes */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    border: 2px solid var(--color-white); /* Borde blanco alrededor del QR */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra para darle más relieve */
}

/* Sección de Descarga (Botón de PDF) */
.download-section {
    margin-top: 30px;
}

/* Botón de Descarga de PDF (Estilo diferente) */
.download-section button {
    background-color: var(--color-white); /* Fondo blanco */
    color: var(--color-black); /* Texto negro */
    border: 2px solid var(--color-neon-green); /* Borde verde neón */
}

/* Efecto Hover para el Botón de Descarga */
.download-section button:hover {
    background-color: var(--color-neon-green); /* Verde neón al pasar el mouse */
    color: var(--color-black);
    border-color: var(--color-white); /* Borde blanco al pasar el mouse */
}

/* Mensajes de Error */
.error-message {
    color: var(--color-error); /* Texto rojo vibrante */
    background-color: rgba(255, 99, 71, 0.2); /* Fondo semitransparente del color de error */
    border: 1px solid var(--color-error);
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
    font-weight: bold;
}

/* Estilos para Enlaces */
a {
    color: var(--color-neon-green); /* Enlaces en verde neón */
    text-decoration: none; /* Sin subrayado predeterminado */
    margin-top: 25px;
    display: inline-block; /* Permite aplicar márgenes y transformaciones */
    font-weight: bold;
    transition: color 0.3s ease; /* Transición suave para el color del enlace */
}

/* Efecto Hover para Enlaces */
a:hover {
    text-decoration: underline; /* Subrayado al pasar el mouse */
    color: var(--color-white); /* Blanco al pasar el mouse por el enlace */
}

/* ========================================= */
/* Media Queries para Responsividad */
/* ========================================= */

/* Para pantallas medianas (ej. tabletas en vertical, laptops pequeñas) */
@media (max-width: 768px) {
    body {
        padding: 15px; /* Menos padding en el body */
    }
    .container {
        padding: 25px; /* Menos padding en el contenedor */
        margin: 15px; /* Margen para no pegarse a los bordes de la pantalla */
    }
    h1 {
        font-size: 1.8em; /* Título un poco más pequeño */
    }
    .logo {
        max-width: 150px; /* Logo más pequeño */
    }
    input[type="email"], button {
        font-size: 1em; /* Ajuste del tamaño de fuente */
        padding: 10px; /* Menos padding en inputs y botones */
    }
    button {
        max-width: 280px; /* Ajuste para el ancho máximo del botón */
    }
    .qr-code-display {
        margin: 30px 0; /* Menos margen */
        padding: 20px; /* Menos padding */
    }
}

/* Para pantallas pequeñas (ej. teléfonos móviles) */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    .container {
        padding: 20px;
        margin: 10px;
        border-radius: 8px; /* Bordes ligeramente menos redondeados */
    }
    h1 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    .logo {
        max-width: 120px; /* Logo aún más pequeño */
    }
    label {
        font-size: 1em;
        margin-bottom: 8px;
    }
    input[type="email"] {
        padding: 10px;
        font-size: 0.95em;
        border-radius: 6px;
    }
    button {
        padding: 12px 25px;
        font-size: 1.1em;
        max-width: 100%; /* Botones de ancho completo en móviles */
    }
    .qr-code-display {
        margin: 25px 0;
        padding: 15px;
        border-radius: 10px;
    }
    .qr-image {
        border-width: 1px; /* Borde del QR más delgado */
    }
    .error-message {
        padding: 8px;
        font-size: 0.9em;
    }
    a {
        margin-top: 20px;
        font-size: 0.95em;
    }
}

/* Ajuste adicional para dispositivos muy pequeños */
@media (max-width: 320px) {
    .container {
        padding: 15px;
    }
    h1 {
        font-size: 1.4em;
    }
    .logo {
        max-width: 100px;
    }
    button {
        padding: 10px 20px;
        font-size: 1em;
    }
}