/* TOOLBAR.CSS */
/*
 * PÁGINA: Hoja de Estilos de la Barra de Navegación (Toolbar CSS) - As Tech Computer
 * PROPÓSITO: Definir la apariencia visual, la estructura tipográfica y el comportamiento responsivo de la barra de navegación principal y sus submenús.
 * FUNCIONALIDADES: 
 * - Establece la paleta de colores corporativa (naranja, púrpura, blanco, negro) mediante variables globales (CSS custom properties).
 * - Controla el alineamiento perfecto de enlaces y logotipos utilizando Flexbox y CSS Grid.
 * - Gestiona las animaciones suaves (transiciones de opacidad, transformaciones) para el despliegue del Mega Menú y el Buscador.
 * - Implementa el diseño adaptativo (Media Queries) para transformar la barra horizontal en un menú lateral desplegable (tipo hamburguesa) en dispositivos móviles y tabletas.
 */

/* ========================================================
   1. VARIABLES GLOBALES Y RESET DE ESTILOS
   ======================================================== */
/**
 * El sistema define los colores corporativos de AsTech Computer a nivel de raíz (:root)
 * para facilitar su reutilización y mantenimiento. También resetea los márgenes 
 * por defecto del navegador para garantizar una visualización consistente.
 */
:root {
    --naranja-principal: #e17203;
    --purpura-oscuro: #52073a;
    --blanco: #FFFFFF;
    --negro-texto: #000000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
}

/* ========================================================
   2. ESTRUCTURA PRINCIPAL DE LA BARRA DE NAVEGACIÓN
   ======================================================== */
/**
 * Se utiliza Flexbox para distribuir el logotipo a la izquierda, 
 * los enlaces en el centro/derecha y mantener una altura fija de 60px.
 * Una sombra suave inferior separa visualmente la barra del resto del contenido.
 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    height: 60px;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.logo img {
    height: 40px; 
    margin-top: 10px;
}

.menu ul {
    display: flex;
    gap: 30px;
    list-style: none;
    height: 100%;
    align-items: center;
}

.menu a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: color 0.3s;
}

.menu a:hover{
    color: #54015f;
}

/* ========================================================
   3. CONFIGURACIÓN DEL MEGA MENÚ DESPLEGABLE
   ======================================================== */
/**
 * El Pseudo-elemento (::after) crea un puente invisible que evita 
 * que el menú se cierre accidentalmente cuando el usuario mueve 
 * el cursor del enlace hacia el contenedor del Mega Menú.
 */
.servicios-hover::after {
    height: 30px;
    content: "";
    position: absolute;
    top: 40px;
    right: 215px;
    z-index: 100000;
    width: 100px;
}

.servicios-hover:hover .mega-menu {
    display: block;
}

.mega-menu-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 40px;
}

/**
 * El contenedor del Mega Menú se oculta usando opacidad y visibilidad 
 * (en lugar de display: none) para permitir una animación de entrada suave,
 * desplazándose ligeramente desde abajo (translateY).
 */
.mega-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.4s ease-in-out;
    pointer-events: none; 
    border-top: 4px solid var(--naranja-principal);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    position: absolute;
    left: 0;
    width: 100vw;
    background: var(--blanco);
    overflow: hidden;
    z-index: 1000;
    cursor: default;
    top: 100%; 
    margin-top: 0px;
}

.servicios-hover:hover .mega-menu,
.mega-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* ========================================================
   4. ACORDEÓN IZQUIERDA (TIPOS DE SERVICIOS)
   ======================================================== */
.menu-izquierda {
    width: 50%;
    padding-right: 20px;
}

.acordeon-item {
    border-bottom: 1px solid #f4f4f4;
}

.titulo-tipo-btn {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 15px 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--negro-texto);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
}

.titulo-tipo-btn:hover, .titulo-tipo-btn.active {
    color: var(--naranja-principal);
}

/**
 * Ocultamiento dinámico del submenú animando su altura máxima.
 */
.submenu-desplegable {
    max-height: 0;
    overflow: hidden;
    display: block;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    padding: 0 0 0 20px;
}

.submenu-desplegable.active {
    max-height: 500px;
    opacity: 1;
    padding: 10px 0 15px 20px;
}

.submenu-desplegable a {
    display: block;
    color: #555;
    padding: 8px 0;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

/* Efecto de deslizamiento al posicionar el cursor sobre un subservicio */
.submenu-desplegable a:hover {
    color: var(--naranja-principal);
    transform: translateX(5px); 
}

/* ========================================================
   5. PANEL DERECHA (SERVICIOS RECIENTES / TARJETAS)
   ======================================================== */
.menu-derecha {
    width: 50%;
    border-left: 1px solid #eee;
    padding-left: 40px;
}

.label-recientes {
    color: var(--naranja-principal);
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 13px;
    letter-spacing: 1px;
}

.grid-recientes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.tarjeta {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #eee;
    position: relative;
}

.tarjeta img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.tarjeta h4 {
    margin-top: 10px;
    font-size: 12px;
}

/* Etiqueta flotante de "Nuevo" en las tarjetas */
.badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--naranja-principal);
    color: white;
    padding: 2px 8px;
    font-size: 10px;
    border-radius: 4px;
    font-weight: bold;
}

.botones a:hover{
    transition: max-height 0.3s ease, opacity 0.3s ease;
    color: #910079;
    text-decoration: underline #ff6811;
}

/* ========================================================
   6. ESTILOS DEL BUSCADOR INTEGRADO
   ======================================================== */
/**
 * El contenedor del buscador se sitúa por encima del contenido actual 
 * de la página, bajando suavemente desde la parte superior.
 */
.buscador-oculto {
    display: flex; 
    flex-direction: column;
    align-items: center;
    background: rgb(236, 235, 235);
    width: 100%;
    height: 80%;
    padding: 20px;
    position: absolute;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-80px);
    transition: all 0.3s ease-out;
}

.buscador-oculto.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#inputBuscador {
    width: 800px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #dfdfdf;
    outline: none;
    margin-bottom: 10px;
}

#inputBuscador:focus{
    outline: 3px solid #ff6811;
    transform: scale(1.1);
}

.resultado-item {
    padding: 10px;
    margin-bottom: 15px;
    color:#616161;
    font-size: 1.2rem;
    border-bottom: 2px solid #7574747a;
    cursor: pointer;
    width: 800px;
}

/* Animaciones de realce para los resultados del buscador */
.resultado-item:hover {
    background: #acacac49;
    transform: scale(1.1);
    transition: all 0.3 ease-out;
    border-radius: 5px;
    color:#202020;
    font-size: 1.3rem;
    border-bottom: 2px solid #242424f1;
}

.resultado-item:active {
    background: #ff4107ad;
    transform: scale(1.0);
    transition: all 0.3 ease-out;
    border-radius: 5px;
    color:#ffffff;
    font-size: 1.3rem;
    border-bottom: 2px solid #fffffff1;
}

/* ========================================================
   7. DISEÑO RESPONSIVO PREMIUM BLINDADO (MÓVILES Y TABLETS)
   ======================================================== */
.menu-toggle {
    display: none;
    font-size: 28px;
    color: #e17203;
    cursor: pointer;
}

@media (max-width: 992px) {
    /* 1. Mostrar la hamburguesa y alinear la barra */
    .menu-toggle {
        display: block;
        margin-left: auto;
    }
    
    .navbar {
        padding: 0 20px; 
    }

    /* 2. Menú lateral deslizante y blindado con z-index alto */
    .menu ul {
        position: fixed; 
        top: 60px;
        left: -100%;
        flex-direction: column;
        align-items: flex-start; 
        gap: 0; 
        background: #ffffff !important; 
        width: 100%;
        height: calc(100vh - 60px);
        transition: left 0.3s ease-in-out;
        box-shadow: 5px 10px 20px rgba(0,0,0,0.15);
        z-index: 999999 !important; 
        overflow-y: auto; 
        padding: 0;
        margin: 0;
    }

    .menu ul.active {
        left: 0; 
    }

    /* 3. Reestructuración de enlaces a formato de lista móvil */
    .menu ul li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        margin: 0;
        padding: 0;
    }

    .menu ul li a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 25px;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        background-color: #ffffff; 
        color: #333333;
    }

    .menu ul li a:hover {
        background-color: #fcfcfc;
    }

    /* Ocultar el puente invisible (solo necesario en Desktop) */
    .servicios-hover::after {
        display: none; 
    }

    /* 4. Adaptación del Mega Menú para flujo vertical (Acordeón móvil) */
    .mega-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border-top: none;
        transform: none;
        display: none; 
        opacity: 1;
        visibility: visible;
        padding: 0;
        background-color: #ffffff !important; 
    }

    .servicios-hover.active .mega-menu {
        display: block; 
    }

    .mega-menu-content {
        flex-direction: column;
        padding: 0 25px 20px 25px; 
    }

    .menu-izquierda, .menu-derecha {
        width: 100%;
        padding: 0;
        border-left: none; 
    }

    .menu-derecha {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eeeeee; 
    }

    /* 5. Ajustes de anchos para el Buscador en pantallas pequeñas */
    #inputBuscador {
        width: 90%;
        max-width: 400px;
    }

    .resultado-item {
        width: 90%;
        max-width: 400px;
        font-size: 1rem;
    }

    .resultado-item:hover, .resultado-item:active {
        font-size: 1.1rem;
    }
}