/* VORVEX PC Builder -- real assembly UX (PRIORIDAD-CONFIGURADORES-01).
   Same VORVEX dark-navy/electric-blue tokens as vorvex-home-tokens.css;
   loaded after it, only adds new .pcb-* classes -- never overrides the
   existing .card/.badge/.warn/.btn/.stat rules already in pc_builder.php's
   inline <style>, which the results section below this UI still uses. */

/* ---- entry choice (ARMAR MI PC / AYUDAME A ELEGIR) ---- */
.pcb-entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.pcb-entry-card{display:flex;flex-direction:column;gap:10px;background:#10131d;border:1px solid #1e2433;border-radius:16px;padding:26px 22px;text-decoration:none;color:#fff;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.pcb-entry-card:hover,.pcb-entry-card:focus-visible{border-color:#5b8dff;transform:translateY(-2px);box-shadow:0 14px 34px #00000055}
.pcb-entry-card:focus-visible{outline:2px solid #5b8dff;outline-offset:3px}
.pcb-entry-icon{color:#5b8dff}
.pcb-entry-card h3{margin:0;font-size:18px;letter-spacing:.5px}
.pcb-entry-card p{margin:0;font-size:13px;color:#93a0b8;line-height:1.6;flex:1}
.pcb-entry-cta{font-size:12px;font-weight:800;color:#5b8dff}
.pcb-entry-footnote{margin-top:16px;font-size:12px;color:#93a0b8}

/* ---- progress ---- */
.pcb-progress{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.pcb-progress-track{flex:1;height:8px;border-radius:999px;background:#1a2030;overflow:hidden}
.pcb-progress-fill{height:100%;background:linear-gradient(90deg,#5b8dff,#7c5cff);border-radius:999px;transition:width .3s ease}
.pcb-progress-label{font-size:11px;font-weight:800;letter-spacing:1px;color:#93a0b8;white-space:nowrap}

/* ---- layout: main column + sticky summary ---- */
.pcb-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.pcb-main{min-width:0}

/* ---- step card ---- */
.pcb-step{background:#10131d;border:1px solid #1e2433;border-radius:14px;padding:16px 18px;margin-bottom:14px}
.pcb-step[data-status="selected"]{border-color:#1f3a2a}
.pcb-step-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.pcb-step-head .ct-icon{font-weight:700;font-size:14px}
.pcb-step-flag{font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 9px;border-radius:999px;background:#241c12;color:#facc15}
.pcb-step-flag.is-done{background:#123420;color:#7be3a0}

/* ---- picked (selected) card ---- */
.pcb-picked-card{display:flex;align-items:center;gap:12px;background:#0b0f18;border:1px solid #1e2433;border-radius:10px;padding:12px}
.pcb-picked-thumb{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#151a26;border-radius:8px;color:#5b8dff}
/* El thumb es decorativo -- el nombre real ya esta visible justo al lado
   (.pcb-picked-info strong / .pcb-product-body strong), asi que solo se
   oculta la repeticion textual que ct_icon() agrega cuando se le pasa
   label vacio (nunca el SVG, que sigue aria-hidden por su cuenta) --
   nunca un icono como unico portador de significado, el texto real sigue
   ahi, solo no duplicado dentro de la miniatura. */
.pcb-picked-thumb .ct-icon span,
.pcb-product-thumb .ct-icon span,
.pcb-summary-row .ct-icon span{display:none}
.pcb-picked-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pcb-picked-info strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcb-picked-meta{font-size:12px;color:#93a0b8}
.pcb-picked-actions{display:flex;gap:8px;flex-shrink:0}

/* ---- picker (search + product grid) ---- */
.pcb-picker{margin-top:12px}
.pcb-search{display:flex;gap:8px;margin-bottom:10px}
.pcb-search input[type="text"]{flex:1;min-width:0;background:#070b11;border:1px solid #263548;color:#fff;padding:10px 12px;border-radius:8px;font-size:13px}
.pcb-result-count{font-size:11px;color:#93a0b8;margin:0 0 8px}
.pcb-empty{font-size:12px;color:#93a0b8}

.pcb-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pcb-product-card{display:flex;flex-direction:column;gap:6px;background:#0b0f18;border:1px solid #1e2433;border-radius:10px;padding:12px;min-height:44px}
.pcb-product-thumb{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#151a26;border-radius:8px;color:#5b8dff}
.pcb-product-body{display:flex;flex-direction:column;gap:2px}
.pcb-product-body strong{font-size:12px}
.pcb-product-name{font-size:11.5px;color:#c7cfdd;line-height:1.4}
.pcb-product-sku{font-size:10.5px;color:#93a0b8}
.pcb-product-price{font-size:13px;font-weight:700;margin-top:2px}
.pcb-product-card form{margin-top:4px}
.pcb-product-card .btn{width:100%;text-align:center;padding:8px;font-size:12px;min-height:44px;box-sizing:border-box}

/* ---- sticky summary ---- */
.pcb-summary{position:sticky;top:16px;background:#10131d;border:1px solid #1e2433;border-radius:14px;padding:16px 18px;align-self:start}
.pcb-summary summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pcb-summary summary::-webkit-details-marker{display:none}
.pcb-summary summary::after{content:"−";font-size:16px;color:#93a0b8}
.pcb-summary:not([open]) summary::after{content:"+"}
.pcb-summary-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #1a2030;font-size:12px}
.pcb-summary-row .ct-icon{color:#5b8dff;flex-shrink:0}
.pcb-summary-cat{color:#93a0b8;flex-shrink:0;width:64px;font-size:11px}
.pcb-summary-item{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcb-summary-pending{color:#5c6980;font-style:italic}
.pcb-summary-price{flex-shrink:0;font-weight:700}
.pcb-summary-subtotal{display:flex;justify-content:space-between;align-items:center;padding-top:12px;margin-top:6px;font-size:15px}
.pcb-summary-subtotal strong{font-size:18px}
.pcb-summary-note{font-size:10.5px;color:#5c6980;margin:4px 0 0}

/* ---- responsive: 1024/768/390 tested, sidebar collapses under main,
   collapsible via native <details> so mobile never needs extra JS ---- */
@media (max-width:1024px){
  .pcb-layout{grid-template-columns:1fr}
  .pcb-summary{position:static;order:-1}
}
@media (max-width:720px){
  .pcb-entry-grid{grid-template-columns:1fr}
  .pcb-product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .pcb-picked-card{flex-wrap:wrap}
  .pcb-picked-actions{width:100%;justify-content:flex-end}
}
@media (max-width:400px){
  .pcb-product-grid{grid-template-columns:1fr 1fr}
  .pcb-search{flex-direction:column}
}