/* ============================================================================
   Menu general para moviles (#menu_movil, variable $menu_general_movil de header.php)
   ----------------------------------------------------------------------------
   Se presenta como panel lateral, igual que el menu de Mi cuenta (#cuentaMenu en
   cuenta_formato2.php / micuenta.css): se desliza desde la izquierda, cada opcion
   principal es una tarjeta y sus subopciones se marcan con barra a la izquierda.
   La apertura/cierre la controla js/menu_movil.js con la clase .abierto.
   ============================================================================ */

@media (max-width:979px){

  /* ===== PANEL ===== */
  #menu_movil,
  #menu_movil.collapse,
  #menu_movil.collapsing{
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:280px;
    max-width:85vw;
    height:100vh !important;
    height:100dvh !important;
    margin:0;
    padding:15px 15px 20px;
    background:#fff;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    font-family:inherit;
    text-align:left;
    box-shadow:4px 0 20px rgba(0,0,0,.15);
    z-index:1100;
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .3s ease, visibility 0s linear .3s;
  }
  #menu_movil.abierto{
    transform:translateX(0);
    visibility:visible;
    transition:transform .3s ease, visibility 0s;
  }

  /* fondo oscuro detras del panel */
  #menu_movil_fondo{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.35);
    z-index:1099;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  #menu_movil_fondo.abierto{
    opacity:1;
    visibility:visible;
    transition:opacity .3s ease, visibility 0s;
  }
  body.menu_movil_abierto{overflow:hidden;}

  /* ===== TOPBAR (boton cerrar + titulo) ===== */
  #menu_movil .menu_movil_topbar{
    display:flex;
    align-items:center;
    padding-bottom:15px;
  }
  #menu_movil .close{
    float:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin:0;
    border-radius:10px;
    background:#374151;
    color:#fff;
    font-size:18px;
    opacity:1;
    text-shadow:none;
  }
  #menu_movil .close:hover{color:#fff;opacity:.9;}
  #menu_movil .menu_movil_titulo{font-weight:600;margin-left:15px;color:#2c3e50;}

  /* ===== LISTAS ===== */
  #menu_movil ul,
  #menu_movil .navbar-nav,
  #menu_movil .store_menu_movil{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
  }
  #menu_movil a{text-decoration:none;color:inherit;display:block;width:100%;}

  /* ===== SECCIONES: cada opcion principal es una tarjeta ===== */
  #menu_movil li,
  #menu_movil li:last-child{
    display:block;
    margin:0 0 14px 0;
    padding:0;
    border:1px solid #e6e6e6;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
  }
  #menu_movil li:hover{background:#fff;}

  /* titulo de la seccion */
  #menu_movil li > .listmenu_item,
  #menu_movil li > a > .listmenu_item,
  #menu_movil li > .nav-link,
  #menu_movil li > a.nav-link,
  #menu_movil li:last-child .nav-link{
    display:flex;
    align-items:center;
    width:100%;
    padding:14px;
    margin:0;
    background:#f8f9fb;
    border:none;
    border-radius:0;
    color:#2c3e50;
    font-weight:600;
    font-size:14px;
    letter-spacing:.3px;
    text-transform:uppercase;
    cursor:pointer;
  }
  #menu_movil li > .listmenu_item:hover,
  #menu_movil li > a > .listmenu_item:hover,
  #menu_movil li > .nav-link:hover,
  #menu_movil li > a.nav-link:hover{background:#EBEBEB;color:#000;}

  /* flecha que gira al abrir */
  #menu_movil .down_up{
    float:none;
    margin:0 0 0 auto;
    padding-left:10px;
    font-size:13px;
    color:#95a5a6;
    transition:transform .3s ease;
  }
  #menu_movil .listmenu_item:not(.collapsed) .down_up{transform:rotate(180deg);color:#374151;}

  /* ===== SUBOPCIONES ===== */
  #menu_movil .listmenu_sub{
    margin:0;
    padding:4px 0;
    border:none;
    border-radius:0;
    background:#fff;
    max-height:none;
    overflow:visible;
  }
  #menu_movil .listmenu_sub .listmenu_item{
    display:flex;
    align-items:center;
    width:100%;
    padding:10px 18px;
    background:none;
    border-left:4px solid transparent;
    border-radius:0;
    color:#333;
    font-weight:400;
    font-size:14px;
    letter-spacing:0;
    text-transform:none;
    cursor:pointer;
  }
  #menu_movil .listmenu_sub .listmenu_item:hover{background:#EBEBEB;color:#000;}
  #menu_movil .listmenu_sub .listmenu_item.activo{
    background:#EBEBEB;color:#000;font-weight:600;
    border-left:4px solid #374151;
  }
  /* niveles anidados (categorias dinamicas) */
  #menu_movil .listmenu_sub .listmenu_sub{padding:0 0 0 12px;}
  #menu_movil .listmenu_sub .listmenu_item[data-toggle]{font-weight:600;}

  /* ===== CERRAR SESION ===== */
  #menu_movil li[onclick*="cerrar_sesion"]{
    margin-top:20px;
    border:1px solid #f5c6c2 !important;
    cursor:pointer;
  }
  #menu_movil li[onclick*="cerrar_sesion"] .nav-link{
    color:#c0392b;
    background:#fff;
    text-transform:none;
  }
  #menu_movil li[onclick*="cerrar_sesion"]:hover .nav-link{background:#fdedec;color:#962d22;}
  #menu_movil li[onclick*="cerrar_sesion"] i{margin-right:8px;}

  /* ===== TEMA OSCURO (temas.css) ===== */
  .tema_oscuro #menu_movil{background:var(--tema-fondo, #1f2329);}
  .tema_oscuro #menu_movil li{background:transparent;border-color:rgba(255,255,255,.12);}
  .tema_oscuro #menu_movil li > .listmenu_item,
  .tema_oscuro #menu_movil li > a > .listmenu_item,
  .tema_oscuro #menu_movil li > .nav-link,
  .tema_oscuro #menu_movil li > a.nav-link{background:rgba(255,255,255,.07);color:#eef1f5;}
  .tema_oscuro #menu_movil .listmenu_sub{background:transparent;}
  .tema_oscuro #menu_movil .listmenu_sub .listmenu_item{color:#dbe2ea;}
  .tema_oscuro #menu_movil .listmenu_item:hover,
  .tema_oscuro #menu_movil .nav-link:hover{background:rgba(255,255,255,.10) !important;color:#fff !important;}
  .tema_oscuro #menu_movil .listmenu_sub .listmenu_item.activo{
    background:rgba(255,255,255,.14);color:#fff;border-left-color:var(--tema-boton, #3b82f6);
  }
  .tema_oscuro #menu_movil .menu_movil_titulo{color:#eef1f5;}
}