/* ==========================================
   1. CONFIGURACIÓN DEL BANNER (MÁS CLARO)
   ========================================== */
/* Forzar transparencia absoluta en cualquier capa de oscuridad de Joomla */
.banner::after, .hero::after, .overlay, .sp-page-title::after {
    background: none !important;
    display: none !important;
}
/* ==========================================
   2. CONFIGURACIÓN DEL BOTÓN PERSONALIZADO
   ========================================== */
/* Estado normal del botón */
.boton-personalizado {
    background-color: #784934; /* Marrón corporativo */
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 10px;
    text-transform: uppercase; /* Texto en mayúsculas */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Transición suave completa */
    font-size: 14px;   
    display: inline-block;
    text-decoration: none;
}
/* Estado cuando pasas el ratón por encima (Hover) */
.boton-personalizado:hover {
    background-color: #000000; /* Cambia a color negro al pasar el ratón */
    transform: translateY(-2px); /* Pequeño efecto de elevación hacia arriba */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra suave para dar volumen */
    text-decoration: none; /* Asegura que no aparezca subrayado en hover */
}
/* Estado normal del sobre */
.boton-personalizado .icono-sobre {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle; /* Lo centra perfectamente con el texto */
    font-size: 18px !important; /* Intenta forzar el tamaño base aquí */
    transition: transform 0.3s ease, color 0.3s ease; /* Suaviza el movimiento y el tamaño */
}
/* Cuando pasas el ratón (Hover) */
.boton-personalizado:hover .icono-sobre {
    /* Mueve 3px a la derecha Y ADEMÁS lo agranda un 20% */
    transform: translateX(3px) scale(1.2); 
    color: #ffffff; /* Puedes cambiar el color aquí si quieres */
}
/* Color del sobre cuando pasas el ratón por el botón */
.boton-personalizado:hover .icono-sobre {
    color: #ffffff; /* El sobre se vuelve blanco en hover */
}
/* --- COMPONENTE DE BANNERS NATIVO --- */
.mod-banners .banneritem img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* Ajusta la altura proporcionalmente sin recortar */
    display: block;
}
.boton-personalizado .icono-sobre {
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.3s ease; /* Permite la animación */
}
/* Al pasar el ratón, el sobre se desplaza 3 píxeles a la derecha */
.boton-personalizado:hover .icono-sobre {
    transform: translateX(3px); 
}
.boton-personalizado .icono-sobre {
    display: inline-block;
    margin-right: 8px;
    font-size: 18px; /* Hace el sobre un poco más grande que el texto de 14px */
    vertical-align: middle; /* Lo alinea perfectamente al centro vertical del texto */
}
/* --- BANNER COMO FONDO DE LA PLANTILLA --- */
.container-banner, .banner-overlay {
    background-size: 100% 100% !important; /* Fuerza a la imagen a encajar exacta */
    background-position: top center !important; /* Prioriza que no se pierda el encabezado */
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: auto !important;
    
    /* Si la imagen es muy panorámica, forzamos su proporción nativa (Aspect Ratio) */
    aspect-ratio: 16 / 5 !important; /* Ajusta este número según tu imagen (ej. 21/9 o 16/4) */
}
/* --- AJUSTE EXCLUSIVO PARA MÓVILES --- */
 @media (max-width: 768px) {
    .container-banner, .banner-overlay {
        aspect-ratio: auto !important;
        background-size: contain !important;
        min-height: 180px; /* Evita que en móviles se vea demasiado delgada */
    }
}
/* Estado normal del botón Leer más */
.readmore a, .btn-readmore, a.readmore {
    background-color: #784934 !important; /* Color de fondo (Azul) */
    color: #ffffff !important;            /* Color del texto (Blanco) */
    padding: 10px 22px !important;        /* Tamaño/Espaciado interno */
    border-radius: 10px !important;       /* Bordes completamente redondeados */
    font-weight: 600 !important;          /* Texto un poco más grueso */
    text-transform: uppercase !important; /* Texto en mayúsculas */
    font-size: 14px !important;           /* Tamaño de la letra */
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important; /* Animación suave */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Estado cuando el usuario pasa el ratón por encima (Hover) */
.readmore a:hover, .btn-readmore:hover, a.readmore:hover {
    background-color: #000000 !important; /* Azul más oscuro */
    color: #ffffff !important;
    transform: translateY(-3px) !important; /* El botón se eleva */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important; /* La sombra crece */
}
.card {
  border-color: #784934 !important;
}
.card-header {
  border-bottom-color: #784934 !important;
}
/* 1. Estado normal: Fondo marrón, borde marrón y texto blanco */
.com_phocacart .btn-secondary,
.com_phocacart .btn-primary,
.ph-categories-view .btn-secondary,
.ph-category-view .btn-secondary,
.ph-product-view .btn-secondary {
    background-color: #784934 !important;
    border-color: #784934 !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important; /* Hace que el cambio a negro sea suave */
}
/* 2. Estado Hover: Fondo negro, borde negro y texto blanco al pasar el ratón */
.com_phocacart .btn-secondary:hover,
.com_phocacart .btn-primary:hover,
.ph-categories-view .btn-secondary:hover,
.ph-category-view .btn-secondary:hover,
.ph-product-view .btn-secondary:hover,
.com_phocacart .btn-secondary:focus,
.com_phocacart .btn-primary:focus {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}
/* ====================================================
   CONTROL DE COLORES DEFINITIVO (CON EXTRAS VISUALES)
====================================================== */
/* 1. EL FONDO DEL RECUADRO */
div.maximenuck2, 
div.maximenuck2 div.maximenuckbox, 
div.maximenuck2 div.maximenuckcol,
div.maximenuck2 ul.maximenuck {
    background: #402214 !important;
    /* NUEVO: Bordes redondeados en las esquinas del recuadro (8 píxeles) */
    border-radius: 1px !important;
    /* NUEVO: Sombra sutil para que el menú parezca flotar sobre la web */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5) !important;
}
/* 2. EL TEXTO EN ESTADO NORMAL */
div.maximenuck2 a,
div.maximenuck2 a.maximenucklink,
div.maximenuck2 span.txtck,
div.maximenuck2 span.maximenucktitle,
div.maximenuck2 .maximenuckitem {
    color: #ffffff !important;
    background: transparent !important;
    /* NUEVO: Tamaño de la letra un poco más grande (puedes cambiar 16px por 15px o 17px) */
    font-size: 14px !important;
    /* NUEVO: Grosor de la letra (puedes usar 'normal' o 'bold' si la quieres muy negrita) */
    font-weight: 500 !important;
    /* NUEVO: Espacio extra arriba y abajo de cada enlace para que no estén pegados */
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
/* 3. AL PASAR EL RATÓN POR ENCIMA (HOVER) */
div.maximenuck2 a:hover,
div.maximenuck2 a.maximenucklink:hover,
div.maximenuck2 li:hover > a,
div.maximenuck2 li.maximenuck:hover > a.maximenucklink {
    color: #ffcc00 !important;      
    background: #8a533b !important; /* <--- CAMBIA AQUÍ: Este gris es más claro y contrastará mejor */
    border-radius: 1px !important;
}
/* 4. ELEMENTO ACTIVO (PÁGINA ACTUAL) EN PC Y MÓVIL */
div.maximenuck2 li.active > a,
div.maximenuck2 li.current > a,
div.maximenuck2 li.active > a.maximenucklink,
.mobilemenu-ck ul.nav.menu li.active > a, 
.mobilemenu-ck ul.nav.menu li.current > a {
    color: #ffcc00 !important;      /* Color del texto activo (Amarillo como tu hover) */
    background: #8a533b !important; /* Color de fondo activo (Marrón como tu hover) */
    font-weight: bold !important;
}
/* ==========================================
   3. CONFIGURACIÓN DE TABLAS TÉCNICAS
   ========================================== */
/* Fuerza a que las dos primeras celdas (CÓDIGO RH y LH) sean siempre negrita */
.tabla-productos tbody tr td:nth-child(1),
.tabla-productos tbody tr td:nth-child(2) {
    font-weight: bold !important;
}
/* TRUCO UNIVERSAL: Destaca la fila en amarillo suave al pasar el ratón para el gerente */
.table-hover tbody tr:hover td {
    box-shadow: none !important;
    background-color: #fff2cc !important;
    background-image: none !important;
    color: #000000 !important;
}
/* Ocultar absolutamente todas las alertas y mensajes del sistema en la Portada */
.view-featured .system-messages,
.view-featured #system-message-container,
.view-featured [role="alert"],
.view-featured .alert-wrapper {
    display: none !important;
}
/* Eliminar por completo el texto y contenedor de stock en Phoca Cart de forma segura */
.ph-stock-status, 
.ph-product-stock, 
.ph-item-stock-view,
.ph-product-view .stock,
.ph-category-view .stock,
div[class^="ph-stock"], div[class*=" ph-stock"] {
    display: none !important;
}
/* Ocultar el campo SKU y su etiqueta en la tienda de forma segura */
.ph-sku, 
.ph-product-sku, 
.ph-item-sku-view,
.ph-product-view .sku,
.ph-category-view .sku,
div[class^="ph-sku"], div[class*=" ph-sku"] {
    display: none !important;
}
/* ====================================================
   UNIÓN MAESTRA: LA FUSION DEFINITIVA
====================================================== */

/* 1. Tu código original que borraba la miniatura perfectamente */
img.phImageAdditional, 
.phImageAdditional {
    display: none !important;
    visibility: hidden !important;
    width: 0px !important;
    height: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* 2. Por si acaso Phoca Cart se intenta estirar, forzamos que no tenga márgenes */
.ph-product-view .ph-image-additional-box {
    display: none !important;
    height: 0px !important;
}
/* ====================================================
   SOMBRA PARALELA PREMIUM PARA LAS HERRAMIENTAS
====================================================== */
/* Aplica una sombra suave alrededor de la imagen en la ficha del artículo */
.ph-product-view img.ph-image-full,
.ph-product-view img.phImageFull {
    filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.15)) !important;
    transition: filter 0.3s ease;
}
/* Aplica la misma sombra en las tarjetas del catálogo exterior (Categoría) */
.ph-category-view .card img,
.ph-category-view .ph-thumbnail-box img {
    filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.12)) !important;
}
/* ====================================================
   4. CONTROL DE VISIBILIDAD DE MENÚS (PC vs MÓVIL)
====================================================== */

/* --- EN ORDENADORES (PANTALLAS GRANDES) --- */
@media (min-width: 992px) {
    /* Oculta por completo el menú original de Joomla */
    #mod-menu, .mod-menu, [id^="mod-menu"] { 
        display: none !important; 
    }
    
    /* Reseteado a cero absoluto para que los submenús caigan perfectos */
    div.maximenuck2, .maximenuckh {
        margin-left: 0px !important; 
        transform: none !important;
    }

    /* TRUCO MAESTRO: Empuja SOLO los botones del primer nivel hacia la derecha */
    div.maximenuck2 ul.maximenuck > li.maximenuck {
        padding-left: 100px !important; /* <--- Sube este número (ej. 40px, 50px) para mover el menú más a la derecha */
    }
}
/* --- EN TELÉFONOS MÓVILES (PANTALLAS PEQUEÑAS) --- */
@media (max-width: 991px) {
    /* Oculta por completo el menú de Maximenu CK */
    div.maximenuck2, .maximenuckh, #maximenuck { 
        display: none !important; 
    }
}

/* Transforma los títulos de las subcategorías a tamaño h5 y los pone en negrita */
.ph-item-subcategory-box h3 {
    font-size: 1.25rem !important;      /* Tamaño típico de un h5 */
    font-weight: bold !important;        /* Hace la letra negrita */
    margin-top: 3px !important;         /* Espacio superior con la foto */
}

#ph-pc-category-box .ph-subcategories {
    display: none !important;
}
/* Cambia el color del texto y del fondo del elemento activo en el menú móvil */
.mobilemenu-ck ul.nav.menu li.active > a, 
.mobilemenu-ck ul.nav.menu li.current > a {
    background-color: #007bff !important; /* Reemplaza por tu color de fondo (ej: Azul) */
    color: #ffffff !important;            /* Reemplaza por tu color de texto (ej: Blanco) */
    font-weight: bold;                    /* Hace que el texto resalte en negrita */
}

/* AJUSTES PARA EL ÁRBOL DE CATEGORÍAS (JSTREE) */

/* 1. Hace los enlaces un poco más grandes y les da espacio vertical */
.sidebar-left .jstree-anchor {
    font-size: 14px !important;       /* Tamaño de la letra cómodo */
    height: auto !important;          /* Permite que la caja crezca verticalmente */
    padding-top: 5px !important;      /* Espacio extra arriba */
    padding-bottom: 5px !important;   /* Espacio extra abajo */
    white-space: normal !important;   /* ¡CLAVE!: Permite que el texto largo salte de línea de forma limpia */
    display: inline-flex !important;  /* Alinea el icono y el texto correctamente */
    align-items: flex-start !important; /* Si el texto ocupa 2 líneas, el icono se queda arriba */
}

/* 2. Ajusta la altura de la fila contenedora para que no aplaste el texto */
.sidebar-left .jstree-node {
    height: auto !important;
    min-height: 32px !important;      /* Evita que se mezclen unas categorías con otras */
    line-height: 1.4 !important;      /* Separa las líneas del texto si salta hacia abajo */
}

/* 3. Mantiene los iconos del árbol alineados con la primera línea de texto */
.sidebar-left .jstree-icon {
    margin-top: 2px !important;
}
.sidebar-left .jstree-anchor {
    font-size: 14px !important;
    font-weight: 500 !important;      /* <--- Grosor medio perfecto, ni fino ni exagerado */
    height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    white-space: normal !important;
    display: inline-flex !important;
    align-items: flex-start !important;
}
/* 1. Esto da el tamaño, grosor 500 y evita que se mezclen los textos */
.sidebar-left .jstree-anchor {
    font-size: 14px !important;
    font-weight: 500 !important;      
    height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    white-space: normal !important;
    display: inline-flex !important;
    align-items: flex-start !important;
}

.sidebar-left .jstree-node {
    height: auto !important;
    min-height: 32px !important;      
    line-height: 1.4 !important;      
}

.sidebar-left .jstree-icon {
    margin-top: 2px !important;
}

/* 2. NUEVO: Esto pinta de azul claro solo la categoría seleccionada */
.sidebar-left .jstree-clicked {
    background-color: #e6f2ff !important; 
    color: #004080 !important;            
    border-radius: 4px !important;        
    padding-left: 6px !important;         
    padding-right: 6px !important;        
}
/* ====================================================
   SECCIÓN MAXIMENU CK - CENTRADO, SCROLL Y SUBMENÚS
====================================================== */

@media (min-width: 992px) {
    /* 1. CENTRADO EN ESTADO NORMAL (CASSIOPEIA EXTENDED) */
    div.maximenuck2, 
    .maximenuckh {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        display: table !important; 
    }

    /* 2. CENTRADO EN ESTADO FIJO (AL HACER SCROLL ARRIBA) */
    .maximenuckcontainer.fixed,
    div.maximenuck2.fixed,
    div.maximenuck2.is-sticky,
    #maximenuck.fixed {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1320px !important; /* Ancho de tu plantilla */
        display: block !important;
        z-index: 9999 !important;
    }

    /* 3. LIMPIEZA DE COLCHÓN LATERAL EN BOTONES PRINCIPALES */
    div.maximenuck2 ul.maximenuck > li.maximenuck {
        padding-left: 0px !important;
    }
}

/* 4. ELIMINACIÓN DE FRANJAS BLANCAS EN SUBMENÚS DE TEXTO CORTO */
.maxidrop-main,
div.maximenuck2.first,
.maxidrop-main ul.maximenuck2,
.maxidrop-main li.maximenuck.level3 {
    background: #402214 !important;
    background-color: #402214 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Fuerza el estiramiento horizontal para evitar huecos */
.maxidrop-main ul.maximenuck2,
.maxidrop-main a.maximenuck {
    width: 100% !important;
    display: block !important;
    background-color: #402214 !important;
}

.maxidrop-main ul.maximenuck2 {
    padding: 0 !important;
    margin: 0 !important;
}


/* 1. Control de desbordamiento limpio, sin bloquear el scroll táctil */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}

@media (max-width: 991px) {
    /* 2. Forzamos a la barra de Inicio a ser fija, fluida y con capa ultra alta */
    .maximenuckmobile, 
    #maximenuckmobile,
    .maximenuckmobile-title,
    .maximenuckmobile-container,
    div[id^="maximenuck"],
    #maximenuck {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        z-index: 999999 !important; /* Capa altísima para que no se vaya detrás en Chrome normal */
        touch-action: auto !important; /* Devuelve el control total del scroll al dedo */
    }

    /* 3. El botón de las tres rayas acompaña de forma fija encima de la barra */
    .maximenuburger, 
    div[id^="maximenuck"] .maximenuburger {
        position: fixed !important;
        top: 10px !important; /* Ajusta la altura si necesitas centrarlo en tu barra */
        right: 15px !important;
        z-index: 1000000 !important;
        display: block !important;
    }

    /* 4. Aseguramos que la barra donde está "Inicio" deje el hueco libre para las rayas */
    div[id^="maximenuck"] .maximenuck-container,
    #maximenuck .maximenuck-container {
        padding-right: 60px !important; 
        box-sizing: border-box !important;
    }

    /* 5. Separación para que la barra fija no tape el primer texto o banner de la web */
    body {
        padding-top: 50px !important; 
    }
}