:root {
    /* Identidade Visual Oriente Peças (Manual oficial)
       Paleta : #068070 / #2D8D6B / #61A262 / #9AB859 / #D0CC52 / #FFFFFF
       Primária   : verde médio teal (#2D8D6B)
       Profunda   : verde profundo (#068070) — usada em hover/destaque
       Suave      : derivado clarinho (#E8F2EE) para fundos
       Acento     : oliva-amarelo (#D0CC52) p/ badges/destaque
       Sidebar    : verde-petróleo escuríssimo, alinhado com brand-deep
    */
    --bg: #f6f8f5;
    --bg-soft: #fafcf9;
    --panel: #ffffff;
    --ink: #102d24;
    --ink-soft: #2f4a40;
    --muted: #708078;
    --line: #e3ebe6;
    --line-strong: #c7d3cb;

    /* Brand principal */
    --brand: #2D8D6B;
    --brand-deep: #068070;
    --brand-soft: #E8F2EE;

    /* Accent = brand (retrocompatibilidade do CSS antigo) */
    --accent: #2D8D6B;
    --accent-soft: #E8F2EE;
    --accent-deep: #068070;
    --orange: #2D8D6B;       /* nome legado, agora é verde brand */
    --orange-soft: #E8F2EE;

    /* Tons da família oliva-amarelo (acento da marca) */
    --gold: #D0CC52;
    --gold-soft: #FBF8DC;
    --yellow: #D0CC52;
    --yellow-soft: #FBF8DC;

    /* Verdes da família (sucesso usa o oliva claro da marca) */
    --green: #61A262;
    --green-soft: #ECF3E4;
    --olive: #9AB859;
    --olive-soft: #F1F5E1;

    /* Sinalizações neutras */
    --red: #c0392b;
    --red-soft: #fdecea;
    --blue: #1e5a92;
    --blue-soft: #e3effa;

    /* Tons escuros (sidebar) */
    --dark: #0E2620;
    --dark-deep: #061813;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(6, 128, 112, 0.05);
    --shadow-card: 0 1px 3px rgba(6, 128, 112, 0.05), 0 4px 12px rgba(6, 128, 112, 0.05);
    --shadow-card-hover: 0 2px 4px rgba(6, 128, 112, 0.07), 0 8px 24px rgba(6, 128, 112, 0.10);
    --shadow-modal: 0 20px 60px rgba(6, 24, 19, 0.25);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: 'Manrope', system-ui, sans-serif;
    background:
      radial-gradient(ellipse 800px 600px at 0% 0%, rgba(45, 141, 107, 0.05), transparent),
      radial-gradient(ellipse 600px 400px at 100% 100%, rgba(201, 162, 39, 0.04), transparent),
      var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
  }
  .app {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 100vh;
    transition: grid-template-columns 0.25s ease;
  }
  .app.sidebar-collapsed { grid-template-columns: 0 1fr; }
  .app.sidebar-collapsed .sidebar {
    overflow: hidden;
    pointer-events: none;
  }

  /* SIDEBAR */
  .sidebar {
    background:
      radial-gradient(ellipse 600px 800px at 50% 40%, rgba(6, 128, 112, 0.18), transparent 70%),
      linear-gradient(180deg, #061813 0%, #0E2620 60%, #11332A 100%);
    color: #d6e6df;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0,0,0,0.4);
  }
  .logo {
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 80px;
  }
  .logo-img {
    max-width: 170px;
    width: 100%;
    height: auto;
    display: block;
  }
  .logo-mark {
    width: 32px; height: 32px;
    background: var(--accent);
    display: grid;
    place-items: center;
    font-family: 'Bricolage Grotesque', serif;
    font-weight: 700;
    color: white;
    font-size: 18px;
    letter-spacing: -0.5px;
  }
  .logo-text {
    font-family: 'Bricolage Grotesque', serif;
    font-weight: 600;
    font-size: 17px;
    color: white;
    letter-spacing: -0.3px;
  }
  .logo-text small {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a96a3;
    font-weight: 500;
    margin-top: 2px;
  }
  .nav {
    flex: 1 1 0;
    min-height: 0;
    padding: 16px 12px;
    overflow-y: auto;
  }
  .nav-section {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
    padding: 14px 12px 8px;
  }
  .nav-module {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 14px 12px 8px;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s;
  }
  .nav-module:hover { color: white; }
  .nav-module .chevron {
    margin-left: auto;
    transition: transform .2s ease;
    width: 12px; height: 12px;
  }
  .nav-module.collapsed .chevron { transform: rotate(-90deg); }
  /* Módulos fixos (data-fixo=1): sempre abertos, sem chevron, sem hover */
  .nav-module[data-fixo="1"] { cursor: default; }
  .nav-module[data-fixo="1"]:hover { color: rgba(255, 255, 255, 0.72); }
  .nav-module[data-fixo="1"] .chevron { display: none; }
  /* Header completamente escondido — só os items aparecem (switcher força style.display='' no fixo, daí precisa de !important) */
  .nav-module[data-escondido="1"] { display: none !important; }
  .nav-module-items {
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav-module-items.collapsed { max-height: 0 !important; }
  .nav-subheader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 4px;
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(208, 204, 82, 0.85); /* gold da marca p/ destacar como rótulo de módulo */
  }
  .nav-subheader:first-child { margin-top: 0; }
  .nav-subheader::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.07);
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    transition: all 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    margin-bottom: 1px;
  }
  .nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: white;
  }
  .nav-item.active {
    background: var(--accent);
    color: white;
  }
  .nav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .nav-item .badge {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
  }
  .nav-item.active .badge {
    background: rgba(0,0,0,0.2);
  }

  .sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: inherit;
  }
  .api-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(45, 134, 89, 0.12);
    color: #6fc28f;
    border-radius: var(--radius);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 12px 12px;
  }
  .api-status::before {
    content: '';
    width: 6px; height: 6px;
    background: #6fc28f;
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    display: grid;
    place-items: center;
    color: white;
    font-weight: 700;
    font-size: 13px;
  }
  .user-info { font-size: 12px; }
  .user-info strong { color: white; display: block; font-weight: 600; }
  .user-info span { color: #8a96a3; }

  /* MAIN */
  .main {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* sem flex aqui — topbar é position:sticky e o resto flui em block normal.
       Flex column estava cortando o scroll na última linha das páginas longas. */
  }
  .content {
    padding-bottom: 80px; /* respiro pra última linha não ficar colada na barra inferior */
  }
  .topbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .sidebar-toggle {
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .sidebar-toggle:hover { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
  .sidebar-toggle svg { width: 18px; height: 18px; }

  /* Botão de ícone do topbar (engrenagem admin, etc) */
  .topbar-icon-btn {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .topbar-icon-btn:hover {
    background: var(--bg);
    border-color: var(--line-strong);
    color: var(--accent);
  }
  .topbar-icon-btn svg { width: 18px; height: 18px; }

  /* Itens do dropdown de Configurações (engrenagem do topbar) */
  .cfg-dd-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    box-sizing: border-box;
    background: #fff; border: 0;
    padding: 10px 14px;
    font-size: 13px; color: var(--ink);
    cursor: pointer; text-align: left;
    transition: background 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
  }
  .cfg-dd-item:hover { background: var(--bg); }
  .cfg-dd-item svg {
    color: var(--ink-soft);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  /* Seletor de módulo estilo Protheus (pill com avatar + nome + subtítulo) */
  .modulo-switcher {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 14px 8px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    min-width: 220px;
  }
  .modulo-switcher:hover {
    background: var(--bg);
    border-color: var(--line-strong);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  .modulo-switcher-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--modulo-cor, #23322a);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .modulo-switcher-text {
    text-align: left;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
  }
  .modulo-switcher-nome {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .modulo-switcher-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .modulo-switcher-chevron {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
  }
  .modulo-dropdown {
    position: absolute;
    top: 64px;
    right: 24px;
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 100;
  }
  .modulo-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
  }
  .modulo-dropdown-item:hover { background: var(--bg); }
  .modulo-dropdown-item.ativo { background: var(--bg-soft); }
  .modulo-dropdown-divider {
    height: 1px;
    background: var(--line);
    margin: 6px 8px;
  }
  .modulo-icone-bg {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  /* ====== Catálogo — Painel ====== */
  .cat-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 900px) {
    .cat-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .cat-kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .cat-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  }
  .cat-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cat-kpi-icon svg { width: 24px; height: 24px; }
  .cat-kpi-data { flex: 1; min-width: 0; }
  .cat-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    font-family: 'Bricolage Grotesque', serif;
  }
  .cat-kpi-label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-top: 4px;
  }

  /* Painel preto de Ações Rápidas */
  .cat-acoes-rapidas {
    background: linear-gradient(135deg, #1a2530 0%, #0f1922 100%);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cat-acoes-titulo {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cat-acao-btn {
    background: var(--brand-soft);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    font-family: inherit;
  }
  .cat-acao-btn:hover {
    background: #fff;
    border-color: var(--brand);
    color: var(--brand-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6,128,112,0.12);
  }
  .cat-acao-btn svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--brand);
  }
  /* Variante escura (usada no card antigo cat-acoes-rapidas — não removi pra não quebrar outros lugares) */
  .cat-acoes-rapidas .cat-acao-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
    color: #fff;
  }
  .cat-acoes-rapidas .cat-acao-btn svg { color: #fff; }
  .cat-acoes-rapidas .cat-acao-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
    transform: none;
    box-shadow: none;
  }

  /* Item destacado no sidebar (Assistente IA) */
  .nav-item-featured {
    background: linear-gradient(135deg, rgba(217,119,6,0.18), rgba(180,83,9,0.10));
    border: 1px solid rgba(217,119,6,0.30);
    color: #fff;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .nav-item-featured:hover {
    background: linear-gradient(135deg, rgba(217,119,6,0.28), rgba(180,83,9,0.18));
  }
  .badge-ia {
    background: #d97706;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
  }
  .badge-danger {
    background: #dc2626;
    color: #fff;
  }

  /* ====== Catálogo — Badges & ações da tabela ====== */
  .cat-code-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    font-family: 'JetBrains Mono', monospace;
  }
  .cat-group-badge {
    display: inline-block;
    background: rgba(59,130,246,0.10);
    color: #1d4ed8;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
  }
  .cat-action-btn {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-soft);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    margin-right: 2px;
  }
  .cat-action-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .cat-action-btn svg { width: 14px; height: 14px; }

  /* ====== PRODUTOS (Cadastros Centrais — estilo Operações) ====== */
  .prod-header {
    margin-bottom: 24px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .prod-titulo {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.5px;
    margin: 0;
  }
  .prod-sub { font-size: 13px; color: var(--muted); margin: 4px 0 0 0; }

  /* Cards de ações/páginas no Meu Painel (estilo Portal) — só no mobile */
  .cat-painel-acoes-mobile { display: none; }
  @media (max-width: 767px) {
    .cat-painel-acoes-desktop { display: none !important; }
    .cat-painel-acoes-mobile  { display: block; }
  }
  .cat-painel-acoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }
  /* Liquid Glass iOS-style — translúcido + blur + highlight no topo.
     Mantém verde Oriente como tint (não troca cor); inline styles antigos
     com gradient sólido nos botões individuais são sobrescritos via !important. */
  .cat-painel-card {
    position: relative;
    background: linear-gradient(135deg, rgba(45, 141, 107, 0.72) 0%, rgba(14, 79, 59, 0.78) 100%) !important;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 112px;
    font-family: inherit;
    transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s, border-color 0.18s;
    box-shadow:
      0 6px 18px rgba(14, 79, 59, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
  /* Shine sutil no topo — reforça o "vidro" */
  .cat-painel-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    border-radius: 16px 16px 0 0;
  }
  .cat-painel-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.36);
    box-shadow:
      0 14px 36px rgba(14, 79, 59, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  }
  .cat-painel-card-icone {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .cat-painel-card-titulo {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }
  .cat-painel-card-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    letter-spacing: 0.01em;
  }

  /* ===== Kanbans / Funis — Liquid Glass padrão pro Meu Kanban + funis ===== */
  /* Barra de KPIs do topo (Meu Kanban / Tarefas) */
  .mk-kpi-bar {
    background: rgba(255, 255, 255, 0.68) !important;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
      0 6px 20px rgba(14, 79, 59, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  }

  /* Cards "Quadros Operacionais" */
  .mk-quadro-card {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
      0 4px 14px rgba(14, 79, 59, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, border-color .18s;
    color: var(--ink);
    font-family: inherit;
  }
  .mk-quadro-card:hover {
    transform: translateY(-2px);
    border-color: rgba(14, 79, 59, 0.22);
    box-shadow:
      0 12px 28px rgba(14, 79, 59, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }

  /* Wrapper externo do board kanban — sem caixa branca chapada */
  .kanban-board-wrapper {
    background: transparent !important;
    border: none !important;
  }
  .kanban-colunas-wrap {
    background: linear-gradient(135deg, rgba(240, 249, 244, 0.45) 0%, rgba(248, 250, 252, 0.30) 100%) !important;
  }

  /* Coluna Kanban — base translúcida cinza-azulada */
  .kanban-col {
    background: rgba(241, 245, 249, 0.55) !important;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow:
      0 4px 14px rgba(14, 79, 59, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  /* Variante "Pendências" — tint amarelo */
  .kanban-col.kanban-col-pendencias {
    background: linear-gradient(180deg, rgba(254, 243, 199, 0.78) 0%, rgba(254, 243, 199, 0.55) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow:
      0 6px 18px rgba(245, 158, 11, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  .kanban-drop-zone { background: transparent !important; }
  .kanban-col-header { background: transparent !important; }

  /* Card dentro de coluna kanban — glass branco com leve tint */
  .kanban-card {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      0 2px 8px rgba(14, 79, 59, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  .kanban-card:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 79, 59, 0.20) !important;
    box-shadow:
      0 8px 22px rgba(14, 79, 59, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }
  /* Tarefa atrasada — pulsa em vermelho pra chamar atenção do vendedor.
     Aplicado nos cards de tarefa E nos cards de opp com tarefa atrasada. */
  .kanban-card.tarefa-atrasada,
  .opp-card-com-tarefa-atrasada {
    animation: pulseAtraso 1.6s ease-in-out infinite !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
  }
  @keyframes pulseAtraso {
    0%, 100% {
      background: rgba(254, 226, 226, 0.55) !important;
      box-shadow:
        0 0 0 0 rgba(220, 38, 38, 0.0),
        0 2px 8px rgba(220, 38, 38, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    50% {
      background: rgba(254, 202, 202, 0.78) !important;
      box-shadow:
        0 0 0 6px rgba(220, 38, 38, 0.10),
        0 6px 18px rgba(220, 38, 38, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
  }

  /* Widgets do dashboard (Meu Painel) — Liquid Glass iOS-style */
  .dashboard-widget {
    background: var(--og-glass);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
      var(--og-shadow),
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 0 0 .5px rgba(255,255,255,0.04);
    transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s, border-color 0.2s;
    position: relative;
  }
  .dashboard-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%);
    pointer-events: none;
    border-radius: inherit;
  }
  .dashboard-widget:hover {
    transform: translateY(-2px);
    border-color: var(--og-hairline);
    box-shadow:
      0 18px 40px -8px color-mix(in srgb, var(--og-ink) 18%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .dashboard-widget.is-editing {
    border: 2px dashed var(--og-green);
    cursor: move;
    background: color-mix(in srgb, var(--og-green) 8%, var(--og-glass));
  }

  /* Header com caixa colorida do ícone + título embaixo (estilo screenshot) */
  .dashboard-widget-header {
    padding: 20px 22px 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    gap: 10px;
  }
  .dashboard-widget-header > div:first-child {
    display: flex; align-items: center; gap: 11px;
    min-width: 0; flex: 1;
  }
  /* O <span> do ícone vira uma caixa de vidro tingida com a cor do widget */
  .dashboard-widget-header > div:first-child > span[style*="display:inline-flex"]:not([style*="color:#cbd5e1"]) {
    background: color-mix(in srgb, currentColor 18%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 13px;
    width: 42px; height: 42px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    flex-shrink: 0;
  }
  .dashboard-widget-header > div:first-child > span[style*="display:inline-flex"] svg {
    width: 20px !important; height: 20px !important;
  }
  .dashboard-widget-titulo {
    font-family: 'Sora', 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--og-ink);
    font-size: 14px;
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-widget-body {
    flex: 1;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    color: var(--og-ink);
  }
  /* Refresh button no header (estado normal) */
  .dashboard-widget-header > button {
    color: var(--og-ink-3) !important;
  }
  .dashboard-widget-header > button:hover {
    background: var(--og-hairline-soft) !important;
    color: var(--og-ink) !important;
  }

  /* Itens do body — hover glass */
  .dashboard-widget .widget-body > div[onclick]:hover,
  .dashboard-widget-body > div[onclick]:hover {
    background: var(--og-hairline-soft) !important;
  }
  /* Override do border-bottom hardcoded (#f1f5f9) nas linhas dos widgets */
  .dashboard-widget-body > div[onclick][style*="border-bottom"] {
    border-bottom-color: var(--og-hairline-soft) !important;
  }
  /* Tipografia interna dos widgets adapta ao tema */
  .dashboard-widget-body div[style*="color:#0E4F3B"] { color: var(--og-ink) !important; }
  .dashboard-widget-body div[style*="color:#64748b"],
  .dashboard-widget-body div[style*="color:#94a3b8"],
  .dashboard-widget-body span[style*="color:#94a3b8"],
  .dashboard-widget-body span[style*="color:#64748b"] { color: var(--og-ink-3) !important; }
  .dashboard-widget-body div[style*="color:#475569"] { color: var(--og-ink-2) !important; }

  /* Scrollbar dentro do widget */
  .dashboard-widget-body::-webkit-scrollbar { width: 6px; }
  .dashboard-widget-body::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }

  /* Pills do hero — glass translúcido sobre o gradiente verde do banner */
  .cat-painel-pill {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 8px 14px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.18s, transform 0.18s, border-color 0.18s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .cat-painel-pill:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-1px);
  }

  /* Grid de KPIs (usado em Análise de Estoque, Curva ABC, etc.) */
  .prod-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  .prod-kpi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .prod-kpi-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  .prod-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
  }
  .prod-kpi-sub {
    font-size: 11px;
    color: var(--muted);
  }

  .prod-toolbar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
  /* Toggle segmentado Com/Sem bruto Brasil (Análise de Estoque) */
  .estq-seg {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: #eef3f0;
    border: 1px solid var(--line);
  }
  .estq-seg button {
    border: 0;
    background: transparent;
    padding: 7px 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #5b6b64;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  }
  .estq-seg button:hover { color: #0E4F3B; }
  .estq-seg button.on {
    background: #0E4F3B;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14,79,59,0.25);
  }
  /* Análise de Estoque: cabeçalho sem o cartão branco do .prod-toolbar (Pablo, 15/09) —
     só essa página; as outras que usam .prod-toolbar (ex.: Produtos) mantêm o cartão. */
  #page-estoque > .prod-toolbar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 0;
  }
  .prod-toolbar-icon { color: #a8a29e; margin-left: 8px; flex-shrink: 0; }
  .prod-toolbar-input {
    flex: 1; border: 0; outline: 0; font-size: 13px;
    color: var(--ink); background: transparent; padding: 6px 4px; min-width: 0;
  }
  .prod-toolbar-input::placeholder { color: #a8a29e; }
  .prod-toolbar-select {
    font-size: 12px; border: 1px solid #e7e5e0; background: #fff;
    padding: 6px 10px; border-radius: 8px; color: var(--ink-soft); outline: 0; cursor: pointer;
  }
  .prod-toolbar-select:focus { border-color: #2D8D6B; }
  .prod-tabela-wrap {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  }
  .prod-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
  .prod-tabela thead { background: #faf9f7; border-bottom: 1px solid var(--line); }
  .prod-tabela th {
    text-align: left; padding: 10px 14px; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 600;
  }
  .prod-tabela th.right  { text-align: right; }
  .prod-tabela th.center { text-align: center; }
  .prod-tabela tbody tr {
    border-bottom: 1px solid var(--line);
    cursor: pointer; transition: background 0.12s;
  }
  .prod-tabela tbody tr:hover { background: rgba(217,119,6,0.04); }
  .prod-tabela td { padding: 11px 14px; color: var(--ink); }
  .prod-tabela td.mono   { font-family: 'JetBrains Mono', monospace; color: var(--muted); }
  .prod-tabela td.right  { text-align: right; font-family: 'JetBrains Mono', monospace; }
  .prod-tabela td.center { text-align: center; }
  .prod-tabela td.estoque-zero { color: #dc2626; }
  .prod-cat-tag { font-size: 11px; color: #a8a29e; margin-top: 2px; }
  .prod-subst-tag {
    display: inline-block; font-size: 10px;
    background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe;
    padding: 1px 6px; border-radius: 999px; margin-left: 6px;
    font-family: 'JetBrains Mono', monospace;
  }
  .prod-subst-tag.descont {
    background: #f5f5f4; color: #78716c; border-color: #e7e5e0; text-decoration: line-through;
  }
  .prod-abc-badge {
    display: inline-block; width: 22px; height: 22px; line-height: 22px;
    text-align: center; border-radius: 6px; font-weight: 700; font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
  }
  .prod-abc-A { background: #ecfdf5; color: #047857; }
  .prod-abc-B { background: #fefce8; color: #a16207; }
  .prod-abc-C { background: #fef2f2; color: #b91c1c; }
  .prod-abc--  { background: #f5f5f4; color: #a8a29e; }
  .prod-chevron { color: #d6d3d1; }
  tr:hover .prod-chevron { color: #78716c; }

  /* ====== Botão "Voltar" — usado em todos os detalhes (produtos, usuários, cliente, etc) ====== */
  .prod-det-voltar {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid #cbd5d3;
    border-radius: 8px;
    padding: 7px 14px 7px 10px;
    margin-bottom: 14px;
    font-size: 13px; font-weight: 600;
    color: #0E4F3B;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .prod-det-voltar::before {
    content: '';
    width: 14px; height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='12' x2='5' y2='12'/><polyline points='12 19 5 12 12 5'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='12' x2='5' y2='12'/><polyline points='12 19 5 12 12 5'/></svg>") no-repeat center / contain;
    transition: transform 0.15s;
  }
  .prod-det-voltar:hover {
    background: #0E4F3B;
    border-color: #0E4F3B;
    color: #fff;
  }
  .prod-det-voltar:hover::before { transform: translateX(-2px); }
  .prod-det-voltar:active { transform: translateY(1px); }
  .prod-det-breadcrumb {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
  }
  .prod-det-codigo {
    color: var(--og-green); font-weight: 800; font-family: ui-monospace, 'JetBrains Mono', monospace;
    background: color-mix(in srgb, var(--og-green) 14%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--og-green) 28%, transparent);
    padding: 4px 12px !important; border-radius: 99px !important;
    font-size: 12.5px !important; letter-spacing: 0.5px;
  }
  .prod-det-categoria { color: var(--og-green); font-weight: 700; }
  .prod-det-titulo {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 28px; font-weight: 700; color: var(--og-ink);
    letter-spacing: -0.5px; margin: 0; line-height: 1.2;
    text-transform: uppercase;
  }
  .prod-det-fornecedor {
    font-size: 12px; color: var(--og-ink-3); margin: 6px 0 0 0;
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .prod-det-btn-pedido {
    background: linear-gradient(145deg, #2fe06f, #13b552);
    color: #ffffff; border: 0;
    border-radius: 999px; padding: 10px 22px; font-weight: 800; font-size: 12px;
    cursor: pointer; flex-shrink: 0; font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.4px;
    box-shadow: 0 6px 16px -4px rgba(37,211,102,.5), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform 0.15s;
  }
  .prod-det-btn-pedido:hover { transform: translateY(-1px); color: #ffffff; }

  .prod-det-kpi-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 14px; margin-bottom: 24px;
  }
  @media (max-width: 1200px) { .prod-det-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 800px) { .prod-det-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

  .prod-det-kpi {
    background: var(--og-glass);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--og-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
    position: relative;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  }
  .prod-det-kpi::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%);
    pointer-events: none; border-radius: inherit;
  }
  .prod-det-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--og-hairline);
  }
  .prod-det-kpi-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--og-ink-3); font-weight: 800;
    position: relative; z-index: 1;
  }
  .prod-det-kpi-header svg { color: var(--og-green); opacity: 0.85; }
  .prod-det-kpi-valor {
    font-family: 'Bricolage Grotesque', serif; font-size: 30px; font-weight: 800;
    color: var(--og-ink); margin: 10px 0 4px 0; letter-spacing: -0.5px;
    position: relative; z-index: 1;
  }
  .prod-det-kpi-sub { font-size: 11px; color: var(--og-ink-3); position: relative; z-index: 1; }

  .prod-det-tabs {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--og-glass-strong);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 999px;
    margin-bottom: 20px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
    overflow-x: auto;
    max-width: 100%;
  }
  .prod-det-tab {
    background: transparent; border: 0; padding: 8px 16px;
    font-size: 11px; font-weight: 700; color: var(--og-ink-3); cursor: pointer;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
    font-family: inherit; text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .prod-det-tab:hover:not(.active) { background: var(--og-glass-deep); color: var(--og-ink); }
  .prod-det-tab.active {
    background-color: #13b552;
    background-image: linear-gradient(145deg, #2fe06f, #13b552);
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(37,211,102,.4), inset 0 1px 0 rgba(255,255,255,0.3);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
  }
  .prod-det-tab.active:hover {
    background-color: #0fa14a;
    background-image: linear-gradient(145deg, #2fd862, #0fa14a);
  }

  .prod-det-secao {
    background: var(--og-glass);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--og-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
    position: relative;
  }
  .prod-det-secao::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%);
    pointer-events: none; border-radius: inherit;
  }
  .prod-det-secao > * { position: relative; z-index: 1; }
  .prod-det-secao h3 {
    font-family: 'Bricolage Grotesque', serif; font-size: 16px; font-weight: 700;
    color: var(--og-ink); margin: 0; letter-spacing: -0.2px;
  }
  .prod-det-secao h4.prod-det-stat-label {
    font-size: 10px; color: var(--og-ink-3); margin: 0 0 8px 0;
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800;
  }
  .prod-det-secao-sub { font-size: 11px; color: var(--og-ink-3); margin: 4px 0 14px 0; }
  .prod-det-linha {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 0; border-bottom: 1px solid var(--og-hairline-soft); font-size: 13px;
  }
  .prod-det-linha:last-child { border-bottom: 0; }
  .prod-det-linha span { color: var(--og-ink-3); }
  .prod-det-linha strong { color: var(--og-ink); font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 700; }

  .prod-det-stat-value {
    font-family: 'Bricolage Grotesque', serif; font-size: 32px; font-weight: 800;
    color: var(--og-ink); margin: 6px 0 4px 0;
  }
  .prod-det-stat-value span { font-size: 14px; color: var(--og-ink-3); font-weight: 500; }
  .prod-det-stat-sub { font-size: 11px; color: var(--og-ink-3); }

  .prod-det-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .prod-det-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  @media (max-width: 900px) {
    .prod-det-grid2 { grid-template-columns: 1fr; }
    .prod-det-grid3 { grid-template-columns: 1fr; }
  }

  .prod-det-btn-editar {
    background: transparent; border: 1px solid var(--line); border-radius: 8px;
    padding: 6px 12px; font-size: 12px; color: var(--ink-soft); cursor: pointer;
    font-family: inherit; transition: border-color 0.15s, color 0.15s;
  }
  .prod-det-btn-editar:hover { border-color: #2D8D6B; color: #2D8D6B; }

  .prod-det-cfg-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px;
  }
  .prod-det-dim-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px;
  }
  @media (max-width: 800px) {
    .prod-det-cfg-grid, .prod-det-dim-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .prod-det-cfg-label {
    font-size: 10px; color: var(--muted); text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 600;
  }
  .prod-det-cfg-valor {
    font-family: 'Bricolage Grotesque', serif; font-size: 32px; font-weight: 700;
    color: var(--ink); margin: 6px 0 4px 0;
  }
  .prod-det-cfg-sub { font-size: 11px; color: var(--muted); }
  .prod-det-vol-info {
    margin-top: 14px; padding: 10px 14px; background: var(--bg);
    border-radius: 8px; font-size: 12px; color: var(--ink-soft);
  }
  .prod-det-cfg-input {
    font-family: 'Bricolage Grotesque', serif; font-size: 32px; font-weight: 700;
    color: var(--ink);
    background: var(--bg-soft); border: 1.5px solid #2D8D6B; border-radius: 8px;
    padding: 4px 10px; width: 100%; outline: none;
    margin: 6px 0 4px 0;
    transition: box-shadow 0.15s;
  }
  .prod-det-cfg-input:focus { box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
  .prod-det-cfg-input::-webkit-inner-spin-button { opacity: 1; }

  /* ============ Galeria HERO (topo do detalhe) ============ */
  /* Todas as fotos lado-a-lado em uma linha (a primeira marcada PRINCIPAL).
     Scroll horizontal se passarem mais que cabem na largura. */
  .prod-fotos-hero {
    margin-bottom: 18px;
    display: flex;
    gap: 10px;
    height: 220px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  .prod-fotos-hero-vazio {
    flex: 1 1 100%;
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
  }
  .prod-foto-item {
    position: relative;
    flex: 1 1 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    transition: box-shadow .15s, border-color .15s, transform .15s;
  }
  .prod-foto-item:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    border-color: #2D8D6B;
    transform: translateY(-2px);
  }
  .prod-foto-item.principal { border: 2px solid #2D8D6B; }
  .prod-foto-item img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    background: linear-gradient(135deg, #fafaf9, #f5f5f4);
  }
  .prod-foto-item-badge {
    position: absolute; top: 8px; left: 8px;
    background: #2D8D6B; color: #fff;
    padding: 2px 8px; border-radius: 6px;
    font-size: 9px; font-weight: 800; letter-spacing: .4px;
  }

  /* ============ Lightbox ============ */
  .prod-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
    animation: prodLbFade .15s ease;
  }
  @keyframes prodLbFade { from { opacity: 0; } to { opacity: 1; } }
  .prod-lightbox img {
    max-width: 92vw; max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0,0,0,.7);
  }
  .prod-lightbox-fechar {
    position: absolute; top: 18px; right: 22px;
    background: rgba(255,255,255,.1); color: #fff;
    border: 0; width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 28px; cursor: pointer;
    transition: background .15s;
  }
  .prod-lightbox-fechar:hover { background: rgba(255,255,255,.25); }
  .prod-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.1); color: #fff;
    border: 0; width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 36px; line-height: 1; cursor: pointer;
    transition: background .15s;
  }
  .prod-lightbox-nav:hover { background: rgba(255,255,255,.25); }
  .prod-lightbox-nav.prev { left: 24px; }
  .prod-lightbox-nav.next { right: 24px; }
  .prod-lightbox-contador {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.75);
    font-size: 13px; font-weight: 600;
    background: rgba(0,0,0,.4);
    padding: 6px 14px; border-radius: 20px;
  }

  .prod-foto-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 14px;
  }
  .prod-foto-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    cursor: grab;
  }
  .prod-foto-card:active { cursor: grabbing; }
  .prod-foto-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
  .prod-foto-card.arrastando { opacity: 0.4; cursor: grabbing; }
  .prod-foto-card.drop-target { outline: 2px dashed #2D8D6B; outline-offset: -3px; transform: scale(1.03); }
  .prod-foto-card.principal { border: 2px solid #2D8D6B; }
  .prod-foto-card.quebrada { background: repeating-linear-gradient(45deg,#fef2f2,#fef2f2 8px,#fee2e2 8px,#fee2e2 16px); }
  .prod-foto-card.quebrada::after { content: 'imagem não encontrada'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #dc2626; }
  .prod-foto-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .prod-foto-badge {
    position: absolute; top: 6px; left: 6px;
    background: #2D8D6B; color: #fff;
    padding: 2px 8px; border-radius: 6px;
    font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
  }
  .prod-foto-acoes {
    position: absolute; top: 6px; right: 6px;
    display: flex; gap: 4px;
    opacity: 0; transition: opacity 0.15s;
  }
  .prod-foto-card:hover .prod-foto-acoes { opacity: 1; }
  .prod-foto-acoes button {
    background: rgba(0,0,0,0.7); color: #fff;
    border: 0; border-radius: 6px;
    width: 26px; height: 26px;
    cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
  }
  .prod-foto-acoes button:hover { background: rgba(0,0,0,0.9); }

  .prod-foto-sugestao {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    cursor: pointer; padding: 0; overflow: hidden;
    transition: border-color 0.12s, transform 0.12s;
    font-family: inherit;
  }
  .prod-foto-sugestao:hover { border-color: #2D8D6B; transform: translateY(-2px); }
  .prod-foto-sugestao img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
  .prod-foto-nome { font-size: 10px; padding: 4px 6px; color: var(--ink-soft); font-family: 'JetBrains Mono', monospace; word-break: break-all; }

  .prod-subst-opcao {
    display: block; width: 100%; text-align: left; padding: 10px 12px;
    border: 0; border-top: 1px solid var(--line); background: #fff;
    cursor: pointer; font-size: 13px; color: var(--ink-soft);
    transition: background 0.12s; font-family: inherit;
  }
  .prod-subst-opcao:hover { background: var(--bg); color: var(--ink); }
  .prod-subst-opcao strong { color: #2D8D6B; font-family: 'JetBrains Mono', monospace; }

  /* ====== Catálogo — Modal de detalhe ====== */
  .cat-modal-erp-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 8px;
    margin-top: 8px;
    letter-spacing: 0.4px;
    font-family: 'JetBrains Mono', monospace;
  }
  .cat-modal-grid {
    display: grid;
    grid-template-columns: minmax(380px, 1.1fr) minmax(360px, 1fr);
    gap: 28px;
    align-items: start;
  }
  @media (max-width: 800px) {
    .cat-modal-grid { grid-template-columns: 1fr; }
  }
  .cat-modal-galeria {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
  }
  .cat-modal-foto-principal {
    width: 100%;
    height: 480px;
    max-height: 60vh;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cat-modal-foto-principal img {
    width: 100%; height: 100%; object-fit: contain;
    display: block;
  }

  /* === Versões do produto (1003 / 1003A / 1003G) === */
  .cat-modal-versoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
  }
  .cat-modal-versao-card {
    border: 2px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
  }
  .cat-modal-versao-card:not(.ativa):hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 79, 59, 0.12);
  }
  .cat-modal-versao-card.ativa {
    border-color: #0E4F3B;
    background: #f0fdf4;
    cursor: default;
    box-shadow: 0 0 0 3px rgba(14, 79, 59, 0.18);
  }
  .cat-modal-versao-thumb {
    width: 100%;
    aspect-ratio: 1/1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line);
  }
  .cat-modal-versao-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .cat-modal-versao-noimg { color: var(--muted); font-size: 28px; }
  .cat-modal-versao-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cat-modal-versao-tag {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
  }
  .cat-modal-versao-cod {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
  }
  .cat-modal-versao-saldo { font-size: 12px; font-weight: 600; }
  .cat-modal-versao-preco { font-size: 12px; color: var(--muted); }
  .cat-modal-sem-foto {
    color: var(--muted);
    font-size: 13px;
    padding: 40px;
    text-align: center;
  }
  .cat-modal-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px;
  }
  .cat-modal-thumb {
    flex-shrink: 0;
    width: 64px; height: 64px;
    border: 2px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
  }
  .cat-modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cat-modal-thumb:hover { border-color: var(--accent); }
  .cat-modal-thumb.ativa { border-color: var(--accent); transform: scale(1.05); }

  .cat-modal-info { display: flex; flex-direction: column; gap: 14px; }
  .cat-modal-secao {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .cat-modal-secao-titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ink-soft);
    margin-bottom: 10px;
  }
  .cat-modal-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--ink);
    padding: 4px 0;
  }
  .cat-modal-pn-badge {
    background: rgba(59,130,246,0.10);
    color: #1d4ed8;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
  }
  .cat-modal-grupo-badge {
    background: rgba(59,130,246,0.10);
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
  }
  .cat-modal-bloco-logistica {
    background: rgba(22,163,74,0.08);
    border: 1px solid rgba(22,163,74,0.20);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .cat-modal-observacao,
  .cat-modal-extra {
    margin-top: 16px;
    background: var(--bg);
    border-radius: 12px;
    padding: 14px 16px;
  }

  /* ====== Catálogo — Universidade ====== */
  .cat-curso-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
  }
  .cat-curso-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }
  .cat-curso-thumb {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #d97706, #b45309);
    position: relative;
    overflow: hidden;
  }
  .cat-curso-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cat-curso-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
  }
  .cat-curso-badge-ok {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
  }
  .cat-curso-info { padding: 14px 16px; flex: 1; }
  .cat-curso-titulo { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
  .cat-curso-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
  .cat-curso-meta { font-size: 11px; color: var(--ink-soft); margin-top: 8px; }

  /* Quiz */
  .cat-quiz-pergunta {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .cat-quiz-enunciado { font-weight: 600; color: var(--ink); margin-bottom: 10px; font-size: 14px; }
  .cat-quiz-opcoes { display: flex; flex-direction: column; gap: 6px; }
  .cat-quiz-opcao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 13px;
  }
  .cat-quiz-opcao:hover { background: rgba(45, 141, 107,0.08); }
  .cat-quiz-opcao input { margin-top: 3px; }

  /* Informativos */
  .cat-info-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
  }
  .cat-info-card.nao-lida {
    border-left: 4px solid #d97706;
    background: rgba(217,119,6,0.04);
  }
  .cat-info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
  }
  .cat-info-titulo { font-size: 15px; font-weight: 700; color: var(--ink); }
  .cat-info-bolinha {
    display: inline-block;
    width: 8px; height: 8px;
    background: #d97706;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
  }
  .cat-info-data { font-size: 11px; color: var(--muted); margin-top: 4px; }
  .cat-info-corpo { font-size: 14px; color: var(--ink-soft); line-height: 1.6; white-space: pre-wrap; }

  /* ===== Fichas Técnicas — og-glass identity ===== */

  /* Sub-tabs Comunicados | Fichas Técnicas */
  .cat-ft-subtabs {
    display: inline-flex;
    background: var(--og-glass);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    box-shadow: var(--og-shadow);
  }
  .cat-ft-subtab {
    border: 0; background: transparent;
    padding: 8px 16px;
    font-size: 12.5px; font-weight: 700;
    color: var(--og-ink-3);
    border-radius: 8px;
    cursor: pointer;
    transition: background .18s, color .18s, transform .15s;
    letter-spacing: 0.2px;
  }
  .cat-ft-subtab:hover {
    color: var(--og-ink);
    background: color-mix(in srgb, var(--og-green) 8%, transparent);
  }
  .cat-ft-subtab.active {
    background: var(--og-green);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--og-green) 35%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.18);
  }

  /* Barra de busca */
  .cat-ft-busca {
    flex: 1; min-width: 240px; max-width: 460px;
    padding: 10px 14px;
    border: 1px solid var(--og-hairline-soft);
    border-radius: 12px;
    background: var(--og-glass);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    color: var(--og-ink);
    font-size: 13.5px;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
  }
  .cat-ft-busca::placeholder { color: var(--og-ink-3); }
  .cat-ft-busca:focus {
    border-color: var(--og-green);
    background: var(--og-glass-strong);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--og-green) 15%, transparent);
  }

  /* Grid de cards */
  .cat-ft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
  }
  .cat-ft-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--og-ink-3);
    padding: 48px 20px;
    font-size: 13.5px;
    background: var(--og-glass);
    border: 1px dashed var(--og-hairline-soft);
    border-radius: 16px;
  }

  /* Card — og-glass com glassmorphism */
  .cat-ft-card {
    position: relative;
    background: var(--og-glass);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 18px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--og-shadow),
                inset 0 1px 0 rgba(255,255,255,0.18),
                inset 0 0 0 .5px rgba(255,255,255,0.04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .18s ease;
  }
  .cat-ft-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%);
  }
  .cat-ft-card:hover {
    transform: translateY(-3px);
    border-color: var(--og-hairline);
    box-shadow: 0 24px 50px -16px color-mix(in srgb, var(--og-green) 18%, var(--og-shadow));
  }

  /* Header — translúcido com tint verde + título grande */
  .cat-ft-header {
    position: relative; z-index: 1;
    background: linear-gradient(135deg,
                  color-mix(in srgb, var(--og-green) 14%, transparent),
                  color-mix(in srgb, var(--og-green) 6%, transparent));
    color: var(--og-ink);
    padding: 16px 18px 12px;
    text-align: left;
    font-family: 'Bricolage Grotesque', serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.2px;
    border-bottom: 1px solid var(--og-hairline-soft);
  }
  .cat-ft-header-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--og-green), transparent 65%);
    opacity: 0.85;
  }

  /* Tabela de specs */
  .cat-ft-rows {
    position: relative; z-index: 1;
    padding: 12px 18px 4px;
    display: flex; flex-direction: column;
    gap: 0;
  }
  .cat-ft-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--og-hairline-soft);
    font-size: 12.5px;
  }
  .cat-ft-row:last-child { border-bottom: 0; }
  .cat-ft-row-label {
    font-weight: 700;
    color: var(--og-ink-3);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  .cat-ft-row-valor {
    color: var(--og-ink);
    text-align: right;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.35;
  }

  /* Divisor entre specs e detalhes */
  .cat-ft-divider {
    border: 0;
    border-top: 1px dashed var(--og-hairline-soft);
    margin: 8px 18px 0;
    opacity: 0.7;
  }

  /* Detalhes gerais */
  .cat-ft-detalhes {
    position: relative; z-index: 1;
    padding: 12px 18px 18px;
  }
  .cat-ft-detalhes-titulo {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--og-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
  }
  .cat-ft-detalhes-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 7px;
  }
  .cat-ft-detalhes-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    color: var(--og-ink-2);
    line-height: 1.4;
  }
  .cat-ft-detalhes-ico {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
    margin-top: 1px;
  }
  .cat-ft-detalhes-ico.check {
    background: color-mix(in srgb, var(--og-green) 18%, transparent);
    color: var(--og-green);
  }
  .cat-ft-detalhes-ico.x {
    background: rgba(220,38,38,0.14);
    color: #dc2626;
  }
  .cat-ft-detalhes-item.is-no {
    color: var(--og-ink-3);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--og-ink-3) 40%, transparent);
  }

  /* ===== Catálogo de Produtos (Vitrine) — og-glass ===== */
  .cat-vit-loading,
  .cat-vit-erro {
    padding: 60px 20px;
    text-align: center;
    color: var(--og-ink-3);
    font-size: 14px;
  }
  .cat-vit-erro { color: var(--og-red, #dc2626); }

  /* Header */
  .cat-vit-header {
    background: var(--og-glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: var(--og-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .cat-vit-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .cat-vit-titulo {
    margin: 0;
    font-family: 'Bricolage Grotesque', serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--og-ink);
    letter-spacing: -0.4px;
  }
  .cat-vit-subtitulo {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--og-ink-3);
  }

  /* Filtros */
  .cat-vit-filtros {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .cat-vit-busca-wrap {
    position: relative;
    flex: 1;
    min-width: 260px;
  }
  .cat-vit-busca-ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--og-ink-3);
    pointer-events: none;
  }
  .cat-vit-input {
    padding: 9px 12px;
    border: 1px solid var(--og-hairline-soft);
    border-radius: 10px;
    background: var(--og-glass-deep);
    color: var(--og-ink);
    font-size: 13px;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
    font-family: inherit;
  }
  .cat-vit-input::placeholder { color: var(--og-ink-3); }
  .cat-vit-input:focus {
    border-color: var(--og-green);
    background: var(--og-glass);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 14%, transparent);
  }
  .cat-vit-input-busca {
    width: 100%;
    padding-left: 36px;
  }
  .cat-vit-input-modelo { min-width: 220px; }
  .cat-vit-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 30px;
  }
  .cat-vit-btn {
    border: 1px solid var(--og-hairline-soft);
    background: var(--og-glass);
    color: var(--og-ink);
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s, opacity .15s;
    font-family: inherit;
  }
  .cat-vit-btn-primary {
    background: var(--og-green);
    color: #fff;
    border-color: var(--og-green);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--og-green) 30%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .cat-vit-btn-primary:hover { transform: translateY(-1px); }
  .cat-vit-btn-ghost:hover { border-color: var(--og-green); color: var(--og-green); }
  .cat-vit-btn:disabled { opacity: 0.45; cursor: not-allowed; }

  /* Grid */
  .cat-vit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }
  .cat-vit-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: var(--og-ink-3);
    font-size: 13.5px;
    background: var(--og-glass);
    border: 1px dashed var(--og-hairline-soft);
    border-radius: 16px;
  }

  /* Cards */
  .cat-vit-card {
    position: relative;
    background: var(--og-glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, border-color .18s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--og-shadow), inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .cat-vit-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 36%);
  }
  .cat-vit-card:hover {
    transform: translateY(-3px);
    border-color: var(--og-hairline);
    box-shadow: 0 24px 50px -16px color-mix(in srgb, var(--og-green) 18%, var(--og-shadow));
  }
  .cat-vit-card-foto {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background:
      radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--og-green) 8%, transparent) 0%,
        transparent 70%),
      var(--og-glass-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
  }
  .cat-vit-card-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
  }
  .cat-vit-sem-imagem {
    color: var(--og-ink-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.6;
  }
  .cat-vit-sem-imagem-grande {
    font-size: 13px;
  }
  .cat-vit-foto-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--og-glass-strong);
    backdrop-filter: blur(8px);
    color: var(--og-ink);
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 99px;
    border: 1px solid var(--og-hairline-soft);
  }
  .cat-vit-card-body {
    padding: 11px 13px 13px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1;
  }
  .cat-vit-card-codigo {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--og-ink);
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  .cat-vit-card-nome {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--og-ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cat-vit-card-pn {
    font-size: 10.5px;
    color: var(--og-ink-3);
  }
  .cat-vit-card-tags {
    display: flex;
    gap: 5px;
    margin-top: auto;
    padding-top: 6px;
    flex-wrap: wrap;
  }
  .cat-vit-tag {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2.5px 7px;
    border-radius: 99px;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
  }
  .cat-vit-tag-aps {
    background: color-mix(in srgb, var(--og-green) 14%, transparent);
    color: var(--og-green);
    border-color: color-mix(in srgb, var(--og-green) 22%, transparent);
  }
  .cat-vit-tag-ref {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.28);
  }
  .cat-vit-tag-peso {
    background: rgba(59, 130, 246, 0.10);
    color: #1e40af;
    border-color: rgba(59, 130, 246, 0.25);
  }

  /* Paginação */
  .cat-vit-paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
  }
  .cat-vit-pag-info {
    font-size: 13px;
    color: var(--og-ink-3);
    padding: 0 14px;
  }

  /* Modal de Detalhe — og-glass */
  .cat-vit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 28, 0.55);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: catVitFade .18s ease-out;
  }
  @keyframes catVitFade { from { opacity: 0; } to { opacity: 1; } }
  .cat-vit-modal {
    /* Sólido, não vidro translúcido — o blur/saturate sobre o fundo escuro do
       overlay ficava acinzentado e sujo (Pablo 16/09: "esse fundo está feio"). */
    background: #ffffff;
    border: 1px solid var(--og-hairline-soft);
    border-radius: 20px;
    width: 100%;
    max-width: 940px;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    animation: catVitSlide .22s cubic-bezier(.2, .8, .2, 1);
    border-top: 3px solid var(--og-green);
  }
  @keyframes catVitSlide { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .cat-vit-modal-head {
    position: sticky;
    top: 0;
    background: #ffffff;
    color: var(--og-ink);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    border-bottom: 1px solid var(--og-hairline-soft);
  }
  .cat-vit-modal-codigo {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--og-green);
    background: color-mix(in srgb, var(--og-green) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--og-green) 28%, transparent);
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.05em;
  }
  .cat-vit-modal-titulo {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 18px;
    font-weight: 900;
    color: #000;
    margin-top: 7px;
    letter-spacing: -0.2px;
  }
  .cat-vit-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--og-glass);
    color: var(--og-ink);
    border: 1px solid var(--og-hairline-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, transform .15s, border-color .15s;
  }
  .cat-vit-modal-close:hover {
    background: var(--og-glass-strong);
    color: var(--og-red, #dc2626);
    border-color: var(--og-red, #dc2626);
    transform: scale(1.05);
  }
  .cat-vit-modal-body {
    background: #ffffff;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
  }
  @media (max-width: 720px) {
    .cat-vit-modal-body { grid-template-columns: 1fr; }
  }
  .cat-vit-modal-foto-principal {
    /* Fundo branco sólido — var(--og-glass-deep) resolve pra cinza/preto no tema
       escuro e deixava a caixa da foto acinzentada (Pablo 16/09). */
    aspect-ratio: 1;
    background:
      radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--og-green) 6%, transparent) 0%,
        transparent 70%),
      #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--og-hairline-soft);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cat-vit-modal-foto-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
  }
  /* Galeria (redesign 16/09): miniaturas maiores em faixa rolável + setas e
     contador sobre a foto principal. */
  .cat-vit-modal-foto-principal { position: relative; }
  .cat-vit-foto-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--og-hairline-soft);
    background: rgba(255, 255, 255, 0.92);
    color: var(--og-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 0.85;
    transition: opacity .15s, transform .15s, background .15s;
    z-index: 2;
  }
  .cat-vit-foto-nav.prev { left: 10px; }
  .cat-vit-foto-nav.next { right: 10px; }
  .cat-vit-foto-nav:hover {
    opacity: 1;
    background: #fff;
    transform: translateY(-50%) scale(1.06);
  }
  .cat-vit-foto-contador {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(15, 39, 34, 0.78);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    pointer-events: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .cat-vit-modal-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
  }
  .cat-vit-modal-thumbs::-webkit-scrollbar { height: 6px; }
  .cat-vit-modal-thumbs::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }
  .cat-vit-modal-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    padding: 0;
    border-radius: 12px;
    border: 2px solid var(--og-hairline-soft);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.75;
    transition: border-color .15s, transform .15s, opacity .15s, box-shadow .15s;
  }
  .cat-vit-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cat-vit-modal-thumb:hover { opacity: 1; transform: translateY(-2px); }
  .cat-vit-modal-thumb.is-ativo {
    opacity: 1;
    border-color: var(--og-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 22%, transparent);
  }
  .cat-vit-modal-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cat-vit-info-bloco {}

  /* Fatos rápidos (Part Number / EAN / Família) — linha compacta com divisórias,
     substitui 3 blocos empilhados (redesign 16/09). */
  .cat-vit-fatos-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--og-hairline-soft);
  }
  .cat-vit-fato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 20px;
    border-right: 1px solid var(--og-hairline-soft);
  }
  .cat-vit-fato:last-child { border-right: none; padding-right: 0; }
  .cat-vit-fato-label {
    font-size: 10px;
    color: var(--og-ink-3);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .cat-vit-fato-valor {
    font-size: 13px;
    color: #000;
    font-weight: 700;
  }
  .cat-vit-fato-valor.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.01em;
  }

  /* Disponibilidade — promovida pro topo da ficha (redesign 16/09: "tem em
     estoque?" é a 1ª pergunta de um vendedor no telefone, não a penúltima). */
  .cat-vit-disp-card {
    background: color-mix(in srgb, var(--og-green) 6%, rgba(255,255,255,0.7));
    border: 1px solid color-mix(in srgb, var(--og-green) 22%, var(--og-hairline-soft));
    border-radius: 12px;
    padding: 12px 14px;
  }
  .cat-vit-disp-saldo { font-size: 12.5px; color: var(--og-ink-3); }
  .cat-vit-disp-transito {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--og-amber, #f59e0b) 35%, transparent);
    font-size: 12px;
    color: #92400e;
  }
  .cat-vit-disp-transito strong { font-family: 'Bricolage Grotesque', serif; font-size: 13.5px; }
  .cat-vit-disp-previsao { margin-top: 4px; font-size: 11.5px; color: var(--og-ink-2, #475569); }

  .cat-vit-info-label {
    font-size: 11px;
    color: #1f2d24;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
  }
  .cat-vit-info-valor {
    font-size: 14px;
    color: #000;
    font-weight: 700;
    line-height: 1.5;
  }
  .cat-vit-medidas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  @media (max-width: 480px) {
    .cat-vit-medidas { grid-template-columns: repeat(2, 1fr); }
  }
  .cat-vit-medida {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
  }
  .cat-vit-medida-label {
    font-size: 10px;
    color: #1f2d24;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .cat-vit-medida-valor {
    font-size: 15px;
    font-weight: 900;
    color: #000;
    margin-top: 3px;
    font-family: 'Bricolage Grotesque', serif;
  }
  .cat-vit-aps-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cat-vit-aps-item {
    background: color-mix(in srgb, var(--og-green) 8%, transparent);
    border-left: 3px solid var(--og-green);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--og-ink);
  }
  .cat-vit-aps-obs {
    font-size: 11px;
    color: var(--og-ink-3);
    margin-top: 3px;
  }
  .cat-vit-refs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .cat-vit-ref {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    border: 1px solid rgba(245, 158, 11, 0.25);
  }

  /* ===== Manuais (PDF) — layout das pastas em og-glass ===== */
  .cat-bib-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
  }
  .cat-bib-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--og-glass);
    border: 1px solid var(--og-hairline-soft);
    color: var(--og-ink-3);
    padding: 7px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    font-family: inherit;
  }
  .cat-bib-toggle:hover {
    color: var(--og-green);
    border-color: var(--og-green);
  }
  .cat-bib-toggle.is-on {
    color: var(--og-green);
    border-color: var(--og-green);
    background: color-mix(in srgb, var(--og-green) 10%, var(--og-glass));
  }

  .cat-bib-raiz {
    background: var(--og-glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--og-shadow), inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .cat-bib-raiz-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--og-hairline-soft);
  }
  .cat-bib-raiz-marca {
    width: 5px;
    height: 30px;
    border-radius: 99px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor-raiz) 30%, transparent);
  }
  .cat-bib-raiz-info { flex: 1; min-width: 0; }
  .cat-bib-raiz-titulo {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--og-ink);
    letter-spacing: -0.3px;
    line-height: 1.1;
  }
  .cat-bib-raiz-meta {
    font-size: 12px;
    color: var(--og-ink-3);
    margin-top: 3px;
  }
  .cat-bib-raiz-meta strong { color: var(--og-ink); font-weight: 800; }

  .cat-bib-subs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
  }

  .cat-bib-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--og-glass-deep);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s, box-shadow .22s;
    text-align: left;
    color: var(--og-ink);
    font-family: inherit;
    position: relative;
  }
  .cat-bib-card:hover {
    transform: translateY(-2px);
    border-color: var(--cor-raiz);
    box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cor-raiz) 22%, var(--og-shadow));
  }
  .cat-bib-card.is-empty {
    opacity: 0.55;
  }
  .cat-bib-card.is-empty:hover { opacity: 0.85; }
  .cat-bib-card-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cat-bib-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cat-bib-card-titulo {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--og-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cat-bib-card-seta {
    color: var(--og-ink-3);
    flex-shrink: 0;
    transition: transform .18s, color .18s;
  }
  .cat-bib-card:hover .cat-bib-card-seta {
    color: var(--cor-raiz);
    transform: translateX(3px);
  }

  /* Badges contadores */
  .cat-bib-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
  .cat-bib-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 99px;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .cat-bib-badge-pdf {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.22);
  }
  .cat-bib-badge-diag {
    background: color-mix(in srgb, var(--og-green) 14%, transparent);
    color: var(--og-green);
    border-color: color-mix(in srgb, var(--og-green) 24%, transparent);
  }
  .cat-bib-badge-empty {
    background: var(--og-glass-deep);
    color: var(--og-ink-3);
    border-color: var(--og-hairline-soft);
    font-style: italic;
  }

  .cat-bib-empty-state {
    padding: 24px;
    text-align: center;
    color: var(--og-ink-3);
    font-size: 13px;
    background: var(--og-glass-deep);
    border: 1px dashed var(--og-hairline-soft);
    border-radius: 12px;
  }
  .cat-bib-ocultas-aviso {
    margin-top: 10px;
    text-align: center;
    font-size: 11.5px;
    color: var(--og-ink-3);
  }
  .cat-bib-link {
    background: transparent;
    border: 0;
    color: var(--og-green);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font: inherit;
  }
  .cat-bib-link:hover { opacity: 0.8; }

  .cat-bib-arquivos-soltos {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--og-hairline-soft);
  }
  .cat-bib-arquivos-titulo {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--og-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
  }

  /* Busca por Chassi — paridade com catálogo original */
  .cat-search-hero {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--line);
    margin-bottom: 24px;
  }
  .cat-search-hero h2 {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
    color: var(--ink);
  }
  .cat-search-hero-sub {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 24px 0;
  }
  .cat-search-bar {
    max-width: 650px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .cat-search-bar:focus-within {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(45, 141, 107, 0.18);
  }
  .cat-search-bar-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    width: 18px;
    height: 18px;
    pointer-events: none;
  }
  .cat-search-bar input {
    flex: 1;
    border: none;
    padding: 14px 16px 14px 52px;
    font-size: 15px;
    outline: none;
    font-weight: 500;
    font-family: inherit;
    background: transparent;
    color: var(--ink);
    min-width: 0;
  }
  .cat-search-bar button {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0 1.75rem;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    flex-shrink: 0;
  }
  .cat-search-bar button:hover { background: var(--accent-deep, #B8581A); }

  /* Header com chassi + modelo */
  .cat-chassi-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .cat-chassi-header-modelo {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
  }
  .cat-chassi-header-ano { font-size: 13px; color: var(--muted); margin-top: 4px; }
  .cat-chassi-header-chassi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .cat-chassi-header-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
  }
  .cat-chassi-header-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #d97706, #b45309);
    padding: 6px 14px;
    border-radius: 8px;
    letter-spacing: 1px;
    margin-top: 4px;
  }
  .cat-chassi-section-titulo {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 12px 0;
  }

  /* Cards DNA da máquina */
  .cat-dna-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
  }
  .cat-dna-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .cat-dna-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  }
  .cat-dna-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
  }
  /* Galeria de fotos do modelo (Busca Chassi) — padrão produto: slots em linha */
  .cat-modelo-galeria {
    margin: 14px 0 24px;
    display: flex;
    gap: 10px;
    height: 220px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    width: 100%;
  }
  .cat-modelo-galeria.cat-modelo-galeria-falhou { display: none; }
  .cat-modelo-foto-item {
    position: relative;
    flex: 1 1 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    transition: box-shadow .15s, border-color .15s, transform .15s;
  }
  .cat-modelo-foto-item:hover {
    box-shadow: 0 6px 18px rgba(6,128,112,.12);
    border-color: var(--brand);
    transform: translateY(-2px);
  }
  .cat-modelo-foto-item.principal {
    border: 2px solid var(--brand);
    animation: catSlotPulse 3.2s ease-in-out infinite;
  }
  @keyframes catSlotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45,141,107,0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(45,141,107,0.10); }
  }
  .cat-modelo-foto-item img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    background: linear-gradient(135deg, var(--brand-soft) 0%, #F3F8F5 100%);
  }
  .cat-modelo-foto-badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--brand); color: #fff;
    padding: 2px 8px; border-radius: 6px;
    font-size: 9px; font-weight: 800; letter-spacing: .4px;
  }
  .cat-modelo-galeria-empty {
    background: var(--gold-soft);
    border: 1px dashed var(--gold);
    color: var(--ink-soft);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    margin: 14px 0 20px;
    max-width: 720px;
  }
  @media (max-width: 720px) {
    .cat-modelo-galeria { height: 180px; }
    .cat-modelo-foto-item { min-width: 180px; }
  }

  .cat-dna-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--brand-soft) 0%, #F3F8F5 100%);
    border-radius: 10px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
  }
  /* info expande pra ocupar espaço — empurra footer pro fundo */
  .cat-dna-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .cat-dna-footer {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    justify-content: center;
  }
  .cat-dna-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
  }
  .cat-dna-thumb-placeholder {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 42px;
    font-weight: 800;
    opacity: 0.30;
  }
  .cat-dna-thumb-fallback::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%230E4F3B' stroke-width='1.5'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>");
    font-size: 36px;
    opacity: 0.4;
  }
  .cat-dna-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
  }
  .cat-dna-value {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 4px;
    line-height: 1.2;
  }
  .cat-dna-serie {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 6px;
  }
  .cat-dna-brand {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
  .cat-dna-link {
    width: 100%;
    background: var(--brand-soft);
    border: 1px solid var(--accent);
    color: var(--accent-deep);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
    font-family: inherit;
    text-align: center;
  }
  .cat-dna-link:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent-deep);
    transform: translateY(-1px);
  }
  .cat-dna-link-disabled {
    background: var(--bg-soft);
    color: var(--muted);
    border-color: var(--line);
    cursor: not-allowed;
    font-weight: 500;
  }
  .cat-dna-link-disabled:hover {
    background: var(--bg-soft);
    color: var(--muted);
    border-color: var(--line);
    transform: none;
  }

  /* Plaquetas técnicas */
  .cat-chassi-plaquetas h4 {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 15px;
    margin: 16px 0 10px 0;
    color: var(--ink-soft);
  }

  /* Tabs modernas */
  .cat-modern-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    margin: 8px 0 20px 0;
  }
  .cat-tab-btn {
    background: transparent;
    border: none;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
    margin-bottom: -1px;
  }
  .cat-tab-btn:hover { color: var(--ink); }
  .cat-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* Layout vistas explodidas */
  .cat-exploded-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
  }
  @media (max-width: 1100px) {
    .cat-exploded-layout { grid-template-columns: 1fr; }
  }
  .cat-canvas-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
    position: relative;
  }
  .cat-canvas-zoom-btn {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--brand-soft);
    color: var(--accent-deep);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(6,128,112,0.12);
    transition: background 0.12s, transform 0.12s;
  }
  .cat-canvas-zoom-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
  }

  /* Overlay fullscreen pra ampliar a vista explodida */
  .cat-vista-zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 24, 19, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    padding: 40px;
  }
  .cat-vista-zoom-overlay.aberto { display: flex; }
  .cat-vista-zoom-overlay img {
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .cat-vista-zoom-close {
    position: absolute;
    top: 20px; right: 24px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s, transform 0.12s;
  }
  .cat-vista-zoom-close:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
  }

  /* Botão Ver Detalhes no item da legenda */
  .cat-parts-btn-detalhe {
    margin-top: 8px;
    background: var(--brand-soft);
    color: var(--accent-deep);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, transform 0.12s;
  }
  .cat-parts-btn-detalhe:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
  }
  .cat-canvas-wrapper {
    position: relative;
    width: fit-content;
    max-width: 100%;
  }
  .cat-canvas-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 60vh;
  }
  .cat-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5;
  }
  .cat-hotspot-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.12s;
  }
  .cat-hotspot:hover .cat-hotspot-num {
    transform: scale(1.25);
  }
  /* Tooltip do hotspot: aparece no hover com nome + medidas + peso + saldo */
  .cat-hotspot-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(17, 24, 32, 0.94);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    min-width: 220px;
    max-width: 300px;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 20;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  }
  .cat-hotspot-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(17, 24, 32, 0.94);
  }
  .cat-hotspot:hover .cat-hotspot-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .cat-hotspot-tip-cod {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.4px;
  }
  .cat-hotspot-tip-nome {
    font-weight: 700;
    font-size: 12.5px;
    color: #fff;
    margin: 2px 0 4px;
  }
  .cat-hotspot-tip-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.78);
    margin-top: 2px;
  }

  /* Cards de substituições / versões compatíveis no modal */
  .cat-modal-subs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin-top: 8px;
  }
  .cat-modal-sub-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--brand-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  }
  .cat-modal-sub-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 4px 10px rgba(6,128,112,0.10);
  }
  .cat-modal-sub-thumb {
    width: 64px; height: 64px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--line);
  }
  .cat-modal-sub-thumb img { width:100%; height:100%; object-fit: contain; padding: 4px; }
  .cat-modal-sub-noimg { font-size: 24px; opacity: 0.4; }
  .cat-modal-sub-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .cat-modal-sub-dir {
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--accent-deep); text-transform: uppercase;
  }
  .cat-modal-sub-cod {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--muted); margin: 2px 0;
  }
  .cat-modal-sub-nome { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
  .cat-modal-sub-meta { font-size: 11px; margin-top: 4px; }
  .cat-modal-sub-obs { font-size: 11px; color: var(--muted); margin-top: 4px; font-style: italic; }

  .cat-parts-list-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow: hidden;
  }
  .cat-parts-list-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .cat-parts-list-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cat-parts-legenda {
    display: flex;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink-soft);
  }
  .cat-parts-legenda .dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
  }
  .cat-parts-list-body {
    flex: 1;
    overflow-y: auto;
  }
  .cat-parts-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
  }
  .cat-parts-item:hover { background: var(--brand-soft); }
  .cat-parts-item.focado {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .cat-parts-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .cat-parts-thumb {
    width: 46px; height: 46px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .cat-parts-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
  .cat-parts-thumb-noimg { background: var(--brand-soft); }
  .cat-parts-thumb-icone { font-size: 22px; opacity: 0.5; }
  /* Hotspot focado quando o user passa o mouse no item da legenda */
  .cat-hotspot.focado .cat-hotspot-num {
    transform: scale(1.45);
    box-shadow: 0 0 0 4px rgba(208, 204, 82, 0.5), 0 4px 12px rgba(0,0,0,0.4);
  }
  .cat-parts-info { flex: 1; min-width: 0; }
  .cat-parts-codigo-linha { display: flex; gap: 5px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
  .cat-parts-codigo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
  }
  .cat-parts-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
  }
  .cat-parts-nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .cat-parts-meta {
    font-size: 13px;
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    margin-top: 4px;
  }
  .cat-parts-meta .cat-parts-qtd-pedida {
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 13px;
  }
  .cat-parts-meta .cat-parts-estoque-ok {
    background: #dcfce7;
    color: #166534;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 13px;
  }
  .cat-parts-meta .cat-parts-estoque-zero {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 13px;
  }
  .cat-parts-btn-ver {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 9px;
    cursor: pointer;
    color: var(--muted);
    transition: border-color 0.12s, color 0.12s;
    font-size: 14px;
  }
  .cat-parts-btn-ver:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Barra de busca padronizada do Catálogo (pill com ícone embutido) */
  .cat-filter-input {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 8px 18px;
    transition: border-color 0.15s, box-shadow 0.15s;
    gap: 8px;
    min-width: 260px;
  }
  .cat-filter-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45, 141, 107, 0.12);
  }
  .cat-filter-input svg {
    width: 14px;
    height: 14px;
    color: var(--muted);
    flex-shrink: 0;
  }
  .cat-filter-input input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 13px;
    color: var(--ink);
    font-family: inherit;
    min-width: 0;
  }
  .cat-filter-input input::placeholder { color: var(--muted); }
  .cat-filter-input select {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    border-left: 1px solid var(--line);
    padding-left: 8px;
    margin-left: 4px;
  }

  /* Cards de produto na tela admin */
  .cat-adm-prod-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }

  /* Editor de vistas explodidas */
  .cat-vista-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 14px;
    color: var(--ink);
    cursor: pointer;
    font-size: 13px;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s;
  }
  .cat-vista-item:hover { background: var(--bg); }
  .cat-vista-item.ativa {
    background: rgba(217,119,6,0.10);
    border-left-color: #d97706;
    font-weight: 600;
  }
  .cat-vista-canvas-container {
    position: relative;
    background: var(--bg);
    overflow: hidden;
    user-select: none;
  }
  .cat-vista-canvas-container img {
    width: 100%;
    height: auto;
    display: block;
  }
  .cat-vista-ponto {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #d97706;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    transition: transform 0.12s, background 0.12s;
  }
  .cat-vista-ponto:hover {
    transform: translate(-50%, -50%) scale(1.2);
    background: #b45309;
    z-index: 10;
  }

  /* Chat IA */
  .cat-chat-sugestao {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
    transition: background 0.12s, border-color 0.12s;
    font-family: inherit;
  }
  .cat-chat-sugestao:hover {
    background: var(--bg);
    border-color: var(--accent);
  }
  .cat-chat-msg {
    display: flex;
    margin-bottom: 12px;
  }
  .cat-chat-msg-user { justify-content: flex-end; }
  .cat-chat-msg-assistant { justify-content: flex-start; }
  .cat-chat-bubble {
    max-width: 72%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
  }
  .cat-chat-msg-user .cat-chat-bubble {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
    border-bottom-right-radius: 4px;
  }
  .cat-chat-msg-assistant .cat-chat-bubble {
    background: #fff;
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
  }
  .cat-chat-loading .cat-chat-bubble {
    color: var(--muted);
    font-style: italic;
  }
  .btn-warning {
    background: #ca8a04;
    color: #fff;
    border-color: #ca8a04;
  }
  .btn-warning:hover { background: #a16207; border-color: #a16207; }

  .breadcrumb {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .page-title {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
  }
  .topbar-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  /* ============ Command Palette (busca global no topbar) ============ */
  .topbar-search {
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 12px;
    height: 38px;
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .topbar-search:focus-within {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(45,141,107,0.12);
  }
  .topbar-search-icone {
    width: 16px; height: 16px;
    color: var(--muted);
    flex: 0 0 auto;
    margin-right: 8px;
  }
  .topbar-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13.5px;
    color: var(--ink);
    height: 100%;
    font-family: inherit;
  }
  .topbar-search-input::placeholder { color: var(--muted); }
  .topbar-search-kbd {
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.4px;
    margin-left: 6px;
  }
  @media (max-width: 720px) {
    .topbar-search-kbd { display: none; }
    .topbar-search { max-width: none; margin: 0 8px; }
  }

  .cmd-palette-panel {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    /* Mesma largura do .topbar-search (560px max) — alinha popup com o campo de busca */
    width: min(560px, calc(100vw - 32px));
    max-height: 70vh;
    overflow-y: auto;
    background: var(--og-surface);
    border: 1px solid var(--og-hairline-soft);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(6,128,112,0.18), 0 4px 12px rgba(0,0,0,0.06);
    z-index: 9999;
    padding: 6px;
  }
  .cmd-palette-grupo {
    padding: 8px 12px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--og-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }
  .cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .1s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
  }
  .cmd-palette-item:hover, .cmd-palette-item.ativo {
    background: var(--brand-soft);
  }
  .cmd-palette-item-icone {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--brand);
  }
  .cmd-palette-item.ativo .cmd-palette-item-icone {
    border-color: var(--brand);
    background: #fff;
  }
  .cmd-palette-item-body {
    flex: 1;
    min-width: 0;
  }
  .cmd-palette-item-titulo {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
  }
  .cmd-palette-item-desc {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cmd-palette-item-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--brand);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    flex: 0 0 auto;
  }
  .cmd-palette-vazio {
    padding: 24px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
  }
  .cmd-palette-footer {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
  }
  .cmd-palette-footer kbd {
    font-family: inherit;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    margin: 0 2px;
  }
  .search {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    font-size: 13px;
    width: 260px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 141, 107, 0.12); background: white; }
  .btn {
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    background: white;
    color: var(--ink);
    font-family: inherit;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-sm);
  }
  .btn:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(13, 27, 42, 0.08); }
  .btn-primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: 0 1px 3px rgba(45, 141, 107, 0.3);
  }
  .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 4px 12px rgba(45, 141, 107, 0.35); }
  .btn-dark {
    background: var(--brand-deep);
    color: white;
    border-color: var(--brand-deep);
  }
  .btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 6px; }

  /* CONTENT */
  .content { padding: 28px; }
  .page { display: none; }
  .page.active { display: block; animation: fadeIn 0.25s ease; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* PORTAL CARDS */
  a.portal-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent) !important;
    box-shadow: 0 6px 18px rgba(45, 141, 107, 0.18) !important;
  }
  a.portal-card:hover .portal-card-arrow { color: var(--accent); }

  /* KPI CARDS */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  .kpi {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 22px;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
  .kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .kpi-value {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -1px;
    line-height: 1;
  }
  .kpi-trend {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .kpi-trend.up { color: var(--green); }
  .kpi-trend.down { color: var(--red); }
  .kpi-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    color: var(--ink-soft);
    opacity: 0.4;
  }
  .kpi.accent { background: var(--brand-deep); color: white; border-color: var(--brand-deep); }
  .kpi.accent .kpi-label { color: rgba(255,255,255,0.6); }
  .kpi.accent .kpi-value { color: white; }
  .kpi.accent .kpi-icon { color: var(--accent); opacity: 1; }

  /* PANELS */
  .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .panel-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .panel-title {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.3px;
  }
  .panel-body { padding: 20px 22px; }

  .grid-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  /* TABLE */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  th {
    text-align: left;
    padding: 12px 22px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  th.right, td.right { text-align: right; }
  td {
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
  }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: #fafaf6; }
  .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; }

  .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
  }
  .status.entregue { background: var(--green-soft); color: var(--green); }
  .status.entregue::before { background: var(--green); }
  .status.transito { background: var(--blue-soft); color: var(--blue); }
  .status.transito::before { background: var(--blue); }
  .status.pendente { background: var(--yellow-soft); color: var(--yellow); }
  .status.pendente::before { background: var(--yellow); }
  .status.devolucao { background: var(--red-soft); color: var(--red); }
  .status.devolucao::before { background: var(--red); }

  #map, #map2 {
    height: 380px;
    border-radius: var(--radius);
    z-index: 1;
  }

  /* ========== COTAÇÃO ========== */
  .search-bar {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
  }
  .search-bar-grid {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 16px;
    align-items: end;
  }
  .field-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .field-block label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 600;
  }
  .pedido-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 600;
    padding: 12px 16px;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius);
    width: 220px;
    letter-spacing: 1px;
  }
  .pedido-input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .quick-hints {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .quick-hints span {
    font-size: 12px;
    color: var(--muted);
  }
  .chip {
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
  }
  .chip:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }

  .empty-state {
    background: var(--panel);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 60px 40px;
    text-align: center;
    color: var(--muted);
  }
  .empty-state svg {
    width: 48px; height: 48px;
    color: var(--line-strong);
    margin-bottom: 14px;
  }
  .empty-state h3 {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 18px;
    color: var(--ink-soft);
    margin-bottom: 6px;
    font-weight: 500;
  }

  .loading-state {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 50px 40px;
    text-align: center;
  }
  .spinner {
    width: 38px; height: 38px;
    border: 3px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-step {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 4px;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
  }

  .result-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .pedido-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    margin-bottom: 16px;
  }
  .info-row .info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 3px;
  }
  .info-row .info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .info-row .info-value.mono {
    font-family: 'JetBrains Mono', monospace;
  }

  .items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  .items-table th {
    padding: 10px 14px;
    font-size: 10px;
  }
  .items-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
  }
  .items-table .code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand);
  }

  .totals-card {
    background: var(--brand-deep);
    color: white;
    border-radius: var(--radius);
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .totals-card h3 {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .totals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }
  .total-cell {
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius);
  }
  .total-cell .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .total-cell .value {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
  }
  .total-cell .value small {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    margin-left: 2px;
  }
  .total-cell.highlight {
    background: var(--accent);
  }
  .total-cell.highlight .label { color: rgba(255,255,255,0.85); }
  .cubagem-note {
    background: rgba(255,255,255,0.05);
    padding: 11px 14px;
    border-radius: var(--radius);
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    border-left: 2px solid var(--accent);
  }
  .cubagem-note strong { color: white; }

  .cotacoes-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 28px 0 14px;
  }
  .cotacoes-header h2 {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.5px;
  }
  .cotacoes-header p {
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
  }
  .sort-controls {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .sort-controls span {
    font-size: 12px;
    color: var(--muted);
    margin-right: 4px;
  }

  .transp-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 42px 1fr auto auto auto auto;
    gap: 18px;
    align-items: center;
    transition: all 0.15s;
  }
  .transp-card:hover:not(.disabled) {
    border-color: var(--ink);
    transform: translateX(2px);
  }
  .transp-card.best {
    border-color: var(--gold);
    background: linear-gradient(to right, var(--gold-soft) 0%, white 60%);
  }
  .transp-card.disabled {
    opacity: 0.55;
    background: var(--bg);
  }
  .transp-logo {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--accent-soft), white);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-family: 'Bricolage Grotesque', serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--accent);
    box-shadow: var(--shadow-sm);
  }
  .transp-info .transp-name {
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .transp-info .transp-meta {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .tag.api { background: var(--blue-soft); color: var(--blue); }
  .tag.tabela { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
  .tag.best { background: var(--gold); color: white; }
  .tag.cheap { background: var(--green-soft); color: var(--green); }
  .tag.fast { background: var(--blue-soft); color: var(--blue); }
  .transp-prazo {
    text-align: center;
    min-width: 70px;
  }
  .transp-prazo .num {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
  }
  .transp-prazo .lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    font-weight: 600;
    margin-top: 2px;
  }
  .transp-valor {
    text-align: right;
    min-width: 120px;
  }
  .transp-valor .val {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1;
  }
  .transp-valor .val .curr {
    font-size: 12px;
    color: var(--muted);
    margin-right: 2px;
  }
  .transp-valor .pkg {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
  }
  .transp-no-service {
    text-align: right;
    min-width: 120px;
    font-size: 12px;
    color: var(--red);
    font-weight: 600;
  }
  .composition-toggle {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    font-size: 11px;
    font-family: inherit;
  }
  .composition-toggle:hover { color: var(--ink); }
  .transp-detail {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    font-size: 12px;
  }
  .transp-detail.open { display: grid; }
  .transp-detail > div .lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 2px;
  }

  /* PEÇAS */
  .upload-zone {
    background: var(--panel);
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    margin-bottom: 18px;
    transition: all 0.15s;
    cursor: pointer;
  }
  .upload-zone:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .upload-zone svg {
    width: 36px; height: 36px;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .upload-zone h3 {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .upload-zone p {
    color: var(--muted);
    font-size: 12.5px;
  }

  /* TRANSPORTADORAS CONFIG */
  .transp-config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .transp-config-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
  }
  .transp-config-card.inactive { opacity: 0.6; }
  .transp-config-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .transp-config-head .transp-logo { width: 38px; height: 38px; font-size: 14px; }
  .transp-config-head .name { font-weight: 700; font-size: 15px; }
  .transp-config-head .sub { font-size: 11px; color: var(--muted); }
  .transp-config-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 12px;
  }
  .transp-config-meta .lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    font-weight: 600;
  }
  .transp-config-meta .val { font-weight: 600; margin-top: 2px; }
  .toggle {
    margin-left: auto;
    width: 36px; height: 20px;
    background: var(--line-strong);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
  }
  .toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.15s;
  }
  .toggle.on { background: var(--green); }
  .toggle.on::after { transform: translateX(16px); }

  /* CSAT */
  .csat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .csat-card {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 18px;
    border-radius: var(--radius);
    text-align: center;
  }
  .csat-emoji {
    font-size: 28px;
    margin-bottom: 6px;
  }
  .csat-count {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -1px;
  }
  .csat-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
  }
  .stars { color: var(--gold); font-size: 16px; letter-spacing: 2px; }
  .rating-spectrum {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin: 18px 0 8px;
  }
  .rating-spectrum > div { flex: 1; }

  /* DEVOLUÇÕES */
  .return-card {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    align-items: center;
  }
  .return-icon {
    width: 38px; height: 38px;
    background: var(--red-soft);
    color: var(--red);
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .return-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .return-title { font-weight: 600; font-size: 14px; }

  /* API */
  .api-card {
    background: var(--brand-deep);
    color: white;
    padding: 22px;
    border-radius: var(--radius);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    overflow-x: auto;
  }
  .api-card .key { color: #88c0d0; }
  .api-card .str { color: #a3be8c; }
  .api-card .num { color: #ebcb8b; }
  .api-card .com { color: #6b7785; font-style: italic; }
  .endpoint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: var(--radius);
    margin-bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
  }
  .method {
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    color: white;
  }
  .method.get { background: var(--green); }
  .method.post { background: var(--blue); }

  /* ========== PEDIDOS DE FATURAMENTO ========== */
  .fat-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .fat-toolbar .search {
    width: 260px;
  }
  .fat-filter-select {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
  }
  .fat-filter-select:focus { outline: none; border-color: var(--accent); }
  .fat-sync-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--brand-deep);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  .fat-sync-btn:hover { background: #0a1520; }
  .fat-sync-btn svg { width: 14px; height: 14px; }
  .fat-sync-btn.loading svg { animation: spin 0.8s linear infinite; }
  .fat-demo-banner {
    background: var(--yellow-soft);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 12.5px;
    color: #7a5a00;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .fat-demo-banner a { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
  .fat-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .fat-chip-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
  }
  .fat-chip-active button {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
  }
  .fat-total-bar {
    padding: 14px 22px;
    background: var(--brand-deep);
    color: white;
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 13px;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .fat-total-bar strong {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.5px;
  }
  .fat-total-bar span { color: rgba(255,255,255,0.6); font-size: 12px; }
  .fat-row-actions {
    display: flex;
    gap: 6px;
  }
  .status.nao-faturado { background: var(--yellow-soft); color: #7a5a00; }
  .status.nao-faturado::before { background: var(--gold); }
  .status.fat-faturado { background: var(--green-soft); color: var(--green); }
  .status.fat-faturado::before { background: var(--green); }
  .status.fat-parcial { background: var(--blue-soft); color: var(--blue); }
  .status.fat-parcial::before { background: var(--blue); }
  .status.fat-cancelado { background: var(--red-soft); color: var(--red); }
  .status.fat-cancelado::before { background: var(--red); }
  .fat-doc-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
  }
  .fat-valor {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
  }
  /* CONFIG PAGE */
  .config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .config-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .config-field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 600;
  }
  .config-field input {
    padding: 10px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    background: var(--bg);
  }
  .config-field input:focus { outline: none; border-color: var(--accent); background: white; }
  .config-field input[type="password"] { font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; }
  .config-section-title {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .config-save-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
  }
  .config-status-msg {
    font-size: 12px;
    color: var(--green);
    font-weight: 600;
    display: none;
  }

  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

  @media (max-width: 1100px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .result-grid { grid-template-columns: 1fr; }
    .transp-card { grid-template-columns: 42px 1fr; gap: 10px; }
    .transp-prazo, .transp-valor, .transp-no-service, .composition-toggle { grid-column: 2; text-align: left; }
    .transp-config-grid { grid-template-columns: 1fr; }
  }

/* === Transportadoras: tabela HTML simples com expand de filiais ======== */
.transp-table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.transp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.transp-table thead th {
  background: var(--bg-soft);
  padding: 12px 16px;
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.transp-table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.transp-row:hover td { background: var(--bg-soft); }
.transp-row.inactive td { opacity: 0.55; }
.transp-row.inactive .name-line { color: var(--muted); }

.col-chev { padding-left: 16px !important; padding-right: 0 !important; }
.col-name { padding-left: 0 !important; }

.transp-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.transp-name-cell .transp-logo {
  width: 40px; height: 40px;
  font-size: 13px;
  border-radius: 9px;
  flex-shrink: 0;
}
.transp-name-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.name-line {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sub-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.transp-cidade {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.big-num {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.erp-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 5px;
  color: var(--ink);
}

.transp-filiais-row td { background: var(--bg-soft); }
.transp-test-row td { background: var(--bg-soft); border-bottom: none; }

.chip-mute { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

.chevron-btn {
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  width: 28px; height: 28px;
  color: var(--muted);
  font-size: 12px;
  border-radius: 6px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chevron-btn:hover { background: var(--bg); color: var(--orange); border-color: var(--orange); }
.chevron-btn .chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}
.chevron-btn.open { background: var(--orange); color: white; border-color: var(--orange); }
.chevron-btn.open .chevron { transform: rotate(90deg); }

.badge-status {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-status.ok { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.badge-status.warn { background: rgba(239, 68, 68, 0.12); color: #dc2626; }

.chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.chip-orange { background: rgba(45, 141, 107, 0.12); color: var(--orange); }

.transp-test-result {
  padding: 0 18px 12px 18px;
  font-size: 12px;
  border-top: 1px solid var(--line);
  margin-top: -1px;
}
.transp-test-result:not([style*="none"]) { padding-top: 12px; }

/* Área de filiais */
.transp-filiais {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: 0 0 10px 10px;
}
.filiais-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.filiais-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.filial-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  box-shadow: var(--shadow-sm);
}
.filial-card:hover { border-color: var(--orange); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.filial-head { display: flex; align-items: center; gap: 8px; }
.filial-name {
  font-weight: 700;
  font-size: 13px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filial-actions { display: flex; gap: 4px; }
.filial-body { display: flex; flex-direction: column; gap: 4px; }
.filial-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.filial-row code {
  font-size: 11px;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
}
.filial-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  min-width: 36px;
}

.icon-btn {
  background: none;
  border: 1px solid var(--line);
  width: 26px; height: 26px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.icon-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.icon-btn-danger:hover { background: rgba(239, 68, 68, 0.1); color: #dc2626; border-color: #dc2626; }

.filial-card-add {
  border-style: dashed;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  background: transparent;
}
.filial-card-add:hover { background: var(--panel); border-color: var(--orange); }

/* Modal compartilhado — duas naming conventions suportadas:
   .modal-backdrop + .modal-card (estilo moderno) E
   .modal + .modal-content (estilo antigo usado nos admins do catálogo).
   Esta seção garante que ambos sejam centralizados como overlay. */
.modal-backdrop,
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.modal { display: none; }                         /* default oculto — JS troca pra flex */
.modal[style*="display: flex"],
.modal[style*="display:flex"] { display: flex !important; }
.modal[style*="display: block"],
.modal[style*="display:block"] { display: flex !important; }  /* legado: alguns JS fazem block, força flex */
.modal-content {
  background: var(--panel);
  border-radius: var(--radius);
  max-width: 92vw;
  max-height: 90vh;
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-modal);
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); flex: 1; }
.modal-header .modal-close { margin-left: auto; }

/* Inputs/textarea/select com classe .input — visual unificado da identidade */
.input {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-sizing: border-box;
  outline: none;
}
.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(45, 141, 107, 0.12);
}
.input:hover:not(:focus) {
  border-color: var(--brand);
}
.modal-body .input,
.modal-content .input {
  width: 100%;
  padding: 10px 13px;
}

/* Select com classe .input — adiciona chevron customizado e remove o nativo */
select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%232D8D6B' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-deep);
}
select.input:hover { background-color: var(--brand-soft); }

/* Botão "Cancelar" / secundário — neutro, não verde brand */
.btn.btn-secondary {
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn.btn-secondary:hover {
  background: #e9ecef;
  border-color: var(--line-strong);
}

/* Meu Painel fixo no topo do sidebar */
.nav-item-meupainel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin: 4px 8px 6px;
  background: linear-gradient(135deg, rgba(45,141,107,0.18), rgba(6,128,112,0.10));
  border: 1px solid rgba(45,141,107,0.25);
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  width: calc(100% - 16px);
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.nav-item-meupainel:hover {
  background: linear-gradient(135deg, rgba(45,141,107,0.32), rgba(6,128,112,0.20));
  transform: translateX(2px);
}
.nav-item-meupainel.ativo,
.nav-item-meupainel.active {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 2px 10px rgba(6,128,112,0.30);
}
.nav-item-meupainel svg {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  color: #D0CC52;
}
.nav-divisor {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 16px 8px;
}

/* Hero do Painel do Vendedor — header grande com foto e saudação */
.cat-painel-hero {
  position: relative;
  border-radius: 16px;
  /* overflow:visible para o dropdown do seletor de vendedor (admin) escapar do hero.
   * O clipping do gradiente fica em .cat-painel-hero-bg (que já tem inset:0 e mesmo border-radius). */
  overflow: visible;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(6,128,112,0.15);
}
.cat-painel-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f1f8f4 55%, #e7f3ed 100%);
  border-radius: 16px;
  overflow: hidden;
  z-index: 0;
  border: 1px solid #e2e8f0;
}
.cat-painel-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 12%, rgba(45,141,107,0.10) 0%, transparent 46%),
    radial-gradient(circle at 10% 96%, rgba(143,231,192,0.16) 0%, transparent 52%);
}
.cat-painel-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding: 26px 32px;
  flex-wrap: wrap;
}
.cat-painel-hero-info { text-align: left; }
.cat-painel-hero-online {
  position: absolute;
  bottom: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid #fff;
  box-shadow: 0 0 10px rgba(34,197,94,0.55);
  z-index: 3;
}
.cat-painel-cargo {
  font-size: 14px;
  color: #475569;
  margin-top: 8px;
}
.cat-painel-selos {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.cat-painel-selo {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid #d7e3dd;
  background: #ffffff;
  color: #475569;
}
.cat-painel-selo.on {
  border-color: rgba(14,122,75,0.32);
  color: #0E7A4B;
  background: rgba(14,122,75,0.08);
}
.cat-painel-selo .pt {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 6px;
  vertical-align: middle;
}
.cat-painel-cracha {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #d7e3dd;
  background: #f8fbf9;
  color: #0E7A4B;
  align-self: center;
}
.cat-painel-cracha small {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}
@media (max-width: 820px) { .cat-painel-cracha { display: none; } }
@media (max-width: 600px) {
  .cat-painel-hero-content { justify-content: center; }
  .cat-painel-hero-info { text-align: center; }
  .cat-painel-selos { justify-content: center; }
}
.cat-painel-hero-avatar {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: #0E4F3B;
  border: 5px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
  box-shadow: 0 14px 36px rgba(0,0,0,0.28);
  z-index: 2;
}
.cat-painel-hero-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Moldura + anel cônico girando (assinatura visual do modelo) */
.cat-painel-hero-moldura {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  display: inline-grid;
  place-items: center;
}
.cat-painel-hero-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #8FE7C0, #2D8D6B, #D0CC52, #4DBE92, #8FE7C0);
  animation: catPainelRing 9s linear infinite;
  z-index: 1;
}
@keyframes catPainelRing { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cat-painel-hero-ring { animation: none; } }

/* Slogan pulsante como WATERMARK atrás do conteúdo do hero.
 * Fica fora do fluxo visual do texto principal e escala com o tamanho do hero. */
.cat-painel-hero-slogan {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-family: 'Bricolage Grotesque', serif;
  /* Escala fluida: 14px no mínimo · 1.6vw fluido · 30px máximo */
  font-size: clamp(14px, 1.6vw, 30px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.2px;
  font-style: italic;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  animation: heroSloganGlow 3.5s ease-in-out infinite;
}
/* Em telas estreitas (notebook compacto / Windows 1366px ou menor), esconde o slogan */
@media (max-width: 1400px) {
  .cat-painel-hero-slogan {
    display: none;
  }
}
.cat-painel-hero-slogan .hash {
  color: rgba(208, 204, 82, 0.9);
  font-weight: 800;
}
@keyframes heroSloganGlow {
  0%, 100% {
    text-shadow:
      0 0 8px  rgba(208,204,82,0.35),
      0 0 18px rgba(208,204,82,0.20);
  }
  50% {
    text-shadow:
      0 0 14px rgba(208,204,82,0.65),
      0 0 28px rgba(208,204,82,0.40),
      0 0 44px rgba(208,204,82,0.20);
  }
}
.cat-painel-hero-info {
  flex: 0 1 auto;
  min-width: 0;
  color: #fff;
}
.cat-painel-saudacao {
  font-size: 13px;
  color: #0E7A4B;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cat-painel-nome {
  font-family: 'Sora', 'Bricolage Grotesque', serif;
  font-size: 44px;
  font-weight: 800;
  color: #0E4F3B;
  letter-spacing: -1px;
  line-height: 1.05;
}
.cat-painel-papel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.13);
  padding: 5px 15px 5px 12px;
  border-radius: 24px;
  margin-top: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cat-painel-papel::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: #d0cc52;
  box-shadow: 0 0 0 3px rgba(208,204,82,0.28);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .cat-painel-hero-content { padding: 22px 20px; gap: 16px; }
  .cat-painel-hero-avatar { width: 110px; height: 110px; font-size: 40px; border-width: 4px; }
  .cat-painel-nome { font-size: 32px; }
  .cat-painel-saudacao { font-size: 13px; }
  .cat-painel-papel { font-size: 12px; padding: 4px 12px; }
}

/* =========================================================
   Loading skeleton do Hero do Meu Painel
   Mostra shimmer enquanto auth/dados ainda não chegaram.
   JS remove .is-loading do #catPainelHero quando termina.
   ========================================================= */
.cat-painel-hero.is-loading .cat-painel-hero-avatar {
  color: transparent !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.08) 100%)
    rgba(255,255,255,0.05);
  background-size: 200% 100%;
  animation: catPainelShimmer 1.4s ease-in-out infinite, catPainelPulse 2.2s ease-in-out infinite;
  border-color: rgba(255,255,255,0.18) !important;
}
.cat-painel-hero.is-loading .cat-painel-saudacao,
.cat-painel-hero.is-loading .cat-painel-nome,
.cat-painel-hero.is-loading .cat-painel-papel {
  color: transparent !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.10) 100%);
  background-size: 200% 100%;
  animation: catPainelShimmer 1.4s ease-in-out infinite;
  border-radius: 7px;
  display: inline-block;
}
.cat-painel-hero.is-loading .cat-painel-saudacao { width: 90px; height: 14px; }
.cat-painel-hero.is-loading .cat-painel-nome     { width: 220px; height: 30px; margin-top: 6px; }
.cat-painel-hero.is-loading .cat-painel-papel    { width: 110px; height: 14px; margin-top: 8px; }
.cat-painel-hero.is-loading .cat-painel-hero-acoes { opacity: 0.45; pointer-events: none; }
.cat-painel-hero.is-loading .cat-painel-pill {
  background: rgba(255,255,255,0.10) !important;
  color: transparent !important;
}
.cat-painel-hero.is-loading .cat-painel-pill svg { opacity: 0; }

@keyframes catPainelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes catPainelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.15), 0 0 0 0 rgba(255,255,255,0.10); }
  50%      { box-shadow: 0 0 0 10px rgba(255,255,255,0.06), 0 0 0 22px rgba(255,255,255,0.03); }
}
.cat-painel-hero:not(.is-loading) {
  transition: opacity 0.3s ease;
}

/* Botão de página mais usada (histórico) */
.cat-mais-usada-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--ink);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cat-mais-usada-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6,128,112,0.12);
  border-color: var(--brand);
}
.cat-mais-usada-icone {
  font-size: 22px;
  flex: 0 0 auto;
}
.cat-mais-usada-body { flex: 1; min-width: 0; }
.cat-mais-usada-titulo { font-weight: 600; }
.cat-mais-usada-meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* Grupos collapse na sidebar de Vistas Admin (acordeão) */
.cat-vista-grupo { border-bottom: 1px solid var(--line); }
.cat-vista-grupo:last-child { border-bottom: none; }
.cat-vista-grupo-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cat-vista-grupo-header:hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.cat-vista-grupo-header.aberto {
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-left-color: var(--brand);
}
.cat-vista-grupo-chevron {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}
.cat-vista-grupo-header.aberto .cat-vista-grupo-chevron {
  transform: rotate(90deg);
}
.cat-vista-grupo-nome { flex: 1; }
.cat-vista-grupo-contagem {
  font-size: 10px;
  background: var(--panel);
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid var(--line);
}
.cat-vista-grupo-header.aberto .cat-vista-grupo-contagem {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.cat-vista-grupo-itens {
  animation: catGrupoSlide 0.18s ease-out;
}
@keyframes catGrupoSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Drop area pra upload arrastando arquivos */
.drop-area {
  display: block;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  background: var(--bg-soft);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  box-sizing: border-box;
}
.drop-area:hover { border-color: var(--brand); color: var(--ink); }
.drop-area.drop-area-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.drop-area-icone {
  font-size: 32px;
  margin-bottom: 6px;
  display: block;
}
.drop-area-titulo {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.drop-area-sub {
  font-size: 12px;
  color: var(--muted);
}
.drop-area input[type="file"] {
  display: none;
}
.modal-card {
  background: var(--panel);
  border-radius: var(--radius);
  max-width: 92vw;
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-modal);
}
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted);
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 20px; }
.modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 8px;
}
.field { display: block; margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.field-input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 141, 107, 0.12);
}
.field-checkbox {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 14px 0;
  font-size: 13px;
}
.link-btn {
  background: none;
  border: none;
  color: var(--orange);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

@media (max-width: 1200px) {
  .transp-card-head { flex-wrap: wrap; }
  .transp-card-head > .transp-card-meta { flex: 1 0 100%; order: 5; padding-left: 88px; }
  .transp-card-head > .transp-card-actions { order: 4; margin-left: auto; }
}
@media (max-width: 600px) {
  .transp-card-meta { gap: 14px; flex-wrap: wrap; }
  .filiais-grid { grid-template-columns: 1fr; }
  .transp-card-head > .transp-card-meta { padding-left: 0; }
}

/* === Tabs Comunicados === */
.com-tab {
  background: none;
  border: none;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.com-tab:hover { color: var(--ink); }
.com-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Tabs de Gestão de Fretes (mesmo padrão visual das tabs de comunicados) */
.gf-tab {
  background: none;
  border: none;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.gf-tab:hover { color: var(--ink); }
.gf-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Seletor de vendedor no hero do painel — força cor escura legível nas options */
#catPainelVendedorSelect option {
  background: #fff;
  color: #1c1c1c;
  font-weight: 600;
}
#catPainelVendedorSelect:focus { outline: 2px solid var(--gold, #d4a017); outline-offset: 1px; }

/* =========================================================================
   RESPONSIVIDADE NOTEBOOK (901–1366px) — 21/07
   Telas de notebook (1366 nativo, ou 1920 com escala 125–150% do Windows =
   1280–1536 efetivos) ficavam "apertadas": a sidebar fixa de 240px comia o
   espaço. Aqui a sidebar vira DRAWER (recolhida por padrão, o ☰ abre por cima),
   liberando a largura toda pro conteúdo — MAS mantém o layout desktop (grid,
   multi-coluna), sem "mobilizar" como o bloco ≤900px faz. O JS (isMobile) usa
   o mesmo limite de 1366px pra o ☰ abrir/fechar o drawer e o clique num item
   fechar. Ranges disjuntos: ≤900 = mobile; 901–1366 = notebook; >1366 = desktop.
   ========================================================================= */
@media (min-width: 901px) and (max-width: 1366px) {
  .app { grid-template-columns: 1fr !important; }
  /* Sidebar sai do fluxo e vira drawer deslizante (igual mobile, porém o resto
     da tela continua no layout desktop). */
  .app > .sidebar,
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -300px !important;
    bottom: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 9000 !important;
    transition: left 0.25s ease !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 16px rgba(0,0,0,0.4);
  }
  body.sidebar-aberto .sidebar,
  body.sidebar-aberto > .app .sidebar { left: 0 !important; }
  body.sidebar-aberto::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 8999;
    cursor: pointer;
  }
  /* Um respiro a menos de padding pra ganhar largura útil (sem exagerar). */
  .content { padding: 18px 20px !important; }
}

/* =========================================================================
   RESPONSIVIDADE MOBILE — sidebar vira overlay, telas se adaptam
   ========================================================================= */
@media (max-width: 900px) {
  html, body {
    overflow: auto !important;
    height: auto !important;
    -webkit-text-size-adjust: 100%;
  }
  .app {
    display: block !important;
    grid-template-columns: none !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  /* Sidebar como drawer fixo fora da tela */
  .app > .sidebar,
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -320px !important;
    bottom: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 9000 !important;
    transition: left 0.25s ease !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 16px rgba(0,0,0,0.4);
  }
  body.sidebar-aberto .sidebar,
  body.sidebar-aberto > .app .sidebar {
    left: 0 !important;
  }
  body.sidebar-aberto::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 8999;
    cursor: pointer;
  }
  /* Topbar compacta */
  .topbar {
    padding: 8px 10px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar > * { font-size: 12px; }
  .breadcrumb, #breadcrumb { display: none !important; }
  #pageTitle { font-size: 14px; }
  /* Container principal — sem padding gigante */
  .content, .page, main { padding: 12px !important; }
  /* Grids que viram coluna única */
  .grid-2, .cat-painel-grid, .prod-det-grid2, .config-grid {
    grid-template-columns: 1fr !important;
  }
  /* Tabelas: scroll horizontal */
  .prod-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prod-tabela { font-size: 12px; min-width: 0; }
  .prod-tabela th, .prod-tabela td { padding: 8px 6px; }
  /* Headers de página */
  .prod-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .prod-titulo { font-size: 18px; }
  .prod-sub { font-size: 11px; }
  /* Toolbar fica empilhada */
  .prod-toolbar { flex-wrap: wrap; gap: 6px; }
  .prod-toolbar-input { flex: 1 1 100%; min-width: 0; }
  .prod-toolbar-select { flex: 1 1 calc(50% - 3px); }
  /* Hero do painel */
  .cat-painel-hero {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px !important;
  }
  /* Modais ocupam quase tudo */
  .modal-card, .modal-content { width: 96vw !important; max-width: 96vw !important; }
  .modal-body { padding: 14px !important; }
  /* Botões em coluna nos rodapés */
  .config-save-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .btn { white-space: normal; }
  /* Remove delay de 300ms no toque, evita zoom involuntário */
  button, a, .btn, .nav-item, [onclick] { touch-action: manipulation; }

  /* Painel: KPIs em 1 coluna pra não cortar valor */
  .cat-kpi-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .cat-kpi { padding: 12px 14px !important; }
  .cat-kpi-value { font-size: 22px !important; }
  /* Hero do painel mais compacto */
  .cat-painel-hero-content { padding: 16px !important; }
  /* Top 10 cards — sempre empilha (não lado a lado) */
  .cat-painel-grid, .cat-grid-2col { grid-template-columns: 1fr !important; }
  /* Tabelas: célula não quebra palavra forçando vertical, só wrap natural */
  .prod-tabela td, .cat-tabela td { word-break: normal; overflow-wrap: anywhere; white-space: normal; }
  /* Separação: header empilhado (título acima, botões abaixo) */
  #page-separacao .prod-header > div:first-child { width: 100%; }
  #page-separacao .prod-header > div:last-child { display: flex; gap: 8px; width: 100%; }
  #page-separacao .prod-header > div:last-child .btn { flex: 1; }
  /* Status badges sem ficar cortado por overflow */
  .prod-tabela td span[style*="border-radius"] { white-space: nowrap; }
}

/* =========================================================================
   SEPARAÇÃO MOBILE — fullscreen sem sidebar nem topbar
   ========================================================================= */
body.sep-fullscreen .sidebar,
body.sep-fullscreen .topbar { display: none !important; }
body.sep-fullscreen .app { grid-template-columns: 0 1fr !important; height: auto; }
body.sep-fullscreen { overflow: auto; }
body.sep-fullscreen #page-separacao-mobile { padding: 0 !important; }

.sep-mobile-root {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  padding-bottom: 96px; /* espaço pro rodapé fixo */
  min-height: 100vh;
  background: #f7f7f5;
}
.sep-mobile-header {
  background: linear-gradient(135deg, #2D8D6B, #1d6b40);
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.sep-back-btn {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.sep-mobile-pedido {
  font-size: 10px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sep-mobile-cliente {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sep-mobile-crono-wrap { text-align: right; flex-shrink: 0; }
.sep-mobile-crono {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sep-mobile-crono-status {
  font-size: 9px;
  opacity: 0.85;
  margin-top: 2px;
}
.sep-mobile-progresso-bar {
  position: relative;
  height: 24px;
  background: #e5e7eb;
  margin: 0;
}
.sep-mobile-progresso-fill {
  height: 100%;
  background: linear-gradient(90deg, #fde047, #facc15);
  transition: width 0.3s;
}
.sep-mobile-progresso-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #1c1c1c;
}
.sep-mobile-feedback {
  margin: 10px 14px 0;
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
}
.sep-mobile-scanner {
  margin: 10px 14px 0;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.sep-mobile-scanner-video-wrap {
  position: relative;
  aspect-ratio: 4/3;
  background: #000;
}
.sep-mobile-scanner-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sep-mobile-scanner-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
}
.sep-mobile-scanner-manual {
  padding: 10px;
  background: #fff;
  display: flex;
  gap: 8px;
}
.sep-mobile-scanner-manual .input { flex: 1; }

.sep-mobile-lista { padding: 10px 14px; }
.sep-mobile-secao {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 12px 0 6px;
}
.sep-mobile-secao-ok { color: #1d6b40; margin-top: 8px; }
.sep-mobile-vazio {
  background: #e6f7ec;
  color: #1d6b40;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-weight: 700;
}

.sep-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  align-items: stretch;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sep-item:active { background: #e6f7ec; border-color: #2D8D6B; }
.sep-item-ok {
  background: #e6f7ec;
  border-color: #86efac;
  opacity: 0.85;
  cursor: default;
}
.sep-item-foto {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sep-item-foto img { width: 100%; height: 100%; object-fit: cover; }
.sep-item-foto-fallback { font-size: 24px; }
.sep-item-info { flex: 1; min-width: 0; }
.sep-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.sep-item-codigo {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
}
.sep-item-local {
  background: #fef3c7;
  color: #92400e;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.sep-item-local-vazio {
  background: #f1f5f9;
  color: #94a3b8;
  font-family: inherit;
  font-style: italic;
  font-size: 10px;
}
.sep-item-desc {
  font-size: 12px;
  line-height: 1.3;
  color: #1c1c1c;
  word-break: break-word;
}
.sep-item-ean {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 1px;
}
.sep-item-qtd {
  text-align: right;
  flex-shrink: 0;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.sep-item-qtd-num { font-weight: 700; font-size: 18px; line-height: 1; }
.sep-item-qtd-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 1px;
}
.sep-item-check { color: #1d6b40; font-size: 22px; margin-top: 4px; }
.sep-item-tap {
  font-size: 9px;
  color: #2D8D6B;
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
}

.sep-mobile-rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  z-index: 20;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.sep-btn-pausar, .sep-btn-finalizar {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sep-btn-pausar  { background: #fef3c7; color: #92400e; }
.sep-btn-finalizar { background: #1d6b40; color: #fff; box-shadow: 0 2px 8px rgba(29,107,64,0.25); }
.sep-btn-pausar:active, .sep-btn-finalizar:active { transform: scale(0.97); }
.sep-btn-bipar {
  flex: 1;
  min-height: 64px;
  background: linear-gradient(135deg, #2D8D6B, #1d6b40);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(45, 141, 107, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.sep-btn-bipar:active { transform: scale(0.97); box-shadow: 0 2px 6px rgba(45,141,107,0.3); }

/* Items maiores no mobile pra facilitar toque */
.sep-item { min-height: 80px; padding: 12px; }
.sep-item-foto { width: 64px; height: 64px; }
.sep-item-codigo { font-size: 15px; }
.sep-item-desc { font-size: 13px; line-height: 1.35; }
.sep-item-qtd-num { font-size: 22px; }
.sep-item-tap { font-size: 10px; }
.sep-back-btn { min-width: 44px; min-height: 44px; }
.sep-mobile-scanner-manual .input { min-height: 48px; font-size: 16px; }
.sep-mobile-scanner-manual .btn { min-height: 48px; min-width: 64px; font-size: 16px; }

/* =========================================================================
   OWLCO — mascote da IA com halo dourado pulsante + brilho (em destaque)
   ========================================================================= */
.owlco-hero {
  position: relative;
  width: min(720px, 80vw);
  height: min(720px, 70vh);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.owlco-halo {
  position: absolute;
  width: min(620px, 70vw);
  height: min(620px, 65vh);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212,160,23,0.55) 0%,
    rgba(212,160,23,0.28) 28%,
    rgba(45,141,107,0.22) 50%,
    transparent 75%);
  animation: owlcoGlow 2.8s ease-in-out infinite;
  z-index: 0;
  filter: blur(6px);
}
.owlco-halo::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
  animation: owlcoGlow 2.8s ease-in-out infinite reverse;
}
.owlco-img {
  position: relative;
  z-index: 2;
  width: min(640px, 72vw);
  height: auto;
  max-height: min(700px, 68vh);
  object-fit: contain;
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,0.22))
    drop-shadow(0 0 22px rgba(45,141,107,0.35));
  animation: owlcoFloat 4.2s ease-in-out infinite;
}
@keyframes owlcoGlow {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes owlcoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.owlco-nome {
  font-size: 13px;
  color: var(--brand-deep, #1d6b40);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-top: 6px;
}
.owlco-nome strong {
  font-size: 22px;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #2D8D6B, #d4a017);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 900px) {
  .owlco-hero { width: 320px; height: 340px; }
  .owlco-halo { width: 280px; height: 280px; }
  .owlco-img  { width: 280px; max-height: 320px; }
}

@media (max-width: 900px) {
  .owlco-hero { width: 200px; height: 200px; }
  .owlco-img  { width: 180px; max-height: 200px; }
}

/* ==================== REPOSIÇÃO DE ESTOQUE (módulo Compras) ==================== */
.rep-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.rep-kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.rep-kpi-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  font-family: 'Bricolage Grotesque', serif;
  line-height: 1.1;
}
.rep-kpi-lbl {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.rep-kpi-vermelho { border-left: 4px solid var(--red); }
.rep-kpi-vermelho .rep-kpi-num { color: var(--red); }
.rep-kpi-amarelo { border-left: 4px solid #f59e0b; }
.rep-kpi-amarelo .rep-kpi-num { color: #f59e0b; }
.rep-kpi-verde { border-left: 4px solid var(--brand-deep); }
.rep-kpi-verde .rep-kpi-num { color: var(--brand-deep); }

.rep-cod-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--ink);
}
.rep-classe-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
}
.rep-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
}
.rep-badge-import { background: #e0f2fe; color: #0c4a6e; border: 1px solid #bae6fd; }
.rep-badge-nac { background: #fef3c7; color: #78350f; border: 1px solid #fde68a; }

.rep-orp-opt:hover { background: #f8fafc; }

.rep-variantes { display:flex; gap:3px; flex-wrap:wrap; margin-top:4px; }
.rep-variant-badge {
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  font-weight:600;
  background:#f1f5f9;
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:4px;
  padding:1px 5px;
}

.rep-urg-dot {
  display:inline-block; width:10px; height:10px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,0.6);
}

/* =========================================================
   ORIENTE LIQUID GLASS — adaptação iOS 26 / macOS Tahoe (2025)
   Paleta: #0E4F3B (verde escuro) / #1d6b40 (verde médio)
   Filosofia: sutileza, lensing > blur pesado, hierarquia por peso.
   Aplicado na sidebar de perfil do WhatsApp Inbox.
   ========================================================= */

:root {
  --og-900: #0E4F3B;
  --og-700: #1d6b40;
  --og-500: #2d8a55;
  --og-100: #dcfce7;
  --iglass-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Container da sidebar */
.iglass-sidebar {
  width: 360px;
  flex-shrink: 0;
  height: 100%;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(45,138,85,0.18), transparent 60%),
    linear-gradient(180deg, rgba(14,79,59,0.06), rgba(14,79,59,0.02));
  border-left: 1px solid rgba(14,79,59,0.10);
  overflow: hidden;
  position: relative;
}
.iglass-sidebar__scroll {
  height: 100%; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(14,79,59,0.18) transparent;
}
.iglass-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.iglass-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(14,79,59,0.18); border-radius: 99px; }
.iglass-sidebar__scroll::-webkit-scrollbar-track { background: transparent; }

/* Header verde Oriente — cartão principal de identificação do contato */
.iglass-header {
  position: relative;
  padding: 20px 16px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(14,79,59,0.62) 0%, rgba(29,107,64,0.48) 100%);
  backdrop-filter: blur(20px) saturate(175%);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  color: #f5f9f7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 12px 32px -8px rgba(14,79,59,0.28);
}
.iglass-avatar-xl {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 26px; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 12px rgba(0,0,0,0.18);
  letter-spacing: -0.02em;
}
.iglass-header h2 {
  font: 600 17px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: #fff;
}
.iglass-phone {
  display: block;
  font: 500 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: rgba(245,249,247,0.82);
  margin-bottom: 14px;
  text-decoration: none;
}
.iglass-phone:hover { color: #fff; }

/* Card branco translúcido — bloco padrão de informação */
.iglass-card {
  position: relative;
  padding: 12px 14px;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(20px) saturate(175%);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid rgba(14,79,59,0.08);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(14,79,59,0.04),
    0 1px 2px rgba(14,79,59,0.06),
    0 8px 20px -10px rgba(14,79,59,0.18);
  transition: transform 240ms var(--iglass-ease), box-shadow 240ms var(--iglass-ease);
}
.iglass-card:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 12px 28px -10px rgba(14,79,59,0.26);
}
/* Variante destacada — ticket ativo, com tint verde */
.iglass-card--accent {
  background: linear-gradient(135deg, rgba(45,138,85,0.18), rgba(14,79,59,0.10));
  border-color: rgba(14,79,59,0.18);
}

.iglass-card__title {
  font: 700 10.5px/1 -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--og-700);
  margin: 0 0 8px;
}

.iglass-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.iglass-list-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 10px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(14,79,59,0.06);
  font: 500 12.5px/1.3 -apple-system, system-ui, sans-serif;
  color: #1a2e26;
  cursor: pointer;
  transition: background 160ms var(--iglass-ease);
}
.iglass-list-item:hover { background: rgba(255,255,255,0.85); }

/* Chips / badges */
.iglass-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font: 700 10.5px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.02em;
  background: rgba(45,138,85,0.18);
  border: 1px solid rgba(45,138,85,0.24);
  color: var(--og-900);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.iglass-chip--danger { background: rgba(220,38,38,0.14); border-color: rgba(220,38,38,0.28); color: #991b1b; }
.iglass-chip--warn   { background: rgba(234,179,8,0.16); border-color: rgba(234,179,8,0.32); color: #854d0e; }
.iglass-chip--info   { background: rgba(14,165,233,0.14); border-color: rgba(14,165,233,0.26); color: #075985; }

/* Inputs / forms */
.iglass-input, .iglass-select, .iglass-textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px;
  font: 500 12.5px -apple-system, system-ui, sans-serif;
  color: var(--og-900);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(14,79,59,0.12);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: border-color 160ms var(--iglass-ease), box-shadow 160ms var(--iglass-ease), background 160ms var(--iglass-ease);
  font-family: inherit;
}
.iglass-input:focus, .iglass-select:focus, .iglass-textarea:focus {
  outline: none;
  border-color: rgba(29,107,64,0.45);
  background: rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 0 0 3px rgba(29,107,64,0.14);
}

/* Botões */
.iglass-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  font: 600 12.5px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.005em;
  border-radius: 11px;
  border: 1px solid rgba(14,79,59,0.14);
  background: rgba(255,255,255,0.7);
  color: var(--og-900);
  cursor: pointer;
  transition: transform 160ms var(--iglass-ease), background 160ms var(--iglass-ease), box-shadow 160ms var(--iglass-ease);
  font-family: inherit;
}
.iglass-btn:hover { transform: scale(1.015); background: rgba(255,255,255,0.92); }
.iglass-btn:active { transform: scale(0.985); }
.iglass-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, rgba(45,138,85,0.95), rgba(14,79,59,0.98));
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 6px 16px -4px rgba(14,79,59,0.32);
}
.iglass-btn--primary:hover {
  background: linear-gradient(180deg, rgba(56,158,99,1), rgba(29,107,64,1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 10px 22px -4px rgba(14,79,59,0.4);
}
.iglass-btn--full { width: 100%; }

/* Linhas de dado (label : valor) — usado no card empresa */
.iglass-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  font: 500 12px/1.4 -apple-system, system-ui, sans-serif;
}
.iglass-row .iglass-row__lbl {
  font-size: 10.5px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em;
}
.iglass-row .iglass-row__val {
  color: var(--og-900); font-weight: 600;
  text-align: right; word-break: break-word;
}

/* Skeleton shimmer (loading) */
.iglass-skeleton {
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(14,79,59,0.06), rgba(14,79,59,0.14), rgba(14,79,59,0.06));
  background-size: 200% 100%;
  animation: iglassShimmer 1.4s linear infinite;
}
@keyframes iglassShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Responsivo */
@media (max-width: 1280px) { .iglass-sidebar { width: 320px; } }
@media (max-width: 1100px) { .iglass-sidebar { display: none; } }

/* Fallback (Safari antigo / Firefox sem backdrop-filter) */
@supports not (backdrop-filter: blur(1px)) {
  .iglass-card { background: rgba(255,255,255,0.96); }
  .iglass-header { background: var(--og-900); }
  .iglass-input { background: rgba(255,255,255,0.96); }
}

/* Acessibilidade — respeitar redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .iglass-card, .iglass-btn, .iglass-list-item, .iglass-input { transition: none; }
  .iglass-card:hover, .iglass-btn:hover { transform: none; }
  .iglass-skeleton { animation: none; }
}

/* =========================================================
   ORIENTE CRM — DARK FUNNEL (Meu Kanban)
   Visual escuro moderno inspirado em CRMs premium (Pipedrive Sky/Kommo Pro).
   Aplicado quando #meuKanbanContent ganha a classe .mk-dark.
   ========================================================= */

.mk-dark {
  --mkd-bg-1: #0b1220;
  --mkd-bg-2: #0e1726;
  --mkd-card: rgba(255, 255, 255, 0.035);
  --mkd-card-hover: rgba(255, 255, 255, 0.06);
  --mkd-border: rgba(255, 255, 255, 0.08);
  --mkd-border-hover: rgba(255, 255, 255, 0.16);
  --mkd-text: #f8fafc;
  --mkd-text-2: rgba(248, 250, 252, 0.62);
  --mkd-text-3: rgba(248, 250, 252, 0.38);
  --mkd-accent: #f59e0b;
  --mkd-accent-2: #fb923c;

  background:
    radial-gradient(140% 80% at 100% 0%, rgba(45, 138, 85, 0.10), transparent 50%),
    radial-gradient(120% 80% at 0% 100%, rgba(245, 158, 11, 0.06), transparent 50%),
    linear-gradient(180deg, var(--mkd-bg-1) 0%, var(--mkd-bg-2) 100%);
  color: var(--mkd-text);
  border-radius: 18px;
  padding: 22px 26px;
  min-height: calc(100vh - 100px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Header do funil */
.mk-dark .mk-d-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 0 2px 18px;
  border-bottom: 1px solid var(--mkd-border);
  margin-bottom: 18px;
}
.mk-dark .mk-d-titulo {
  font: 700 22px/1.1 -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--mkd-text);
  margin: 0 0 4px;
}
.mk-dark .mk-d-sub {
  font-size: 12.5px; color: var(--mkd-text-2); font-weight: 500;
}
.mk-dark .mk-d-sub strong { color: var(--mkd-text); font-weight: 700; }

.mk-dark .mk-d-actions { display: flex; align-items: center; gap: 8px; }
.mk-dark .mk-d-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 11px;
  font: 600 12.5px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.005em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--mkd-border);
  color: var(--mkd-text);
  cursor: pointer;
  transition: background 160ms cubic-bezier(.22,1,.36,1), border-color 160ms;
  font-family: inherit;
}
.mk-dark .mk-d-btn:hover { background: rgba(255,255,255,0.09); border-color: var(--mkd-border-hover); }
.mk-dark .mk-d-btn--primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px -4px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  font-weight: 700;
}
.mk-dark .mk-d-btn--primary:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  transform: translateY(-1px);
}

/* Toggle Kanban/Lista/Calendário */
.mk-dark .mk-d-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--mkd-border);
  border-radius: 9px;
  padding: 2px;
}
.mk-dark .mk-d-toggle button {
  background: transparent; color: var(--mkd-text-2);
  border: 0; padding: 6px 12px;
  border-radius: 7px;
  font: 600 11.5px -apple-system, system-ui, sans-serif;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.mk-dark .mk-d-toggle button.ativo { background: rgba(255,255,255,0.12); color: var(--mkd-text); }

/* Colunas */
.mk-dark .mk-d-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.mk-dark .mk-d-col {
  flex: 1; min-width: 280px; max-width: 320px;
  display: flex; flex-direction: column; gap: 10px;
}
.mk-dark .mk-d-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--mkd-border);
}
.mk-dark .mk-d-col-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.mk-dark .mk-d-col-nome {
  flex: 1;
  font: 700 13px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: var(--mkd-text);
}
.mk-dark .mk-d-col-cnt {
  font: 700 11px ui-monospace, monospace;
  color: var(--mkd-text-2);
  background: rgba(255,255,255,0.06);
  padding: 2px 9px;
  border-radius: 99px;
  min-width: 22px; text-align: center;
}

/* Card de oportunidade */
.mk-dark .mk-d-card {
  position: relative;
  padding: 14px;
  background: var(--mkd-card);
  border: 1px solid var(--mkd-border);
  border-radius: 14px;
  cursor: grab;
  transition: background 200ms cubic-bezier(.22,1,.36,1), border-color 200ms, transform 200ms;
  display: flex; flex-direction: column; gap: 8px;
}
.mk-dark .mk-d-card:hover {
  background: var(--mkd-card-hover);
  border-color: var(--mkd-border-hover);
  transform: translateY(-1px);
}
.mk-dark .mk-d-card-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.mk-dark .mk-d-card-titulo {
  font: 600 14px/1.3 -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--mkd-text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-dark .mk-d-card-sub {
  font: 500 12px/1.4 -apple-system, system-ui, sans-serif;
  color: var(--mkd-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-dark .mk-d-card-preco {
  font: 700 18px/1 -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  letter-spacing: -0.015em;
  color: var(--mkd-text);
  margin-top: 4px;
}

/* Avatar quadrado colorido com iniciais */
.mk-dark .mk-d-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  font: 700 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* Linha de baixo: ícone + tempo/status */
.mk-dark .mk-d-card-foot {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: var(--mkd-text-3);
  margin-top: 2px;
}
.mk-dark .mk-d-card-foot svg { width: 12px; height: 12px; opacity: 0.6; }
.mk-dark .mk-d-card-foot .mk-d-tag {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
  letter-spacing: 0.02em;
}

/* Empty state ("Solte um card aqui") */
.mk-dark .mk-d-col-empty {
  font: 500 12px -apple-system, system-ui, sans-serif;
  color: var(--mkd-text-3);
  text-align: center;
  padding: 22px 12px;
  border: 1px dashed var(--mkd-border);
  border-radius: 12px;
}

/* =========================================================
   ORIENTE GLASS — adaptação do protótipo do usuário (oriente-crm.html)
   Sistema dual de tema: dark = visual original / light = mesma estrutura
   com paleta clara. Variáveis trocam via [data-theme] em <html>.
   ========================================================= */

:root[data-theme="dark"] {
  --og-bg-0: #070b18;
  --og-bg-1: #0b1227;
  --og-surface: #131c3a;
  --og-glass: rgba(255,255,255,.06);
  --og-glass-strong: rgba(255,255,255,.10);
  --og-glass-deep: rgba(0,0,0,.22);
  --og-glass-deeper: rgba(0,0,0,.18);
  --og-hairline: rgba(255,255,255,.14);
  --og-hairline-soft: rgba(255,255,255,.07);
  --og-spec: rgba(255,255,255,.55);
  --og-ink: #f4f7ff;
  --og-ink-2: #aeb9d6;
  --og-ink-3: #717da3;
  --og-amber: #f9893a;
  --og-amber-2: #ffb066;
  --og-blue: #4f8dff;
  --og-teal: #37d6c0;
  --og-green: #3ddc8a;
  --og-red: #ff6b6b;
  --og-shadow: 0 18px 50px -12px rgba(0,0,0,.65);

  /* Override das variáveis LEGADAS (--bg, --panel, --ink, etc) que controlam
     o fundo principal do app e centenas de componentes antigos. Sem esse
     override o dark mode só atinge os componentes og-glass — o body, panels
     e cards legados continuariam claros. */
  --bg:           #0f1419;
  --bg-soft:      #161c24;
  --panel:        #1a2129;
  --ink:          #f4f7ff;
  --ink-soft:     #aeb9d6;
  --muted:        #717da3;
  --line:         rgba(255,255,255,0.10);
  --line-strong:  rgba(255,255,255,0.18);
  --brand-soft:   rgba(45,141,107,0.18);
  --accent-soft:  rgba(45,141,107,0.18);
  --green-soft:   rgba(97,162,98,0.18);
  --gold-soft:    rgba(208,204,82,0.16);
  --olive-soft:   rgba(154,184,89,0.16);
  --red-soft:     rgba(255,107,107,0.16);
  --blue-soft:    rgba(79,141,255,0.16);
  --yellow-soft:  rgba(208,204,82,0.16);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.5);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.7);
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 800px 600px at 0% 0%, rgba(45, 141, 107, 0.08), transparent),
    radial-gradient(ellipse 600px 400px at 100% 100%, rgba(208, 204, 82, 0.04), transparent),
    var(--bg);
}

/* ============================================================
   DARK MODE OVERRIDES — pega cards/panels hardcoded com #fff,
   styles inline brancos dos JS, e textos cinza-escuro que somem.
   ============================================================ */
:root[data-theme="dark"] .modulo-dropdown,
:root[data-theme="dark"] .cfg-dd-item,
:root[data-theme="dark"] .cat-kpi,
:root[data-theme="dark"] .prod-kpi-card,
:root[data-theme="dark"] .prod-toolbar,
:root[data-theme="dark"] .cmd-palette-panel,
:root[data-theme="dark"] .cat-modal-foto-principal,
:root[data-theme="dark"] .cat-modal-secao,
:root[data-theme="dark"] .cat-modal-versao-card,
:root[data-theme="dark"] .cat-ft-card,
:root[data-theme="dark"] .cat-ft-busca,
:root[data-theme="dark"] .cat-info-card,
:root[data-theme="dark"] .cat-curso-card,
:root[data-theme="dark"] .cat-search-bar,
:root[data-theme="dark"] .cat-filter-input,
:root[data-theme="dark"] .cat-dna-card,
:root[data-theme="dark"] .cat-modelo-foto-item,
:root[data-theme="dark"] .cat-canvas-card,
:root[data-theme="dark"] .cat-parts-list-card,
:root[data-theme="dark"] .cat-adm-prod-card,
:root[data-theme="dark"] .cat-chat-bubble,
:root[data-theme="dark"] .prod-foto-item,
:root[data-theme="dark"] .prod-foto-sugestao,
:root[data-theme="dark"] .sep-item,
:root[data-theme="dark"] .sep-mobile-scanner-manual,
:root[data-theme="dark"] .sep-mobile-rodape,
:root[data-theme="dark"] .rep-kpi {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

:root[data-theme="dark"] .sep-mobile-root,
:root[data-theme="dark"] .prod-tabela thead,
:root[data-theme="dark"] .prod-tabela thead th,
:root[data-theme="dark"] .cat-modal-versao-thumb,
:root[data-theme="dark"] .sep-item-foto,
:root[data-theme="dark"] .sep-item-local-vazio,
:root[data-theme="dark"] .rep-cod-badge,
:root[data-theme="dark"] .rep-variant-badge,
:root[data-theme="dark"] .topbar-search-kbd,
:root[data-theme="dark"] .cmd-palette-item-icone {
  background: var(--bg-soft) !important;
  color: var(--ink-soft) !important;
  border-color: var(--line) !important;
}

:root[data-theme="dark"] tr:hover td,
:root[data-theme="dark"] .rep-orp-opt:hover,
:root[data-theme="dark"] .btn.btn-secondary:hover {
  background: var(--bg-soft) !important;
}

:root[data-theme="dark"] .sep-mobile-progresso-bar {
  background: var(--line) !important;
}

:root[data-theme="dark"] .btn:not(.btn-primary):not([class*="og-btn--primary"]),
:root[data-theme="dark"] .search:focus,
:root[data-theme="dark"] .topbar-search:focus-within,
:root[data-theme="dark"] .config-field input:focus,
:root[data-theme="dark"] .prod-det-voltar {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Inline styles dos JS que normalmente vencem o CSS */
:root[data-theme="dark"] [style*="background:#fff"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background: #fff"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background:#FFF"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background:white"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background: white"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background-color:#fff"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background-color: #fff"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background-color:white"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background-color: white"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background:#ffffff"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]),
:root[data-theme="dark"] [style*="background: #ffffff"]:not(.og-btn):not([class*="og-btn"]):not(.btn-primary):not([class*="btn-primary"]) {
  background: var(--panel) !important;
  color: var(--ink) !important;
}

:root[data-theme="dark"] [style*="background:#f8fafc"],
:root[data-theme="dark"] [style*="background: #f8fafc"],
:root[data-theme="dark"] [style*="background:#f1f5f9"],
:root[data-theme="dark"] [style*="background: #f1f5f9"],
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background: #fafafa"],
:root[data-theme="dark"] [style*="background:#fafaf6"],
:root[data-theme="dark"] [style*="background: #fafaf6"],
:root[data-theme="dark"] [style*="background:#f7f7f5"],
:root[data-theme="dark"] [style*="background: #f7f7f5"],
:root[data-theme="dark"] [style*="background:#faf9f7"],
:root[data-theme="dark"] [style*="background: #faf9f7"],
:root[data-theme="dark"] [style*="background-color:#f8fafc"],
:root[data-theme="dark"] [style*="background-color: #f8fafc"],
:root[data-theme="dark"] [style*="background-color:#f1f5f9"],
:root[data-theme="dark"] [style*="background-color: #f1f5f9"] {
  background: var(--bg-soft) !important;
  color: var(--ink-soft) !important;
}

:root[data-theme="dark"] [style*="background:#fffbea"],
:root[data-theme="dark"] [style*="background: #fffbea"] {
  background: rgba(208,204,82,0.12) !important;
  color: var(--ink) !important;
}

:root[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
:root[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
:root[data-theme="dark"] [style*="border:1px solid #cbd5e1"],
:root[data-theme="dark"] [style*="border: 1px solid #cbd5e1"],
:root[data-theme="dark"] [style*="border:1px solid #e9ecef"],
:root[data-theme="dark"] [style*="border: 1px solid #e9ecef"] {
  border-color: var(--line) !important;
}

:root[data-theme="dark"] [style*="color:#475569"]:not([style*="background"]),
:root[data-theme="dark"] [style*="color: #475569"]:not([style*="background"]),
:root[data-theme="dark"] [style*="color:#64748b"]:not([style*="background"]),
:root[data-theme="dark"] [style*="color: #64748b"]:not([style*="background"]),
:root[data-theme="dark"] [style*="color:#334155"]:not([style*="background"]),
:root[data-theme="dark"] [style*="color: #334155"]:not([style*="background"]) {
  color: var(--ink-soft) !important;
}

/* Imagem branca dentro de zoom (PNG transparente precisa contraste) — preservar */
:root[data-theme="dark"] .cat-modal-foto-principal img[style*="background:#fff"],
:root[data-theme="dark"] .cat-modal-foto-principal img[style*="background: #fff"] {
  background: #fff !important;
}

/* Toggle switch — bolinha mantém branca */
:root[data-theme="dark"] .toggle::after {
  background: #fff !important;
}

/* Breadcrumb do topbar foi removido a pedido (ficava com texto cinza
   redundante antes da barra de busca). Esconde em qualquer página. */
#breadcrumb { display: none !important; }

/* Ícones do topbar no dark mode — reforça contraste */
:root[data-theme="dark"] .sidebar-toggle,
:root[data-theme="dark"] .topbar-icon-btn {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
:root[data-theme="dark"] .sidebar-toggle {
  background: var(--bg-soft) !important;
}
:root[data-theme="dark"] .sidebar-toggle:hover,
:root[data-theme="dark"] .topbar-icon-btn:hover {
  background: var(--panel) !important;
  color: var(--og-green) !important;
}

/* Abas (tabs-ui.js) — texto fica ilegível no dark com cores hardcoded */
:root[data-theme="dark"] #tms-tabs-bar.tms-tabs-bar {
  background: rgba(20,28,40,0.7) !important;
  border-bottom-color: var(--line) !important;
  border-top-color: rgba(255,255,255,0.05) !important;
}
:root[data-theme="dark"] .tms-tab {
  color: var(--ink-soft) !important;
}
:root[data-theme="dark"] .tms-tab:hover {
  color: var(--og-green) !important;
  background: rgba(61,220,138,0.10) !important;
}
:root[data-theme="dark"] .tms-tab.active {
  color: var(--og-green) !important;
  background: rgba(61,220,138,0.16) !important;
  border-bottom-color: var(--og-green) !important;
}
:root[data-theme="dark"] .tms-tab.fixed .tms-tab-home-icon,
:root[data-theme="dark"] .tms-tabs-help:hover {
  color: var(--og-green) !important;
}
:root[data-theme="dark"] .tms-tabs-help {
  color: var(--ink-soft) !important;
  background: rgba(255,255,255,0.06) !important;
}
:root[data-theme="dark"] .tms-tabs-help:hover {
  background: rgba(255,255,255,0.10) !important;
}
:root[data-theme="dark"] #tms-tabs-bar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18) !important;
}

/* Painel Supervisor — KPI cards CRM (dark mode only).
   Light mode permanece intocado (usa var(--og-glass) padrão).
   Paleta verde-vidro Oriente sobreposta ao hero verde do header. */
:root[data-theme="dark"] .psup-kpi {
  background: rgba(14, 79, 59, 0.18) !important;
  border: 1px solid rgba(52, 211, 153, 0.12) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
:root[data-theme="dark"] .psup-kpi:hover {
  border-color: rgba(52, 211, 153, 0.22) !important;
}

:root[data-theme="light"], :root:not([data-theme]) {
  /* Light variant: mesma estrutura, mas vidro sobre fundo claro com tinta verde Oriente */
  --og-bg-0: #f4f6fa;
  --og-bg-1: #ffffff;
  --og-surface: #ffffff;
  --og-glass: rgba(255,255,255,.65);
  --og-glass-strong: rgba(255,255,255,.85);
  --og-glass-deep: rgba(14,79,59,.04);
  --og-glass-deeper: rgba(14,79,59,.03);
  --og-hairline: rgba(14,79,59,.16);
  --og-hairline-soft: rgba(14,79,59,.08);
  --og-spec: rgba(255,255,255,.9);
  --og-ink: #0E4F3B;
  --og-ink-2: #475569;
  --og-ink-3: #64748b;
  --og-amber: #f59e0b;
  --og-amber-2: #f97316;
  --og-blue: #2563eb;
  --og-teal: #0d9488;
  --og-green: #15803d;
  --og-red: #dc2626;
  --og-shadow: 0 12px 32px -8px rgba(14,79,59,.18);
}

/* Material vidro reutilizável (4 cantos arredondados, blur, sheen no topo) */
.og-glass {
  position: relative;
  background: var(--og-glass);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 26px;
  box-shadow: var(--og-shadow), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 .5px rgba(255,255,255,.04);
}
.og-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%);
}

/* Páginas "app full-height" (Inbox, E-mail) — zera padding do .page pra o
   shell ocupar a viewport corretamente e o composer ficar colado no fundo. */
#page-whatsapp-inbox,
#page-email {
  padding: 0 !important;
  margin: 0;
}

/* ===== WhatsApp Inbox 4-colunas (lista / contexto / chat / tools) ===== */
.wa-shell {
  position: relative;
  display: grid;
  /* Larguras flexíveis: lista e ctx encolhem em telas apertadas; chat ocupa o sobra */
  grid-template-columns: minmax(200px, 240px) minmax(260px, 320px) minmax(0, 1fr) 60px;
  gap: 10px;
  /* Usa dvh (dynamic viewport) pra evitar problema com toolbar mobile.
     Subtrai chrome: topbar ~64px + tabs ~44px + content padding ~32px = ~140px */
  height: calc(100dvh - 140px);
  max-height: calc(100dvh - 140px);
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
}
.wa-shell > * { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* og-glass como container do shell precisa hidden pra cantos arredondados clipar */
.wa-shell > .og-glass { overflow: hidden; }

/* Coluna 1 — lista de conversas */
.wa-list .lh { padding: 14px 12px 11px; border-bottom: 1px solid var(--og-hairline-soft); }
.wa-list .lh h2 { font-size: 15px; font-weight: 700; margin: 0 0 11px; text-align: center; color: var(--og-ink); }
.wa-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 11px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
}
.wa-search svg { width: 15px; height: 15px; color: var(--og-ink-3); flex: none; }
.wa-search input {
  flex: 1; background: none; border: none; outline: none; color: var(--og-ink);
  font: inherit; font-size: 13px; min-width: 0;
}
.wa-search input::placeholder { color: var(--og-ink-3); }
.wa-convos { flex: 1; overflow-y: auto; }
.wa-convos::-webkit-scrollbar { width: 6px; }
.wa-convos::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }

.og-convo {
  display: flex; gap: 10px; padding: 12px 12px; cursor: pointer;
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 3px solid transparent;
  transition: .15s; position: relative;
  min-width: 0;
}
.og-convo:hover { background: var(--og-hairline-soft); }
.og-convo.on { background: var(--og-glass-strong); border-left-color: var(--og-green); }
.og-convo .av {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  font-size: 14px; font-weight: 700; color: #fff;
  display: grid; place-items: center; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.og-convo .av .ondot {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--og-green); border: 2.5px solid var(--og-bg-1);
}
.og-convo .cmid { flex: 1; min-width: 0; }
.og-convo .crow { display: flex; align-items: center; gap: 6px; }
.og-convo .crow b {
  font-size: 13.5px; font-weight: 600; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--og-ink);
}
.og-convo .crow .ct { font-size: 10.5px; color: var(--og-ink-3); flex: none; }
.og-convo .cprev {
  font-size: 12px; color: var(--og-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 3px;
}
.og-convo .cbadge {
  position: absolute; right: 13px; bottom: 14px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--og-green); color: #ffffff;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}

/* Coluna 2 — Contexto / acompanhamento */
.ctx-scroll {
  flex: 1; overflow-y: auto; padding: 13px 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.ctx-scroll::-webkit-scrollbar { width: 6px; }
.ctx-scroll::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }
.ctx-card {
  background: var(--og-glass-deeper);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 16px;
  padding: 14px;
}
.ctx-title {
  font-size: 11px; font-weight: 600; color: var(--og-ink-3);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 11px;
  display: flex; align-items: center; gap: 7px;
}
.ctx-title svg { width: 14px; height: 14px; flex: none; }
.ctx-title .edit {
  margin-left: auto;
  color: var(--og-amber-2); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 11.5px;
}
.ctx-contact { display: flex; align-items: center; gap: 12px; }
.ctx-contact .av {
  width: 50px; height: 50px; border-radius: 16px;
  font-size: 17px; font-weight: 700; color: #fff;
  display: grid; place-items: center; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.ctx-contact b { font-size: 15px; font-weight: 700; display: block; line-height: 1.2; color: var(--og-ink); }
.ctx-contact small { font-size: 12px; color: var(--og-ink-2); }
.ctx-contact .ph {
  font-size: 12px; color: var(--og-green); font-weight: 600;
  margin-top: 3px; display: flex; align-items: center; gap: 5px;
}
.ctx-contact .ph svg { width: 13px; height: 13px; }
.drow {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; font-size: 12.5px; align-items: baseline;
}
.drow:not(:last-child) { border-bottom: 1px solid var(--og-hairline-soft); }
.drow > span { color: var(--og-ink-3); flex: none; }
.drow > b { font-weight: 600; text-align: right; color: var(--og-ink); }

.opp-val {
  font-size: 22px; font-weight: 700;
  color: var(--og-amber-2);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 12px;
}
.stepper { display: flex; gap: 4px; margin-bottom: 9px; }
.stepper i {
  flex: 1; height: 5px; border-radius: 3px;
  background: var(--og-hairline);
}
.stepper i.done { background: var(--og-green); }
.stepper i.cur  { background: var(--og-amber); }
.opp-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--og-ink-2); }

.mach { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.mach .mico {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: rgba(249,137,58,.16); color: var(--og-amber-2);
}
.mach .mico svg { width: 24px; height: 24px; }
.mach b { font-size: 13.5px; font-weight: 700; display: block; line-height: 1.2; color: var(--og-ink); }
.mach small { font-size: 11.5px; color: var(--og-ink-2); }

.qmini { display: flex; align-items: center; gap: 9px; padding: 9px 0; }
.qmini:not(:last-child) { border-bottom: 1px solid var(--og-hairline-soft); }
.qmini .qn { font-size: 12.5px; font-weight: 600; color: var(--og-ink); }
.qmini .qv { margin-left: auto; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--og-ink); }

.task { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
.task:not(:last-child) { border-bottom: 1px solid var(--og-hairline-soft); }
.task .ck {
  width: 19px; height: 19px; border-radius: 6px;
  border: 1.6px solid var(--og-hairline); flex: none; margin-top: 1px;
  cursor: pointer; display: grid; place-items: center;
  transition: .15s;
}
.task .ck svg { width: 12px; height: 12px; color: #ffffff; opacity: 0; transition: .15s; }
.task.done .ck { background: var(--og-green); border-color: var(--og-green); }
.task.done .ck svg { opacity: 1; }
.task .tt { font-size: 12.5px; line-height: 1.35; color: var(--og-ink); }
.task.done .tt { text-decoration: line-through; color: var(--og-ink-3); }
.task .td { font-size: 11px; color: var(--og-ink-3); margin-top: 2px; }

/* Coluna 3 — Chat */
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--og-hairline-soft);
}
.chat-head .av {
  width: 42px; height: 42px; border-radius: 13px;
  font-size: 14px; font-weight: 700; color: #fff;
  display: grid; place-items: center; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.chat-head .ci { flex: 1; min-width: 0; }
.chat-head .ci b { font-size: 14.5px; font-weight: 700; display: block; color: var(--og-ink); }
.chat-head .ci small {
  font-size: 12px; color: var(--og-green);
  display: flex; align-items: center; gap: 5px;
}
.chat-head .ci small::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--og-green); flex: none;
}
.chat-head .ha { display: flex; gap: 6px; align-items: center; }
.chat-head .ha .iconbtn { width: 36px; height: 36px; }
/* Back / lista drawer buttons ficam à esquerda do avatar */
.chat-head .wa-back-btn,
.chat-head .wa-list-btn { margin-right: 4px; }

.chat-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }
.day {
  align-self: center; font-size: 11.5px; font-weight: 700;
  color: var(--og-ink-2); text-transform: capitalize;
  background: var(--og-glass-deep);
  padding: 4px 14px; border-radius: 999px;
  margin: 10px 0 4px; letter-spacing: .1px;
}
.bub {
  max-width: 72%; padding: 8px 12px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.44;
  box-shadow: 0 1px 2px rgba(15,39,34,.06);
}
.bub .bt {
  font-size: 10px; margin-top: 4px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 3px; opacity: .62; white-space: nowrap;
}
.bub.them {
  align-self: flex-start;
  background: var(--og-glass-strong);
  border: 1px solid var(--og-hairline-soft);
  border-bottom-left-radius: 4px;
  color: var(--og-ink);
}
.bub.me {
  align-self: flex-end;
  background: rgba(37,211,102,.16);
  border: 1px solid rgba(37,211,102,.3);
  border-bottom-right-radius: 4px;
  color: var(--og-ink);
}
.bub.me .bt { color: var(--og-green); opacity: .8; }
.bub.me .bt svg { width: 15px; height: 11px; }
.bub .bub-agente { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.bub .bub-agente b {
  font-size: 10.5px; font-weight: 700; color: var(--og-green);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}
.bub .bub-agente .av {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 7.5px; font-weight: 800; color: #fff;
  background-size: cover; background-position: center;
}
.qcard {
  align-self: flex-end;
  max-width: 74%;
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.3);
  border-radius: 16px;
  border-bottom-right-radius: 5px;
  padding: 11px;
  display: flex; gap: 11px; align-items: center;
}
.qcard .qi {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255,255,255,.1);
  display: grid; place-items: center; flex: none;
}
.qcard .qi svg { width: 20px; height: 20px; color: var(--og-green); }
.qcard b { font-size: 13px; font-weight: 700; display: block; color: var(--og-ink); }
.qcard small { font-size: 11px; color: var(--og-ink-2); }
.qcard .qbtn {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--og-green); cursor: pointer; white-space: nowrap;
}

.composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--og-hairline-soft);
  flex-shrink: 0;
  background: var(--og-glass-deep);
  position: relative;
}
@keyframes waPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.92); }
}
.composer .iconbtn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  background: var(--og-hairline-soft); border: 0;
  color: var(--og-ink-2); transition: .18s;
}
.composer .iconbtn:hover { color: var(--og-ink); background: var(--og-glass-strong); }
.composer .iconbtn svg { width: 18px; height: 18px; }
.composer .field {
  flex: 1; display: flex; align-items: flex-end; gap: 8px;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 19px;
  padding: 9px 16px;
  min-height: 38px;
  min-width: 0;
  /* zera o margin-bottom:14px herdado da classe genérica .field (formulários),
     que empurrava a barra pra cima e desalinhava com os botões de 38px */
  margin: 0;
  box-sizing: border-box;
}
/* 22/09, Pablo: "preciso do Shift+Enter pra quebrar linha" — o campo era um
   <input> (não suporta multi-linha nem com Shift+Enter); virou <textarea> que
   cresce sozinho (ver _waAutoResizeInput em whatsapp-ui.js) até um teto de
   ~5 linhas e depois rola dentro do próprio campo. */
.composer .field textarea {
  flex: 1; background: none; border: none; outline: none;
  color: var(--og-ink); font: inherit; font-size: 13px; min-width: 0;
  resize: none; overflow-y: auto; max-height: 120px;
  line-height: 20px; padding: 0; margin: 0; display: block;
}
.composer .field textarea::placeholder { color: var(--og-ink-3); }
.composer .field svg { width: 18px; height: 18px; color: var(--og-ink-3); cursor: pointer; flex: none; }

/* ============================================================
   FOCO GLOBAL DE CAMPOS DE TEXTO (OG.GLASS) — vale pro site todo
   O outline padrão do navegador é RETANGULAR e ignora o border-radius,
   criando aquele "quadrado" que quebra o visual arredondado. Trocamos por
   um anel suave que acompanha o campo. Usa :where() (especificidade 0),
   então qualquer campo que já tenha foco próprio continua com prioridade.
   ============================================================ */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select, [contenteditable="true"]):focus {
  outline: none;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select, [contenteditable="true"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green, #2D8D6B) 22%, transparent);
}
/* Campos "sem moldura" dentro de pílulas/wrappers: o realce vai no WRAPPER
   (:focus-within), não no input — evita um anel interno feio. */
.composer .field input:focus,
.composer .field textarea:focus,
.wa-search input:focus,
.wa-tools-panel .wtp-search input:focus,
.cat-painel-picker-search input:focus { box-shadow: none; }
.composer .field:focus-within,
.wa-search:focus-within,
.wa-tools-panel .wtp-search:focus-within,
.cat-painel-picker-search:focus-within {
  border-color: var(--og-green, #2D8D6B);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green, #2D8D6B) 16%, transparent);
}
.composer .send {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #2fe06f, #13b552);
  box-shadow: 0 4px 12px -3px rgba(37,211,102,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.composer .send svg { width: 17px; height: 17px; color: #ffffff; }
.composer .send:disabled { opacity: .5; cursor: not-allowed; }

/* Coluna 4/5 — Toolbar de ações (expande inline em vez de abrir drawer) */
.wa-shell.tools-expanded {
  grid-template-columns: minmax(200px, 240px) minmax(260px, 320px) minmax(0, 1fr) minmax(300px, 380px) 60px;
}
.wa-tools-bar {
  align-items: center;
  padding: 12px 0; gap: 5px;
  overflow: visible !important;
}
.wa-tools-bar .tbtn.active {
  background: var(--og-glass-strong);
  color: var(--og-green);
  box-shadow: inset 0 0 0 1px var(--og-hairline);
}

/* Painel inline expandido (vidro Liquid Glass, no lugar do drawer/extensão) */
.wa-tools-panel {
  display: none;
  flex-direction: column;
  min-height: 0;
  border-radius: 26px;
  overflow: hidden;
}
.wa-shell.tools-expanded .wa-tools-panel { display: flex; }
.wa-tools-panel .wtp-head {
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--og-hairline-soft);
}
.wa-tools-panel .wtp-head .wtp-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--og-green) 18%, transparent);
  color: var(--og-green);
  border: 1px solid color-mix(in srgb, var(--og-green) 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.wa-tools-panel .wtp-head .wtp-icon svg { width: 18px; height: 18px; }
.wa-tools-panel .wtp-head .wtp-info { flex: 1; min-width: 0; }
.wa-tools-panel .wtp-head .wtp-info .wtp-eyebrow {
  font-size: 10.5px; font-weight: 700; color: var(--og-ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.wa-tools-panel .wtp-head .wtp-info .wtp-title {
  font-size: 14px; font-weight: 700; color: var(--og-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-tools-panel .wtp-head .wtp-x {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2);
  width: 30px; height: 30px; border-radius: 9px;
  cursor: pointer; display: grid; place-items: center;
  font-size: 16px; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.wa-tools-panel .wtp-head .wtp-x:hover { background: var(--og-glass-strong); color: var(--og-ink); }
.wa-tools-panel .wtp-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.wa-tools-panel .wtp-body::-webkit-scrollbar { width: 6px; }
.wa-tools-panel .wtp-body::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }
.wa-tools-panel .wtp-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 11px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
}
.wa-tools-panel .wtp-search svg { width: 15px; height: 15px; color: var(--og-ink-3); flex-shrink: 0; }
.wa-tools-panel .wtp-search input {
  flex: 1; background: none; border: 0; outline: none; color: var(--og-ink);
  font: inherit; font-size: 13px;
  appearance: none; -webkit-appearance: none; box-shadow: none;
}
/* Foco: só troca a cor da borda do wrapper (sem halo) — evita o efeito de
   "borda dupla" (borda + anel translúcido pareciam duas linhas). */
.wa-tools-panel .wtp-search:focus-within { box-shadow: none; }
.wa-tools-panel .wtp-search input::placeholder { color: var(--og-ink-3); }
.wa-tools-panel .wtp-section-title {
  font-size: 11px; font-weight: 700;
  color: var(--og-ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.wa-tools-panel .wtp-sug-list {
  display: flex; flex-direction: column; gap: 4px;
}
/* .wtp-sug-item também é usado na lista do modal "Vincular cliente" (#waVincModal) — sem o
   escopo ali a linha aparecia como texto solto, sem cara de clicável (17/09). */
.wa-tools-panel .wtp-sug-item, #waVincModal .wtp-sug-item {
  background: var(--og-glass-deeper);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px; color: var(--og-ink);
  display: flex; justify-content: space-between; gap: 8px;
  user-select: none;
}
.wa-tools-panel .wtp-sug-item:hover, #waVincModal .wtp-sug-item:hover { background: var(--og-glass-strong); border-color: var(--og-green, #0e7c66); }
.wa-tools-panel .wtp-sug-item .pn, #waVincModal .wtp-sug-item .pn {
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--og-ink-3); font-weight: 600;
}
.wa-tools-panel .wtp-item-card {
  background: var(--og-glass-strong);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 12px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.wa-tools-panel .wtp-item-card .it-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.wa-tools-panel .wtp-item-card .it-name {
  font-size: 12.5px; font-weight: 600; color: var(--og-ink);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-tools-panel .wtp-item-card .it-pn {
  font-size: 10.5px; color: var(--og-ink-3); font-family: ui-monospace, monospace;
}
.wa-tools-panel .wtp-item-card input {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink); font: inherit; font-size: 12px;
  padding: 5px 8px; border-radius: 8px;
  width: 80px; text-align: right;
}
.wa-tools-panel .wtp-item-card .it-rm {
  background: color-mix(in srgb, var(--og-red) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--og-red) 28%, transparent);
  color: var(--og-red);
  width: 26px; height: 26px; border-radius: 8px;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.wa-tools-panel .wtp-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--og-hairline-soft);
  background: var(--og-glass-deep);
}
.wa-tools-panel .wtp-foot .totals {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; margin-bottom: 8px;
}
.wa-tools-panel .wtp-foot .totals .row { display: flex; justify-content: space-between; color: var(--og-ink-2); }
.wa-tools-panel .wtp-foot .totals .row.total {
  font-size: 14px; font-weight: 800;
  border-top: 1px solid var(--og-hairline-soft);
  padding-top: 6px; margin-top: 3px;
  color: var(--og-green);
}
.wa-tools-panel .wtp-foot .actions { display: flex; gap: 6px; }
.wa-tools-panel .wtp-foot .actions button {
  flex: 1; padding: 9px;
  border-radius: 11px; border: 0;
  font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase;
  cursor: pointer; transition: transform .15s;
}
.wa-tools-panel .wtp-foot .actions button:not(:disabled):hover { transform: translateY(-1px); }
.wa-tools-panel .wtp-foot .actions .secondary {
  background: var(--og-glass-strong);
  color: var(--og-ink);
  border: 1px solid var(--og-hairline-soft);
}
.wa-tools-panel .wtp-foot .actions .primary {
  background: linear-gradient(145deg, #2fe06f, #13b552);
  color: #ffffff;
  box-shadow: 0 6px 16px -4px rgba(37,211,102,.5);
  flex: 1.4;
}
.wa-tools-panel .wtp-foot .actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.wa-tools-panel .wtp-empty {
  font-size: 12px; color: var(--og-ink-3);
  text-align: center; padding: 14px;
  border: 1px dashed var(--og-hairline);
  border-radius: 12px;
}

/* Botões og-glass do painel pós-salvar (Enviar PDF / Baixar / Cotar frete / Análise crédito). */
.wtp-acao-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 12px;
  color: var(--og-ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wtp-acao-btn:not(:disabled):hover {
  background: var(--og-glass-strong);
  border-color: var(--og-hairline);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--og-ink) 22%, transparent);
}
.wtp-acao-btn:not(:disabled):active { transform: translateY(0); }
.wtp-acao-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wtp-acao-btn svg { color: var(--og-green); flex-shrink: 0; }

/* Variante primária (ação principal, ex: Enviar PDF pro cliente). */
.wtp-acao-primario {
  background: var(--og-green);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}
.wtp-acao-primario svg { color: #fff; }
.wtp-acao-primario:not(:disabled):hover {
  background: color-mix(in srgb, var(--og-green) 88%, black);
  border-color: transparent;
}

/* Dropdown og-glass de estágio da opp (card Oportunidade no perfil do WhatsApp). */
.og-estagio-drop {
  position: relative;
  margin-top: 8px;
}
.og-estagio-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--og-ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.og-estagio-btn:hover {
  background: var(--og-glass-strong);
  border-color: var(--og-hairline);
}
.og-estagio-dot {
  width: 8px;
  height: 8px;
  background: var(--og-green);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 22%, transparent);
}
.og-estagio-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.og-estagio-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 100;
  /* Fundo DENSO: 96% opaco no modo claro / escuro pra não vazar conteúdo por baixo.
     Antes usava var(--og-glass-deep) que é 4% no modo claro → parecia sujo. */
  background: color-mix(in srgb, var(--og-glass-strong) 100%, transparent);
  border: 1px solid var(--og-hairline);
  border-radius: 12px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow:
    0 20px 48px -12px color-mix(in srgb, var(--og-ink) 42%, transparent),
    0 4px 12px -4px color-mix(in srgb, var(--og-ink) 20%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  animation: ogEstagioFadeIn 0.15s ease-out;
}
/* Camada opaca extra atrás pra reforçar isolamento visual — impede o vazamento
   dos cards Orçamentos/Tarefas que ficam logo abaixo do card Oportunidade. */
.og-estagio-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, canvas 88%, transparent);
  border-radius: 12px;
  z-index: -1;
}
:root[data-theme="dark"] .og-estagio-menu::before {
  background: color-mix(in srgb, #0f1419 92%, transparent);
}

/* ====================================================================
   Notificações por e-mail (Sistema → Destinatários)
   ==================================================================== */
.notif-emails-header { margin-bottom: 22px; }
.notif-emails-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--og-ink-3); text-transform: uppercase; margin-bottom: 4px;
}
.notif-emails-title {
  font-family: 'Bricolage Grotesque', 'Bricolage', var(--og-font, inherit);
  font-size: 26px; font-weight: 800; color: var(--og-ink);
  letter-spacing: -0.6px; margin: 0 0 6px;
}
.notif-emails-subtitle {
  font-size: 13px; color: var(--og-ink-2);
  max-width: 620px; line-height: 1.5; margin: 0;
}

.notif-emails-topicos {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 20px 0 12px;
}
.notif-topico-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 99px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--og-ink); cursor: pointer;
  transition: all 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.notif-topico-chip:hover {
  background: var(--og-glass-strong); border-color: var(--og-hairline);
}
.notif-topico-chip.is-cur {
  background: color-mix(in srgb, var(--og-green) 16%, var(--og-glass));
  border-color: color-mix(in srgb, var(--og-green) 40%, transparent);
  color: var(--og-green);
}
.notif-topico-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--og-ink-3) 50%, transparent);
}
.notif-topico-chip.is-cur .notif-topico-dot {
  background: var(--og-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 22%, transparent);
}
.notif-topico-desc {
  font-size: 12px; color: var(--og-ink-3);
  padding: 10px 14px;
  background: var(--og-glass);
  border-left: 3px solid color-mix(in srgb, var(--og-green) 50%, transparent);
  border-radius: 0 8px 8px 0;
  margin-bottom: 20px;
  line-height: 1.5;
}

.notif-emails-card {
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.notif-emails-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.notif-emails-card h3 {
  font-family: 'Bricolage Grotesque', var(--og-font, inherit);
  font-size: 15px; font-weight: 700; color: var(--og-ink);
  margin: 0; letter-spacing: -0.2px;
}
.notif-emails-card h3 em { font-style: normal; color: var(--og-green); }

.notif-emails-table { display: flex; flex-direction: column; gap: 1px; }
.notif-emails-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--og-glass-strong);
  border-radius: 10px;
  transition: background 0.15s;
}
.notif-emails-row:hover { background: color-mix(in srgb, var(--og-green) 4%, var(--og-glass-strong)); }
.notif-emails-row.is-off { opacity: 0.55; }
.notif-emails-avatar {
  width: 32px; height: 32px;
  background: color-mix(in srgb, var(--og-green) 20%, var(--og-glass));
  color: var(--og-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}
.notif-emails-info-col { flex: 1; min-width: 0; }
.notif-emails-nome {
  font-size: 13px; font-weight: 700; color: var(--og-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-emails-email {
  font-size: 11px; color: var(--og-ink-3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-emails-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.notif-emails-switch {
  position: relative; display: inline-block;
  width: 36px; height: 20px; cursor: pointer;
}
.notif-emails-switch input { opacity: 0; width: 0; height: 0; }
.notif-emails-switch span {
  position: absolute; inset: 0;
  background: var(--og-hairline);
  border-radius: 20px;
  transition: background 0.2s;
}
.notif-emails-switch span::before {
  content: ''; position: absolute;
  height: 16px; width: 16px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.notif-emails-switch input:checked + span { background: var(--og-green); }
.notif-emails-switch input:checked + span::before { transform: translateX(16px); }
.notif-emails-remove {
  background: transparent; border: 0;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--og-ink-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.notif-emails-remove:hover {
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #dc2626;
}

.notif-emails-empty {
  padding: 40px 20px; text-align: center;
  color: var(--og-ink-3);
  border: 1px dashed var(--og-hairline);
  border-radius: 12px;
}
.notif-emails-empty-title { font-size: 14px; font-weight: 700; color: var(--og-ink-2); }
.notif-emails-empty-sub { font-size: 12px; margin-top: 4px; }

.notif-emails-info ul { list-style: none; padding: 0; margin: 0; }
.notif-emails-info li {
  padding: 8px 0 8px 22px;
  font-size: 12.5px; color: var(--og-ink-2); line-height: 1.55;
  position: relative;
}
.notif-emails-info li::before {
  content: ''; position: absolute; left: 6px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--og-green);
}
.notif-emails-info code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  background: var(--og-glass-strong);
  padding: 1px 6px; border-radius: 4px;
  color: var(--og-ink);
}

/* Botões */
.notif-btn-primario {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: var(--og-green); color: #fff; border: 0;
  border-radius: 10px;
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--og-green) 60%, transparent);
}
.notif-btn-primario:hover:not(:disabled) {
  background: color-mix(in srgb, var(--og-green) 88%, black);
  transform: translateY(-1px);
}
.notif-btn-primario:disabled { opacity: 0.55; cursor: not-allowed; }
.notif-btn-secundario {
  padding: 9px 16px;
  background: var(--og-glass); color: var(--og-ink);
  border: 1px solid var(--og-hairline-soft); border-radius: 10px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.notif-btn-secundario:hover { background: var(--og-glass-strong); }

/* Modal og-glass */
.notif-emails-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.notif-emails-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--og-ink) 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.notif-emails-modal-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: var(--og-glass-strong);
  border: 1px solid var(--og-hairline);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px color-mix(in srgb, var(--og-ink) 42%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  overflow: hidden;
  animation: notifEmailsModalIn 0.2s ease-out;
}
:root[data-theme="dark"] .notif-emails-modal-panel { background: color-mix(in srgb, #0f1419 92%, transparent); }
:root[data-theme="light"] .notif-emails-modal-panel,
:root:not([data-theme="dark"]) .notif-emails-modal-panel { background: rgba(255,255,255,0.98); }

@keyframes notifEmailsModalIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-emails-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--og-hairline-soft);
}
.notif-emails-modal-head h3 {
  font-family: 'Bricolage Grotesque', var(--og-font, inherit);
  font-size: 16px; font-weight: 700; color: var(--og-ink);
  margin: 0;
}
.notif-emails-modal-x {
  background: transparent; border: 0;
  width: 28px; height: 28px; border-radius: 6px;
  font-size: 20px; color: var(--og-ink-3); cursor: pointer;
  line-height: 1;
  transition: all 0.15s;
}
.notif-emails-modal-x:hover { background: var(--og-glass-strong); color: var(--og-ink); }
.notif-emails-modal-body {
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.notif-emails-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--og-hairline-soft);
  background: var(--og-glass);
}
.notif-emails-field { display: flex; flex-direction: column; gap: 5px; }
.notif-emails-field label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--og-ink-3);
}
.notif-emails-field input {
  padding: 10px 12px;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 10px;
  font: inherit; font-size: 13px; color: var(--og-ink);
  transition: border-color 0.15s;
}
.notif-emails-field input:focus {
  outline: none;
  border-color: var(--og-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 18%, transparent);
}
.notif-emails-topico-fixo {
  padding: 10px 12px;
  background: var(--og-glass);
  border: 1px dashed var(--og-hairline);
  border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--og-ink-2);
}

/* Selects nativos com aparência og-glass — seta customizada + fundo glass.
   Aplica-se via .field-input que já é usado em toda tela de Devoluções, Frete etc. */
select.field-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--og-glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 14px 14px;
  padding-right: 32px;
  border: 1px solid var(--og-hairline-soft);
  border-radius: 10px;
  color: var(--og-ink);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
select.field-input:hover {
  background-color: var(--og-glass-strong);
  border-color: var(--og-hairline);
}
select.field-input:focus {
  outline: none;
  border-color: var(--og-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 18%, transparent);
}
:root[data-theme="dark"] select.field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Dropdown de exportar Excel (Devoluções) — visual og-glass consistente */
#devExportarDropdown {
  background: var(--og-glass-strong) !important;
  border: 1px solid var(--og-hairline) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--og-ink) 34%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  padding: 4px !important;
}
#devExportarDropdown .btn-menu-item {
  border-radius: 8px !important;
  color: var(--og-ink) !important;
  transition: background 0.12s;
}
#devExportarDropdown .btn-menu-item:hover {
  background: var(--og-glass-strong) !important;
  color: var(--og-green) !important;
}

/* ============================================================
   Dropdown custom .og-dd — visual IDÊNTICO ao menu de Configurações
   (usa .cfg-dd-item nos itens do menu; o botão .og-dd-btn é o gatilho).
   ============================================================ */
.og-dd { position: relative; display: inline-block; }
.og-dd-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 13px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.og-dd-btn:hover { border-color: var(--accent); }
.og-dd-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 141, 107, 0.12);
}
.og-dd-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.og-dd-btn svg { color: var(--ink-soft); flex-shrink: 0; }

.og-dd-menu {
  display: none;
  /* position: fixed pra escapar de overflow:hidden do container pai (.panel-body).
     Posição é calculada via JS (devDdToggle) a partir do getBoundingClientRect do botão. */
  position: fixed;
  min-width: 200px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 9999;
  max-height: 320px;
  overflow-y: auto;
  animation: ogDdOpen 0.12s ease-out;
}
@keyframes ogDdOpen {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Itens usam .cfg-dd-item nativo (mesmas regras do menu de Configurações) —
   sem override aqui pra manter fidelidade total ao padrão. */
:root[data-theme="dark"] .og-dd-menu {
  background: color-mix(in srgb, #0f1419 96%, transparent);
  border-color: var(--og-hairline);
}
:root[data-theme="dark"] .og-dd-btn {
  background: var(--og-glass);
  border-color: var(--og-hairline-soft);
  color: var(--og-ink);
}

/* ====================================================================
   Modal Solicitar Autorização de Frete — padrão og-glass
   ==================================================================== */
.og-approval-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: color-mix(in srgb, var(--og-ink) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: ogApprovalFadeIn 0.15s ease-out;
}
@keyframes ogApprovalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.og-approval-panel {
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--og-hairline);
  border-radius: 18px;
  max-width: 580px; width: 100%;
  max-height: 90vh; overflow: auto;
  box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--og-ink) 55%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: ogApprovalSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="dark"] .og-approval-panel {
  background: color-mix(in srgb, #0f1419 96%, transparent);
}
@keyframes ogApprovalSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.og-approval-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--og-hairline-soft);
}
.og-approval-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--og-green); text-transform: uppercase;
}
.og-approval-title {
  font-family: 'Bricolage Grotesque', var(--og-font, inherit);
  font-size: 18px; font-weight: 700; color: var(--og-ink);
  letter-spacing: -0.4px; margin-top: 2px;
}
.og-approval-x {
  background: transparent; border: 0;
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 22px; color: var(--og-ink-3); cursor: pointer;
  line-height: 1;
  transition: all 0.15s;
}
.og-approval-x:hover { background: var(--og-glass-strong); color: var(--og-ink); }
.og-approval-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.og-approval-field { display: flex; flex-direction: column; gap: 6px; }
.og-approval-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--og-green); text-transform: uppercase;
}
.og-approval-hint { font-size: 11px; color: var(--og-ink-3); margin-top: 2px; }

/* Dropdown de aprovador (custom, sem <select>) */
.og-approval-drop { position: relative; }
.og-approval-drop-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 11px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--og-ink); cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.og-approval-drop-btn:hover {
  background: var(--og-glass-strong);
  border-color: var(--og-hairline);
}
.og-approval-drop-text { flex: 1; min-width: 0; }
.og-approval-avatar {
  display: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--og-green) 20%, var(--og-glass));
  color: var(--og-green);
  align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  flex-shrink: 0;
}
.og-approval-drop-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 30;
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--og-hairline);
  border-radius: 12px;
  padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
  max-height: 280px; overflow-y: auto;
  box-shadow: 0 20px 48px -12px color-mix(in srgb, var(--og-ink) 42%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  animation: ogEstagioFadeIn 0.15s ease-out;
}
:root[data-theme="dark"] .og-approval-drop-menu {
  background: color-mix(in srgb, #0f1419 96%, transparent);
}
.og-approval-drop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: transparent; border: 0;
  border-radius: 8px;
  font: inherit; font-size: 12.5px; color: var(--og-ink);
  cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.og-approval-drop-item:hover { background: var(--og-glass-strong); }
.og-approval-avatar-item {
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--og-green) 22%, var(--og-glass));
  color: var(--og-green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  flex-shrink: 0;
}
.og-approval-item-info { display: flex; flex-direction: column; min-width: 0; }
.og-approval-item-nome { font-weight: 700; color: var(--og-ink); }
.og-approval-item-perfil { font-size: 10.5px; color: var(--og-ink-3); margin-top: 1px; }

/* Prioridade */
.og-approval-prio-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.og-approval-prio {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 8px;
  background: var(--og-glass);
  border: 2px solid var(--og-hairline-soft);
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  transition: all 0.15s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.og-approval-prio:hover { background: var(--og-glass-strong); }
.og-approval-prio.is-cur[data-cor="#94a3b8"] { border-color: #94a3b8; background: color-mix(in srgb, #94a3b8 10%, transparent); }
.og-approval-prio.is-cur[data-cor="#22b07a"] { border-color: #22b07a; background: color-mix(in srgb, #22b07a 12%, transparent); }
.og-approval-prio.is-cur[data-cor="#f5d24a"] { border-color: #f5d24a; background: color-mix(in srgb, #f5d24a 18%, transparent); }
.og-approval-prio.is-cur[data-cor="#dc2626"] { border-color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }

/* Textarea */
.og-approval-textarea {
  width: 100%; min-height: 100px;
  padding: 12px 14px;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 12px;
  font: inherit; font-size: 13px; color: var(--og-ink);
  resize: vertical;
  transition: border-color 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.og-approval-textarea:focus {
  outline: none; border-color: var(--og-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 18%, transparent);
}

/* Info box */
.og-approval-info {
  background: color-mix(in srgb, #f5d24a 12%, var(--og-glass));
  border-left: 3px solid #f5d24a;
  padding: 12px 14px;
  border-radius: 0 10px 10px 0;
  font-size: 11.5px; color: var(--og-ink-2); line-height: 1.55;
}
.og-approval-info strong { color: var(--og-ink); }

/* Botões */
.og-approval-actions { display: flex; gap: 10px; margin-top: 4px; }
.og-approval-btn {
  padding: 12px 18px;
  border: 0; border-radius: 11px;
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.og-approval-btn-secundario {
  flex: 1;
  background: var(--og-glass); color: var(--og-ink);
  border: 1px solid var(--og-hairline-soft);
}
.og-approval-btn-secundario:hover { background: var(--og-glass-strong); }
.og-approval-btn-primario {
  flex: 2;
  background: var(--og-green); color: #fff;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--og-green) 60%, transparent);
}
.og-approval-btn-primario:hover {
  background: color-mix(in srgb, var(--og-green) 88%, black);
  transform: translateY(-1px);
}
@keyframes ogEstagioFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.og-estagio-menu-empty {
  padding: 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--og-ink-3);
}
.og-estagio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--og-ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.og-estagio-item:hover {
  background: var(--og-glass-strong);
}
.og-estagio-item.is-cur {
  background: color-mix(in srgb, var(--og-green) 12%, transparent);
  color: var(--og-green);
}

/* Dúvida técnica (IA) — UI de chat na sidebar do WhatsApp */
.wa-tools-panel .wtp-dt-chat {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  padding: 0;
  position: relative;
}
.wa-tools-panel .wtp-dt-chat.arrastando::before {
  content: "Solte a imagem aqui";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--og-green) 18%, var(--og-glass-deep));
  border: 2px dashed var(--og-green);
  border-radius: 12px;
  color: var(--og-ink);
  font-size: 14px; font-weight: 800;
  z-index: 5; pointer-events: none;
}
.wa-tools-panel .wtp-dt-chat-msgs {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.wa-tools-panel .wtp-dt-msg { display: flex; }
.wa-tools-panel .wtp-dt-msg-user { justify-content: flex-end; }
.wa-tools-panel .wtp-dt-msg-ia { justify-content: flex-start; }
.wa-tools-panel .wtp-dt-bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12.5px; line-height: 1.45;
  background: var(--og-green); color: #fff;
  border-bottom-right-radius: 4px;
  word-break: break-word;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.wa-tools-panel .wtp-dt-bubble-ia {
  background: var(--og-glass-deep);
  color: var(--og-ink);
  border: 1px solid var(--og-hairline-soft);
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 4px;
}
.wa-tools-panel .wtp-dt-bubble-err { border-color: var(--og-red, #dc2626); color: var(--og-red, #dc2626); }
.wa-tools-panel .wtp-dt-msg-text { white-space: pre-wrap; }
.wa-tools-panel .wtp-dt-msg-foto {
  display: block;
  max-width: 100%; max-height: 220px;
  border-radius: 10px;
  margin-bottom: 6px;
  object-fit: cover;
}

/* "Digitando..." (loading) */
.wa-tools-panel .wtp-dt-loading-bubble { display: inline-flex; align-items: center; gap: 6px; }
.wa-tools-panel .wtp-dt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--og-ink-3);
  animation: wtpDtDot 1.2s infinite ease-in-out;
}
.wa-tools-panel .wtp-dt-dot:nth-child(2) { animation-delay: 0.15s; }
.wa-tools-panel .wtp-dt-dot:nth-child(3) { animation-delay: 0.30s; }
.wa-tools-panel .wtp-dt-loading-txt { font-size: 11.5px; color: var(--og-ink-3); margin-left: 4px; }
@keyframes wtpDtDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Resposta estruturada da IA dentro do bubble */
.wa-tools-panel .wtp-dt-resp-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.wa-tools-panel .wtp-dt-resp-title {
  font-size: 13.5px; font-weight: 800; color: var(--og-ink); flex: 1; min-width: 0;
}
.wa-tools-panel .wtp-dt-resp-modelo { font-size: 11.5px; color: var(--og-ink-2); margin-bottom: 4px; }
.wa-tools-panel .wtp-dt-resp-obs { font-size: 11.5px; color: var(--og-ink-2); line-height: 1.5; margin-bottom: 8px; }
.wa-tools-panel .wtp-dt-resp-codigos-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--og-ink-3); margin: 6px 0 4px;
}
.wa-tools-panel .wtp-dt-resp-vazio { font-size: 11.5px; color: var(--og-ink-3); margin-top: 6px; font-style: italic; }
.wa-tools-panel .wtp-dt-codigos { display: flex; flex-direction: column; gap: 0; }
.wa-tools-panel .wtp-dt-codigo-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--og-hairline-soft);
}
.wa-tools-panel .wtp-dt-codigo-row:last-child { border-bottom: none; }
.wa-tools-panel .wtp-dt-codigo-info { flex: 1; min-width: 0; }
.wa-tools-panel .wtp-dt-codigo-codigo { font-size: 12px; font-weight: 800; color: var(--og-ink); }
.wa-tools-panel .wtp-dt-codigo-desc {
  font-size: 10.5px; color: var(--og-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-tools-panel .wtp-dt-codigo-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 3px;
}
.wa-tools-panel .wtp-dt-codigo-tag {
  font-size: 9.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 6px;
  background: rgba(15,79,59,0.10); color: var(--og-green);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.wa-tools-panel .wtp-dt-codigo-preco {
  font-size: 11px; font-weight: 800; color: var(--og-ink);
}
.wa-tools-panel .wtp-dt-codigo-estoque {
  font-size: 10px; font-weight: 700; color: #16a34a;
}
.wa-tools-panel .wtp-dt-codigo-estoque-zero {
  font-size: 10px; font-weight: 700; color: #94a3b8;
}
.wa-tools-panel .wtp-dt-codigo-matches {
  font-size: 9.5px; color: var(--og-ink-3);
  margin-top: 2px; line-height: 1.4;
}
.wa-tools-panel .wtp-dt-codigo-matches code {
  background: rgba(15,79,59,0.07); padding: 0 4px; border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.wa-tools-panel .wtp-dt-resp-componente { font-size: 11.5px; color: var(--og-ink-2); margin-bottom: 4px; }
.wa-tools-panel .wtp-dt-resp-plaqueta {
  font-size: 11px; color: var(--og-ink-2);
  background: rgba(15,79,59,0.05);
  border-left: 3px solid var(--og-green);
  padding: 6px 8px; margin: 6px 0;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1.5;
}
.wa-tools-panel .wtp-dt-resp-vazio code {
  background: rgba(15,79,59,0.07); padding: 0 4px; border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
}
.wa-tools-panel .wtp-dt-codigo-add {
  background: var(--og-green); color: #fff;
  border: none; border-radius: 8px;
  padding: 5px 9px;
  font-size: 10.5px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s;
}
.wa-tools-panel .wtp-dt-codigo-add:hover { transform: translateY(-1px); }
.wa-tools-panel .wtp-dt-msg-meta {
  margin-top: 8px;
  font-size: 10px; color: var(--og-ink-3);
  opacity: 0.8;
}

/* Composer (rodapé) */
.wa-tools-panel .wtp-dt-composer {
  flex-shrink: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--og-hairline-soft);
  background: var(--og-glass-deep);
}
.wa-tools-panel .wtp-dt-attach-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 10px;
}
.wa-tools-panel .wtp-dt-attach-img {
  width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
}
.wa-tools-panel .wtp-dt-attach-info { flex: 1; min-width: 0; }
.wa-tools-panel .wtp-dt-attach-name {
  font-size: 11.5px; font-weight: 700; color: var(--og-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-tools-panel .wtp-dt-attach-size { font-size: 10.5px; color: var(--og-ink-3); }
.wa-tools-panel .wtp-dt-attach-remove {
  width: 22px; height: 22px;
  background: transparent; color: var(--og-ink-3);
  border: 1px solid var(--og-hairline);
  border-radius: 50%;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.wa-tools-panel .wtp-dt-attach-remove:hover { color: var(--og-red, #dc2626); border-color: var(--og-red, #dc2626); }
.wa-tools-panel .wtp-dt-composer-row {
  display: flex; align-items: flex-end; gap: 6px;
}
.wa-tools-panel .wtp-dt-attach-btn,
.wa-tools-panel .wtp-dt-send-btn {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--og-hairline-soft);
  background: var(--og-glass);
  color: var(--og-ink-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.wa-tools-panel .wtp-dt-attach-btn:hover { color: var(--og-green); border-color: var(--og-green); }
.wa-tools-panel .wtp-dt-send-btn {
  background: var(--og-green); color: #fff; border-color: var(--og-green);
}
.wa-tools-panel .wtp-dt-send-btn:hover:not(:disabled) { transform: translateY(-1px); }
.wa-tools-panel .wtp-dt-send-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wa-tools-panel .wtp-dt-input-chat {
  flex: 1;
  background: var(--og-glass);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink);
  border-radius: 18px;
  padding: 8px 12px;
  font-size: 12.5px; font-family: inherit;
  outline: none;
  resize: none;
  min-height: 34px; max-height: 120px;
  line-height: 1.4;
  transition: border-color .15s;
}
.wa-tools-panel .wtp-dt-input-chat:focus { border-color: var(--og-green); }
.wa-tools-panel .wtp-dt-composer-hint {
  font-size: 10px; color: var(--og-ink-3);
  margin-top: 5px; padding-left: 4px;
}

/* =========================================================
   E-MAIL — Liquid Glass (mesma identidade do WhatsApp Inbox)
   ========================================================= */
.em-shell {
  display: grid;
  grid-template-columns: 260px 400px 1fr;
  gap: 14px;
  /* Usa dvh pra evitar problema com toolbar do navegador.
     Topbar ~64px + tabs ~38px + padding ~32px = ~134px */
  height: calc(100dvh - 140px);
  max-height: calc(100dvh - 140px);
  min-height: 0;
  overflow: hidden;
}
.em-shell > * { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Zera padding da .page só pra tela de e-mail — evita "espaço" extra
   que empurrava a shell além do viewport */
#page-email { padding: 0 !important; margin: 0; }

/* Coluna 1 — Sidebar (contas + pastas) */
.em-sidebar { padding: 0; }
.em-side-head { padding: 15px 14px 13px; border-bottom: 1px solid var(--og-hairline-soft); flex-shrink: 0; }
.em-novo-btn {
  width: 100%;
  /* Verde premium da Oriente (deep→médio), sem o neon anterior. */
  background: linear-gradient(135deg, #1aa657 0%, #0e6f3f 100%);
  color: #ffffff;
  border: 0;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 18px -7px rgba(14,111,63,.55), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.em-novo-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(14,111,63,.6), inset 0 1px 0 rgba(255,255,255,.28); filter: saturate(1.06); }
.em-novo-btn:active { transform: translateY(0); box-shadow: 0 5px 12px -6px rgba(14,111,63,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.em-novo-btn svg { width: 16px; height: 16px; }

.em-side-scroll { padding: 12px 14px; flex: 1; overflow-y: auto; min-height: 0; }
.em-side-scroll::-webkit-scrollbar { width: 6px; }
.em-side-scroll::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }

.em-conta {
  padding: 8px 10px;
  border-left: 3px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  color: var(--og-ink);
  font-weight: 600;
  margin-bottom: 3px;
  display: flex; align-items: center; gap: 7px;
  transition: background .15s;
}
.em-conta.on {
  background: var(--og-glass-strong);
  border-left-color: var(--og-green);
}
.em-conta:hover { background: var(--og-hairline-soft); }
.em-conta-sync {
  background: transparent; border: 0; cursor: pointer; padding: 2px;
  color: var(--og-ink-2); display: inline-flex; align-items: center;
  flex-shrink: 0; border-radius: 6px;
}
.em-conta-sync:hover { color: var(--og-green); background: var(--og-hairline-soft); }
.em-conta-sync svg { width: 14px; height: 14px; }
.em-conta-email {
  cursor: pointer; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-add-conta {
  background: transparent;
  color: var(--og-ink-3);
  border: 1px dashed var(--og-hairline);
  padding: 7px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  width: 100%;
  margin-top: 4px;
  font-family: inherit;
}
.em-add-conta:hover { background: var(--og-hairline-soft); color: var(--og-ink-2); }

.em-pasta {
  padding: 8px 10px;
  border-left: 3px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  color: var(--og-ink);
  font-weight: 600;
  margin-bottom: 3px;
  display: flex; align-items: center; gap: 6px;
  justify-content: space-between;
  transition: background .15s;
}
.em-pasta:hover { background: var(--og-hairline-soft); }
.em-pasta.on {
  background: color-mix(in srgb, var(--og-green) 10%, transparent);
  border-left-color: var(--og-green);
  color: var(--og-ink);
}
.em-pasta.on .em-pasta-name { font-weight: 700; }
.em-pasta-name {
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.em-pasta-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--og-ink-2);
  flex-shrink: 0;
}
.em-pasta-icon svg { width: 16px; height: 16px; }
/* Sub-itens da Caixa de Entrada (Primário/Transações/Atualizações/Promoções) */
.em-pasta-sub {
  margin-left: 18px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--og-ink-2);
  position: relative;
}
.em-pasta-sub::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--og-hairline-soft);
}
.em-pasta-sub .em-pasta-icon { width: 14px; height: 14px; }
.em-pasta-sub .em-pasta-icon svg { width: 12px; height: 12px; }
.em-pasta-sub.on { background: var(--og-glass); }

/* Barra de ações no topo da sidebar do e-mail (collapse · refresh · config) */
.em-side-actions {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 12px;
}
.em-side-actions .em-icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 10px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.em-side-actions .em-icon-btn:hover {
  background: color-mix(in srgb, var(--og-green) 12%, transparent);
  color: var(--og-green);
  border-color: color-mix(in srgb, var(--og-green) 32%, var(--og-hairline-soft));
  transform: translateY(-1px);
}
.em-side-actions .em-icon-btn:active { transform: translateY(0); }
.em-side-actions .em-icon-btn svg { width: 16px; height: 16px; }

/* Animação do botão refresh durante sync */
@keyframes emGirando {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.em-side-actions .em-icon-btn.em-girando svg {
  animation: emGirando 1s linear infinite;
}

/* Sidebar do e-mail colapsada — vira grid de 2 colunas (lista + leitor) */
.em-shell.sidebar-collapsed > .em-sidebar { display: none !important; }
.em-shell.sidebar-collapsed { grid-template-columns: 440px 1fr !important; }

/* ============================================================
   TELA "HOJE" no Meu Painel — foco do dia do vendedor.
   Lista priorizada de oportunidades com botões grandes de ação.
   ============================================================ */
.painel-hoje-wrap {
  padding: 18px 32px 24px;
  margin-top: 18px;
}
.painel-hoje-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.painel-hoje-titulo {
  margin: 4px 0 4px 0;
  font-size: 22px; font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.2px;
}
.painel-hoje-sub {
  font-size: 12px; color: var(--ink-soft);
}
.painel-hoje-contador {
  font-size: 11.5px; color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px;
  white-space: nowrap;
}
.painel-hoje-contador-num {
  font-weight: 800; color: var(--og-green);
}
.painel-hoje-lista {
  display: flex; flex-direction: column; gap: 8px;
}
.painel-hoje-skeleton,
.painel-hoje-vazio {
  padding: 30px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.painel-hoje-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--og-green);
  border-radius: 12px;
  transition: transform .15s, box-shadow .15s, opacity .25s;
}
.painel-hoje-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.painel-hoje-info {
  flex: 1; min-width: 0;
}
.painel-hoje-cliente {
  font-size: 14px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel-hoje-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11.5px; color: var(--ink-soft);
  margin-top: 4px;
}
.painel-hoje-estagio {
  background: var(--bg-soft);
  padding: 2px 8px; border-radius: 999px;
  font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.3px;
  border: 1px solid var(--line);
}
.painel-hoje-valor {
  font-weight: 800; color: var(--og-green);
  font-family: ui-monospace, monospace;
}
.painel-hoje-dias {
  font-weight: 700;
}
.painel-hoje-acoes {
  display: flex; gap: 6px; flex-shrink: 0;
}
.painel-hoje-btn {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer; text-decoration: none;
  transition: all .15s;
}
.painel-hoje-btn:hover {
  background: var(--panel);
  color: var(--og-green);
  border-color: var(--og-green);
  transform: translateY(-1px);
}
.painel-hoje-btn-wa { color: #25D366; }
.painel-hoje-btn-wa:hover { background: rgba(37,211,102,0.10); color: #25D366; border-color: #25D366; }
.painel-hoje-btn-feito { color: var(--og-green); }
.painel-hoje-btn-feito:hover {
  background: var(--og-green) !important;
  color: #fff !important;
  border-color: var(--og-green) !important;
}

@media (max-width: 768px) {
  .painel-hoje-wrap { padding: 14px 16px 20px; }
  .painel-hoje-titulo { font-size: 18px; }
  .painel-hoje-item { padding: 10px 12px; gap: 8px; }
  .painel-hoje-btn { width: 40px; height: 40px; }
  .painel-hoje-acoes { flex-wrap: wrap; justify-content: flex-end; max-width: 140px; }
  .painel-hoje-meta { gap: 6px; font-size: 11px; }
}

/* ============================================================
   CLIENTE 360 — drawer lateral com 5 abas (Pedidos/Financeiro/
   Estoque/Pós-vendas/Logística). Aberto dentro do CRM.
   ============================================================ */
.cli360-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1499;
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
  backdrop-filter: blur(2px);
}
.cli360-backdrop.open { opacity: 1; pointer-events: auto; }

.cli360-drawer {
  position: fixed; top: 0; right: 0;
  height: 100dvh; width: 760px; max-width: 92vw;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 1500;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cli360-drawer.open { transform: translateX(0); }

.cli360-loading {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}

/* Cabeçalho "cartão de identidade" — pedido do Pablo 08/09: "mais tecnológico e
   premium". Reaproveita a MESMA receita visual do .iglass-header (sidebar de
   contato do WhatsApp Inbox): glass verde escuro com glow radial + destaques em
   inset, em vez do cinza-claro chapado que tinha antes. */
.cli360-head {
  position: relative;
  padding: 20px 22px 18px;
  overflow: hidden;
  background:
    radial-gradient(130% 160% at 100% 0%, rgba(74,222,164,0.28), transparent 55%),
    linear-gradient(135deg, #123d30 0%, #0b2b21 55%, #071e17 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 30px -14px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.cli360-head-row { display: flex; align-items: center; gap: 13px; }
.cli360-avatar-hero {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 12px rgba(0,0,0,0.22);
}
.cli360-head .og-lbl { color: rgba(210,240,225,0.7); margin-bottom: 3px; }
.cli360-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  font-size: 18px; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s;
}
.cli360-close:hover { background: rgba(255,255,255,0.22); color: #fff; }
/* Ir pro WhatsApp (pedido do Pablo 08/09) — vai pra oportunidade mais recente do
   cliente; o Inbox resolve qual conversa abrir a partir dela. Com texto (não só
   ícone) — Pablo: "usuário mais leigo não vai entender pra que serve o botão". */
.cli360-wa-btn {
  position: absolute; top: 10px; right: 50px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: #25D366;
  border: 2px solid rgba(255,255,255,0.35);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 10px rgba(37,211,102,.5);
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
  transition: transform .15s, background .15s;
}
.cli360-wa-btn:hover { transform: scale(1.04); background: #22c55e; }
.cli360-wa-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.cli360-nome {
  font-size: 18px; font-weight: 800;
  color: #fff;
  margin-right: 165px;
  letter-spacing: 0.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cli360-meta {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 8px;
}
.cli360-meta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  color: rgba(235,247,240,0.92);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  padding: 3px 9px 3px 8px;
  font-family: ui-monospace, monospace;
}
.cli360-meta-chip b {
  font-family: -apple-system, system-ui, sans-serif;
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 9px;
  color: rgba(210,240,225,0.65);
}

.cli360-tabs {
  display: grid;
  /* 7 abas hoje (Oportunidades/Pedidos/Financeiro/Estoque/Pós-vendas/Logística/Pesquisas) —
     era fixo em 5 e as 2 últimas ficavam espremidas/cortadas quando as abas cresceram. */
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cli360-tab {
  background: transparent; border: 0;
  padding: 10px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; font-family: inherit;
  color: var(--ink-soft);
  font-size: 10.5px; font-weight: 700;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}
.cli360-tab svg { width: 18px; height: 18px; }
.cli360-tab:hover { color: var(--ink); background: var(--panel); }
.cli360-tab.on {
  color: var(--og-green);
  border-bottom-color: var(--og-green);
  background: var(--panel);
}

.cli360-body {
  flex: 1; overflow-y: auto;
  padding: 16px 22px 24px;
}
.cli360-empty {
  text-align: center;
  padding: 40px 20px;
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.cli360-sub {
  font-size: 11.5px; color: var(--ink-soft);
  margin-bottom: 10px;
}
.cli360-list {
  display: flex; flex-direction: column; gap: 6px;
}
.cli360-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cli360-row-main { flex: 1; min-width: 0; }
.cli360-row-titulo {
  font-size: 13px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cli360-row-sub {
  font-size: 11px; color: var(--ink-soft);
  margin-top: 2px;
}
.cli360-row-valor {
  font-size: 13px; font-weight: 800;
  color: var(--og-green);
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.cli360-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.cli360-kpi {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.cli360-kpi-lbl {
  font-size: 9.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  margin-bottom: 3px;
}
.cli360-kpi-val {
  font-size: 14px; font-weight: 800;
  color: var(--ink);
  font-family: ui-monospace, monospace;
}
.cli360-secao { margin-bottom: 16px; }
.cli360-secao .og-lbl { margin-bottom: 8px; }

/* ===== Pedidos (Orçamentos/NF/DAV) e Logística — pedido do Pablo 07/09: "muito basico,
   não consigo nem ver os itens que ele comprou por Nota Fiscal" / "não consigo abrir o
   rastreamento". Cartão com ícone tipado + itens de NF sob demanda (lazy, via
   /devolucoes/nf/{id}/itens) + link de rastreio público (mesmo token do FretesController). ===== */
.cli360-doc-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color .15s;
}
.cli360-doc-card.on { border-color: color-mix(in srgb, var(--og-green) 40%, var(--line)); }
.cli360-doc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
}
.cli360-doc-row.click { cursor: pointer; }
.cli360-doc-row.click:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.cli360-doc-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--doc-c, var(--og-green)) 14%, transparent);
  color: var(--doc-c, var(--og-green));
}
.cli360-doc-icon svg { width: 16px; height: 16px; }
.cli360-status-pill {
  display: inline-block;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  color: var(--doc-c, var(--ink-soft));
  background: color-mix(in srgb, var(--doc-c, var(--ink-soft)) 14%, transparent);
  padding: 2px 8px; border-radius: 6px;
  margin-top: 3px;
}
/* Ticket (referência interna, baixo valor visual) e estágio do funil (Contato Inicial,
   Orçamento enviado...) — cada um em seu selo, separado do texto corrido de
   vendedor/data. Não usa --doc-c: estágio é um eixo diferente do status ganho/perdido. */
.cli360-mini-tag, .cli360-mini-pill {
  display: inline-block; vertical-align: middle;
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 5px;
  margin-right: 6px;
}
.cli360-mini-tag {
  font-family: ui-monospace, monospace; font-weight: 500;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink-soft) 10%, transparent);
}
.cli360-mini-pill {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink-soft) 12%, transparent);
}
.cli360-doc-chevron {
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: transform .18s;
}
.cli360-doc-card.on .cli360-doc-chevron { transform: rotate(180deg); color: var(--og-green); }
.cli360-doc-itens {
  border-top: 1px solid var(--line);
  padding: 8px 12px 10px 12px;
  background: var(--panel);
}
.cli360-doc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px;
  font-size: 11.5px;
  border-bottom: 1px dashed var(--line);
}
.cli360-doc-item:last-child { border-bottom: 0; }
.cli360-doc-item-cod {
  font-family: ui-monospace, monospace;
  color: var(--ink-soft);
  flex-shrink: 0;
  min-width: 64px;
}
.cli360-doc-item-desc {
  flex: 1; min-width: 0; color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cli360-doc-item-qtd { flex-shrink: 0; color: var(--ink-soft); font-family: ui-monospace, monospace; }
.cli360-doc-item-valor {
  flex-shrink: 0; font-weight: 800; color: var(--og-green);
  font-family: ui-monospace, monospace; min-width: 78px; text-align: right;
}
.cli360-doc-itens-loading, .cli360-doc-itens-erro {
  font-size: 11.5px; color: var(--ink-soft); padding: 4px 2px;
}
.cli360-doc-itens-erro { color: var(--og-red); }

.cli360-frete-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--doc-c, var(--og-green));
  border-radius: 10px;
  background: var(--bg-soft);
  margin-bottom: 6px;
}
.cli360-frete-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--doc-c, var(--og-green)) 14%, transparent);
  color: var(--doc-c, var(--og-green));
}
.cli360-frete-icon svg { width: 16px; height: 16px; }
.cli360-rastreio-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  color: var(--og-green);
  border: 1px solid color-mix(in srgb, var(--og-green) 35%, var(--line));
  background: color-mix(in srgb, var(--og-green) 8%, transparent);
  padding: 6px 10px; border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.cli360-rastreio-btn:hover { background: color-mix(in srgb, var(--og-green) 16%, transparent); }
.cli360-rastreio-btn svg { width: 13px; height: 13px; }

/* ===== Análise de Crédito — pedido do Pablo 07/09: "ao invés de ser financeiro,
   coloque análise de crédito e o histórico realizado". Status aprovado/restrito por
   CNPJ (vale 90d entre oportunidades, mesma regra do board Financeiro). ===== */
.cli360-cred-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--doc-c, var(--ink-soft));
  border-radius: 10px;
  background: var(--bg-soft);
  padding: 12px 14px;
}
.cli360-cred-card--vazio {
  border-left-color: var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
  text-align: center;
  padding: 16px 14px;
}
.cli360-cred-status {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: var(--doc-c, var(--ink));
}
.cli360-cred-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--doc-c, var(--ink-soft)); flex-shrink: 0;
}
.cli360-cred-vencida {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--og-amber);
  background: color-mix(in srgb, var(--og-amber) 14%, transparent);
  padding: 2px 7px; border-radius: 6px;
}
.cli360-cred-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--ink-soft);
  margin-top: 8px;
}
.cli360-cred-meta b { color: var(--ink); font-weight: 700; }

/* ===== Relatório de Pesquisa (Copiloto) — pedido do Pablo 07/09: "tem que ser mais
   premium visualmente, está muito simples". Antes era texto corrido com **asteriscos**
   literais escapados; agora vira cartão com chips de dado oficial + campos rotulados. ===== */
.cli360-pq-btn {
  width: 100%; background: linear-gradient(135deg, var(--og-green), #1c8a63);
  color: #fff; border: 0; padding: 11px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px -4px rgba(14,79,59,.4);
  transition: transform .15s, box-shadow .15s;
}
.cli360-pq-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(14,79,59,.45); }
.cli360-pq-btn:disabled { cursor: default; opacity: .75; transform: none; }
.cli360-pq-dots { display: inline-flex; gap: 3px; }
.cli360-pq-dots span { width: 4px; height: 4px; border-radius: 50%; background: #fff; display: inline-block; animation: cli360PqDot 1.1s ease-in-out infinite; }
.cli360-pq-dots span:nth-child(2) { animation-delay: .15s; }
.cli360-pq-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes cli360PqDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .cli360-pq-dots span { animation: none; } }

.cli360-pq-card {
  background: var(--panel); border: 1px solid var(--og-hairline-soft); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(14,79,59,.05);
}
.cli360-pq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cli360-pq-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--og-green); color: #fff;
}
.cli360-pq-meta { flex: 1; min-width: 0; }
.cli360-pq-data { font-size: 12.5px; font-weight: 700; color: var(--og-ink); display: flex; align-items: center; gap: 8px; }
.cli360-pq-recente {
  font-size: 9px; font-weight: 800; letter-spacing: .03em; color: var(--og-green);
  background: color-mix(in srgb, var(--og-green) 14%, transparent);
  padding: 2px 7px; border-radius: 999px;
}
.cli360-pq-por { font-size: 11px; color: var(--og-ink-3); margin-top: 1px; }

.cli360-pq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cli360-pq-chip {
  font-size: 11px; color: var(--og-ink-2); background: var(--bg-soft);
  border: 1px solid var(--og-hairline-soft); border-radius: 999px; padding: 4px 10px;
}
.cli360-pq-chip b { color: var(--og-ink); font-weight: 700; margin-right: 4px; }

.cli360-pq-body { display: flex; flex-direction: column; gap: 10px; }
.cli360-pq-par { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--og-ink-2); }
.cli360-pq-campo {
  padding: 10px 12px; background: var(--bg-soft); border-radius: 9px;
  border-left: 3px solid var(--og-green);
}
.cli360-pq-rotulo {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--og-green); margin-bottom: 3px;
}
.cli360-pq-corpo { font-size: 12.5px; line-height: 1.6; color: var(--og-ink-2); }
.cli360-pq-body strong { color: var(--og-ink); font-weight: 700; }

.cli360-pq-fontes { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--og-hairline-soft); }
.cli360-pq-fontes-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--og-ink-3); margin-bottom: 8px; }
.cli360-pq-fontes-list { display: flex; flex-direction: column; gap: 5px; }
.cli360-pq-fonte {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--og-ink-2);
  text-decoration: none; overflow: hidden; padding: 3px 0; transition: color .15s;
}
.cli360-pq-fonte:hover { color: var(--og-green); }
.cli360-pq-fonte span {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-soft);
  color: var(--og-ink-3); font-size: 9px; font-weight: 800; display: grid; place-items: center;
}
.cli360-pq-fonte:hover span { background: var(--og-green); color: #fff; }

/* Botão "Ver cliente 360" no card do Meu Kanban */
/* Card do Kanban abre a Visão 360 direto no clique (pedido do Pablo: sem botões
   extras no card) — ver onclick do .kn-card em meu-kanban-ui.js. */

@media (max-width: 768px) {
  .cli360-drawer { width: 100%; max-width: 100%; }
  .cli360-tab span { display: none; }
  .cli360-body { padding: 14px 16px 20px; }
}

/* Botão de toggle SEMPRE visível na lista (mesmo com sidebar colapsada) */
.em-list-toggle {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.em-list-toggle:hover {
  background: var(--og-glass-strong);
  color: var(--og-ink);
}
.em-list-toggle svg { width: 15px; height: 15px; }
.em-pasta.on .em-pasta-icon { color: var(--og-green); }
.em-pasta-badge {
  background: var(--og-green);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  box-shadow: 0 1px 3px -1px color-mix(in srgb, var(--og-green) 55%, transparent);
}
.em-pasta.on .em-pasta-badge { box-shadow: 0 1px 4px -1px color-mix(in srgb, var(--og-green) 60%, transparent); }
.em-pasta-rm {
  background: transparent; border: 0;
  color: var(--og-ink-3); cursor: pointer;
  padding: 2px; opacity: 0.5;
  width: 20px; height: 20px;
  border-radius: 6px;
  font-size: 14px; line-height: 1;
}
.em-pasta:hover .em-pasta-rm { opacity: 0.9; }
.em-pasta-rm:hover { background: color-mix(in srgb, var(--og-red) 18%, transparent); color: var(--og-red); }

/* Chevron de expandir/recolher subcategorias da Caixa de Entrada */
.em-pasta-chev {
  background: transparent;
  border: 0;
  color: var(--og-ink-3);
  cursor: pointer;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  padding: 0;
  transition: background .15s, color .15s, transform .15s;
  flex-shrink: 0;
}
.em-pasta-chev svg { width: 14px; height: 14px; display: block; }
.em-pasta-chev:hover {
  background: var(--og-hairline-soft);
  color: var(--og-ink);
}
.em-pasta-chev:focus-visible {
  outline: 2px solid var(--og-green);
  outline-offset: 1px;
}

.em-side-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--og-hairline-soft);
  flex-shrink: 0;
  font-size: 10px;
  color: var(--og-ink-3);
  text-align: center;
}
.em-icon-btn {
  background: transparent;
  border: 0;
  color: var(--og-ink-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.em-icon-btn:hover { background: var(--og-hairline-soft); color: var(--og-ink); }
.em-icon-btn svg { width: 12px; height: 12px; }

/* Coluna 2 — Lista de e-mails */
.em-list-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--og-hairline-soft);
  flex-shrink: 0;
}
.em-list-title {
  font-weight: 700;
  color: var(--og-ink);
  font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.em-list-info { font-size: 11px; color: var(--og-ink-3); flex-shrink: 0; }
.em-list-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.em-list-scroll::-webkit-scrollbar { width: 6px; }
.em-list-scroll::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }

/* Barra de seleção em massa */
.em-massa-bar {
  padding: 10px 16px;
  background: color-mix(in srgb, var(--og-amber) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--og-amber) 28%, transparent);
  flex-shrink: 0;
  align-items: center; gap: 8px;
}
.em-massa-bar input[type="checkbox"] {
  cursor: pointer; width: 14px; height: 14px;
  accent-color: var(--og-green);
}
.em-massa-bar #emailMassaContador {
  font-weight: 800; color: var(--og-ink); font-size: 12px;
}
.em-massa-btn {
  background: var(--og-glass-strong);
  color: var(--og-ink);
  border: 1px solid var(--og-hairline-soft);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}
.em-massa-btn:hover { background: var(--og-hairline-soft); }
.em-massa-btn.em-massa-del {
  background: color-mix(in srgb, var(--og-red) 18%, transparent);
  border-color: color-mix(in srgb, var(--og-red) 32%, transparent);
  color: var(--og-red);
  font-weight: 700;
}
.em-massa-btn.em-massa-del:hover { background: color-mix(in srgb, var(--og-red) 28%, transparent); }

/* Coluna 3 — Leitor */
.em-reader { padding: 0; overflow-y: auto; }
.em-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: 14px;
  color: var(--og-ink-3);
  font-size: 13px;
}
.em-empty svg {
  width: 64px; height: 64px;
  opacity: 0.32;
  color: var(--og-ink-3);
}

/* Cada e-mail item dentro de #emailLista — gerado dinamicamente, mas
   o JS aplica inline styles. Damos overrides aqui via descendant selector. */
#emailLista > div[onclick],
#emailLista > div.email-item {
  border-bottom: 1px solid var(--og-hairline-soft) !important;
}
#emailLista > div[onclick]:hover,
#emailLista > div.email-item:hover {
  background: var(--og-hairline-soft) !important;
}

/* Email items: cantos arredondados sutis + gap entre eles (cards-light) */
.em-list-scroll {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
#emailLista > div.email-item {
  border-radius: 12px !important;
  border-bottom: none !important;
  margin-bottom: 2px;
}
#emailLista > div.email-item.is-active {
  background: var(--og-glass-strong) !important;
  border-left-color: var(--og-green) !important;
}

/* Reader (Coluna 3) — Header, ações e anexos em vidro */
.em-reader-head {
  padding: 12px 20px;
  border-bottom: 1px solid var(--og-hairline-soft);
  /* Fundo OPACO (nao glass): o corpo do e-mail e um iframe e backdrop-filter
     nao funciona sobre iframe — com fundo translucido o conteudo aparecia
     ATRAVES do cabecalho sticky ao rolar. Opaco resolve a sobreposicao. */
  background: var(--og-surface);
  position: sticky; top: 0; z-index: 2;
}
.em-reader-head-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.em-reader-assunto {
  font-size: 15px; font-weight: 800; color: var(--og-ink);
  letter-spacing: -0.01em; margin-bottom: 5px;
  line-height: 1.25;
}
.em-reader-meta {
  font-size: 12px; color: var(--og-ink-2); line-height: 1.6;
}
.em-reader-meta b { color: var(--og-ink); font-weight: 700; }
.em-reader-actions {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--og-glass-strong);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 999px;
  flex-shrink: 0;
  align-self: flex-start;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.em-act-btn {
  padding: 7px 13px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--og-ink-2) !important;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
  white-space: nowrap;
  font-family: inherit;
}
.em-act-btn:hover {
  background: var(--og-glass-deep) !important;
  color: var(--og-ink) !important;
}
.em-act-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; }
/* Variante primária (Responder): pílula verde dentro do grupo */
.em-act-btn.kn-btn--primary {
  background: linear-gradient(145deg, #2fe06f, #13b552) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px -2px rgba(37,211,102,.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.em-act-btn.kn-btn--primary:hover {
  transform: translateY(-1px);
  color: #ffffff !important;
}
.em-act-btn.kn-btn--primary svg { opacity: 1; }

.em-reader-anexos {
  padding: 12px 22px;
  border-bottom: 1px solid var(--og-hairline-soft);
  background: color-mix(in srgb, var(--og-amber) 8%, var(--og-glass-deep));
}
.em-reader-anexos-title {
  font-size: 10.5px; color: var(--og-amber);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.em-reader-anexo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--og-glass-strong);
  border: 1px solid color-mix(in srgb, var(--og-amber) 28%, var(--og-hairline-soft));
  padding: 6px 12px;
  border-radius: 99px;
  text-decoration: none;
  color: var(--og-ink);
  font-size: 11.5px;
  font-weight: 600;
  transition: transform .15s, background .15s;
}
.em-reader-anexo-chip:hover { transform: translateY(-1px); background: var(--og-glass-strong); }
.em-reader-anexo-chip span { color: var(--og-ink-3); font-size: 10.5px; font-weight: 500; }

.em-reader-corpo {
  padding: 0;
  background: transparent;
}

/* =========================================================
   Corpo de e-mail no modal de Resposta Rápida (Painel widget)
   Força TODOS os elementos da árvore a caberem na largura
   pra eliminar scroll horizontal.
   ========================================================= */
.dash-email-corpo {
  font-size: 13.5px;
  color: var(--og-ink);
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  overflow-x: hidden;
}
.dash-email-corpo * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.dash-email-corpo img,
.dash-email-corpo video,
.dash-email-corpo iframe {
  height: auto !important;
  display: block;
  max-width: 100% !important;
}
.dash-email-corpo table {
  max-width: 100% !important;
  width: auto !important;
  table-layout: auto;
  border-collapse: collapse;
}
.dash-email-corpo td,
.dash-email-corpo th {
  max-width: 100% !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dash-email-corpo pre,
.dash-email-corpo code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.dash-email-corpo a {
  word-break: break-all;
  color: var(--og-blue);
}

/* =========================================================
   Picker custom de vendedor (cat-painel-hero) — Liquid Glass
   Layout estilo Configurações dropdown
   ========================================================= */
.cat-painel-picker-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
  min-width: 200px;
  justify-content: space-between;
  letter-spacing: 0.2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.cat-painel-picker-btn:hover {
  background: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}
.cat-painel-picker-btn svg { width: 14px; height: 14px; opacity: 0.85; flex-shrink: 0; }

.cat-painel-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px; max-width: 92vw;
  background: var(--og-glass-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--og-hairline);
  border-radius: 16px;
  box-shadow: var(--og-shadow);
  z-index: 1000;
  overflow: hidden;
  padding: 6px 6px 10px;
}
.cat-painel-picker-head {
  font-size: 10.5px; font-weight: 800;
  color: var(--og-ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 10px 12px 8px;
}
.cat-painel-picker-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 11px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  margin: 0 6px 8px;
}
.cat-painel-picker-search svg { width: 14px; height: 14px; color: var(--og-ink-3); flex-shrink: 0; }
.cat-painel-picker-search input {
  flex: 1; background: none; border: 0; outline: none;
  color: var(--og-ink); font: inherit; font-size: 12.5px; min-width: 0;
}
.cat-painel-picker-search input::placeholder { color: var(--og-ink-3); }

.cat-painel-picker-list {
  max-height: 320px; overflow-y: auto;
  padding: 0 2px;
  display: flex; flex-direction: column; gap: 2px;
}
.cat-painel-picker-list::-webkit-scrollbar { width: 6px; }
.cat-painel-picker-list::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }

.cat-painel-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  color: var(--og-ink);
  font-weight: 500;
  transition: background .15s;
  font-family: inherit;
}
.cat-painel-picker-item:hover { background: var(--og-hairline-soft); }
.cat-painel-picker-item.on {
  background: color-mix(in srgb, var(--og-green) 12%, transparent);
  font-weight: 700;
}
.cat-painel-picker-item .cpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2);
  flex-shrink: 0;
}
.cat-painel-picker-item .cpi-icon svg { width: 14px; height: 14px; }
.cat-painel-picker-item .cpi-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 9px;
  background: linear-gradient(145deg, #2fe06f, #13b552);
  color: #ffffff;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.cat-painel-picker-item .cpi-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-painel-picker-item .cpi-count {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.cat-painel-picker-item.on .cpi-count {
  background: var(--og-green);
  color: #ffffff;
  border-color: transparent;
}
.cat-painel-picker-item .cpi-check {
  color: var(--og-green);
  flex-shrink: 0;
  display: inline-flex;
}
.cat-painel-picker-item .cpi-check svg { width: 16px; height: 16px; }
.cat-painel-picker-empty {
  font-size: 11.5px; color: var(--og-ink-3);
  text-align: center; padding: 16px 12px;
}

/* =========================================================
   Botões "Adicionar widget" / "Editar layout" do Meu Dashboard —
   regrupados em pílula vidro (igual ao reader de e-mail)
   ========================================================= */
.dash-actions-bar {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--og-glass-strong);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 999px;
  align-items: center;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.dash-actions-bar .dash-act-btn {
  padding: 7px 13px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--og-ink-2);
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
  white-space: nowrap;
  font-family: inherit;
}
.dash-actions-bar .dash-act-btn:hover {
  background: var(--og-glass-deep);
  color: var(--og-ink);
}
.dash-actions-bar .dash-act-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; }
.dash-actions-bar .dash-act-btn.is-primary {
  background: linear-gradient(145deg, #2fe06f, #13b552);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 12px -2px rgba(37,211,102,.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.dash-actions-bar .dash-act-btn.is-primary:hover {
  transform: translateY(-1px);
  color: #ffffff;
}
.dash-actions-bar .dash-act-btn.is-primary svg { opacity: 1; }

/* =========================================================
   E-MAIL COMPOSER (Nova / Responder / Encaminhar) — Liquid Glass
   ========================================================= */
.em-compose {
  max-width: 880px;
  width: 100%;
  height: 92vh; max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.em-compose-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--og-hairline-soft);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0; gap: 12px;
  position: relative; z-index: 1;
}
.em-compose-head-l {
  display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1;
}
.em-compose-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--og-green) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--og-green) 28%, transparent);
  color: var(--og-green);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.em-compose-icon svg { width: 18px; height: 18px; }
.em-compose-titulo {
  font-size: 15px; font-weight: 700;
  color: var(--og-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-compose-close {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2);
  width: 32px; height: 32px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; font-weight: 700;
  flex-shrink: 0;
}
.em-compose-close:hover { background: var(--og-glass-strong); color: var(--og-ink); }

.em-compose-fields {
  padding: 14px 22px 6px;
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.em-compose-row {
  display: flex; gap: 10px; align-items: center;
}
.em-compose-row label {
  font-size: 10.5px; font-weight: 700;
  color: var(--og-ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  width: 55px; flex-shrink: 0;
}
.em-compose-row input {
  flex: 1; min-width: 0;
  padding: 8px 12px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 11px;
  color: var(--og-ink);
  font: inherit; font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.em-compose-row input:focus {
  border-color: var(--og-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 18%, transparent);
}
.em-compose-row input::placeholder { color: var(--og-ink-3); }
.em-compose-cc-btn {
  background: transparent;
  border: 0;
  color: var(--og-ink-3);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 8px;
  flex-shrink: 0;
  font-family: inherit;
}
.em-compose-cc-btn:hover { background: var(--og-hairline-soft); color: var(--og-ink); }

.em-compose-toolbar {
  padding: 8px 22px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  background: var(--og-glass-deep);
  border-top: 1px solid var(--og-hairline-soft);
  border-bottom: 1px solid var(--og-hairline-soft);
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.em-fmt-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  width: 30px; height: 30px;
  cursor: pointer;
  color: var(--og-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.em-fmt-btn:hover {
  background: var(--og-glass-strong);
  border-color: var(--og-hairline-soft);
  color: var(--og-ink);
}
.em-fmt-btn svg { width: 14px; height: 14px; opacity: 0.85; }
.em-fmt-btn input[type="color"] { z-index: 1; }
.em-fmt-sep { width: 1px; height: 18px; background: var(--og-hairline); margin: 0 4px; }
.em-fmt-select {
  padding: 6px 24px 6px 10px !important;
  font-size: 11px !important;
  height: 30px;
  border-radius: 8px !important;
  font-weight: 600;
}

.em-compose-editor {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
  font-size: 13.5px;
  color: var(--og-ink);
  line-height: 1.6;
  outline: none;
  background: transparent;
  position: relative; z-index: 1;
}
.em-compose-editor:empty::before {
  content: 'Escreva sua mensagem aqui…';
  color: var(--og-ink-3);
  pointer-events: none;
}
.em-compose-editor::-webkit-scrollbar { width: 6px; }
.em-compose-editor::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }
.em-compose-editor a { color: var(--og-blue); }

.em-compose-anexos-wrap { padding: 0 22px; position: relative; z-index: 1; flex-shrink: 0; }
.em-compose-anexos {
  padding: 10px 0;
  border-top: 1px solid var(--og-hairline-soft);
}
.em-compose-anexos-title {
  font-size: 10.5px; color: var(--og-amber);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.em-compose-anexo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--og-glass-strong);
  border: 1px solid color-mix(in srgb, var(--og-amber) 28%, var(--og-hairline-soft));
  padding: 5px 5px 5px 12px;
  border-radius: 99px;
  font-size: 11.5px;
  color: var(--og-ink);
  font-weight: 600;
}
.em-compose-anexo-chip .em-anexo-tamanho { color: var(--og-ink-3); font-weight: 500; font-size: 10.5px; }
.em-compose-anexo-chip button {
  background: color-mix(in srgb, var(--og-red) 18%, transparent);
  border: 0;
  color: var(--og-red);
  cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 13px; line-height: 1; font-weight: 700;
  margin-left: 2px;
}
.em-compose-anexo-chip button:hover { background: color-mix(in srgb, var(--og-red) 28%, transparent); }

.em-compose-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--og-hairline-soft);
  background: var(--og-glass-deep);
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.em-compose-send {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(145deg, #2fe06f, #13b552);
  color: #ffffff;
  border: 0;
  padding: 10px 22px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 16px -4px rgba(37,211,102,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .15s;
  font-family: inherit;
}
.em-compose-send:hover { transform: translateY(-1px); }
.em-compose-send svg { width: 15px; height: 15px; }
.em-compose-anexar {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--og-glass-strong);
  color: var(--og-ink);
  border: 1px solid var(--og-hairline-soft);
  padding: 9px 14px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.em-compose-anexar:hover { background: var(--og-glass-strong); border-color: var(--og-hairline); }
.em-compose-anexar svg { width: 14px; height: 14px; opacity: 0.85; }
.em-compose-descartar {
  margin-left: auto;
  background: transparent;
  color: var(--og-ink-3);
  border: 0;
  padding: 9px 18px;
  border-radius: 11px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.em-compose-descartar:hover { background: var(--og-hairline-soft); color: var(--og-ink); }

/* =========================================================
   OVERRIDE GLOBAL: modais antigas com header verde + body branco
   Captura `style="background:#0E4F3B"` em headers de modal e
   `style="background:#fff"` em containers de modal aplicando vidro.
   Não cobre TODOS os casos (inline style ainda vence em alguns lugares),
   mas pega a maioria absoluta dos modais legados sem reescrever JS.
   ========================================================= */
/* Inputs/textareas em modais com border:1px solid #cbd5e1 (estilo antigo) */
input[style*="border:1px solid var(--line)"],
input[style*="border:1px solid #cbd5e1"],
input[style*="border:1px solid #e2e8f0"],
textarea[style*="border:1px solid var(--line)"],
textarea[style*="border:1px solid #cbd5e1"],
textarea[style*="border:1px solid #e2e8f0"] {
  border-color: var(--og-hairline-soft) !important;
  background: var(--og-glass-deep) !important;
  color: var(--og-ink) !important;
  border-radius: 10px !important;
}
input[style*="border:1px solid var(--line)"]:focus,
input[style*="border:1px solid #cbd5e1"]:focus,
input[style*="border:1px solid #e2e8f0"]:focus,
textarea[style*="border:1px solid var(--line)"]:focus,
textarea[style*="border:1px solid #cbd5e1"]:focus,
textarea[style*="border:1px solid #e2e8f0"]:focus {
  border-color: var(--og-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 18%, transparent) !important;
}

/* =========================================================
   Sistema padrão de Modal Liquid Glass — pode ser aplicado em
   qualquer JS que crie modal manualmente. Use as classes:
   .og-modal-overlay > .og-modal > .og-modal-head + .og-modal-body + .og-modal-foot
   ========================================================= */
.og-modal-overlay {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--og-bg-0) 60%, rgba(0,0,0,0.55));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.og-modal {
  background: var(--og-glass-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--og-hairline);
  border-radius: 20px;
  box-shadow: var(--og-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
  width: 100%; max-width: 540px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.og-modal::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%);
  pointer-events: none; border-radius: inherit;
}
.og-modal-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--og-hairline-soft);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0; gap: 12px;
  position: relative; z-index: 1;
}
.og-modal-head-l {
  display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1;
}
.og-modal-head-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--og-green) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--og-green) 28%, transparent);
  color: var(--og-green);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.og-modal-head-icon svg { width: 18px; height: 18px; }
.og-modal-title {
  font-size: 15px; font-weight: 700;
  color: var(--og-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.og-modal-x {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2);
  width: 32px; height: 32px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; font-weight: 700;
  flex-shrink: 0;
  font-family: inherit;
}
.og-modal-x:hover { background: var(--og-glass-strong); color: var(--og-ink); }
.og-modal-body {
  padding: 18px 22px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  position: relative; z-index: 1;
  color: var(--og-ink);
}
.og-modal-body::-webkit-scrollbar { width: 6px; }
.og-modal-body::-webkit-scrollbar-thumb { background: var(--og-hairline); border-radius: 99px; }
.og-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--og-hairline-soft);
  background: var(--og-glass-deep);
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.og-modal-foot .og-btn { flex: 1; }
.og-modal-foot .og-btn.og-btn--primary { flex: 1.6; }

/* Labels uppercase pra forms dentro de og-modal */
.og-modal-body label.og-lbl,
.og-modal-body .og-lbl {
  display: block;
  font-size: 10.5px; font-weight: 800;
  color: var(--og-ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
}
/* Inputs/selects/textareas dentro de og-modal — vidro padrão */
.og-modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.og-modal-body textarea,
.og-modal-body select:not(.raw-select) {
  width: 100%;
  padding: 9px 12px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 11px;
  color: var(--og-ink);
  font: inherit; font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.og-modal-body textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.og-modal-body input:focus,
.og-modal-body textarea:focus,
.og-modal-body select:not(.raw-select):focus {
  border-color: var(--og-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 18%, transparent);
}

/* Mesmo estilo dos inputs do og-modal pra qualquer form fora de modal —
   usar wrapper class="og-form". */
.og-form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]),
.og-form textarea,
.og-form select:not(.raw-select) {
  width: 100%;
  padding: 9px 12px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 11px;
  color: var(--og-ink);
  font: inherit; font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.og-form textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.og-form input:focus,
.og-form textarea:focus,
.og-form select:not(.raw-select):focus {
  border-color: var(--og-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 18%, transparent);
}
.og-form input::placeholder,
.og-form textarea::placeholder { color: var(--og-ink-3); }
.og-form label.og-lbl,
.og-form .og-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--og-ink-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Botões padrão Liquid Glass */
.og-btn {
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--og-hairline-soft);
  background: var(--og-glass-strong);
  color: var(--og-ink);
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit;
}
.og-btn:hover { background: var(--og-glass-strong); border-color: var(--og-hairline); }
.og-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.og-btn--primary {
  background-color: #13b552;
  background-image: linear-gradient(145deg, #2fe06f, #13b552);
  color: #ffffff !important;
  border-color: transparent;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
  box-shadow: 0 6px 16px -4px rgba(37,211,102,.5), inset 0 1px 0 rgba(255,255,255,0.3);
  position: relative;
  z-index: 1;
}
.og-btn--primary:hover {
  transform: translateY(-1px);
  background-color: #0fa14a;
  background-image: linear-gradient(145deg, #2fd862, #0fa14a);
}

/* === Propostas Recebidas — PAGE (substitui conteudo, nao eh modal) === */
.cp-page-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
  min-height: calc(100vh - 60px);
  padding: 18px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.cp-page-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  background: var(--og-glass-strong);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 18px -10px rgba(15,79,59,0.15);
  flex-wrap: wrap; gap: 12px;
}
.cp-page-head-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-page-back {
  display: inline-flex !important; align-items: center; gap: 6px !important;
}
.cp-page-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,79,59,0.10);
  color: var(--og-green);
  border-radius: 12px;
  border: 1px solid rgba(15,79,59,0.18);
}
.cp-page-titulo {
  margin: 0;
  font-size: 18px; font-weight: 800;
  color: var(--og-ink); letter-spacing: -0.2px;
}
.cp-page-sub { font-size: 11.5px; color: var(--og-ink-3); margin-top: 3px; line-height: 1.4; }
.cp-page-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-page-body {
  flex: 1;
}

/* Tabela v2 — colunas separadas: Código | Descrição | Qtd | (por fornecedor: V.Unit | V.Total) */
.cp-tabela-v2 { border-collapse: separate; border-spacing: 0; }
.cp-tabela-v2 thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.cp-tabela-v2 thead tr:first-child th { top: 0; }
/* Linha 2 (V. Unitário / V. Total) gruda logo abaixo da linha 1.
   Valor calibrado pro card de fornecedor compacto (~110px); ajuste fino se
   o cabecalho do fornecedor crescer com varias linhas de condicao. */
.cp-tabela-v2 thead tr:nth-child(2) th { top: 110px; }
.cp-tabela-v2 .cp-th-base {
  padding: 12px 14px;
  text-align: left;
  font-size: 10.5px; text-transform: uppercase;
  color: var(--og-ink-3); font-weight: 800; letter-spacing: 0.05em;
  background: rgba(240, 248, 244, 0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--og-hairline-soft);
  vertical-align: top;
  position: sticky;
  top: 0; z-index: 11;
}
/* Sublabel "linha base" pra alinhar visualmente com V.Unit/V.Total */
.cp-tabela-v2 .cp-th-base::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--og-hairline-soft);
}
.cp-tabela-v2 .cp-th-qtd { text-align: right; }
.cp-tabela-v2 .cp-th-sub {
  padding: 8px 10px;
  text-align: right;
  font-size: 10px; text-transform: uppercase;
  color: var(--og-ink-3); font-weight: 800; letter-spacing: 0.05em;
  background: rgba(228, 242, 234, 0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 1px solid var(--og-hairline-soft);
  position: sticky;
  z-index: 11;
}
.cp-tabela-v2 td.cp-col-codigo {
  padding: 12px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; color: var(--og-green); font-size: 12.5px;
  border-bottom: 1px solid var(--og-hairline-soft);
  white-space: nowrap;
}
.cp-tabela-v2 td.cp-col-desc {
  padding: 12px 14px;
  font-size: 12.5px; color: var(--og-ink); font-weight: 500;
  border-bottom: 1px solid var(--og-hairline-soft);
  line-height: 1.35;
}
.cp-tabela-v2 td.cp-col-qtd {
  padding: 12px 14px;
  text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--og-ink); font-size: 12.5px;
  border-bottom: 1px solid var(--og-hairline-soft);
  white-space: nowrap;
}
.cp-tabela-v2 td.cp-cel-unit, .cp-tabela-v2 td.cp-cel-total {
  padding: 10px 10px;
  text-align: right;
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 1px solid var(--og-hairline-soft);
  vertical-align: middle;
  width: 110px;
  min-width: 100px;
  max-width: 130px;
  white-space: nowrap;
}
.cp-tabela-v2 td.cp-cel-obs-col {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 1px solid var(--og-hairline-soft);
  vertical-align: middle;
  min-width: 160px;
  max-width: 240px;
  white-space: normal;
  font-size: 11.5px;
  color: var(--og-ink-2);
  line-height: 1.35;
}
.cp-tabela-v2 td.cp-cel-obs-col .cp-cel-extras { margin-top: 0; }
.cp-tabela-v2 td.cp-cel-obs-col .cp-cel-obs-texto {
  color: var(--og-ink, #0f172a);
  font-size: 12px;
  line-height: 1.4;
  padding: 0;
  background: transparent;
  border: 0;
}
.cp-tabela-v2 td.cp-cel-obs-col .cp-cel-obs-vazia {
  color: var(--og-ink-3);
  font-size: 12px;
  opacity: 0.5;
}

/* Coluna Foto — thumb clicavel abre lightbox */
.cp-tabela-v2 td.cp-cel-foto-col {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 1px solid var(--og-hairline-soft);
  vertical-align: middle;
  width: 68px;
  min-width: 60px;
}
.cp-cel-foto-thumb {
  position: relative;
  background: transparent;
  border: 1px solid rgba(14, 79, 59, 0.15);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.cp-cel-foto-thumb:hover {
  border-color: #0E4F3B;
  transform: scale(1.06);
  box-shadow: 0 4px 12px -2px rgba(14, 79, 59, 0.25);
}
.cp-cel-foto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-cel-foto-fallback {
  color: #94a3b8;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.cp-cel-foto-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #0E4F3B;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  border: 2px solid #fff;
}

/* Target — só input manual com prefixo de moeda (US$/R$) */
.cp-target-manual-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(14, 79, 59, 0.20);
  border-radius: 8px;
  padding: 4px 8px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cp-target-manual-wrap:focus-within {
  border-color: #0E4F3B;
  box-shadow: 0 0 0 3px rgba(14, 79, 59, 0.10);
}
.cp-target-manual-prefix {
  font-size: 11.5px;
  font-weight: 700;
  color: #0E4F3B;
  margin-right: 6px;
  font-family: 'Manrope', system-ui, sans-serif;
  white-space: nowrap;
}
.cp-target-manual-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  padding: 2px 0;
  min-width: 0;
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'Manrope', system-ui, monospace;
}
.cp-target-manual-input::placeholder { color: #cbd5e1; font-weight: 400; }
.cp-target-manual-input::-webkit-outer-spin-button,
.cp-target-manual-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-target-manual-input[type=number] { -moz-appearance: textfield; }

/* Feedback visual do auto-save do target */
.cp-target-manual-wrap {
  position: relative;
}
.cp-target-manual-wrap::after {
  content: '';
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}
.cp-target-manual-wrap.cp-target-saving::after {
  opacity: 1;
  background-color: rgba(148, 163, 184, 0.20);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' opacity='0.3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9'/%3E%3C/svg%3E");
  animation: cpTargetSpin 0.7s linear infinite;
}
@keyframes cpTargetSpin { to { transform: translateY(-50%) rotate(360deg); } }
.cp-target-manual-wrap.cp-target-saved::after {
  opacity: 1;
  background-color: #16a34a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  animation: cpTargetPulse 0.4s ease;
}
@keyframes cpTargetPulse {
  0%   { transform: translateY(-50%) scale(0.6); }
  50%  { transform: translateY(-50%) scale(1.15); }
  100% { transform: translateY(-50%) scale(1); }
}
.cp-target-manual-wrap.cp-target-error::after {
  opacity: 1;
  background-color: #dc2626;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Coluna % vs Target — pill verde (bom) / vermelho negrito (ruim) */
.cp-tabela-v2 td.cp-cel-pct-target {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 1px solid var(--og-hairline-soft);
  vertical-align: middle;
  min-width: 90px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cp-tabela-v2 .cp-pct-target {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.cp-tabela-v2 .cp-pct-target--ok {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}
.cp-tabela-v2 .cp-pct-target--bad {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
  font-weight: 900;
}

/* Colunas Medidas e Peso — cada uma com seu proprio campo */
.cp-tabela-v2 td.cp-cel-medidas-col,
.cp-tabela-v2 td.cp-cel-peso-col {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 1px solid var(--og-hairline-soft);
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cp-tabela-v2 td.cp-cel-medidas-col { min-width: 110px; }
.cp-tabela-v2 td.cp-cel-peso-col    { min-width: 80px; }
.cp-tabela-v2 .cp-cel-medidas-val,
.cp-tabela-v2 .cp-cel-peso-val {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}
.cp-tabela-v2 .cp-cel-medidas-unit,
.cp-tabela-v2 .cp-cel-peso-unit {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: lowercase;
  letter-spacing: 0.3px;
}

/* Coluna Δ vs Ultima compra */
.cp-tabela-v2 td.cp-cel-delta-col {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 1px solid var(--og-hairline-soft);
  vertical-align: middle;
  width: 110px;
  min-width: 100px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cp-tabela-v2 .cp-cel-delta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}
.cp-tabela-v2 .cp-cel-delta-pct {
  font-size: 13px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.cp-tabela-v2 .cp-cel-delta.cp-diff-ok    .cp-cel-delta-pct { background: rgba(22, 163, 74, 0.14);  color: #15803d; }
.cp-tabela-v2 .cp-cel-delta.cp-diff-bad   .cp-cel-delta-pct { background: rgba(220, 38, 38, 0.14);  color: #b91c1c; }
.cp-tabela-v2 .cp-cel-delta.cp-diff-neutro .cp-cel-delta-pct { background: rgba(100, 116, 139, 0.12); color: #475569; }
.cp-tabela-v2 .cp-cel-delta-abs {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  font-style: italic;
}

/* Dropdown Acoes na lista de Pedidos de Compra */
#pedAcoesMenu .ped-acoes-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--og-ink, #0f172a);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease;
}
#pedAcoesMenu .ped-acoes-item:hover {
  background: rgba(14, 79, 59, 0.08);
  color: #0E4F3B;
}
#pedAcoesMenu .ped-acoes-item svg { flex-shrink: 0; color: var(--og-green, #0E4F3B); }

/* === KPIs do Dashboard Diretoria — og-glass premium === */
.dir-kpi {
  position: relative;
  background: linear-gradient(155deg, #ffffff 0%, #f4faf7 100%);
  border: 1px solid rgba(14, 79, 59, 0.08);
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(14, 79, 59, 0.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: hidden;
  min-height: 84px;
  display: flex;
  flex-direction: column;
}
.dir-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0E4F3B 0%, #2D8D6B 100%);
  opacity: 0.85;
}
.dir-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px -12px rgba(14, 79, 59, 0.18);
  border-color: rgba(14, 79, 59, 0.16);
}
.dir-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.dir-kpi-titulo {
  font-size: 10.5px;
  color: #0E4F3B;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Manrope', system-ui, sans-serif;
}
.dir-kpi-icon {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14, 79, 59, 0.10) 0%, rgba(45, 141, 107, 0.06) 100%);
  color: #0E4F3B;
  flex-shrink: 0;
}
.dir-kpi-valor {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 1px 0 0;
  white-space: nowrap;
}
@media (max-width: 1400px) {
  .dir-kpi-valor { font-size: 22px; }
}
.dir-kpi-sub {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.35;
}
.dir-kpi-trend {
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(14, 79, 59, 0.06);
  border-radius: 999px;
  align-self: flex-start;
}

/* Variantes por card — cor de acento diferente em cada um */
.dir-kpi--capital::before   { background: linear-gradient(90deg, #1d6b40 0%, #2D8D6B 100%); }
.dir-kpi--capital .dir-kpi-icon { color: #1d6b40; }

.dir-kpi--faturamento::before { background: linear-gradient(90deg, #2D8D6B 0%, #4CBF8E 100%); }
.dir-kpi--faturamento .dir-kpi-icon { color: #2D8D6B; }

.dir-kpi--giro::before      { background: linear-gradient(90deg, #0E4F3B 0%, #137a4c 100%); }
.dir-kpi--giro .dir-kpi-icon { color: #0E4F3B; }

.dir-kpi--cambio::before    { background: linear-gradient(90deg, #137a4c 0%, #4CBF8E 100%); }
.dir-kpi--cambio .dir-kpi-icon { color: #137a4c; }

/* Venda Perdida — Motor (visual laranja/dourado alerta) */
.dir-kpi--vp-motor::before {
  background: linear-gradient(90deg, #b45309 0%, #f59e0b 100%);
}
.dir-kpi--vp-motor .dir-kpi-icon {
  color: #b45309;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%);
}
.dir-kpi--vp-motor .dir-kpi-valor { color: #b45309; }
.dir-kpi--vp-motor:hover { border-color: rgba(180, 83, 9, 0.22); }

/* Curva ABC — 4 variantes */
.dir-kpi--abc-a::before   { background: linear-gradient(90deg, #15803d 0%, #22c55e 100%); }
.dir-kpi--abc-a .dir-kpi-icon  { color: #15803d; background: linear-gradient(135deg, rgba(21,128,61,0.12), rgba(34,197,94,0.06)); }
.dir-kpi--abc-a .dir-kpi-valor { color: #15803d; }
.dir-kpi--abc-a .dir-kpi-trend { background: rgba(21,128,61,0.09); color: #15803d; }

.dir-kpi--abc-b::before   { background: linear-gradient(90deg, #a16207 0%, #eab308 100%); }
.dir-kpi--abc-b .dir-kpi-icon  { color: #a16207; background: linear-gradient(135deg, rgba(161,98,7,0.12), rgba(234,179,8,0.06)); }
.dir-kpi--abc-b .dir-kpi-valor { color: #a16207; }
.dir-kpi--abc-b .dir-kpi-trend { background: rgba(161,98,7,0.09); color: #a16207; }
.dir-kpi--abc-b .dir-kpi-titulo { color: #a16207; }

.dir-kpi--abc-c::before   { background: linear-gradient(90deg, #991b1b 0%, #ef4444 100%); }
.dir-kpi--abc-c .dir-kpi-icon  { color: #991b1b; background: linear-gradient(135deg, rgba(153,27,27,0.12), rgba(239,68,68,0.06)); }
.dir-kpi--abc-c .dir-kpi-valor { color: #991b1b; }
.dir-kpi--abc-c .dir-kpi-trend { background: rgba(153,27,27,0.09); color: #991b1b; }
.dir-kpi--abc-c .dir-kpi-titulo { color: #991b1b; }

.dir-kpi--abc-total::before { background: linear-gradient(90deg, #0E4F3B 0%, #4CBF8E 100%); }
.dir-kpi--abc-total .dir-kpi-icon  { color: #0E4F3B; }
.dir-kpi--abc-total .dir-kpi-valor { color: #0E4F3B; }

/* Toolbar da Curva ABC — og-glass */
.abc-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin: 14px 0;
  background: linear-gradient(155deg, #ffffff 0%, #f6fbf8 100%);
  border: 1px solid rgba(14, 79, 59, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(14, 79, 59, 0.08);
}
.abc-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.abc-toolbar-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #0E4F3B;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: 'Manrope', system-ui, sans-serif;
}
.abc-toolbar-busca {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(14, 79, 59, 0.14);
  border-radius: 10px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.abc-toolbar-busca svg { color: #94a3b8; flex-shrink: 0; }
.abc-toolbar-busca:focus-within {
  border-color: #0E4F3B;
  box-shadow: 0 0 0 3px rgba(14, 79, 59, 0.10);
}
.abc-toolbar-busca:focus-within svg { color: #0E4F3B; }
.abc-toolbar-busca input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: 'Manrope', system-ui, sans-serif;
  color: #0f172a;
  min-width: 0;
}
.abc-toolbar-busca input::placeholder { color: #94a3b8; }
.abc-toolbar-btn {
  background: #0E4F3B;
  color: #fff;
  border: 0;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 10px -3px rgba(14, 79, 59, 0.35);
}
.abc-toolbar-btn:hover {
  background: #137a4c;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(14, 79, 59, 0.45);
}
.dir-kpi--cambio .dir-cambio-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.dir-kpi--cambio .dir-cambio-body > div {
  border-bottom-color: rgba(14, 79, 59, 0.06) !important;
  padding: 5px 0 !important;
}
.dir-kpi--cambio .dir-cambio-body > div:last-child { border-bottom: 0 !important; }
.dir-kpi--cambio .dir-cambio-foot {
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 6px;
  text-align: right;
  font-weight: 500;
}

/* === Panels grandes (graficos + listas) — mesma linguagem og-glass === */
.dir-panel {
  position: relative;
  background: linear-gradient(155deg, #ffffff 0%, #f6fbf8 100%);
  border: 1px solid rgba(14, 79, 59, 0.08);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(14, 79, 59, 0.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: hidden;
}
.dir-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0E4F3B 0%, #2D8D6B 100%);
  opacity: 0.85;
}
.dir-panel:hover {
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05), 0 16px 32px -12px rgba(14, 79, 59, 0.14);
  border-color: rgba(14, 79, 59, 0.14);
}
.dir-panel-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.dir-panel-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0E4F3B;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.dir-panel-sub {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.4;
}
.dir-panel-link {
  font-size: 11.5px;
  color: #0E4F3B;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(14, 79, 59, 0.08);
  transition: background .15s ease;
  white-space: nowrap;
}
.dir-panel-link:hover { background: rgba(14, 79, 59, 0.14); }

.dir-panel--fat::before        { background: linear-gradient(90deg, #2D8D6B 0%, #4CBF8E 100%); }
.dir-panel--categoria::before  { background: linear-gradient(90deg, #1d6b40 0%, #2D8D6B 100%); }
.dir-panel--campanhas::before  { background: linear-gradient(90deg, #137a4c 0%, #4CBF8E 100%); }
.dir-panel--canais::before     { background: linear-gradient(90deg, #0E4F3B 0%, #2D8D6B 100%); }
.dir-panel--vp-motor::before   { background: linear-gradient(90deg, #b45309 0%, #f59e0b 100%); }
.dir-panel--vp-motor .dir-panel-titulo { color: #b45309; }

.dir-vpmotor-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.dir-vpmotor-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(180, 83, 9, 0.14);
  border-radius: 10px;
  transition: border-color .12s ease, background .12s ease;
}
.dir-vpmotor-item:hover {
  border-color: rgba(180, 83, 9, 0.32);
  background: rgba(180, 83, 9, 0.03);
}
.dir-vpmotor-item-l { flex: 1; min-width: 0; }
.dir-vpmotor-item-cod {
  font-size: 10.5px;
  font-weight: 700;
  color: #0E4F3B;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.dir-vpmotor-item-desc {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dir-vpmotor-item-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 10.5px;
  color: #64748b;
}
.dir-vpmotor-item-r {
  text-align: right;
  white-space: nowrap;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.dir-vpmotor-item-qtd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(180,83,9,0.10) 0%, rgba(245,158,11,0.06) 100%);
  border: 1px solid rgba(180,83,9,0.18);
  border-radius: 10px;
  margin-bottom: 6px;
  line-height: 1;
}
.dir-vpmotor-item-qtd-num {
  font-size: 22px;
  font-weight: 800;
  color: #b45309;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dir-vpmotor-item-qtd-lbl {
  font-size: 9.5px;
  color: #92400e;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}
.dir-vpmotor-item-valor {
  font-size: 14px;
  font-weight: 800;
  color: #b45309;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dir-vpmotor-item-unit {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.dir-vpmotor-item-motivo {
  background: rgba(180,83,9,0.10);
  color: #92400e;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  font-style: italic;
  border-left: 2px solid #b45309;
}
.dir-panel--motores::before    { background: linear-gradient(90deg, #0E4F3B 0%, #4CBF8E 100%); }

/* Sub-painel (grafico dentro de painel og-glass) */
.dir-subpanel {
  background: #fff;
  border: 1px solid rgba(14, 79, 59, 0.08);
  border-radius: 12px;
  padding: 18px;
}

/* Mini KPI (usado em Motores Completos) */
.dir-kpi--mini { min-height: auto; padding: 14px 16px; }
.dir-kpi--mini .dir-kpi-valor { font-size: 22px; margin-top: 2px; }
.dir-kpi--mini .dir-kpi-icon  { width: 30px; height: 30px; border-radius: 8px; }
.dir-kpi--mini .dir-kpi-top   { margin-bottom: 6px; }

/* Select customizado nos painéis og-glass */
.dir-select {
  padding: 6px 28px 6px 12px;
  border: 1px solid rgba(14, 79, 59, 0.16);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #0E4F3B;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230E4F3B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dir-select:hover { border-color: rgba(14, 79, 59, 0.32); }
.dir-select:focus {
  outline: none;
  border-color: #0E4F3B;
  box-shadow: 0 0 0 3px rgba(14, 79, 59, 0.12);
}

/* === Modal Metas do Ano (12 meses editaveis) === */
.metas-ano-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.metas-ano-modal {
  background: linear-gradient(155deg, #ffffff 0%, #f6fbf8 100%);
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35);
  width: 100%;
  max-width: 1080px;
  max-height: 92vh;
  overflow: auto;
  padding: 24px 28px;
  border: 1px solid rgba(14, 79, 59, 0.10);
}
.metas-ano-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(14, 79, 59, 0.08);
  margin-bottom: 16px;
}
.metas-ano-titulo {
  font-size: 11px;
  color: #0E4F3B;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  font-weight: 700;
}
.metas-ano-vendedor {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.metas-ano-close {
  background: transparent;
  border: 0;
  font-size: 26px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .12s ease, color .12s ease;
}
.metas-ano-close:hover { background: rgba(14, 79, 59, 0.08); color: #0E4F3B; }
.metas-ano-help {
  font-size: 12.5px;
  color: #475569;
  background: rgba(14, 79, 59, 0.05);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.metas-ano-copiar {
  background: #0E4F3B;
  color: #fff;
  border: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
  white-space: nowrap;
}
.metas-ano-copiar:hover { background: #137a4c; }
.metas-ano-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .metas-ano-grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); } }
@media (max-width: 820px)  { .metas-ano-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .metas-ano-grid { grid-template-columns: 1fr; } }
.metas-ano-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(14, 79, 59, 0.10);
  border-radius: 10px;
  cursor: text;
  transition: border-color .12s ease, box-shadow .12s ease;
  min-width: 0; /* previne overflow em grids apertadas */
}
.metas-ano-item:hover { border-color: rgba(14, 79, 59, 0.28); }
.metas-ano-item:focus-within {
  border-color: #0E4F3B;
  box-shadow: 0 0 0 3px rgba(14, 79, 59, 0.10);
}
.metas-ano-item--corrente {
  border-color: #0E4F3B;
  background: linear-gradient(135deg, #fff 0%, rgba(14, 79, 59, 0.06) 100%);
}
.metas-ano-item--passado { opacity: 0.72; }
.metas-ano-item-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.metas-ano-tag {
  background: #0E4F3B;
  color: #fff;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.metas-ano-item-input {
  display: flex;
  align-items: center;
  gap: 4px;
}
.metas-ano-prefix {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 700;
}
.metas-ano-item-input input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  padding: 2px 0;
  outline: none;
  min-width: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'Manrope', system-ui, monospace;
}
/* Esconde as setinhas de number input pra sobrar mais espaço pro valor */
.metas-ano-item-input input::-webkit-outer-spin-button,
.metas-ano-item-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.metas-ano-item-input input[type=number] { -moz-appearance: textfield; }
.metas-ano-item-input input::placeholder { color: #cbd5e1; font-weight: 400; }
.metas-ano-erro {
  color: #dc2626;
  font-size: 12.5px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-bottom: 12px;
}
.metas-ano-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(14, 79, 59, 0.08);
  flex-wrap: wrap;
}
.metas-ano-total {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}
.metas-ano-total strong {
  color: #0E4F3B;
  font-size: 17px;
  font-weight: 800;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
}

/* Botões do modal Metas Ano */
.metas-ano-btn {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.2px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.metas-ano-btn--cancel {
  background: #fff;
  color: #475569;
  border: 1px solid rgba(14, 79, 59, 0.16);
}
.metas-ano-btn--cancel:hover {
  background: #f8fafc;
  border-color: rgba(14, 79, 59, 0.30);
  color: #0E4F3B;
}
.metas-ano-btn--save {
  background: #0E4F3B;
  color: #fff;
  border: 1px solid #0E4F3B;
  box-shadow: 0 4px 10px -3px rgba(14, 79, 59, 0.35);
}
.metas-ano-btn--save:hover {
  background: #137a4c;
  border-color: #137a4c;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(14, 79, 59, 0.45);
}
.metas-ano-btn--save:disabled {
  background: #94a3b8;
  border-color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* === KPI cards de Resumo por Fornecedor (rodape do comparativo) === */
.cp-forn-kpis {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid rgba(14, 79, 59, 0.10);
}
.cp-forn-kpis-head {
  margin-bottom: 16px;
}
.cp-forn-kpis-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0E4F3B;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.cp-forn-kpis-sub {
  font-size: 12.5px;
  color: #64748b;
  margin-top: 2px;
}
.cp-forn-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.cp-forn-kpi {
  position: relative;
  background: linear-gradient(155deg, #ffffff 0%, #f6fbf8 100%);
  border: 1px solid rgba(14, 79, 59, 0.10);
  border-radius: 16px;
  padding: 20px 22px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(14, 79, 59, 0.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}
.cp-forn-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
  border-radius: 16px 16px 0 0;
  opacity: 0.9;
}
.cp-forn-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px -12px rgba(14, 79, 59, 0.18);
  border-color: rgba(14, 79, 59, 0.20);
}
.cp-forn-kpi--menor {
  border-color: rgba(22, 163, 74, 0.30);
  background: linear-gradient(155deg, #ffffff 0%, #ecfdf5 100%);
}
.cp-forn-kpi--menor::before {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}
.cp-forn-kpi--escolhida {
  border-color: rgba(14, 79, 59, 0.40);
  background: linear-gradient(155deg, #ffffff 0%, #d1fae5 100%);
  box-shadow: 0 4px 12px rgba(14, 79, 59, 0.15), 0 16px 40px -12px rgba(14, 79, 59, 0.25);
}
.cp-forn-kpi--escolhida::before {
  background: linear-gradient(90deg, #0E4F3B 0%, #137a4c 100%);
  height: 5px;
}
.cp-forn-kpi-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.cp-forn-kpi-badge--ok {
  background: #0E4F3B;
  color: #fff;
}
.cp-forn-kpi-badge--menor {
  background: #16a34a;
  color: #fff;
}
.cp-forn-kpi-head { margin-top: 6px; }
.cp-forn-kpi-nome {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding-right: 90px; /* espaço pro badge */
}
.cp-forn-kpi-meta {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  margin-top: 2px;
}
.cp-forn-kpi-total {
  font-size: 26px;
  font-weight: 800;
  color: #0E4F3B;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.cp-forn-kpi--escolhida .cp-forn-kpi-total { color: #0E4F3B; }
.cp-forn-kpi-cond {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
  padding: 6px 10px;
  background: rgba(14, 79, 59, 0.05);
  border-radius: 8px;
  border-left: 2px solid rgba(14, 79, 59, 0.20);
  min-height: 32px;
}
.cp-forn-kpi-acoes {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.cp-forn-kpi-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.cp-forn-kpi-btn:hover { transform: translateY(-1px); }
.cp-forn-kpi-btn--escolher {
  background: #0E4F3B;
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(14, 79, 59, 0.35);
}
.cp-forn-kpi-btn--escolher:hover {
  background: #137a4c;
  box-shadow: 0 6px 14px -3px rgba(14, 79, 59, 0.45);
}
.cp-forn-kpi-btn--recusar {
  background: #fff;
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.cp-forn-kpi-btn--recusar:hover {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.45);
}
.cp-forn-kpi-escolhida-info {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  background: rgba(14, 79, 59, 0.08);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #0E4F3B;
}

/* === Tabela horizontal Resumo por Fornecedor (troca cards por linhas) === */
.cp-forn-tabela-wrap {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid rgba(14, 79, 59, 0.10);
}
.cp-forn-tabela-head { margin-bottom: 14px; }
.cp-forn-tabela-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0E4F3B;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.cp-forn-tabela-sub {
  font-size: 12.5px;
  color: #64748b;
  margin-top: 2px;
}
.cp-forn-tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid rgba(14, 79, 59, 0.10);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(14, 79, 59, 0.10);
}
.cp-forn-tabela thead th {
  background: linear-gradient(135deg, rgba(14, 79, 59, 0.06) 0%, rgba(45, 141, 107, 0.04) 100%);
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0E4F3B;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  text-align: left;
  border-bottom: 2px solid rgba(14, 79, 59, 0.14);
  white-space: nowrap;
}
.cp-forn-tabela tbody td {
  padding: 12px 14px;
  border-top: 1px solid rgba(14, 79, 59, 0.06);
  font-size: 13px;
  color: #0f172a;
  vertical-align: middle;
}
.cp-forn-tabela tbody tr:hover { background: rgba(14, 79, 59, 0.03); }

.cp-forn-linha--menor td { background: rgba(22, 163, 74, 0.05); }
.cp-forn-linha--menor:hover td { background: rgba(22, 163, 74, 0.09); }
.cp-forn-linha--escolhida td {
  background: rgba(14, 79, 59, 0.06);
  border-top-color: rgba(14, 79, 59, 0.18);
}
.cp-forn-linha--escolhida:hover td { background: rgba(14, 79, 59, 0.10); }

.cp-forn-linha-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  margin-right: 6px;
  vertical-align: middle;
}
.cp-forn-linha-badge--ok    { background: #0E4F3B; color: #fff; }
.cp-forn-linha-badge--menor { background: #16a34a; color: #fff; }

.cp-forn-cel-nome { min-width: 180px; }
.cp-forn-cel-nome-btn {
  background: transparent;
  border: 0;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background .12s ease, color .12s ease;
}
.cp-forn-cel-nome-btn:hover {
  background: rgba(14, 79, 59, 0.10);
  color: #0E4F3B;
}
.cp-forn-cel-nome-moeda {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  margin-left: 32px; /* alinha com o botão do nome (após o badge) */
}
.cp-forn-cel-editable {
  cursor: pointer;
  transition: background .12s ease;
  position: relative;
  min-width: 100px;
}
.cp-forn-cel-editable:hover {
  background: rgba(14, 79, 59, 0.08) !important;
}
.cp-forn-cel-editable:hover::after {
  content: 'editar';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  color: #0E4F3B;
  opacity: 0.5;
}
.cp-forn-cel-editing { background: rgba(14, 79, 59, 0.08); padding: 4px 6px !important; }
.cp-forn-cel-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-forn-cel-unit  { font-size: 11px; color: #64748b; margin-left: 2px; }
.cp-forn-cel-vazio { color: #cbd5e1; font-style: italic; }
.cp-forn-cel-total {
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  color: #0E4F3B;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cp-forn-linha--menor .cp-forn-cel-total { color: #15803d; }
.cp-forn-cel-cond {
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
  min-width: 180px;
  max-width: 260px;
}
.cp-forn-cel-acoes {
  text-align: center;
  white-space: nowrap;
}
.cp-forn-btn-mini {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 2px;
  transition: transform .1s ease, background .12s ease;
}
.cp-forn-btn-mini:hover { transform: scale(1.08); }
.cp-forn-btn-mini--ok  { background: #0E4F3B; color: #fff; }
.cp-forn-btn-mini--ok:hover  { background: #137a4c; }
.cp-forn-btn-mini--x   { background: #fef2f2; color: #dc2626; border: 1px solid rgba(220,38,38,0.25); }
.cp-forn-btn-mini--x:hover   { background: #fee2e2; }
.cp-forn-btn-mini--renegociar {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.25);
}
.cp-forn-btn-mini--renegociar:hover {
  background: #fde68a;
  color: #92400e;
}
.cp-forn-oficial-badge {
  display: inline-block;
  padding: 5px 10px;
  background: #0E4F3B;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  border-radius: 999px;
}

/* Medidas + peso nas células de Observação do comparativo */
.cp-tabela-v2 .cp-cel-medidas,
.cp-tabela-v2 .cp-cel-peso {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  color: #0E4F3B;
  background: rgba(14, 79, 59, 0.07);
  border-radius: 6px;
  padding: 3px 7px;
  margin-top: 3px;
  margin-right: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cp-tabela-v2 .cp-cel-fotos {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  color: #b45309;
  background: rgba(234, 179, 8, 0.12);
  border-radius: 6px;
  padding: 3px 7px;
  margin-top: 3px;
  font-weight: 600;
  cursor: pointer;
}
.cp-tabela-v2 .cp-cel-fotos:hover { background: rgba(234, 179, 8, 0.22); }
.cp-tabela-v2 .cp-cel-unit { font-size: 12.5px; }
.cp-tabela-v2 .cp-cel-total { font-size: 13px; font-weight: 800; }
.cp-tabela-v2 .cp-cel-valor { font-variant-numeric: tabular-nums; font-weight: 700; }
.cp-tabela-v2 .cp-cel-total .cp-cel-valor { color: var(--og-green); }
.cp-tabela-v2 .cp-cel-sub { font-size: 10px; color: var(--og-ink-3); font-weight: 600; margin-top: 2px; }
.cp-tabela-v2 .cp-cel-extras { margin-top: 6px; text-align: left; }
.cp-tabela-v2 .cp-cel-menor { background: rgba(22,163,74,0.08); }
.cp-tabela-v2 .cp-cel-menor .cp-cel-valor { color: #15803d; }

/* === Histórico + Target === */
.cp-tabela-v2 td.cp-col-hist {
  padding: 10px 12px;
  font-size: 11px;
  border-bottom: 1px solid var(--og-hairline-soft);
  background: rgba(14,79,59,0.03);
  vertical-align: middle;
  min-width: 130px;
}
.cp-hist-line {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px;
  padding: 1px 0;
}
.cp-hist-line span:first-child {
  color: var(--og-ink-3);
  font-weight: 700; text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.05em;
}
.cp-hist-line b, .cp-hist-line span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--og-ink);
  font-weight: 700;
}
.cp-hist-line.cp-hist-ultimo span:last-child i {
  font-style: normal; font-size: 9.5px; color: var(--og-ink-3); font-weight: 500;
}
.cp-hist-amostras {
  font-size: 9.5px; color: var(--og-ink-3);
  margin-top: 4px;
  text-align: right;
  font-style: italic;
}
.cp-hist-vazio {
  font-size: 11px; color: var(--og-ink-3);
  text-align: center; padding: 8px 0;
  font-style: italic;
}
.cp-tabela-v2 td.cp-col-target {
  padding: 10px 12px;
  border-bottom: 1px solid var(--og-hairline-soft);
  background: rgba(245,210,74,0.06);
  vertical-align: middle;
  min-width: 170px;
}
.cp-target-sel {
  width: 100%;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px; font-family: inherit;
  color: var(--og-ink);
  cursor: pointer;
}
.cp-target-sel:focus { outline: none; border-color: var(--og-green); box-shadow: 0 0 0 3px rgba(15,79,59,0.10); }
.cp-target-manual {
  width: 100%;
  margin-top: 4px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px; font-family: inherit; font-weight: 700;
  color: var(--og-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cp-target-manual:focus { outline: none; border-color: var(--og-green); box-shadow: 0 0 0 3px rgba(15,79,59,0.10); }
.cp-target-atual {
  margin-top: 5px;
  text-align: right;
  font-size: 12.5px; font-weight: 800;
  color: var(--og-green);
  font-variant-numeric: tabular-nums;
}

/* Coloracao da celula do fornecedor vs target */
.cp-tabela-v2 .cp-cel-ok    { background: rgba(22,163,74,0.10); }
.cp-tabela-v2 .cp-cel-ok .cp-cel-valor   { color: #15803d; }
.cp-tabela-v2 .cp-cel-warn  { background: rgba(202,138,4,0.10); }
.cp-tabela-v2 .cp-cel-warn .cp-cel-valor { color: #92400e; }
.cp-tabela-v2 .cp-cel-bad   { background: rgba(220,38,38,0.10); }
.cp-tabela-v2 .cp-cel-bad .cp-cel-valor  { color: #b91c1c; }

.cp-cel-diff {
  font-size: 10px; font-weight: 700;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.cp-diff-ok  { color: #15803d; }
.cp-diff-bad { color: #b91c1c; }

/* Legenda colorida */
.cp-leg-ok   { background: rgba(22,163,74,0.20)  !important; border-color: #16a34a !important; }
.cp-leg-warn { background: rgba(202,138,4,0.20)  !important; border-color: #ca8a04 !important; }
.cp-leg-bad  { background: rgba(220,38,38,0.20)  !important; border-color: #dc2626 !important; }

/* === Propostas Recebidas — legado (modal full-screen, og-glass) === */
.cp-propostas-shell {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 20px;
  width: 100%; max-width: 1400px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.cp-propostas-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  background: var(--og-glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--og-hairline-soft);
}
.cp-propostas-head-l { display: flex; align-items: center; gap: 12px; }
.cp-propostas-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,79,59,0.10);
  color: var(--og-green);
  border-radius: 12px;
  border: 1px solid rgba(15,79,59,0.18);
}
.cp-propostas-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--og-ink); letter-spacing: -0.2px; }
.cp-propostas-sub { font-size: 11.5px; color: var(--og-ink-3); margin-top: 3px; line-height: 1.4; }
.cp-propostas-x {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--og-hairline-soft);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--og-ink); cursor: pointer;
  transition: background .15s;
}
.cp-propostas-x:hover { background: rgba(255,255,255,0.95); border-color: var(--og-green); color: var(--og-green); }
.cp-propostas-body {
  padding: 20px 24px;
  overflow-y: auto; flex: 1;
  background: var(--og-bg-0);
}
.cp-propostas-foot {
  padding: 16px 24px;
  background: var(--og-glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--og-hairline-soft);
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.cp-bloco { margin-bottom: 20px; }
.cp-bloco-titulo {
  font-size: 10.5px; text-transform: uppercase;
  color: var(--og-ink-3); font-weight: 800; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.cp-convidado {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 10px; align-items: center;
  background: var(--og-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.cp-convidado-info strong { color: var(--og-ink); font-weight: 700; }
.cp-convidado-email { color: var(--og-ink-3); font-size: 11px; margin-top: 2px; }
.cp-status {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cp-status-ok   { background: rgba(22,163,74,0.14); color: #15803d; border: 1px solid rgba(22,163,74,0.28); }
.cp-status-wait { background: rgba(202,138,4,0.14); color: #92400e; border: 1px solid rgba(202,138,4,0.28); }
.cp-status-err  { background: rgba(220,38,38,0.14); color: #b91c1c; border: 1px solid rgba(220,38,38,0.28); }
.cp-empty {
  padding: 30px; text-align: center;
  color: var(--og-ink-3); font-size: 12.5px;
  background: var(--og-glass);
  border: 1px dashed var(--og-hairline);
  border-radius: 12px;
}
.cp-comp-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.cp-tabela-wrap {
  overflow-x: auto;
  background: var(--og-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.cp-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cp-tabela thead { background: rgba(14,79,59,0.04); }
.cp-th-item {
  padding: 12px 14px; text-align: left;
  font-size: 11px; text-transform: uppercase;
  color: var(--og-ink-3); font-weight: 800; letter-spacing: 0.05em;
  min-width: 220px;
  border-bottom: 1px solid var(--og-hairline-soft);
}
.cp-th-forn {
  padding: 10px 12px; text-align: center;
  vertical-align: middle;
  min-width: 220px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,250,245,0.92));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid var(--og-hairline-soft);
  border-bottom: 2px solid var(--og-green);
  position: sticky;
  top: 0; z-index: 11;
}
.cp-th-forn.cp-col-escolhida {
  border-bottom-color: #15803d;
  background: linear-gradient(180deg, rgba(22,163,74,0.10), rgba(22,163,74,0.04));
}
.cp-th-forn.cp-col-menor { border-bottom-color: #dc2626; }

/* Versao slim do header do fornecedor — so o nome (resumo vai no rodape) */
.cp-th-forn--slim {
  padding: 8px 12px;
  min-width: 200px;
}

/* Campo de busca dentro do comparativo (filtra linhas por codigo/desc/obs) */
.cp-busca-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(14, 79, 59, 0.10);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cp-busca-wrap:focus-within {
  border-color: #0E4F3B;
  box-shadow: 0 0 0 3px rgba(14, 79, 59, 0.10);
}
.cp-busca-icon { color: #94a3b8; flex-shrink: 0; }
.cp-busca-wrap:focus-within .cp-busca-icon { color: #0E4F3B; }
.cp-busca-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: #0f172a;
  font-family: 'Manrope', system-ui, sans-serif;
  min-width: 0;
}
.cp-busca-input::placeholder { color: #94a3b8; }
.cp-busca-count {
  font-size: 11.5px;
  color: #0E4F3B;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(14, 79, 59, 0.08);
  white-space: nowrap;
}
.cp-busca-count:empty { display: none; }

/* Botão + dropdown Exportar (substitui os dois botões PDF/Excel separados) */
.cp-export-btn {
  display: inline-flex;
  align-items: center;
}
#cpExportarMenu {
  position: fixed;
  z-index: 10050;
  background: #fff;
  border: 1px solid rgba(14, 79, 59, 0.10);
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.18);
  min-width: 140px;
  padding: 6px;
  font-family: 'Manrope', system-ui, sans-serif;
}
#cpExportarMenu .cp-export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
#cpExportarMenu .cp-export-item:hover {
  background: rgba(14, 79, 59, 0.08);
  color: #0E4F3B;
}
#cpExportarMenu .cp-export-item svg { color: #0E4F3B; flex-shrink: 0; }

/* Modal Reabrir Cotação (substitui confirm() nativo) */
.cp-reabrir-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: cpReabrirFadeIn .15s ease;
}
@keyframes cpReabrirFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cp-reabrir-modal {
  background: linear-gradient(155deg, #ffffff 0%, #f6fbf8 100%);
  border: 1px solid rgba(14, 79, 59, 0.10);
  border-radius: 18px;
  padding: 26px 28px 22px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35);
  text-align: center;
  animation: cpReabrirSlideIn .18s cubic-bezier(.4,1.2,.4,1);
}
@keyframes cpReabrirSlideIn { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.cp-reabrir-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(14, 79, 59, 0.12) 0%, rgba(45, 141, 107, 0.08) 100%);
  color: #0E4F3B;
}
.cp-reabrir-titulo {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.cp-reabrir-texto {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 22px;
}
.cp-reabrir-texto strong { color: #0E4F3B; font-weight: 700; }
.cp-reabrir-acoes {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.cp-reabrir-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  line-height: 1;
}
.cp-reabrir-btn--cancel {
  background: #fff;
  color: #475569;
  border: 1px solid rgba(14, 79, 59, 0.16);
}
.cp-reabrir-btn--cancel:hover {
  background: #f8fafc;
  border-color: rgba(14, 79, 59, 0.30);
  color: #0E4F3B;
}
.cp-reabrir-btn--ok {
  background: #0E4F3B;
  color: #fff;
  border: 1px solid #0E4F3B;
  box-shadow: 0 4px 10px -3px rgba(14, 79, 59, 0.35);
}
.cp-reabrir-btn--ok:hover {
  background: #137a4c;
  border-color: #137a4c;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(14, 79, 59, 0.45);
}
.cp-reabrir-btn--ok:disabled {
  background: #94a3b8;
  border-color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.cp-forn-nome-slim {
  font-weight: 800;
  font-size: 13px;
  color: var(--og-ink, #0f172a);
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: uppercase;
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
}
.cp-forn-nome {
  font-weight: 800; font-size: 12.5px;
  color: var(--og-ink); letter-spacing: -0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cp-badge-escolhida {
  display: inline-block;
  background-color: #15803d;
  background-image: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff !important;
  font-size: 8.5px; font-weight: 900; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 6px;
  margin-left: 4px;
  box-shadow: 0 3px 8px -2px rgba(22,163,74,0.5);
  vertical-align: middle;
}
.cp-forn-meta {
  font-size: 10px; color: var(--og-ink-3);
  margin-top: 2px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cp-forn-total {
  font-weight: 900; color: var(--og-green);
  font-size: 17px; margin-top: 4px;
  font-family: 'Bricolage Grotesque', serif;
  letter-spacing: -0.3px;
}
.cp-col-menor .cp-forn-total { color: #dc2626; }
.cp-forn-cond {
  font-size: 10px; color: var(--og-ink-3);
  margin-top: 2px; font-style: italic;
  max-width: 220px; margin-left: auto; margin-right: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-forn-acoes { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.og-btn--xs { padding: 4px 9px !important; font-size: 10.5px !important; border-radius: 7px !important; }
.og-btn--sm { padding: 6px 12px !important; font-size: 11px !important; }
.cp-cel {
  padding: 12px 10px; text-align: center; font-size: 12.5px;
  border-bottom: 1px solid var(--og-hairline-soft);
  border-left: 1px solid var(--og-hairline-soft);
  color: var(--og-ink);
}
.cp-cel-vazia { color: var(--og-ink-3); font-size: 11px; }
.cp-cel-menor {
  background: rgba(22,163,74,0.10);
  color: #15803d;
  font-weight: 800;
}
.cp-cel-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-cel-sub { font-size: 10.5px; color: var(--og-ink-3); font-weight: 500; margin-top: 2px; }
.cp-cel-obs {
  font-size: 10.5px; color: #475569;
  margin-top: 6px; font-style: italic; text-align: left;
  background: rgba(245,210,74,0.14);
  border-left: 3px solid #f5d24a;
  padding: 5px 8px; border-radius: 4px;
}
.cp-cel-fotos {
  font-size: 10.5px; color: var(--og-green);
  margin-top: 6px; cursor: pointer; font-weight: 700;
  text-decoration: underline; text-decoration-color: rgba(15,79,59,0.3);
}
.cp-cel-fotos:hover { text-decoration-color: var(--og-green); }
.cp-cel-item {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--og-hairline-soft);
}
.cp-cel-codigo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: var(--og-green); font-size: 12.5px; }
.cp-cel-desc { font-size: 11.5px; color: var(--og-ink); margin-top: 3px; }
.cp-cel-qtd { font-size: 10.5px; color: var(--og-ink-3); margin-top: 2px; }
.cp-legenda {
  margin-top: 10px; font-size: 11px;
  color: var(--og-ink-3); display: flex; align-items: center;
}
.cp-legenda-swatch {
  display: inline-block; width: 14px; height: 14px;
  background: rgba(22,163,74,0.20);
  border: 1px solid #16a34a;
  vertical-align: middle; margin-right: 6px;
  border-radius: 4px;
}

/* Badge "Nova cotacao" na lista de Pedidos de Compras */
.ped-prop-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
  font-family: inherit;
}
.ped-prop-badge-novo {
  background-color: #d97706;
  background-image: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff !important;
  box-shadow: 0 4px 10px -3px rgba(245,158,11,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  animation: pedPropPulse 1.6s ease-in-out infinite;
}
.ped-prop-badge-visto {
  background: rgba(15,79,59,0.10);
  color: var(--og-green);
  border: 1px solid rgba(15,79,59,0.18);
}
@keyframes pedPropPulse {
  0%, 100% { box-shadow: 0 4px 10px -3px rgba(245,158,11,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
  50%      { box-shadow: 0 6px 16px -2px rgba(245,158,11,0.75), inset 0 1px 0 rgba(255,255,255,0.4); }
}
.og-btn--danger {
  background: color-mix(in srgb, var(--og-red) 18%, transparent);
  color: var(--og-red);
  border-color: color-mix(in srgb, var(--og-red) 32%, transparent);
}
.og-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--og-ink-3);
}
.og-btn--ghost:hover { background: var(--og-hairline-soft); color: var(--og-ink); }

/* =========================================================
   GLOBAL SELECT/OPTION — Liquid Glass override
   Aplica em TODOS os <select> nativos pra eliminar o background
   branco hardcoded que muitos JS templates colocam inline.
   Usa !important pra vencer styles inline.
   Opt-out: adicione classe .raw-select pra preservar o estilo nativo.
   ========================================================= */
select:not(.raw-select):not([multiple]) {
  background: var(--og-glass-deep) !important;
  color: var(--og-ink) !important;
  border: 1px solid var(--og-hairline-soft) !important;
  border-radius: 10px !important;
  padding: 7px 28px 7px 11px !important;
  font: inherit;
  font-size: 12.5px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.4"><polyline points="6 9 12 15 18 9"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-color: var(--og-glass-deep) !important;
  transition: background .15s, border-color .15s;
}
:root[data-theme="dark"] select:not(.raw-select):not([multiple]) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%23aeb9d6" stroke-width="2.4"><polyline points="6 9 12 15 18 9"/></svg>') !important;
}
select:not(.raw-select):not([multiple]):hover {
  border-color: var(--og-hairline) !important;
  background-color: var(--og-glass-strong) !important;
}
select:not(.raw-select):not([multiple]):focus {
  border-color: var(--og-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 18%, transparent);
}
/* Options dentro: mantém só uma cor neutra (browsers só respeitam algumas props no <option>) */
select:not(.raw-select) option {
  background: var(--og-bg-1);
  color: var(--og-ink);
  padding: 6px;
}
/* Multi-select grande (não-dropdown) também herda paleta */
select[multiple]:not(.raw-select) {
  background: var(--og-glass-deep) !important;
  color: var(--og-ink) !important;
  border: 1px solid var(--og-hairline-soft) !important;
  border-radius: 10px !important;
}
.wa-tools-bar .tbtn {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--og-ink-2); transition: .16s;
  position: relative;
  border: 0; background: transparent;
}
.wa-tools-bar .tbtn:hover { background: var(--og-glass-strong); color: var(--og-ink); }
.wa-tools-bar .tbtn svg { width: 20px; height: 20px; }
.wa-tools-bar .tsep {
  width: 24px; height: 1px;
  background: var(--og-hairline-soft);
  margin: 4px 0;
}
.wa-tools-bar .tbtn::after {
  content: attr(data-tip);
  position: absolute; right: 52px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(8,12,26,.96); border: 1px solid var(--og-hairline);
  color: #f4f7ff; font-size: 12px; font-weight: 500;
  padding: 6px 11px; border-radius: 9px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: .15s; box-shadow: var(--og-shadow); z-index: 20;
}
.wa-tools-bar .tbtn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Cores de avatar — paleta vibrante */
.og-av-amber  { background: linear-gradient(145deg,#f9893a,#c9560f); }
.og-av-teal   { background: linear-gradient(145deg,#37d6c0,#179486); }
.og-av-violet { background: linear-gradient(145deg,#9b7bf0,#6a45c4); }
.og-av-red    { background: linear-gradient(145deg,#ff7a7a,#cc3f3f); }
.og-av-blue   { background: linear-gradient(145deg,#5a78c8,#374a8f); }
.og-av-pink   { background: linear-gradient(145deg,#f472b6,#db2777); }
.og-av-green  { background: linear-gradient(145deg,#34d399,#059669); }

/* Badges (versão glass) */
.og-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 9px;
  background: var(--og-hairline); color: var(--og-ink-2);
}
.og-badge .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.og-badge.green { background: rgba(61,220,138,.14); color: var(--og-green); }
.og-badge.amber { background: rgba(249,137,58,.16); color: var(--og-amber-2); }
.og-badge.blue  { background: rgba(79,141,255,.16); color: var(--og-blue); }
.og-badge.gray  { background: var(--og-hairline); color: var(--og-ink-3); }

/* Responsivo
   Estratégia:
   - >=1600px: layout cheio com 4 colunas, ctx visível inline
   - 1281-1599px: colunas mais magras, ctx ainda inline
   - 1101-1280px: ctx esconde (vira drawer overlay), lista + chat + tools
   - 769-1100px: ctx + lista escondem (ambos viram drawer), só chat + tools
   - <=768px: full mobile, single-pane (lista OU chat, com back button)
*/

/* Botão de back e botão de abrir perfil — só aparecem em viewports apertados */
.wa-back-btn, .wa-perfil-btn, .wa-list-btn {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: 11px; cursor: pointer;
  color: var(--og-ink-2); flex: none;
}
.wa-back-btn:hover, .wa-perfil-btn:hover, .wa-list-btn:hover {
  background: var(--og-glass-strong); color: var(--og-ink);
}
.wa-back-btn svg, .wa-perfil-btn svg, .wa-list-btn svg { width: 20px; height: 20px; }

/* Drawer/sheet do perfil (wa-ctx) quando esconde inline */
.wa-ctx-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(2px);
  z-index: 1199;
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.wa-ctx-backdrop.open { opacity: 1; pointer-events: auto; }

/* Faixa intermediária: 1281-1599px — colunas mais magras */
@media (max-width: 1599px) {
  .wa-shell {
    grid-template-columns: minmax(180px, 220px) minmax(240px, 280px) minmax(0, 1fr) 56px;
    gap: 9px;
  }
  .wa-shell.tools-expanded {
    grid-template-columns: minmax(180px, 220px) minmax(240px, 280px) minmax(0, 1fr) minmax(280px, 340px) 56px;
  }
}

/* 1101-1280px — esconde ctx inline, mostra como drawer */
@media (max-width: 1280px) {
  .wa-shell {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) 56px;
    gap: 8px;
  }
  .wa-shell.tools-expanded {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(280px, 340px) 56px;
  }
  .wa-ctx {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 340px; max-width: 92vw;
    height: 100dvh !important; max-height: 100dvh !important;
    transform: translateX(100%);
    transition: transform .24s ease;
    z-index: 1200;
    border-radius: 0;
  }
  .wa-ctx.open { transform: translateX(0); }
  .wa-perfil-btn { display: inline-flex; }
}

/* 769-1100px — esconde lista inline também, vira drawer à esquerda */
@media (max-width: 1100px) {
  .wa-shell {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
  }
  .wa-shell.tools-expanded {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) 52px;
  }
  .wa-list {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 300px; max-width: 88vw;
    height: 100dvh !important; max-height: 100dvh !important;
    transform: translateX(-100%);
    transition: transform .24s ease;
    z-index: 1200;
    border-radius: 0;
  }
  .wa-list.open { transform: translateX(0); }
  .wa-list-btn { display: inline-flex; }
}

/* Mobile <=768px — single-pane (lista OU chat) */
@media (max-width: 768px) {
  .wa-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    height: calc(100dvh - 110px);
    max-height: calc(100dvh - 110px);
  }
  .wa-shell.tools-expanded {
    grid-template-columns: minmax(0, 1fr);
  }
  .wa-shell .wa-tools-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    width: 100%; height: 52px;
    flex-direction: row; justify-content: space-around;
    padding: 6px 8px;
    z-index: 50;
    border-radius: 0;
  }
  .wa-shell .wa-tools-panel {
    position: fixed; inset: 0; z-index: 60;
    border-radius: 0;
  }
  /* Perfil sempre como drawer/full-screen no mobile */
  .wa-ctx { width: 100vw; max-width: 100vw; }
  /* Pane="lista": esconde chat, lista ocupa toda a área */
  .wa-shell[data-pane="lista"] .wa-chat { display: none; }
  .wa-shell[data-pane="lista"] .wa-list {
    position: relative; left: auto; top: auto; bottom: auto;
    transform: none;
    width: 100%; max-width: 100%;
    height: 100% !important; max-height: 100% !important;
    z-index: 1;
  }
  /* Pane="chat": esconde lista inline (mas ainda pode abrir via drawer) */
  .wa-shell[data-pane="chat"] .wa-list {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 100vw; max-width: 100vw;
    height: 100dvh !important; max-height: 100dvh !important;
    transform: translateX(-100%);
    z-index: 1200;
  }
  .wa-shell[data-pane="chat"] .wa-list.open { transform: translateX(0); }
  /* Back button visível no mobile sempre que tá no chat */
  .wa-shell[data-pane="chat"] .wa-back-btn { display: inline-flex; }
  .chat-head { padding: 10px 12px; }
  .chat-body { padding: 12px 14px 8px; }
}

/* ======= Light theme fallback pras mesmas classes mk-d-* (.mk-light wrapper) =======
   Permite o usuário usar o mesmo HTML em ambos os temas. Default = light. */
.mk-light {
  background: var(--bg, #f8fafc);
  color: var(--ink, #1e293b);
  border-radius: 18px;
  padding: 22px 26px;
  min-height: calc(100vh - 100px);
}
.mk-light .mk-d-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 0 2px 18px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  margin-bottom: 18px;
}
.mk-light .mk-d-titulo {
  font: 700 22px/1.1 -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink, #1e293b);
  margin: 0 0 4px;
}
.mk-light .mk-d-sub {
  font-size: 12.5px; color: var(--muted, #64748b); font-weight: 500;
}
.mk-light .mk-d-sub strong { color: var(--ink, #1e293b); font-weight: 700; }
.mk-light .mk-d-actions { display: flex; align-items: center; gap: 8px; }
.mk-light .mk-d-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 11px;
  font: 600 12.5px -apple-system, system-ui, sans-serif;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  color: var(--ink, #1e293b);
  cursor: pointer;
  transition: background 160ms cubic-bezier(.22,1,.36,1), border-color 160ms;
  font-family: inherit;
}
.mk-light .mk-d-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.mk-light .mk-d-btn--primary {
  background: linear-gradient(135deg, #0E4F3B 0%, #1d6b40 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px -4px rgba(14,79,59,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  font-weight: 700;
}
.mk-light .mk-d-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 9px;
  padding: 2px;
}
.mk-light .mk-d-toggle button {
  background: transparent; color: var(--muted, #64748b);
  border: 0; padding: 6px 12px;
  border-radius: 7px;
  font: 600 11.5px -apple-system, system-ui, sans-serif;
  cursor: pointer;
}
.mk-light .mk-d-toggle button.ativo { background: #0E4F3B; color: #fff; }
.mk-light .mk-d-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.mk-light .mk-d-col { flex: 1; min-width: 280px; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.mk-light .mk-d-col-head { display: flex; align-items: center; gap: 8px; padding: 0 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.mk-light .mk-d-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mk-light .mk-d-col-nome { flex: 1; font: 700 13px -apple-system,system-ui,sans-serif; color: var(--ink, #1e293b); }
.mk-light .mk-d-col-cnt { font: 700 11px ui-monospace,monospace; color: var(--muted, #64748b); background: rgba(0,0,0,0.05); padding: 2px 9px; border-radius: 99px; min-width: 22px; text-align: center; }
.mk-light .mk-d-tagbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; background: rgba(255,255,255,0.6); border: 1px solid var(--line,#e2e8f0); border-radius: 12px; margin-bottom: 14px; }
.mk-light .mk-d-tagbar-lbl { font-size: 10.5px; font-weight: 700; color: var(--muted,#64748b); text-transform: uppercase; letter-spacing: 0.06em; }
.mk-light .mk-d-tag-pill { padding: 4px 11px; border-radius: 99px; font: 700 11px -apple-system,system-ui,sans-serif; cursor: pointer; border: 1px solid; }

/* Filter chips bar (tags) — versão escura */
.mk-dark .mk-d-tagbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--mkd-border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.mk-dark .mk-d-tagbar-lbl {
  font-size: 10.5px; font-weight: 700;
  color: var(--mkd-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 4px;
}
.mk-dark .mk-d-tag-pill {
  padding: 4px 11px; border-radius: 99px;
  font: 700 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 160ms;
  border: 1px solid;
}
.mk-dark .mk-d-tag-pill:hover { transform: scale(1.04); }

/* =========================================================
   ORIENTE GLASS — Meu Kanban (.kn-wrap)
   Wrapper único que usa as variáveis og-* (light default, dark via [data-theme="dark"])
   ========================================================= */
.kn-wrap {
  background: transparent;
  color: var(--og-ink);
  border-radius: 0;
  padding: 22px 28px;
  min-height: calc(100vh - 100px);
  border: 0;
  box-shadow: none;
}
/* Pinta a area da pagina meu-kanban com o cream-green do template — assim os
   KPI cards e deal cards brancos destacam contra o fundo. */
#page-meu-kanban {
  background: #f3f6f4;
}

/* Header */
.kn-wrap .kn-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 0 0 20px;
  margin-bottom: 0;
  border-bottom: 0;
}
.kn-wrap .kn-breadcrumb {
  font: 500 12px -apple-system, system-ui, sans-serif;
  color: var(--og-ink-3);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.kn-wrap .kn-breadcrumb strong { color: var(--og-ink-2); font-weight: 600; }
.kn-wrap .kn-titulo {
  font: 800 26px/1.1 -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--og-ink);
  margin: 0;
}
.kn-wrap .kn-sub { font-size: 12.5px; color: var(--og-ink-2); font-weight: 500; }
.kn-wrap .kn-sub strong { color: var(--og-ink); font-weight: 700; }

/* KPI cards — 4 cards brancos com icone pill + borda lateral colorida */
.kn-wrap .kn-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5ª: "Sem cadastro" (21/09) */
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1400px) {
  .kn-wrap .kn-kpis { grid-template-columns: repeat(3, 1fr); }
}
/* Seletor de período dos KPIs — agora vive no popover do botão de período da barra
   de busca (kn-filtro-tags-btn#mkFiltroPeriodoBtn); estas classes só estilizam o
   conteúdo do popover (pílulas de preset + datas custom). */
.kn-kpi-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--og-ink-3);
  margin-bottom: 10px;
}
.kn-kpi-label strong { color: var(--og-ink-2); font-weight: 800; text-transform: none; letter-spacing: 0; }
/* Sem prefixo .kn-wrap: o popover é portado pra document.body (fora do .kn-wrap),
   mesma razão do bloco ".kn-btn GLOBAL" logo abaixo — bug 21/09 (Pablo: "não ficou
   legal"): as pílulas saíam sem nenhum estilo por causa do escopo .kn-wrap perdido. */
.kn-kpi-per-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.kn-kpi-per-btn {
  border: 1px solid var(--og-hairline-soft); background: #fff; color: var(--og-ink-2);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.kn-kpi-per-btn:hover { border-color: var(--og-green, #0e7c66); color: var(--og-green, #0e7c66); }
.kn-kpi-per-btn.on { background: var(--og-green, #0e7c66); border-color: var(--og-green, #0e7c66); color: #fff; }
.kn-kpi-per-datas { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--og-ink-3); }
.kn-kpi-per-datas input[type=date] {
  font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--og-hairline-soft);
  border-radius: 8px; background: #fff; color: var(--og-ink);
}
@media (max-width: 768px) {
  .kn-wrap .kn-kpis { grid-template-columns: repeat(2, 1fr); }
}
.kn-wrap .kn-kpi {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  background: #ffffff;
  border: 1px solid var(--og-hairline-soft);
  border-radius: 16px;
  padding: 16px 18px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms cubic-bezier(.22,1,.36,1);
  box-shadow: 0 1px 2px rgba(15, 23, 28, 0.05);
}
/* Sheen sutil no topo + lavagem em degradê da cor do KPI — profundidade sem ficar pesado */
.kn-wrap .kn-kpi::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, var(--kpi-tint, transparent) 0%, transparent 60%);
  opacity: .6;
}
.kn-wrap .kn-kpi::after {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
}
.kn-wrap .kn-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px rgba(15, 23, 28, 0.20);
}
.kn-wrap .kn-kpi-ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--kpi-c, var(--og-green));
  color: #fff;
  box-shadow: 0 5px 12px -3px var(--kpi-c, var(--og-green));
  flex-shrink: 0;
}
.kn-wrap .kn-kpi-ico svg { width: 20px; height: 20px; }
.kn-wrap .kn-kpi-body { flex: 1; min-width: 0; }
.kn-wrap .kn-kpi-head {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--og-ink-3);
  margin-bottom: 4px;
}
.kn-wrap .kn-kpi-valor {
  font-family: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--og-ink);
  letter-spacing: -0.4px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kn-wrap .kn-kpi-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--og-ink-3);
  font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
/* Variantes de cor — 1 variável (--kpi-c) alimenta ícone, sombra e a lavagem de fundo */
.kn-wrap .kn-kpi--green     { --kpi-c: #15803d; --kpi-tint: #dcfce7; }
.kn-wrap .kn-kpi--blue      { --kpi-c: #2563eb; --kpi-tint: #dbeafe; }
.kn-wrap .kn-kpi--amber     { --kpi-c: #b45309; --kpi-tint: #fef3c7; }
.kn-wrap .kn-kpi--violet    { --kpi-c: #6d28d9; --kpi-tint: #ede9fe; }
.kn-wrap .kn-kpi--neutral   { --kpi-c: #475569; --kpi-tint: #f1f5f9; }
.kn-wrap .kn-kpi--red       { --kpi-c: #dc2626; --kpi-tint: #fee2e2; }
/* Pílula de tarefas atrasadas */
.kn-wrap .kn-kpi-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: color-mix(in srgb, var(--og-red) 14%, transparent);
  color: var(--og-red);
  border: 1px solid color-mix(in srgb, var(--og-red) 30%, transparent);
  margin-left: 6px;
  vertical-align: middle;
}

.kn-wrap .kn-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kn-wrap .kn-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px;
  font: 600 12.5px -apple-system, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2);
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms, transform 160ms, box-shadow 160ms;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 28, 0.04), 0 8px 18px -14px rgba(15, 23, 28, 0.16);
}
.kn-wrap .kn-btn:hover {
  background: #fafdfb;
  border-color: var(--og-hairline);
  color: var(--og-ink);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 28, 0.05), 0 10px 22px -12px rgba(15, 23, 28, 0.22);
}
.kn-wrap .kn-btn--primary {
  background-color: #15803d;
  background-image: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(22, 163, 74, 0.50), inset 0 1px 0 rgba(255,255,255,0.20);
  font-weight: 700;
}
.kn-wrap .kn-btn--primary:hover {
  transform: translateY(-1px);
  background-image: linear-gradient(135deg, #16a34a 0%, #136b34 100%);
  box-shadow: 0 12px 26px -8px rgba(22, 163, 74, 0.60), inset 0 1px 0 rgba(255,255,255,0.24);
}

/* .kn-btn GLOBAL — os scoped acima (.kn-wrap) atendem o Meu Kanban; estes cobrem
   modais/sub-telas FORA do .kn-wrap (ex.: modais appendados no document.body, como
   os convertidos pra og.glass). Theme-aware via tokens --og-*. */
.kn-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px;
  font: 600 12.5px -apple-system, system-ui, sans-serif; font-family: inherit;
  background: var(--og-surface); border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink-2); cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms, transform 160ms;
  box-shadow: 0 1px 2px rgba(15, 23, 28, 0.04);
}
.kn-btn:hover { background: var(--og-glass); border-color: var(--og-hairline); color: var(--og-ink); }
.kn-btn--primary {
  background-color: #15803d;
  background-image: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff !important; border-color: transparent; font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(22, 163, 74, 0.50), inset 0 1px 0 rgba(255,255,255,0.20);
}
.kn-btn--primary:hover { transform: translateY(-1px); background-image: linear-gradient(135deg, #16a34a 0%, #136b34 100%); }

/* ============== Modal Nova Oportunidade (Meu Kanban) ============== */
.mk-novaop-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.mk-novaop-card {
  background: #fff;
  border-radius: 14px;
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.mk-novaop-header {
  background: linear-gradient(135deg, #0E4F3B, #1d6b40);
  color: #fff; padding: 14px 20px;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.mk-novaop-close {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  width: 30px; height: 30px;
  border-radius: 6px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.mk-novaop-close:hover { background: rgba(255, 255, 255, 0.28); }
.mk-novaop-body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.mk-novaop-field { display: flex; flex-direction: column; }
.mk-novaop-label {
  font-size: 10.5px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.mk-novaop-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #0f172a;
  transition: border-color 120ms, box-shadow 120ms;
}
.mk-novaop-input:focus {
  outline: none;
  border-color: #0E4F3B;
  box-shadow: 0 0 0 3px rgba(14, 79, 59, 0.12);
}
.mk-novaop-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mk-novaop-autocomplete {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  margin-top: 3px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.mk-novaop-ac-item {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 100ms;
}
.mk-novaop-ac-item:last-child { border-bottom: 0; }
.mk-novaop-ac-item:hover { background: #f0fdf4; }
.mk-novaop-ac-empty {
  padding: 12px;
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}
.mk-novaop-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mk-novaop-tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.mk-novaop-tag-chip:hover { background: #f1f5f9; border-color: #cbd5e1; }
.mk-novaop-tag-chip.selecionada {
  background: #ecfdf5;
  border-color: #0E4F3B;
  color: #0E4F3B;
}
.mk-novaop-tag-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
}
.mk-novaop-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}
.mk-novaop-btn-sec {
  background: #fff;
  color: #475569;
  border: 1px solid var(--line, #e2e8f0);
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms;
}
.mk-novaop-btn-sec:hover { background: #f8fafc; }
.mk-novaop-btn-pri {
  background: linear-gradient(135deg, #0E4F3B, #1d6b40);
  color: #fff;
  border: 0;
  padding: 9px 22px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
}
.mk-novaop-btn-pri:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(14, 79, 59, 0.4); }
.mk-novaop-btn-pri:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Mobile: modal full-width */
@media (max-width: 640px) {
  .mk-novaop-overlay { padding: 0; align-items: stretch; }
  .mk-novaop-card {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .mk-novaop-grid-2 { grid-template-columns: 1fr; }
}

/* Toggle Kanban/Lista/Calendario/Equipe — pedido do Pablo 08/09 "mais premium":
   pílula ativa agora fica branca e "levantada" (sombra) sobre uma trilha
   cinza-clara, no lugar do destaque cinza chapado de antes. */
.kn-wrap .kn-toggle {
  display: inline-flex;
  background: #f1f5f4;
  border: 1px solid var(--og-hairline-soft);
  border-radius: 11px;
  padding: 3px;
  box-shadow: 0 1px 2px rgba(15, 23, 28, 0.04);
}
.kn-wrap .kn-toggle button {
  background: transparent; color: var(--og-ink-3);
  border: 0; padding: 7px 16px;
  border-radius: 8px;
  font: 600 12px -apple-system, system-ui, sans-serif;
  cursor: pointer;
  transition: background 200ms, color 200ms, box-shadow 200ms;
}
.kn-wrap .kn-toggle button:hover:not(.ativo) {
  color: var(--og-ink);
}
.kn-wrap .kn-toggle button.ativo {
  background: #ffffff;
  color: var(--og-green);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(15, 23, 28, 0.10), 0 1px 1px rgba(15, 23, 28, 0.04);
}

/* Tagbar */
.kn-wrap .kn-tagbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  padding: 10px 12px;
  background: var(--og-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 14px;
  margin-bottom: 14px;
}
.kn-wrap .kn-tagbar-lbl {
  font-size: 10.5px; font-weight: 700;
  color: var(--og-ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 4px;
}
.kn-wrap .kn-tag-pill {
  padding: 4px 11px; border-radius: 99px;
  font: 700 11px -apple-system, system-ui, sans-serif;
  cursor: pointer;
  transition: transform 160ms;
  border: 1px solid;
}
.kn-wrap .kn-tag-pill:hover { transform: scale(1.04); }

/* Barra de filtros (busca + dropdown de etiquetas) */
.kn-wrap .kn-filtro-bar {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 18px;
}
.kn-wrap .kn-filtro-busca {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
}
.kn-wrap .kn-filtro-busca-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--og-ink-3); pointer-events: none; display: flex;
}
.kn-wrap .kn-filtro-busca input {
  width: 100%; box-sizing: border-box;
  padding: 12px 38px 12px 40px;
  background: #ffffff;
  border: 1px solid var(--og-hairline-soft);
  border-radius: 14px;
  color: var(--og-ink);
  font: 500 13px -apple-system, system-ui, sans-serif;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
  box-shadow: 0 1px 2px rgba(15, 23, 28, 0.04), 0 8px 18px -14px rgba(15, 23, 28, 0.16);
}
.kn-wrap .kn-filtro-busca input::placeholder { color: var(--og-ink-3); }
.kn-wrap .kn-filtro-busca input:focus {
  border-color: var(--og-green);
  box-shadow: 0 0 0 3px rgba(15, 79, 59, 0.12), 0 8px 18px -14px rgba(15, 23, 28, 0.16);
}
.kn-wrap .kn-filtro-busca-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--og-ink-3);
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
  transition: background 160ms, color 160ms;
}
.kn-wrap .kn-filtro-busca-clear:hover { background: var(--og-hairline-soft); color: var(--og-ink); }
.kn-wrap .kn-filtro-tags-wrap { position: relative; flex: 0 0 auto; }
.kn-wrap .kn-filtro-tags-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 28, 0.04), 0 8px 18px -14px rgba(15, 23, 28, 0.16);
  color: var(--og-ink);
  font: 600 12.5px -apple-system, system-ui, sans-serif;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
  white-space: nowrap;
}
.kn-wrap .kn-filtro-tags-btn:hover {
  background: var(--og-glass-strong); border-color: var(--og-hairline);
}
.kn-wrap .kn-filtro-tags-btn.on {
  background: color-mix(in srgb, var(--og-green) 14%, var(--og-glass-deep));
  border-color: color-mix(in srgb, var(--og-green) 40%, var(--og-hairline));
  color: var(--og-ink);
}
.kn-wrap .kn-filtro-tags-ico { display: flex; color: var(--og-ink-2); }
.kn-wrap .kn-filtro-tags-btn.on .kn-filtro-tags-ico { color: var(--og-green); }
.kn-wrap .kn-filtro-tags-chev { display: flex; color: var(--og-ink-3); }
/* Dropdown é portado pra document.body via JS pra fugir do stacking
   context da barra de filtros (.kn-filtro-tags-wrap tem position:relative).
   Por isso aqui usamos position:fixed e z-index alto — coordenadas
   (top/left/right/width) são setadas inline pelo JS via getBoundingClientRect. */
.kn-filtro-dropdown {
  position: fixed;
  width: 280px; max-height: 380px;
  display: flex; flex-direction: column;
  background: var(--og-glass-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--og-hairline);
  border-radius: 12px;
  box-shadow: var(--og-shadow);
  z-index: 99999;
  overflow: hidden;
}
/* Filhos do dropdown — sem prefixo .kn-wrap porque o dropdown é portado
   pra document.body via JS (fica fora de .kn-wrap em runtime). */
.kn-filtro-dd-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--og-hairline-soft);
  background: var(--og-glass-deep);
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--og-ink-3);
  display: flex; align-items: center; justify-content: space-between;
}
.kn-filtro-dd-ctd {
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: none;
  color: var(--og-green);
  background: color-mix(in srgb, var(--og-green) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--og-green) 30%, transparent);
  padding: 2px 7px; border-radius: 99px;
}
.kn-filtro-dd-body {
  flex: 1; overflow-y: auto;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.kn-filtro-dd-empty {
  padding: 18px 12px; text-align: center;
  color: var(--og-ink-3); font-size: 12px;
}
.mk-filtro-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 8px;
  cursor: pointer; user-select: none;
  font-size: 12.5px; color: var(--og-ink); font-weight: 500;
  transition: background 140ms;
}
.mk-filtro-item:hover { background: var(--og-hairline-soft); }
.mk-filtro-item.on { background: color-mix(in srgb, var(--og-green) 8%, transparent); }
.mk-filtro-item input[type="checkbox"] {
  width: 14px; height: 14px; flex: none; margin: 0;
  cursor: pointer; accent-color: var(--og-green);
}
.mk-filtro-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.mk-filtro-nome {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kn-filtro-dd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--og-hairline-soft);
  background: var(--og-glass-deep);
}
.kn-filtro-dd-link {
  background: transparent; border: 0; color: var(--og-ink-2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 8px; border-radius: 6px;
}
.kn-filtro-dd-link:hover:not(:disabled) { background: var(--og-hairline-soft); color: var(--og-ink); }
.kn-filtro-dd-link:disabled { opacity: 0.4; cursor: not-allowed; }
.kn-filtro-dd-apply {
  background: var(--og-green); color: #fff; border: 0;
  padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: filter 160ms;
}
.kn-filtro-dd-apply:hover { filter: brightness(1.08); }
@media (max-width: 768px) {
  .kn-wrap .kn-filtro-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .kn-wrap .kn-filtro-tags-wrap { width: 100%; }
  .kn-wrap .kn-filtro-tags-btn { width: 100%; justify-content: space-between; }
  /* Mobile: dropdown ocupa largura cheia com margem; JS sobrescreve left/right inline */
  .kn-filtro-dropdown.is-mobile { width: auto !important; left: 8px !important; right: 8px !important; }
}

/* Board (colunas) */
.kn-wrap .kn-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
@media (max-width: 768px) {
  .kn-wrap { padding: 12px; }
  .kn-wrap .kn-board { flex-direction: column; overflow-x: hidden; gap: 12px; }
  .kn-wrap .kn-col { max-width: 100%; min-width: 0; width: 100%; }
  .kn-wrap .kn-card { padding: 12px; }
}
.kn-wrap .kn-col {
  flex: 1; min-width: 264px; max-width: 310px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Cabeçalho de coluna — pedido do Pablo 08/09 "mais premium o visual do kanban":
   antes era texto solto sobre o fundo do board (sem card, sem profundidade),
   destoando dos cards já premium abaixo. Agora é um cartão de vidro próprio,
   com o mesmo acento de cor da coluna (--col-cor) no dot/contador/barra. */
.kn-wrap .kn-col-head {
  position: relative;
  padding: 13px 14px 15px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.68));
  border: 1px solid var(--og-hairline-soft);
  box-shadow: 0 1px 2px rgba(15,23,28,0.05), 0 10px 22px -14px rgba(15,23,28,0.14);
  display: block;
  cursor: pointer;
  transition: box-shadow 160ms, transform 160ms, border-color 160ms;
}
/* Clicável (21/09, Pablo: "clicar aqui e ver os clientes... que estão somando
   valores") — abre o drill-down das oportunidades do estágio (_mkAbrirDrillEstagio). */
.kn-wrap .kn-col-head:hover {
  border-color: color-mix(in srgb, var(--col-cor, var(--og-green)) 40%, var(--og-hairline));
  box-shadow: 0 4px 10px rgba(15,23,28,0.08), 0 14px 28px -14px rgba(15,23,28,0.20);
  transform: translateY(-1px);
}
.kn-wrap .kn-col-head .kn-col-top {
  display: flex; align-items: center; gap: 8px;
}
.kn-wrap .kn-col-head::after {
  content: '';
  display: block;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--col-cor, var(--og-green)), color-mix(in srgb, var(--col-cor, var(--og-green)) 25%, transparent));
  margin-top: 10px;
}
.kn-wrap .kn-col-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--col-cor, var(--og-green));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--col-cor, var(--og-green)) 20%, transparent);
  flex-shrink: 0;
}
.kn-wrap .kn-col-nome {
  flex: 1;
  font: 700 13px -apple-system, system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--og-ink);
}
.kn-wrap .kn-col-cnt {
  font-size: 11px;
  font-weight: 800;
  color: var(--col-cor, var(--og-ink-3));
  background: color-mix(in srgb, var(--col-cor, var(--og-green)) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--col-cor, var(--og-green)) 26%, transparent);
  padding: 1px 8px;
  border-radius: 8px;
  min-width: auto;
}
.kn-wrap .kn-col-valor {
  font-size: 12.5px;
  color: var(--og-ink-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 0 0;
}
.kn-wrap .kn-col-drop {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 80px;
  border-radius: 14px;
  padding: 2px;
}
.kn-wrap .kn-col-empty {
  flex: 1;
  border: 1.6px dashed var(--og-hairline-soft);
  border-radius: 13px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  color: var(--og-ink-3);
  font-size: 12px;
  font-weight: 500;
  padding: 18px;
  min-height: 90px;
  text-align: center;
  background: transparent;
}
.kn-wrap .kn-col-empty svg {
  width: 18px; height: 18px;
  opacity: 0.5;
}
.kn-wrap .kn-col-add {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 10px;
  border-radius: 11px;
  color: var(--og-ink-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px dashed transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.kn-wrap .kn-col-add:hover {
  background: #ffffff;
  border-color: var(--og-hairline-soft);
  color: var(--og-ink-2);
}
.kn-wrap .kn-col-add svg { width: 14px; height: 14px; }

/* Card de oportunidade — branco puro, sombra leve, entra com um leve fade+slide */

.kn-wrap .kn-card {
  position: relative;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--og-hairline-soft);
  border-radius: 14px;
  cursor: grab;
  overflow: hidden;
  transition: border-color 220ms, transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(20, 40, 32, 0.06);
  opacity: 0; transform: translateY(6px);
  animation: kn-card-in 420ms cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--kn-d, 0ms);
}
@keyframes kn-card-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .kn-wrap .kn-card { animation: none; opacity: 1; transform: none; }
}
/* Barra de acento na cor da coluna (herdada via --col-cor) — só aparece no hover */
.kn-wrap .kn-card::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 3px; background: var(--col-cor, var(--og-green)); opacity: 0;
  transition: opacity 220ms;
}
.kn-wrap .kn-card:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(20, 40, 32, 0.16);
}
.kn-wrap .kn-card:hover::before { opacity: 1; }
.kn-wrap .kn-card-top {
  display: flex; align-items: center; gap: 9px;
}
.kn-wrap .kn-avatar {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
}
/* Foto real do WhatsApp (wa_conversas.avatar_url) — quando não tem, cai pras iniciais
   coloridas acima (onerror troca o <img> pela div de iniciais, ver meu-kanban-ui.js). */
.kn-wrap .kn-avatar-foto {
  object-fit: cover;
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline);
}
.kn-wrap .kn-card-info { flex: 1; min-width: 0; }
/* Atalho de WhatsApp no card (21/09) — o card inteiro abre a Visão 360 (07/09,
   proposital); esse ícone à parte manda direto pra conversa, sem passar por lá.
   stopPropagation no onclick evita disparar o clique do card (ver meu-kanban-ui.js). */
.kn-wrap .kn-card-wa-btn {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: #25D366;
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37,211,102,.4);
  transition: transform .15s, background .15s;
}
.kn-wrap .kn-card-wa-btn:hover { transform: scale(1.08); background: #22c55e; }
.kn-wrap .kn-card-wa-btn svg { flex: none; }
.kn-wrap .kn-card-titulo {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--og-ink);
  letter-spacing: -0.008em;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
/* Origem do lead e telefone — CADA UM na sua própria linha, com ícone. Antes
   dividiam uma linha só com um traço separador; ficava cramped e virava "uma
   informação só" na leitura (pedido do Pablo 07/09: "cada informação tem que
   ter seu espaço"). */
.kn-wrap .kn-card-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--og-ink-3); font-weight: 500;
  margin-top: 6px; line-height: 1.3;
}
.kn-wrap .kn-card-meta-txt,
.kn-wrap .kn-card-meta-fone {
  display: inline-flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.kn-wrap .kn-card-meta-txt svg,
.kn-wrap .kn-card-meta-fone svg { flex: none; opacity: .65; }
/* Empresa vinculada — linha própria no card; sem empresa vira "A vincular" em âmbar,
   o mesmo tom do KPI "Sem cadastro vinculado" (mesmo sinal lido de dois lugares). */
.kn-wrap .kn-card-empresa {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0; min-width: 0;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  color: var(--og-ink-2);
}
.kn-wrap .kn-card-empresa svg { flex: none; opacity: .6; }
.kn-wrap .kn-card-empresa-lbl { flex: none; font-weight: 700; color: var(--og-ink-3); }
.kn-wrap .kn-card-empresa-txt {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.kn-wrap .kn-card-empresa--falta { color: #b45309; }
.kn-wrap .kn-card-empresa--falta svg { opacity: .8; }
.kn-wrap .kn-card-empresa--falta .kn-card-empresa-lbl { color: #b45309; }
/* Termômetro: um ponto discreto ao lado do "há X dias" no rodapé (antes flutuava
   solto no canto do avatar). O footer agora concentra tempo + urgência numa linha só. */
.kn-wrap .kn-card-tdot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 1px;
}
.kn-wrap .kn-card-tdot--hot  { background: #f0703f; box-shadow: 0 0 0 3px rgba(240,112,63,.18); }
.kn-wrap .kn-card-tdot--warm { background: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,.18); }
.kn-wrap .kn-card-tdot--cold { background: #5b8def; box-shadow: 0 0 0 3px rgba(91,141,239,.18); }
.kn-wrap .kn-card-preco {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 16px;
  font-weight: 700;
  margin: 11px 0 9px;
  color: var(--og-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
/* Sem valor definido ainda — não precisa competir em peso visual com um
   negócio que já tem valor estimado real. */
.kn-wrap .kn-card-preco--vazio {
  font-weight: 500;
  font-size: 13px;
  color: var(--og-ink-3);
}
/* Chips — mesma linguagem visual pro crédito e a origem do lead (antes um
   era pílula sólida e o outro só texto colorido; virava "sopa de badge"). */
.kn-wrap .kn-card-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 9px;
}
.kn-wrap .kn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  border: 1px solid transparent;
  max-width: 100%;
}
.kn-wrap .kn-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-wrap .kn-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.kn-wrap .kn-card-tempo {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f1f5f4;
  color: var(--og-ink-3);
  padding: 3px 8px 3px 6px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
}
.kn-wrap .kn-card-tempo svg { width: 11px; height: 11px; opacity: 0.85; }
.kn-wrap .kn-card-tempo--late {
  color: #e0594a;
  background: #fdeceb;
}
/* Contorno, não preenchido — o card já tem a cor do cliente no avatar principal;
   duas bolinhas cheias competindo pela mesma atenção era demais. */
.kn-wrap .kn-card-owner {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--og-ink-2);
  background: transparent;
  border: 1.5px solid var(--og-hairline);
  flex-shrink: 0;
}

/* === SLA Primeiro Contato — selo discreto no canto, não mais o card inteiro
   piscando fundo. Com vários cards vencendo ao mesmo tempo, um strobe geral
   virava ruído; um selo com um pontinho respirando avisa sem gritar.
   10 min sem resposta -> amarelo; 15 min -> vermelho. */
.kn-wrap .kn-card.kn-card--sla-amber { border-color: #f5a623; }
.kn-wrap .kn-card.kn-card--sla-red   { border-color: #dc2626; }
/* Selo em linha própria, ABAIXO de tudo (rodapé) — pedido do Pablo 07/09: não fazia
   sentido o alerta ficar em cima do nome (chegou a sobrepor o título quando era
   absolute; depois virou linha própria no topo, mas o Pablo quer no rodapé mesmo). */
.kn-wrap .kn-card-sla-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .01em;
  padding: 3px 8px 3px 7px; border-radius: 999px;
  margin-top: 10px;
}
.kn-card-sla-badge--amber { background: #fef3c7; color: #b45309; }
.kn-card-sla-badge--red   { background: #fee2e2; color: #dc2626; }
.kn-wrap .kn-card-sla-badge i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: kn-sla-ring 1.6s ease-in-out infinite;
}
@keyframes kn-sla-ring {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .kn-wrap .kn-card-sla-badge i { animation: none; }
}
.kn-wrap .kn-card-foot svg { width: 12px; height: 12px; opacity: 0.6; }
.kn-wrap .kn-tag {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
  letter-spacing: 0.02em;
}
.kn-wrap .kn-ticket {
  font-size: 9.5px; font-weight: 700;
  color: var(--og-ink-3);
  background: var(--og-glass-deep);
  padding: 2px 7px; border-radius: 99px;
  font-family: ui-monospace, monospace;
}

/* Card de tarefa (coluna pendências) */
.kn-wrap .kn-task-card {
  padding: 10px 12px;
  background: var(--og-glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
  border-left: 4px solid var(--og-amber);
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 160ms;
}
.kn-wrap .kn-task-card:hover { transform: translateY(-1px); }
.kn-wrap .kn-task-card.atrasada { border-left-color: var(--og-red); background: color-mix(in srgb, var(--og-red) 8%, var(--og-glass-strong)); }
.kn-wrap .kn-task-tit { font-weight: 600; color: var(--og-ink); }
.kn-wrap .kn-task-meta { font-size: 10px; color: var(--og-ink-3); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kn-wrap .kn-task-concluir {
  background: var(--og-green); color: #fff; border: none;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; cursor: pointer;
}

/* Visualização de lista — tabela glass */
.kn-wrap .kn-tabela {
  border-radius: 14px; overflow: hidden;
  background: var(--og-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
}
.kn-wrap .kn-tabela table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kn-wrap .kn-tabela th {
  padding: 10px 12px; text-align: left;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--og-ink-3); font-weight: 800;
  background: var(--og-glass-deep);
  cursor: pointer; user-select: none;
}
.kn-wrap .kn-tabela td { padding: 9px 12px; color: var(--og-ink); border-top: 1px solid var(--og-hairline-soft); }
.kn-wrap .kn-tabela tr:hover td { background: var(--og-hairline-soft); }
.kn-wrap .kn-tabela td strong, .kn-wrap .kn-tabela td b { color: var(--og-ink); }

/* Tabela dos overlays de KPI do Meu Kanban (Sem cadastro vinculado, etc). Mesma linguagem
   da .kn-tabela, mas SEM o escopo .kn-wrap: esses overlays são appendados em document.body. */
.kn-ov-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kn-ov-tabela th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 14px; text-align: left; white-space: nowrap;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--og-ink-3); font-weight: 800;
  background: var(--og-glass-deep, #f8fafc);
  border-bottom: 1px solid var(--og-hairline-soft);
}
.kn-ov-tabela td {
  padding: 9px 14px; color: var(--og-ink);
  border-top: 1px solid var(--og-hairline-soft);
  vertical-align: middle;
}
.kn-ov-tabela tbody tr[onclick] { cursor: pointer; }
.kn-ov-tabela tbody tr[onclick]:hover td { background: var(--og-glass-deep, #f8fafc); }
.kn-ov-tabela .kn-ov-cli strong { max-width: 260px; font-weight: 700; color: var(--og-ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-ov-tabela .kn-ov-cli small { display: block; max-width: 260px; margin-top: 2px; font-size: 11px; color: var(--og-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 22/09, Pablo: "cortando informações" — colunas sem limite (Empresa, Vendedor)
   empurravam a tabela pra além dos 960px do modal, exigindo scroll horizontal
   escondido. Com max-width+ellipsis aqui, a tabela sempre cabe no cartão. */
.kn-ov-tabela .kn-ov-sec { color: var(--og-ink-2); white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.kn-ov-tabela .kn-ov-data { color: var(--og-ink-3); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kn-ov-tabela .kn-ov-val { text-align: right; white-space: nowrap; font-weight: 700; color: #b45309; font-variant-numeric: tabular-nums; }
.kn-ov-pill {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-size: 10px; font-weight: 800; white-space: nowrap;
}

/* ============== Editor visual de automações do CRM (Drawflow) ==============
   22/09, Pablo: "editor visual completo... entre CRM... e WhatsApp". Global (não
   injetado por JS de módulo) porque é aberto a partir do Kanban, que não tem seu
   próprio ensureStyles() como o de Tarefas.
   22/09 (2ª rodada), Pablo: "ficou muito ruim, quebrou as linhas, tem que se
   encaixar na página (não full screen), layout básico sem destaque". Trocado de
   overlay full-bleed pra cartão centralizado; nós e campos redesenhados. A causa
   do "quebrou as linhas" era cascata: drawflow.min.css carrega DEPOIS do nosso
   styles.css no <head>, então em empate de especificidade a regra da lib vencia
   a nossa (padding:15px sobrepondo nosso padding:0, etc) — por isso as regras de
   nó abaixo usam seletor com #id (mais específico que a lib) em vez de depender
   da ordem de carregamento. */
.mk-autflow-overlay { position: fixed; inset: 0; background: rgba(15,23,28,.55); backdrop-filter: blur(6px); z-index: 10040; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mk-autflow-card { background: #fff; border-radius: 16px; width: 100%; max-width: 1180px; height: min(720px, 90vh); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px -10px rgba(20,40,32,.35); }
.mk-autflow-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--og-hairline-soft); background: #fff; flex: none; flex-wrap: wrap; }
.mk-autflow-bar input { border: 1px solid var(--og-hairline-soft); border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; }
.mk-autflow-btn { border: 1px solid var(--og-hairline-soft); background: #fff; color: var(--og-ink); border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mk-autflow-btn:hover { background: var(--og-glass-deep); }
.mk-autflow-btn.primary { background: var(--og-green,#0e7c66); color: #fff; border-color: transparent; }
.mk-autflow-btn.primary:hover { filter: brightness(1.06); }
.mk-autflow-body { flex: 1; min-height: 0; display: flex; }
.mk-autflow-canvas { flex: 1; min-width: 0; background-color: var(--og-glass-deeper,#f3f6f4); background-image: radial-gradient(var(--og-hairline-soft) 1px, transparent 1px); background-size: 22px 22px; }
.mk-autflow-props { width: 320px; flex: none; border-left: 1px solid var(--og-hairline-soft); background: #fff; overflow-y: auto; padding: 18px; }
@media (max-width: 760px) { .mk-autflow-props { width: 260px; } }
.mk-autflow-props-empty { color: var(--og-ink-3); font-size: 12.5px; text-align: center; padding: 40px 10px; }
.mk-autflow-props-title { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 800; color: var(--og-ink); margin: -18px -18px 16px; padding: 14px 18px; border-bottom: 1px solid var(--og-hairline-soft); background: var(--og-glass-deep); }
.mk-autflow-props-title .mk-autflow-node-ic { width: 28px; height: 28px; margin: 0; flex: none; }
.mk-autflow-field { background: var(--og-glass-deep); border: 1px solid var(--og-hairline-soft); border-radius: 11px; padding: 10px 12px 12px; margin-bottom: 10px; }
.mk-autflow-field .meu-kanban-label { display: block; margin-bottom: 5px; }
.mk-autflow-field:last-of-type { margin-bottom: 0; }
.mk-autflow-remover { width: 100%; margin-top: 14px; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; border-radius: 9px; padding: 9px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mk-autflow-remover:hover { background: #fee2e2; }
/* Nós no canvas — cartão compacto com ícone + resumo; cor de destaque por tipo.
   Seletor por #mkAutomFlowCanvas (id fixo do container, criado a cada abertura do
   editor) em vez de classe, pra ganhar da lib independente da ordem do <head>. */
#mkAutomFlowCanvas .drawflow-node { position: absolute; width: 194px; border-radius: 12px; box-shadow: 0 1px 2px rgba(9,30,22,.06), 0 8px 18px -14px rgba(9,30,22,.3); border: 1px solid var(--og-hairline-soft); border-top: 3px solid var(--og-hairline-soft); background: #fff; padding: 0; }
#mkAutomFlowCanvas .drawflow-node.selected { box-shadow: 0 0 0 2px var(--og-green,#0e7c66); }
#mkAutomFlowCanvas .drawflow-node .drawflow_content_node { width: 100%; padding: 10px 12px; box-sizing: border-box; }
#mkAutomFlowCanvas .connection .main-path { stroke: var(--og-green,#0e7c66); stroke-width: 2.5px; }
#mkAutomFlowCanvas .drawflow-node .input, #mkAutomFlowCanvas .drawflow-node .output { background: var(--og-green,#0e7c66); height: 12px; width: 12px; }
#mkAutomFlowCanvas .drawflow-node.mk-autflow-gatilho { border-top-color: var(--og-green,#0e7c66); }
#mkAutomFlowCanvas .drawflow-node.mk-autflow-mover_funil { border-top-color: #2563eb; }
#mkAutomFlowCanvas .drawflow-node.mk-autflow-enviar_whatsapp_template { border-top-color: #22c55e; }
#mkAutomFlowCanvas .drawflow-node.mk-autflow-criar_tarefa { border-top-color: #7c3aed; }
#mkAutomFlowCanvas .drawflow-node.mk-autflow-aguardar { border-top-color: #b45309; }
.mk-autflow-node-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 6px; color: #fff; }
.mk-autflow-node-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--og-ink-3); }
.mk-autflow-node-sub { font-size: 12.5px; font-weight: 700; color: var(--og-ink); margin-top: 2px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-autflow-gatilho .mk-autflow-node-ic, .mk-autflow-ic-gatilho { background: var(--og-green,#0e7c66); }
.mk-autflow-mover_funil .mk-autflow-node-ic, .mk-autflow-ic-mover_funil { background: #2563eb; }
.mk-autflow-enviar_whatsapp_template .mk-autflow-node-ic, .mk-autflow-ic-enviar_whatsapp_template { background: #22c55e; }
.mk-autflow-criar_tarefa .mk-autflow-node-ic, .mk-autflow-ic-criar_tarefa { background: #7c3aed; }
.mk-autflow-aguardar .mk-autflow-node-ic, .mk-autflow-ic-aguardar { background: #b45309; }
/* Notebook/telas menores: aperta o padding e deixa a tabela rolar na horizontal
   dentro do wrapper overflow:auto do overlay, sem estourar a viewport. */
@media (max-width: 1100px) {
  .kn-ov-tabela { min-width: 760px; }
  .kn-ov-tabela th, .kn-ov-tabela td { padding-left: 10px; padding-right: 10px; }
}

/* Dropdown de configurações */
.kn-wrap .kn-cfg-dropdown {
  position: absolute; top: 42px; right: 0; width: 280px;
  background: var(--og-glass-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--og-hairline);
  border-radius: 14px;
  box-shadow: var(--og-shadow);
  z-index: 9999; overflow: hidden;
}
.kn-wrap .kn-cfg-dropdown .cfg-dd-item {
  width: 100%; padding: 10px 14px;
  background: transparent; border: 0; border-bottom: 1px solid var(--og-hairline-soft);
  color: var(--og-ink); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-align: left;
  font-family: inherit;
}
.kn-wrap .kn-cfg-dropdown .cfg-dd-item:hover { background: var(--og-hairline-soft); }
.kn-wrap .kn-cfg-dropdown .cfg-dd-item svg { width: 16px; height: 16px; opacity: 0.7; flex: none; }

/* Quadro de atalhos operacionais */
.kn-wrap .mk-quadro-card {
  background: var(--og-glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink);
  transition: transform 160ms, background 160ms;
}
.kn-wrap .mk-quadro-card:hover {
  background: var(--og-glass-strong);
  border-color: var(--og-hairline);
  transform: translateY(-1px);
}

/* =========================================================
   OVERRIDE GLOBAL — botões com fundo verde sempre com texto branco.
   Pega botões inline-style legados (background:#0E4F3B / #22b07a / #13b552 /
   var(--og-green) / linear-gradient verde) e força color:#fff + text-shadow
   sutil pra leitura. Pareia com .og-btn--primary que já está em branco.
   ========================================================= */
button[style*="background:#0E4F3B"],
button[style*="background: #0E4F3B"],
button[style*="background:#22b07a"],
button[style*="background: #22b07a"],
button[style*="background:#13b552"],
button[style*="background: #13b552"],
button[style*="background:var(--og-green)"],
button[style*="background: var(--og-green)"],
button[style*="background:var(--accent)"],
button[style*="background: var(--accent)"],
button[style*="linear-gradient(135deg, #0E4F3B"],
button[style*="linear-gradient(145deg, #2fe06f"],
a[style*="background:#0E4F3B"],
a[style*="background: #0E4F3B"],
a[style*="background:#22b07a"],
a[style*="background: #22b07a"] {
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

/* Fatia D1 — Kanban Trello em mobile: colunas viram cards empilháveis */
@media (max-width: 768px) {
  .kanban-colunas-wrap {
    flex-direction: column !important;
    overflow-x: hidden !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .kanban-col {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .kanban-card {
    padding: 12px !important;
  }
  /* Esconde drag handle visual em mobile — usa long-press */
  .kanban-col-header [draggable="true"] svg.kanban-drag-handle { display: none; }
}

/* ==========================================================================
   Meu Kanban — Liquid Glass UI System (modais de config)
   Padrão usado pelos modais expostos via engrenagem no Meu Kanban:
   Metas, Tags, Templates, Automações, Motivos, Tipos, Campos, Insights,
   Propostas, Funil. Tema-aware via var(--og-*).
   ========================================================================== */
.meu-kanban-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 28, 0.55);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.meu-kanban-modal {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--og-hairline-soft);
  border-radius: 18px;
  box-shadow: 0 24px 60px -10px rgba(20, 40, 32, 0.30), 0 4px 12px -4px rgba(20, 40, 32, 0.10);
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--og-ink);
}
.meu-kanban-modal::before { display: none; }
.meu-kanban-header {
  position: relative;
  background: #f8faf9;
  border-bottom: 1px solid var(--og-hairline-soft);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--og-ink);
}
.meu-kanban-header-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--og-ink);
  letter-spacing: -0.1px;
}
.meu-kanban-header-sub {
  font-size: 10.5px;
  color: var(--og-ink-3);
  margin-top: 2px;
  font-weight: 600;
}
.meu-kanban-close {
  background: var(--og-glass);
  color: var(--og-ink-2);
  border: 1px solid var(--og-hairline-soft);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.meu-kanban-close:hover {
  background: var(--og-glass-strong);
  color: var(--og-ink);
}
.meu-kanban-body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: transparent;
}
.meu-kanban-footer {
  position: relative;
  border-top: 1px solid var(--og-hairline-soft);
  background: #f8faf9;
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.meu-kanban-input,
.meu-kanban-modal input[type="text"],
.meu-kanban-modal input[type="number"],
.meu-kanban-modal input[type="email"],
.meu-kanban-modal input[type="search"],
.meu-kanban-modal select,
.meu-kanban-modal textarea {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  color: var(--og-ink);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.meu-kanban-modal input[type="color"] {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
}
.meu-kanban-input:focus,
.meu-kanban-modal input:focus,
.meu-kanban-modal select:focus,
.meu-kanban-modal textarea:focus {
  border-color: var(--og-green);
  background: var(--og-glass-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green) 22%, transparent);
}
.meu-kanban-modal textarea {
  resize: vertical;
  line-height: 1.5;
}
.meu-kanban-card {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 10px;
  color: var(--og-ink);
}
.meu-kanban-card:hover {
  background: var(--og-glass-strong);
}
.meu-kanban-btn-primary {
  background: var(--og-green);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s, transform .05s;
}
.meu-kanban-btn-primary:hover { filter: brightness(1.08); }
.meu-kanban-btn-primary:active { transform: translateY(1px); }
.meu-kanban-btn-secondary {
  background: var(--og-glass);
  color: var(--og-ink);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.meu-kanban-btn-secondary:hover { background: var(--og-glass-strong); }
.meu-kanban-btn-danger {
  background: color-mix(in srgb, var(--og-red) 18%, transparent);
  color: var(--og-red);
  border: 1px solid color-mix(in srgb, var(--og-red) 32%, transparent);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.meu-kanban-btn-danger:hover {
  background: color-mix(in srgb, var(--og-red) 28%, transparent);
}
.meu-kanban-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--og-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.meu-kanban-divider {
  border-top: 1px dashed var(--og-hairline-soft);
}
.meu-kanban-kpi {
  background: var(--og-glass-deep);
  border: 1px solid var(--og-hairline-soft);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--og-ink);
}
.meu-kanban-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--og-ink); }
.meu-kanban-table thead th {
  color: var(--og-ink-3);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 800;
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--og-hairline-soft);
}
.meu-kanban-table tbody td {
  padding: 8px 6px;
  border-top: 1px solid var(--og-hairline-soft);
}
/* Mobile: reduz blur pra performance */
@media (max-width: 720px) {
  .meu-kanban-modal {
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
  }
  .meu-kanban-backdrop { padding: 12px; }
}

/* =====================================================================
 * Dashboard Diretoria — KPI "Containers em Trânsito"
 * Fase 4 do módulo Em Trânsito. Card muda de cor conforme urgência:
 *   .ok      → verde (padrão, tem containers ativos sem problema)
 *   .idle    → cinza (nenhum container ativo)
 *   .alerta  → âmbar (atrasos leves ou free-time crítico)
 *   .critico → vermelho (>2 atrasos)
 * ===================================================================== */
.dir-kpi--containers::before { background: linear-gradient(90deg, #14b8a6 0%, #2dd4bf 100%); }
.dir-kpi--containers.dir-kpi--idle::before    { background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%); }
.dir-kpi--containers.dir-kpi--alerta::before  { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); }
.dir-kpi--containers.dir-kpi--critico::before { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
.dir-kpi--containers.dir-kpi--critico .dir-kpi-valor { color: #dc2626; }
.dir-kpi--containers.dir-kpi--alerta .dir-kpi-valor  { color: #b45309; }
.dir-kpi--containers.dir-kpi--ok .dir-kpi-valor      { color: #14b8a6; }
.dir-kpi--containers .dir-kpi-icon { color: #14b8a6; }

/* =====================================================================
 * CATÁLOGO — MATRIZ DE MANUTENÇÃO (Filtro × Horas)
 * Refatoração da tela de Revisão e Plano de Manutenção
 * Prefixo: .cat-mat-*
 * Design system: og-glass (sem emojis)
 * ===================================================================== */
.cat-mat-shell { padding: 24px 28px; max-width: 1400px; margin: 0 auto; }
.cat-mat-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.cat-mat-titulo { font-family: 'Bricolage Grotesque', system-ui; font-size: 26px; font-weight: 700; color: var(--og-ink); margin: 0 0 4px; }
.cat-mat-sub { font-size: 13px; color: var(--og-ink-2); font-family: 'Manrope', system-ui; }
.cat-mat-card { background: var(--og-glass-strong, rgba(255,255,255,0.7)); border: 1px solid var(--og-hairline); border-radius: 14px; margin-bottom: 20px; overflow: hidden; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.cat-mat-card-head { padding: 16px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--og-hairline-soft); background: var(--og-glass-deep); }
.cat-mat-card-titulo { font-family: 'Bricolage Grotesque', system-ui; font-size: 20px; font-weight: 700; color: var(--og-ink); margin: 0 0 3px; }
.cat-mat-card-sub { font-size: 12px; color: var(--og-ink-3); }
.cat-mat-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cat-mat-tabela-wrap { overflow-x: auto; }
.cat-mat-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.cat-mat-tabela thead th { padding: 12px 14px; text-align: left; font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--og-ink-3); letter-spacing: 0.5px; border-bottom: 1px solid var(--og-hairline); background: var(--og-glass-deep); }
.cat-mat-th-horas { text-align: center; }
.cat-mat-th-horas-num { display: block; font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--og-brand, #0E4F3B); font-weight: 700; text-transform: none; letter-spacing: 0; }
.cat-mat-th-horas-titulo { display: block; font-size: 10px; color: var(--og-ink-3); font-weight: 500; text-transform: none; margin-top: 2px; }
.cat-mat-th-horas-remove { display: inline-block; margin-left: 6px; color: var(--og-ink-3); cursor: pointer; opacity: 0; transition: opacity .12s; font-size: 14px; }
.cat-mat-th-horas:hover .cat-mat-th-horas-remove { opacity: 1; }
.cat-mat-tabela tbody td { padding: 8px 12px; border-bottom: 1px solid var(--og-hairline-soft); color: var(--og-ink); vertical-align: middle; }
.cat-mat-td-codigo { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--og-brand, #0E4F3B); font-size: 12.5px; }
.cat-mat-td-nome { color: var(--og-ink-2); font-size: 13px; }
.cat-mat-td-qtd { text-align: center; }
.cat-mat-input-qtd { width: 60px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--og-hairline); background: var(--og-glass-deep); text-align: center; font-size: 13px; font-family: 'JetBrains Mono', monospace; color: var(--og-ink); }
.cat-mat-input-qtd:focus { outline: none; border-color: var(--og-brand, #0E4F3B); background: var(--og-glass); }
.cat-mat-input-qtd.is-empty { color: var(--og-ink-3); opacity: 0.5; }
.cat-mat-input-qtd.is-saving { border-color: var(--og-amber, #f59e0b); }
.cat-mat-input-qtd.is-saved  { border-color: var(--og-green, #16a34a); transition: border-color 1.2s; }
.cat-mat-td-acoes { text-align: center; white-space: nowrap; opacity: 0; transition: opacity .12s; }
.cat-mat-tabela tbody tr:hover .cat-mat-td-acoes { opacity: 1; }
.cat-mat-btn-remove { background: none; border: none; padding: 4px 6px; color: var(--og-red, #dc2626); cursor: pointer; font-size: 15px; }
/* 22/09, Pablo: "filtros substituídos tem que poder substituir a peça sem ter que
   excluir e adicionar novamente" — botão de troca in-place por linha. */
.cat-mat-btn-swap { background: none; border: none; padding: 4px 6px; color: var(--og-ink-3); cursor: pointer; display: inline-flex; vertical-align: middle; border-radius: 6px; transition: color .12s, background .12s; }
.cat-mat-btn-swap:hover { color: var(--og-brand, #0E4F3B); background: var(--og-hairline-soft); }
.cat-mat-card-foot { padding: 12px 20px; display: flex; gap: 10px; border-top: 1px solid var(--og-hairline-soft); background: var(--og-glass-deep); }
.cat-mat-empty { padding: 40px 20px; text-align: center; color: var(--og-ink-3); font-size: 13px; }
.cat-mat-empty svg { width: 44px; height: 44px; opacity: 0.35; margin-bottom: 10px; }
/* Header actions: agrupamento dos botões globais (recolher/expandir + novo plano) */
.cat-mat-header-acoes { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
/* Botão toggle (chevron) — recolhe/expande card individual */
.cat-mat-card-toggle {
  background: transparent; border: none; padding: 6px 8px; cursor: pointer;
  color: var(--og-ink-2); display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: background .12s; margin-top: 2px; flex-shrink: 0;
}
.cat-mat-card-toggle:hover { background: var(--og-hairline-soft); color: var(--og-ink); }
.cat-mat-card-toggle svg { transition: transform .18s; }
.cat-mat-card.is-collapsed .cat-mat-card-toggle svg { transform: rotate(-90deg); }
/* Corpos escondidos quando recolhido — head fica sempre visível */
.cat-mat-card.is-collapsed .cat-mat-tabela-wrap,
.cat-mat-card.is-collapsed .cat-mat-empty,
.cat-mat-card.is-collapsed .cat-mat-card-foot { display: none; }
/* Card recolhido: remove separador do head pra visual mais compacto */
.cat-mat-card.is-collapsed .cat-mat-card-head { border-bottom: 0; }
/* Mini badge no titulo (contagem) — sempre no DOM, oculto quando expandido */
.cat-mat-card-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  background: var(--og-glass-deep); color: var(--og-ink-3); vertical-align: middle;
  font-family: 'Manrope', system-ui;
}
.cat-mat-card:not(.is-collapsed) .cat-mat-card-badge { display: none; }
.cat-mat-search-pop { position: absolute; background: var(--og-glass-strong, rgba(255,255,255,0.85)); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--og-hairline); border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,0.14); width: 380px; max-height: 460px; overflow: hidden; overflow-y: auto; z-index: 9999; }
.cat-mat-search-pop.is-substituir { width: 400px; }
.cat-mat-search-input { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--og-hairline-soft); background: var(--og-glass-strong, #fff); font-size: 13px; color: var(--og-ink); outline: none; position: sticky; top: 0; z-index: 1; }
.cat-mat-search-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--og-hairline-soft); display: flex; align-items: center; gap: 10px; }
.cat-mat-search-item:hover, .cat-mat-search-item.is-focus { background: var(--og-hairline-soft); }
.cat-mat-search-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cat-mat-search-item-cod { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--og-brand, #0E4F3B); font-size: 12px; }
.cat-mat-search-item-nome { font-size: 12px; color: var(--og-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-mat-search-item-thumb { flex: none; width: 26px; height: 26px; border-radius: 6px; overflow: hidden; background: var(--og-glass-deep); display: grid; place-items: center; }
.cat-mat-search-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-mat-search-item-thumb--vazia { color: var(--og-ink-3); opacity: 0.5; }
.cat-mat-search-item-saldo { flex: none; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 7px; background: rgba(14, 79, 59, 0.08); color: var(--og-brand, #0E4F3B); white-space: nowrap; }
.cat-mat-search-item-saldo--zero { background: rgba(220, 38, 38, 0.08); color: var(--og-red, #dc2626); }
/* Combobox de sugestão pro campo Grupo/Máquina (Novo/Editar/Duplicar plano) */
.cat-mat-combo-pop { position: absolute; background: var(--og-glass-strong, rgba(255,255,255,0.92)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--og-hairline); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,0.14); max-height: 220px; overflow-y: auto; z-index: 10050; }
.cat-mat-combo-item { padding: 8px 12px; font-size: 12.5px; color: var(--og-ink); cursor: pointer; border-bottom: 1px solid var(--og-hairline-soft); }
.cat-mat-combo-item:last-child { border-bottom: 0; }
.cat-mat-combo-item:hover { background: var(--og-hairline-soft); }
/* Cabeçalho do popover de substituição — código atual + atalhos de substitutos já vinculados */
.cat-mat-subs-origem { padding: 10px 12px 8px; font-size: 12.5px; color: var(--og-ink-2); border-bottom: 1px solid var(--og-hairline-soft); }
.cat-mat-subs-origem strong { font-family: 'JetBrains Mono', monospace; color: var(--og-brand, #0E4F3B); }
.cat-mat-subs-conhecidos-label { padding: 8px 12px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--og-ink-3); background: var(--og-glass-deep); }
.cat-mat-subs-conhecidos { border-bottom: 1px solid var(--og-hairline-soft); }
/* Wrapper de badges sob a descrição (sem estoque + sugestão compatível) */
.cat-mat-td-nome-txt { display: block; }
.cat-mat-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* =====================================================================
 * CATÁLOGO — MATRIZ DE MANUTENÇÃO — Coluna Total 1000h + código clickable + badges
 * ===================================================================== */
/* Coluna Total 1000h */
.cat-mat-th-total {
  text-align: center !important;
  color: var(--og-ink) !important;
  background: linear-gradient(180deg, var(--og-glass-deep), var(--og-glass)) !important;
}
.cat-mat-th-total small { display: block; font-size: 10px; color: var(--og-ink-3); font-weight: 500; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.cat-mat-td-total {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 15px;
  color: #b45309;
  background: rgba(180, 83, 9, 0.05);
}
.cat-mat-tfoot { background: var(--og-glass-deep); }
.cat-mat-tfoot td {
  padding: 12px 14px;
  font-family: 'Bricolage Grotesque', system-ui;
  font-size: 14px;
  font-weight: 700;
  color: var(--og-ink);
  border-top: 2px solid var(--og-hairline);
}
.cat-mat-tfoot .cat-mat-td-total {
  font-size: 18px;
  color: var(--og-brand, #0E4F3B);
  background: rgba(14, 79, 59, 0.08);
}

/* Código clickable */
.cat-mat-td-codigo-link {
  text-decoration: none;
  cursor: pointer;
  transition: color .12s;
}
.cat-mat-td-codigo-link:hover {
  text-decoration: underline;
  color: var(--og-green, #0E7C66);
}

/* Badge sem estoque + sugestão de compatível */
.cat-mat-badge-sem-estoque {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(220, 38, 38, 0.10);
  color: var(--og-red, #dc2626);
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.cat-mat-badge-sugerido {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  background: rgba(14, 79, 59, 0.06);
  color: var(--og-ink-2);
  border: 1px solid var(--og-hairline);
}
.cat-mat-badge-sugerido a {
  color: var(--og-brand, #0E4F3B);
  font-weight: 700;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
}
.cat-mat-badge-sugerido a:hover { text-decoration: underline; }

/* ===== CATÁLOGO — Toggle recolher/expandir plano de manutenção ===== */
.cat-mat-card-toggle {
  background: transparent;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--og-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .12s, color .12s;
  margin-right: 8px;
  flex-shrink: 0;
}
.cat-mat-card-toggle:hover {
  background: var(--og-hairline-soft, rgba(15,23,42,0.05));
  color: var(--og-ink);
}
.cat-mat-card-toggle svg {
  transition: transform .18s ease-out;
  transform: rotate(0deg);
}
.cat-mat-card.is-collapsed .cat-mat-card-toggle svg {
  transform: rotate(-90deg);
}
.cat-mat-card.is-collapsed .cat-mat-tabela-wrap,
.cat-mat-card.is-collapsed .cat-mat-empty,
.cat-mat-card.is-collapsed .cat-mat-card-foot {
  display: none;
}
.cat-mat-card.is-collapsed .cat-mat-card-head {
  border-bottom: none;
}
.cat-mat-card-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--og-glass-deep, rgba(15,23,42,0.05));
  color: var(--og-ink-3);
  vertical-align: middle;
  font-family: 'Manrope', system-ui;
}

/* ===== CATALOGO - Foto do filtro ===== */
.cat-mat-th-foto { text-align: center; }
.cat-mat-td-foto { text-align: center; padding: 6px !important; width: 60px; }
.cat-mat-foto-wrap {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--og-glass-deep, rgba(15,23,42,0.05));
  border: 1px solid var(--og-hairline-soft, rgba(15,23,42,0.08));
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  transition: transform .12s, border-color .12s;
}
.cat-mat-foto-wrap:hover { transform: scale(1.06); border-color: var(--og-brand, #0E4F3B); }
.cat-mat-foto-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-mat-foto-fallback {
  width: 22px; height: 22px; color: var(--og-ink-3);
}

/* ===== CATÁLOGO — Popover flutuante do filtro (hover leve) ===== */
/* Aparece ao passar o mouse sobre foto/código/nome de uma linha da matriz    */
/* de manutenção. Mostra foto grande, ERP, nome, estoque, dimensões, peso e   */
/* substitutos clicáveis. Dark og-glass consistente com .cat-hotspot-tip.     */
.cat-mat-popover {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  min-width: 320px;
  max-width: 380px;
  padding: 14px;
  background: rgba(17, 24, 32, 0.96);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  font-family: 'Manrope', system-ui, sans-serif;
  line-height: 1.35;
}
.cat-mat-popover.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cat-mat-popover-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cat-mat-popover-foto {
  width: 96px; height: 96px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cat-mat-popover-foto img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}
.cat-mat-popover-foto-fallback {
  width: 40px; height: 40px;
  color: rgba(17, 24, 32, 0.35);
}
.cat-mat-popover-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-mat-popover-cod {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1204;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 6px;
  line-height: 1.2;
}
.cat-mat-popover-nome {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.3;
  word-break: break-word;
  margin-top: 2px;
}
.cat-mat-popover-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.cat-mat-popover-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  line-height: 1.2;
}
.cat-mat-popover-badge.is-ok {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.cat-mat-popover-badge.is-empty {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.cat-mat-popover-dim {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
}
.cat-mat-popover-pn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
}

.cat-mat-popover-subs {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cat-mat-popover-subs-titulo {
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.cat-mat-popover-sub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-mat-popover-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.cat-mat-popover-sub-item:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(245, 158, 11, 0.35);
  transform: translateX(1px);
}
.cat-mat-popover-sub-thumb {
  width: 40px; height: 40px;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cat-mat-popover-sub-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 3px;
  display: block;
}
.cat-mat-popover-sub-thumb-fallback {
  width: 20px; height: 20px;
  color: rgba(17, 24, 32, 0.35);
}
.cat-mat-popover-sub-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-mat-popover-sub-cod {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.cat-mat-popover-sub-nome {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.cat-mat-popover-sub-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}
.cat-mat-popover-sub-badge.is-ok {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.cat-mat-popover-sub-badge.is-empty {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.cat-mat-popover-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
}
.cat-mat-popover-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.16);
  border-top-color: #fbbf24;
  animation: catMatPopoverSpin 0.7s linear infinite;
}
@keyframes catMatPopoverSpin { to { transform: rotate(360deg); } }
.cat-mat-popover-cod-mini {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.4px;
}
.cat-mat-popover-loading-txt {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 640px) {
  .cat-mat-popover {
    min-width: 260px;
    max-width: 300px;
    padding: 12px;
  }
  .cat-mat-popover-foto { width: 76px; height: 76px; }
  .cat-mat-popover-nome { font-size: 12.5px; }
}

/* ========================================================================
   og-glass-v95-popover-filtro — Popover dark do filtro na matriz de manutencao
   Trigger: hover sobre foto/codigo/nome de linha na matriz. Mostra card
   flutuante com foto grande, ERP, nome, estoque, dimensoes e substitutos.
   Aplicado nas duas matrizes: admin (_catMatRenderPlano) e read-only
   (_busChassiRenderMatrizManut) via event delegation no body.
   ======================================================================== */
.cat-mat-popover {
  position: fixed; z-index: 10000;
  width: 340px; max-width: 92vw;
  background: rgba(20, 30, 26, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  padding: 14px;
  color: #f5f5f5;
  font-family: 'Manrope', system-ui;
  animation: catMatPopoverIn .18s ease-out;
}
@keyframes catMatPopoverIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cat-mat-popover-head {
  display: flex; gap: 12px; align-items: flex-start;
}
.cat-mat-popover-foto {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
}
.cat-mat-popover-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-mat-popover-foto svg { width: 32px; height: 32px; color: rgba(255,255,255,0.3); }

.cat-mat-popover-info { flex: 1; min-width: 0; }
.cat-mat-popover-cod {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 700;
  color: #d4a017; letter-spacing: 0.6px; text-transform: uppercase;
  margin-bottom: 4px;
}
.cat-mat-popover-nome {
  font-size: 13.5px; font-weight: 700; color: #ffffff;
  line-height: 1.3; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-mat-popover-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cat-mat-popover-badge-estoque {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 700;
}
.cat-mat-popover-badge-estoque.is-ok    { background: #16a34a; color: #ffffff; }
.cat-mat-popover-badge-estoque.is-empty { background: #dc2626; color: #ffffff; }
.cat-mat-popover-dim {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: rgba(255,255,255,0.6);
  font-family: 'JetBrains Mono', monospace;
}

.cat-mat-popover-substitutos {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.cat-mat-popover-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}
.cat-mat-popover-sub-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 200px; overflow-y: auto;
}
.cat-mat-popover-sub-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px;
  align-items: center; padding: 6px; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  cursor: pointer; transition: background .12s;
}
.cat-mat-popover-sub-item:hover { background: rgba(255,255,255,0.08); }
.cat-mat-popover-sub-foto {
  width: 40px; height: 40px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
}
.cat-mat-popover-sub-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-mat-popover-sub-foto svg { width: 18px; height: 18px; color: rgba(255,255,255,0.3); }
.cat-mat-popover-sub-body { min-width: 0; }
.cat-mat-popover-sub-nome {
  font-size: 11.5px; color: #ffffff; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.2;
}
.cat-mat-popover-sub-cod {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: rgba(255,255,255,0.55);
  font-weight: 700;
}
.cat-mat-popover-sub-estoque {
  padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.cat-mat-popover-sub-estoque.is-ok    { background: rgba(22,163,74,0.25); color: #4ade80; }
.cat-mat-popover-sub-estoque.is-empty { background: rgba(220,38,38,0.25); color: #f87171; }

.cat-mat-popover-loading {
  padding: 30px; text-align: center;
  font-size: 12px; color: rgba(255,255,255,0.5);
}

/* Máquinas (módulo novo) — 18/09/2026
   Tela Máquinas / Modelos / Importar (maquinas-ui.js). Prefixo .mq-; usa os tokens da casca
   (--line/--muted/--ink/--accent) pra funcionar no tema claro e escuro. Verde só como acento. */
#maquinasApp { padding-bottom: 30px; }
.mq-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.mq-tab { background: transparent; border: none; padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; font-family: inherit; transition: color .15s, border-color .15s; }
.mq-tab:hover { color: var(--ink); }
.mq-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.mq-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.mq-head h1 { font-family: 'Bricolage Grotesque', serif; font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; color: var(--ink); }
.mq-head .mq-head-sub { font-size: 12.5px; color: var(--muted); }
.mq-head .mq-head-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mq-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1200px) { .mq-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .mq-kpis { grid-template-columns: repeat(2, 1fr); } }
.mq-kpi { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.mq-kpi.clicavel { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.mq-kpi.clicavel:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.mq-kpi.ativo { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,141,107,.12); }
.mq-kpi .v { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; font-family: 'Bricolage Grotesque', serif; }
.mq-kpi .l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; margin-top: 4px; }
.mq-kpi.alerta .v { color: #dc2626; }
.mq-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.mq-busca { display: flex; align-items: center; gap: 8px; background: var(--panel, #fff); border: 1px solid var(--line-strong, #d1dbe3); border-radius: 9px; padding: 0 10px; min-width: 240px; flex: 1; max-width: 420px; }
.mq-busca svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.mq-busca input { border: none; outline: none; background: transparent; font: inherit; font-size: 13px; padding: 8px 0; width: 100%; color: var(--ink); }
.mq-tabela-wrap { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius, 12px); overflow: auto; }
.mq-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.mq-tabela th { text-align: left; padding: 10px 12px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--line); white-space: nowrap; background: rgba(0,0,0,.015); }
.mq-tabela td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mq-tabela tr.mq-linha { cursor: pointer; }
.mq-tabela tr.mq-linha:hover td { background: rgba(45,141,107,.05); }
.mq-tabela td.num, .mq-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-thumb { width: 52px; height: 40px; border-radius: 8px; object-fit: cover; display: block; background: #e5e7eb; border: 1px solid var(--line); }
.mq-thumb-ph { width: 52px; height: 40px; border-radius: 8px; background: #e5e7eb; color: #6b7280; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: .5px; border: 1px solid var(--line); }
.mq-mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: .2px; }
.mq-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mq-vencida { color: #dc2626; font-weight: 700; }
.mq-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: #e5e7eb; color: #374151; white-space: nowrap; }
.mq-pill.ativa   { background: rgba(34,197,94,.12);  color: #15803d; }
.mq-pill.inativa { background: #e5e7eb;              color: #4b5563; }
.mq-pill.vendida { background: rgba(59,130,246,.12); color: #1d4ed8; }
.mq-pill.sucata  { background: rgba(239,68,68,.12);  color: #b91c1c; }
.mq-pag { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 10px 0; font-size: 12.5px; color: var(--muted); }
.mq-vazio { padding: 36px; text-align: center; color: var(--muted); font-size: 13px; }
.mq-erro { padding: 26px; text-align: center; color: #dc2626; font-size: 13px; }
.mq-erro-inline { font-size: 12px; color: #dc2626; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Ficha */
.mq-ficha-head { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 18px 20px; margin-bottom: 16px; }
.mq-ficha-capa { width: 150px; height: 110px; border-radius: 12px; object-fit: cover; background: #e5e7eb; border: 1px solid var(--line); flex: none; }
.mq-ficha-capa-ph { width: 150px; height: 110px; border-radius: 12px; background: #e5e7eb; color: #6b7280; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex: none; border: 1px solid var(--line); }
.mq-ficha-info { flex: 1; min-width: 240px; }
.mq-ficha-chassi { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: .5px; line-height: 1.1; }
.mq-ficha-linha { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.mq-ficha-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.mq-ficha-meta .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.mq-ficha-meta .v { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mq-ficha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.mq-ficha-acoes .sep { flex: 1; }
.mq-subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.mq-subtab { background: transparent; border: none; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.mq-subtab:hover { color: var(--ink); }
.mq-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.mq-subtab:disabled { opacity: .45; cursor: not-allowed; }
.mq-card { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 16px 18px; margin-bottom: 14px; }
.mq-card-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mq-card-titulo .sep { flex: 1; }
.mq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mq-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 10px; }
@media (max-width: 800px) { .mq-grid-3 { grid-template-columns: 1fr; } .mq-campo.span2 { grid-column: auto; } }
.mq-campo label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.mq-campo .input, .mq-campo textarea.input { width: 100%; }
.mq-campo textarea.input { resize: vertical; min-height: 60px; }
.mq-campo.span2 { grid-column: span 2; }
.mq-cliente-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mq-cliente-nome { font-weight: 700; font-size: 14px; color: var(--ink); }
/* Galeria */
.mq-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mq-foto { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f8fafc; }
.mq-foto.capa { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(45,141,107,.25); }
.mq-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mq-foto-badge { position: absolute; top: 6px; left: 6px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: .4px; }
.mq-foto-acoes { display: flex; gap: 6px; padding: 6px; justify-content: flex-end; background: var(--panel, #fff); }
.mq-foto-legenda { font-size: 11px; color: var(--muted); padding: 0 8px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--panel, #fff); }
/* Revisões */
.mq-rev { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--panel, #fff); display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; }
@media (max-width: 800px) { .mq-rev { grid-template-columns: 1fr; } }
.mq-rev-data { font-weight: 800; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mq-rev-tipo { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.mq-rev-info { font-size: 13px; color: var(--ink-soft); display: flex; gap: 16px; flex-wrap: wrap; }
.mq-rev-info b { color: var(--ink); }
.mq-rev-obs { font-size: 12px; color: var(--muted); margin-top: 4px; }
.mq-rev-fotos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mq-rev-fotos img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.mq-rev-acoes { display: flex; gap: 6px; }
.mq-rev-form { border: 1px solid var(--accent); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; background: var(--panel, #fff); }
.mq-itens { width: 100%; border-collapse: collapse; font-size: 13px; }
.mq-itens th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.mq-itens td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mq-itens .input { width: 100%; padding: 6px 8px; font-size: 12.5px; }
.mq-itens td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-ac { position: relative; }
.mq-ac-list { position: absolute; top: calc(100% + 2px); left: 0; min-width: 100%; width: max-content; max-width: 460px; z-index: 10040; background: var(--og-surface, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px -8px rgba(20,40,32,.25); max-height: 240px; overflow: auto; padding: 4px; }
.mq-ac-item { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; }
.mq-ac-item:hover, .mq-ac-item.foco { background: var(--og-glass-deep, #eef4f1); }
.mq-ac-item .cod { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--brand-deep); flex: none; }
.mq-ac-item .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.mq-ac-item.info { cursor: default; color: var(--muted); }
.mq-totais { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 10px; font-size: 13px; }
.mq-totais .t { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Histórico */
.mq-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.mq-timeline li { position: relative; padding: 0 0 14px 14px; font-size: 13px; color: var(--ink-soft); }
.mq-timeline li::before { content: ''; position: absolute; left: -23px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel, #fff); box-shadow: 0 0 0 1px var(--line); }
.mq-timeline .d { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 8px; }
/* Modelos */
.mq-modelo-form { border-color: var(--accent); }
.mq-bloco-comp { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.mq-bloco-comp .t { font-weight: 700; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.mq-link { color: var(--brand-deep); text-decoration: none; font-size: 12px; }
.mq-link:hover { text-decoration: underline; }