/**
 * Galería tipo Pinterest - Estilos CSS Optimizados
 * 
 * Mejoras específicas para botones de filtrado
 * - Diseño compacto y eficiente
 * - Eliminación de redundancias
 * - Colores modernos y atractivos
 *
 * @version 1.4.0
 */

/* Variables CSS actualizadas */
:root {
    /* Colores base */
    --color-primary: #37474F; /* Gris azulado oscuro */
    --color-primary-dark: #263238; /* Casi negro azulado */
    --color-primary-light: #546E7A; /* Gris azulado medio */
    
    /* Colores para botones específicos */
    --color-junior: #5B6ABB; 
    --color-bunk: #a9c11f; 
    --color-wall: #c876d8; 
    --color-pullout: #a4bf58; 
    --color-kids: #4ca0c4; 
    --color-baby: #c28f58; 
    --color-wardrobes: #54a9b0; 
    
    /* Espaciado */
    --gap-small: 8px;
    --gap-medium: 16px;
    --padding-button: 10px 16px;
    
    /* Sombras */
    --shadow-button: 0 2px 5px rgba(0, 0, 0, 0.15);
    --shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    /* Bordes */
    --radius-button: 4px;
    
    /* Transiciones */
    --transition-button: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   MENÚ DE FILTROS OPTIMIZADO
   ============================================ */
#navcontainer {
    margin: 0 0 25px;
    padding: 0;
    text-align: center;
}

#navcontainer ol {
    padding: 0;
    margin: 0 0 var(--gap-medium) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
}

/* Estilo común para elementos de lista */
#navcontainer ol li {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================================
   BOTONES UNIFICADOS (PARA AMBAS VERSIONES)
   ============================================ */

/* Estilos base comunes para ambos tipos de botones */
#navcontainer ol li a {
    display: block;
    color: white !important;
    background: var(--color-primary);
    padding: var(--padding-button);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-button);
    transition: var(--transition-button);
    text-decoration: none;
    letter-spacing: 0.5px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

/* Efecto hover unificado */
#navcontainer ol li a:hover {
    background: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

/* Efecto activo unificado */
#navcontainer ol li.active > a,
#navcontainer > ol > li.act > a {
    background: var(--color-primary-dark);
    transform: translateY(0);
    position: relative;
}

/* Indicador sutil para estado activo */
#navcontainer ol li.active > a:after,
#navcontainer > ol > li.act > a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1px;
}

/* ============================================
   ESTILOS PARA BOTONES ESPECÍFICOS
   ============================================ */

/* JUNIOR */
#navcontainer ol li.junior > a {
    background-color: var(--color-junior);
}

#navcontainer ol li.junior > a:hover {
    background-color: #6B7BC8; /* Un poco más claro */
}


#navcontainer ol li.junior.active > a {
    background-color: #4A59AA; /* Un poco más oscuro */
}

/* BUNK BEDS */
#navcontainer ol li.bunk > a {
    background-color: var(--color-bunk);
}

#navcontainer ol li.bunk > a:hover {
    background-color: #a2ce2a; /* Un poco más claro */
}

#navcontainer ol li.bunk.active > a {
    background-color: #86b019; /* Un poco más oscuro */
}

/* WALL BEDS */
#navcontainer ol li.wall > a {
    background-color: var(--color-wall);
}

/* PULL-OUT BEDS */
#navcontainer ol li.pullout > a {
    background-color: var(--color-pullout);
}

/* KIDS ROOMS */
#navcontainer ol li.kids > a {
    background-color: var(--color-kids);
}

/* BABY COTS */
#navcontainer ol li.baby > a {
    background-color: var(--color-baby);
}

/* WARDROBES */
#navcontainer ol li.wardrobes > a {
    background-color: var(--color-wardrobes);
}

#navcontainer ol li.wardrobes > a:hover {
    background-color: #60b6bd; /* Un poco más claro */
}

#navcontainer ol li.wardrobes.active > a {
    background-color: #4a989e; /* Un poco más oscuro */
}

/* ============================================
   SUBMENÚS DE FILTROS OPTIMIZADOS
   ============================================ */
#navcontainer ol li.c-sub {
    display: grid;
    padding: 0;
}

#navcontainer ol li.c-sub ul.submenu {
    padding: 8px;
    margin: 5px 0 0;
    background: white;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

#navcontainer ol li.c-sub ul.submenu li {
    display: inline-block;
}

#navcontainer ol li.c-sub ul.submenu li a {
    padding: 6px 12px;
    font-size: 14px;
    color: #455a64;
    background: #f5f5f5;
    box-shadow: none;
    text-transform: none;
}

#navcontainer ol li.c-sub ul.submenu li a:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

#navcontainer ol li.c-sub ul.submenu li a.active {
    background: var(--color-primary);
    color: white;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media only screen and (max-width: 1079px) {
    #navcontainer ol {
        gap: 8px;
    }

    #navcontainer ol li a {
        padding: 8px 12px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 540px) {
    #navcontainer ol {
        gap: 6px;
    }
    
    #navcontainer ol li a {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    #navcontainer ol li.c-sub {
        width: 95% !important;
    }
}
/* ============================================
   PALETA DE COLORES PASTEL - ALTERNATIVA 
   ============================================ */

/* 
   INSTRUCCIONES:
   Para cambiar a la paleta pastel, reemplaza los valores 
   de las variables en :root con estas alternativas:

   --color-primary: #94a3b8; 
   --color-primary-dark: #64748b; 
   --color-primary-light: #cbd5e1;
   
   --color-active: #8b5cf6;
   --color-active-light: #a78bfa;
   --color-active-dark: #7c3aed;
   
   --color-alt-1: #f472b6; 
   --color-alt-2: #4ade80; 
   --color-alt-3: #fb923c; 
   --color-other-cat: #22d3ee;
*/