/* ============================================================
   AVENZA DIGITAL RD — Configurador por equipo (styles v3)
   ============================================================ */

/* ---------- Selector de familias ---------- */
.syspick{padding:2.8rem 0 1.4rem}
.fam-tabs{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.1rem}
.fam-tab{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:.44rem 1.05rem;font-size:.85rem;font-weight:600;cursor:pointer}
.fam-tab.active{background:rgba(15,110,98,.1);border-color:var(--accent);color:var(--accent)}
.fam-tab:hover{color:var(--txt)}

.sys-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.8rem}
.sys-card{display:flex;flex-direction:column;gap:.3rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.95rem 1.05rem;color:var(--txt);text-align:left;cursor:pointer;font-family:inherit;transition:transform .15s,border-color .15s}
.sys-card:hover{transform:translateY(-2px);border-color:#cfc6b8}
.sys-card b{font-size:1rem}
.sys-card span{color:var(--muted);font-size:.8rem;line-height:1.4}
.sys-card em{font-style:normal;color:var(--accent);font-weight:700;font-size:.88rem;margin-top:.2rem}
.sys-card.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:#f4faf8}

/* ---------- Hero del equipo ---------- */
.sys-hero{background:#f7f4ef;border-block:1px solid var(--line)}
.sys-hero-in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.8rem 0;flex-wrap:wrap}
.sys-hero h1{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.15rem}
.sys-tagline{color:var(--muted)}
.sys-hero-price{text-align:right}
.sh-label{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sys-hero-price b{font-size:2rem;color:var(--accent);font-variant-numeric:tabular-nums}
.sh-stock{display:block;font-size:.78rem;color:#1d7a4a}

/* ---------- Grupos de configuración ---------- */
.cfg-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem 1.2rem;margin-bottom:1rem;border:1px solid var(--line)}
.cfg-group legend{padding:0 .4rem;margin-bottom:.6rem;font-size:.98rem}
.cfg-group legend b{font-size:1.02rem}
.cfg-group legend .req{color:var(--accent2);font-style:normal;font-weight:800}
.cfg-group legend small{color:var(--muted);font-weight:400;margin-left:.5rem;font-size:.78rem}
.grp-head{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:.9rem 0 .2rem;font-weight:700}

.opt{display:flex;align-items:flex-start;gap:.7rem;padding:.55rem .6rem;border-radius:9px;cursor:pointer;border:1px solid transparent}
.opt:hover{background:rgba(15,110,98,.04)}
.opt.selected{border-color:rgba(15,110,98,.45);background:rgba(15,110,98,.06)}
.opt input{width:16px;height:16px;margin-top:.28rem;accent-color:#0f6e62;flex-shrink:0}
.opt-main{flex:1;min-width:0}
.opt-main b{display:block;font-weight:500;font-size:.92rem;line-height:1.35}
.opt-rec{display:inline-block;font-style:normal;font-size:.68rem;color:var(--accent2);border:1px solid rgba(138,98,50,.35);border-radius:99px;padding:.05rem .5rem;margin-top:.25rem}
.opt-price{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700;font-size:.88rem;margin-top:.1rem}

.qty-ctl{display:inline-flex;align-items:center;gap:.45rem;margin:.45rem 0 .1rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.2rem .35rem}
.qty-btn{width:22px;height:22px;border-radius:6px;border:0;background:var(--panel2);color:var(--txt);cursor:pointer;font-size:.95rem;line-height:1}
.qty-btn:hover{background:rgba(15,110,98,.12);color:var(--accent)}
.qty-val{min-width:26px;text-align:center;font-size:.9rem}

/* ---------- Panel resumen ---------- */
.builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.5rem;align-items:start}
.summary{position:sticky;top:86px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem;box-shadow:var(--shadow)}
.summary h3{font-size:1rem;margin-bottom:.7rem}
.sum-watts{font-size:.82rem;color:var(--muted);background:#f7f4ef;border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;margin-bottom:.7rem}
.sum-watts b{color:var(--accent2)}
.sum-lines{display:flex;flex-direction:column;gap:.35rem;max-height:380px;overflow-y:auto;padding-right:.3rem;font-size:.83rem}
.sum-row{display:flex;justify-content:space-between;gap:.55rem;border-bottom:1px dotted var(--line);padding-bottom:.3rem}
.sum-row span:first-child{color:var(--muted)}
.sum-row .s-price{font-variant-numeric:tabular-nums;white-space:nowrap}
.sum-total{margin-top:.9rem;border-top:2px solid var(--line);padding-top:.75rem;display:flex;justify-content:space-between;align-items:baseline}
.sum-total b{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sum-total .t-val{font-size:1.6rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.sum-note{font-size:.7rem;color:var(--muted);margin-top:.5rem}
.cfg-note{font-size:.8rem;color:var(--accent2);margin-top:.6rem;display:none}
.cfg-note.show{display:block}
.sum-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.sum-actions .btn{width:100%}
.copy-ok{font-size:.76rem;color:var(--accent);text-align:center;display:none}
.copy-ok.show{display:block}

/* ---------- Anterior builder legado (compat) ---------- */
.config-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;margin-bottom:1.2rem;min-width:0}
.cg-title{font-size:1.02rem;margin-bottom:1rem;display:flex;align-items:center;gap:.55rem}
.cg-num{width:26px;height:26px;border-radius:50%;background:rgba(15,110,98,.1);color:var(--accent);display:inline-grid;place-items:center;font-size:.8rem;font-weight:800}
.opt-row{display:grid;grid-template-columns:110px 1fr 92px;gap:.7rem;align-items:center;padding:.55rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.opt-row:last-child{border-bottom:0}
.opt-name b{display:block;font-weight:600}
.opt-name span{color:var(--muted);font-size:.78rem}
.opt-price{text-align:right;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}
.qty-input{width:70px;background:var(--bg2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:.4rem .5rem;font-size:.9rem;text-align:center}
.extra-list{display:flex;flex-direction:column;gap:.55rem}
.extra-list label{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--txt);font-weight:500;cursor:pointer}
.extra-list input[type=checkbox]{width:16px;height:16px;accent-color:#0f6e62}
.extra-list .x-price{margin-left:auto;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.compare{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
table.compare th,table.compare td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
table.compare thead th{background:var(--panel2)}
table.compare tbody tr:last-child td{border-bottom:0}
table.compare td{color:var(--muted)}
table.compare td:first-child{color:var(--txt);font-weight:600}

@media(max-width:940px){
  .builder-layout{grid-template-columns:1fr}
  .summary{position:static;order:-1}
}
@media(max-width:560px){
  .sys-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .sys-hero-in{flex-direction:column;align-items:flex-start}
  .sys-hero-price{text-align:left}
}
