/* frontend/componentes/barra_navegacion/boton_categorias/boton_categorias.css */
/* VERSIÓN: FINAL - CON ANIMACIÓN DE GIRO (TUERCA) EN EL BOTÓN DE CERRAR */

/* =========================================================
   1. BOTÓN CATEGORÍAS (Escritorio - PC)
========================================================= */
@media (min-width: 576px) {
  #btn-categorias.nuevo-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 1.5em;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    color: #000000 !important;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    
    z-index: 5; 
  }

  /* --- CAPA 1: CARA FRONTAL --- */
  #btn-categorias.nuevo-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-color: var(--color-primary, #dcf0fa) !important;
    border: 2px solid #000000 !important;
    border-radius: 8px;
    
    z-index: -1; 
    transition: transform 0.1s ease;
  }

  /* --- CAPA 2: SOMBRA 3D --- */
  #btn-categorias.nuevo-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-color: #e6e6e6 !important; 
    
    border: 2px solid #000000 !important; 
    border-radius: 8px;
    
    z-index: -2; 
    transform: translate(4px, 4px);
  }

  /* --- INTERACCIÓN --- */
  #btn-categorias.nuevo-btn:active::after {
    transform: translate(4px, 4px);
  }
  
  #btn-categorias.nuevo-btn:hover::after {
    filter: brightness(0.97);
  }
}

/* =========================================================
   2. BOTÓN HAMBURGUESA (Móvil)
========================================================= */
@media (max-width: 575.98px) {
  .menuButton {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    margin-left: auto !important; 
    margin-right: 10px !important; 
    z-index: 5;
  }

  .menuButton::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-color: var(--color-primary, #dcf0fa) !important;
    border: 2px solid #000000 !important;
    border-radius: 8px;
    
    z-index: -1;
    transition: transform 0.1s ease;
  }

  .menuButton::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-color: #e6e6e6 !important;
    
    border: 2px solid #000000 !important;
    border-radius: 8px;
    
    z-index: -2;
    transform: translate(4px, 4px);
  }

  .menuButton:active::after {
    transform: translate(4px, 4px);
  }

  .menuButton span {
    display: block;
    width: 20px;
    height: 3px;
    background: #000000 !important; 
    border-radius: 2px;
    transition: 0.3s ease;
    position: relative; 
    z-index: 1;
  }

  .menuButton input[type="checkbox"] { display: none; }
  .menuButton input[type="checkbox"]:checked ~ span.top { transform: translateY(7px) rotate(45deg); width: 24px; }
  .menuButton input[type="checkbox"]:checked ~ span.bot { transform: translateY(-7px) rotate(-45deg); width: 24px; box-shadow: none; }
  .menuButton input[type="checkbox"]:checked ~ span.mid { transform: translateX(-10px); opacity: 0; }
}

/* =========================================================
   3. MEGA MENÚ (Escritorio)
========================================================= */
.mega-menu {
  position: absolute; top: 100%; margin-top: 12px; left: 50%; transform: translateX(-50%);
  width: clamp(560px, 92vw, 1000px); max-width: 1000px;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  border: 2px solid #000;
  border-radius: 12px;
  padding: 24px 28px; z-index: 998;
  max-height: 75vh; overflow: auto;
}
@media (max-width: 738px){
  .mega-menu{ left:12px; right:12px; width:auto; transform:none; padding:18px; max-height:65vh; }
  #menu-categorias{ width:180px; }
}
#mega-menu{padding:0!important;}
#mega-menu .d-flex.mx-auto,#mega-menu .p-3{padding:0!important;margin:0!important;}

#menu-categorias{
  width:220px; border-right:1px solid #eee; padding:8px 4px; margin:0; list-style:none; display:flex; flex-direction:column; font-size:.95rem; line-height:1;
}
#menu-categorias li{
  position:relative; padding:10px 16px; margin:4px 6px; border-radius:8px; color:#333; transition:all .2s ease; cursor:pointer;
}
#menu-categorias li:hover{ background:#f4f4f4; }
#menu-categorias li.active{
  background:var(--color-primary); color:#000; font-weight:700; border:1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

#contenedor-subcategorias { padding-left:16px; border-left:1px solid #eee; }
.subcategorias .grid-subcats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; list-style:none; margin:0; padding:4px 0 0;
}
@media (min-width:640px){ .subcategorias .grid-subcats{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px){ .subcategorias .grid-subcats{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1100px){ .subcategorias .grid-subcats{ grid-template-columns:repeat(5,1fr); } }

.subcategorias .subcat-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0; text-align:center; text-decoration:none; color:#222; border-radius:12px; transition:transform .2s ease;
}
.subcategorias .subcat-card:hover{ transform: translateY(-3px); font-weight:600; }
.subcategorias .subcat-thumb{
  width:60px; height:60px; border-radius:50%; object-fit:cover; background:#fff; border:1px solid #000;
}
.subcategorias .subcat-card.todo .subcat-thumb{ display:flex; align-items:center; justify-content:center; background:#f2f6f8; font-size:22px; }
.subcategorias .subcat-title{ font-size:13px; line-height:1.2; }

/* =========================================================
   4. MENÚ LATERAL (Móvil)
========================================================= */
.menu-lateral {
  position:fixed; top:0; left:0; width:100%; max-width:300px; height:100vh;
  background:#fff; border-right: 2px solid #000;
  transform:translateX(-100%); 
  
  /* Animación fluida */
  transition:transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
  
  z-index:1050;
  box-shadow:4px 0 15px rgba(0,0,0,.1);
  touch-action: pan-y; 
}

.menu-lateral.activo { transform:translateX(0); }

/* Fondo Sutil (20%) y Difuminado */
.overlay-menu {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.2); 
  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  opacity:0; pointer-events:none; 
  transition:opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
  z-index:1049;
}
.overlay-menu.activo { opacity:1; pointer-events:auto; }

#columna-categorias{ width:30%!important; max-width:100px; border-right:1px solid #eee!important; padding:0!important; background:#fafafa; }

#columna-categorias .categoria-item{
  display:block; width:100%; padding:15px 5px!important; font-size:13px; text-align:center; margin-bottom:0; color:#444; border-bottom:1px solid #eee; text-decoration:none!important;
}
#columna-categorias .categoria-item.activo{
  background:var(--color-primary); color:#000; font-weight:700; border-right:2px solid #000;
}
#menuLateral #columna-categorias .categoria-item>img{display:none!important;}
#columna-subcategorias{width:70%!important; padding:15px!important;}

/* --- AJUSTE FINAL: 60px --- */
@media (max-width:575.98px){ 
  #columna-categorias { 
    /* AJUSTE: 60px es el balance perfecto para la X sin dejar tanto hueco */
    padding-top: 50px !important; 
  } 
}

/* =========================================================
   5. BOTÓN DE CERRAR (ANIMACIÓN TUERCA)
========================================================= */
/* Selecciona cualquier botón dentro del menú lateral que tenga un icono de cerrar (x-lg) */
.menu-lateral .btn-close, 
.menu-lateral button i.bi-x-lg,
.menu-lateral .bi-x-lg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote suave */
    transform-origin: center center;
    cursor: pointer;
}

/* Al pasar el mouse o tocar, gira 90 grados */
.menu-lateral .btn-close:hover, 
.menu-lateral .btn-close:active,
.menu-lateral button:hover i.bi-x-lg,
.menu-lateral button:active i.bi-x-lg {
    transform: rotate(90deg); /* Giro mecánico */
}

/* Si quieres que al abrir el menú también haga una entrada girando */
.menu-lateral.activo button i.bi-x-lg {
    animation: spinIn 0.5s ease-out forwards;
}

@keyframes spinIn {
    from { transform: rotate(-90deg) scale(0.8); opacity: 0; }
    to { transform: rotate(0deg) scale(1); opacity: 1; }
}