:root{
      --bg:#f5f7fb; --card:#fff; --text:#0f172a; --muted:#64748b; --line:#e5e7eb;
      --blue:#2563eb; --blue2:#1d4ed8; --shadow:0 10px 30px rgba(2,8,23,.08);
      --radius:16px; --danger:#dc2626; --danger2:#b91c1c;
      --rowGreen: rgba(34,197,94,.08);
      --rowYellow: rgba(250,204,21,.10);
      --rowRed: rgba(239,68,68,.10);
      --rowBlue: rgba(37,99,235,.10);
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:var(--bg);color:var(--text)}
    .wrap{max-width:1600px;margin:18px auto;padding:0 18px}
    .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;flex-wrap:wrap}
    .topbar{position:sticky;top:0;z-index:50;padding:10px 0;background:rgba(245,247,251,.86);backdrop-filter: blur(10px)}
    .topbar.scrolled{box-shadow:0 10px 30px rgba(2,8,23,.10)}

    /* Micro-interações (ícones topo) */
    .iconBtn{transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease}
    .iconBtn:active{transform:scale(.96)}
    .iconBtn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
    .iconBadge.bump{animation:bump .25s ease}
    @keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}

    .brand{display:flex;align-items:center;gap:16px;min-width:280px}
    .logo{width:148px;height:88px;object-fit:contain}
    .brandLogoLink{display:inline-flex;align-items:center;}
    .title h1{margin:0;font-size:26px;letter-spacing:-.3px}
    .title p{margin:4px 0 0;color:var(--muted);font-size:13px}

    .userBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .clientPill{display:inline-flex;align-items:center;gap:10px;background:#ffffffb3;border:1px solid var(--line);backdrop-filter: blur(8px);padding:10px 12px;border-radius:999px;color:#0f172a;font-size:13px;min-height:44px;overflow:visible}
#clientName{display:block;flex:1;min-width:0;line-height:1.25;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .clientDot{width:8px;height:8px;border-radius:50%;background:#22c55e}

    .btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:700}
    .btn:disabled{opacity:.55;cursor:not-allowed}
    .btnPrimary{background:var(--blue);border-color:var(--blue);color:#fff}
    .btnPrimary:hover{background:var(--blue2)}
	    /* Loading state on action buttons (order send) */
	    .btnLoading{position:relative;pointer-events:none;}
	    .btnLoading .btnSpin{display:inline-block;vertical-align:-3px;margin-left:8px;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:btnSpin 0.8s linear infinite;}
	    .btnSpin{display:none;}
	    @keyframes btnSpin{to{transform:rotate(360deg)}}
    .btnGhost:hover{background:#f8fafc}
    .btnDanger{background:var(--danger);border-color:var(--danger);color:#fff}
    .btnDanger:hover{background:var(--danger2)}
    .btnSm{padding:8px 10px;border-radius:10px;font-weight:700}


    /* ===== BANHOAZIS: cliente selecionado no carrinho (mais ênfase) ===== */
    #bzClientChosen{font-weight:900;color:#0f172a;font-size:14px;line-height:1.25}
    #bzClientChosen.bzChosenActive{
      background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;
      padding:10px 12px;border-radius:12px;
      display:flex;align-items:center;gap:10px
    }
    #bzClientChosen.bzChosenActive::before{
      content:"✓";
      width:22px;height:22px;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background:#1d4ed8;color:#fff;font-weight:900;font-size:12px;
      flex:0 0 auto;
    }
    #bzClientChosenMeta{color:#475569}


    /* --- UX tweaks (requested) --- */
    /* Login/Registo switch buttons */
    #authToLogin, #authToRegister{background:#fff;border-color:var(--line);color:#0f172a}
    #authToLogin:hover, #authToRegister:hover{background:#f8fafc}
    #authToLogin.isActive, #authToRegister.isActive{background:var(--blue);border-color:var(--blue);color:#fff}
    #authToLogin.isActive:hover, #authToRegister.isActive:hover{background:var(--blue2)}

    /* Tab selected state: clearer highlight */
    .tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
    .tab.active:hover{background:var(--blue2)}

    /* Cart badge: when has items, use blue instead of black */
    .badge.hasItems{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}

    /* Orders history: 'Ver detalhes' button with same blue as primary */
    .btnOrderDetails{background:var(--blue);border-color:var(--blue);color:#fff}
    .btnOrderDetails:hover{background:var(--blue2)}

    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .controls{padding:14px}

/* ===== Dock de filtros (sticky entre cabeçalho e legendas) ===== */
.filtersDock{
  position: sticky;
  top: calc(var(--topbarH, 72px) + 10px);
  /* abaixo do cabeçalho, sem tapar as colunas/linhas: sticky mantém o layout em fluxo */
  z-index: 25;

  margin-bottom: var(--dockGap, 14px);
}
:root{--dockGap:14px}

.filtersDockPlaceholder{height:0}
/* Fallback robusto (quando sticky falha): fixa sem sobrepor a tabela (usa placeholder) */
.filtersDock.docked{
  position: fixed;
  top: calc(var(--topbarH, 72px) + 10px);
  left: var(--dockLeft, 0px);
  width: var(--dockWidth, 100%);
  z-index: 60;
}
.filtersDock.docked{box-shadow:0 10px 30px rgba(2,8,23,.10)}
.filtersDockPlaceholder.docked{height: calc(var(--dockH, 0px) + var(--dockGap, 14px));}


.filtersHeadRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px 0;
  flex-wrap:wrap;
}
.filtersHeadRow .btn{border-radius:14px}
.filtersHeadRow .famQuick{
  flex:1;
  min-width: 280px;
}

    .grid{display:grid;grid-template-columns: 2.1fr 1fr 1fr .8fr 1.1fr .6fr .6fr;gap:10px;align-items:end}
    /* Botões de filtros: encostar ao máximo à direita (até ao limite do container) */
    .gridActions{display:flex;gap:10px;align-items:end;justify-content:flex-end;grid-column:1/-1;width:100%}
    .stockLegend{margin-top:12px;margin-left:16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
    .stockLegendItem{display:flex;align-items:center;gap:8px;font-size:13px;color:#334155;font-weight:800}
    .stockLegendDot{width:12px;height:12px;border-radius:4px;border:1px solid rgba(15,23,42,.16)}
    .dotGreen{background:#22c55e}
    .dotYellow{background:#facc15}
    .dotRed{background:#ef4444}
    .dotBlue{background:#2563eb}

    label{display:block;color:var(--muted);font-size:12px;margin:0 0 6px}
    input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;outline:none;background:#fff}
    input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
    textarea{min-height:108px;resize:vertical}
    .meta{padding:0 14px 12px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
    .pager{display:flex;align-items:center;gap:8px}
    .sortHint{font-size:11px;color:#64748b;margin-left:6px}

    .tabs{display:flex;gap:10px;align-items:center;margin:12px 0 14px}
    .tab{
      border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 14px;
      font-weight:800; cursor:pointer; display:inline-flex; gap:10px; align-items:center;
    }
    .tab svg{width:18px;height:18px;display:block}
    .tab.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
    .badge{background:#0f172a;color:#fff;border-radius:999px;padding:2px 8px;font-size:12px}

    .tableWrap{border-top:1px solid var(--line);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    table{width:100%;border-collapse:separate;border-spacing:0;max-width:100%}
    /* ===== STOCK: adaptar larguras sem forcar scroll em ecras grandes ===== */
    #panelStock .tableWrap{width:100%}
    #panelStock table{table-layout:fixed}
    #panelStock th, #panelStock td{overflow:hidden;text-overflow:ellipsis}
    /* Sem reticências na descrição e no favorito */
    #panelStock td.colDesc, #panelStock th.colDesc{overflow:visible;text-overflow:clip;white-space:normal}
    #panelStock td.colFav, #panelStock th.colFav{overflow:visible;text-overflow:clip}
    #panelStock td.colEan, #panelStock th.colEan{overflow:visible;text-overflow:clip;white-space:nowrap}
    #panelStock td:last-child, #panelStock th:last-child{overflow:visible;text-overflow:clip}
    .cartTable td:nth-child(4), .cartTable th:nth-child(4){overflow:visible;text-overflow:clip;white-space:nowrap}
    .cartChildRow{background:#f8fafc}
    .cartChildRow td:first-child{padding-left:32px;position:relative}
    .cartChildRow td:first-child::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;border-left:2px solid #cbd5e1}
    .childRefWrap{display:flex;align-items:center;gap:8px}
    .childArrow{font-weight:900;color:#0ea5e9}
    .orderChildRow{background:#f8fafc}
    .orderChildRow td:first-child{padding-left:32px;position:relative}
    .orderChildRow td:first-child::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;border-left:2px solid #cbd5e1}

    thead th{position:sticky;top:0;background:#fbfdff;border-bottom:1px solid var(--line);text-align:left;font-size:12px;color:#475569;padding:12px 14px;cursor:pointer;user-select:none}
    tbody td{border-bottom:1px solid var(--line);padding:12px 14px;font-size:13px;vertical-align:top}
    tbody tr:hover{background:#f8fafc}
    tbody tr.stock-green{background:var(--rowGreen)}
    tbody tr.stock-yellow{background:var(--rowYellow)}
    tbody tr.stock-red{background:var(--rowRed)}
    tbody tr.stock-blue{background:var(--rowBlue)}
    .num{text-align:right;font-variant-numeric:tabular-nums}
    .muted{color:var(--muted)}
    .hintLine{font-size:12px}
    .actionsCell{white-space:nowrap;text-align:right}
    .actionsCell .actionWrap{display:inline-flex;align-items:center;gap:8px}
    .xRemoveBtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:900;line-height:1}
    .xRemoveBtn{border:1px solid #fecaca;background:#fff;color:#b91c1c}
    .xRemoveBtn:hover{background:#fef2f2}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#fff}
    .qtyInput{width:86px;text-align:center;font-weight:800}
    .rowBtn{padding:8px 10px;border-radius:999px}

    /* ===== Suggestions (Conta) ===== */
    .acctToggleBtn{width:34px;height:34px;border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-weight:950}
    .acctTblWrap{border:1px solid var(--line);border-radius:14px;overflow:auto}
    .acctTbl{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
    .acctTbl thead th{position:sticky;top:0;background:#fbfdff;border-bottom:1px solid var(--line);font-size:12px;color:#475569;padding:10px 12px;cursor:default}
    .acctTbl tbody td{border-bottom:1px solid var(--line);padding:10px 12px;font-size:13px;vertical-align:middle}
    .acctTbl tbody tr:last-child td{border-bottom:0}
    .acctTbl .num{text-align:right;font-variant-numeric:tabular-nums}
    .acctTbl .act{white-space:nowrap;text-align:right}
    .acctTbl .desc{max-width:none;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.25}
    /* Mobile: evitar overflow na Conta (Sugestões/Avisos/Histórico) */
    .accountGrid, .accountGrid > *{min-width:0}
    #panelAccount .fullRow{max-width:100%;overflow:hidden}

    @media (max-width: 620px){
      /* Conta (Sugestões): manter dentro do card e permitir scroll horizontal (sem esmagar/overlap de colunas) */
      #panelAccount .acctTblWrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
      #panelAccount .acctTbl{min-width:720px;width:720px;table-layout:auto}
      #panelAccount .acctTbl th, #panelAccount .acctTbl td{white-space:nowrap}
      #panelAccount .acctTbl .desc{white-space:normal}
      #panelAccount .acctTbl .act{white-space:nowrap}
    }

    #acctSuggestTop{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .acctTblWrap{max-width:100%}
    .accountGrid h3{font-size:15px}

    /* ===== TOP 3 (Pódio) - Artigos mais encomendados ===== */
    .podiumWrap{
      display:flex;
      flex-direction:column;
      gap:10px;
      max-width:100%;
    }
    .podiumItem{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 14px;
      border:1px solid var(--line);
      border-radius:16px;
      background:#f8fafc;
      min-width:0;
    }
    .podiumBadge{
      flex:0 0 auto;
      font-weight:950;
      font-variant-numeric:tabular-nums;
      color:#cbd5e1;
      letter-spacing:.2px;
      min-width:44px;
      text-align:left;
    }
    .podiumMain{min-width:0;display:flex;flex-direction:column;gap:2px}
    .podiumRef{font-weight:950;letter-spacing:.2px;color:var(--ink);line-height:1.1}
    .podiumDesc{font-size:12.5px;line-height:1.2;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
    .podiumQty{
      margin-left:auto;
      flex:0 0 auto;
      background:rgba(29,78,216,.10);
      color:var(--blue2);
      border-radius:999px;
      padding:6px 10px;
      font-weight:950;
      font-size:12px;
      white-space:nowrap;
    }
    .podiumAct{margin-left:10px;flex:0 0 auto;display:flex;justify-content:flex-end}

.secTitle{margin:0 0 4px;font-weight:800;font-size:15px}
    .secSub{font-size:12px;color:var(--muted);margin:0}

    /* Mobile: tornar sugestões/histórico mais responsivos */
    @media (max-width: 520px){
      /* Histórico: permitir scroll sem forçar min-width */
      #ordersHistoryTableWrap table{min-width:0 !important}
    }


    .suggestTabs{display:flex;gap:8px;flex-wrap:wrap}
    .pillTab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-weight:900;font-size:12px;cursor:pointer}
    .pillTab.active{border-color:#bfdbfe;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
    .suggestList{display:flex;gap:10px;flex-wrap:wrap}
    .suggestChip{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
    .suggestChip .ref{font-weight:950;letter-spacing:.2px}
    .suggestChip .meta{padding:0;margin:0;font-size:11px;color:var(--muted)}
    .suggestChip .openBtn{padding:7px 10px;border-radius:999px}
    .suggestChip .rmBtn{width:34px;height:34px}

    /* ===== Stock inline qty + actions (single line) ===== */
    #panelStock .actionsCell .actionWrap{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap}
    #panelStock .actionsCell .rowBtn{padding:8px 10px;font-size:12px;line-height:1}
    #panelStock .actionsCell .iconBtn{width:40px;height:40px;border-radius:999px;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
    #panelStock .actionsCell .iconBtn.on{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;font-weight:900}
    #panelStock tr.compareOn{outline:2px solid #2563eb;outline-offset:-2px}

    .qtyInline{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:#fff}
    .qtyBtn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:950;font-size:18px;line-height:1}
    .qtyBtn:hover{background:#f8fafc}
    .qtyInp{width:52px;min-width:52px;text-align:center;font-weight:950;color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:6px 6px;font-size:16px}

    @media (max-width: 480px){
      #panelStock .actionsCell .actionWrap{gap:6px}
      #panelStock .actionsCell .rowBtn{font-size:11px;padding:7px 9px}
      #panelStock .actionsCell .iconBtn{width:38px;height:38px;font-size:15px}
      .qtyBtn{width:32px;height:32px;font-size:17px}
      .qtyInp{width:48px;min-width:48px;font-size:16px}
    }


    .panel{display:none}
    .panel.show{display:block}
    /* --- VIEW SWITCH (robusto): garante que só um painel fica visível --- */
    body[data-view="stock"] #panelCart,
    body[data-view="stock"] #panelAccount{display:none !important;}
    body[data-view="cart"] #panelStock,
    body[data-view="cart"] #panelAccount{display:none !important;}
    body[data-view="account"] #panelStock,
    body[data-view="account"] #panelCart{display:none !important;}


    /* Overlay base (mantém o comportamento do JS: .show liga/desliga) */
    .overlay{position:fixed;inset:0;background:rgba(15,23,42,.38);display:none;align-items:center;justify-content:center;padding:18px;z-index:70}
    .overlay.show{display:flex}

    /* Variante: loading dentro do container de Artigos (Stock) */
    .stockCard{position:relative}
    .overlay.overlayInStock{position:absolute;inset:0;background:rgba(15,23,42,.08);backdrop-filter:blur(1.5px);z-index:10;border-radius:inherit}
    .loaderCard{width:min(560px, 92vw);background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}
    .loaderTitle{font-weight:900;margin:0 0 6px}
    .loaderText{margin:0 0 12px;color:var(--muted);font-size:13px}
    .bar{height:10px;background:#eef2ff;border-radius:999px;overflow:hidden;border:1px solid #e5e7eb}
    .bar > div{height:100%;width:35%;background:linear-gradient(90deg,#2563eb,#60a5fa);animation:move 1s infinite ease-in-out}
    @keyframes move{0%{transform:translateX(-60%)}100%{transform:translateX(220%)}}

    #appShell{display:none}

    .authOverlay{
      position:fixed; inset:0; background:rgba(15,23,42,.55);
      display:none; align-items:center; justify-content:center; padding:18px; z-index:90;
    }
    .authOverlay.show{display:flex}

    .authCard{width:min(900px,92vw);background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}
    .authHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
    .authHeader h2{margin:0;font-size:18px}
    .authHeader p{margin:3px 0 0;color:var(--muted);font-size:13px}
    .authSwitch{display:flex;gap:8px}
    .authSwitch .btn{padding:8px 12px;border-radius:999px;font-weight:900}
    .authGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
    .authFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
    .link{color:#2563eb;text-decoration:none;font-weight:800;cursor:pointer}
    .link:hover{text-decoration:underline}
    .pwWrap{position:relative}
    .pwWrap input{padding-right:44px}
    .eyeBtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;color:#64748b}

    /* Tenta remover ícones nativos de revelar password (Edge/alguns browsers) */
    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear{display:none}
    .authErr{margin-top:10px;font-size:13px;color:#b91c1c;font-weight:800}

    .modalOverlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:95}
    .modalOverlay.show{display:flex}
    .modalCard{width:min(720px,92vw);background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);padding:16px}
    .modalTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .modalTop h3{margin:0;font-size:16px}
    .modalTop p{margin:4px 0 0;color:var(--muted);font-size:13px}
    .modalX{border:0;background:transparent;cursor:pointer;font-size:20px;color:#64748b}
    .modalBtns{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
    .infoBox{
      margin-top:10px; padding:10px 12px; border-radius:12px;
      border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; font-size:13px;
    }

    .cartCard{padding:14px}
    .cartTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
    .cartTop h2{margin:0;font-size:16px}
    .cartTop p{margin:4px 0 0;color:var(--muted);font-size:13px}
    .cartSummary{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .cartTable th{cursor:default}
    .miniNote{color:#94a3b8;font-size:12px;margin-top:8px}
    .attachRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .attachPill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#fff}
    .attachPill button{border:0;background:transparent;cursor:pointer;color:#64748b;font-weight:900}

    .accountCard{padding:14px}
    .accountGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
    
    /* Conta: campos editáveis (lápis) */
    .accEditable{display:flex;align-items:center;gap:8px}
    .editMini{border:1px solid var(--blue2);background:var(--blue2);color:#fff;padding:6px 10px;border-radius:10px;min-width:36px}
    .editMini:hover{background:var(--blue);border-color:var(--blue)}
/* Em desktop, algumas secções devem ocupar toda a largura (ex.: Sugestões) */
    .accountGrid .fullRow{grid-column:1 / -1}

    /* Separador visual entre blocos (span total) */
    .accountGrid .hr{grid-column:1 / -1;height:1px;background:var(--line);border:0;margin:0}
    .box{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
    .box h3{margin:0 0 8px;font-size:14px}
    .kv{display:grid;grid-template-columns:140px 1fr;gap:6px 10px;font-size:13px}
    .kv div:nth-child(odd){color:#64748b}
    .emailRow{display:flex;gap:8px;align-items:center}
    .emailRow input{flex:1}
    .chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;margin:6px 6px 0 0;background:#fff}
    .chip button{border:0;background:transparent;cursor:pointer;color:#64748b;font-weight:900}

    .chk{display:flex;align-items:center;gap:8px;margin-bottom:2px}
    .chk input{width:auto}
    .chkTight{margin-top:22px;margin-bottom:0}

    
    .filtersChecksRow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-top:6px;margin-bottom:6px;grid-column:1/6}
    .pageSizeBox{grid-column:6/-1}
    .chkCol{display:flex;flex-direction:column;gap:4px}
    @media (max-width: 620px){ .filtersChecksRow{gap:12px} }
.greenFilterBox{
      border:1px solid var(--line);
      background:#f8fafc;
      border-radius:14px;
      padding:10px 12px;
      display:flex;
      flex-direction:column;
      gap:4px;
      align-self:stretch;
      justify-content:center;
    }

    @media (max-width: 980px){
      .grid{grid-template-columns: 1.7fr 1fr 1fr 1fr; }
      .grid .span2{grid-column:span 2}
      .grid .span4{grid-column:span 4}
      .gridActions{grid-column:1/-1;justify-content:flex-end}
      .authGrid{grid-template-columns:1fr}
      .accountGrid{grid-template-columns:1fr}
      .logo{width:132px;height:78px}
    }
    @media (max-width: 620px){
      /* App-like mobile shell */

      /* Auth header: stack title + switch cleanly on mobile */
      .authHeader{flex-direction:column;align-items:stretch}
      .authSwitch{width:100%}
      .authSwitch .btn{flex:1;justify-content:center}

      body{background:#f1f5f9}
      .wrap{max-width:none;margin:0;padding:0}
      #appShell{min-height:100vh}
      .topbar{position:sticky;top:0;z-index:30;background:rgba(241,245,249,.92);backdrop-filter: blur(10px);
        padding:10px 12px;border-bottom:1px solid var(--line);margin:0;gap:10px}
      .brand{min-width:0;gap:10px}
      .logo{width:96px;height:54px}
      .title h1{font-size:18px}
      .title p{display:none}
      .userBar{width:100%;justify-content:space-between}
      .clientPill{max-width:100%;min-height:46px;display:inline-flex;align-items:center;padding:10px 12px;overflow:visible}
      #clientName{line-height:1.3;padding:3px 0}
      #logoutBtn{padding:10px 12px}

      /* Tabs as bottom navigation */
      .tabs{
        position:fixed;left:0;right:0;bottom:0;z-index:40;
        margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background:rgba(255,255,255,.92);backdrop-filter: blur(10px);
        border-top:1px solid var(--line);
        justify-content:space-between;
      }
      .tab{flex:1;justify-content:center;padding:12px 10px;font-size:13px}
      .tab + .tab{margin-left:10px}
      .badge{font-size:12px}

      /* Give space for bottom tabs */
      .panel{padding:12px 12px calc(90px + env(safe-area-inset-bottom, 0px))}
      .card{border-radius:16px;box-shadow:var(--shadow)}
      .controls{padding:12px}

      /* Filters grid tuning */
      .grid{grid-template-columns:1fr 1fr; gap:10px}
      .grid .span2{grid-column:1/-1}
      label{font-size:12px}
      input,select,textarea{padding:12px 12px;border-radius:14px;font-size:15px}
      #cor{min-width:0}

      /* Actions row: stack nicely */
      .gridActions{grid-column:1/-1;justify-content:flex-end;gap:10px;flex-wrap:wrap}
      .gridActions .btn{flex:1;min-width:140px}
      .gridActions .btnSm{flex:0 0 auto}

      /* Table: make it usable on mobile */
      .tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
      table{min-width:860px}
      thead th, tbody td{padding:10px 12px;font-size:13px}

      /* STOCK (mobile): evitar coluna Descrição a colapsar (texto por letra) */
      #panelStock table{table-layout:auto;min-width:920px}
      #panelStock th.colFav, #panelStock td.colFav{width:52px !important}
      #panelStock th[data-sort="ref"]{width:120px !important}
      #panelStock th.num[data-sort="stock"]{width:70px !important}
      #panelStock th.colEan[data-sort="ean"]{width:130px !important}
      #panelStock th[data-sort="semana"]{width:120px !important}
      #panelStock th:last-child{width:160px !important}
      #panelStock th.colDesc, #panelStock td.colDesc{min-width:260px !important}
      #panelStock td.colDesc .descText{white-space:normal;overflow-wrap:break-word;word-break:normal}
      /* Pager/Meta compact */
      .meta{padding:8px 12px 10px;font-size:12px;gap:10px;flex-wrap:wrap}
      .pager{width:100%;justify-content:space-between}

      /* Stock actions: make buttons app-like and prevent overflow */
      #panelStock .gridActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
      #panelStock .gridActions .btn{width:100%;white-space:normal;line-height:1.1;padding:12px 10px;font-size:14px}
      #panelStock .gridActions .btn.btnPrimary{min-height:44px}

      /* Header: client name pill should not overflow */
      .clientPill{max-width:100%}
      #clientName{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}

      /* Info modal: allow full content on mobile */
      .infoModal{width:min(96vw,520px);max-height:88vh}
      .infoBody{max-height:calc(88vh - 110px);overflow:auto}
      .infoBodyGrid{grid-template-columns:1fr;gap:12px}
      .techLegend{width:100%;margin-top:6px}

      /* Orders history: keep Actions column visible on mobile */
      #ordersHistoryBox table th, #ordersHistoryBox table td{white-space:nowrap}
      #panelAccount .tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

      /* General: long labels wrap instead of spilling */
      .btn{word-break:break-word}



      /* Auth (mobile): align login/reg buttons */
      .authHeader{flex-direction:column;align-items:stretch}
      .authSwitch{width:100%}
      .authSwitch .btn{flex:1;justify-content:center}

      /* Topbar: avoid client name being visually cut */
      .clientPill{min-height:38px}
      #clientName{line-height:1.2;padding-top:1px}

      /* Em mobile, alguns browsers mostram um ícone nativo de revelar password.
         Para evitar duplicação, escondemos o nosso botão custom no mobile. */
      .pwWrap .eyeBtn{display:none}

    }

    @media (max-width: 420px){
      .tab{font-size:12px;padding:11px 8px}
      .grid{grid-template-columns:1fr}
      .gridActions .btn{min-width:0}
      table{min-width:780px}
    }
    /* LOGIN watermark */
    .authOverlay::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:url("https://i.ibb.co/Y7qM44q1/LOGO-BANHOAZIS-PRETO-AZUL-AQUABATH.png");
      background-repeat:no-repeat;
      background-position:center;
      background-size:70vw auto;
      opacity:0.08;
      pointer-events:none;
    }
  
  /* Info modal + icon */
  .descCell{display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:8px;min-width:0}
  .descText{min-width:0;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.25;overflow-wrap:break-word;word-break:normal}
  .infoBtn{align-self:start}
  .infoBtn{flex:0 0 auto;width:18px;height:18px;border-radius:999px;border:1px solid #cbd5e1;background:#eef2ff;color:#1d4ed8;font-weight:800;font-size:12px;line-height:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .infoBtn:hover{background:#e0e7ff}
  .infoOverlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:18px}
  .conjOverlay{z-index:9998}
  .infoOverlay.open{display:flex}
  .infoModal{width:min(860px,94vw);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(2,6,23,.35);overflow:hidden;border:1px solid #e5e7eb}
  .infoModalHeader{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8fafc;border-bottom:1px solid #e5e7eb}
  .infoModalHeader h3{margin:0;font-size:15px;color:#0f172a}
  .infoClose{border:0;background:transparent;font-size:22px;line-height:1;color:#475569;cursor:pointer;padding:4px 8px}
  .infoBody{padding:14px 16px}
  .infoGrid{display:grid;grid-template-columns:160px 1fr;gap:8px 12px;font-size:13px}
    .infoBodyGrid{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
  .infoLeft{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;min-width:0}
  .infoPairs{display:grid;grid-template-columns:160px 1fr;gap:8px 12px;align-items:start;min-width:0}
  .infoModules{min-width:0}
  .infoModules [data-info-compostos="1"]{margin-top:0}
  @media (max-width: 860px){
    .infoBodyGrid{grid-template-columns:1fr;}
    .infoLeft{grid-template-columns:1fr;}
    .techWrap{order:3}
  }

  .techWrap{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px 12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .techLegend{margin-top:8px;font-size:12px;color:#64748b;display:grid;gap:4px;width:100%}
  .techLegend .k{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;border-radius:6px;background:#eef2ff;color:#1d4ed8;font-weight:900;font-size:12px;margin-right:6px}
.infoLabel{color:#64748b}
  .infoValue{color:#0f172a;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .infoFooter{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid #e5e7eb;background:#fff}


    /* ===== Header icon actions (requested) ===== */
    .topActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .iconBtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative}
    .iconBtn:hover{background:#f8fafc}
    .iconBtn svg{width:20px;height:20px;display:block}
    .iconBtn.active{background:#eff6ff;border-color:#bfdbfe;box-shadow:0 0 0 4px rgba(37,99,235,.10);color:#1d4ed8}
    .iconBadge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:#0f172a;color:#fff;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border:2px solid #fff}
    .iconBadge.hasItems{background:#dbeafe;color:#1d4ed8;border-color:#fff}

    /* ===== ACCOUNT: tabelas compactas (Sugestoes / Historico) ===== */
    .acctTableWrap{border:1px solid var(--line);border-radius:14px;overflow:auto;background:#fff}
    .acctTable{width:100%;border-collapse:separate;border-spacing:0;min-width:620px}
    .acctTable th{position:sticky;top:0;background:#f8fafc;font-size:12px;color:#334155;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
    .acctTable td{padding:10px 12px;border-bottom:1px solid #eef2f7;vertical-align:middle}
    .acctTable tr:last-child td{border-bottom:none}
    .acctToggleBtn{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
    .acctXBtn{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:900}

    /* ===== Footer (requested) ===== */
    .footer{display:none;margin-top:18px;padding:18px 0;border-top:1px solid var(--line);color:var(--text)}
    .footerInner{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;align-items:start;padding:0 18px}
    .footer h3{margin:0 0 8px;font-size:14px}
    .footer p{margin:0 0 6px;color:var(--muted);font-size:13px;line-height:1.4}
    .hours{width:100%;border-collapse:collapse;font-size:13px}
    .hours td{padding:4px 0;color:#334155;border-bottom:1px dashed #e5e7eb}
    .hours td:first-child{color:#64748b;width:120px}
    .footer a{color:#2563eb;text-decoration:none;font-weight:800}
    .footer a:hover{text-decoration:underline}

    @media (max-width: 980px){
      .footerInner{grid-template-columns:1fr}
    }

    /* ===== SUGESTOES PESQUISA (ponto 5) ===== */
    .suggestWrap{position:relative}
    .suggestBox{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-top:6px;max-height:260px;overflow:auto}
    .suggestItem{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
    .suggestItem:hover,.suggestItem.active{background:rgba(37,99,235,.08)}
    .suggestMain{min-width:0;flex:1}
    .suggestTitle{font-weight:800;font-size:13px;line-height:1.2}
    .suggestMeta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .suggestTag{font-size:11px;border:1px solid var(--line);padding:2px 8px;border-radius:999px;color:var(--muted);flex:0 0 auto}
    .suggestEmpty{padding:10px 12px;color:var(--muted);font-size:13px}

    
  
/* === MOBILE FIXES: prevent horizontal overflow in footer (horário) === */
body{overflow-x:hidden}
.footer, .footer *{max-width:100%}
.hours{width:100%; table-layout:fixed}
.hours td{white-space:normal; word-break:break-word}
.hours td:first-child{width:auto}

/* Reduce dashed line visual weight on small screens */
@media (max-width: 620px){
  .hours td{border-bottom:1px dashed #e5e7eb}
}


/* mobile-hours-fix */
@media (max-width: 768px){
  .horario, .hours, .schedule {
    border-style: dashed;
    border-width: 1px;
  }
  .horario hr, .hours hr, .schedule hr {
    border-top: 1px dashed rgba(0,0,0,.25);
    margin: 4px 0;
  }
}


/* === UX: Logout afastado dos ícones (desktop+mobile) === */
#logoutBtn{margin-left:12px}

/* === FAVORITOS (UI) === */
.favBtn{
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;line-height:1;font-size:16px;
}
.favBtn:hover{background:#f8fafc}
.favBtn.on{background:#fff7ed;border-color:#fed7aa}
.favBtn .star{transform:translateY(-1px)}

/* === MOBILE: reduzir “tracejado” do horário (linhas muito grandes) === */
@media (max-width: 620px){
  .hours td{
    border-bottom:1px dotted rgba(148,163,184,.65);
    padding:3px 0;
  }
}


/* === MOBILE: HORÁRIO sem caixa e sem overflow === */
@media (max-width: 620px){
  .horario, .hours, .schedule{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .footer{overflow-x:hidden}
  .hours{
    width:100% !important;
    max-width:100% !important;
    table-layout:fixed !important;
    border-collapse:collapse !important;
  }
  .hours td{
    border-bottom:1px dotted rgba(148,163,184,.65) !important;
    padding:4px 6px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* === Logout sempre à direita === */
.top-actions{display:flex;align-items:center;gap:10px}
#logoutBtn{margin-left:auto !important}


/* === MOBILE: HORÁRIO com 2 colunas visíveis e sem overflow === */
@media (max-width: 620px){
  .footer{overflow-x:hidden}
  .hours{width:100% !important;max-width:100% !important;table-layout:fixed !important;border-collapse:collapse !important}
  .hours tr{max-width:100%}
  .hours td{padding:4px 6px !important;border-bottom:1px dotted rgba(148,163,184,.65) !important;vertical-align:top}
  .hours td:nth-child(1){
    width:34% !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hours td:nth-child(2){
    width:66% !important;
    white-space:normal !important;
    overflow-wrap:break-word;
    word-break:normal;
  }
}


/* === FIX: topActions layout (logout hard-right) === */
.topActions{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
#logoutBtn{margin-left:auto !important;}
/* === FIX: hours typography consistency on mobile === */
@media (max-width: 640px){
  .infoFooter .hoursTable td{font-size:12px;font-weight:600;color:var(--muted);line-height:1.2;}
  .infoFooter .hoursTable td:nth-child(2){font:inherit;}
}




/* === FIX FINAL: HORÁRIO (dias e horas) com o MESMO tamanho/peso em todos os dispositivos === */
.hours td,
.hours td:first-child{
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  line-height: 1.4 !important;
}



    /* ===== INLINE QTY (Stock -> depois de adicionar) ===== */
    .qtyInline{display:inline-flex;align-items:center;gap:6px;margin-left:10px}
    .qtyBtn{width:30px;height:30px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;font-weight:900;line-height:1}
    .qtyInp{width:44px;height:30px;border-radius:10px;border:1px solid var(--line);text-align:center;font-weight:800}
    .iconBtn{width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
    .iconBtn:hover{background:rgba(37,99,235,.08)}
    .iconBtn.on{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.10)}
    .actionWrap{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
    .comparePill{display:inline-flex;align-items:center;gap:8px}



/* =========================
   PATCH: Ações em 2 linhas (evita sobreposição)
   ========================= */
td.actionsCell{ overflow:visible; }
td.actionsCell .actionWrap2{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  max-width:100%;
}
td.actionsCell .actionTop{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
}
td.actionsCell .actionBottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
}
td.actionsCell .rowBtn{max-width:none;white-space:nowrap;overflow:visible;text-overflow:clip}
/* === Stock: botão adicionar loading imediato === */
button.loading{opacity:.75; cursor:progress;}


/* Compare state stronger */
tr.compareOn{ outline:2px solid rgba(37,99,235,.35); outline-offset:-2px; }
.iconBtn.on{ border-color: rgba(37,99,235,.65) !important; background: rgba(37,99,235,.12) !important; }

/* === AVISOS: botão do sino em destaque quando pendente === */
.iconBtn.alertOn{border-color:#f59e0b;background:#fffbeb;color:#92400e;font-weight:900}

/* === Modal info (conjuntos): linha de composto selecionada === */
#infoModules tr.compRow{cursor:pointer;}
#infoModules tr.compSelected{outline:2px solid rgba(37,99,235,.45); outline-offset:-2px; background: rgba(37,99,235,.06);}


/* === MTO: remover sino (artigos por encomenda / MTO) === */
tr.stock-blue button[data-alert]{
  display:none !important;
}

/* === MTO: remover sino (artigos por encomenda / MTO) === */
tr.stock-blue .iconBtn.alertOn,
tr.stock-blue .iconBtn.alert{
  display:none !important;
}

.iconBtn.alertOn{border-color:#f59e0b;background:#fffbeb;color:#92400e;font-weight:900}

/* === Modal info (conjuntos): linha de composto selecionada === */
#infoModules tr.compRow{cursor:pointer;}
#infoModules tr.compSelected{outline:2px solid rgba(37,99,235,.45); outline-offset:-2px; background: rgba(37,99,235,.06);}




/* ===== MOBILE: botão para abrir/fechar filtros ===== */
.mobileFilterBar{
  position:fixed;
  left:0; right:0;
  top: calc(var(--topbarH) + var(--filtersStickyGap));
  z-index: 55;
  background: rgba(245,247,251,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 10px 0 8px;
}
.filtersCollapsible{display:block}
@media (max-width: 620px){
  .mobileFilterBar{display:flex}
  .filtersCollapsible{display:none}
  .filtersCollapsible.open{display:block}
}


/* ===== MOBILE: filtros como modal (scroll interno + bloqueio do fundo) ===== */
.filtersModal{display:none}
body.filtersOpen{overflow:hidden; touch-action:none;}
body.filtersOpen #appShell{touch-action:none;}
.filtersModal{
  position:fixed; inset:0;
  z-index: 80;
  display:none;
}
.filtersModal.open{display:block;}
.filtersModalBackdrop{
  position:absolute; inset:0;
  background: rgba(15,23,42,.35);
}
.filtersModalSheet{
  position:absolute;
  left:12px; right:12px;
  top: calc(var(--topbarH,72px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); /* acima da barra tabs mobile */
  background: rgba(255,255,255,.98);
  border:1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(2,8,23,.22);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.filtersModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.filtersModalTitle{font-weight:900;font-size:14px;color:#0f172a}
.filtersModalClose{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:12px;
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
  cursor:pointer;
}
.filtersModalBody{
  padding:12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

/* Mobile: mostrar só o ícone do botão de filtros e esconder família rápida/labels */
@media (max-width: 620px){
  .filtersHeadRow{justify-content:flex-end; padding:10px 12px 10px;}
  .filtersHeadRow .famQuick{display:none !important;}

  /* Botão Filtros (ícone + texto por baixo) */
  #filterToggleBtn{
    width:72px;
    min-height:70px;
    padding:6px 4px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  #filterToggleBtn .flabel{
    display:block !important;
    font-size:12px;
    line-height:1;
  }
  #filterToggleBtn .ficon svg{width:22px;height:22px;}

  /* no mobile, o filtersBox não deve ocupar espaço na página (vai para modal) */
  .controls{display:none !important;}

  /* Inputs maiores dentro do modal */
  .filtersModalBody .grid{grid-template-columns:1fr !important;}
  .filtersModalBody input,
  .filtersModalBody select{
    min-height:46px !important;
    font-size:16px !important;
  }

  /* Botões no filtro: texto sempre horizontal */
  .filtersModalBody .gridActions{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .filtersModalBody .gridActions .btn{
    width:100% !important;
    white-space:nowrap !important;
    word-break:normal !important;
  }
}

/* ===== FOOTER: alinhar com o container (desktop) ===== */
.footer{width:100%;padding-left:18px;padding-right:18px;box-sizing:border-box}
.footerInner{width:100%;max-width:1600px}

/* ===== CONTA (mobile): títulos/subtítulos consistentes ===== */
@media (max-width: 620px){
  #panelAccount .box h3,
  #panelAccount .secTitle{font-size:15px !important;font-weight:800 !important;line-height:1.25 !important;margin:0 0 6px !important}
  #panelAccount .secSub{font-size:12px !important;line-height:1.35 !important;color:var(--muted) !important;margin:0 !important}
}


  /* seleção de composto no modal */
  .compSelected{ outline:2px solid var(--brand); outline-offset:-2px; }

/* Filtros: colapsável por defeito (desktop + mobile) */
.mobileFilterBar{display:flex;justify-content:flex-start;gap:10px;}
#filterToggleBtn{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:86px;min-height:62px;gap:6px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--card);color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
#filterToggleBtn .flabel{font-size:12px;line-height:1}
#filterToggleBtn .ficon{display:inline-flex}

#filterToggleBtn .filterBadge{
  position:absolute;
  top:6px;
  right:8px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#dc2626; /* vermelho */
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:none;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* ===== Filtro rápido por família (sticky/fixo abaixo do cabeçalho) ===== */
:root{ --topbarH: 72px; --filtersStickyGap: 8px; }

/* barra fixa (full-width) */
.mobileFilterBar{
  position:fixed;
  left:0; right:0;
  top: calc(var(--topbarH) + var(--filtersStickyGap));
  z-index: 55;
  background: rgba(245,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding: 10px 0 8px;
}

/* garante alinhamento com o container (.wrap) */
#mobileFilterSpacer{height:0}

.mobileFilterInner{
  max-width:1600px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:12px;
}


.famQuick{
  display:flex;
  align-items:flex-start;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  flex:1 1 auto;
  min-width:0;
  padding: 2px 2px 0;
}
.famQuick::-webkit-scrollbar{ display:none; }

/* Desktop: se não cabe, quebra em nova linha (sem cortar) */
@media (min-width: 621px){
  .famQuick{ flex-wrap:wrap; overflow-x:visible; overflow-y:visible; }
}

/* Mobile: manter como no original (sem “menu” de imagens/ícones) */
@media (max-width: 620px){
  .famQuick{ display:none !important; }
  .mobileFilterInner{ justify-content:flex-end; }
}

/* estilo semelhante ao menu por ícones (como a tua imagem) */
.famBtn{
  flex:0 0 auto;
  width:84px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  background:transparent;
  color:#0f172a;
  cursor:pointer;
  user-select:none;
  padding:6px 4px 8px;
  border-radius:12px;
}
.famBtn .ficon{display:inline-flex; opacity:.95; color:#6b7280}

.famBtn .famPng{
  width:28px;height:28px;
  display:block;
  object-fit:contain;
  /* tornar monocromático cinza (sem precisar SVG) */
  filter: grayscale(1) brightness(0.45);
  opacity:.92;
}
.famBtn.on .famPng{
  /* azul ativo (aprox. #2563eb) */
  filter: invert(27%) sepia(94%) saturate(1820%) hue-rotate(210deg) brightness(95%) contrast(98%);
  opacity:1;
}

.famBtn .flabel{font-size:12px;line-height:1.1;white-space:nowrap;font-weight:700;color:#0f172a}
.famBtn:hover .ficon{opacity:1; color:#374151}
.famBtn.on{
  background:rgba(37,99,235,.06);
}
.famBtn.on .ficon, .famBtn.on .flabel{ color: var(--blue2); }
.famBtn.on::after{
  content:"";
  width:28px;
  height:3px;
  border-radius:999px;
  background: var(--blue2);
  margin-top:4px;
}

.filtersCollapsible{display:none}
.filtersCollapsible.open{display:block}


    .accInput{
      width:100%;
      min-height:40px;
      padding:10px 12px;
      border:1px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      color:#0f172a;
      outline:none;
    }
    .accInput:focus{ border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.12); }

  
    /* Permissão: ocultar coluna Stock (tabela stock + carrinho + modais) */
    body.hideStockCol .colStock{display:none !important;}

/* OVERRIDE: mobileFilterBar fixed (garante fixo mesmo com CSS duplicado) */
.mobileFilterBar{position:fixed !important;left:0;right:0;z-index:55 !important;margin:0 !important;}

/* ===== HOTFIX MOBILE FILTROS (modal) ===== */
@media (max-width: 620px){
  /* Grid dos filtros: 1 coluna dentro do modal (sem “end alignment” que causa sobreposições visuais) */
  .filtersModal.open .filtersModalBody .grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .filtersModal.open .filtersModalBody .grid > *{ min-width: 0; }
  .filtersModal.open .filtersModalBody .grid .span2,
  .filtersModal.open .filtersModalBody .grid .span3,
  .filtersModal.open .filtersModalBody .grid .span4{ grid-column: 1 / -1 !important; }

  /* Inputs confortáveis (NÃO aplicar a checkboxes) */
  .filtersModal.open .filtersModalBody input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
  .filtersModal.open .filtersModalBody select,
  .filtersModal.open .filtersModalBody textarea{
    width: 100% !important;
    min-height: 50px !important;
    font-size: 16px !important;
  }
  .filtersModal.open .filtersModalBody label{ font-size: 13px !important; }

  /* Checks (Conjuntos/Verde/Favoritos): em coluna, compactos e alinhados */
  .filtersModal.open .filtersModalBody .filtersChecksRow{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .filtersModal.open .filtersModalBody .chkCol{
    border:1px solid rgba(15,23,42,.10);
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
  }
  .filtersModal.open .filtersModalBody .chk{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .filtersModal.open .filtersModalBody input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    min-height:0 !important;
    margin:0 !important;
    accent-color: var(--blue);
    flex:0 0 auto;
  }
  .filtersModal.open .filtersModalBody .chk label{
    margin:0 !important;
    font-size:14px !important;
    line-height:1.2 !important;
  }
  .filtersModal.open .filtersModalBody .chkCol .muted{
    margin-top:6px;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  /* Ações: botões a 100%, mais altos, texto sempre dentro */
  .filtersModal.open .filtersModalBody .gridActions{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .filtersModal.open .filtersModalBody .gridActions .btn{
    width:100% !important;
    max-width:none !important;
    min-height:56px !important;
    padding:14px 16px !important;
    line-height:1.15 !important;
    font-size:16px !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    text-align:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* --- FIX: grelha de campos no modal (evita sobreposições iOS) --- */
  .filtersModal.open #filtersBox .grid{
    grid-template-columns: 1fr !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .filtersModal.open #filtersBox .span2{ grid-column: 1 / -1 !important; }
  .filtersModal.open #filtersBox .grid > div{ min-width:0 !important; }
  .filtersModal.open #filtersBox label{
    display:block !important;
    margin:0 0 6px 0 !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  .filtersModal.open #filtersBox input,
  .filtersModal.open #filtersBox select{
    width:100% !important;
  }

  /* Inputs de texto confortáveis (sem afetar checkboxes/radios) */
  .filtersModal.open #filtersBox input:not([type="checkbox"]):not([type="radio"]),
  .filtersModal.open #filtersBox select,
  .filtersModal.open #filtersBox textarea{
    min-height:48px !important;
    font-size:16px !important;
  }

  /* Checkboxes compactas e alinhadas */
  .filtersModal.open #filtersBox input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    min-height:0 !important;
    flex:0 0 22px !important;
  }
  .filtersModal.open #filtersBox .filtersChecksRow{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:12px !important;
    margin-top:6px !important;
  }
  .filtersModal.open #filtersBox .chkCol{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }
  .filtersModal.open #filtersBox .chkCol label{
    margin:0 !important;
  }
  /* SUPER FIX (mobile/modal): força layout em coluna para evitar sobreposições/overflows no iOS */
  .filtersModal.open #filtersBox .grid{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .filtersModal.open #filtersBox .grid > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .filtersModal.open #filtersBox .filtersChecksRow{
    margin:0 !important;
  }
  .filtersModal.open #filtersBox .pageSizeBox select{
    width:100% !important;
  }


}

/* ======= SPLIT: next block ======= */

/* ===== MOBILE FILTERS HARD FIX (v4) ===== */
@media (max-width: 620px) {

  /* force single column layout inside modal */
  .filtersModalSheet .filtersGrid,
  .filtersModalSheet .grid,
  .filtersModalSheet .controls,
  .filtersModalSheet .filtersRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* labels must be block and above inputs */
  .filtersModalSheet label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
  }

  /* text inputs/selects full width */
  .filtersModalSheet input[type="text"],
  .filtersModalSheet input[type="number"],
  .filtersModalSheet select {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* logical fields (checkbox rows) compact and aligned */
  .filtersModalSheet .logical,
  .filtersModalSheet .checkboxRow {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .filtersModalSheet input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  /* buttons: always taller than text */
  .filtersModalSheet button,
  .filtersModalSheet .btn {
    min-height: 56px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}


/* ===== BAZI CHAT ===== */
#baziFab{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  border:0; border-radius:999px; padding:12px 14px;
  cursor:pointer; font:800 14px ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background: var(--blue); color:#fff;
  box-shadow:0 10px 25px rgba(2,8,23,.18);
}
#baziFab:active{transform:scale(.98)}
#baziPanel{
  position:fixed; right:18px; bottom:78px; z-index:9999;
  width:min(380px, calc(100vw - 36px));
  height:520px;
  display:none; flex-direction:column;
  border-radius:16px; overflow:hidden;
  box-shadow:0 18px 45px rgba(2,8,23,.22);
  background:#0b1220; color:#e8eefc;
}
#baziHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 12px 14px;
  background:linear-gradient(135deg,#12233f,#0b1220);
}
#baziTitle{display:flex; gap:10px; align-items:center}
#baziDot{width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.15)}
#baziHeader button{
  border:0; background:transparent; color:#cfe0ff; cursor:pointer;
  font:800 13px ui-sans-serif,system-ui; padding:6px 8px; border-radius:10px;
}
#baziHeader button:hover{background:rgba(255,255,255,.08)}
#baziBody{flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.baziMsg{
  max-width:85%; padding:10px 12px; border-radius:14px; line-height:1.25;
  font:600 13.5px ui-sans-serif,system-ui; white-space:pre-wrap;
}
.baziUser{align-self:flex-end; background:#1f4fff; color:#fff; border-bottom-right-radius:6px}
.baziBot{align-self:flex-start; background:rgba(255,255,255,.08); color:#e8eefc; border-bottom-left-radius:6px}
.baziMeta{opacity:.7; font:700 11px ui-sans-serif,system-ui; margin-top:2px}
#baziFooter{display:flex; gap:10px; padding:12px; background:#08101d; border-top:1px solid rgba(255,255,255,.08)}
#baziInput{
  flex:1; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#e8eefc;
  border-radius:12px; padding:10px 12px; font:600 13.5px ui-sans-serif,system-ui; outline:none;
}
#baziSend{
  border:0; border-radius:12px; padding:10px 12px;
  cursor:pointer; font:900 13.5px ui-sans-serif,system-ui;
  background:#22c55e; color:#06120b;
}
#baziSend:disabled{opacity:.55; cursor:not-allowed}
#baziHint{padding:0 14px 12px; color:rgba(232,238,252,.72); font:600 12px ui-sans-serif,system-ui}

/* mobile: sobe para não tapar navegação */
@media (max-width: 520px){
  #baziPanel{height: min(70vh, 560px);}
}

/* FIX: evitar sobreposição dos filtros (famílias) */
.filtersHeadRow .famQuick{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
}

.famBtn{
  margin: 0 !important;
}




/* ===== UI OVERHAUL v3 (Enterprise layout) — visual only, no functional changes ===== */
:root{
  --appBg1:#f6f8fc;
  --appBg2:#eef2ff;
  --surface: rgba(255,255,255,.78);
  --surface2: rgba(255,255,255,.92);
  --ink:#0b1220;
  --ink2:#0f172a;
  --muted2:#64748b;
  --border: rgba(15,23,42,.10);
  --shadowLg: 0 18px 45px rgba(2,8,23,.12);
  --shadowMd: 0 10px 26px rgba(2,8,23,.10);
  --ring: 0 0 0 4px rgba(37,99,235,.16);
}

/* App background */
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--appBg2), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, #e0f2fe, transparent 55%),
    linear-gradient(180deg, var(--appBg1), #ffffff 42%, #f7fafc);
}

/* Layout padding to make space for sidebar */
#appShell{
  min-height:100vh;
  padding:18px 18px 18px 132px; /* room for fixed sidenav */
}

/* Fixed side navigation */
.sideNav{
  position:fixed;
  left:18px;
  top:18px;
  bottom:18px;
  width:98px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow: var(--shadowLg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index:70;
  overflow:hidden;
}
.sideNavInner{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:12px;
  gap:10px;
}
.sideBrand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 0 4px;
}
.sideBrandMark{
  width:58px;
  height:58px;
  object-fit:contain;
  filter: drop-shadow(0 6px 18px rgba(2,8,23,.10));
}

.sideNavActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:6px;
  flex:1;
}
.navItem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.navLabel{
  font-size:11px;
  color: rgba(15,23,42,.68);
  letter-spacing:.2px;
}

/* Make nav buttons premium */
.sideNav .iconBtn{
  width:64px;
  height:64px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 24px rgba(2,8,23,.10);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.sideNav .iconBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,8,23,.14);
  background: rgba(255,255,255,.92);
  border-color: rgba(37,99,235,.25);
}
.sideNav .iconBtn.active{
  background: linear-gradient(180deg, rgba(37,99,235,.16), rgba(37,99,235,.08));
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 16px 36px rgba(37,99,235,.18);
}
.sideNav .iconBtn svg{
  width:24px;
  height:24px;
}

/* Logout button in sidebar bottom */
.sideNavBottom{
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid rgba(15,23,42,.08);
}
.sideNavBottom #logoutBtn{
  width:100%;
  border-radius:16px;
  padding:10px 10px;
  font-size:12px;
  justify-content:center;
  box-shadow:none;
}

/* Topbar becomes a premium app header */
.topbar{
  position:sticky;
  top:18px;
  z-index:40;
  background: var(--surface2);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  box-shadow: var(--shadowMd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding:14px 16px;
}

/* Brand title tighter and more SaaS-like */
.topbar .brand{
  gap:14px;
}
.topbar .logo{
  width:72px;
  height:72px;
  border-radius:18px;
  background: rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(2,8,23,.10);
  padding:8px;
}
.topbar .title h1{
  font-size:20px;
  letter-spacing:-.3px;
  color: var(--ink2);
}
.topbar .title p{
  font-size:12.5px;
  color: rgba(15,23,42,.62);
  max-width: 62ch;
}

/* User pill more premium */
.clientPill{
  background: rgba(248,250,252,.9);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 20px rgba(2,8,23,.08);
}

/* Cards: cleaner borders and consistent radius */
.card, .panel .card{
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:22px !important;
  box-shadow: var(--shadowMd) !important;
}

/* Filters dock: more structured */
.filtersDock{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Inputs: SaaS look */
input, select, textarea{
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  background: rgba(255,255,255,.90) !important;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none !important;
  box-shadow: var(--ring) !important;
  border-color: rgba(37,99,235,.45) !important;
}

/* Buttons: modern */
.btn{
  border-radius:14px !important;
  box-shadow: 0 10px 22px rgba(2,8,23,.10);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(2,8,23,.14); }
.btn:active{ transform: translateY(0px); filter: brightness(.98); }

/* Tables: premium header + hover */
table{
  border-radius:18px;
  overflow:hidden;
}
thead th{
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.86)) !important;
  border-bottom:1px solid rgba(15,23,42,.10) !important;
}
tbody tr:hover{
  filter: brightness(0.99);
}

/* Keep stock row colors intact (do not override rowGreen/Yellow/Red/Blue logic) */

/* Mobile: convert sidebar to bottom bar */
@media (max-width: 900px){
  #appShell{ padding:12px 12px 96px; }
  .sideNav{
    left:12px; right:12px;
    top:auto; bottom:12px;
    width:auto; height:76px;
    border-radius:20px;
  }
  .sideNavInner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
  }
  .sideBrand{ display:none; }
  .sideNavActions{
    flex-direction:row;
    gap:10px;
    padding:0;
    flex:1;
    justify-content:space-around;
  }
  .navItem{ gap:0; }
  .navLabel{ display:none; }
  .sideNavBottom{ display:none; }
  .sideNav .iconBtn{
    width:56px;
    height:56px;
    border-radius:16px;
  }
  .topbar{ top:12px; }
}


/* === UI Overhaul v4: labels, famQuick fix, drawer modals, header refinement (no JS changes) === */

/* Renaming in UI handled in HTML; keep any legacy mention harmless */

/* Fix overlap in icon family quick filter */
.famBtn{
  width:96px;
  padding:8px 6px 10px;
  gap:7px;
}
.famBtn .flabel{
  white-space:normal;
  text-align:center;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height:28px;
  max-width:100%;
}

/* Slightly larger icons + better balance */
.famBtn .famPng{ width:30px; height:30px; }

/* Drawer-style modals (right side panel) */
.drawerOverlay{
  /* IMPORTANT: do NOT force display here.
     The original portal controls modal visibility via CSS/JS (usually display:none until opened).
     Forcing display:flex !important would keep the overlay permanently visible and block the UI.
  */
  align-items:stretch !important;
  justify-content:flex-end !important;
  padding:0 !important;
}
.drawerOverlay .drawerCard{
  height:100vh;
  max-height:100vh !important;
  width:min(760px, 96vw) !important;
  margin:0 !important;
  border-radius:0 !important;
  border-left:1px solid rgba(15,23,42,.10) !important;
  box-shadow: -24px 0 60px rgba(2,8,23,.18) !important;
  animation: drawerIn .18s ease-out;
}
@keyframes drawerIn{
  from{ transform: translateX(18px); opacity:.86; }
  to{ transform: translateX(0); opacity:1; }
}

/* Improve the overlay/backdrop look */
.drawerOverlay{
  background: rgba(2,8,23,.46) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Bottom-sheet on mobile */
@media (max-width: 820px){
  .drawerOverlay{
    align-items:flex-end !important;
    justify-content:center !important;
  }
  .drawerOverlay .drawerCard{
    width:100vw !important;
    height:min(92vh, 100vh) !important;
    border-radius:22px 22px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(15,23,42,.10) !important;
    box-shadow: 0 -24px 60px rgba(2,8,23,.18) !important;
    animation: sheetIn .18s ease-out;
  }
  @keyframes sheetIn{
    from{ transform: translateY(18px); opacity:.86; }
    to{ transform: translateY(0); opacity:1; }
  }
}

/* Header refinement: a bit more elegant and less “bulky” */
.topbar{
  top:14px;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.86));
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 42px rgba(2,8,23,.10);
}
.topbar .logo{
  width:60px;
  height:60px;
  border-radius:16px;
  padding:8px;
}
.topbar .title h1{
  font-size:19px;
}
.topbar .title p{
  max-width: 56ch;
}
.clientPill{
  border-radius:16px;
  padding:10px 12px;
}

/* Make close buttons look more premium */
.modalX, .infoClose, .filtersModalClose{
  width:38px; height:38px;
  border-radius:12px;
  background: rgba(248,250,252,.92);
  border:1px solid rgba(15,23,42,.10);
}
.modalX:hover, .infoClose:hover, .filtersModalClose:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(2,8,23,.10);
}


/* === Enterprise Header v5 === */
.topbarEnterprise{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbarEnterprise .topbarLeft{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 520px}
.topbarEnterprise .topbarRight{display:flex;align-items:flex-start;justify-content:flex-end;flex:0 0 auto}
.topbarEnterprise .topbarRightInner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.topbarEnterprise .titleRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.envChip{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.2px;
  background:rgba(37,99,235,.10);color:#1d4ed8;border:1px solid rgba(37,99,235,.25)}
.topbarMeta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(15,23,42,.62)}
.metaChip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.85);font-weight:900;color:rgba(15,23,42,.78)}
.metaChipSoft{background:rgba(248,250,252,.9)}
.metaSep{opacity:.7}
.iconMiniBtn{width:38px;height:38px;border-radius:14px;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.90);
  box-shadow:0 10px 20px rgba(2,8,23,.08);
  cursor:pointer;font-weight:1000;color:#0f172a;display:inline-flex;align-items:center;justify-content:center}
.iconMiniBtn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(2,8,23,.12)}
@media (max-width: 860px){
  .topbarEnterprise .topbarLeft{flex-basis:100%}
}

/* === Info Modal v5: sections + richer right panel === */
.infoModalHeader{background:linear-gradient(180deg,#fbfdff,#f6f8fb)}
.infoHeadLeft{display:flex;flex-direction:column;gap:6px;min-width:0}
.modalChips{display:flex;gap:8px;flex-wrap:wrap}
.modalChips:empty{display:none}
.modalChip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.92);font-size:12px;font-weight:900;color:rgba(15,23,42,.78)}
.infoSection{border:1px solid rgba(15,23,42,.10);border-radius:18px;background:rgba(255,255,255,.92);
  box-shadow:0 12px 26px rgba(2,8,23,.06);padding:12px 12px}
.infoSectionTitle{font-size:12px;font-weight:1000;letter-spacing:.2px;color:#334155;margin:0 0 10px;
  display:flex;align-items:center;gap:8px}
.infoSectionTitle::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(37,99,235,.35)}
.infoPairs{gap:6px 10px}
.infoPairs .infoLabel, .infoPairs .infoValue{
  padding:8px 10px;border-radius:12px;border:1px solid rgba(15,23,42,.06);
  background:rgba(248,250,252,.9)
}
.infoPairs .infoValue{background:rgba(255,255,255,.92)}
.infoPairs .infoValue{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}
.techWrap{
  background:
    radial-gradient(1200px 240px at 20% -20%, rgba(37,99,235,.16), transparent 55%),
    radial-gradient(900px 200px at 110% 10%, rgba(14,165,233,.14), transparent 45%),
    rgba(248,250,252,.88);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 16px 36px rgba(2,8,23,.08);
}
.techWrap svg{filter: drop-shadow(0 10px 18px rgba(2,8,23,.10));}
.infoFooter{background:linear-gradient(180deg,#ffffff, #fbfdff)}

/* === Conjuntos Modal v5: cleaner table + hint row === */
.conjBody{display:flex;flex-direction:column;gap:12px}
.conjIntro{display:flex;flex-direction:column;gap:2px}
.conjIntroTitle{font-weight:1000;color:#0f172a}
.conjIntroSub{font-size:12.5px;color:rgba(15,23,42,.62)}
.conjTableWrap{border:1px solid rgba(15,23,42,.10);border-radius:18px;overflow:auto;background:rgba(255,255,255,.95);
  box-shadow:0 14px 32px rgba(2,8,23,.08)}
.conjTable{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.conjTable thead th{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#fbfdff,#f6f8fb);
  color:#334155;font-size:12px;letter-spacing:.2px;
  text-align:left;padding:12px 12px;border-bottom:1px solid rgba(15,23,42,.10)
}
.conjTable tbody td{padding:12px 12px;border-bottom:1px solid rgba(15,23,42,.06);vertical-align:middle}
.conjTable tbody tr:hover{background:rgba(37,99,235,.06)}
.conjTable .colRef{width:190px;font-weight:1000}
.conjTable td:first-child{font-variant-numeric:tabular-nums}
.conjTable .colQty,.conjTable .colStock,.conjTable td:nth-child(3),.conjTable td:nth-child(4){text-align:right}
.conjHintRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:rgba(15,23,42,.62)}
.hintDot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(15,23,42,.12)}
.hintDot.dotGreen{background:var(--rowGreen)}
.hintDot.dotYellow{background:var(--rowYellow)}
.hintDot.dotRed{background:var(--rowRed)}
.hintDot.dotBlue{background:var(--rowBlue)}


/* ===== UI OVERHAUL v6: header + modals refinements (no JS changes) ===== */

/* Header: keep original structure, but more enterprise typography */
.topbar{
  position:sticky; top:0; z-index:50;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  backdrop-filter: blur(10px);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 40px rgba(2,8,23,.08);
  border-radius: 22px;
}
.topbar .title h1{
  font-weight: 1000;
  letter-spacing: -0.02em;
  font-size: 22px;
  line-height: 1.05;
}
.topbar .title p{max-width: 720px; color: rgba(15,23,42,.60)}
.userBar .clientPill{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 24px rgba(2,8,23,.08);
}

/* Info modal: "Opções" section feels intentional */
.infoSectionTitle{
  display:flex; align-items:center; gap:10px;
}
.infoSectionTitle::before{
  content:"";
  width:8px; height:8px; border-radius:999px;
  background: rgba(37,99,235,.45);
  box-shadow: 0 0 0 6px rgba(37,99,235,.10);
}

/* Conjuntos modal: transform table into elegant component cards (keep DOM/table for JS compatibility) */
.conjTableWrap{background: transparent; border:0; overflow: visible;}
.conjTable{min-width: 0; border-collapse: separate; border-spacing: 0 10px;}
.conjTable thead{display:table-header-group;}
/* Conjuntos (cards) — manter cabeçalho visível */
.conjTable thead tr{
  display:grid;
  grid-template-columns: 190px 1fr 140px 120px;
  align-items:center;
  gap:10px;
}
.conjTable thead th{white-space:nowrap}
@media (max-width: 720px){
  .conjTable{min-width:520px}
  .conjTable thead tr{grid-template-columns: 170px 1fr 110px 110px;}
}

.conjTable tbody tr{
  display:grid;
  grid-template-columns: 190px 1fr 120px 120px;
  gap: 10px;
  align-items:center;
  padding: 12px 14px;
  margin: 0 6px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(2,8,23,.06);
}
.conjTable tbody td{
  padding: 0 !important;
  border-bottom: 0 !important;
}
.conjTable tbody tr:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(2,8,23,.10);
  background: rgba(255,255,255,.96);
}
/* Labels for mobile (no HTML changes) */
@media (max-width: 720px){
  .conjTable tbody tr{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .conjTable tbody td{
    display:flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0 !important;
  }
  .conjTable tbody td:nth-child(1)::before{content:"Ref"; font-weight:900; color: rgba(15,23,42,.55)}
  .conjTable tbody td:nth-child(2)::before{content:"Descrição"; font-weight:900; color: rgba(15,23,42,.55)}
  .conjTable tbody td:nth-child(3)::before{content:"Qtd (x)"; font-weight:900; color: rgba(15,23,42,.55)}
  .conjTable tbody td:nth-child(4)::before{content:"Stock"; font-weight:900; color: rgba(15,23,42,.55)}
}

/* Keep any stock color row classes visible even in card layout */
.conjTable tbody tr.rowGreen{background: linear-gradient(0deg, var(--rowGreen), var(--rowGreen)), rgba(255,255,255,.92)}
.conjTable tbody tr.rowYellow{background: linear-gradient(0deg, var(--rowYellow), var(--rowYellow)), rgba(255,255,255,.92)}
.conjTable tbody tr.rowRed{background: linear-gradient(0deg, var(--rowRed), var(--rowRed)), rgba(255,255,255,.92)}
.conjTable tbody tr.rowBlue{background: linear-gradient(0deg, var(--rowBlue), var(--rowBlue)), rgba(255,255,255,.92)}


/* ===== v7 – Cart (Enterprise split) ===== */
#panelCart .cartCard{padding:18px}
#panelCart .cartTop{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
#panelCart .cartTop .fullRow{padding-right:6px}
#panelCart .cartTopActions{justify-self:end;align-self:start}
#panelCart .cartSummary{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff, #fbfdff);border-radius:18px;padding:14px;box-shadow:0 18px 50px rgba(2,8,23,.06);position:sticky;top:84px}
#panelCart .cartSummaryTitle{font-weight:900;letter-spacing:-.3px;margin:2px 0 10px;font-size:16px}
#panelCart .cartSummary .pill{display:flex;justify-content:space-between;gap:10px;width:100%;margin:0 0 8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(148,163,184,.35);background:#fff}
#panelCart .cartSummary .pill b{color:#334155}
#panelCart .cartSummary #cartClearBtn{width:100%;margin-top:6px}
#panelCart .cartSummary #cartSendBtn{width:100%;margin-top:10px}
#panelCart .tableWrap{margin-top:14px;border-radius:18px}

/* Cart table feels like “items list” */
#panelCart .cartTable tbody tr{transition:transform .12s ease, box-shadow .12s ease}
#panelCart .cartTable tbody tr:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(2,8,23,.06)}
#panelCart .cartTable td{vertical-align:middle}
#panelCart .cartTable td:nth-child(2){max-width:520px}

/* Responsive: stack summary below on small screens */
@media (max-width: 920px){
  #panelCart .cartTop{grid-template-columns:1fr}
  #panelCart .cartSummary{position:relative;top:auto}
}

/* ===== v7 – “Compostos” modal: keep column labels visible even in card view ===== */
.compModal .compTable thead{display:table-header-group!important}
.compModal .compTable thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;background:linear-gradient(180deg,#f8fafc,#f1f5f9)}
.compModal .compTable thead tr{position:sticky;top:0;z-index:2}

/* When transformed to cards, ensure header bar still readable */
.compModal .compTable{overflow:visible}

/* ===== v7 – Auth screen (login/register) more premium ===== */
.authOverlay{backdrop-filter:blur(10px);background:rgba(15,23,42,.35)}
.authCard{max-width:980px;border-radius:22px;overflow:hidden;border:1px solid rgba(226,232,240,.85);box-shadow:0 30px 90px rgba(2,8,23,.28)}
.authCard{display:grid;grid-template-columns:420px 1fr}
.authCard::before{
  content:"";
  display:block;
  background:
    radial-gradient(1200px 500px at 30% 20%, rgba(37,99,235,.35), transparent 60%),
    radial-gradient(900px 420px at 40% 70%, rgba(14,165,233,.22), transparent 60%),
    linear-gradient(135deg,#0b1220, #111b33);
}
.authHeader, #loginBox, #registerBox{position:relative;z-index:1}
.authHeader{grid-column:2; padding:18px 18px 0}
#loginBox, #registerBox{grid-column:2; padding:0 18px 18px}
.authHeader h2{font-size:22px;letter-spacing:-.35px}
.authHeader p{color:var(--muted)}
.authSwitch{background:#f8fafc;border:1px solid rgba(148,163,184,.25);border-radius:14px;padding:6px}
.authSwitch .btnGhost{border-radius:10px}
@media (max-width: 860px){
  .authCard{grid-template-columns:1fr}
  .authCard::before{display:none}
  .authHeader, #loginBox, #registerBox{grid-column:1}
}

/* ===== v7 – Info modal “Opções” as action bar ===== */
.infoModules .btn, .infoModules button{width:100%}
.infoModules{display:grid;gap:10px}


/* ===== CART (Enterprise layout) ===== */
.cartLayout{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
@media (max-width: 980px){.cartLayout{grid-template-columns:1fr}}
.cartLeft{min-width:0}
.cartRight{position:relative}
.cartMid{display:flex;justify-content:center;align-items:flex-start;padding-top:14px}
.cartMid .btn{white-space:nowrap}
@media (max-width: 980px){
  .cartLayout{grid-template-columns:1fr}
  .cartMid{justify-content:flex-end;padding-top:0;margin:-6px 0 10px 0}
}

.cartSummaryCard{position:sticky;top:92px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px}
@media (max-width: 980px){.cartSummaryCard{position:static}}
.cartTop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.cartTopActions{display:flex;gap:10px;align-items:center}
.cartSummaryHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.cartSummaryTitle{font-weight:800;font-size:18px}
.cartSummaryBadges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cartField{margin-top:12px}
.cartField label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
.cartField input,.cartField textarea{width:100%}
.cartField textarea{min-height:110px;resize:vertical}
.attachHint{font-size:12px}
.attachInfo{margin-top:8px}
.cartFinalizeBtn{width:100%;margin-top:14px;padding:12px 14px;border-radius:14px;font-weight:800}
.cartEmptyCell{padding:38px 16px !important}
.cartEmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.cartEmptyIcon{width:52px;height:52px;border-radius:18px;background:linear-gradient(180deg,#f1f5ff,#fff);border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.cartEmptyIcon:before{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:6px;border:2px solid #c7d2fe}
.cartEmptyTitle{font-weight:900;font-size:22px}
.cartEmptyText{color:var(--muted);max-width:420px}
.bzClientPicker{margin-top:14px}
.bzClientCard{background:linear-gradient(135deg,#0b1220,#101b31);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px;box-shadow:0 24px 60px rgba(2,6,23,.25)}
.bzClientHead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.bzClientKicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#60a5fa}
.bzClientTitle{color:#fff;font-weight:900;font-size:18px;margin-top:4px}
.bzClientMeta{color:rgba(255,255,255,.75);margin-top:6px}
.bzClientActions{display:flex;gap:10px;align-items:center}
.bzClientNote{color:rgba(255,255,255,.70);margin-top:10px;font-size:12px}

/* ===== Conjuntos modal: show column labels even in card mode ===== */
.compTable thead th, .compTable thead td{position:sticky;top:0;background:rgba(248,250,252,.95);backdrop-filter:blur(8px);z-index:2}
.compTable thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}


/* Conta — layout enterprise (v2) */
.accountGridV2{display:grid;grid-template-columns:380px 1fr;gap:18px;align-items:start}
@media (max-width: 980px){.accountGridV2{grid-template-columns:1fr}}
.accountCol{display:flex;flex-direction:column;gap:14px;min-width:0}
.accountLeft .box:first-child{
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(135deg,#0b1222,#0f1a33);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 50px rgba(2,8,23,.18);
}
.accountLeft .box:first-child h3{display:none}
.accountLeft .box:first-child .kv{display:grid;grid-template-columns:1fr;gap:10px}
.accountLeft .box:first-child .kv > div:nth-child(odd){display:none} /* hide labels */
.accountLeft .box:first-child .kv > div:nth-child(even){
  display:block;
}
.accountLeft .box:first-child #accCompany{font-size:20px;font-weight:800;line-height:1.2;margin-top:14px}
.accountLeft .box:first-child #accNif{opacity:.85;margin-top:-4px}
.accountLeft .box:first-child .accEditable,
.accountLeft .box:first-child #accEmail,
.accountLeft .box:first-child #accComercial,
.accountLeft .box:first-child #accAssistant{color:#e5e7eb}
.accountLeft .box:first-child .accEditable span{color:#fff}
.accountLeft .box:first-child a.link{color:#c7d2fe}
.accountLeft .box:first-child .iconBtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}

#panelAccount .card.fullRow,
#panelAccount #ordersHistoryBox{border-radius:20px}



/* Conta — Perfil (estilo premium) */
.accountProfileBox{
  padding:0;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 22px 50px rgba(2,8,23,.14);
}
.accountProfileBox .profileHero{
  background:linear-gradient(135deg,#0b1222,#0f1a33);
  color:#fff;
  padding:18px 16px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  text-align:center;
}
.accountProfileBox .profileAvatar{
  width:74px;height:74px;border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  position:relative;
}
.accountProfileBox .profileAvatar:before{
  content:"";
  position:absolute;inset:18px;
  border-radius:12px;
  background:rgba(96,165,250,.85);
  mask: none;
  -webkit-mask: none;
}
.accountProfileBox .profileCompany{font-size:18px;font-weight:800;line-height:1.15}
.accountProfileBox .profileNif{opacity:.85;font-size:13px}

.accountProfileBox .profileRows{
  padding:12px 14px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.accountProfileBox .pRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius:16px;
  background:rgba(248,250,252,.9);
  border:1px solid rgba(15,23,42,.08);
}
.accountProfileBox .pIcon{
  width:38px;height:38px;border-radius:12px;
  background:#eaf2ff;
  border:1px solid rgba(15,23,42,.08);
  flex:0 0 auto;
  position:relative;
}
.accountProfileBox .pIcon:before{
  content:"";
  position:absolute;
  inset:9px;
  background:var(--blue2);
  opacity:.95;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* Icons (mask) – garantir visibilidade nas caixas (Email/Utilizador/Telefone/...) */
.accountProfileBox .pIcon.iMail:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.accountProfileBox .pIcon.iUser:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/%3E%3C/svg%3E");
}
.accountProfileBox .pIcon.iPhone:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E");
}
.accountProfileBox .pIcon.iBrief:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2zm0 4h4V4h-4v2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2zm0 4h4V4h-4v2z'/%3E%3C/svg%3E");
}
.accountProfileBox .pIcon.iAssist:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.66 0 3-1.79 3-4s-1.34-4-3-4-3 1.79-3 4 1.34 4 3 4zM8 11c1.66 0 3-1.79 3-4S9.66 3 8 3 5 4.79 5 7s1.34 4 3 4zm0 2c-2.67 0-8 1.34-8 4v3h10v-3c0-1.11.49-2.05 1.23-2.82C10.33 13.44 9.07 13 8 13zm8 0c-1.07 0-2.33.44-3.23 1.18C13.51 14.95 14 15.89 14 17v3h10v-3c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.66 0 3-1.79 3-4s-1.34-4-3-4-3 1.79-3 4 1.34 4 3 4zM8 11c1.66 0 3-1.79 3-4S9.66 3 8 3 5 4.79 5 7s1.34 4 3 4zm0 2c-2.67 0-8 1.34-8 4v3h10v-3c0-1.11.49-2.05 1.23-2.82C10.33 13.44 9.07 13 8 13zm8 0c-1.07 0-2.33.44-3.23 1.18C13.51 14.95 14 15.89 14 17v3h10v-3c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* Forçar valores legíveis (havia regras antigas a pintar estes campos a cinzento muito claro) */
.accountProfileBox #accEmail,
.accountProfileBox #accComercial,
.accountProfileBox #accAssistant{color:#0f172a !important}
.accountProfileBox #accEmail{word-break:break-all}

/* Avatar com ícone (em vez de bloco) */
.accountProfileBox .profileAvatar:before{
  background:rgba(96,165,250,.95);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.accountProfileBox .pMeta{min-width:0;flex:1}
.accountProfileBox .pLabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#64748b}
.accountProfileBox .pVal{font-size:14px;font-weight:700;color:#0f172a;display:flex;gap:8px;align-items:center;min-width:0}
.accountProfileBox .pValEdit{justify-content:space-between}
.accountProfileBox .resetLink{display:inline-block;margin-top:6px}