/* Barra lateral de categorías y filtros del listado de productos (html/lateral_productos.php). */
.lsx-panel { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 4px 20px; }
.lsx-bloque { padding: 18px 0; border-bottom: 1px solid #f1f1f1; }
.lsx-panel > :last-child, .lsx-form > .lsx-bloque:last-child { border-bottom: 0; }
.lsx-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #222; }
.lsx-titulo i { font-size: 13px; color: var(--theme-color); }
.lsx-lista, .lsx-sub { list-style: none; margin: 0; padding: 0; }
.lsx-lista li { display: block; width: 100%; }
.lsx-lista a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: #4a5568; text-decoration: none; transition: background-color .2s, color .2s; }
.lsx-lista a:hover { background: color-mix(in srgb, var(--theme-color) 8%, #fff); color: var(--theme-color); }
.lsx-lista a.activo { background: var(--theme-color); color: #fff; font-weight: 600; }
.lsx-lista a.activo .lsx-n { background: rgba(255, 255, 255, .25); color: #fff; }
.lsx-cat-head { display: flex; align-items: stretch; border-radius: 8px; }
.lsx-cat-head > a { flex: 1; min-width: 0; }
.lsx-cat-head.activo { background: var(--theme-color); }
.lsx-cat-head.activo > a,
.lsx-cat-head.activo > a:hover { background: transparent; color: #fff; font-weight: 600; }
.lsx-cat-head.activo .lsx-n { background: rgba(255, 255, 255, .25); color: #fff; }
.lsx-cat-toggle { flex-shrink: 0; width: 34px; margin: 4px 4px 4px 0; border: 0; border-radius: 6px; background: transparent; color: #6b7280; cursor: pointer; }
.lsx-cat-head.activo .lsx-cat-toggle { color: #fff; }
.lsx-cat-toggle i { display: block; font-size: 11px; transition: transform .2s ease; }
.lsx-cat.abierta .lsx-cat-toggle i { transform: rotate(180deg); }
.lsx-sub-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.lsx-cat:not(.abierta) > .lsx-sub-panel { visibility: hidden; }
.lsx-cat.abierta > .lsx-sub-panel { grid-template-rows: 1fr; }
.lsx-sub { overflow: hidden; min-height: 0; margin: 0 0 0 14px; padding-left: 8px; border-left: 2px solid transparent; }
.lsx-cat.abierta > .lsx-sub-panel > .lsx-sub { margin-top: 4px; margin-bottom: 6px; border-left-color: #eee; }
.lsx-sub a.activo { background: transparent; color: var(--theme-color); font-weight: 700; }
.lsx-sub a.activo .lsx-n { background: color-mix(in srgb, var(--theme-color) 12%, #fff); color: var(--theme-color); }
.lsx-n { flex-shrink: 0; min-width: 28px; padding: 1px 8px; border-radius: 20px; background: #f3f4f6; color: #6b7280; font-size: 12px; font-weight: 500; text-align: center; }
.lsx-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 2px; font-size: 14px; color: #4a5568; cursor: pointer; }
.lsx-check input { flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--theme-color); cursor: pointer; }
.lsx-check .lsx-n { margin-left: auto; }
.lsx-oferta i { margin-right: 4px; color: var(--theme-color); }
.lsx-marcas { max-height: 260px; overflow-y: auto; }
.lsx-precio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lsx-precio label { margin: 0; }
.lsx-precio small { display: block; margin-bottom: 4px; font-size: 12px; color: #6b7280; }
.lsx-precio .form-control { padding: 8px 10px; font-size: 14px; border-radius: 8px; }
.lsx-ayuda { display: block; margin-top: 8px; font-size: 12px; color: #9ca3af; }
.lsx-btn { width: 100%; margin-top: 12px; padding: 9px; border: 0; border-radius: 8px; background: var(--theme-color); color: #fff; font-size: 14px; font-weight: 600; }
.lsx-btn:hover { filter: brightness(.95); }
.lsx-activos-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lsx-limpiar { font-size: 13px; color: var(--theme-color); text-decoration: underline; }
.lsx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lsx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: color-mix(in srgb, var(--theme-color) 10%, #fff); color: var(--theme-color); font-size: 13px; text-decoration: none; }
.lsx-chip i { font-size: 11px; }
.lsx-chip:hover { background: var(--theme-color); color: #fff; }
.lsx-abrir { display: none; }
.lsx-vacio { padding: 60px 20px; text-align: center; color: #6b7280; }
.lsx-vacio i { display: block; margin-bottom: 14px; font-size: 42px; color: #d1d5db; }
.lsx-vacio h4 { margin-bottom: 6px; font-weight: 700; color: #222; }
.lsx-vacio .btn { margin-top: 10px; }

@media (max-width: 991.98px) {
    .lsx-abrir { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-weight: 600; color: #222; }
    .lsx-abrir .lsx-n { background: var(--theme-color); color: #fff; }
    .lsx-panel { display: none; margin-top: 12px; }
    .lsx.abierto .lsx-panel { display: block; }
}