/* responsive.css — Media queries: tablet, móvil, pantalla pequeña */

/* ─────────────────────────────── TABLET ≤ 1024px ─────────────────────── */
@media (max-width: 1024px) {
  :root { --ancho-sidebar: 210px; }

  .auth-shell { grid-template-columns: 1fr; }
  .auth-izquierda { display: none; }
  .auth-derecha { padding: 40px 32px; }
}

/* ─────────────────────────────── MÓVIL ≤ 768px ──────────────────────── */
@media (max-width: 768px) {

  /* Ocultar sidebar, mostrar bottom nav */
  .sidebar            { display: none !important; }
  .navbar-inferior    { display: flex !important; }

  /* Ajustar contenido principal para bottom nav */
  .contenido-principal {
    margin-left: 0;
    padding: 14px 12px;
    padding-bottom: calc(var(--alto-bottom) + env(safe-area-inset-bottom) + 16px);
  }

  /* Ocultar búsqueda en navbar desktop */
  .navbar__busqueda   { display: none !important; }

  /* Navbar más compacta */
  .navbar { padding: 0 12px; gap: 8px; }
  .navbar__logo { font-size: 1.125rem; }

  /* Feed */
  .grid-feed { gap: 14px; max-width: 100%; }

  /* Perfil — apilar verticalmente */
  .perfil-header__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .perfil-header__info { width: 100%; }
  .perfil-header__acciones { justify-content: center; }
  .perfil-header__avatar { width: 76px; height: 76px; }
  .perfil-header__stats { justify-content: space-around; }
  .stat-perfil__num { font-size: 1rem; }

  /* Grid usuarios: 2 columnas */
  .grid-usuarios {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Auth: pantalla completa */
  .auth-shell {
    display: flex; flex-direction: column; min-height: 100dvh;
  }
  .auth-derecha {
    flex: 1; padding: 28px 20px;
    justify-content: flex-start; padding-top: 36px;
    overflow-y: auto;
  }
  .auth-tarjeta { max-width: 100%; }

  /* Modal: bottom sheet en móvil */
  .modal-overlay { align-items: center; padding: 0; }
  .modal {
    border-radius: var(--r-2xl);
    max-height: 88dvh;
    padding: 22px 20px 32px;
    margin: 0 10px;
  }

  /* Toasts: ancho completo en móvil */
  .contenedor-toast {
    bottom: calc(var(--alto-bottom) + env(safe-area-inset-bottom) + 12px);
    right: 12px; left: 12px;
  }
  .toast { min-width: unset; width: 100%; }

  /* Grid de perfil */
  .grid-perfil { gap: 2px; }

  /* Banner promo */
  .banner-promo { min-height: 130px; padding: 18px 16px; }
  .banner-promo__titulo { font-size: 1.125rem; }
  .banner-promo__contenido { max-width: 56%; }

  /* Pills */
  .pill-icono { width: 36px; height: 36px; font-size: 1rem; }
  .pill-categoria { min-width: 62px; padding: 8px 10px; }

  /* Tabs */
  .tab-btn { padding: 9px 14px; font-size: .875rem; }

  /* Cabecera de página */
  .titulo-pagina { font-size: 1.25rem; }

  /* Tarjeta usuario en lista — layout horizontal */
  .tarjeta-usuario-lista {
    flex-direction: row !important;
    text-align: left !important;
    gap: 12px !important;
  }
  .tarjeta-usuario-lista .tarjeta-usuario__avatar { width: 52px !important; height: 52px !important; }
  .tarjeta-usuario-lista .tarjeta-usuario__stats { justify-content: flex-start !important; }
}

/* ─────────────────────────────── SMALL ≤ 480px ──────────────────────── */
@media (max-width: 480px) {

  /* Grid usuarios: 1 columna */
  .grid-usuarios { grid-template-columns: 1fr; }

  .contenido-principal { padding: 10px 10px; padding-bottom: calc(var(--alto-bottom) + env(safe-area-inset-bottom) + 14px); }

  /* Navbar logo más pequeño */
  .navbar__logo { font-size: 1rem; }

  /* Tarjeta producto: acciones compactas */
  .btn-accion { padding: 6px 8px; font-size: .8125rem; }
  /* .btn-accion span { display: none; } Ocultar texto, sólo iconos */
  .btn-accion-cta { padding: 6px 12px; }

  /* Perfil stats más compactos */
  .stat-perfil { padding: 4px 2px; }
  .stat-perfil__etiqueta { font-size: .6875rem; }

  /* Banner más pequeño */
  .banner-promo { min-height: 110px; }
  .banner-promo__titulo { font-size: 1rem; }
  .banner-promo__sub { display: none; }
  .banner-promo__imagen { width: 42%; }

  /* Grid perfil */
  .grid-perfil { gap: 1px; }

  /* Pills de categoría */
  .pill-categoria { min-width: 56px; padding: 7px 8px; font-size: .75rem; }

  /* Auth inputs */
  .campo-form { height: 44px; font-size: .9375rem; }
  .btn-lg { padding: 11px 22px; font-size: .9375rem; }

  /* para responsive de dos columnas para render de productos del perfil
  .grid-perfil{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    padding:8px;
  }*/

  /* para productos del perfil otro estilo de diseño para el boton de munu y count*/
  .producto-card-perfil .producto-card-menu{
    top:5px;
    left:5px;
    width:24px;
    height:24px;

  }
  .producto-card-perfil .producto-card-count{
    top:5px;
    right:5px;
  }

  /* Modal producto: diseño más compacto */
  .modal-producto__descripcion {
    max-height: 200px;
  }  
}

/* ─────────────────────────── SÓLO DESKTOP ───────────────────────────── */
@media (min-width: 769px) {
  .solo-movil { display: none !important; }
}

/* ─────────────────────────── SÓLO MÓVIL ────────────────────────────── */
@media (max-width: 768px) {
  .solo-desktop { display: none !important; }
}

/* ─────────────────────────── DESKTOP GRANDE ≥ 1440px ───────────────── */
@media (min-width: 1440px) {
  .contenido-principal { padding: 28px 32px 40px; }
  .grid-feed { max-width: 700px; }
}

/* ─────────────────────────── MOVIMIENTO REDUCIDO ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────────────────── IMPRESIÓN ──────────────────────────────── */
@media print {
  .navbar,.sidebar,.navbar-inferior { display: none !important; }
  .contenido-principal { margin: 0; padding: 0; }
}