:root{
      --bg:#f3f5f8; --panel:#fff; --panel2:#fbfcfe; --text:#0f172a; --muted:#64748b;
      --line:#e6eaf0; --shadow:0 10px 30px rgba(2,6,23,.08); --shadow2:0 8px 20px rgba(2,6,23,.10);
      --radius:14px; --radius2:18px; --yellow:#f2c200; --yellow2:#eab308;
      --btn:#0b0f14; --btnTxt:#fff; --chip:#eef2f7; --focus:0 0 0 3px rgba(234,179,8,.25);
      --danger:#ef4444;
    }
    *{box-sizing:border-box} html,body{height:100%}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
    .app{height:100%;display:grid;grid-template-columns:240px 1fr;grid-template-rows:56px 1fr;grid-template-areas:"side top" "side main"}
    .sidebar{grid-area:side;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;gap:12px}
    .brand{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;user-select:none}
    .logo{width:34px;height:34px;border-radius:10px;background:conic-gradient(from 180deg,var(--yellow),#22c55e,#3b82f6,var(--yellow));box-shadow:0 10px 20px rgba(2,6,23,.10);display:grid;place-items:center;color:#0b0f14;font-weight:900}
    .brand .t{font-weight:900;letter-spacing:.2px;font-size:14px;line-height:1.05}
    .brand .s{font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}
    .nav{display:flex;flex-direction:column;gap:4px;margin-top:4px}
    .navbtn{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:800;color:#111827;text-align:left}
    .navbtn:hover{background:#f7f9fc}
    .navbtn.active{background:#f7f9fc;border-color:var(--line);box-shadow:0 6px 16px rgba(2,6,23,.06)}
    .ico{width:18px;height:18px;flex:0 0 18px;color:#111827;opacity:.9}
    .spacer{flex:1}
    .sidefoot{padding:10px 10px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}
    .adminPill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:1000;font-size:12px;color:#111827}
    .dot{width:8px;height:8px;border-radius:99px;background:#94a3b8} .dot.on{background:#22c55e}

    .topbar{grid-area:top;background:#111827;display:flex;align-items:center;gap:12px;padding:10px 14px;position:sticky;top:0;z-index:20}
    .topLeft{display:flex;align-items:center;gap:10px;color:#fff;min-width:220px}
    .hamb{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer}
    .hamb:hover{background:rgba(255,255,255,.09)}
    .topTitle{display:flex;flex-direction:column;line-height:1.05}
    .topTitle .a{font-weight:900;font-size:13px} .topTitle .b{font-weight:700;font-size:11px;color:rgba(255,255,255,.70)}
    .statusPill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-weight:900;font-size:12px;user-select:none}
    .statusDot{width:8px;height:8px;border-radius:99px;background:#94a3b8} .statusDot.on{background:#22c55e} .statusDot.warn{background:#f59e0b}
    .searchWrap{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:8px 10px;box-shadow:0 6px 16px rgba(0,0,0,.20);min-width:280px}
    .searchWrap input{width:100%;border:0;outline:0;font-weight:800;font-size:13px;background:transparent}
    .searchWrap input::placeholder{color:#9aa4b2;font-weight:800}
    .topRight{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .iconBtn{height:34px;min-width:34px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:#fff;padding:0 10px;gap:8px;font-weight:900;font-size:12px;user-select:none}
    .iconBtn:hover{background:rgba(255,255,255,.09)}
    .badgeCount{position:absolute;right:-6px;top:-6px;min-width:18px;height:18px;border-radius:999px;background:var(--yellow);color:#111827;font-size:11px;font-weight:1000;display:none;align-items:center;justify-content:center;padding:0 5px;border:1px solid rgba(0,0,0,.10)}

    .main{grid-area:main;padding:14px;overflow:auto}
    .banner{background:linear-gradient(180deg,var(--yellow),var(--yellow2));color:#111827;font-weight:1000;border-radius:12px;padding:8px 12px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow2);margin-bottom:12px;border:1px solid rgba(0,0,0,.10)}
    .contentCard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius2);box-shadow:var(--shadow);overflow:hidden}
    .contentHd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
    .contentHd .title{font-weight:1000;font-size:13px;color:#0f172a}
    .contentHd .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .mini{font-size:12px;color:var(--muted);font-weight:800}
    .select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;font-weight:800;font-size:12px;outline:0}
    .select:focus{box-shadow:var(--focus);border-color:rgba(234,179,8,.55)}

    .grid{padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    @media (max-width:1100px){.grid{grid-template-columns:1fr} .app{grid-template-columns:220px 1fr}}
    @media (max-width:860px){.app{grid-template-columns:1fr;grid-template-areas:"top" "main"} .sidebar{display:none}}

    .pCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 18px rgba(2,6,23,.06);padding:12px;display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
    .pImg{
      width:120px;
      height:120px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      flex:0 0 120px;
    }
    .pImg img{
      width:100%;
      height:100%;
      display:block;
      object-fit:contain;
      object-position:center center;
      padding:0;
      background:#fff;
    }
    .pInfo{min-width:0}
    .pName{font-weight:1000;font-size:13px;line-height:1.15;margin:0;color:#111827}
    .pMeta{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12px;font-weight:800}
    .chip{background:var(--chip);border:1px solid var(--line);padding:4px 8px;border-radius:999px;font-weight:900;font-size:11px;color:#475569}
    .pPrice{margin-top:6px;font-weight:1100;font-size:14px;color:#0b1220;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
    .pPrice small{font-size:11px;color:#94a3b8;font-weight:900}
    .pPrice.locked{cursor:default} .pPrice.locked small{display:none}
    .pActions{margin-top:10px;display:flex;gap:10px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
    .btn{border:1px solid rgba(0,0,0,.12);background:#fff;color:#111827;padding:9px 10px;border-radius:10px;cursor:pointer;font-weight:1000;font-size:12px;user-select:none}
    .btn.primary{background:var(--btn);color:var(--btnTxt);border-color:rgba(0,0,0,.22);padding:10px 12px;min-width:160px;text-align:center}
    .btn:hover{filter:brightness(.98)} .btn.primary:active{transform:translateY(1px)}
    .qty{display:flex;align-items:center;gap:8px}
    .qbtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:1100;font-size:16px;color:#111827}
    .qbtn:hover{background:#f7f9fc}
    .qnum{min-width:34px;text-align:center;font-weight:1100;color:#111827}
    .qinput{width:64px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;text-align:center;font-weight:1100;color:#111827;outline:none}
    .qinput:focus{border-color:#1f2937;box-shadow:0 0 0 3px rgba(31,41,55,.12)}
    .qinput::-webkit-outer-spin-button,.qinput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
    .qinput[type=number]{-moz-appearance:textfield}}

    .drawerBack{position:fixed;inset:0;background:rgba(2,6,23,.35);display:none;z-index:50}
    .drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(2,6,23,.20);transform:translateX(110%);transition:transform .22s ease;z-index:60;display:flex;flex-direction:column}
    .drawer.show{transform:translateX(0)}
    .drawerHd{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel2);display:flex;align-items:center;justify-content:space-between;gap:10px}
    .drawerHd .t{font-weight:1100;font-size:13px}
    .drawerBd{padding:12px 14px;overflow:auto;flex:1}
    .drawerFt{border-top:1px solid var(--line);padding:12px 14px;background:#fff}
    .cRow{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-bottom:10px;background:#fff}
    .cNm{font-weight:1000;font-size:12.5px;color:#111827}
    .cSm{margin-top:4px;font-size:12px;color:var(--muted);font-weight:800}
    .cCtrl{display:flex;align-items:center;gap:8px}
    .cDel{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.08);color:#991b1b;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:1000;font-size:12px}
    .total{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:1100}
    .total .v{font-size:16px}
    .field{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 10px;outline:0;font-weight:800;font-size:13px;margin-top:8px}
    .field:focus{box-shadow:var(--focus);border-color:rgba(234,179,8,.55)}
    .muted{color:var(--muted);font-size:12px;font-weight:800}
    .err{margin-top:8px;color:#991b1b;font-weight:900;font-size:12px;display:none}

    .orders{padding:14px;display:flex;flex-direction:column;gap:10px}
    .oRow{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;box-shadow:0 8px 18px rgba(2,6,23,.06);display:flex;gap:10px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
    .oLeft{min-width:260px}
    .oId{font-weight:1100}
    .oSm{margin-top:4px;color:var(--muted);font-size:12px;font-weight:800}
    .oBtn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 10px;cursor:pointer;font-weight:1000;font-size:12px}
    .oBtn.primary{background:var(--btn);color:#fff;border-color:rgba(0,0,0,.22)}
    .empty{padding:14px;color:var(--muted);font-weight:800;font-size:13px}
    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

    .modalBack{position:fixed;inset:0;background:rgba(2,6,23,.35);display:none;z-index:90;align-items:center;justify-content:center;padding:16px}
    .modal{width:min(580px,96vw);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(2,6,23,.25);overflow:hidden}
    .mHd{padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
    .mHd .t{font-weight:1100;font-size:13px}
    .mBd{padding:14px}
    .mRow{margin-top:10px}
    .mLabel{font-size:12px;font-weight:1000;color:#111827}
    .mHint{font-size:12px;font-weight:800;color:var(--muted);margin-top:4px}
    .mActions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
    .helpInline{margin-top:10px;color:var(--muted);font-size:12px;font-weight:800}
  
    /* ===== Mobile cart fix (urgent) ===== */
    @media (max-width: 600px){
      /* prevent horizontal drift */
      html,body{ width:100%; overflow-x:hidden; }
      .topbar{ position:sticky; top:0; width:100%; }
      .searchWrap{ flex:1; min-width:0; }
      .topRight{ gap:8px; }
      .iconBtn{ height:34px; }
      .banner{ width:100%; }

      /* drawer: full-screen on mobile */
      .drawer{
        width:100vw !important;
        max-width:100vw !important;
        right:0;
        border-left:none;
      }
      .drawerHd{
        position:sticky;
        top:0;
        z-index:5;
      }
      .drawerBd{ padding:10px 10px; }
      .drawerFt{
        position:sticky;
        bottom:0;
        z-index:6;
        box-shadow: 0 -10px 30px rgba(2,6,23,.10);
      }

      /* cart rows: stack nicely */
      .cRow{
        grid-template-columns: 1fr !important;
        gap:10px;
      }
      .cCtrl{
        justify-content:flex-start;
        flex-wrap:wrap;
      }
      .cDel{ margin-left:auto; }

      /* footer controls: full width buttons */
      #btnCopy, #btnCheckout{
        flex:1 1 100%;
        width:100%;
      }
      .drawerFt > div[style*="display:flex"]{
        flex-direction:column;
      }

      /* fields bigger and aligned */
      .field{ font-size:14px; padding:12px 12px; }
      .total{ margin-bottom:8px; }

      /* quantity buttons hit area */
      .qbtn{ width:40px; height:40px; border-radius:12px; }
      .qnum{ min-width:40px; }
    }


/* ===== MOBILE COMPACT MODE (FIX REAL) ===== */
@media (max-width: 600px){

  html, body{
    width:100%;
    overflow-x:hidden;
  }

  .main{ padding:8px; }
  .banner{ margin-bottom:8px; }
  .contentCard{ margin-bottom:8px; }

  .pCard{
    grid-template-columns: 84px 1fr;
    gap:8px;
    padding:8px;
  }
  .pImg{
    width:84px;
    height:64px;
  }
  .pName{
    font-size:14px;
    line-height:1.2;
  }
  .pPrice{
    font-size:14px;
  }
  .pActions{
    gap:6px;
  }

  .drawer{
    width:100vw;
    max-width:100vw;
    padding:0;
  }
  .drawerBd{
    padding:8px;
  }

  .cRow{
    grid-template-columns: 1fr;
    padding:8px;
    gap:6px;
  }
  .cName{
    font-size:14px;
    line-height:1.2;
  }
  .cMeta{
    font-size:12px;
    line-height:1.2;
  }

  .cCtrl{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .qbtn{
    width:34px;
    height:34px;
    font-size:16px;
  }
  .qnum{
    min-width:34px;
    padding:6px;
  }

  .drawerFt{
    padding:8px;
  }
  .drawerFt button{
    width:100%;
  }

  .field{
    padding:10px;
    font-size:14px;
  }
}


    /* ===== Mobile: 2 columns + floating cart ===== */
    @media (max-width: 600px){
      /* 2 products per row */
      .grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
      /* make product cards more compact to fit 2-up */
      .pCard{
        grid-template-columns: 1fr !important;
        padding:8px !important;
      }
      .pImg{
        width:100% !important;
        height:72px !important;
      }
      .pMeta{ gap:6px; }
      .pActions{
        flex-direction:column;
        align-items:stretch;
      }
      .qty{ justify-content:space-between; }
      .btn.primary{
        width:100%;
      }

      /* Floating cart button */
      .fabCart{
        position:fixed;
        right:14px;
        bottom:14px;
        z-index:95;
        width:56px;
        height:56px;
        border-radius:16px;
        border:1px solid rgba(0,0,0,.18);
        background: #111827;
        color:#fff;
        box-shadow: 0 18px 40px rgba(2,6,23,.22);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
      }
      .fabCart:active{ transform: translateY(1px); }
      .fabBadge{
        position:absolute;
        top:-8px;
        right:-8px;
        min-width:22px;
        height:22px;
        padding:0 6px;
        border-radius:999px;
        background: var(--yellow);
        color:#111827;
        font-weight:1000;
        font-size:12px;
        display:none;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(0,0,0,.12);
      }
    }
    /* Hide FAB on desktop */
    @media (min-width: 601px){
      .fabCart{ display:none !important; }
    }


/* ===== Mobile: use ONLY floating cart button ===== */
@media (max-width: 600px){
  #btnCart{ display:none !important; }
  .fabCart{ z-index:9999 !important; pointer-events:auto !important; }
}


/* ===== Mobile header layout + install ===== */
@media (max-width: 600px){
  .topbar{ flex-wrap:wrap; height:auto; padding:10px; gap:10px; }
  .topLeft{ width:100%; }
  .topRight{ width:100%; justify-content:flex-end; }
  /* search is moved to mobileSearchSlot; keep safe fallback */
  header .searchWrap{ width:100%; order:99; margin-top:8px; }
  #mobileSearchSlot .searchWrap{ margin:8px 0 0 0; width:100%; }
  /* install button compact */
  #btnInstall{ flex:0 0 auto; }
}


/* ===== FAB cart (mobile only) ===== */
.fabCart{ display:none; }
@media (max-width: 600px){
  .fabCart{
    display:flex !important;
    position:fixed;
    right:14px;
    bottom:14px;
    z-index:9999;
    width:56px;
    height:56px;
    border-radius:16px;
    border:1px solid rgba(0,0,0,.18);
    background:#111827;
    color:#fff;
    box-shadow: 0 18px 40px rgba(2,6,23,.22);
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .fabCart:active{ transform:translateY(1px); }
  .fabBadge{
    position:absolute;
    top:-8px;
    right:-8px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background: var(--yellow);
    color:#111827;
    font-weight:1000;
    font-size:12px;
    display:none;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0,0,0,.12);
  }
}


/* ===== Install button: visible (not transparent) ===== */
#btnInstall{
  border: 1px solid rgba(0,0,0,.14) !important;
  background: var(--yellow) !important;
  color: #111827 !important;
  font-weight: 1000 !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.12);
}
#btnInstall:hover{ filter: brightness(.98); }
#btnInstall:active{ transform: translateY(1px); }


/* =========================
   KITS DE INSTALACIÓN (UI)
   ========================= */
.kitsBody{padding:14px}
.kitsGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start}
@media (max-width:980px){.kitsGrid{grid-template-columns:1fr}}
.kitsBox,.kitsSummary{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 18px rgba(2,6,23,.06);padding:12px}
.kitsBoxTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.kitsBoxH{font-weight:1100;font-size:13px;color:#111827}
.kitsHelp{font-size:12px;color:var(--muted);font-weight:800}
.kitsLabel{display:block;font-size:12px;color:var(--muted);font-weight:900;margin:8px 0 6px}
.kitsPills{display:flex;flex-wrap:wrap;gap:8px}
.kitsPillBtn{border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:10px 12px;font-weight:1000;font-size:12px;cursor:pointer;color:#111827;display:inline-flex;gap:8px;align-items:center}
.kitsPillBtn small{font-weight:1000;color:#334155}
.kitsPillBtn.on{background:#111827;color:#fff;border-color:rgba(17,24,39,.25)}
.kitsPillBtn.on small{color:rgba(255,255,255,.85)}
.kitsSpacer{height:12px}
.kitsRow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.kitsRow2{grid-template-columns:1fr}}
.kitsToggle{display:flex;gap:8px;background:#f6f7fb;border:1px solid var(--line);padding:6px;border-radius:12px;width:max-content}
.kitsToggle button{border:0;border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:1000;font-size:12px;background:transparent;color:#0f172a}
.kitsToggle button.on{background:#fff;border:1px solid var(--line);box-shadow:0 10px 18px rgba(16,24,40,.08)}
.kitsAutoLine{margin-top:0;padding:10px 12px;border:1px dashed #e5e7eb;border-radius:12px;background:#fafbfc;font-size:12px;color:#334155;font-weight:800}
.kitsAutoLine b{font-weight:1100}
.kitsAutoLine .ok{color:#16a34a;font-weight:1100}
.kitsAutoLine .warn{color:#b45309;font-weight:1100}
.kitsEmu{border:1px dashed #e5e7eb;border-radius:12px;background:#fafbfc;padding:10px 12px}
.kitsCheck{display:flex;align-items:center;gap:10px;font-size:12px;color:#0f172a;font-weight:1000;margin:0}
.kitsCheck input{transform:scale(1.1)}
.kitsNote{margin-top:10px;font-size:12px;color:var(--muted);font-weight:800;line-height:1.35}
.kitsSummary{position:sticky;top:76px}
@media (max-width:980px){.kitsSummary{position:static}}
.kitsSumTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.kitsSumList{display:grid;gap:8px}
.kitsLine{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:12px;color:#334155;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fafbfc;font-weight:900}
.kitsLine .l{color:#475569;font-weight:900}
.kitsLine .r{font-weight:1100;color:#0f172a;white-space:nowrap}
.kitsTotal{margin-top:10px;padding:12px;border-radius:14px;background:linear-gradient(180deg,#0f172a,#0b1220);color:#fff;border:1px solid rgba(255,255,255,.10)}
.kitsTotal .t1{font-size:12px;color:rgba(255,255,255,.75);font-weight:900}
.kitsTotal .t2{font-size:22px;font-weight:1200;letter-spacing:.2px;margin-top:4px}