/* ============================================================
   SOCIOS ECOM — Barra y panel lateral de filtros
   (assets/js/panelFiltros.js). Arriba, solo lo que se usa a
   cada rato: buscar, ordenar y el botón «Filtros». El resto
   entra desde la derecha. Con tokens: el tema oscuro sale solo.
   ============================================================ */

/* ---------- La barra de la sección ---------- */

.pf-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--se-sp-2) var(--se-sp-3);
  margin-bottom: var(--se-sp-3);
}
.pf-buscar {
  flex: 1 1 280px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  gap: 8px;
  cursor: text;
}
.pf-buscar__icono { display: grid; color: var(--se-tinta-3); }
.pf-buscar__icono svg { width: 16px; height: 16px; }
.pf-buscar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--se-fs-body);
  color: var(--se-tinta);
  outline: none;
}
.pf-buscar input::placeholder { color: var(--se-tinta-3); }
/* El campo no lleva contorno propio: el foco de teclado lo marca la caja. */
.pf-buscar:focus-within { border-color: var(--se-verde); box-shadow: var(--se-anillo-foco); }

.pf-orden { display: flex; align-items: center; gap: var(--se-sp-2); flex: 0 0 auto; }
.pf-orden__etiqueta { font-size: var(--se-fs-sm); font-weight: 600; color: var(--se-tinta-2); white-space: nowrap; }
.pf-orden .wfiltro__caja { height: 40px; min-width: 220px; }

.pf-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  font-size: var(--se-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pf-boton svg { width: 16px; height: 16px; }
.pf-boton__n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--bt-degradado, var(--se-verde));
}
.pf-boton__n[hidden] { display: none; }

/* Los filtros puestos, a la vista con el panel cerrado */
.pf-chips { display: flex; flex-wrap: wrap; gap: var(--se-sp-2); margin-bottom: var(--se-sp-4); }
.pf-chips:empty { display: none; }
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--se-r-pill);
  border: .8px solid rgba(var(--se-verde-rgb), .45);
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
  font-size: var(--se-fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.pf-chip:hover { filter: brightness(.97); }
.pf-chip__x { color: var(--se-tinta-3); font-size: 14px; line-height: 1; }

/* ---------- El panel ---------- */

.pf-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--se-tinta);
}
.pf-panel::backdrop {
  background: rgba(6, 10, 12, .46);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: pf-velo .28s ease both;
}
.pf-panel__caja {
  outline: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--se-papel);
  border-left: 1px solid var(--se-linea);
  box-shadow: -40px 0 90px -40px rgba(0, 0, 0, .55);
}
/* El panel recibe el foco al abrirse: con teclado se ve dónde está. */
.pf-panel__caja:focus-visible { box-shadow: inset var(--se-anillo-foco), -40px 0 90px -40px rgba(0, 0, 0, .55); }
.pf-panel[open] .pf-panel__caja { animation: pf-entra .38s cubic-bezier(.16, .84, .24, 1) both; }
.pf-panel.es-cerrando .pf-panel__caja { animation: pf-sale .22s cubic-bezier(.5, 0, .75, 0) both; }
.pf-panel.es-cerrando::backdrop { animation: pf-velo-sale .22s ease both; }

.pf-panel__cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px 20px;
  border-bottom: 1px solid var(--se-linea);
}
.pf-panel__icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  color: #fff;
  background: var(--bt-degradado, var(--se-verde));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -12px rgba(20, 195, 154, .8);
}
.pf-panel__icono svg { width: 18px; height: 18px; }
.pf-panel__textos { flex: 1; min-width: 0; }
.pf-panel__titulo { margin: 0; font: 700 18px/1.2 var(--se-fuente-display); color: var(--se-tinta); }
.pf-panel__textos small { display: block; margin-top: 2px; font-size: var(--se-fs-xs); color: var(--se-tinta-3); }
.pf-panel__cerrar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--se-linea);
  background: transparent;
  color: var(--se-tinta-2);
  cursor: pointer;
  transition: background var(--se-trans), color var(--se-trans);
}
.pf-panel__cerrar:hover { background: var(--se-papel-hundido); color: var(--se-tinta); }
.pf-panel__cerrar svg { width: 16px; height: 16px; }

.pf-panel__cuerpo { flex: 1; min-height: 0; padding: 18px 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.pf-campos { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; background: none; }
.pf-campos .wfiltro__caja { height: 42px; }
.pf-panel[open] .pf-campos > * { animation: pf-campo .4s cubic-bezier(.16, .84, .24, 1) both; }
.pf-campos > :nth-child(2) { animation-delay: .03s !important; }
.pf-campos > :nth-child(3) { animation-delay: .06s !important; }
.pf-campos > :nth-child(4) { animation-delay: .09s !important; }
.pf-campos > :nth-child(5) { animation-delay: .12s !important; }
.pf-campos > :nth-child(6) { animation-delay: .15s !important; }
.pf-campos > :nth-child(7) { animation-delay: .18s !important; }
.pf-campos > :nth-child(8) { animation-delay: .21s !important; }
.pf-campos > :nth-child(9) { animation-delay: .24s !important; }

.pf-panel__pie {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--se-linea);
  background: var(--se-papel);
}
.pf-panel__pie .btn { justify-content: center; height: 44px; padding: 0 18px; }
.pf-ver { font-variant-numeric: tabular-nums; }

@keyframes pf-entra { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pf-sale { to { transform: translateX(100%); } }
@keyframes pf-velo { from { opacity: 0; } }
@keyframes pf-velo-sale { to { opacity: 0; } }
@keyframes pf-campo { from { opacity: 0; transform: translateX(14px); } }

@media (prefers-reduced-motion: reduce) {
  .pf-panel::backdrop, .pf-panel .pf-panel__caja, .pf-panel .pf-campos > * { animation: none !important; }
}

@media (max-width: 640px) {
  .pf-buscar { flex-basis: 100%; }
  /* Ordenar y «Filtros» en la misma fila */
  .pf-orden, .tg-barra .tg-orden { flex: 1 1 0; min-width: 0; }
  .pf-orden__etiqueta, .tg-barra .tg-orden__etiqueta { display: none; }
  .tg-barra .tg-orden .wfiltro__caja { flex: 1; min-width: 0; }
  .pf-orden .wfiltro__caja { flex: 1; min-width: 0; }
  .pf-panel { width: 100vw; }
  .pf-panel__caja { border-left: 0; }
}