/* =============================================================
   FCA-movil.css  —  Ajustes responsivos SOLO para teléfonos
   -------------------------------------------------------------
   * Todo va dentro de @media (max-width: 767.98px): NO afecta
     tablet ni escritorio. El diseño de escritorio queda intacto.
   * Colores tomados del proyecto: --bs-primary = rgb(109, 0, 25).
   * Secciones:
       A) Barra de búsqueda a fila completa (ya existente).
       B) RDP-31  Filtros fijos dentro de las categorías.
       C) RDP-29  Tarjetas de producto compactas (2 por fila).
       D) RDP-32  Ficha de producto: layout redistribuido.
     (RDP-30, cierre del menú lateral, se resuelve en
      assets/js/FCA-movil.js porque es comportamiento JS.)
   ============================================================= */

@media (max-width: 767.98px) {

  /* ==========================================================
     A) BARRA DE BÚSQUEDA  (comportamiento previo, sin cambios)
     ---------------------------------------------------------- */

  /* A.1) #bar-2 pasa a DOS filas
        Fila 1:  hamburguesa + logo   |   carrito + usuario
        Fila 2:  buscador a lo ancho completo */
  #bar-2 {
    flex-wrap: wrap;
    height: auto !important;   /* deja crecer a 2 filas (antes 80px fijo) */
    row-gap: .45rem;
    padding-bottom: .55rem;
  }

  /* El contenedor del buscador (hoy con .w-50) baja a su propia fila. */
  #bar-2 > .d-flex.w-50 {
    order: 3;
    flex: 0 0 100%;
    width: 100% !important;
  }

  /* A.2) El campo: full-width, más alto y con toque de marca */
  #divBuscarProducto {
    width: 100%;
    padding-top: .3rem;
    padding-bottom: .3rem;
    border: 1px solid rgba(var(--bs-primary-rgb), .30);
  }

  #divBuscarProducto #buscarProducto {
    height: 44px;      /* área táctil cómoda */
    font-size: 16px;   /* 16px evita el auto-zoom de iOS al enfocar */
  }

  #buscarProducto_icon {
    width: 40px;
    height: 40px;
  }

  #divBuscarProducto:focus-within {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
  }

  /* A.2.bis) RDP — LOGO FLUIDO EN MÓVIL (adaptable, sin descuadrar la cabecera)
     En móvil se muestra la variante .logo-sm. Se usa clamp() para que el logo
     escale con el ancho del teléfono: 30px en pantallas muy chicas y hasta 48px
     en las más anchas. El tope (48px) se mantiene por debajo del alto de la fila
     de la cabecera: los botones de carrito/usuario (.header-item) ya miden 70px,
     así que la fila 1 de #bar-2 mide ~70px y el logo cabe SIN aumentar la altura
     del header. Por eso NO hay que tocar el margin-top de .page-content (105px).
       · 360px de ancho  → ~40px de logo
       · 414px de ancho  → ~46px de logo
       · ≥509px de ancho → 56px (máximo)
     El tope (56px) sigue por debajo de los ~70px de la fila, así que la cabecera
     NO crece y NO hay que tocar el margin-top (105px).
     (En pantallas < 380px el template oculta .navbar-brand-box: ahí no se ve.)
     Esta regla se carga después de FCA.css, por lo que tiene prioridad en móvil. */
  .navbar-brand-box .logo .logo-sm img {
    height: clamp(34px, 11vw, 56px) !important;
    max-height: 56px !important;
    width: auto !important;
  }

  /* A.3) Compensación del alto extra del header (IMPORTANTE)
        El #page-topbar es position:fixed. Al añadir la fila del
        buscador el header sube ~60px. Sin esto el contenido queda
        tapado por el header.
        >>> Si ves el contenido tapado (subir el número) o con
            demasiado hueco arriba (bajarlo), ajusta SOLO este
            valor. <<<  Base móvil original = 45px | 45 + ~60 = 105px */
  .page-content {
    margin-top: 105px !important;
  }


  /* ==========================================================
     B) RDP-31  —  Barra de filtros FIJA dentro de categorías
     ----------------------------------------------------------
     Antes: #filtro-slide-container era position:fixed y entraba
     deslizándose desde la izquierda mediante la pestaña .slide-tab
     (incómodo al tacto en móvil).
     Ahora: en móvil el panel deja de ser un overlay deslizante y
     pasa a formar parte del flujo, como una tarjeta fija encima
     del listado de productos (dentro del área de categorías).
     ---------------------------------------------------------- */

  /* El panel vuelve al flujo normal y ocupa todo el ancho.
     Se neutralizan todas las propiedades del modo "deslizante"
     (position/left/top/height/transition) que vienen de FCA.css. */
  #filtro-slide-container {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 100% !important;
    z-index: auto !important;
    transition: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
    border-radius: 12px !important;
    margin-bottom: 1rem;
  }

  /* La columna hermana (listado de productos) también a ancho completo
     para que el filtro quede ARRIBA y los productos DEBAJO. */
  #filtro-slide-container + .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Ya no se usa la pestaña flotante en móvil. */
  #filtro-slide-container .slide-tab {
    display: none !important;
  }

  /* La tarjeta interior crece según su contenido (sin alto forzado). */
  #filtro-slide-container .card {
    height: auto !important;
    border-radius: 12px !important;
  }
  #filtro_busqueda {
    position: static !important;
    height: auto !important;
  }
  /* El cuerpo del filtro no necesita scroll propio cuando está fijo. */
  #filtro-slide-container .card-body {
    overflow-y: visible !important;
  }


  /* ==========================================================
     C) RDP-29  —  Tarjetas de producto compactas en móvil
     ----------------------------------------------------------
     Antes: cada tarjeta medía min-height:470px (FCA.css) + imagen
     de 230px, por lo que solo entraba 1 producto por pantalla.
     Ahora: se reduce la altura/imagen/tipografías y, en la grilla
     de resultados, se muestran 2 productos por fila.
     Aplica a las tarjetas de la tienda (.producto_item_body), tanto
     las generadas en PHP (inicio.php) como por JS (tienda.js).
     ---------------------------------------------------------- */

  /* Se elimina la altura mínima fija de 470px: la tarjeta crece según su
     contenido. min-width:0 permite que encoja en columnas estrechas. */
  .card.producto_item_body {
    min-height: 0 !important;
    min-width: 0;
  }

  /* Imagen FLUIDA: ocupa el ancho de la tarjeta y su alto se calcula con
     aspect-ratio, así se adapta sola a cualquier tamaño de pantalla
     (vence al inline height:230px). */
  .producto_item_body .product-img img {
    height: auto !important;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }

  /* Cuerpo y tipografías fluidas: clamp(mínimo, preferido en vw, máximo). */
  .producto_item_body .card-body {
    padding: clamp(.4rem, 2vw, .75rem) !important;
  }
  .producto_item_body .product-name {
    font-size: clamp(11px, 3.2vw, 14px) !important;
    -webkit-line-clamp: 2;          /* máx 2 líneas en móvil */
    overflow-wrap: anywhere;
  }
  .producto_item_body .descripcion-producto small {
    font-size: clamp(10px, 2.8vw, 12px) !important;
  }
  .producto_item_body .descripcion-producto h5 {
    font-size: clamp(13px, 3.6vw, 16px) !important;
  }

  /* Precio + "IVA INCLUIDO": el <h5> es un d-flex; se permite que
     "IVA INCLUIDO" baje de línea si no cabe (antes se salía de la tarjeta). */
  .producto_item_body .descripcion-producto h5.d-flex {
    flex-wrap: wrap;
  }
  .producto_item_body .descripcion-producto h5 .text-primary {
    font-size: clamp(9px, 2.4vw, 11px) !important;
  }

  /* Fila "Cantidad: [−][1][+]": puede envolver (la etiqueta pasa arriba) y el
     control numérico ocupa el ancho disponible. Evita que el botón "+" y la
     cantidad queden fuera en pantallas chicas (iPhone SE, Galaxy, etc.). */
  .producto_item_body .d-flex.gap-2 {
    flex-wrap: wrap;
  }
  .producto_item_body .d-flex.gap-2 > div {
    min-width: 0;
  }
  .producto_item_body .input-group {
    width: 100%;
  }
  .producto_item_body .input-group .form-control {
    min-width: 0;
  }
  .producto_item_body .form-label {
    font-size: clamp(11px, 3vw, 13px) !important;
  }
  .producto_item_body .btn {
    font-size: clamp(11px, 3vw, 14px) !important;
  }

  /* --- Grilla de resultados: 2 productos por fila, repartiendo el ancho ---
     Solo afecta a las tarjetas hijas directas de #lista-productos (resultados
     de búsqueda/categoría); el carrusel de destacados no entra aquí. Con las
     reglas fluidas de arriba, el contenido nunca se desborda. */
  #lista-productos > .producto-item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    min-width: 0;
  }
  #lista-productos > .producto-item .card.producto_item_body {
    margin-left: 0 !important;    /* la tarjeta JS trae ms-3 que descuadra */
    margin-right: 0 !important;
  }


  /* ==========================================================
     D) RDP-32  —  Ficha de producto redistribuida y FLUIDA
     ----------------------------------------------------------
     Antes: la cabecera <div class="d-flex mb-5"> ponía la columna de imagen
     y la de resumen en la MISMA fila (d-flex sin wrap), aplastándolas y
     dejando elementos (cantidad, "+", IVA) fuera de pantalla.
     Ahora: se apilan en vertical y los tamaños se calculan con clamp()/vw y
     aspect-ratio, de modo que se ajusten a cualquier ancho sin fijar píxeles.
     El hook .rdp-detalle-cabecera se agrega en ver_detalle_producto.php para
     no afectar otros .d-flex del sistema.
     ---------------------------------------------------------- */

  .rdp-detalle-cabecera {
    flex-direction: column !important;  /* imagen arriba, resumen abajo */
    flex-wrap: wrap;
    margin-bottom: 1.5rem !important;
  }
  .rdp-detalle-cabecera > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;   /* anula ms-md-4 en móvil */
    min-width: 0;                /* permite encoger sin desbordar */
  }

  /* Imagen principal FLUIDA: se adapta al ancho con alto máximo relativo. */
  /* En movil el MARCO ocupa el ancho disponible y limita su alto;
     la imagen rellena el marco manteniendo su proporcion (contain). */
  .rdp-detalle-cabecera .zoom-container.main-product-frame {
    max-width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 60vh;
  }
  .rdp-detalle-cabecera .main-product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Miniaturas fluidas. */
  .rdp-detalle-cabecera .thumb-img {
    width: clamp(48px, 14vw, 64px) !important;
    height: clamp(48px, 14vw, 64px) !important;
  }

  /* Título y precio fluidos. */
  .rdp-detalle-cabecera h4 {
    font-size: clamp(1rem, 4.5vw, 1.3rem) !important;
    margin-top: 1rem !important;
    overflow-wrap: anywhere;
  }
  .rdp-detalle-cabecera h5 {
    font-size: clamp(.95rem, 4vw, 1.15rem) !important;
    overflow-wrap: anywhere;
  }

  /* El control de cantidad no debe salirse del ancho disponible. */
  .rdp-detalle-cabecera .input-group {
    max-width: 100%;
  }
  .rdp-detalle-cabecera .input-group .form-control {
    min-width: 0;
  }

}