/* ===== Prebuilts (estilos encapsulados) ===== */
#prebuilts-page .banner{
  background:linear-gradient(90deg,#0F3D8A,#143D6B);
  border:1px solid #0B2D68;
  padding:1rem; border-radius:16px; font-weight:600; margin:1rem 0 1.2rem;
}
#prebuilts-page .layout{display:grid; grid-template-columns:280px 1fr; gap:1.2rem}

/* Sidebar + filtros */
#prebuilts-page .sidebar{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1rem;
}
#prebuilts-page .filter-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:16px; margin-bottom:12px;
}
#prebuilts-page .filter-title{margin:0 0 12px; font-size:.95rem; letter-spacing:.3px; opacity:.95}
#prebuilts-page .stack{display:flex; flex-direction:column; gap:.35rem}

/* Precio estilizado */
#prebuilts-page .price-row{display:flex; align-items:center; gap:10px}
#prebuilts-page .field{
  position:relative; flex:1; display:flex; align-items:center;
  background:#0B1220; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:0 10px; transition:border-color .2s, box-shadow .2s;
}
#prebuilts-page .field:focus-within{
  border-color:#2B7BFF; box-shadow:0 0 0 3px rgba(43,123,255,.2);
}
#prebuilts-page .field .prefix{color:#A7B3CF; margin-right:6px; font-variant-numeric:tabular-nums}
#prebuilts-page .field input[type="number"]{
  width:100%; font:inherit; background:transparent; border:0; color:#E9F0FF;
  padding:10px 4px; outline:none; min-width:0;
}
/* WebKit spinners */
#prebuilts-page .field input[type="number"]::-webkit-outer-spin-button,
#prebuilts-page .field input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
/* Firefox spinner */
#prebuilts-page .field input[type="number"]{-moz-appearance:textfield}
#prebuilts-page .range-sep{color:#9FB2D8; user-select:none}
#prebuilts-page .filter-actions{margin-top:10px; display:flex; gap:8px}
#prebuilts-page .btn-filter{
  background:#1B3A87; color:#E9F0FF; border:1px solid #274AA6;
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
#prebuilts-page .btn-filter:hover{filter:brightness(1.05)}
#prebuilts-page .btn-filter.full{width:100%}
#prebuilts-page .btn-ghost{
  background:transparent; color:#C5D2F5; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
#prebuilts-page .btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Lista / cards */
#prebuilts-page .content{min-height:420px}
#prebuilts-page .prebuilt-list{list-style:none; padding:0; margin:0; display:grid; gap:1rem}
#prebuilts-page .prebuilt-card{
  display:grid; grid-template-columns:180px 1fr; gap:16px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px;
}
#prebuilts-page .prebuilt-card .thumb{
  width:100%; height:120px; object-fit:cover; border-radius:10px; background:#0B1220;
}
#prebuilts-page .prebuilt-card .name{margin:0 0 4px}
#prebuilts-page .prebuilt-card .brief{margin:0 0 10px; opacity:.9}
#prebuilts-page .toggle-details{
  background:#0B5CFF; color:#fff; border:0; border-radius:10px; padding:8px 12px; cursor:pointer;
}
#prebuilts-page .toggle-details[aria-expanded="true"]{background:#0A48CC}

/* Detalles (acordeón) */
#prebuilts-page .details{
  grid-column:1 / -1; overflow:clip; border-top:1px solid rgba(255,255,255,.08);
  margin-top:10px; padding-top:12px;
}
#prebuilts-page .details-grid{display:grid; gap:12px; grid-template-columns:1fr 1fr}
#prebuilts-page .full-specs li{margin:4px 0}
#prebuilts-page .expectations h4{margin:0 0 6px}

/* CTA inferior */
#prebuilts-page .cta-box{
  margin-top:1.2rem; background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.12); padding:1rem; border-radius:16px;
}

/* Responsive */
@media (max-width:1000px){
  #prebuilts-page .layout{grid-template-columns:1fr}
  #prebuilts-page .prebuilt-card{grid-template-columns:1fr}
  #prebuilts-page .details-grid{grid-template-columns:1fr}
}