/* ============================================================
   header-buscador.css
   Punto Neto v1.2
   Ruta: public/assets/css/header-buscador.css
   Creado: 2026-07-23
   Modificado: 2026-07-23
   Descripcion: Panel de sugerencias del buscador del header.
                Mismo HTML/JS para desktop y mobile — el unico
                cambio real entre uno y otro es este breakpoint:
                dropdown flotante en desktop, overlay de pantalla
                completa en mobile (patron confirmado con Cris:
                mobile-first, sin dejar de lado desktop).

                v1.2 — barra disparadora mobile (boton nuevo en
                layout.php, fuera del wrap del buscador): pildora
                redondeada con margen, restyle sobre el primer intento
                (barra plana de ancho completo, se veia muy simple).
                Se agrega tambien la regla que revela el <form> del
                buscador DENTRO del overlay una vez abierto — hasta
                ahora ese form quedaba oculto en mobile por una regla
                preexistente de base.css (display:none <768px), sin
                ningun disparador que lo revelara.

                v1.1 — FIX real detectado por Cris (panel se veia
                bien pero desalineado del tema: texto gris palido en
                v1.0, colores fijos que no cambiaban si el admin
                cambia el tema de la tienda). v1.0 traia colores fijos
                (#fff, #1a1a1a, etc.) porque no habia acceso a
                base.css en esa sesion. Ahora usa las variables
                reales generadas por Tema::cssVars() (confirmadas via
                base.css v1.2): --color-superficie, --color-texto,
                --color-texto-suave, --color-borde, --color-primario,
                --color-superficie-alt, --sp-*, --radio-*. Mismo
                criterio que el resto del sitio: si el admin cambia
                el tema (claro/oscuro/otro color), este panel cambia
                solo, sin tocar CSS.

                --radio-lg no esta confirmado en el set de variables
                (base.css solo confirma --radio-sm y --radio-pill) —
                se usa con fallback literal (var(--radio-lg, 16px))
                por si no existe, en vez de asumir a ciegas.
   Depende de:    Variables --color-*, --sp-*, --radio-* generadas
                  por Tema::cssVars() — deben cargarse antes que este
                  archivo (mismo requisito que ya documenta base.css).
   ============================================================ */

.encabezado-buscador-wrap {
  position: relative;
  flex: 1 1 auto;
}

.buscador-header-panel {
  position: absolute;
  top: calc(100% + var(--sp-2, 8px));
  left: 0;
  right: 0;
  background: var(--color-superficie);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg, 16px);
  /* box-shadow es elevacion pura, no color de marca — se queda fijo
     a proposito, funciona igual de bien sobre tema claro u oscuro. */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: var(--sp-4);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 60;
}

.buscador-header-cerrar {
  display: none; /* solo visible en el overlay mobile, ver breakpoint abajo */
}

.buscador-header-titulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.buscador-header-seccion + .buscador-header-seccion {
  margin-top: var(--sp-5, 20px);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-borde);
}

.buscador-header-vacio {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  margin: 0;
}

.buscador-header-sugerencia {
  display: block;
  margin-top: var(--sp-2);
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  color: var(--color-primario);
  cursor: pointer;
  text-align: left;
}
.buscador-header-sugerencia:hover {
  color: var(--color-primario-hover);
}

/* ---- Ofertas (estado inicial) -------------------------------- */
.buscador-header-ofertas {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: 4px;
}

.buscador-header-oferta {
  /* 2026-07-23 — ahora es <button>, no <a> (ver buscador-header.js:
     abre el modal de Vista Rapida en vez de navegar a /producto/<slug>,
     ruta que nunca tuvo vista real). Reset de los estilos default de
     boton que no aplicaban cuando era <a>. */
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;

  flex: 0 0 auto;
  width: 120px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.buscador-header-oferta img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  margin-bottom: var(--sp-2);
  background: var(--color-superficie-alt);
}

.buscador-header-oferta-nombre {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-texto);
}

.buscador-header-oferta-precio {
  font-size: 0.85rem;
  color: var(--color-primario);
  font-weight: 700;
}

/* ---- Categorias (chips) -----------------------------------------
   Reusa la clase .chip generica de base.css a proposito (misma
   pastilla que ya usa el resto del sitio) — el JS agrega class="chip"
   a cada <a>, aqui solo se ajusta el layout del contenedor. */
.buscador-header-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ---- Resultados de busqueda ------------------------------------ */
.buscador-header-resultados {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.buscador-header-resultado {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radio-sm);
  transition: background var(--trans-rapida, .15s ease);
}

.buscador-header-resultado:hover {
  background: var(--color-superficie-alt);
}

.buscador-header-resultado img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  background: var(--color-superficie-alt);
  flex-shrink: 0;
}

.buscador-header-resultado-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.buscador-header-resultado-nombre {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buscador-header-resultado-razon {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
}

.buscador-header-resultado-precio {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primario);
  flex-shrink: 0;
}

/* ---- Mobile: overlay de pantalla completa ----------------------- */
@media (max-width: 767px) {
  .buscador-header-panel {
    position: fixed;
    inset: 0;
    top: 0;
    border-radius: 0;
    max-height: none;
    padding: var(--sp-4);
    padding-top: 64px; /* deja espacio para el boton de cerrar */
    z-index: 200;
  }

  .buscador-header-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--sp-3, 12px);
    right: var(--sp-3, 12px);
    width: 40px;
    height: 40px;
    border-radius: var(--radio-pill);
    background: var(--color-superficie-alt);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    z-index: 201;
  }

  .buscador-header-ofertas {
    padding-bottom: var(--sp-2);
  }
}

/* ---- Mobile: barra disparadora + revelar el form dentro del overlay
   ----------------------------------------------------------------
   El <form class="encabezado-buscador"> vive oculto en mobile por
   una regla de base.css (display:none hasta 768px, preexistente a
   este cambio — el form nunca tuvo por donde abrirse en mobile).
   Esta barra es el disparador visible; al abrirse (clase agregada
   por buscador-header.js en el wrap), la segunda regla de abajo
   fuerza al form a mostrarse DENTRO del overlay ya abierto, como
   barra de busqueda propia arriba del contenido — son hermanos en
   el HTML (el form no vive dentro de .buscador-header-panel), asi
   que se posiciona fixed para que visualmente parezca uno solo. */
@media (max-width: 767px) {
  .buscador-header-disparador {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    width: calc(100% - var(--sp-4, 16px) * 2);
    margin: var(--sp-3, 12px) var(--sp-4, 16px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    background: var(--color-superficie-alt);
    color: var(--color-texto-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pill);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
  }

  .buscador-header-wrap--abierto .encabezado-buscador {
    display: flex !important; /* override puntual de la regla de
      base.css (display:none <768px) — solo cuando el overlay esta
      abierto, nunca en el resto del sitio */
    position: fixed;
    top: var(--sp-3, 12px);
    left: var(--sp-3, 12px);
    right: 64px; /* deja espacio al boton de cerrar (40px + margenes) */
    z-index: 201; /* mismo nivel que .buscador-header-cerrar, por
      encima del panel (200) */
  }
}

@media (min-width: 768px) {
  .buscador-header-disparador {
    display: none; /* solo existe en mobile, desktop ya tiene el
      form real siempre visible en el header */
  }
}

/* Evita el scroll de fondo mientras el overlay mobile esta abierto
   (clase agregada/quitada por buscador-header.js en <body>). Sin
   efecto en desktop porque ahi el panel no tapa la pantalla. */
@media (max-width: 767px) {
  body.buscador-header-bloqueado {
    overflow: hidden;
  }
}