/* =============================================================
   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).
   * Objetivo actual: la barra de búsqueda pasa a su propia fila,
     a lo ancho completo y un poco más alta (cómoda al tacto).
   ============================================================= */

@media (max-width: 767.98px) {

  /* ----------------------------------------------------------
     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.
     order:3 lo manda debajo del logo y de los íconos.
     flex:0 0 100% + width:100% vencen al w-50 de Bootstrap. */
  #bar-2 > .d-flex.w-50 {
    order: 3;
    flex: 0 0 100%;
    width: 100% !important;
  }

  /* ----------------------------------------------------------
     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);  /* borde sutil de marca */
  }

  #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;
  }

  /* Foco con el color primario del proyecto */
  #divBuscarProducto:focus-within {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
  }

  /* ----------------------------------------------------------
     3) Compensación del alto extra (IMPORTANTE)
        El #page-topbar es position:fixed. Al añadir la fila del
        buscador, el header sube ~60px. Sin esto, el contenido
        quedaría tapado por el header.

        >>> Si ves el contenido tapado (subir el número) o con
            demasiado hueco arriba (bajarlo), ajusta SOLO este
            valor. Es el único que deberías tener que tocar. <<<
        Base móvil original = 45px  |  aquí 45 + ~60 = 105px
     ---------------------------------------------------------- */
  .page-content {
    margin-top: 105px !important;
  }

  /* ----------------------------------------------------------
     4) Solapa (pestaña) de filtros
        Como el buscador pasa a su propia fila (bloque 1), la
        pestaña de filtros quedaba a la altura de la barra de
        búsqueda y tapaba parte de ella. Se baja para dejarla por
        debajo del buscador.

        >>> Si quieres subir/bajar la pestaña, ajusta SOLO este
            valor. <<<
     ---------------------------------------------------------- */
  #filtro-slide-container .slide-tab {
    top: 150px;
  }

}