/* ==========================================================================
   Buscador Ajax para WooCommerce (Título + SKU)
   Variables globales (se definen desde los ajustes en :root):
   --wcab-primario, --wcab-primario-rgb, --wcab-texto, --wcab-fondo, --wcab-radio
   ========================================================================== */

.wcab,
.wcab *,
.wcab *::before,
.wcab *::after,
.wcab-panel,
.wcab-panel *,
.wcab-panel *::before,
.wcab-panel *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Contenedor: ocupa el 100 % del espacio disponible (o el ancho máximo
   indicado) y nunca desborda.
   -------------------------------------------------------------------------- */
.wcab {
  --wcab-alto: 48px;
  --wcab-fs: 15px;
  --wcab-icono: 20px;
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--wcab-ancho, 100%);
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1.4;
  text-align: left;
  color: var(--wcab-texto, #0b2545);
}
.wcab--compacto { --wcab-alto: 40px; --wcab-fs: 14px; --wcab-icono: 18px; }
.wcab--grande   { --wcab-alto: 56px; --wcab-fs: 16px; --wcab-icono: 22px; }
.wcab--centro   { margin-left: auto; margin-right: auto; }
.wcab--derecha  { margin-left: auto; }

.wcab .wcab__form {
  margin: 0;
  padding: 0;
  width: 100%;
  border: 0;
  background: none;
}

/* --------------------------------------------------------------------------
   Campo
   -------------------------------------------------------------------------- */
.wcab .wcab__campo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: var(--wcab-alto);
  padding: 0 6px 0 16px;
  background: var(--wcab-fondo, #fff);
  border: 1.5px solid rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.18);
  border-radius: var(--wcab-radio, 14px);
  box-shadow: 0 1px 2px rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.wcab .wcab__campo:hover {
  border-color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.34);
}
.wcab .wcab__campo:focus-within {
  border-color: var(--wcab-primario, #0b2545);
  box-shadow: 0 0 0 4px rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.14);
}

/* Input: neutraliza los estilos que los temas aplican a input[type=search] */
.wcab .wcab__form .wcab__input,
.wcab .wcab__form .wcab__input:focus,
.wcab .wcab__form .wcab__input:hover {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit;
  font-size: var(--wcab-fs);
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.wcab .wcab__form .wcab__input::placeholder {
  color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.5);
  opacity: 1;
}
.wcab .wcab__input::-webkit-search-decoration,
.wcab .wcab__input::-webkit-search-cancel-button,
.wcab .wcab__input::-webkit-search-results-button,
.wcab .wcab__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* Lupa a la izquierda (solo en el modo sin botón) */
.wcab .wcab__icono {
  position: relative;
  display: none;
  flex: none;
  width: var(--wcab-icono);
  height: var(--wcab-icono);
  margin-right: 4px;
  color: var(--wcab-primario, #0b2545);
}
.wcab .wcab__icono svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wcab--sin-boton .wcab__icono { display: inline-flex; }
.wcab--sin-boton .wcab__campo { padding-left: 14px; padding-right: 10px; }

/* Botones: reset + estilo */
.wcab .wcab__form button.wcab__limpiar,
.wcab .wcab__form button.wcab__boton {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
  box-shadow: none;
  outline: none;
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, color 0.15s ease, filter 0.15s ease;
}
.wcab .wcab__form button.wcab__limpiar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.08);
  color: var(--wcab-primario, #0b2545);
}
.wcab .wcab__form button.wcab__limpiar:hover {
  background: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.16);
}
.wcab .wcab__form button.wcab__limpiar[hidden] { display: none !important; }
.wcab .wcab__form button.wcab__limpiar svg { display: block; width: 12px; height: 12px; }

.wcab .wcab__form button.wcab__boton {
  width: calc(var(--wcab-alto) - 12px);
  height: calc(var(--wcab-alto) - 12px);
  border-radius: max(6px, calc(var(--wcab-radio, 14px) - 5px));
  background: var(--wcab-primario, #0b2545);
  color: #fff;
}
.wcab .wcab__form button.wcab__boton:hover { filter: brightness(1.18); }
.wcab .wcab__form button.wcab__boton:active { transform: scale(0.94); }
.wcab .wcab__form button.wcab__boton:focus-visible,
.wcab .wcab__form button.wcab__limpiar:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.35);
}
.wcab .wcab__form button.wcab__boton svg {
  display: block;
  width: var(--wcab-icono);
  height: var(--wcab-icono);
  transition: opacity 0.15s ease;
}
.wcab--sin-boton .wcab__form button.wcab__boton { display: none !important; }

/* Indicador de carga: sustituye a la lupa mientras se consulta */
.wcab .wcab__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  opacity: 0;
  animation: wcab-girar 0.7s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.15s ease;
}
.wcab .wcab__icono .wcab__spinner {
  width: 16px;
  height: 16px;
  border-color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.2);
  border-top-color: var(--wcab-primario, #0b2545);
}
.wcab--cargando .wcab__spinner { opacity: 1; animation-play-state: running; }
.wcab--cargando .wcab__boton svg,
.wcab--cargando .wcab__icono svg { opacity: 0; }
@keyframes wcab-girar { to { transform: rotate(360deg); } }

/* Estilo sólido: campo relleno de azul marino (ideal sobre fondos claros) */
.wcab--solido .wcab__campo {
  background: var(--wcab-primario, #0b2545);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.65);
}
.wcab--solido .wcab__campo:hover { border-color: rgba(255, 255, 255, 0.18); }
.wcab--solido .wcab__campo:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 4px rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.25);
}
.wcab--solido .wcab__form .wcab__input { color: #fff; }
.wcab--solido .wcab__form .wcab__input::placeholder { color: rgba(255, 255, 255, 0.68); }
.wcab--solido .wcab__icono { color: #fff; }
.wcab--solido .wcab__form button.wcab__boton { background: #fff; color: var(--wcab-primario, #0b2545); }
.wcab--solido .wcab__form button.wcab__boton:hover { filter: none; background: rgba(255, 255, 255, 0.88); }
.wcab--solido .wcab__form button.wcab__limpiar { background: rgba(255, 255, 255, 0.18); color: #fff; }
.wcab--solido .wcab__form button.wcab__limpiar:hover { background: rgba(255, 255, 255, 0.3); }
.wcab--solido .wcab__boton .wcab__spinner {
  border-color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.25);
  border-top-color: var(--wcab-primario, #0b2545);
}
.wcab--solido .wcab__icono .wcab__spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

/* --------------------------------------------------------------------------
   Panel de resultados: se inserta en <body> con position:fixed, así no lo
   recorta ningún contenedor con overflow:hidden ni lo tapa la cabecera.
   -------------------------------------------------------------------------- */
.wcab-panel {
  position: fixed;
  z-index: 999999;
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--wcab-texto, #0b2545);
  border-radius: var(--wcab-radio, 14px);
  box-shadow:
    0 24px 48px -16px rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.35),
    0 0 0 1px rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.08);
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.wcab-panel--arriba { transform: translateY(6px); }
.wcab-panel--abierto { display: flex; }
.wcab-panel--visible { opacity: 1; transform: none; }

.wcab-panel__cabecera {
  flex: none;
  padding: 12px 18px 4px;
  font-size: 12px;
  color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.58);
}

.wcab-panel__lista {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 4px 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.25) transparent;
}

/* Resultado */
.wcab-panel .wcab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.12s ease;
}
.wcab-panel .wcab-item:hover,
.wcab-panel .wcab-item--activo {
  background: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.06);
}
.wcab-panel .wcab-item--activo {
  box-shadow: inset 0 0 0 1.5px rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.28);
}
.wcab-item__img {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.05);
}
.wcab-item__img img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  border: 0;
  object-fit: cover;
}
.wcab-item--agotado .wcab-item__img { opacity: 0.55; }

.wcab-item__cuerpo { flex: 1 1 auto; min-width: 0; }
.wcab-item__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--wcab-texto, #0b2545);
}
.wcab-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.62);
}
.wcab-item__sku {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.07);
  color: var(--wcab-primario, #0b2545);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wcab-item__sku-lbl { flex: none; font-weight: 400; opacity: 0.6; }
.wcab-item__sku-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wcab-item__cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wcab-item__agotado {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(180, 35, 24, 0.09);
  color: #b42318;
  font-size: 11.5px;
  font-weight: 600;
}
.wcab-item__titulo mark,
.wcab-item__sku mark {
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.14);
  color: inherit;
}

.wcab-item__precio {
  flex: none;
  margin-left: auto;
  padding-left: 4px;
  max-width: 45%;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wcab-primario, #0b2545);
  white-space: nowrap;
}
.wcab-item__precio del {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.45);
}
.wcab-item__precio ins { text-decoration: none; background: none; }
.wcab-item__precio .amount { font-weight: inherit; color: inherit; }

/* Pie: enlace a la página de resultados completa */
.wcab-panel .wcab-panel__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  padding: 12px 18px;
  border-top: 1px solid rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.08);
  background: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.03);
  color: var(--wcab-primario, #0b2545) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.12s ease;
}
.wcab-panel .wcab-panel__pie:hover,
.wcab-panel .wcab-panel__pie--activo {
  background: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.08);
}
.wcab-panel__pie svg { flex: none; width: 16px; height: 16px; }

/* Sin resultados / error */
.wcab-panel__vacio {
  padding: 26px 20px 28px;
  text-align: center;
}
.wcab-panel__vacio svg {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.28);
}
.wcab-panel__vacio strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--wcab-texto, #0b2545);
  overflow-wrap: anywhere;
}
.wcab-panel__vacio span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.6);
}
.wcab-panel__error {
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
  color: #b42318;
}

/* Esqueleto mientras llega la primera respuesta */
.wcab-esq { display: flex; align-items: center; gap: 12px; padding: 9px 10px; }
.wcab-esq__cuerpo { flex: 1 1 auto; }
.wcab-esq__b {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.06) 25%,
    rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.13) 50%,
    rgba(var(--wcab-primario-rgb, 11, 37, 69), 0.06) 75%
  );
  background-size: 200% 100%;
  animation: wcab-brillo 1.2s ease-in-out infinite;
}
.wcab-esq__img { flex: none; width: 52px; height: 52px; border-radius: 10px; }
.wcab-esq__t { height: 12px; width: 62%; margin-bottom: 8px; }
.wcab-esq__s { height: 10px; width: 34%; }
@keyframes wcab-brillo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Móvil: el panel ocupa el ancho de la pantalla (lo posiciona el JS) */
@media (max-width: 640px) {
  .wcab-panel { font-size: 15px; }
  .wcab-panel .wcab-item { padding: 10px 8px; gap: 10px; }
  .wcab-item__img { width: 48px; height: 48px; }
  .wcab-item__titulo { font-size: 13.5px; }
  .wcab-item__precio { font-size: 13px; }
  .wcab-esq__img { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .wcab-panel { transition: none; transform: none; }
  .wcab-esq__b { animation: none; }
  .wcab .wcab__form button.wcab__boton:active { transform: none; }
}