:root { --vf-accent: #ee7012; --vf-text: #1f1f1f; --vf-muted: #7a7a7a; --vf-line: #ececec; --vf-bg: #f6f6f6; --vf-radius: 10px; }

.vf { font-size: 14px; color: var(--vf-text); line-height: 1.35; }
.vf *, .vf *::before, .vf *::after { box-sizing: border-box; }
.vf button { font: inherit; }
.vf[data-loading="1"] { opacity: .6; pointer-events: none; transition: opacity .15s; }

/* Cabecera */
.vf-head { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; border-bottom: 1px solid var(--vf-line); margin-bottom: 8px; }
.vf-title { font-weight: 700; font-size: 15px; }
.vf-result-count-inline { color: var(--vf-muted); font-size: 12px; flex: 1; }
.vf-clear { background: none; border: 0; color: var(--vf-accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.vf-clear:hover { text-decoration: underline; }

/* Chips de filtros activos */
.vf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }
.vf-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--vf-accent) 35%, #fff); background: color-mix(in srgb, var(--vf-accent) 10%, #fff); color: var(--vf-accent); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1; }
.vf-chip i { font-style: normal; font-size: 14px; opacity: .8; }
.vf-chip:hover { background: color-mix(in srgb, var(--vf-accent) 18%, #fff); }

/* Bloques */
.vf-block { padding: 12px 0; border-bottom: 1px solid var(--vf-line); }
.vf-block:last-child { border-bottom: 0; }
.vf-h { margin: 0 0 10px; padding: 8px 12px; background: var(--vf-bg); border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-align: center; color: var(--vf-text); }
.vf-h small { display: block; font-weight: 400; color: var(--vf-muted); font-size: 11px; margin-top: 2px; }

/* Interruptores (stock / oferta) */
.vf-block-switch { padding: 8px 0; border-bottom: 0; }
.vf-block-switch + .vf-block-switch { margin-top: -4px; }
.vf-block-switch + .vf-block:not(.vf-block-switch) { border-top: 1px solid var(--vf-line); margin-top: 6px; }
.vf-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 2px; }
.vf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vf-sw { width: 40px; height: 22px; border-radius: 999px; background: #d8d8d8; position: relative; flex-shrink: 0; transition: background .2s; }
.vf-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
.vf-switch input:checked + .vf-sw { background: var(--vf-accent); }
.vf-switch input:checked + .vf-sw::after { left: 21px; }
.vf-switch input:focus-visible + .vf-sw { outline: 2px solid var(--vf-accent); outline-offset: 2px; }
.vf-switch .vf-lbl { flex: 1; font-weight: 500; }
.vf-n { color: var(--vf-muted); font-size: 12px; }

/* Precio */
.vf-price { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.vf-in { flex: 1; display: flex; align-items: center; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 10px; background: #fff; transition: border-color .15s; }
.vf-in:focus-within { border-color: var(--vf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-accent) 15%, transparent); }
.vf-in .vf-cur { color: var(--vf-muted); font-size: 12px; margin-right: 6px; }
.vf-in input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 8px 0; font-size: 14px; background: transparent; color: var(--vf-text); -moz-appearance: textfield; }
.vf-in input::-webkit-outer-spin-button, .vf-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vf-in input:disabled { color: #bbb; }
.vf-sep { color: var(--vf-muted); }
.vf-range { position: relative; height: 44px; padding-top: 10px; }
.vf-range[data-disabled="1"] { opacity: .4; pointer-events: none; }
.vf-track { position: absolute; left: 8px; right: 8px; top: 16px; height: 4px; border-radius: 2px; background: #e3e3e3; }
.vf-fill { position: absolute; top: 0; bottom: 0; background: var(--vf-accent); border-radius: 2px; }
.vf-r { position: absolute; left: 0; right: 0; top: 6px; width: 100%; height: 24px; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.vf-r::-webkit-slider-runnable-track { background: transparent; height: 24px; }
.vf-r::-moz-range-track { background: transparent; height: 24px; }
.vf-r::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--vf-accent); box-shadow: 0 1px 4px rgba(0,0,0,.2); margin-top: 3px; cursor: grab; }
.vf-r::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--vf-accent); box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: grab; }
.vf-r:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--vf-accent); outline-offset: 2px; }
.vf-range-lbl { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; }
.vf-range-lbl span { background: var(--vf-text); color: #fff; padding: 2px 6px; border-radius: 4px; }

/* Cuotas */
.vf-qchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-qchip { border: 1px solid #d9d9d9; background: #fff; border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer; color: var(--vf-text); display: inline-flex; gap: 6px; align-items: center; transition: all .15s; }
.vf-qchip em { font-style: normal; color: var(--vf-muted); font-size: 11px; }
.vf-qchip:hover { border-color: var(--vf-accent); }
.vf-qchip.on { background: var(--vf-accent); border-color: var(--vf-accent); color: #fff; }
.vf-qchip.on em { color: rgba(255,255,255,.85); }
.vf-qchip:disabled { opacity: .4; cursor: not-allowed; }

/* Listas con casillas */
.vf-list { list-style: none; margin: 0; padding: 0; }
.vf-list li { margin: 0; padding: 0; }
.vf-list li.vf-hidden { display: none; }
.vf-check { display: flex; align-items: center; gap: 10px; padding: 6px 2px; cursor: pointer; border-radius: 6px; }
.vf-check:hover { background: var(--vf-bg); }
.vf-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.vf-box { width: 18px; height: 18px; border: 1.5px solid #c4c4c4; border-radius: 5px; background: #fff; flex-shrink: 0; position: relative; transition: all .15s; }
.vf-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s; }
.vf-check input:checked + .vf-box { background: var(--vf-accent); border-color: var(--vf-accent); }
.vf-check input:checked + .vf-box::after { transform: rotate(45deg) scale(1); }
.vf-check input:focus-visible + .vf-box { outline: 2px solid var(--vf-accent); outline-offset: 2px; }
.vf-check .vf-lbl { flex: 1; }
.vf-check.vf-dis { opacity: .45; cursor: not-allowed; }
.vf-check.vf-dis:hover { background: none; }
.vf-upper .vf-lbl { text-transform: uppercase; font-size: 13px; letter-spacing: .01em; }
.vf-tree .vf-lvl-1 > .vf-check .vf-lbl { font-weight: 600; }
.vf-tree .vf-lvl-2 > .vf-check { padding-left: 18px; }
.vf-tree .vf-lvl-3 > .vf-check { padding-left: 34px; font-size: 13px; }
.vf-tree .vf-lvl-2 > .vf-check .vf-box, .vf-tree .vf-lvl-3 > .vf-check .vf-box { width: 16px; height: 16px; }
.vf-tree .vf-lvl-3 > .vf-check .vf-box::after { left: 4px; top: 0; }
.vf-more { background: none; border: 0; color: var(--vf-accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 2px; }
.vf-more:hover { text-decoration: underline; }

/* Boton movil y panel */
.vf-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--vf-text); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1; }
.vf-btn .vf-badge { background: var(--vf-accent); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.vf-btn .vf-badge[hidden] { display: none; }
.vf-autobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--vf-line); box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.vf-autobar .vf-autocount { color: var(--vf-muted); font-size: 13px; }

.vf-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99998; opacity: 0; pointer-events: none; transition: opacity .2s; }
.vf-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 400px); background: #fff; z-index: 99999; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.15); }
body.vf-open .vf-backdrop { opacity: 1; pointer-events: auto; }
body.vf-open .vf-drawer { transform: translateX(0); }
body.vf-open { overflow: hidden; }
.vf-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--vf-line); font-weight: 700; font-size: 16px; }
.vf-drawer-close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--vf-text); padding: 0 4px; }
.vf-drawer-body { flex: 1; overflow-y: auto; padding: 8px 16px 16px; -webkit-overflow-scrolling: touch; }
.vf-drawer-body .vf-head { display: none; }
.vf-drawer-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--vf-line); background: #fff; }
.vf-drawer-foot .vf-apply { flex: 1; background: var(--vf-accent); color: #fff; border: 0; border-radius: 10px; padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
.vf-drawer-foot .vf-clear2 { background: var(--vf-bg); color: var(--vf-text); border: 0; border-radius: 10px; padding: 14px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }

/* En movil el sidebar en su sitio se oculta; vive en el panel */
body.vf-mobile .vf-inline-wrap { display: none !important; }
body.vf-mobile.vf-autobar-on .vf-autobar { display: flex; }

/* Grid en carga */
.vf-grid-loading { opacity: .45; transition: opacity .15s; pointer-events: none; }