/* =====================================================================
   sidebar_moderna.css — skin moderno para la sidebar de categorías
   y la barra de "Filtros Aplicados" (web/categoria.php).
   Solo CSS: no cambia el PHP, los filtros ni los desplegables.
   ===================================================================== */

/* ---------- contenedor ---------- */
#sb_con_columna{background:transparent !important;}
#sidebar{
  background:#1c1f26 !important;
  border-radius:16px;overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
  font-family:'Inter',system-ui,sans-serif;
}

/* ---------- headers de sección (Ordenar Por / Categorias / Marcas) ---------- */
#sidebar .bg-bordo{
  background:#262b34 !important;
  border:none !important;
  border-left:4px solid #ff8000 !important;
}
#sidebar .panel-heading{padding:0 !important;}
#sidebar .panel-title a{
  display:block;padding:15px 18px;
  font-family:'Poppins',system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;font-size:1.55rem;  /* MÁS GRANDE que los ítems */
  color:#fff !important;text-decoration:none;line-height:1.2;
}

/* ---------- select "Ordenar por" ---------- */
#sidebar select.form-control{
  background:#262b34 !important;border:1px solid #3a404c !important;
  border-radius:10px !important;color:#fff !important;
  padding:11px 14px !important;height:auto !important;font-size:1rem;
  box-shadow:none !important;
}

/* ---------- filas de categoría: tamaño UNIFORME y más grande ---------- */
#sidebar .item-nv-lateral{
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  transition:background .15s ease;
}
/* TAMAÑO ÚNICO para TODOS los ítems del sidebar, en cualquier vista o nivel
   (categorías, subcategorías, sub-subcategorías y marcas). Cubre los distintos
   "caminos" de render del PHP que antes quedaban con tamaños diferentes. */
#sidebar .item-nv-lateral,
#sidebar .item-nv-lateral a,
#sidebar .item-nv-lateral .col,
#sidebar .item-nv-lateral .col-md-12,
#sidebar .item-nv-lateral div,
#sidebar .item-nv-lateral span,
#sidebar .rowCheckMarca,
#sidebar .rowCheckMarca .col,
#sidebar .rowCheckMarca div{
  font-size:1.4rem !important;
}
/* neutraliza el font-120 (120%) de algunas filas */
#sidebar .item-nv-lateral.font-120,
#sidebar .item-nv-lateral .font-120{font-size:1.4rem !important;}
#sidebar .item-nv-lateral:hover{background:rgba(255,128,0,.12) !important;}
/* color de texto consistente (arregla el azul de algunas filas) */
#sidebar .item-nv-lateral,
#sidebar .item-nv-lateral a,
#sidebar .item-nv-lateral .col,
#sidebar .item-nv-lateral span{color:#e7e9ee !important;}
#sidebar .item-nv-lateral:hover a,
#sidebar .item-nv-lateral:hover .col,
#sidebar .item-nv-lateral a:hover{color:#fff !important;}

/* icono de categoría dentro de un cuadradito suave */
#sidebar .item-nv-lateral img{
  background:rgba(255,255,255,.05);border-radius:10px;padding:4px;
}

/* ---------- chevrons (botones de colapsar): más visibles ---------- */
#sidebar .fas.fa-angle-double-down,
#sidebar .fas.fa-angle-down{
  color:#c7cdd8 !important;font-size:1.1rem !important;transition:color .15s ease;
}
#sidebar [data-toggle="collapse"]{
  display:flex !important;align-items:center;justify-content:center;cursor:pointer;
}
#sidebar [data-toggle="collapse"]:hover{background:rgba(255,128,0,.18) !important;}
#sidebar [data-toggle="collapse"]:hover .fas,
#sidebar .item-nv-lateral:hover .fas{color:#ff8000 !important;}

/* ---------- sub-niveles (desplegables): jerarquía por tono ---------- */
#sidebar .bg-gris{background:#20242c !important;}
#sidebar .bg-gris-claro{background:#262b34 !important;}
#sidebar .bg-gris-super-claro{background:#2f3540 !important;}

/* ---------- filtro de marcas (MISMO tamaño que las categorías) ---------- */
#sidebar .rowCheckMarca{
  border-color:rgba(255,255,255,.06) !important;transition:background .15s;
  font-size:1.4rem !important;
}
#sidebar .rowCheckMarca .col{font-size:1.4rem !important;color:#e7e9ee !important;}
#sidebar .rowCheckMarca:hover{background:rgba(255,128,0,.08) !important;}
#sidebar .inputCheckMarca{accent-color:#ff8000;width:22px;height:22px;}

/* ---------- botón Filtrar: texto OSCURO sobre naranja (mejor contraste) ---------- */
#sidebar .btn-success{
  background:#ff8000 !important;border:none !important;border-radius:12px !important;
  font-family:'Poppins',system-ui,sans-serif !important;font-weight:700 !important;
  color:#1c1f26 !important;font-size:1.2rem !important;padding:14px 16px !important;
  line-height:1.2 !important;box-shadow:0 6px 16px rgba(255,128,0,.30);transition:background .15s;
}
#sidebar .btn-success:hover{background:#e96f00 !important;}

/* =====================================================================
   SCROLLBAR OSCURO (página de categorías)
   ===================================================================== */
html, body, #sidebar, #msb{scrollbar-color:#3a404c #1c1f26;scrollbar-width:thin;}
body::-webkit-scrollbar,
#sidebar::-webkit-scrollbar,
#msb::-webkit-scrollbar{width:12px;height:12px;}
body::-webkit-scrollbar-track,
#sidebar::-webkit-scrollbar-track,
#msb::-webkit-scrollbar-track{background:#1c1f26;}
body::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-thumb,
#msb::-webkit-scrollbar-thumb{background:#3a404c;border-radius:6px;}
body::-webkit-scrollbar-thumb:hover,
#sidebar::-webkit-scrollbar-thumb:hover{background:#4a515f;}

/* =====================================================================
   FILTROS APLICADOS (barra de arriba de los productos) — moderno
   ===================================================================== */
#filtros-aplicados .caja-blanca-radius{
  border:1px solid #e9ecf1 !important;border-radius:14px !important;
  box-shadow:0 3px 12px rgba(20,25,40,.06);background:#fff !important;
  padding:10px 14px !important;margin-top:2px;
}
/* TODO en UN solo renglón: "FILTROS APLICADOS" + los chips al costado */
#filtros-aplicados .col.p-0{
  display:flex !important;flex-wrap:wrap;align-items:center;gap:8px;
}
/* la barra roja -> rótulo inline, gris, sin ocupar todo el ancho */
#filtros-aplicados [style*="ba1414"]{
  background:transparent !important;width:auto !important;flex:0 0 auto !important;
  justify-content:flex-start !important;padding:0 6px 0 0 !important;margin:0 !important;
}
#filtros-aplicados .texto-blanco{
  color:#6b7280 !important;font-family:'Poppins',system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;font-size:.92rem;white-space:nowrap;
}
/* chips modernos */
#filtros-aplicados .filtros-boton{
  background:#fff3e6 !important;border:1px solid #ffd9b0 !important;border-radius:30px !important;
  padding:7px 16px !important;margin:4px !important;color:#e96f00 !important;font-weight:600;
  display:inline-flex !important;align-items:center;gap:6px;font-size:.98rem;
}
#filtros-aplicados .filtros-boton a,
#filtros-aplicados .filtros-boton span{
  color:#e96f00 !important;font-weight:800;text-decoration:none;cursor:pointer;
}
#filtros-aplicados .filtros-boton:hover{background:#ffe7cc !important;}