/* ── VAZ RADIADORES — Styles ── */

/* ── MAIN STYLES (linhas 16-1285) ── */

  :root {

    --bg: #0a0c0f;

    --surface: #111318;

    --surface2: #181c24;

    --border: #1f2533;

    --border2: #2a3040;

    --text: #e8ecf4;

    --muted: #6b778f;

    --accent: #3d7eff;

    --accent2: #ffffff;
    font-family: Arial, sans-serif;

    --accent3: #ff6b3d;

    --green: #ffffff;

    --yellow: #f1c40f;

    --red: #e74c3c;

    --revenda: #3d7eff;

    --distribuidor: #a855f7;

    --nacional: #00d4ff;   /* 13/08/2026: era verde-agua. Regra de marca: nada de verde. */

  }



  * { box-sizing: border-box; margin: 0; padding: 0; }



  body {

    background: var(--bg);

    color: var(--text); font-family: Arial, sans-serif;

    font-family: Arial, sans-serif;

    font-size: 13px;

    min-height: 100vh;

  }



  /* ─── TOPBAR ─── */

  .topbar {

    position: sticky; top: 0; z-index: 100;

    background: rgba(10,12,15,0.97);

    backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--border);

    display: flex; align-items: center; gap: 0;

    padding: 0 16px; height: 52px;

  }

  .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }

  .logo img { height: 38px; width: auto; image-rendering: -webkit-optimize-contrast; }

  .logo-divider { width: 1px; height: 28px; background: var(--border2); margin: 0 12px; flex-shrink: 0; }

  .logo-badge { background: var(--accent); color: #fff; font-size: 8px; font-family: Arial, sans-serif; padding: 2px 5px; border-radius: 3px; font-weight: 500; letter-spacing: 1px; }

  .topbar-sep { flex: 1; }

  .bling-status { display: flex; align-items: center; gap: 8px; font-size: 12px; }

  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }

  .status-dot.connected { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }

  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

  .status-label { color: var(--muted); }

  .status-label.connected { color: var(--green); }

  .autosync-badge { display:none; align-items:center; gap:5px; font-size:11px; color:var(--muted); margin-left:12px; }

  .autosync-badge.visible { display:flex; }

  .autosync-badge svg { animation: spin 1s linear infinite; }

  @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

  .autosync-badge.done { color: var(--green); }

  .autosync-badge.done svg { animation: none; }

    .btn-config { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; font-family: Arial, sans-serif; transition: all .2s; display: flex; align-items: center; gap: 6px; }

  .btn-config:hover { border-color: var(--accent); color: var(--accent); }

  .nav-tabs { display: flex; gap: 0; align-items: center; height: 100%; }

  .nav-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 0 14px; height: 52px; cursor: pointer; font-family: Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .2px; transition: all .15s; white-space: nowrap; border-radius: 0; }

  .nav-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }

  .nav-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); background: rgba(61,126,255,.06); font-weight: 600; }



  /* ─── MAIN ─── */

  .main { max-width: 1280px; margin: 0 auto; padding: 16px 20px; }

  /* Dashboard usa largura total da viewport */
  #tab-dashboard.active {
    position: fixed;
    top: 52px;
    left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    padding: 16px 20px;
    background: var(--bg);
    z-index: 1;
  }
  #tab-dashboard.active .lucro-wrap { padding: 0; }
  #tab-dashboard.active .lucro-toolbar { padding: 0 0 12px 0; }
  #tab-dashboard.active .lkgrid { margin-bottom: 12px; }



  /* ─── MODAL CONFIG ─── */

  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; display: none; align-items: center; justify-content: center; }

  .overlay.open { display: flex; }

  /* ─── ALERTAS ─── */
  #btnAlertas {
    display:flex;align-items:center;gap:5px;
    background:var(--surface2);border:1px solid var(--border2);
    color:var(--muted);padding:5px 10px;border-radius:6px;
    cursor:pointer;font-size:11px;font-family:Arial,sans-serif;transition:all .2s;
    position:relative;
  }
  #btnAlertas:hover { color:var(--yellow);border-color:var(--yellow); }
  #btnAlertas.tem-alertas { color:var(--yellow);border-color:var(--yellow); animation: pulse-alerta 2s infinite; }
  @keyframes pulse-alerta {
    0%,100% { box-shadow:0 0 0 0 rgba(241,196,15,0.4); }
    50%      { box-shadow:0 0 0 6px rgba(241,196,15,0); }
  }
  .btn-historico-preco {
    background: none; border: none; color: var(--muted); cursor: pointer;
    padding: 4px 6px; border-radius: 5px; display: inline-flex; align-items: center;
    transition: color .15s, background .15s; flex-shrink: 0;
  }
  .btn-historico-preco:hover { color: var(--accent); background: rgba(61,126,255,.12); }

  #alertaBadgeCount {
    background:var(--yellow);color:#000;border-radius:10px;
    padding:1px 6px;font-size:10px;font-weight:700;display:none;
  }
  #modalAlertas { width:680px;max-width:96vw;max-height:80vh;overflow-y:auto; }
  #modalAlertas h2 { margin-bottom:12px; }
  .alerta-section { margin-bottom:20px; }
  .alerta-section h3 { font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px; }
  .alerta-row { display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--surface2);border-radius:8px;margin-bottom:5px;font-size:12px; }
  .alerta-row .sku { color:var(--muted);width:100px;flex-shrink:0;font-size:11px; }
  .alerta-row .nome { flex:1; }
  .alerta-row .tag { padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;flex-shrink:0; }
  .tag-vermelho { background:rgba(231,76,60,.18);color:#e74c3c; }
  .tag-amarelo  { background:rgba(241,196,15,.15);color:#f1c40f; }
  .tag-azul     { background:rgba(61,126,255,.15);color:#3d7eff; }

  .modal { background: var(--surface); border: 1px solid var(--border2); border-radius: 16px; padding: 32px; width: 480px; max-width: 95vw; }

  .modal h2 { font-family: 'Arial', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 6px; }

  .modal p { color: var(--muted); font-size: 13px; margin-bottom: 24px; line-height: 1.5; }

  .form-group { margin-bottom: 16px; }

  .form-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-family: Arial, sans-serif; letter-spacing: .5px; }

  .form-input { width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 10px 14px; color: var(--text); font-family: Arial, sans-serif; font-size: 13px; outline: none; transition: border .2s; }

  .form-input:focus { border-color: var(--accent); }

  .form-select { width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 10px 14px; color: var(--text); font-family: Arial, sans-serif; font-size: 13px; outline: none; cursor: pointer; }

  .modal-footer { display: flex; gap: 10px; margin-top: 24px; }

  .btn-primary { flex: 1; background: var(--accent); border: none; color: #fff; padding: 11px; border-radius: 8px; cursor: pointer; font-family: 'Arial', sans-serif; font-weight: 600; font-size: 14px; transition: opacity .2s; }

  .btn-primary:hover { opacity: .85; }

  .btn-secondary { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); padding: 11px 18px; border-radius: 8px; cursor: pointer; font-family: Arial, sans-serif; font-size: 13px; transition: all .2s; }

  .btn-secondary:hover { color: var(--text); border-color: var(--border); }

  .help-link { font-size: 12px; color: var(--accent); text-decoration: none; display: block; margin-top: 10px; }

  .help-link:hover { text-decoration: underline; }

  .alert { background: rgba(61,126,255,0.08); border: 1px solid rgba(61,126,255,0.2); border-radius: 8px; padding: 12px 14px; font-size: 12px; color: #8ab4ff; margin-bottom: 16px; line-height: 1.5; }

  .alert.warning { background: rgba(241,196,15,0.08); border-color: rgba(241,196,15,0.2); color: #f5d060; }



  /* ─── SEARCH BAR ─── */

  .search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }

  .search-wrap { flex: 1; position: relative; }

  .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

  .search-input { width: 100%; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 12px 8px 36px; color: var(--text); font-family: Arial, sans-serif; font-size: 13px; outline: none; transition: border .2s; }

  .search-input:focus { border-color: var(--accent); }

  .search-input::placeholder { color: var(--muted); }

  .filter-chip { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: Arial, sans-serif; display: flex; align-items: center; gap: 6px; transition: all .15s; white-space: nowrap; }

  .filter-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(61,126,255,0.08); }

  .filter-chip:hover { border-color: var(--border); color: var(--text); }

  .btn-sync { background: var(--surface2); border: 1px solid var(--border2); color: var(--accent2); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: Arial, sans-serif; display: flex; align-items: center; gap: 6px; transition: all .2s; white-space: nowrap; }

  .btn-sync:hover { background: rgba(0,194,168,0.1); border-color: var(--accent2); }

  .btn-sync.spinning svg { animation: spin 1s linear infinite; }

  @keyframes spin { to { transform: rotate(360deg); } }

  .count-badge { font-size: 12px; color: var(--muted); font-family: Arial, sans-serif; white-space: nowrap; }



  /* ─── ESTADO / DDD ─── */

  .estado-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

  .estado-label { font-size: 12px; color: var(--muted); font-family: Arial, sans-serif; white-space: nowrap; }

  .estado-select { background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 7px 12px; color: var(--text); font-family: Arial, sans-serif; font-size: 13px; outline: none; cursor: pointer; }

  .ddd-wrap { display: flex; align-items: center; gap: 6px; }

  .ddd-input { width: 56px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 7px 10px; color: var(--text); font-family: Arial, sans-serif; font-size: 14px; font-weight: 600; outline: none; text-align: center; transition: border-color .2s; }

  .ddd-input:focus { border-color: var(--accent); }

  .ddd-input.ok { border-color: var(--green); }

  .ddd-input.err { border-color: var(--red); }

  .ddd-estado { font-size: 12px; color: var(--muted); font-family: Arial, sans-serif; min-width: 120px; transition: color .2s; }

  .ddd-estado.found { color: var(--green); font-weight: 600; }

  .ddd-estado.notfound { color: var(--red); }

  .st-toggle { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--muted); }

  .toggle { position: relative; display: inline-block; width: 36px; height: 20px; }

  .toggle input { opacity: 0; width: 0; height: 0; }

  .toggle-slider { position: absolute; inset: 0; background: var(--border2); border-radius: 20px; cursor: pointer; transition: .2s; }

  .toggle-slider:before { content:''; position:absolute; height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s; }

  .toggle input:checked + .toggle-slider { background: var(--accent); }

  .toggle input:checked + .toggle-slider:before { transform: translateX(16px); }



  /* ─── PRODUCT CARD ─── */

  .products-grid { display: flex; flex-direction: column; gap: 8px; }

  .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color .15s, transform .15s; }

  .product-card:hover { border-color: var(--border2); transform: translateY(-1px); }

  .card-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }

  .code-badge { background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px; padding: 4px 10px; font-family: Arial, sans-serif; font-size: 13px; color: var(--accent); white-space: nowrap; }

  .card-thumb { width: 200px; height: 200px; border-radius: 10px; object-fit: cover; background: var(--surface2); border: 1px solid var(--border2); flex-shrink: 0; }

  .product-name { flex: 1; font-size: 16px; font-weight: 500; line-height: 1.4; }

  .stock-badge { font-size: 13px; font-family: Arial, sans-serif; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }

  .stock-badge.in { background: rgba(255,107,53,0.1); color: #ff6b35; border: 1px solid rgba(255,107,53,0.2); }

  .stock-badge.low { background: rgba(241,196,15,0.1); color: var(--yellow); border: 1px solid rgba(241,196,15,0.2); }

  .stock-badge.out { background: rgba(231,76,60,0.1); color: var(--red); border: 1px solid rgba(231,76,60,0.2); }

  .stock-badge.sync { background: rgba(107,119,143,0.1); color: var(--muted); border: 1px solid var(--border); }

  .expand-icon { color: var(--muted); transition: transform .2s; flex-shrink: 0; }

  .expand-icon.open { transform: rotate(180deg); }



  .card-prices { display: none; padding: 0 14px 12px; border-top: 1px solid var(--border); margin-top: 2px; }

  .card-historico { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

  .card-historico-ttl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

  .card-historico-ttl span { color: var(--muted); }

  .card-historico-ttl em { color: var(--accent); font-style: normal; font-family: Arial, sans-serif; }

  .hist-table { width: 100%; border-collapse: collapse; }

  .hist-table th { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 500; }

  .hist-table th:last-child { text-align: right; }

  .hist-table td { padding: 7px 10px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.03); }

  .hist-table tr:last-child td { border-bottom: none; }

  .hist-table tr:hover td { background: rgba(61,126,255,.04); }

  .hist-cli { font-weight: 500; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .hist-data { color: var(--muted); font-family: Arial, sans-serif; font-size: 11px; white-space: nowrap; }

  .hist-val { text-align: right; font-family: Arial, sans-serif; font-weight: 600; color: var(--accent); white-space: nowrap; }

  .hist-qtd { color: var(--muted); font-size: 11px; white-space: nowrap; }

  .hist-empty { color: var(--muted); font-size: 12px; font-style: italic; padding: 10px 0; text-align: center; }

  .card-prices.open { display: block; }

  .prices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 14px; }

  .price-col { background: var(--surface2); border-radius: 10px; padding: 14px; border: 1px solid var(--border); }

  .price-type { font-size: 11px; font-family: Arial, sans-serif; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px; }

  .price-type.revenda { color: var(--revenda); }

  .price-type.distribuidor { color: var(--distribuidor); }

  .price-type.nacional { color: var(--nacional); }

  .price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

  .price-tag { font-size: 11px; color: var(--muted); }

  .price-val { font-family: Arial, sans-serif; font-size: 13px; font-weight: 500; }

  .price-val.highlight { color: var(--text); font-size: 15px; }

  .price-val.revenda { color: var(--revenda); }

  .price-val.distribuidor { color: var(--distribuidor); }

  .price-val.nacional { color: var(--nacional); }

  .price-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; }



  .card-actions { display: flex; gap: 8px; padding-top: 12px; align-items: center; }

  .btn-pedido { background: var(--accent); border: none; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: 'Arial', sans-serif; font-weight: 600; font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 4px; transition: opacity .2s; }

  .btn-copiar-preco { background: transparent; border: 1px solid var(--border2); color: var(--muted); padding: 4px 8px; border-radius: 5px; cursor: pointer; font-family: Arial, sans-serif; font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; gap: 3px; transition: all .2s; margin-top: 6px; }
  .btn-copiar-preco:hover { color: var(--text); border-color: var(--text); }
  .btn-copiar-preco.copied { color: #4f9eff; border-color: #4f9eff; }

  .btn-pedido:hover { opacity: .85; }

  .btn-pedido.disabled { opacity: .3; cursor: not-allowed; }

  .btn-ver-bling { background: var(--surface); border: 1px solid var(--border2); color: var(--muted); padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: Arial, sans-serif; display: flex; align-items: center; gap: 6px; transition: all .2s; }

  .btn-ver-bling:hover { color: var(--text); border-color: var(--border); }

  .btn-copiar-preco { background: var(--surface); border: 1px solid var(--border2); color: var(--accent); padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: Arial, sans-serif; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: all .2s; }
  .btn-copiar-preco:hover { background: rgba(79,158,255,0.1); border-color: var(--accent); }

  .margin-row { margin-top: 2px; }



  /* ─── PEDIDO MODAL ─── */

  .pedido-modal { width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }

  .pedido-modal h2 { font-family: 'Arial', sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 4px; }

  .pedido-modal .subtitle { color: var(--muted); font-size: 12px; margin-bottom: 20px; font-family: Arial, sans-serif; }

  .price-selector { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; }

  .price-option { background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 12px; cursor: pointer; transition: all .15s; }

  .price-option:hover, .price-option.selected { border-color: var(--accent); background: rgba(61,126,255,0.06); }

  .price-option .opt-type { font-size: 11px; font-family: Arial, sans-serif; margin-bottom: 4px; }

  .price-option .opt-val { font-size: 14px; font-family: Arial, sans-serif; font-weight: 500; }

  .qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

  .qty-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); width: 34px; height: 34px; border-radius: 7px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background .15s; }

  .qty-btn:hover { background: var(--border); }

  .qty-val { font-family: Arial, sans-serif; font-size: 18px; min-width: 32px; text-align: center; }

  .total-row { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

  .total-label { font-size: 12px; color: var(--muted); font-family: Arial, sans-serif; }

  .total-val { font-family: Arial, sans-serif; font-size: 20px; font-weight: 500; color: var(--accent); }



  /* ─── EMPTY / LOADING ─── */

  .empty { text-align: center; padding: 60px 20px; color: var(--muted); }

  .empty svg { margin-bottom: 12px; opacity: .3; }

  .empty p { font-size: 14px; }

  .skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 12px; height: 58px; margin-bottom: 8px; }

  @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }



  /* ─── TOAST ─── */

  .toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }

  .toast { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 12px 16px; min-width: 260px; display: flex; align-items: flex-start; gap: 10px; animation: slideIn .25s ease; font-size: 13px; }

  .toast.success { border-color: rgba(255,107,53,0.3); }

  .toast.error { border-color: rgba(231,76,60,0.3); }

  .toast-icon { flex-shrink: 0; margin-top: 1px; }

  .toast-msg { flex: 1; line-height: 1.4; }

  .toast-sub { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: Arial, sans-serif; }

  @keyframes slideIn { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }



  /* ─── TABS CONTENT ─── */

  .tab-content { display: none; }

  .tab-content.active { display: block; }



  /* ─── PEDIDOS LIST ─── */

  .pedidos-table { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

  .pedidos-table table { width: 100%; border-collapse: collapse; }

  .pedidos-table th { background: var(--surface2); padding: 12px 16px; text-align: left; font-size: 11px; font-family: Arial, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); }

  .pedidos-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }

  .pedidos-table tr:last-child td { border-bottom: none; }

  .pedidos-table tr:hover td { background: rgba(255,255,255,0.02); }

  .order-id { font-family: Arial, sans-serif; color: var(--accent); font-size: 12px; }

  .order-status { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-family: Arial, sans-serif; }

  .order-status.aberto { background: rgba(61,126,255,0.1); color: var(--accent); border: 1px solid rgba(61,126,255,0.2); }

  .order-status.aprovado { background: rgba(255,107,53,0.1); color: #ff6b35; border: 1px solid rgba(255,107,53,0.2); }

  .order-status.cancelado { background: rgba(231,76,60,0.1); color: var(--red); border: 1px solid rgba(231,76,60,0.2); }



  /* ─── STATS ─── */

  .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }

  .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }

  .stat-label { font-size: 11px; color: var(--muted); font-family: Arial, sans-serif; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }

  .stat-val { font-family: 'Arial', sans-serif; font-size: 26px; font-weight: 700; }

  .stat-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }



  @media(max-width:768px) {

    .prices-grid { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: repeat(2,1fr); }

    .search-row { flex-wrap: wrap; }

    .card-header { flex-wrap: wrap; }

    .cnpj-grid { grid-template-columns: 1fr 1fr; }

  }



  /* ─── CNPJ ─── */

  .cnpj-row { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }

  .cnpj-wrap { display:flex; align-items:center; gap:8px; }

  .cnpj-input { width:180px; background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:7px 12px; color:var(--text); font-family:Arial,sans-serif; font-size:13px; outline:none; letter-spacing:1px; transition:border-color .2s; }

  .cnpj-input:focus { border-color:var(--accent); }

  .cnpj-input.ok { border-color:var(--green); }

  .cnpj-input.err { border-color:var(--red); }

  .btn-cnpj { background:var(--surface2); border:1px solid var(--border2); color:var(--accent); padding:7px 14px; border-radius:8px; cursor:pointer; font-size:12px; font-family:Arial,sans-serif; transition:all .2s; white-space:nowrap; display:flex; align-items:center; gap:6px; }

  .btn-cnpj:hover { background:rgba(61,126,255,0.1); border-color:var(--accent); }

  .btn-cnpj.loading { opacity:.6; pointer-events:none; }

  .cnpj-card { background:var(--surface); border:1px solid var(--border2); border-radius:12px; padding:16px 18px; margin-bottom:20px; display:none; }

  .cnpj-card.open { display:block; }

  .cnpj-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }

  .cnpj-razao { font-size:15px; font-weight:600; flex:1; }

  .cnpj-fantasia { font-size:12px; color:var(--muted); }

  .cnpj-badge { font-size:11px; font-family:Arial,sans-serif; padding:3px 9px; border-radius:5px; font-weight:500; }

  .cnpj-badge.ativa { background:rgba(255,107,53,0.12); color:#ff6b35; border:1px solid rgba(255,107,53,0.25); }

  .cnpj-badge.inativa { background:rgba(231,76,60,0.12); color:var(--red); border:1px solid rgba(231,76,60,0.25); }

  .cnpj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

  .cnpj-field { background:var(--surface2); border-radius:8px; padding:10px 12px; }

  .cnpj-field-label { font-size:10px; color:var(--muted); font-family:Arial,sans-serif; letter-spacing:.5px; margin-bottom:4px; text-transform:uppercase; }

  .cnpj-field-val { font-size:12px; color:var(--text); font-weight:500; line-height:1.4; }

  .cnpj-socios { margin-top:10px; background:var(--surface2); border-radius:8px; padding:10px 12px; }

  .cnpj-socios-title { font-size:10px; color:var(--muted); font-family:Arial,sans-serif; letter-spacing:.5px; margin-bottom:8px; text-transform:uppercase; }

  .cnpj-socio { font-size:12px; color:var(--text); padding:3px 0; border-bottom:1px solid var(--border); }

  .cnpj-socio:last-child { border:none; }

  .cnpj-error { color:var(--red); font-size:12px; padding:8px 0; }



  /* ─── ABA COMPRAS ─────────────────────────────────────────────── */

  .compras-wrap { padding: 20px 0; }

  #tab-compras.active {
    position: fixed;
    top: 52px;
    left: 0; right: 0; bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    background: var(--bg);
    z-index: 1;
  }

  #tab-compras.active .compras-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  #tab-compras.active .ct-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #tab-compras.active .ct-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
  }

  .compras-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }

  .compras-title { font-family: 'Arial', sans-serif; font-size: 18px; font-weight: 700; }

  .compras-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  .btn-compras { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: none; cursor: pointer; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; transition: all .15s; }

  .btn-compras.primary { background: var(--accent); color: #fff; }

  .btn-compras.primary:hover { background: #5b8fff; }

  .btn-compras.secondary { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); }

  .btn-compras.secondary:hover { border-color: var(--accent); color: var(--accent); }

  .btn-compras.warning { background: rgba(234,179,8,.15); border: 1px solid rgba(234,179,8,.4); color: #eab308; }

  .btn-compras.warning:hover { background: rgba(234,179,8,.25); }

  .btn-compras:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

  .compras-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }

  .cs-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }

  .cs-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }

  .cs-val { font-size: 22px; font-weight: 700; line-height: 1.1; }

  .cs-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }

  .compras-filters { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

  .cf-btn { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border2); background: var(--surface2); color: var(--muted); font-size: 12px; cursor: pointer; transition: all .15s; }

  .cf-btn.active, .cf-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(61,126,255,.1); }

  .cf-search { flex: 1; min-width: 160px; max-width: 280px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-family: Arial, sans-serif; outline: none; }

  .cf-search:focus { border-color: var(--accent); }

  .cf-count { font-size: 12px; color: var(--muted); margin-left: 4px; }

  .ct-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

  .ct-scroll { overflow-x: auto; }

  .ct-thead-fixed { background: var(--surface2); border-bottom: 1px solid var(--border); overflow: hidden; border-radius: 12px 12px 0 0; }

  /* ── DASHBOARD EXECUTIVO ── */
  .exec-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }
  .exec-card-title { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; }
  .exec-row { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--border2); }
  .exec-abc-badge { border:1px solid; border-radius:8px; padding:7px 10px; display:flex; align-items:center; justify-content:space-between; }
  .exec-toggle { font-size:10px; padding:3px 8px; border-radius:5px; border:1px solid var(--border2); background:transparent; color:var(--muted); cursor:pointer; font-family:inherit; }
  .exec-toggle.active { background:var(--accent); color:#fff; border-color:var(--accent); }
  .exec-btn-sm { font-size:11px; background:var(--surface2); border:1px solid var(--border2); color:var(--muted); padding:4px 10px; border-radius:6px; cursor:pointer; font-family:inherit; }
  .exec-card { height: 100%; box-sizing: border-box; }
  .exec-clickable { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
  .exec-clickable:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .exec-lucro-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border2); }
  .ct-thead-fixed table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
  .ct-thead-fixed th { padding: 10px 8px; text-align: right; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
  .ct-thead-fixed th:first-child, .ct-thead-fixed th:nth-child(2) { text-align: left; }
  #tab-compras.active .ct-wrap { border-radius: 0 0 12px 12px; }

  .ct thead tr { background: var(--surface2); }

  .ct thead { background: var(--surface2); }




  .ct { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }

  .ct thead { background: var(--surface2); }

  .ct th { padding: 10px 8px; text-align: right; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--border); user-select: none; overflow: hidden; text-overflow: ellipsis; }

  .ct th:first-child, .ct th:nth-child(2) { text-align: left; }

  .ct th:hover { color: var(--accent); }

  .ct td { padding: 8px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }

  .ct tr:last-child td { border-bottom: none; }

  .ct tr:hover td { background: rgba(255,255,255,.02); }

  .ct tr.tr-comprar td { background: rgba(61,126,255,.05); }

  .ct td.sku { font-family: Arial, sans-serif; font-size: 11px; color: var(--muted); text-align: left; white-space: nowrap; }

  .ct td.desc { text-align: left; }

  .ct td.desc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

  .ct td.num { text-align: right; white-space: nowrap; }

  .ct th.r { text-align: right; }

  .sort-arrow { opacity: 0.4; font-size: 10px; }

  .comprar-input { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); border-radius: 6px; padding: 3px 6px; font-family: Arial, sans-serif; font-size: 12px; text-align: right; outline: none; }

  .comprar-input:focus { border-color: var(--accent); }

  .badge-alerta { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.3); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }

  .badge-aviso { background: rgba(234,179,8,.15); color: #eab308; border: 1px solid rgba(234,179,8,.3); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }

  .badge-neutro { background: rgba(107,119,143,.1); color: var(--muted); border: 1px solid var(--border2); border-radius: 4px; padding: 2px 6px; font-size: 10px; white-space: nowrap; }

  .badge-ok { background: rgba(255,107,53,.12); color: #ff6b35; border: 1px solid rgba(255,107,53,.25); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }

  .ct-footer { display: flex; gap: 16px; padding: 10px 14px; background: var(--surface2); border-top: 1px solid var(--border); font-size: 12px; align-items: center; flex-wrap: wrap; }

  .ct-footer-label { color: var(--muted); }

  .ct-footer-val { font-weight: 700; color: var(--text); }





  /* ─── ABA COMPRAS — sticky header + destaque digitação ────────── */
  .compras-sticky-wrap {
    position: sticky;
    top: 52px;
    z-index: 40;
    background: var(--bg);
    padding: 8px 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
  }
  .ct tr.tr-editando td {
    background: rgba(61,126,255,.10) !important;
    transition: background .15s;
  }
  .ct tr.tr-editando td:first-child {
    border-left: 3px solid var(--accent);
  }

  /* ─── ABA LUCRATIVIDADE ───────────────────────────────────────── */

  #tab-lucratividade { padding: 0; }



  /* Sub-tabs */

  .lucro-subtabs {

    display: flex; gap: 2px; padding: 8px 20px 0;

    border-bottom: 1px solid var(--border);

    background: var(--surface);

    overflow-x: auto; flex-shrink: 0;

  }

  .lucro-stab {

    background: none; border: none; border-bottom: 2px solid transparent;

    color: var(--muted); padding: 8px 16px 10px;

    cursor: pointer; font-family: Arial, sans-serif;

    font-size: 12px; font-weight: 500; white-space: nowrap;

    border-radius: 0; transition: all .15s;

  }

  .lucro-stab:hover { color: var(--text); }

  .lucro-stab.active { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 600; }



  /* Toolbar (período + sync) */

  .lucro-toolbar {

    display: flex; align-items: center; gap: 6px;

    padding: 8px 20px; background: var(--surface);

    border-bottom: 1px solid var(--border); flex-wrap: wrap;

  }

  .lbtn {

    background: var(--surface2); border: 1px solid var(--border2);

    color: var(--muted); padding: 3px 10px; border-radius: 20px;

    font-size: 11px; font-family: Arial, sans-serif;

    cursor: pointer; transition: all .15s; font-weight: 500;

  }

  .lbtn:hover { border-color: var(--accent); color: var(--accent); }

  .lbtn.active { background: rgba(61,126,255,.15); border-color: var(--accent); color: var(--accent); font-weight: 600; }

  .lsync {

    display: flex; align-items: center; gap: 8px;

    margin-left: 8px; padding: 4px 14px; border-radius: 20px;

    background: var(--surface2); border: 1px solid var(--border2);

    cursor: pointer; font-size: 12px; font-family: Arial, sans-serif;

    color: var(--muted); transition: all .15s;

  }

  .lsync:hover { border-color: var(--accent2); color: var(--accent2); }

  .ldot {

    width: 7px; height: 7px; border-radius: 50%;

    background: var(--muted); flex-shrink: 0;

  }

  .ldot.ok { background: var(--green); box-shadow: 0 0 6px var(--green); }

  .ldot.loading { background: var(--yellow); animation: pulse 1s infinite; }

  .ldot.error { background: var(--red); }



  /* Panes */

  .lucro-pane { display: none; padding: 14px 20px; }

  .lucro-pane.active { display: block; }



  /* KPI grid */

  .lkgrid { display: grid; gap: 8px; margin-bottom: 10px; }

  .lkg6 { grid-template-columns: repeat(6, 1fr); }

  .lkg4 { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 1100px) { .lkg6 { grid-template-columns: repeat(3, 1fr); } }

  @media (max-width: 800px)  { .lkg6, .lkg4 { grid-template-columns: repeat(2, 1fr); } }

  .lkpi {

    background: var(--surface); border: 1px solid var(--border);

    border-radius: 8px; padding: 10px 14px;

    transition: border-color .15s;

  }

  .lkpi:hover { border-color: var(--border2); }

  .lkpi-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }

  .lkpi-val { font-size: 18px; font-weight: 700; line-height: 1.1; font-family: Arial, sans-serif; }

  .lkpi-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }

  .ldelta { font-size: 11px; font-weight: 600; margin-left: 6px; }

  .ldelta.up { color: var(--green); }

  .ldelta.dn { color: var(--red); }



  /* Card grid */

  .lcgrid { display: grid; gap: 14px; margin-bottom: 14px; }

  .lc2  { grid-template-columns: 1fr 1fr; }

  .lc21 { grid-template-columns: 2fr 1fr; }

  @media (max-width: 900px) { .lc2, .lc21 { grid-template-columns: 1fr; } }

  .lcard {

    background: var(--surface); border: 1px solid var(--border);

    border-radius: 12px; padding: 18px 20px;

  }

  .lcard-ttl { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }

  .lcard-sub { font-size: 11px; color: var(--muted); margin-bottom: 10px; }

  .lch { position: relative; }



  /* Tabela */

  .lscroll { overflow-x: auto; overflow-y: auto; max-height: 420px; border-radius: 8px; border: 1px solid var(--border); }

  .ltbl { width: 100%; border-collapse: collapse; font-size: 12px; }

  .ltbl thead { position: sticky; top: 0; background: var(--surface2); z-index: 1; }

  .ltbl th { padding: 9px 10px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border); white-space: nowrap; }

  .ltbl th:first-child { text-align: left; }

  .ltbl td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }

  .ltbl tr:last-child td { border-bottom: none; }

  .ltbl tr:hover td { background: rgba(255,255,255,.025); }

  .lnum { text-align: right; font-variant-numeric: tabular-nums; }

  .lsku { font-family: Arial, sans-serif; font-size: 11px; color: var(--muted); }



  /* Ranking row */

  .lrk { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }

  .lrk:last-child { border-bottom: none; }

  .lrk .lsku { min-width: 90px; }

  .lmb { flex: 1; font-size: 12px; font-weight: 600; font-family: Arial, sans-serif; }

  /* Cores de margem — benchmarks autopeças Brasil */
  .lmb.ex { color: #4f9eff; }   /* ≥55% — excelente — azul */
  .lmb.bm { color: #ffffff; }   /* ≥45% — bom — branco */
  .lmb.md { color: #ff6b35; }   /* ≥35% — razoável — laranja */
  .lmb.bx { color: #e74c3c; }   /* <35%  — preocupante — vermelho */



  /* Bar */

  .lbar { background: var(--border); border-radius: 4px; height: 6px; overflow: hidden; flex: 1; }

  .lbar-f { height: 100%; border-radius: 4px; background: var(--accent); transition: width .4s ease; }



  /* Timeline mensal */

  .ltl-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; }

  .ltl-row:last-child { border-bottom: none; }

  .ltl-mes { min-width: 48px; color: var(--muted); font-size: 11px; }

  .ltl-val { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }



  /* Scatter / matrix */

  .lmatrix { position: relative; width: 100%; }

  .lcav { width: 100%; }



  /* Misc */

  .lsec { margin-bottom: 20px; }

  .lnodata {

    display: flex; flex-direction: column; align-items: center;

    justify-content: center; padding: 60px 20px; color: var(--muted);

    font-size: 13px; gap: 10px;

  }

  .lnodata svg { opacity: 0.3; }





/* ═══════════════════════════════════════════════════════

   DASHBOARD — NOVO

   ═══════════════════════════════════════════════════════ */

.dash-wrap { padding: 28px 32px; max-width: 1400px; margin: 0 auto; }



/* toolbar */

.dash-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap; }

.dash-period-btns { display:flex; gap:6px; }

.dbtn { background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); padding:7px 16px; border-radius:8px; cursor:pointer; font-size:13px; font-family:Arial,sans-serif; transition:all .15s; }

.dbtn:hover { color:var(--text); background:rgba(255,255,255,.1); }

.dbtn.active { background:rgba(61,126,255,.18); border-color:var(--accent); color:var(--accent); font-weight:600; }

.dbtn-sync { display:flex; align-items:center; gap:8px; background:var(--accent); color:#fff; border:none; padding:8px 18px; border-radius:8px; cursor:pointer; font-size:13px; font-family:Arial,sans-serif; font-weight:600; transition:all .15s; }

.dbtn-sync:hover { background:#2d6fe8; }

.dbtn-sync.spin svg { animation:spin 1s linear infinite; }



/* KPIs */

.dkgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:24px; }

@media(max-width:1100px){.dkgrid{grid-template-columns:repeat(3,1fr);}}

@media(max-width:700px){.dkgrid{grid-template-columns:repeat(2,1fr);}}

.dkpi { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 16px 14px; display:flex; flex-direction:column; gap:4px; transition:border-color .2s; }

.dkpi:hover { border-color:rgba(61,126,255,.4); }

.dkpi-ico { font-size:20px; margin-bottom:4px; }

.dkpi-val { font-size:22px; font-weight:700; color:var(--text); font-family:Arial,sans-serif; }

.dkpi-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }

.dkpi-sub { font-size:12px; color:var(--muted2,#666); }



/* subtabs */

.dash-subtabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:22px; }

.dstab { background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); padding:10px 20px; cursor:pointer; font-size:14px; font-family:Arial,sans-serif; font-weight:500; transition:all .15s; margin-bottom:-1px; }

.dstab:hover { color:var(--text); }

.dstab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }



/* panes */

.dpane { display:none; }

.dpane.active { display:block; }



/* grid visão geral */

.dgrid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.dcard-wide { grid-column:1/-1; }

@media(max-width:900px){ .dgrid2{grid-template-columns:1fr;} .dcard-wide{grid-column:auto;} }

.dcard { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; }

.dcard-ttl { font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:16px; }



/* rank list (top 5) */

.dranklist { display:flex; flex-direction:column; gap:10px; }

.drank-item { display:flex; align-items:center; gap:10px; }

.drank-num { width:22px; height:22px; border-radius:6px; background:rgba(61,126,255,.15); color:var(--accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.drank-info { flex:1; min-width:0; }

.drank-nome { font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.drank-sub { font-size:11px; color:var(--muted); }

.drank-val { font-size:13px; font-weight:700; color:var(--accent); font-family:Arial,sans-serif; flex-shrink:0; }

.dbar-bg { height:4px; background:rgba(255,255,255,.06); border-radius:2px; margin-top:4px; }

.dbar-fill { height:4px; border-radius:2px; background:var(--accent); transition:width .4s ease; }



/* tabelas */

.dpedidos-bar { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }

.dpedidos-search { flex:1; min-width:200px; background:var(--card); border:1px solid var(--border); color:var(--text); padding:9px 14px; border-radius:8px; font-size:13px; }

.dpedidos-search:focus { outline:none; border-color:var(--accent); }

.dpedidos-sel { background:var(--card); border:1px solid var(--border); color:var(--text); padding:9px 12px; border-radius:8px; font-size:13px; }

.dtbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:12px; }

.dtbl { width:100%; border-collapse:collapse; font-size:13px; }

.dtbl thead th { background:rgba(255,255,255,.04); padding:11px 14px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); border-bottom:1px solid var(--border); font-weight:600; }

.dtbl tbody tr { border-bottom:1px solid var(--border2,rgba(255,255,255,.05)); transition:background .1s; }

.dtbl tbody tr:last-child { border-bottom:none; }

.dtbl tbody tr:hover { background:rgba(255,255,255,.03); }

.dtbl tbody td { padding:11px 14px; color:var(--text); vertical-align:middle; }

.dnum { text-align:right!important; font-family:Arial,sans-serif; }

.dnodata { text-align:center; padding:40px; color:var(--muted); font-size:13px; }

.dnodata-center { text-align:center; padding:60px 20px; color:var(--muted); font-size:15px; line-height:2; }

.dnodata-center div:first-child { font-size:40px; margin-bottom:12px; }

.dsit { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }

.dsit.atendido  { background:rgba(255,107,53,.15); color:#ff6b35; }

.dsit.aberto    { background:rgba(241,196,15,.12); color:#f1c40f; }

.dsit.cancelado { background:rgba(231,76,60,.15);  color:#e74c3c; }

.dsit.parcial   { background:rgba(52,152,219,.15); color:#3498db; }

/* ── Aba Pedidos em Aberto ─────────────────────────────────────────── */
#tab-pedidos.active { display:flex; flex-direction:column; gap:16px; padding:16px; overflow-y:auto; }

.ped-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.ped-header h2 { font-size:1.1rem; font-weight:700; color:#e0e0e0; margin:0; }
.ped-header-btns { display:flex; gap:8px; align-items:center; }

.ped-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
.ped-card { background:#1e1e2e; border-radius:10px; padding:14px 16px; text-align:center; border:1px solid rgba(255,255,255,.07); }
.ped-card .pc-val { font-size:1.8rem; font-weight:800; line-height:1; margin-bottom:4px; }
.ped-card .pc-lbl { font-size:.72rem; color:#888; text-transform:uppercase; letter-spacing:.05em; }
.ped-card.card-total .pc-val  { color:#7c9edc; }
.ped-card.card-ok .pc-val     { color:#4f9eff; }
.ped-card.card-comprado .pc-val { color:#f0a500; }
.ped-card.card-comprar .pc-val  { color:#e05c5c; }

.ped-toggle { display:flex; background:#1e1e2e; border-radius:8px; border:1px solid rgba(255,255,255,.08); overflow:hidden; width:fit-content; }
.ped-toggle button { background:none; border:none; padding:6px 16px; color:#888; cursor:pointer; font-size:.8rem; transition:all .15s; }
.ped-toggle button.active { background:#2a2a40; color:#e0e0e0; font-weight:600; }

.ped-filter-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ped-badge-filter { cursor:pointer; border:1px solid transparent; border-radius:20px; padding:4px 12px; font-size:.75rem; font-weight:600; transition:all .15s; }
.ped-badge-filter.all     { background:rgba(124,158,220,.15); color:#7c9edc; border-color:rgba(124,158,220,.3); }
.ped-badge-filter.comprar { background:rgba(224,92,92,.15);   color:#e05c5c; border-color:rgba(224,92,92,.3); }
.ped-badge-filter.comprado{ background:rgba(240,165,0,.15);   color:#f0a500; border-color:rgba(240,165,0,.3); }
.ped-badge-filter.ok      { background:rgba(79,158,255,.15);  color:#4f9eff; border-color:rgba(79,158,255,.3); }
.ped-badge-filter.selected { filter:brightness(1.4); border-width:2px; }

.ped-table-wrap { background:#1e1e2e; border-radius:12px; border:1px solid rgba(255,255,255,.07); overflow:hidden; }
.ped-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.ped-table th { background:#16162a; padding:10px 12px; text-align:left; color:#888; font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid rgba(255,255,255,.07); white-space:nowrap; }
.ped-table td { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; }
.ped-table tr:last-child td { border-bottom:none; }
.ped-table tr:hover td { background:rgba(255,255,255,.03); }

.ped-status { display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:3px 10px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.ped-status.ok      { background:rgba(79,158,255,.15);  color:#4f9eff; }
.ped-status.comprado{ background:rgba(240,165,0,.15);   color:#f0a500; }
.ped-status.comprar { background:rgba(224,92,92,.15);   color:#e05c5c; }

.ped-qtd-bar { display:flex; align-items:center; gap:6px; }
.ped-bar { height:6px; border-radius:3px; background:#2a2a40; width:80px; overflow:hidden; }
.ped-bar-fill { height:100%; border-radius:3px; transition:width .3s; }
.ped-bar-fill.ok      { background:#4f9eff; }
.ped-bar-fill.comprado{ background:#f0a500; }
.ped-bar-fill.comprar { background:#e05c5c; }

.ped-clientes-list { font-size:.75rem; color:#888; }
.ped-clientes-list span { display:inline-block; background:#2a2a40; border-radius:4px; padding:2px 6px; margin:1px; }

.ped-comprar-input { display:flex; gap:4px; align-items:center; }
.ped-comprar-input input { width:60px; background:#16162a; border:1px solid rgba(255,255,255,.15); border-radius:5px; padding:3px 6px; color:#e0e0e0; font-size:.78rem; text-align:center; }
.ped-comprar-input button { background:#2a3a5c; color:#7c9edc; border:none; border-radius:5px; padding:3px 8px; cursor:pointer; font-size:.75rem; font-weight:600; }
.ped-comprar-input button:hover { background:#3a4a7c; }
.ped-comprar-input button.saved { background:rgba(79,158,255,.2); color:#4f9eff; }

.ped-pedido-row { display:flex; flex-direction:column; gap:6px; }
.ped-pedido-card { background:#1e1e2e; border-radius:10px; border:1px solid rgba(255,255,255,.07); padding:12px 14px; }
.ped-pedido-card .pp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:6px; }
.ped-pedido-card .pp-num    { font-weight:700; color:#e0e0e0; font-size:.9rem; }
.ped-pedido-card .pp-cliente{ color:#888; font-size:.8rem; }
.ped-pedido-card .pp-total  { font-weight:700; color:#7c9edc; font-size:.85rem; }
.pp-itens-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.pp-itens-table th { color:#666; font-size:.7rem; text-transform:uppercase; padding:4px 8px; text-align:left; border-bottom:1px solid rgba(255,255,255,.05); }
.pp-itens-table td { padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.04); }
.pp-itens-table tr:last-child td { border-bottom:none; }

.ped-empty { text-align:center; padding:40px; color:#666; }
.ped-empty .pe-icon { font-size:2.5rem; margin-bottom:10px; }
.ped-empty p { font-size:.85rem; }
.ped-loading { text-align:center; padding:40px; color:#888; }


/* ── DASHBOARD EXTRA STYLES (linhas 2263-2343) ── */

/* ── DASHBOARD ────────────────────────────────────────── */

.lucro-period-btns { display:flex; gap:4px; }

.lucro-period-btns .lbtn { font-size:11px; padding:3px 10px; }



/* KPIs grid 6 colunas (reutiliza .lkg6 da Lucratividade) */



/* Tabelas do dashboard */

#dpane-pedidos .ltbl td, #dpane-clientes .ltbl td, #dpane-produtos .ltbl td {

  padding: 9px 10px;

  border-bottom: 1px solid var(--border);

  font-size: 13px;

  color: var(--text);

}

#dpane-pedidos .ltbl th, #dpane-clientes .ltbl th, #dpane-produtos .ltbl th {

  padding: 8px 10px;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .05em;

  color: var(--muted);

  background: rgba(255,255,255,.03);

  border-bottom: 1px solid var(--border2);

  text-transform: uppercase;

}

#dpane-pedidos .ltbl tr:hover td, #dpane-clientes .ltbl tr:hover td, #dpane-produtos .ltbl tr:hover td {

  background: rgba(255,255,255,.03);

}



/* Badges de status */

.dstatus { display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.04em; }

.dstatus.atendido { background:rgba(255,107,53,.15); color:#ff6b35; }

.dstatus.parcial   { background:rgba(241,196,15,.15);  color:#f1c40f; }

.dstatus.aberto    { background:rgba(52,152,219,.15);  color:#3498db; }

.dstatus.cancelado { background:rgba(231,76,60,.15);   color:#e74c3c; }

.dstatus.outro     { background:rgba(255,255,255,.08); color:var(--muted); }



/* Barra de % nos rankings */

.dbar-wrap { display:flex; align-items:center; gap:8px; }

.dbar-bg { flex:1; height:4px; background:var(--border); border-radius:2px; min-width:40px; }

.dbar-fill { height:4px; background:var(--accent); border-radius:2px; transition:width .4s; }

.dbar-pct { font-size:11px; color:var(--muted); width:36px; text-align:right; }


/* ── EXEC CARD STYLES (linhas 5638-5639) ── */
    .exec-card { display:flex; flex-direction:column; overflow:hidden; }
    .exec-card-body { flex:1; overflow-y:auto; min-height:0; }

/* ── TABELA DE VENDAS STYLES (linhas 11632-11750) ── */

    .tv-wrap { padding: 8px 0; }

    .tv-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }

    .tv-title { font-family:'Arial',sans-serif; font-weight:700; font-size:18px; }

    .tv-subtitle { color:var(--muted); font-size:12px; margin-top:3px; }

    .tv-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

    .tv-search-wrap { position:relative; }

    .tv-search-wrap svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }

    .tv-search { background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:9px 14px 9px 38px; color:var(--text); font-family:Arial,sans-serif; font-size:13px; outline:none; width:260px; transition:border .2s; }

    .tv-search:focus { border-color:var(--accent); }

    .btn-tv { display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px; border:none; cursor:pointer; font-family:Arial,sans-serif; font-size:13px; font-weight:500; transition:all .2s; }

    .btn-tv.primary { background:var(--accent); color:#fff; }

    .btn-tv.primary:hover { opacity:.85; }

    .btn-tv.secondary { background:var(--surface2); border:1px solid var(--border2); color:var(--muted); }

    .btn-tv.secondary:hover { border-color:var(--accent); color:var(--accent); }

    .btn-tv.success { background:#1a1a1a; border:1px solid #ffffff; color:#ffffff; }

    .btn-tv.success:hover { background:#1c3d6b; }

    .tv-stats { display:flex; gap:16px; margin-bottom:18px; flex-wrap:wrap; }

    .tv-stat { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 20px; display:flex; align-items:center; gap:12px; }

    .tv-stat-val { font-family:'Arial',sans-serif; font-weight:700; font-size:20px; color:var(--text); }

    .tv-stat-lbl { font-size:11px; color:var(--muted); margin-top:1px; }

    .tv-table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }

    .tv-table { width:100%; border-collapse:collapse; }

    .tv-table thead tr { background:var(--surface2); border-bottom:2px solid var(--border2); }

    .tv-table thead th { padding:12px 16px; text-align:left; font-family:Arial,sans-serif; font-size:10px; letter-spacing:1px; color:var(--muted); font-weight:500; white-space:nowrap; cursor:pointer; user-select:none; }

    .tv-table thead th:hover { color:var(--text); }

    .tv-table thead th.sorted { color:var(--accent); }

    .tv-table thead th .sort-arrow { margin-left:4px; opacity:.5; }

    .tv-table thead th.sorted .sort-arrow { opacity:1; }

    .tv-table tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }

    .tv-table tbody tr:last-child { border-bottom:none; }

    .tv-table tbody tr:hover { background:rgba(61,126,255,.05); }

    .tv-table tbody td { padding:11px 16px; font-size:13px; vertical-align:middle; }

    .tv-cod { font-family:Arial,sans-serif; font-size:11px; color:var(--accent); font-weight:500; white-space:nowrap; }

    .tv-desc { color:var(--text); font-size:13px; line-height:1.4; max-width:420px; }

    .tv-oem { font-family:Arial,sans-serif; font-size:12px; color:#ffffff; white-space:nowrap; }

    .tv-oem-empty { color:var(--muted); font-style:italic; font-size:11px; }

    .tv-preco { font-family:'Arial',sans-serif; font-weight:700; font-size:14px; color:var(--text); white-space:nowrap; }

    .tv-empty { text-align:center; padding:60px; color:var(--muted); }

    .tv-count { font-size:12px; color:var(--muted); }

    .tv-montadora-header td { padding:0 !important; }

    .tv-montadora-header { background: linear-gradient(90deg, rgba(61,126,255,0.12), transparent) !important; border-bottom: 1px solid var(--border2) !important; border-top: 2px solid rgba(61,126,255,0.3) !important; }

    .tv-montadora-header:first-child { border-top: none !important; }

    .tv-montadora-name { display:inline-block; font-family:'Arial',sans-serif; font-weight:700; font-size:13px; color:var(--accent); letter-spacing:1.5px; padding:10px 16px 10px 20px; text-transform:uppercase; }

    .tv-montadora-count { font-size:11px; color:var(--muted); font-family:Arial,sans-serif; }

    @media print {

      .topbar, .tv-topbar, .tv-stats { display:none !important; }

      .tab-content { display:block !important; }

      .tv-table-wrap { border:1px solid #ccc; }

      .tv-table thead tr { background:#f5f5f5 !important; }

      body { background:#fff !important; color:#000 !important; }

      .tv-table tbody tr:hover { background:none !important; }

      .tv-print-header { display:flex !important; }

      .tv-montadora-logo { display:inline-block !important; }

    }

    .tv-montadora-logo { display:none; width:32px; height:24px; object-fit:contain; vertical-align:middle; margin-right:10px; opacity:0.9; }

    .tv-print-header { display:none; align-items:center; justify-content:space-between; padding:16px 0 12px 0; margin-bottom:8px; border-bottom:2px solid #222; }

    .tv-print-logo { height:48px; width:auto; }

    .tv-print-title { font-family:'Arial',sans-serif; font-weight:700; font-size:20px; text-align:center; flex:1; }

    .tv-print-date { font-size:13px; color:#666; text-align:right; min-width:100px; }


/* ── LAYOUT FIXES v5.1 — abas com tabelas usam largura total ── */
/* 20/08/2026: #tab-dre entrou aqui. A tabela do DRE ja era width:100%,
   mas o .main a prendia em 1280px; numa tela larga sobrava margem dos
   dois lados e as colunas de mes ficavam apertadas. Mesmo tratamento
   que as outras abas de tabela ganharam na v5.1. */
#tab-tabela, #tab-receber, #tab-pedidos, #tab-dre { max-width: none; }

/* ── Tabela de Vendas / Contas a Receber / Pedidos em Aberto ocupam largura total (igual Compras) quando ativas ── */
body:has(#tab-tabela.active) .main,
body:has(#tab-receber.active) .main,
body:has(#tab-pedidos.active) .main,
body:has(#tab-dre.active) .main {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGIBILIDADE DO DASHBOARD (13/08/2026) — escolha do Alexandre: opcao B.

   Medido na tela: 240 textos com 11px ou menos, sendo 40 deles em 9px.
   Os de 9px sao a linha de margem e participacao ('26.9% mg / 45.8% fat.'),
   que ficava com quase metade do tamanho do valor ao lado.

   Os tamanhos estao escritos no atributo style de cada elemento (o JS monta
   o HTML com font-size:9px etc.), entao a forma de mexer nos 240 de uma vez
   sem editar 240 linhas de JavaScript e pelo seletor de atributo abaixo.

   Escopo: SO dentro do Dashboard. O resto do sistema nao muda.
   9px -> 12px | 10px -> 12px | 11px -> 13px. Acima de 11px fica como esta.
   ═══════════════════════════════════════════════════════════════════════ */
#tab-dashboard [style*="font-size:9px"]  { font-size: 12px !important; }
#tab-dashboard [style*="font-size:10px"] { font-size: 12px !important; }
#tab-dashboard [style*="font-size:11px"] { font-size: 13px !important; }

/* Sobraram 31 textos pequenos que NAO vem do atributo style e sim de classe
   deste proprio arquivo — por isso o seletor de atributo acima nao pegava.
   Sao rotulos e botoes de leitura, todos dentro do Dashboard:
     .lkpi-lbl  rotulo do cartao (FATURAMENTO, PEDIDOS)      10px -> 12px
     .lkpi-sub  subtitulo (8 pedidos no periodo)             10px -> 12px
     .exec-toggle  botoes Fat. / Qtd. / Lucro                10px -> 12px
     .lbtn      botoes de periodo (Atual, Ant., 3 Meses)     11px -> 13px */
#tab-dashboard .lkpi-lbl,
#tab-dashboard .lkpi-sub,
#tab-dashboard .exec-toggle { font-size: 12px !important; }
#tab-dashboard .lbtn        { font-size: 13px !important; }