/* IMPORTAR FUENTES LOCALES - Trae las tipografías descargadas en /static/fonts/. NASALIZATION-RG es la principal (títulos) y Roboto-Medium es la secundaria (texto general). Estas son las tipografías oficiales de VIRAL */
@font-face {
    font-family: 'NASALIZATION';
    src: url('/static/fonts/nasalization-rg.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('/static/fonts/Roboto-Medium.ttf') format('truetype');
}

/* VARIABLES CSS - Define colores y estilos reutilizables en todo el CSS. Estos son los colores oficiales de VIRAL. Si necesitas cambiar un color, solo lo haces aquí */
:root {
    --color-primary: #fc5a00;
    --color-primary-dark: #e04d00;
    --color-secondary: #d8ff4b;
    --color-dark: #0d0f34;
    --color-dark-light: #1a1f4d;
    --color-text: #212529;
    --font-body: 'Roboto-Medium', sans-serif;
    --font-heading: 'NASALIZATION', sans-serif;
}

/* RESETEO GLOBAL - Elimina todos los estilos por defecto que trae el navegador (márgenes, paddings, etc). Esto asegura que el diseño se vea igual en todos los navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTILOS DEL BODY - Configura el fondo principal de la página con un degradado profesional usando el azul oficial de VIRAL. También centra el contenedor formulario en la pantalla */
body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, #0d0f34 0%, #1a1f4d 50%, #2d1b4e 100%);
    min-height: 100vh;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CONTENEDOR PRINCIPAL - Caja blanca que contiene todo el formulario. Aquí puedes cambiar el border-radius para hacerla más o menos redondeada, o el padding para más/menos espacio interior */
.container {
    background: white;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}

/* BARRA SUPERIOR DEL CONTENEDOR - Linea decorativa en la parte superior con degradado naranja a verde fluorescente. Este es el elemento visual que identifica la marca */
.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* SECCION DEL LOGO - Contenedor que agrupa la imagen del logo y el texto VIRAL. El padding-top agrega espacio para que no choque con la barra superior */
.logo {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 15px;
}

/* TEXTO DEL LOGO - Estilos para el texto VIRAL con gradiente de colores. Si necesitas mostrar solo texto en lugar de imagen, usa la clase .logo-text. La fuente es Poppins para un toque moderno */
.logo-text {
    font-size: 42px;
    font-weight: 700;
    font-family: var(--font-heading);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
}

/* IMAGEN DEL LOGO - NUEVO: Estilo para la imagen PNG del logo VIRAL que se carga desde la carpeta static. Puedes cambiar max-width para que la imagen sea más grande o pequeña */
.logo img {
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* TITULO PRINCIPAL - Texto "Registro" con tipografia Poppins (premium). Es lo primero que ven los usuarios después del logo. El color viene de las variables CSS */
h2 {
    color: var(--color-dark);
    font-size: 32px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

/* SUBTITULO - Texto descriptivo bajo el titulo "Completa tu verificación de identidad". Es más pequeño y de un gris suave para que sea secundario */
.subtitle {
    color: #888;
    text-align: center;
    font-size: 15px;
    margin-bottom: 30px;
    font-family: var(--font-body);
    font-weight: 500;
}

/* CONTENEDOR DE MENSAJES DE ALERTA - Caja que muestra errores (imagen inválida, campos faltantes, etc) o mensajes de éxito después de enviar */
.alert-messages {
    margin-bottom: 25px;
}

/* LISTA DE MENSAJES - Elimina los puntos de lista por defecto para dejar mensajes limpios */
.alert-messages ul {
    list-style: none;
}

/* ESTILO DE CADA MENSAJE - Cada mensaje tiene fondo naranja claro, borde naranja a la izquierda y texto rojo. Esto hace que destaquen visualmente */
.alert-messages li {
    background: #FFE5CC;
    border-left: 5px solid var(--color-primary);
    color: #D84315;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-body);
}

/* GRUPO DE FORMULARIO - Espaciado entre cada campo (Teléfono, Foto de persona, etc). Agrupa visual y funcionalmente cada campo */
.form-group {
    margin-bottom: 22px;
}

/* ETIQUETAS - Texto que describe cada campo (Teléfono, Foto de la persona, etc). Usa el color oscuro de las variables y es más pesado (600) para destacar */
label {
    display: block;
    color: var(--color-dark);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
    font-family: var(--font-body);
}

/* CAMPOS DE TEXTO E INPUT DE ARCHIVO - Estilos para los inputs donde el usuario ingresa datos o carga archivos. El fondo es gris claro y el borde es gris suave */
input[type="text"],
input[type="file"] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #F8F9FA;
    font-family: var(--font-body);
}

/* EFECTO AL HACER CLICK EN INPUTS - Cuando el usuario hace click en un campo, el borde se pone naranja y aparece una sombra naranja suave. Esto indica que el campo está activo */
input[type="text"]:focus,
input[type="file"]:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.1);
}

/* CAMPO DE TELEFONO DESHABILITADO - El campo del teléfono tiene readonly (no editable) porque ya viene del servidor. Este estilo lo muestra gris para indicar que no se puede cambiar */
input[type="text"]:readonly {
    background: #F0F0F0;
    color: #666;
    cursor: not-allowed;
}

/* CAMPO DE ARCHIVO - Ajustes especiales para los inputs de tipo file (carga de imágenes). El padding es menor para que se vea bien */
input[type="file"] {
    padding: 12px;
    cursor: pointer;
}

/* BOTON DE SELECCIONAR ARCHIVO - Estilo del botón naranja dentro del input file. Cuando clickeas en un input file, aparece este botón */
input[type="file"]::file-selector-button {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    margin-right: 10px;
    transition: background 0.3s ease;
    font-family: var(--font-body);
}

/* EFECTO HOVER DEL BOTON DE ARCHIVO - Cuando pasas el mouse sobre el botón "Seleccionar archivo", el color se oscurece un poco para dar feedback visual */
input[type="file"]::file-selector-button:hover {
    background: var(--color-primary-dark);
}

/* BOTON DE ENVIO - Estilo del botón principal "ENVIAR DOCUMENTOS". Es grande, con gradiente naranja, uppercase y con sombra. Este es el elemento más importante visualmente */
button[type="submit"] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #FF8533 100%);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.3);
    font-family: var(--font-heading);
}

/* EFECTO HOVER DEL BOTON - Cuando pasas el mouse sobre el botón de envío, se levanta un poco (translateY) y la sombra se hace más grande, dando efecto de profundidad */
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 102, 0, 0.4);
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #FF7A1F 100%);
}

/* EFECTO CLICK DEL BOTON - Cuando clickeas el botón, vuelve a su posición normal (sin levantarse). Esto da feedback visual de que se clickeó */
button[type="submit"]:active {
    transform: translateY(0);
}

/* CAJA DE DESCRIPCION - Recuadro con fondo oscuro (igual al del body con el nuevo azul oficial de VIRAL) que muestra información adicional. El texto importante está en verde fluorescente para destacar */
.form-description {
    background: linear-gradient(135deg, #0d0f34 0%, #1a1f4d 100%);
    color: white;
    padding: 20px;
    border-radius: 15px;
    margin-top: 30px;
    font-size: 13px;
    line-height: 1.6;
    font-family: var(--font-body);
}

/* TEXTO IMPORTANTE EN LA DESCRIPCION - El texto dentro de <strong> en .form-description se pone en color verde fluorescente para destacar información importante */
.form-description strong {
    color: var(--color-secondary);
    font-weight: 600;
}

/* INDICADOR DE CAMPO OBLIGATORIO - El asterisco (*) rojo en los campos que son obligatorios. Así el usuario sabe cuáles campos debe llenar sí o sí */
.required-badge {
    color: var(--color-primary);
    font-weight: bold;
}

/* ESTILOS RESPONSIVOS - Estos estilos se aplican solo en pantallas pequeñas (telefonos y tablets, menores a 600px). El formulario se ajusta para verse bien en móviles */
@media (max-width: 600px) {
    .container {
        padding: 40px 20px;
        border-radius: 20px;
    }

    h2 {
        font-size: 24px;
    }

    .logo-text {
        font-size: 28px;
    }

    button[type="submit"] {
        font-size: 14px;
        padding: 14px;
    }
}

/*Boton de Selfie*/
#btnFoto {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #FF8533 100%);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.3);
    font-family: var(--font-heading);
}

.selfie-container {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centra horizontal */
    justify-content: center;
    text-align: center;
}