/* ==========================================================================
   PRIDO — Filtros por lote (r4 · 2026-09-11 · CTA en teal suave)
   Capa del panel en modo lote ([data-pf-mode="batch"], prido-filtros.r4.js):
   · barra «Limpiar · Ver N productos» en TODOS los anchos (columna y hoja),
   · términos que no combinan: tachados al 38 % sin desaparecer (canvas «Estados» · 2),
   · conteos en recálculo atenuados sin mover la columna (canvas «Estados» · 1),
   · foco de la ficha: outline 1px en tinta con 2px de separación.
   Carga después de archive v2/v3 (prioridad 1002). Prefijo con la clase repetida
   + atributo (0,4,0) para ganar a v2 §15 (0,3,0) y v3 §7 (0,3,1) sin tocarlos.
   Tokens: --v3-* (body.prido-archive-v3) con respaldo en --ps-* (v2 §15 los declara
   en el propio panel, así que también llegan a la hoja portada a <body>).
   Rollback: ?prido_filters_batch=0 (esta hoja no se encola).
   ========================================================================== */

/* ---------- 0 · texto solo para lectores de pantalla ---------- */
.pf-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- 1 · tokens ---------- */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] {
    --pfb-ink:     var(--v3-ink, var(--ps-ink, #1a2a3a));
    --pfb-muted:   var(--v3-muted, var(--ps-muted, #5e6f80));
    --pfb-faint:   var(--ps-faint, #8a9aae);
    --pfb-line:    var(--v3-line, var(--ps-line, #e4e9ef));
    --pfb-surface: var(--v3-surface, var(--ps-surface, #ffffff));
    --pfb-soft:    var(--ps-surface-3, #eef2f6);
    --pfb-cta-bg:  var(--v3-cta-bg, var(--ps-ink, #1a2a3a));
    --pfb-cta-fg:  var(--v3-cta-fg, #ffffff);
    --pfb-accent:  var(--v3-teal-deep, var(--ps-cta, #0e7e7a));
    /* CTA en teal suave (elección del usuario, 11-sep): tono sobre tono en vez del
       bloque en tinta, que se confundía con «Agregar al carro» de las cards. */
    --pfb-cta-soft-bg:       color-mix(in srgb, var(--pfb-accent) 12%, var(--pfb-surface));
    --pfb-cta-soft-bg-hover: color-mix(in srgb, var(--pfb-accent) 19%, var(--pfb-surface));
    --pfb-cta-soft-fg:       #0a5e5a;
    --pfb-radius:  var(--v3-r-btn, 12px);
    --pfb-font:    var(--v3-ui, var(--ps-fb, 'Noto Sans', system-ui, sans-serif));
    --pfb-ease:    var(--ps-ease, cubic-bezier(.2, 0, .2, 1));
    --pfb-k:       var(--k, 1);
}

/* Oscuro: el tinte necesita más cuerpo y el texto pasa a ser el propio acento aclarado
   (el #0a5e5a fijo no llega a contraste sobre la superficie oscura). */
:root[data-theme="dark"] .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"],
.woodmart-dark .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] {
    --pfb-cta-soft-bg:       color-mix(in srgb, var(--pfb-accent) 16%, var(--pfb-surface));
    --pfb-cta-soft-bg-hover: color-mix(in srgb, var(--pfb-accent) 24%, var(--pfb-surface));
    --pfb-cta-soft-fg:       color-mix(in srgb, var(--pfb-accent) 78%, #ffffff);
}

/* ---------- 2 · barra de aplicar ---------- */
/* Columna (≥768): último hijo del panel. Con v3 el panel es columna flex con scroll
   interno (§10), así que la barra queda SIEMPRE al pie; sticky como respaldo sin v3.
   Anula el display:none que filtros r11 y v2 dan al pie de la hoja en columna. */
@media (min-width: 768px) {
    .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filters-sheet-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: calc(8px * var(--pfb-k)) !important;
        flex: 0 0 auto !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 3 !important;
        margin: 0 !important;
        padding: calc(12px * var(--pfb-k)) calc(16px * var(--pfb-k)) calc(14px * var(--pfb-k)) !important;
        border-top: 1px solid var(--pfb-line) !important;
        background: var(--pfb-surface) !important;
        box-shadow: none !important;
    }
    .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filters-sheet-footer.is-dirty {
        box-shadow: 0 -12px 20px -16px rgba(15, 26, 38, .4) !important;
    }
}

/* Con v3 el alto del panel se calcula para cuando ya está pegado bajo la cornisa: arriba de la
   página empieza más abajo y el pie quedaba bajo el pliegue. El JS publica el alto que de verdad
   queda visible (--pfb-fit-h); sin JS, la fórmula de v3 §10. */
@media (min-width: 768px) {
    .prido-archive-v3 .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"]:not(.is-all-filters-open) {
        max-height: var(--pfb-fit-h, calc((100vh - var(--v3-cornice-bottom, 0px) - 32px) / 0.9)) !important;
    }
}

/* Hoja móvil (≤767): barra fija al pie con el CTA a todo lo ancho que deja «Limpiar». */
@media (max-width: 767px) {
    body.prido-filters-sheet-open .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"].is-all-filters-open .prido-filters-sheet-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 12px 16px max(12px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid var(--pfb-line) !important;
        background: var(--pfb-surface) !important;
        box-shadow: 0 -10px 22px -18px rgba(15, 26, 38, .5) !important;
    }
    .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-applybar__hint { display: none !important; }
}

.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-applybar__row {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--pfb-k));
    width: 100%;
    min-width: 0;
}

/* «Cambios sin aplicar» (columna): el aviso que acompaña al CTA activo */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-applybar__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    font-family: var(--pfb-font) !important;
    font-size: calc(10.5px * var(--pfb-k)) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--pfb-accent) !important;
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-applybar__hint::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-applybar__hint[hidden] { display: none !important; }

/* «Limpiar»: enlace secundario (vacía el borrador; el CTA confirma) */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-clear {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: none !important;
    box-shadow: none !important;
    font-family: var(--pfb-font) !important;
    font-size: calc(13px * var(--pfb-k)) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--pfb-ink) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    cursor: pointer;
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-clear:disabled {
    color: var(--pfb-faint) !important;
    text-decoration: none !important;
    cursor: default;
}

/* CTA «Ver N productos» */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply {
    position: relative;
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 calc(16px * var(--pfb-k)) !important;
    border: 1px solid transparent !important;
    border-radius: var(--pfb-radius) !important;
    background: var(--pfb-cta-soft-bg) !important;
    color: var(--pfb-cta-soft-fg) !important;
    font-family: var(--pfb-font) !important;
    font-size: calc(14px * var(--pfb-k)) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .16s var(--pfb-ease), color .16s var(--pfb-ease), border-color .16s var(--pfb-ease);
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply:is([data-state="ready"], [data-state="view"], [data-state="error"])::after {
    content: "→";
    flex: none;
    font-size: 15px;
    line-height: 1;
    transition: transform .2s var(--pfb-ease);
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply:is([data-state="ready"], [data-state="view"], [data-state="error"]):hover { background: var(--pfb-cta-soft-bg-hover) !important; }
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply:is([data-state="ready"], [data-state="view"], [data-state="error"]):hover::after { transform: translateX(3px); }

/* limpio (columna): el conteo del catálogo mostrado, discreto; no invita a pulsar */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply[data-state="clean"] {
    background: transparent !important;
    border-color: var(--pfb-line) !important;
    color: var(--pfb-muted) !important;
    font-weight: 600 !important;
    cursor: default;
}
/* calculando: el número se está recalculando; pulsar aplica igual */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply[data-state="loading"]::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: pfb-spin .7s linear infinite;
}
/* sin resultados: apagado de verdad (aria-disabled lo mantiene enfocable) */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply[data-state="empty"] {
    background: var(--pfb-soft) !important;
    border-color: transparent !important;
    color: var(--pfb-muted) !important;
    cursor: not-allowed;
}
@keyframes pfb-spin { to { transform: rotate(360deg); } }

/* ---------- 3 · términos que no combinan: se ocultan (r5, 2026-10-21) ----------
   !important: tiene que ganarle al display:list-item en línea que «Ver más» pone a los
   plegados. El JS (prido-filtros r8, layoutSection) recalcula el pliegue y el (+N) sobre los
   que quedan; una sección sin opciones vivas ni marcadas desaparece entera (con «body» para
   ganarle al display:block !important de archive v3 §9 sobre Color y Tapiz Respaldo). */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-item.is-disabled,
body .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filters-body > .prido-filter-section.is-exhausted:not(.has-active),
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-show-more[hidden] {
    display: none !important;
}

/* ---------- 4 · calculando: conteos atenuados con la altura intacta ---------- */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-count {
    transition: opacity .15s var(--pfb-ease);
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"].is-previewing .prido-filter-count {
    opacity: .35 !important;
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-section.is-exhausted:not(.has-active) .prido-filter-section-label {
    opacity: .6;
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-section-count[hidden] {
    display: none !important;
}

/* ---------- 5 · foco (el de la ficha) ---------- */
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply:focus-visible,
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-clear:focus-visible,
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-chip:focus-visible,
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filters-clear-all-chips:focus-visible,
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-section-toggle:focus-visible {
    outline: 1px solid var(--pfb-ink) !important;
    outline-offset: 2px !important;
}
.prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-label:has(.prido-filter-checkbox:focus-visible) {
    outline: 1px solid var(--pfb-ink);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 6 · grilla vacía tras aplicar (raro: el CTA se apaga en 0) ---------- */
.prido-grilla-products .prido-grilla-no-results .prido-grilla-empty-reset {
    margin-top: 8px;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- 7 · movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply,
    .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply::after,
    .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .prido-filter-count {
        transition: none !important;
    }
    .prido-filters-panel.prido-filters-panel[data-pf-mode="batch"] .pf-apply[data-state="loading"]::before {
        animation: none !important;
    }
}

/* ---------- 8 · «Color de Tapiz» al fondo de la columna (pedido del 11-sep) ----------
   La §9 de archive v3 lo pone 3º (order 3) siguiendo el canvas. Aquí pasa a ser el
   último de los visibles, justo encima de «Más filtros» (order 90 en filtros r11);
   las secciones del cajón van en 60, así que sigue por delante de ellas al abrirlo.
   Prefijo con el atributo del modo lote (0,5,1) para ganar a v3 (0,4,1) sin tocar su
   hoja. La hoja móvil conserva su orden: allí la lista no está curada. */
@media (min-width: 768px) {
    body.prido-archive-v3 .prido-filters-panel[data-pf-mode="batch"] .prido-filters-body > .prido-filter-section[data-taxonomy="pa_color"] {
        order: 7 !important;
    }
}