/**
 * 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.
       Paleta original recuperada de la versión anterior del plugin
       (backups/scp-pinterest_/scp-pinterest/page-c/style_c.css): verde lima
       de fondo, verde oscuro al pasar por encima, naranja para el activo y
       azul verdoso para "Otros catálogos". */
    --color-primary: #99cc00; /* Verde lima, fondo de los botones */
    --color-primary-dark: #263238; /* Casi negro azulado */
    --color-primary-light: #789e04; /* Verde oscuro, hover */
    --color-active: #a57865; /* Terracota apagado para el botón activo */
    --color-other-cat: #55a1a9; /* Azul verdoso para "Otros catálogos" */
    
    /* 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;
    --color-bedrooms: #7E8CA3; /* Dormitorios */
    --color-modular: #D99058;  /* Modulares */
    --color-aux: #8E8577;      /* Auxiliares */
    --color-office: #5F8A72;   /* Home office */
    
    /* Color para submenú - Complementario al gris azulado oscuro */
    --color-submenu: #8B7355; /* Marrón cálido complementario */
    --color-submenu-active: #6B5335; /* Marrón más oscuro para activo */
    
    /* 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-active);
    transform: translateY(0);
    position: relative;
}

/* Botón "Otros catálogos" */
#filters > li.otrocat > a {
    background: var(--color-other-cat) !important;
}

/* 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
   ============================================

   Cada botón de tipo llega desde PHP con estas clases:

       class="btn-tipo {css_class} [active]"

   · btn-tipo   marca común a todos los botones de tipo. Los botones TODO y
                "Otros catálogos" NO la llevan, así que este bloque no les
                afecta y conservan el color de siempre.
   · css_class  la clase legible (junior, bunk, wall...) que se escribe en el
                subcampo ACF "Clase CSS" del repeater Tipos. Un tipo sin ese
                campo relleno se queda con el color base del menú.

   Para dar color a un tipo basta con declararle --btn: el fondo, el hover y
   el estado activo se derivan solos de ese único color.
   ============================================ */

/* --- Aplicación del color, una sola vez para todos los tipos ---

   Un tipo sin --btn se comporta EXACTAMENTE igual que el resto de botones:
   verde lima de fondo, verde oscuro en hover y naranja al estar activo. El
   matiz de hover y activo es opcional: solo se aplica si se declaran
   --btn-hover y --btn-active. Sin ellos, el hover y el activo usan el color
   del tipo, y el feedback visual lo siguen dando el translateY y la sombra
   de más arriba. */

#navcontainer ol li.btn-tipo > a {
    background-color: var(--btn, var(--color-primary));
}

#navcontainer ol li.btn-tipo > a:hover {
    background-color: var(--btn-hover, var(--btn, var(--color-primary-light)));
}

#navcontainer ol li.btn-tipo.active > a,
#navcontainer > ol > li.btn-tipo.act > a {
    background-color: var(--btn-active, var(--btn, var(--color-active)));
}

/* --- Color de cada familia --- */

/* Dormitorios juveniles. Los tres colores son los del CSS original. */
#navcontainer ol li.junior {
    --btn: var(--color-junior);
    --btn-hover: #6B7BC8;
    --btn-active: #4A59AA;
}

/* Literas. Los tres colores son los del CSS original. */
#navcontainer ol li.bunk {
    --btn: var(--color-bunk);
    --btn-hover: #a2ce2a;
    --btn-active: #86b019;
}

/* Armarios. Los tres colores son los del CSS original. */
#navcontainer ol li.wardrobes {
    --btn: var(--color-wardrobes);
    --btn-hover: #60b6bd;
    --btn-active: #4a989e;
}

#navcontainer ol li.pullout    { --btn: var(--color-pullout); }   /* Camas nido */
#navcontainer ol li.wall       { --btn: var(--color-wall); }      /* Camas abatibles */
#navcontainer ol li.kids       { --btn: var(--color-kids); }      /* Infantiles */
#navcontainer ol li.baby       { --btn: var(--color-baby); }      /* Cunas */
#navcontainer ol li.bedrooms   { --btn: var(--color-bedrooms); }  /* Dormitorios */
#navcontainer ol li.modular    { --btn: var(--color-modular); }   /* Modulares */
#navcontainer ol li.aux        { --btn: var(--color-aux); }       /* Auxiliares */
#navcontainer ol li.office     { --btn: var(--color-office); }    /* Home office */

/* --- Variantes dentro de una familia ---
   Van después de las familias a propósito: misma especificidad, así que gana
   la última, y un botón con class="wall wall-h" acaba con el tono variante. */

/* Camas abatibles */
#navcontainer ol li.wall-h      { --btn: #b45cc6; } /* Horizontales */
#navcontainer ol li.wall-v      { --btn: #d894e4; } /* Verticales */
#navcontainer ol li.wall-double { --btn: #a147b3; } /* De matrimonio */
#navcontainer ol li.wall-twin   { --btn: #e3b0eb; } /* Dobles */

/* Armarios */
#navcontainer ol li.wardrobes-custom { --btn: #5cbcc4; } /* A medida */
#navcontainer ol li.doors-hinged     { --btn: #3f8f96; } /* Puertas batientes */
#navcontainer ol li.doors-sliding    { --btn: #6fbcc2; } /* Puertas correderas */
#navcontainer ol li.builtin          { --btn: #2f767c; } /* Empotrados */
#navcontainer ol li.walkin           { --btn: #8fd0d5; } /* Vestidores */

/* Marcas */
#navcontainer ol li.brand-up    { --btn: #b0566a; }
#navcontainer ol li.brand-flat  { --btn: #c47a5b; }
#navcontainer ol li.brand-grow  { --btn: #7a9b5e; }
#navcontainer ol li.brand-pukka { --btn: #8a6ba8; }
#navcontainer ol li.brand-nest  { --btn: #4f8fa8; }

/* --- Submenú de subtipos ---
   Sus botones también reciben ya btn-tipo y su clase legible desde PHP, pero
   se mantiene el marrón uniforme de --color-submenu para no alterar un diseño
   que hoy funciona: en el submenú todos los botones son del mismo producto y
   colorearlos por separado resta legibilidad al conjunto.

   Para darles color propio, descomentar. Las declaraciones --btn de arriba ya
   están puestas en el li, así que basta con consumirlas:

#submenu-container ol li.btn-tipo > a {
    background: var(--btn, var(--color-submenu));
}

#submenu-container ol li.btn-tipo > a:hover {
    background: var(--btn-hover, var(--btn, var(--color-submenu-active)));
}

#submenu-container ol li.btn-tipo.active > a {
    background: var(--btn-active, var(--btn, var(--color-submenu-active)));
}

   OJO: las reglas --btn de este fichero están limitadas a #navcontainer, así
   que habría que ampliar esos selectores a
   #navcontainer ol li.junior, #submenu-container ol li.junior { ... }
   o quitarles el ancestro. Sin eso, --btn no llega al submenú.
*/

/* ============================================
   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;
    }
}

/* ============================================
   SUBMENÚ (submenu-container)
   ============================================ */
#submenu-container {
    margin: 15px 0;
    padding: 0;
    text-align: center;
}

#submenu-container ol {
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-small);
}

#submenu-container ol li {
    display: inline-block;
    cursor: pointer;
    list-style: none;
}

#submenu-container ol li a {
    display: block;
    color: #fff !important;
    padding: var(--padding-button);
    font-size: 15px;
    background: var(--color-submenu);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-button);
    transition: var(--transition-button);
    text-decoration: none;
}

#submenu-container ol li a:hover {
    background: var(--color-submenu-active);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-2px);
}

/* Botón activo - MÁS RESALTADO */
#submenu-container ol li.active > a {
    background: var(--color-submenu-active);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
    font-weight: bold;
}

/* ============================================
   CONTENEDOR PRINCIPAL DE LA GALERÍA (GRID)
   ============================================ */
#containerpint,
div#containerpint {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    grid-auto-rows: 0;
    max-width: 1540px;
    width: 100% !important;
    margin: 20px auto;
    min-height: 300px;
    list-style: none;
    padding: 0 !important;
}

/* ============================================
   ELEMENTOS DE LA GALERÍA (ITEMS)
   ============================================ */
div#containerpint div.itempint {
    display: block;
    max-width: 500px;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    background: #eee;
    margin: auto;
}

/* Items sin sombra (contenido HTML personalizado) */
div#containerpint div.itempint.noshadow {
    box-shadow: none;
    background-color: #ffffff !important;
}

/* Contenido intercalado con padding adicional */
div#containerpint div.contentpint.intercalado {
    padding: 40px 30px 30px 30px;
}

/* Fix para videos lazy-load intercalados */
div#containerpint .flex-video2 {
    position: relative;
    cursor: pointer;
    width: 500px;
    max-width: 100%;
}

/* Enlaces dentro de los elementos */
div#containerpint a.pint {
    position: relative;
    vertical-align: top;
    display: flex;
}

/* Borde en enlaces visitados */
div#containerpint a:visited {
    border: 2px solid black;
}

/* Contenedor de texto descriptivo */
div#containerpint div.txtbase {
    min-height: 40px;
    width: 100%;
    font-size: 14px;
    line-height: 1.3em;
    margin: 0;
    padding: 6px;
    text-align: center;
    position: relative;
    background-color: #ffffff; /* Fondo blanco */
    color: #000000; /* Texto negro */
    
    /* Flex para centrado vertical perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor interno para el texto.
   text-wrap: balance reparte las líneas de forma equilibrada (evita la
   palabra huérfana abajo) sin estrechar el texto ni partir palabras;
   en navegadores antiguos hace wrap normal. */
div#containerpint div.txtbase > span {
    display: block;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* Textos largos (>65 caracteres): se mantiene el max-width para GARANTIZAR
   2 lineas, porque el span del grid se calcula en PHP/JS asumiendo 60px de
   leyenda cuando hay txt-long (ver scripts-t.js altoLeyenda). Sin el limite,
   un texto de 66 chars podria caber en 1 linea y dejar una franja vacia.
   text-wrap: balance equilibra las 2 lineas dentro de ese ancho.
   Se limita el SPAN interior, no el contenedor: si se estrecha .txtbase
   se ve el fondo gris del .itempint a los lados. */
div#containerpint div.txtbase.txt-long > span {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   INDICADOR DE NOVEDAD (ICONO NEW)
   ============================================ */
div#containerpint span.scp-pint-new {
    display: block;
    position: absolute;
    top: 0px !important;
    right: 0px !important;
    width: 75px;
    height: 75px;
    padding: 0px;
    margin: 0px;
}

div#containerpint span.scp-pint-new img {
    display: inherit;
}

/* ============================================
   RESPONSIVE - GRID
   ============================================ */
/* Móvil - Una columna centrada */
@media only screen and (max-width: 1079px) {
    div#containerpint {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    div#containerpint div.itempint {
        margin-bottom: 0;
        width: 100%;
    }
    
    /* Textos largos: ancho completo en movil */
    div#containerpint div.txtbase.txt-long > span {
        max-width: 100%;
    }
}

/* Tablet - Dos columnas centradas */
@media only screen and (min-width: 1080px) and (max-width: 1579px) {
    div#containerpint {
        width: 1080px !important;
    }
}

/* Desktop - Margen superior cuando hay submenú */
@media all and (min-width: 900px) {
    div#containerpint.m-sub {
        margin-top: 40px;
    }
}
/* ============================================
   BOTÓN DE FICHA PARA ADJUNTOS CON DETALLE
   ============================================ */

/* Contenedor de imagen para adjuntos */
.scp-image-container {
    position: relative;
    display: block;
}

/* Botón de ficha sobrepuesto */
.scp-ficha-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 999;
    pointer-events: auto;
    border-radius: 0;
}

.scp-ficha-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    color: white;
    text-decoration: none;
}

/* Asegurar que el enlace principal mantenga su funcionalidad */
.scp-image-container .pint {
    display: block;
    position: relative;
}

/* ============================================
   INDICADOR DE NOVEDAD (ICONO)
   ============================================ */
div#containerpint span.scp-pint-new {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 75px;
    padding: 0;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}

/* ============================================
   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;
*/