@charset "UTF-8";
/**
 * Responsive Menu Toggle CSS
 * Compatible with PrestaShop 1.7+
 */
/* Estilos base para el icono dropdown mobile */
.icon-drop-mobile {
  display: none;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; }

.icon-drop-mobile:hover {
  opacity: 0.8;
  transform: scale(1.05); }

.icon-drop-mobile .material-icons {
  font-size: 20px;
  vertical-align: middle;
  transition: transform 0.2s ease; }

.icon-drop-mobile .material-icons.remove {
  display: none; }

.icon-drop-mobile.menu-open .material-icons.add {
  display: none; }

.icon-drop-mobile.menu-open .material-icons.remove {
  display: inline-block; }

.mobile-menu .menu-content .menu-item .icon-drop-mobile i {
  background: transparent !important;
  top: 5px !important;
  font-size: 31px !important;
  right: -2px !important; }

/* Estilos responsive */
@media (max-width: 768px) {
  .icon-drop-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    border-radius: 4px;
    margin-left: auto;
    margin-right: 8px; }

  /* Ocultar submen├║s por defecto en mobile */
  .pos-sub-menu,
  .category-sub-menu {
    display: none;
    overflow: hidden; }

  /* Cuando se muestran, aplicar estilos mobile */
  .pos-sub-menu.mobile-visible,
  .category-sub-menu.mobile-visible {
    display: block !important;
    background-color: rgba(0, 0, 0, 0.02);
    border-left: 3px solid #007cba;
    margin-left: 15px;
    padding-left: 10px;
    margin-top: 8px;
    border-radius: 0 4px 4px 0; }

  /* Estilos para items de menu en mobile */
  .menu-item,
  .submenu-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

  .menu-item:last-child,
  .submenu-item:last-child {
    border-bottom: none; }

  .menu-item > a,
  .submenu-item > a {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: background-color 0.2s ease; }

  .menu-item > a:hover,
  .submenu-item > a:hover {
    background-color: rgba(0, 0, 0, 0.05); }

  /* Animaciones suaves */
  .pos-sub-menu,
  .category-sub-menu {
    transition: all 0.3s ease; }

  /* Indicador visual para items con submenu */
  .hasChild {
    position: relative; }

  .hasChild > a {
    padding-right: 50px !important; }

  .hasChild .icon-drop-mobile {
    position: absolute;
    right: 8px;
    top: 20px;
    transform: translateY(-50%);
    width: 3.4375rem;
    height: 2.5rem;
    background: transparent; } }
@media (min-width: 769px) {
  .icon-drop-mobile {
    display: none !important; }

  .pos-sub-menu,
  .category-sub-menu {
    display: block !important; } }
/* Estilos adicionales para mejor UX */
@media (max-width: 480px) {
  .icon-drop-mobile .material-icons {
    font-size: 18px; }

  .menu-item > a,
  .submenu-item > a {
    padding: 10px 12px;
    font-size: 14px; } }
/* Estados de carga y transiciones */
.menu-loading .pos-sub-menu,
.menu-loading .category-sub-menu {
  opacity: 0.6;
  pointer-events: none; }

/* Accesibilidad */
.icon-drop-mobile:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px; }

#mobile_menu_wrapper .menu-close {
  background: #0151A4 !important;
  font-size: 16px;
  border-radius: 10px;
  margin-bottom: 4px; }

/* Compatibilidad con temas oscuros */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .pos-sub-menu.mobile-visible,
  .category-sub-menu.mobile-visible {
    background-color: rgba(255, 255, 255, 0.05); }

  .menu-item,
  .submenu-item {
    border-bottom-color: #959595; }

  .menu-item > a:hover,
  .submenu-item > a:hover {
    background-color: rgba(255, 255, 255, 0.05); } }
/* Fix para evitar conflictos con otros estilos */
.menu-content .icon-drop-mobile {
  z-index: 10; }

@media (max-width: 768px) {
  .mobile-menu .menu-content .menu-item li::before {
    content: "\2022";
    position: absolute;
    top: 18px;
    left: 30px;
    color: black;
    font-size: 17px; }

  .mobile-menu .menu-content .menu-item .category-sub-menu li::before {
    top: 9px;
    left: 40px; }

  /* Elementos principales del men├║ */
  .mobile-menu .menu-content .menu-item .submenu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    padding-left: 2.775rem !important;
    text-decoration: none;
    font-size: 15px;
    background-color: #e8f9f9;
    transition: all 0.3s ease; }

  .mobile-menu .menu-content > .menu-item a {
    color: black;
    font-size: 18px; }

  .mobile-menu .menu-content .menu-item li .category-sub-menu li a {
    padding-left: 3.6rem !important; }

  .mobile-menu .menu-content > .menu-item.opeeneed {
    background-color: #00c3f9;
    color: #000; }

  /* Hover en elementos principales */
  .menu-item > a:hover {
    color: #00c3f9; }

  /* Estado activo cuando se despliega */
  .menu-item.active > a,
  .menu-item[data-expanded="true"] > a {
    background-color: #e8f9f9;
    color: #00c3f9; }

  /* Iconos de despliegue */
  .icon-drop-mobile {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease; }

  /* Submen├║s primer nivel */
  .submenu-item > a {
    display: block;
    padding: 12px 30px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    background-color: #e8f9f9;
    transition: all 0.3s ease; }

  /* Submen├║s tercer nivel */
  .category-sub-menu a {
    display: block;
    padding: 8px 50px;
    color: #000;
    text-decoration: none;
    font-size: 13px;
    background-color: #e8f9f9;
    transition: all 0.3s ease; } }

/*# sourceMappingURL=responsivemenutoggle.css.map */