/* IB_PDB Configurador — estilos del configurador público
 * Todas las reglas están scopeadas dentro de #ib-cfg-app para no romper el tema host.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

#ib-cfg-app {
    --ib-blue:#056BF1;
    --ib-cyan:#2ad2c9;
    --ib-navy:#041C2C;
    --ib-grey-light:#d9d9d9;
    --ib-grey-mid:#b1b3b4;
    --ib-bg:#ffffff;
    --ib-bg-card:#f8f8f8;
    --ib-bg-card2:#f0f0f0;
    --ib-bg-input:#ffffff;
    --ib-border:#d9d9d9;
    --ib-border-l:#c0c0c0;
    --ib-text:#1a1a1a;
    --ib-text2:#444;
    --ib-muted:#888;
    --ib-sel-bg:#056BF1;
    --ib-grad:linear-gradient(135deg,#056BF1 0%,#2ad2c9 100%);
    --ib-grad-h:linear-gradient(90deg,#056BF1 0%,#2ad2c9 100%);
    --ib-header-height:60px;
    --ib-radius-outer:22px;
    --ib-radius-inner:10px;

    background:var(--ib-bg);
    color:var(--ib-text);
    font-family:'Inter','Arial',sans-serif;
    font-size:14px;
    line-height:1.5;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}
#ib-cfg-app *,
#ib-cfg-app *::before,
#ib-cfg-app *::after { box-sizing:border-box; }

/* TITLE BAR */
#ib-cfg-app .ib-cfg-title-bar {
    background:transparent;
    padding:24px 0 18px;
    margin:0;
}
#ib-cfg-app .ib-cfg-title {
    font-family:'Inter',sans-serif;
    font-size:34px;
    font-weight:700;
    color:var(--ib-blue);
    letter-spacing:.2px;
    margin:0;
    padding:0;
    line-height:1.15;
    text-align:left;
}

/* LAYOUT */
#ib-cfg-app .ib-cfg-container {
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 0 24px 0;
    display:grid;
    grid-template-columns:1fr 360px;
    gap:24px;
    align-items:start;
}

/* SECTION LABEL */
#ib-cfg-app .ib-cfg-section-label {
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--ib-blue);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:10px;
}
#ib-cfg-app .ib-cfg-section-label::after { content:''; flex:1; height:1px; background:var(--ib-border); }

/* STEP BLOCKS */
#ib-cfg-app .ib-cfg-step-block {
    background:var(--ib-bg-card);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-outer);
    padding:22px 24px;
    margin-bottom:16px;
    transition:border-color .2s;
}
#ib-cfg-app .ib-cfg-step-block.has-selection { border-color:var(--ib-border-l); }
#ib-cfg-app .ib-cfg-step-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
#ib-cfg-app .ib-cfg-step-num {
    width:30px; height:30px;
    background:var(--ib-grad);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-weight:800;
    font-size:14px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    flex-shrink:0;
}
#ib-cfg-app .ib-cfg-step-num.opt {
    background:var(--ib-bg-card2);
    border:1px solid var(--ib-border-l);
    color:var(--ib-muted);
}
#ib-cfg-app .ib-cfg-step-title { font-weight:700; font-size:14px; color:var(--ib-text); letter-spacing:.2px; }
#ib-cfg-app .ib-cfg-step-subtitle { font-size:11px; color:var(--ib-muted); margin-top:1px; font-weight:300; }

/* GROUP LABELS inside steps */
#ib-cfg-app .ib-cfg-grp-wrap { margin-bottom:10px; }
#ib-cfg-app .ib-cfg-grp-label {
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--ib-blue);
    padding:0 2px 5px 2px;
    border-bottom:1px solid var(--ib-border);
    margin-bottom:8px;
    display:block;
}

/* OPTION BUTTONS */
#ib-cfg-app .ib-cfg-opts-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
    gap:7px;
}
#ib-cfg-app .ib-cfg-opts-grid.wide { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

#ib-cfg-app .ib-cfg-option-btn {
    background:var(--ib-bg-input);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-inner);
    padding:10px 12px;
    cursor:pointer;
    text-align:left;
    transition:all .12s ease;
    color:var(--ib-text);
    font-family:'Inter',sans-serif;
    position:relative;
    display:block;
    width:100%;
    white-space:normal;
    overflow-wrap:break-word;
    word-wrap:break-word;
    line-height:1.4;
    min-height:0;
    height:auto;
}
#ib-cfg-app .ib-cfg-option-btn:hover { border-color:var(--ib-blue); background:rgba(5,107,241,.07); }
#ib-cfg-app .ib-cfg-option-btn.selected {
    border-color:var(--ib-blue);
    background:var(--ib-sel-bg);
    color:#fff;
}
#ib-cfg-app .ib-cfg-option-btn.selected .ib-cfg-opt-code { color:rgba(255,255,255,.85); }
#ib-cfg-app .ib-cfg-option-btn.selected .ib-cfg-opt-name { color:#fff; }
#ib-cfg-app .ib-cfg-option-btn.selected .ib-cfg-opt-desc { color:rgba(255,255,255,.7); }
/* .incompat eliminado — les targetes incompatibles s'oculten amb display:none */

#ib-cfg-app .ib-cfg-opt-code {
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    font-weight:600;
    color:var(--ib-blue);
    display:block;
    margin-bottom:3px;
    white-space:normal;
    overflow-wrap:break-word;
}
#ib-cfg-app .ib-cfg-opt-name {
    font-size:12px;
    color:var(--ib-text);
    display:block;
    font-weight:500;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:break-word;
    word-wrap:break-word;
}
#ib-cfg-app .ib-cfg-opt-desc {
    font-size:10px;
    color:var(--ib-muted);
    display:block;
    margin-top:2px;
    font-weight:300;
    line-height:1.45;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:break-word;
    word-wrap:break-word;
}
#ib-cfg-app .ib-cfg-opt-badge {
    display:inline-block;
    font-size:8px;
    font-weight:700;
    letter-spacing:.5px;
    padding:1px 5px;
    border-radius:4px;
    margin-top:4px;
    text-transform:uppercase;
}
#ib-cfg-app .ib-cfg-badge-eol { background:#c06000; color:#fff; }
#ib-cfg-app .ib-cfg-badge-ss  { background:#b0a020; color:#fff; }
/* Starred "Destacado" */
#ib-cfg-app .ib-cfg-badge-starred {
    background: transparent;
    color: #c8860a;
    border: 1px solid #e0a800;
    font-size: 9px;
    letter-spacing: .3px;
}

/* ── Tooltip sobre badges EOL / Sin stock ─────────────────────── */
#ib-cfg-app .ib-cfg-opt-badge[data-tip] {
    position: relative;
    cursor: default;
    z-index: 1;
}
#ib-cfg-app .ib-cfg-opt-badge[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    background: rgba(15,15,15,.88);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .3px;
    padding: 4px 9px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .18s ease;
    z-index: 20;
}
/* Flecha */
#ib-cfg-app .ib-cfg-opt-badge[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 4px solid transparent;
    border-top-color: rgba(15,15,15,.88);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .18s ease;
    z-index: 20;
}
#ib-cfg-app .ib-cfg-opt-badge[data-tip]:hover::after,
#ib-cfg-app .ib-cfg-opt-badge[data-tip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Sin stock: tooltip amb rebot */
#ib-cfg-app .ib-cfg-badge-ss[data-tip]::after,
#ib-cfg-app .ib-cfg-badge-ss[data-tip]::before {
    transition: opacity .1s ease,
                transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

/* CERT — multi-select */
#ib-cfg-app .ib-cfg-cert-wrap {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:7px;
}
#ib-cfg-app .ib-cfg-cert-btn {
    background:var(--ib-bg-input);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-inner);
    padding:9px 12px;
    cursor:pointer;
    text-align:left;
    transition:all .12s ease;
    color:var(--ib-text);
    font-family:'Inter',sans-serif;
    position:relative;
    overflow:hidden;
}
#ib-cfg-app .ib-cfg-cert-btn:hover { border-color:var(--ib-blue); background:rgba(5,107,241,.07); }
#ib-cfg-app .ib-cfg-cert-btn.selected { border-color:var(--ib-blue); background:var(--ib-sel-bg); color:#fff; }
#ib-cfg-app .ib-cfg-cert-btn.selected .ib-cfg-opt-code { color:rgba(255,255,255,.85); }

/* SIDEBAR */
#ib-cfg-app .ib-cfg-sidebar { position:sticky; top:calc(var(--ib-header-height) + 16px); }

/* PROGRESS */
#ib-cfg-app .ib-cfg-progress-wrap { margin-bottom:14px; }
#ib-cfg-app .ib-cfg-progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
#ib-cfg-app .ib-cfg-progress-label { font-size:10px; font-weight:600; letter-spacing:.5px; color:var(--ib-muted); }
#ib-cfg-app .ib-cfg-progress-pct { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ib-cyan); }
#ib-cfg-app .ib-cfg-progress-bar { height:3px; background:var(--ib-border); border-radius:2px; overflow:hidden; }
#ib-cfg-app .ib-cfg-progress-fill { height:100%; background:var(--ib-grad-h); transition:width .35s ease; border-radius:2px; }

/* CODE DISPLAY */
#ib-cfg-app .ib-cfg-code-display {
    background:var(--ib-bg-card);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-outer);
    padding:22px;
    margin-bottom:16px;
}
#ib-cfg-app .ib-cfg-code-display-hdr {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:4px;
}
#ib-cfg-app .ib-cfg-copy-inline {
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:transparent;
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-inner);
    color:var(--ib-text2);
    font-size:11px;
    padding:5px 10px;
    cursor:pointer;
    transition:all .15s;
    line-height:1;
}
#ib-cfg-app .ib-cfg-copy-inline:hover { border-color:var(--ib-blue); color:var(--ib-blue); background:rgba(5,107,241,.06); }
#ib-cfg-app .ib-cfg-code-box {
    background:var(--ib-bg);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-inner);
    padding:18px 14px 14px;
    text-align:center;
    margin:14px 0 10px;
}
#ib-cfg-app .ib-cfg-product-code {
    font-family:'JetBrains Mono',monospace;
    font-size:20px;
    font-weight:600;
    letter-spacing:3px;
    color:var(--ib-blue);
    display:block;
    margin-bottom:10px;
}
#ib-cfg-app .ib-cfg-code-segments { display:flex; justify-content:center; gap:2px; flex-wrap:wrap; }
#ib-cfg-app .ib-cfg-seg {
    font-family:'JetBrains Mono',monospace;
    font-size:9px;
    padding:2px 5px;
    border-radius:4px;
    background:var(--ib-bg);
    color:var(--ib-muted);
    border:1px solid var(--ib-border);
}
#ib-cfg-app .ib-cfg-seg.filled { background:var(--ib-blue); color:#fff; border-color:var(--ib-blue); }
#ib-cfg-app .ib-cfg-code-valid {
    font-size:11px;
    text-align:center;
    padding:7px;
    border-radius:var(--ib-radius-inner);
    font-family:'JetBrains Mono',monospace;
}
#ib-cfg-app .ib-cfg-code-valid.ok      { background:rgba(5,107,241,.1); color:var(--ib-blue); border:1px solid rgba(5,107,241,.25); }
#ib-cfg-app .ib-cfg-code-valid.pending { background:var(--ib-bg); color:var(--ib-muted); border:1px solid var(--ib-border); }

/* FAMILY IMAGE CARD */
#ib-cfg-app .ib-cfg-family-img-card {
    background:var(--ib-bg-card);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-outer);
    overflow:hidden;
    margin-bottom:6px;
    line-height:0;
}
#ib-cfg-app .ib-cfg-family-img-el {
    width:100%;
    height:auto;
    display:block;
    border-radius:var(--ib-radius-outer);
    object-fit:cover;
}
#ib-cfg-app .ib-cfg-family-img-disclaimer {
    margin:0 0 14px;
    font-size:11px;
    color:var(--ib-text-muted, #8a95a0);
    font-style:italic;
    line-height:1.4;
}

/* SUMMARY */
#ib-cfg-app .ib-cfg-summary-block {
    background:var(--ib-bg-card);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-outer);
    padding:18px 20px;
    margin-bottom:16px;
}
#ib-cfg-app .ib-cfg-sum-row {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:7px 0;
    border-bottom:1px solid var(--ib-border);
    gap:10px;
}
#ib-cfg-app .ib-cfg-sum-row:last-child { border-bottom:none; }
#ib-cfg-app .ib-cfg-sum-key {
    font-size:10px;
    color:var(--ib-muted);
    min-width:74px;
    letter-spacing:.3px;
    font-weight:600;
    padding-top:1px;
}
#ib-cfg-app .ib-cfg-sum-val {
    font-size:11.5px;
    color:var(--ib-text);
    text-align:right;
    font-weight:400;
    line-height:1.4;
    overflow:hidden;
    text-overflow:ellipsis;
}
#ib-cfg-app .ib-cfg-sum-code {
    font-family:'JetBrains Mono',monospace;
    color:var(--ib-blue);
    font-size:10px;
    margin-right:4px;
}

/* DESCRIPTION */
#ib-cfg-app .ib-cfg-product-desc {
    background:var(--ib-bg-card);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-outer);
    padding:18px 20px;
    margin-bottom:16px;
}
#ib-cfg-app .ib-cfg-desc-text {
    font-size:12.5px;
    color:var(--ib-text2);
    line-height:1.7;
    font-weight:300;
    min-height:54px;
}
#ib-cfg-app .ib-cfg-desc-text.empty { color:var(--ib-muted); font-style:italic; }

/* BUTTONS */
#ib-cfg-app .ib-cfg-btn-primary {
    display:block; width:100%;
    background:#056BF1; color:#fff;
    border:none; border-radius:var(--ib-radius-inner);
    padding:14px 20px;
    font-family:'Inter',sans-serif;
    font-weight:600; font-size:13px;
    letter-spacing:.3px;
    cursor:pointer;
    transition:all .15s;
    margin-bottom:8px;
}
#ib-cfg-app .ib-cfg-btn-primary:hover:not(:disabled) { background:#0358c9; transform:translateY(-1px); box-shadow:0 6px 24px rgba(5,107,241,.35); }
#ib-cfg-app .ib-cfg-btn-primary:disabled { background:var(--ib-bg-card2); color:var(--ib-muted); cursor:not-allowed; transform:none; box-shadow:none; }

#ib-cfg-app .ib-cfg-btn-secondary {
    display:block; width:100%;
    background:transparent; color:var(--ib-text2);
    border:1px solid var(--ib-border-l);
    border-radius:var(--ib-radius-inner);
    padding:11px 20px;
    font-family:'Inter',sans-serif;
    font-size:12px; font-weight:500;
    letter-spacing:.3px;
    cursor:pointer;
    transition:all .15s;
    margin-bottom:8px;
    text-align:center;
}
#ib-cfg-app .ib-cfg-btn-secondary:hover { border-color:var(--ib-blue); color:var(--ib-text); background:rgba(5,107,241,.06); }

#ib-cfg-app .ib-cfg-reset-link {
    text-align:center;
    color:var(--ib-muted);
    font-size:11px;
    cursor:pointer;
    text-decoration:underline;
    margin-top:10px;
    display:block;
    letter-spacing:.3px;
    font-weight:300;
    transition:color .15s;
    background:none;
    border:none;
    width:100%;
}
#ib-cfg-app .ib-cfg-reset-link:hover { color:var(--ib-blue); }

/* TEXTAREA */
#ib-cfg-app .ib-cfg-custom-notes {
    background:var(--ib-bg-card);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-inner);
    padding:12px 14px;
    color:var(--ib-text);
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:300;
    width:100%;
    resize:vertical;
    min-height:80px;
    margin-top:8px;
}
#ib-cfg-app .ib-cfg-custom-notes:focus { outline:none; border-color:var(--ib-blue); box-shadow:0 0 0 2px rgba(5,107,241,.15); }
#ib-cfg-app .ib-cfg-custom-notes::placeholder { color:var(--ib-muted); }

/* FOOTER */
#ib-cfg-app .ib-cfg-footer-contact {
    margin-top:30px;
    padding:16px 20px;
    background:var(--ib-bg-card);
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-outer);
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}
#ib-cfg-app .ib-cfg-footer-contact span { font-size:11px; color:var(--ib-muted); font-weight:300; }
#ib-cfg-app .ib-cfg-footer-contact span strong { color:var(--ib-text2); font-weight:500; }

/* STEP 9 ENVIAR — form opcional */
#ib-cfg-app .ib-cfg-submit-form { display:flex; flex-direction:column; gap:12px; }
#ib-cfg-app .ib-cfg-submit-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
@media(max-width:600px) { #ib-cfg-app .ib-cfg-submit-grid { grid-template-columns:1fr; } }
#ib-cfg-app .ib-cfg-submit-field {
    display:flex;
    flex-direction:column;
    gap:4px;
}
#ib-cfg-app .ib-cfg-submit-label {
    font-size:11px;
    font-weight:600;
    color:var(--ib-blue);
    letter-spacing:.3px;
}
#ib-cfg-app .ib-cfg-submit-form input[type="text"],
#ib-cfg-app .ib-cfg-submit-form input[type="email"],
#ib-cfg-app .ib-cfg-submit-form input[type="tel"] {
    width:100%;
    padding:10px 12px;
    border:1px solid var(--ib-border);
    border-radius:var(--ib-radius-inner);
    font-family:'Inter',sans-serif;
    font-size:13px;
    background:var(--ib-bg-card);
    color:var(--ib-text);
}
#ib-cfg-app .ib-cfg-submit-form input:focus { outline:none; border-color:var(--ib-blue); box-shadow:0 0 0 2px rgba(5,107,241,.15); }
#ib-cfg-app .ib-cfg-submit-privacy {
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:12px;
    color:var(--ib-text2);
    line-height:1.4;
}
#ib-cfg-app .ib-cfg-submit-privacy input[type="checkbox"] { margin:2px 0 0 0; flex-shrink:0; }
#ib-cfg-app .ib-cfg-submit-privacy a { color:var(--ib-blue); text-decoration:underline; }
#ib-cfg-app .ib-cfg-submit-actions {
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:4px;
    flex-wrap:wrap;
}
#ib-cfg-app .ib-cfg-submit-actions .ib-cfg-btn-primary {
    width:auto;
    margin:0;
    padding:12px 26px;
}
#ib-cfg-app .ib-cfg-feedback { font-size:13px; font-weight:500; }
#ib-cfg-app .ib-cfg-feedback.is-error { color:#b32d2e; }
#ib-cfg-app .ib-cfg-feedback.is-success { color:#2db87a; }

/* TOAST */
#ib-cfg-app .ib-cfg-toast,
.ib-cfg-toast {
    position:fixed; bottom:28px; right:28px;
    background:#041C2C;
    border:1px solid #056BF1;
    color:#2ad2c9;
    padding:11px 18px;
    border-radius:var(--ib-radius-inner);
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    opacity:0;
    transform:translateY(8px);
    transition:all .25s;
    pointer-events:none;
    z-index:200;
    box-shadow:0 4px 20px rgba(5,107,241,.3);
}
.ib-cfg-toast.show { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:960px) {
    #ib-cfg-app .ib-cfg-container { grid-template-columns:1fr; }
    #ib-cfg-app .ib-cfg-sidebar { position:static; }
    #ib-cfg-app .ib-cfg-title { font-size:26px; }
    #ib-cfg-app .ib-cfg-contact-grid { grid-template-columns:1fr; }
}