@charset "UTF-8";/* Quitar el fondo del header en Joomla 5 (Cassiopeia) */
.container-header.full-width {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Eslogan en negrita */ 
.site-description { font-weight: bold !important; } 
.site-description {
    color: #000 !important;
    font-weight: bold !important;
}

/* Todos los elementos del menú MetisMenu centrados, negros y en negrita */
.metismenu .metismenu-item > a {
    color: #000 !important;
    font-weight: bold !important;
    text-align: center !important;
    display: block !important; /* necesario para que el centrado funcione en enlaces */
}

/* Asegurar que el icono hamburguesa sea visible SOLO en móvil */
@media (max-width: 991px) {
    .container-header .navbar-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000 !important;
    }
}

/* Asegurar que las 3 rayas sean negras */
.container-header .navbar-toggler .icon-bar,
.container-header .navbar-toggler-icon {
    background-color: #000 !important;
}

/* ==========================================
   Contenedor Principal y Estilos Base
   ========================================== */

/* Contenedor padre del botón de la tienda */
.tienda-toggle {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important; 
  width: auto !important; /* Cambiado a auto para que no empuje el botón */
  margin-left: auto !important; /* Fuerza a que todo el bloque se pegue a la derecha */
}

/* Botón base del segundo menú */
.menu-secundario-btn {
  background: none;
  border: none;
  font-size: 26px;
  padding: 10px;
  cursor: pointer;
}

/* BASE COMÚN ULTRA-REFORZADA PARA EVITAR DEFORMACIONES AL HACER CLIC */
.navbar-toggler.navbar-toggler-right,
.navbar-toggler.navbar-toggler-right:focus,
.navbar-toggler.navbar-toggler-right:active,
.navbar-toggler.navbar-toggler-right[aria-expanded="true"],
.navbar-toggler.navbar-toggler-right[aria-expanded="false"] {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important; /* Prohibido bajar de línea */
  white-space: nowrap !important; /* Fuerza el texto en una sola fila */
  width: max-content !important; /* Ocupa exactamente lo que miden el texto y las rayas, ni un píxel más */
  max-width: 100% !important;
  float: none !important; /* Elimina cualquier rastro de float residual */
}

/* Forzar comportamiento del toggler en el módulo tienda */
.tienda-toggle .navbar-toggler {
  display: inline-flex !important; 
  width: max-content !important;
  margin-top: 10px;
}

/* ==========================================
   ALINEACIÓN ESPECÍFICA DE CADA MENÚ (Estado Cerrado y Abierto)
   ========================================== */

/* 1. MENÚ TIENDA (Fijo a la derecha pase lo que pase) */
.navbar-toggler.navbar-toggler-right[aria-controls="navbar158"],
.navbar-toggler.navbar-toggler-right[aria-controls="navbar158"][aria-expanded="true"] {
  justify-content: flex-end !important; 
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 10px 0 !important; /* Protege el espaciado interno */
}

/* 2. EL OTRO MENÚ (Fijo a la izquierda pase lo que pase) */
.navbar-toggler.navbar-toggler-right:not([aria-controls="navbar158"]),
.navbar-toggler.navbar-toggler-right:not([aria-controls="navbar158"])[aria-expanded="true"] {
  justify-content: flex-start !important; 
  text-align: left !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  padding: 10px 0 !important;
}

/* ==========================================
   Media Queries (Adaptabilidad Móvil)
   ========================================== */

/* CONFIGURACIÓN EXCLUSIVA PARA MÓVIL (Menos de 992px) */
@media (max-width: 991px) {
  
  /* --- Textos de los Botones (Pseudo-elementos solo en móvil) --- */
  
  .navbar-toggler.navbar-toggler-right::before {
    content: "menú";
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-right: 10px;
    display: inline-block !important;
    vertical-align: middle;
  }

  .navbar-toggler.navbar-toggler-right[aria-controls="navbar158"]::before {
    content: "tienda";
  }

  /* --- Comportamiento de los menús desplegados --- */
  #menusecundario {
    background: #fff;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* CONFIGURACIÓN EXCLUSIVA PARA ESCRITORIO (992px o más) */
@media (min-width: 992px) {
  .menu-secundario-btn, 
  .menu-secundario-contenedor,
  .tienda-toggle {
    display: none !important;
  }
}

/* Centrar todos los títulos del sitio */
h1, h2, h3, h4, h5, h6 {
    text-align: center !important;
}

/* Quitar fondo del footer en Joomla 5 (Cassiopeia) */
.site-footer,
.container-footer,
.footer,
.footer .grid-child,
.site-footer .grid-child {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Quitar de la cesta de compra el numero de productos comprados Joomla 5 (Cassiopeia) */
.total_products {
    display: none !important;
}



/* Invierte de la cesta el orde primero productos y luego formulario en Joomla 5 (Cassiopeia) */
@media (max-width: 768px) {

    /* Seleccionamos SOLO la fila que contiene las dos columnas principales */
    .vm-checkout-container > .row,
    .cart-view > .row,
    .vm-cart-container > .row {
        display: flex;
        flex-direction: column;
    }

    /* Columna de productos (la que tiene sticky-top) → primero */
    .col-12.col-lg-6.sticky-top {
        order: 1;
    }

    /* Columna del formulario (la que tiene border-end) → después */
    .col-12.col-lg-6.border-end {
        order: 2;
    }
}
@media (max-width: 768px) {
   
  /* Desactivar sticky-top en móvil */
    .sticky-top {
        position: static !important;
    }
}