:root{--fsc-bg-width:420px;--fsc-bg-accent:#2563eb;--fsc-bg-bg:#fff;--fsc-bg-text:#0f172a;--fsc-bg-border:#e5e7eb;--fsc-bg-panel:#fff;--fsc-bg-hover:#f1f5f9;--fsc-bg-radius:14px;--fsc-bg-z:999999;--fsc-bg-btn-w:96px;--fsc-bg-btn-h:40px;--fsc-bg-btn-fs:13px}

.fsc-bg{width:var(--fsc-bg-width);max-width:100%;position:relative;z-index:var(--fsc-bg-z);font-family:inherit;color:var(--fsc-bg-text)}
.fsc-bg *{box-sizing:border-box}
.fsc-bg__field{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--fsc-bg-border);background:var(--fsc-bg-bg);border-radius:var(--fsc-bg-radius);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.fsc-bg--shadow1 .fsc-bg__field{box-shadow:0 8px 22px rgba(2,6,23,.08)}
.fsc-bg--shadow2 .fsc-bg__field{box-shadow:0 12px 34px rgba(2,6,23,.14)}
.fsc-bg--blur .fsc-bg__field{backdrop-filter:saturate(180%) blur(10px);background:color-mix(in srgb,var(--fsc-bg-bg) 75%,transparent)}
.fsc-bg__icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--fsc-bg-text) 55%,transparent)}
.fsc-bg__input{flex:1;min-width:90px;border:0;outline:0;background:transparent;color:inherit;font-size:14px;line-height:1.2;padding:6px 0}
.fsc-bg--sm .fsc-bg__input{font-size:13px}
.fsc-bg--lg .fsc-bg__input{font-size:16px}

.fsc-bg__btn{width:var(--fsc-bg-btn-w);height:var(--fsc-bg-btn-h);border-radius:calc(var(--fsc-bg-radius) - 4px);font-size:var(--fsc-bg-btn-fs);line-height:1;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;user-select:none;transition:filter .15s ease,transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.fsc-bg__btn:active{transform:translateY(1px)}
.fsc-bg__btn--solid{background:var(--fsc-bg-accent);color:#fff}
.fsc-bg__btn--outline{background:transparent;border-color:color-mix(in srgb,var(--fsc-bg-accent) 55%,var(--fsc-bg-border));color:var(--fsc-bg-accent)}
.fsc-bg__btn--ghost{background:transparent;color:var(--fsc-bg-accent)}
.fsc-bg__btn:hover{filter:brightness(.98)}

.fsc-bg__clear{width:28px;height:28px;border-radius:999px;border:0;background:transparent !important;box-shadow:none !important;padding:0;cursor:pointer;display:none;align-items:center;justify-content:center;color:color-mix(in srgb,var(--fsc-bg-text) 55%,transparent);transition:background .15s ease,color .15s ease,transform .15s ease}
.fsc-bg__clear svg{width:18px;height:18px;display:block}
.fsc-bg__clear:active{transform:translateY(1px)}
.fsc-bg--clear-hover .fsc-bg__clear:hover{background:color-mix(in srgb,var(--fsc-bg-text) 8%,transparent) !important;color:var(--fsc-bg-text)}

.fsc-bg__panel{position:absolute;left:0;right:0;top:calc(100% + 8px);border:1px solid var(--fsc-bg-border);background:var(--fsc-bg-panel);border-radius:calc(var(--fsc-bg-radius) - 2px);overflow:hidden;box-shadow:0 18px 46px rgba(2,6,23,.14)}
.fsc-bg__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--fsc-bg-border);font-size:12px;color:color-mix(in srgb,var(--fsc-bg-text) 55%,transparent)}
.fsc-bg__list{max-height:320px;overflow:auto}
.fsc-bg__item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;cursor:pointer;transition:background .12s ease}
.fsc-bg__item:hover,.fsc-bg__item[aria-selected="true"]{background:var(--fsc-bg-hover)}
.fsc-bg__item-title{font-size:13px;font-weight:600;color:var(--fsc-bg-text);line-height:1.25}
.fsc-bg__item-meta{font-size:12px;color:color-mix(in srgb,var(--fsc-bg-text) 55%,transparent);margin-top:3px}
.fsc-bg__empty{padding:14px 12px;font-size:13px;color:color-mix(in srgb,var(--fsc-bg-text) 60%,transparent)}

/* Alineación */
.fsc-bg--align-center{margin-left:auto;margin-right:auto}
.fsc-bg--align-right{margin-left:auto}

/* Tamaños */
.fsc-bg--sm .fsc-bg__field{padding:8px 10px;border-radius:calc(var(--fsc-bg-radius) - 2px)}
.fsc-bg--lg .fsc-bg__field{padding:12px 14px}

/* Dark preset: usa variables, pero si el usuario eligió preset dark sin tocar colores */
.fsc-bg--dark{--fsc-bg-bg:#0b1220;--fsc-bg-panel:#0b1220;--fsc-bg-text:#e5e7eb;--fsc-bg-border:#1f2937;--fsc-bg-hover:#0f172a}

@media (max-width:480px){
  .fsc-bg{width:100%}
  .fsc-bg__btn{width:auto;min-width:84px}
}