/* =========================================
   main.css - Estilos Globales de CuacJobs
   Autor: Andrés Suárez González
   Versión: Responsive (Mobile-Friendly)
========================================= */

/* --- 1. VARIABLES DE COLOR --- */
:root {
    --fondo-principal: #FFFFFF;
    --fondo-secundario: #F4F7F6;
    --lago-azul: #6CB4EE;
    --pato-pastel: #FFF59D;
    --texto-profundo: #1E3A5F;
}

/* --- 2. RESET BÁSICO --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: Arial, sans-serif; 
}

body { 
    background-color: var(--fondo-secundario); 
    color: var(--texto-profundo); 
}

/* --- 3. BARRA DE NAVEGACIÓN PRINCIPAL --- */
.navbar {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 60px; 
    background-color: var(--lago-azul);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: sticky; 
    top: 0; 
    z-index: 1000;
}

.logo { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    text-decoration: none; 
    color: inherit;
}

.logo h2 { 
    color: var(--fondo-principal); 
    font-size: 26px; 
}

/* Logo corregido y consolidado */
.logo-img { 
    height: 50px; 
    width: auto; 
}

/* --- 4. ENLACES Y ANIMACIONES --- */
.nav-links { 
    display: flex; 
    gap: 50px; 
}

.nav-links a { 
    text-decoration: none; 
    color: var(--fondo-principal); 
    font-weight: bold; 
    position: relative; 
    transition: all 0.3s ease; 
}

.nav-links a::before { 
    content: '🦆'; 
    position: absolute; 
    top: -15px; 
    left: 50%; 
    transform: translateX(-50%); 
    opacity: 0; 
    font-size: 20px; 
    filter: brightness(0) invert(1); 
    transition: all 0.3s ease; 
    pointer-events: none; 
}

.nav-links a:hover { color: var(--pato-pastel); }
.nav-links a:hover::before { opacity: 1; top: -28px; }

/* --- 5. BOTONES Y ACCIONES DE USUARIO --- */
.user-actions { display: flex; align-items: center; gap: 20px; }
.user-greeting { color: var(--fondo-principal); font-weight: bold; font-size: 16px; text-align: center; }

.btn-register { text-decoration: none; color: var(--fondo-principal); font-weight: bold; transition: color 0.3s ease; }
.btn-register:hover { color: var(--pato-pastel); }

.btn-login { 
    text-decoration: none; 
    background-color: var(--pato-pastel); 
    color: var(--texto-profundo); 
    padding: 10px 24px; 
    border-radius: 25px; 
    font-weight: bold; 
    transition: transform 0.2s ease; 
    display: inline-block; 
    text-align: center;
}
.btn-login:hover { transform: scale(1.05); }
.btn-logout { background-color: #ff6b6b; color: white; }

/* --- 6. FORMULARIOS (LOGIN) --- */
.center-container { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 80px); padding: 20px;}
.card-blanca { background-color: var(--fondo-principal); padding: 40px; border-radius: 15px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); width: 100%; max-width: 400px; text-align: center; }
.card-blanca h3 { margin-bottom: 25px; font-size: 24px; }

.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; }
.form-control { width: 100%; padding: 12px; border: 2px solid #E0E0E0; border-radius: 8px; outline: none; transition: border-color 0.3s ease; }
.form-control:focus { border-color: var(--lago-azul); }

.btn-submit { width: 100%; padding: 12px; background-color: var(--lago-azul); color: var(--fondo-principal); border: none; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-top: 10px; margin-bottom: 20px; }
.btn-submit:hover { background-color: var(--texto-profundo); transform: scale(1.02); }

.login-links a { color: var(--lago-azul); text-decoration: none; font-size: 14px; font-weight: bold; }
.btn-volver { display: inline-block; padding: 10px 20px; background-color: var(--lago-azul); color: white; text-decoration: none; border-radius: 25px; font-weight: bold; margin-top: 15px; }

/* --- 7. CONTENEDOR GENERAL --- */
.main-content { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.section-title { font-size: 28px; margin-bottom: 20px; color: var(--texto-profundo); border-bottom: 3px solid var(--pato-pastel); display: inline-block; padding-bottom: 5px; }

/* =========================================
   8. HERO SLIDER (CARRUSEL PRINCIPAL)
========================================= */
.hero-slider {
    background-color: var(--fondo-principal);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 60px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.slider-main {
    position: relative;
    height: 400px;
    width: 100%;
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; 
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 40px 60px;
    background-color: var(--fondo-principal);
}

.slide.active { opacity: 1; z-index: 10; }

.slide-content { width: 50%; color: var(--texto-profundo); z-index: 2; }
.slide-content h3 { color: var(--lago-azul); font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; font-weight: bold; }
.slide-content h2 { font-size: 38px; margin-bottom: 15px; line-height: 1.2; font-weight: bold; color: var(--texto-profundo); }
.slide-content p { font-size: 16px; margin-bottom: 30px; color: #555; line-height: 1.6; }

.btn-obtener { background-color: var(--lago-azul); color: var(--fondo-principal); padding: 12px 30px; border-radius: 25px; text-decoration: none; font-weight: bold; display: inline-block; transition: background 0.3s, transform 0.2s; }
.btn-obtener:hover { background-color: var(--texto-profundo); transform: scale(1.05); }

.slide-image { width: 45%; height: 100%; display: flex; justify-content: center; align-items: center; }
.slide-image img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; }

.slider-nav { display: flex; background-color: var(--fondo-principal); border-top: 1px solid #E0E0E0; padding: 10px; gap: 10px; }
.thumb { flex: 1; display: flex; align-items: center; background-color: var(--fondo-secundario); border-radius: 8px; padding: 15px 10px; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; }
.thumb:hover { background-color: #e9eceb; }
.thumb.active { background-color: var(--fondo-principal); border-color: var(--lago-azul); box-shadow: 0 2px 8px rgba(108, 180, 238, 0.2); }
.thumb-img { width: 50px; height: 50px; border-radius: 8px; margin-right: 15px; background-size: cover; background-position: center; background-color: #E0E0E0; flex-shrink: 0; }
.thumb-text h4 { color: var(--lago-azul); font-size: 11px; text-transform: uppercase; margin-bottom: 4px; }
.thumb-text p { color: var(--texto-profundo); font-size: 13px; font-weight: bold; line-height: 1.2; }

/* --- 9. CATEGORÍAS Y FOOTER --- */
.categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.category-item { background-color: var(--fondo-principal); padding: 20px; border-radius: 10px; text-align: center; text-decoration: none; color: var(--texto-profundo); font-weight: bold; border: 2px solid transparent; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.category-item span { font-size: 30px; }
.category-item:hover { border-color: var(--lago-azul); background-color: rgba(108, 180, 238, 0.05); }

.about-section { background-color: var(--fondo-principal); padding: 50px; border-radius: 15px; text-align: center; margin-top: 60px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.about-section h2 { color: var(--lago-azul); margin-bottom: 20px; font-size: 32px; }
.about-section p { font-size: 16px; line-height: 1.8; color: #555; max-width: 800px; margin: 0 auto; }

footer { text-align: center; padding: 20px; background-color: var(--texto-profundo); color: var(--fondo-principal); margin-top: 40px; font-size: 14px; }

/* =========================================
   10. MEDIA QUERIES (ADAPTACIÓN A CELULARES)
   Todo lo que esté aquí adentro solo se aplica 
   en pantallas menores a 768px (Tablets y Teléfonos).
========================================= */
@media screen and (max-width: 768px) {
    
    /* Navbar responsivo */
    .navbar {
        flex-direction: column;
        padding: 15px 20px;
        gap: 15px;
    }
    .nav-links {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .user-actions {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    /* Ajustes del Hero Slider para apilar texto e imagen */
    .slider-main {
        height: 600px; /* Le damos más altura para que quepa todo apilado */
    }
    .slide {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
        justify-content: center;
    }
    .slide-content {
        width: 100%;
        margin-bottom: 20px;
    }
    .slide-content h2 {
        font-size: 28px;
    }
    .slide-image {
        width: 100%;
    }
    .slide-image img {
        max-height: 200px;
    }

    /* Ajuste de las miniaturas a una cuadrícula de 2x2 en celulares */
    .slider-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .thumb {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    .thumb-img {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Ajustes Generales para textos y paddings */
    .section-title { font-size: 24px; text-align: center; display: block; }
    .about-section { padding: 30px 20px; }
    
    /* Paneles de Reclutador (Para que no se rompan en celular) */
    .dashboard-container {
        flex-direction: column;
    }
    .vacante-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .vacante-acciones {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .btn-gestionar {
        flex: 1;
        text-align: center;
        padding: 10px;
    }
}