/*
================================================================================
HOJA DE ESTILOS PRINCIPAL
================================================================================

Este archivo centraliza todos los estilos de la aplicación.
Está organizado de la siguiente manera:

1.  VARIABLES GLOBALES: Colores y tamaños de fuente para todo el sitio.
    Puedes cambiar un color o tamaño aquí y se actualizará en todas partes.

2.  ESTILOS GENERALES: Estilos base para body, contenedores y botones.

3.  ESTILOS POR PÁGINA: Secciones específicas para:
    - INDEX.PHP (Formulario de bienvenida)
    - CUESTIONARIO.PHP (Preguntas y progreso)
    - RESULTADO.PHP (Tarjeta de perfil de voluntario)

4.  ESTILOS PARA COMPONENTES: Clases para elementos reutilizables.

5.  ESTILOS RESPONSIVOS: Ajustes para pantallas móviles.

*/

/* Importar la fuente Roboto Condensed desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* ==============================================================================
   1. VARIABLES GLOBALES (Tu panel de control de diseño)
   ============================================================================== */
:root {
    /* -- Paleta de Colores -- */
    --azul-oscuro: #003366;
    --naranja-acento: #F39C12;
    --verde-exito: #8CC63F;
    --gris-texto: #4A4A4A;
    --gris-claro: #E9ECEF;
    --blanco: #FFFFFF;
    --rojo-error: #dc3545;

    /* -- Tamaños de Fuente Principales -- */
    --font-size-titulo-xl: 1.9rem; /* Para títulos principales como en el index */
    --font-size-titulo-lg: 1.7rem; /* Para títulos de sección como en resultados */
    --font-size-titulo-md: 1.5rem; /* Para subtítulos o preguntas */
    --font-size-lead: 1.1rem;      /* Para texto de introducción o descripciones */
    --font-size-base: 1rem;        /* Para texto normal */
}

/* ==============================================================================
   2. ESTILOS GENERALES
   ============================================================================== */
body {
    font-family: 'Roboto', sans-serif;
    color: var(--gris-texto);
    background-image: url('../img/Fondo-Pantalla.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.logo-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

/* Estilo base para todas las tarjetas */
.card-base {
    background-color: var(--blanco);
    color: var(--gris-texto);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 1.2rem 2.5rem; /* Reducimos padding vertical */
    width: 100%;
}

/* Estilo base para todos los botones principales */
.btn {
    font-weight: 700; /* Aumentado para mejor legibilidad en Roboto Condensed */
    border-radius: 50px;
    border: none;
    transition: all 0.3s ease;
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
    letter-spacing: 0.5px; /* Ligero ajuste para esta fuente */
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    background-color: var(--naranja-acento);
    color: var(--blanco);
}
.btn-primary:hover {
    background-color: #d68910;
    color: var(--blanco);
}

.btn-secondary {
    background-color: var(--gris-texto);
    color: var(--blanco);
}
.btn-secondary:hover {
    background-color: #2f2f2f;
    color: var(--blanco);
}

/* ==============================================================================
   3. ESTILOS POR PÁGINA
   ============================================================================== */

/* ------------------------------------------------------------------------------
   PÁGINA: INDEX.PHP
   ------------------------------------------------------------------------------ */
.welcome-text-column {
    padding-right: 3rem;
}
.welcome-text-column h1 {
    font-size: var(--font-size-titulo-xl);
    color: var(--azul-oscuro);
    font-weight: 700;
}
.welcome-text-column .lead {
    font-size: var(--font-size-lead);
    color: #4A4A4A;
}
.form-control {
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--gris-claro);
    background-color: #f8f9fa;
}
.form-control:focus {
    border-color: var(--naranja-acento);
    box-shadow: 0 0 0 0.25rem rgba(243, 156, 18, 0.3);
}
/* Ajuste para alinear el logo a la izquierda solo en la página de inicio */
.welcome-text-column .logo-img {
    margin-left: 0;
    margin-right: 0;
}


/* ------------------------------------------------------------------------------
   PÁGINA: CUESTIONARIO.PHP
   ------------------------------------------------------------------------------ */
.question-column {
    padding-left: 2.5rem;
}
#question-text {
    font-size: var(--font-size-titulo-md);
    font-weight: 700;
    color: var(--naranja-acento);
}
.progress-container {
    text-align: center;
}
.progress-title {
    color: var(--azul-oscuro);
    font-weight: 700;
}
.progress-bar {
    background-image: none !important;
    animation: none !important;
    background-color: var(--naranja-acento) !important;
}
.option-btn {
    display: block; width: 100%; padding: 1rem; margin-bottom: 0.75rem;
    border: 2px solid var(--gris-claro); border-radius: 15px; text-align: left;
    font-weight: 700; background-color: var(--blanco); color: var(--gris-texto);
    text-decoration: none; transition: all 0.3s ease;
}
.option-btn:hover {
    transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    border-color: var(--naranja-acento); color: var(--azul-oscuro); cursor: pointer;
}
#quiz-container {
    position: relative;
    transition: opacity 0.3s ease-in-out;
}
#loading-spinner {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 10;
}

/* ------------------------------------------------------------------------------
   PÁGINA: RESULTADO.PHP
   ------------------------------------------------------------------------------ */
.profile-column {
    text-align: center;
    padding-right: 2rem;
}
.company-logo-top {
    display: block;
    /* Centramos el logo y aplicamos margen inferior para el efecto de superposición */
    margin: 30px auto -80px auto;
    max-width: 300px; /* Reducimos más el tamaño */
    width: auto;
    height: 100%;
    /* Aseguramos que el logo esté por encima de la imagen */
    position: relative;
    z-index: 1;
}
.profile-image {
    display: block;
    margin: 0.2rem auto 0; /* Reducimos más el margen superior */
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px; /* Bordes ligeramente redondeados para un look más suave */
}
.profile-category {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--naranja-acento);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
}
.description-column {
    padding-left: 2rem;
}
/* Contenedor del botón "Ver Actividades" para superponerlo */
.activity-button-container {
    margin-top: -40px;
    position: relative;
    z-index: 2; /* Nos aseguramos que esté por encima de la imagen y el logo */
}
.congrats-text {
    color: var(--gris-texto);
    font-size: 1.4rem; /* Reducimos tamaño de fuente */
    font-weight: 300;
    margin-bottom: 0.1rem; /* Reducimos más el margen */
}
.profile-name {
    font-size: 1.3rem; /* Reducimos tamaño de fuente */
    font-weight: 700;
    color: var(--naranja-acento);
    margin-bottom: 0.4rem; /* Ajustamos margen */
}
.description-title {
    font-weight: 700;
    color: var(--gris-texto);
    margin-bottom: 0.5rem; /* Reducimos margen */
    font-size: var(--font-size-h3);
}
.description-text {
    font-size: var(--font-size-lead);
    line-height: 1.7;
    color: #555;
}

.thanks-title {
    color: var(--naranja-acento);
}

.logo-outside-card-top {
    max-width: 250px;
    margin-bottom: 20px;
}

.logo-outside-card-bottom {
    max-width: 100px;
    margin-top: 40px;
}

/* ==============================================================================
   4. ESTILOS PARA COMPONENTES
   ============================================================================== */

.btn-custom-blue {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
    border: 2px solid var(--azul-oscuro);
}

.btn-custom-blue:hover {
    background-color: #002244; /* Un azul un poco más oscuro para el hover */
    color: var(--blanco);
    border-color: #002244;
}

/* Estilo para hacer que un botón parezca un enlace de texto */
.btn-as-link {
    background-color: transparent;
    border: none;
    color: var(--azul-oscuro);
    text-decoration: none;
    /* Anulamos los efectos de sombra y transformación del .btn base */
    transform: none;
    box-shadow: none;
}

.btn-as-link:hover {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
    /* Restauramos los efectos de hover del .btn base */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


/* ==============================================================================
   5. ESTILOS RESPONSIVOS (MÓVIL)
   ============================================================================== */
@media (max-width: 991.98px) {
    /* -- Ajustes para INDEX.PHP en móvil -- */
    .logo-img {
        max-width: 90%; /* Se ajustará al 50% del ancho del contenedor */
        height: auto;     /* Mantiene la proporción correcta */
        margin-bottom: 20px ;
        margin-top: 0px;/* Añade margen y centra la imagen */
        display: block;   /* Requerido para que el centrado con 'margin: auto' funcione */
    }
    .welcome-text-column h1 {
    font-size: 1.3rem;
    font-weight: 700;
    }
    .welcome-text-column {
         padding-right: 0;
         text-align: center; 
    }

    /* Restauramos el centrado del logo en la página de inicio para la vista móvil */
    .welcome-text-column .logo-img {
        margin-left: auto;
        margin-right: auto;
    }

    .welcome-text-column .lead {
    font-size: 0.9rem;
    }
    .card-base { margin-top: 0.3rem; }

    /* -- Ajustes para CUESTIONARIO.PHP en móvil -- */
    .question-column { border-left: none; padding-left: 0; margin-top: 2rem; }

    .col-lg-5.text-center .logo-img {
        margin-bottom: 1.5rem !important; /* Reducimos el margen inferior */
    }

    /* -- Ajustes para RESULTADO.PHP en móvil -- */
    .result-card-container { padding: 1.5rem; }
    .profile-column { padding-right: 0; margin-bottom: 2rem; }
    /* Anulamos la superposición del botón en móvil */
    .activity-button-container {
        margin-top: 1rem;
        z-index: 0;
    }
    .profile-category {
        margin-top: 0rem; /* Añadimos espacio sobre la categoría en móvil */
    }
    .description-column { padding-left: 0; text-align: center; }
    .congrats-text { font-size: 1.2rem; }
    .profile-name {font-size: 1.1rem;}

    .company-logo-top {
       margin: 30px auto -40px auto;
       max-width: 180px; /* Ajuste para tablet */
    }

    .profile-image {
        max-width: 250px; /* Ajuste para tablet */
    }

    .logo-outside-card-top {
    max-width: 90%;
    margin-bottom: 20px;
    margin-top: -80px;
}

.logo-bottom-mobile {
    max-width: 100px;
}
}

@media (max-width: 768px) {
    body {
        background-image: url('../img/Fondo-celu.jpg');
    }
}