/* ====================================================
   shared/css/responsive.css
   Media queries compartidos entre tienda, mayorista y admin
   ==================================================== */

@media (max-width: 600px) {

  /* --- Sidebar móvil --- */
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    width: 100vw;
    min-width: 100vw;
    height: 94%;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 999;
  }
  #sidebar.abierto { transform: translateX(0); }
  #sidebar h1 { display: none; }

  /* --- Topbar móvil --- */
  #topbar-movil {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 60px;
    background-color: #1a1a1a;
    color: white;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    z-index: 1001;
    border-bottom: 1px solid #444;
    box-sizing: border-box;
  }
  #topbar-movil h1 { font-size: 28px; margin: 0; }
  .menu-toggle { background: none; border: none; color: white; font-size: 30px; cursor: pointer; }
  .topbar-izquierda { display: flex; align-items: center; justify-content: center; }
  #toggle-filtros { background: none; border: none; color: white; font-size: 28px; cursor: pointer; }

  /* --- Barra búsqueda móvil --- */
  #busqueda-filtros {
    top: 0; left: 0; right: 0;
    width: 100%;
    margin-top: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }
  #busqueda-filtros.visible { transform: translateY(60px); }

  /* --- Main móvil --- */
  main {
    margin-top: 50px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 0;
  }

  /* --- Sidebar menú móvil --- */
  .menu-categoria  { font-size: 20px; }
  .botonflecha     { font-size: 30px; }
  .menu-subcategoria { margin: 10px; font-size: 15px; }
  .submenu         { font-size: 20px; }

  /* --- Grid móvil --- */
  .productos-grid {
    grid-template-columns: repeat(auto-fill, minmax(40vw, 1fr));
    gap: 15px;
  }
  .producto h4 { margin-top: -8px; height: 4.6rem; }
  .stock { padding: 6px 8%; }
  .producto img { width: 100%; height: 36.67vw; }
}

@media (max-width: 395px) {
  main { margin-right: 5px; margin-left: 5px; flex-grow: 1; padding: 0; }
  .stock { padding: 6px 5%; }
}
@media (max-width: 370px) {
  .stock { padding: 5px 2%; }
}
@media (max-width: 345px) {
  .stock { padding: 5px 1%; }
}
@media (max-width: 335px) {
  .stock { display: flex; flex-direction: column; text-align: center; padding: 5px 1%; }
}