/* ============================================================
   TEMA DEL CLIENTE: LUMI
   Overlay del cliente (SITE_DIR=lumi). Pisa a static/css/tema.css.
   ============================================================ */

:root {
  /* Paleta ecommerce (azul marino + azul vivo) */
  --theme-primario: #1e3a5f;
  --theme-acento: #2563eb;
  --theme-acento-suave: #e8f0fb;
  --theme-acento-claro: #7ba3f0;
  --theme-acento-fuerte: #1d4ed8;
  --theme-fondo: #f6f8fb;
  --theme-item: #1e3a5f;
}

/* ------------------------------------------------------------
   Logo (versión blanca con fondo transparente sobre navbar/footer)
   ------------------------------------------------------------ */
.navbar-brand img.navbar-logo {
  height: 46px;
  width: auto;
}

footer img.footer-logo {
  height: 44px;
  width: auto;
}

/* ------------------------------------------------------------
   Búsqueda full-width tipo pill (listado)
   ------------------------------------------------------------ */
.busqueda-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--ui-white);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  padding: .4rem .4rem .4rem 1.1rem;
  margin-bottom: 1.5rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.busqueda-pill:focus-within {
  border-color: var(--theme-acento-claro);
  box-shadow: var(--shadow-md);
}

.busqueda-pill > i {
  flex: 0 0 auto;
  color: var(--ui-text-secundario);
  font-size: .95rem;
}

.busqueda-pill input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: .55rem .25rem;
  font-size: 1rem;
  color: var(--ui-text);
}

.busqueda-pill input[type="search"]::placeholder {
  color: #9aa4b2;
}

.busqueda-pill .btn-buscar-pill {
  flex: 0 0 auto;
  border: none;
  background: var(--theme-acento);
  color: #fff;
  font-weight: 700;
  padding: .6rem 1.6rem;
  border-radius: 999px;
  transition: background-color .2s ease;
}

.busqueda-pill .btn-buscar-pill:hover {
  background: var(--theme-acento-fuerte);
  color: #fff;
}

/* Paginación (el generico la estilaba solo dentro de .busqueda-box) */
.page-link,
.btn-buscar {
  border-radius: 999px;
}

.btn-buscar {
  background: var(--theme-acento-suave);
  color: var(--theme-primario);
  border: none;
  font-weight: 600;
  padding: .45rem 1rem;
  margin: 0 .15rem;
}

.btn-buscar:hover {
  background: var(--theme-acento-claro);
  color: #fff;
}

@media (max-width: 575px) {
  .busqueda-pill {
    padding-left: .9rem;
  }

  .busqueda-pill .btn-buscar-pill {
    padding: .6rem 1.1rem;
  }
}