:root {
    /* Identidade Visual Oriente Peças (Manual oficial)
       Paleta : #0a9492 / #0a9492 / #3aa84a / #9fcf2a / #bbe52a / #FFFFFF
       Primária   : verde médio teal (#0a9492)
       Profunda   : verde profundo (#0a9492) — usada em hover/destaque
       Suave      : derivado clarinho (#e0f5f4) para fundos
       Acento     : oliva-amarelo (#bbe52a) 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: #0a9492;
    --brand-deep: #0a9492;
    --brand-soft: #e0f5f4;

    /* Accent = brand (retrocompatibilidade do CSS antigo) */
    --accent: #0a9492;
    --accent-soft: #e0f5f4;
    --accent-deep: #0a9492;
    --orange: #0a9492;       /* nome legado, agora é verde brand */
    --orange-soft: #e0f5f4;

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

    /* Verdes da família (sucesso usa o oliva claro da marca) */
    --green: #3aa84a;
    --green-soft: #e6f7e4;
    --olive: #9fcf2a;
    --olive-soft: #f3f9dc;

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

    /* Tons escuros (sidebar) */
    --dark: #0a2a29;
    --dark-deep: #041515;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(10, 148, 146, 0.05);
    --shadow-card: 0 1px 3px rgba(10, 148, 146, 0.05), 0 4px 12px rgba(10, 148, 146, 0.05);
    --shadow-card-hover: 0 2px 4px rgba(10, 148, 146, 0.07), 0 8px 24px rgba(10, 148, 146, 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(10, 148, 146, 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(10, 148, 146, 0.18), transparent 70%),
      linear-gradient(180deg, #041515 0%, #0a2a29 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(187, 229, 42, 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(10,148,146,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(10, 148, 146, 0.72) 0%, rgba(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 0.22);
    box-shadow:
      0 12px 28px rgba(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 0.20) !important;
    box-shadow:
      0 8px 22px rgba(6, 113, 111, 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:#06716f"] { 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: #06716f; }
  .estq-seg button.on {
    background: #06716f;
    color: #fff;
    box-shadow: 0 2px 8px rgba(6,113,111,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: #0a9492; }
  .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: #06716f;
    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: #06716f;
    border-color: #06716f;
    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: #0a9492; color: #0a9492; }

  .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 #0a9492; 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: #0a9492;
    transform: translateY(-2px);
  }
  .prod-foto-item.principal { border: 2px solid #0a9492; }
  .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: #0a9492; 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 #0a9492; outline-offset: -3px; transform: scale(1.03); }
  .prod-foto-card.principal { border: 2px solid #0a9492; }
  .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: #0a9492; 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: #0a9492; 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: #0a9492; 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(6, 113, 111, 0.12);
  }
  .cat-modal-versao-card.ativa {
    border-color: #06716f;
    background: #f0fdf4;
    cursor: default;
    box-shadow: 0 0 0 3px rgba(6, 113, 111, 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(10, 148, 146,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;
  }

  /* ===== Ficha do produto (vitrine) — pele 2026 (08/10/2026: "tem como melhorar o visual?")
     Branco chapado, bordas finas, sem vidro nem cartão dentro de cartão. Tokens da pele
     (portal-2026.css) com fallback. ===== */
  .cat-vit-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(14, 35, 29, 0.45);
    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 {
    background: var(--panel, #fff);
    border: 1px solid var(--line, #e4e8e6);
    border-radius: 16px;
    width: 100%; max-width: 1000px; max-height: 92vh; overflow: auto;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45);
    animation: catVitSlide .22s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes catVitSlide { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

  /* cabeçalho fixo: código + família em cima, título embaixo; ações à direita */
  .cat-vit-modal-head {
    position: sticky; top: 0; z-index: 3;
    background: var(--panel, #fff);
    padding: 18px 24px 14px;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    border-bottom: 1px solid var(--line-soft, #eef1f0);
  }
  .cat-vit-modal-head-txt { min-width: 0; }
  .cat-vit-modal-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
  .cat-vit-modal-codigo {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    color: var(--accent-ink, #06716f); background: var(--accent-soft, #e0f5f4);
    padding: 2px 8px; border-radius: 6px;
  }
  .cat-vit-modal-grupo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #8a9893); }
  .cat-vit-modal-titulo { font-size: 18px; font-weight: 700; color: var(--ink, #17221e); letter-spacing: -.01em; line-height: 1.3; }
  .cat-vit-modal-acoes { display: flex; gap: 6px; flex: none; }
  .cat-vit-modal-close, .cat-vit-modal-copiar {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--panel, #fff); color: var(--ink-2, #5b6b65); border: 1px solid var(--line, #e4e8e6);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
  }
  .cat-vit-modal-copiar:hover { background: var(--accent-50, #effaf9); border-color: var(--accent-line, #cfe6e4); color: var(--accent-ink, #06716f); }
  .cat-vit-modal-close:hover { background: var(--red-soft, #fdeeee); border-color: #f0c9c9; color: var(--red, #c43d3d); }

  .cat-vit-modal-body {
    padding: 22px 24px 26px;
    display: grid; grid-template-columns: 400px 1fr; gap: 28px;
  }
  @media (max-width: 860px) {
    .cat-vit-modal-body { grid-template-columns: 1fr; }
  }

  /* galeria: foto quadrada em branco, setas e contador discretos, miniaturas pequenas */
  .cat-vit-modal-foto-principal {
    position: relative; aspect-ratio: 1;
    background: var(--photo, #fff); border: 1px solid var(--line, #e4e8e6); border-radius: 12px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
  }
  .cat-vit-modal-foto-principal img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
  .cat-vit-foto-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line, #e4e8e6); background: var(--panel, #fff); color: var(--ink-2, #5b6b65);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s; z-index: 2;
  }
  .cat-vit-foto-nav.prev { left: 10px; }
  .cat-vit-foto-nav.next { right: 10px; }
  .cat-vit-foto-nav:hover { background: var(--panel, #fff); color: var(--accent-ink, #06716f); border-color: var(--accent-line, #cfe6e4); }
  .cat-vit-foto-contador {
    position: absolute; right: 10px; bottom: 10px;
    background: var(--panel, #fff); border: 1px solid var(--line, #e4e8e6); color: var(--ink-2, #5b6b65);
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; pointer-events: none;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
  }
  .cat-vit-modal-thumbs {
    display: flex; gap: 8px; margin-top: 10px; 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(--line, #e4e8e6); border-radius: 99px; }
  .cat-vit-modal-thumb {
    flex: 0 0 auto; width: 72px; height: 72px; padding: 0;
    border-radius: 10px; border: 1px solid var(--line, #e4e8e6); background: var(--photo, #fff); overflow: hidden;
    cursor: pointer; opacity: 0.7; transition: border-color .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; border-color: var(--accent-line, #cfe6e4); }
  .cat-vit-modal-thumb.is-ativo { opacity: 1; border-color: var(--accent, #0a9492); box-shadow: 0 0 0 2px var(--accent-soft, #e0f5f4); }

  /* coluna de informações: blocos com rótulo pequeno em caixa alta */
  .cat-vit-modal-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .cat-vit-info-bloco {}
  .cat-vit-info-label {
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3, #8a9893); margin-bottom: 8px;
  }
  .cat-vit-info-valor { font-size: 13.5px; color: var(--ink, #17221e); line-height: 1.55; font-weight: 500; }

  /* fatos rápidos (Part Number / EAN / Unidade): azulejos claros */
  .cat-vit-fatos-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .cat-vit-fato { background: var(--bg, #f7f8f7); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .cat-vit-fato-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #8a9893); }
  .cat-vit-fato-valor { font-size: 13.5px; font-weight: 700; color: var(--ink, #17221e); overflow-wrap: anywhere; }
  .cat-vit-fato-valor.mono { font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 600; }

  /* disponibilidade: uma caixa só; o widget de estoque por local (.sl-*) entra sem borda própria */
  .cat-vit-disp-card { border: 1px solid var(--line, #e4e8e6); border-radius: 12px; padding: 4px 14px; }
  .cat-vit-disp-card .sl-box { border: 0; padding: 0; background: none; font-size: 13px; }
  .cat-vit-disp-card .sl-titulo { display: none; }
  .cat-vit-disp-card .sl-alerta { margin: 10px 0 4px; }
  .cat-vit-disp-saldo { font-size: 13px; color: var(--ink-2, #5b6b65); padding: 6px 0; }
  .cat-vit-disp-linha { display: flex; align-items: center; gap: 8px; padding: 9px 0 4px; border-top: 1px solid var(--line-soft, #eef1f0); font-size: 13px; color: var(--ink, #17221e); font-weight: 600; }
  .cat-vit-disp-linha strong { margin-left: auto; font-weight: 700; }
  .cat-vit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber, #c47a16); flex: none; }
  .cat-vit-disp-previsao { font-size: 12px; color: var(--ink-3, #8a9893); padding: 0 0 8px 16px; }

  /* medidas e peso: azulejos iguais aos fatos */
  .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: var(--bg, #f7f8f7); border-radius: 10px; padding: 10px 8px; text-align: center; }
  .cat-vit-medida-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #8a9893); }
  .cat-vit-medida-valor { font-size: 15px; font-weight: 700; color: var(--ink, #17221e); margin-top: 3px; font-variant-numeric: tabular-nums; }

  /* aplicação: linhas simples; referências: chips neutros em mono */
  .cat-vit-aps-list { display: flex; flex-direction: column; }
  .cat-vit-aps-item { padding: 8px 0; border-top: 1px solid var(--line-soft, #eef1f0); font-size: 13px; color: var(--ink, #17221e); }
  .cat-vit-aps-item:first-child { border-top: 0; padding-top: 0; }
  .cat-vit-aps-item strong { font-weight: 700; }
  .cat-vit-aps-obs { font-size: 12px; color: var(--ink-3, #8a9893); margin-top: 2px; }
  .cat-vit-refs { display: flex; gap: 6px; flex-wrap: wrap; }
  .cat-vit-ref {
    background: #f1f4f3; color: var(--ink-2, #5b6b65);
    font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
  }

  /* ===== Widget "estoque por local" (saldo-locais-widget.js) — padrão fora da ficha ===== */
  .sl-box { background: var(--panel, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--ink, #1f2937); }
  .sl-titulo { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #64748b); font-weight: 700; margin-bottom: 3px; }
  .sl-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft, #eef1f0); }
  .sl-linha:last-child { border-bottom: 0; }
  .sl-linha span { font-weight: 600; }
  .sl-ok { color: var(--good, #1d7f47); }
  .sl-preso { color: var(--amber, #92400e); }
  .sl-alerta {
    display: flex; gap: 8px; align-items: flex-start;
    background: var(--red-soft, #fef2f2); border: 1px solid #f0c9c9; border-radius: 8px;
    padding: 9px 11px; margin-bottom: 8px; color: var(--red, #b91c1c); font-size: 12.5px;
  }
  .sl-alerta svg { flex: none; margin-top: 1px; }

  /* ===== 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(10, 148, 146, 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(10,148,146,.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(10,148,146,0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(10,148,146,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(10,148,146,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(10,148,146,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(187, 229, 42, 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(10, 148, 146, 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(10,148,146,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(10,148,146,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(10, 148, 146, 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(10, 148, 146, 0.3);
  }
  .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 4px 12px rgba(10, 148, 146, 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: 14px 20px 24px; }
  .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(10, 148, 146, 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(10, 148, 146, 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(10, 148, 146, 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(10,148,146,0.18), rgba(10,148,146,0.10));
  border: 1px solid rgba(10,148,146,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(10,148,146,0.32), rgba(10,148,146,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(10,148,146,0.30);
}
.nav-item-meupainel svg {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  color: #bbe52a;
}
.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(10,148,146,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(10,148,146,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: #06716f;
  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, #0a9492, #bbe52a, #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(187, 229, 42, 0.9);
  font-weight: 800;
}
@keyframes heroSloganGlow {
  0%, 100% {
    text-shadow:
      0 0 8px  rgba(187,229,42,0.35),
      0 0 18px rgba(187,229,42,0.20);
  }
  50% {
    text-shadow:
      0 0 14px rgba(187,229,42,0.65),
      0 0 28px rgba(187,229,42,0.40),
      0 0 44px rgba(187,229,42,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: #06716f;
  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: #bbe52a;
  box-shadow: 0 0 0 3px rgba(187,229,42,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(10,148,146,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(10, 148, 146, 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: 10px 16px 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, #0a9492, #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: #0a9492; }
.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: #0a9492;
  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, #0a9492, #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(10, 148, 146, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.sep-btn-bipar:active { transform: scale(0.97); box-shadow: 0 2px 6px rgba(10,148,146,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(10,148,146,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(10,148,146,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, #0a9492, #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: #06716f (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: #06716f;
  --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(6,113,111,0.06), rgba(6,113,111,0.02));
  border-left: 1px solid rgba(6,113,111,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(6,113,111,0.18) transparent;
}
.iglass-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.iglass-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(6,113,111,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(6,113,111,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(6,113,111,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(6,113,111,0.08);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(6,113,111,0.04),
    0 1px 2px rgba(6,113,111,0.06),
    0 8px 20px -10px rgba(6,113,111,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(6,113,111,0.26);
}
/* Variante destacada — ticket ativo, com tint verde */
.iglass-card--accent {
  background: linear-gradient(135deg, rgba(45,138,85,0.18), rgba(6,113,111,0.10));
  border-color: rgba(6,113,111,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(6,113,111,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(6,113,111,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(6,113,111,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(6,113,111,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(6,113,111,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(6,113,111,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(6,113,111,0.06), rgba(6,113,111,0.14), rgba(6,113,111,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: #01b3b2;
  --og-green: #49cc47;
  --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(10,148,146,0.18);
  --accent-soft:  rgba(10,148,146,0.18);
  --green-soft:   rgba(58,168,74,0.18);
  --gold-soft:    rgba(187,229,42,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(187,229,42,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(10, 148, 146, 0.08), transparent),
    radial-gradient(ellipse 600px 400px at 100% 100%, rgba(187, 229, 42, 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(187,229,42,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(6, 113, 111, 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(6,113,111,.04);
  --og-glass-deeper: rgba(6,113,111,.03);
  --og-hairline: rgba(6,113,111,.16);
  --og-hairline-soft: rgba(6,113,111,.08);
  --og-spec: rgba(255,255,255,.9);
  --og-ink: #06716f;
  --og-ink-2: #475569;
  --og-ink-3: #64748b;
  --og-amber: #f59e0b;
  --og-amber-2: #f97316;
  --og-blue: #2563eb;
  --og-teal: #0a9492;
  --og-green: #2a9a3a;
  --og-red: #dc2626;
  --og-shadow: 0 12px 32px -8px rgba(6,113,111,.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, #0a9492) 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, #0a9492);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-green, #0a9492) 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, #0a9492); }
.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(10, 148, 146, 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(6,113,111,.4);
  transition: transform .15s, box-shadow .15s;
}
.cli360-pq-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(6,113,111,.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(6,113,111,.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:#06716f"` 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(6, 113, 111, 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: #06716f;
  transform: scale(1.06);
  box-shadow: 0 4px 12px -2px rgba(6, 113, 111, 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: #06716f;
  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(6, 113, 111, 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: #06716f;
  box-shadow: 0 0 0 3px rgba(6, 113, 111, 0.10);
}
.cp-target-manual-prefix {
  font-size: 11.5px;
  font-weight: 700;
  color: #06716f;
  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: #2a9a3a;
}
.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: #2a9a3a; }
.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(6, 113, 111, 0.08);
  color: #06716f;
}
#pedAcoesMenu .ped-acoes-item svg { flex-shrink: 0; color: var(--og-green, #06716f); }

/* === KPIs do Dashboard Diretoria — og-glass premium === */
.dir-kpi {
  position: relative;
  background: linear-gradient(155deg, #ffffff 0%, #f4faf7 100%);
  border: 1px solid rgba(6, 113, 111, 0.08);
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(6, 113, 111, 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, #06716f 0%, #0a9492 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(6, 113, 111, 0.18);
  border-color: rgba(6, 113, 111, 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: #06716f;
  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(6, 113, 111, 0.10) 0%, rgba(10, 148, 146, 0.06) 100%);
  color: #06716f;
  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(6, 113, 111, 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%, #0a9492 100%); }
.dir-kpi--capital .dir-kpi-icon { color: #1d6b40; }

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

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

.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, #2a9a3a 0%, #22c55e 100%); }
.dir-kpi--abc-a .dir-kpi-icon  { color: #2a9a3a; background: linear-gradient(135deg, rgba(21,128,61,0.12), rgba(34,197,94,0.06)); }
.dir-kpi--abc-a .dir-kpi-valor { color: #2a9a3a; }
.dir-kpi--abc-a .dir-kpi-trend { background: rgba(21,128,61,0.09); color: #2a9a3a; }

.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, #06716f 0%, #4CBF8E 100%); }
.dir-kpi--abc-total .dir-kpi-icon  { color: #06716f; }
.dir-kpi--abc-total .dir-kpi-valor { color: #06716f; }

/* 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(6, 113, 111, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(6, 113, 111, 0.08);
}
.abc-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.abc-toolbar-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #06716f;
  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(6, 113, 111, 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: #06716f;
  box-shadow: 0 0 0 3px rgba(6, 113, 111, 0.10);
}
.abc-toolbar-busca:focus-within svg { color: #06716f; }
.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: #06716f;
  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(6, 113, 111, 0.35);
}
.abc-toolbar-btn:hover {
  background: #137a4c;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 0.08);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(6, 113, 111, 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, #06716f 0%, #0a9492 100%);
  opacity: 0.85;
}
.dir-panel:hover {
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05), 0 16px 32px -12px rgba(6, 113, 111, 0.14);
  border-color: rgba(6, 113, 111, 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: #06716f;
  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: #06716f;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 113, 111, 0.08);
  transition: background .15s ease;
  white-space: nowrap;
}
.dir-panel-link:hover { background: rgba(6, 113, 111, 0.14); }

.dir-panel--fat::before        { background: linear-gradient(90deg, #0a9492 0%, #4CBF8E 100%); }
.dir-panel--categoria::before  { background: linear-gradient(90deg, #1d6b40 0%, #0a9492 100%); }
.dir-panel--campanhas::before  { background: linear-gradient(90deg, #137a4c 0%, #4CBF8E 100%); }
.dir-panel--canais::before     { background: linear-gradient(90deg, #06716f 0%, #0a9492 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: #06716f;
  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, #06716f 0%, #4CBF8E 100%); }

/* Sub-painel (grafico dentro de painel og-glass) */
.dir-subpanel {
  background: #fff;
  border: 1px solid rgba(6, 113, 111, 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(6, 113, 111, 0.16);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #06716f;
  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(6, 113, 111, 0.32); }
.dir-select:focus {
  outline: none;
  border-color: #06716f;
  box-shadow: 0 0 0 3px rgba(6, 113, 111, 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(6, 113, 111, 0.10);
}
.metas-ano-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(6, 113, 111, 0.08);
  margin-bottom: 16px;
}
.metas-ano-titulo {
  font-size: 11px;
  color: #06716f;
  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(6, 113, 111, 0.08); color: #06716f; }
.metas-ano-help {
  font-size: 12.5px;
  color: #475569;
  background: rgba(6, 113, 111, 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: #06716f;
  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(6, 113, 111, 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(6, 113, 111, 0.28); }
.metas-ano-item:focus-within {
  border-color: #06716f;
  box-shadow: 0 0 0 3px rgba(6, 113, 111, 0.10);
}
.metas-ano-item--corrente {
  border-color: #06716f;
  background: linear-gradient(135deg, #fff 0%, rgba(6, 113, 111, 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: #06716f;
  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(6, 113, 111, 0.08);
  flex-wrap: wrap;
}
.metas-ano-total {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}
.metas-ano-total strong {
  color: #06716f;
  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(6, 113, 111, 0.16);
}
.metas-ano-btn--cancel:hover {
  background: #f8fafc;
  border-color: rgba(6, 113, 111, 0.30);
  color: #06716f;
}
.metas-ano-btn--save {
  background: #06716f;
  color: #fff;
  border: 1px solid #06716f;
  box-shadow: 0 4px 10px -3px rgba(6, 113, 111, 0.35);
}
.metas-ano-btn--save:hover {
  background: #137a4c;
  border-color: #137a4c;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(6, 113, 111, 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(6, 113, 111, 0.10);
}
.cp-forn-kpis-head {
  margin-bottom: 16px;
}
.cp-forn-kpis-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #06716f;
  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(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 0.18);
  border-color: rgba(6, 113, 111, 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(6, 113, 111, 0.40);
  background: linear-gradient(155deg, #ffffff 0%, #d1fae5 100%);
  box-shadow: 0 4px 12px rgba(6, 113, 111, 0.15), 0 16px 40px -12px rgba(6, 113, 111, 0.25);
}
.cp-forn-kpi--escolhida::before {
  background: linear-gradient(90deg, #06716f 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: #06716f;
  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: #06716f;
  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: #06716f; }
.cp-forn-kpi-cond {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
  padding: 6px 10px;
  background: rgba(6, 113, 111, 0.05);
  border-radius: 8px;
  border-left: 2px solid rgba(6, 113, 111, 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: #06716f;
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(6, 113, 111, 0.35);
}
.cp-forn-kpi-btn--escolher:hover {
  background: #137a4c;
  box-shadow: 0 6px 14px -3px rgba(6, 113, 111, 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(6, 113, 111, 0.08);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #06716f;
}

/* === Tabela horizontal Resumo por Fornecedor (troca cards por linhas) === */
.cp-forn-tabela-wrap {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid rgba(6, 113, 111, 0.10);
}
.cp-forn-tabela-head { margin-bottom: 14px; }
.cp-forn-tabela-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #06716f;
  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(6, 113, 111, 0.10);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(6, 113, 111, 0.10);
}
.cp-forn-tabela thead th {
  background: linear-gradient(135deg, rgba(6, 113, 111, 0.06) 0%, rgba(10, 148, 146, 0.04) 100%);
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: #06716f;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  text-align: left;
  border-bottom: 2px solid rgba(6, 113, 111, 0.14);
  white-space: nowrap;
}
.cp-forn-tabela tbody td {
  padding: 12px 14px;
  border-top: 1px solid rgba(6, 113, 111, 0.06);
  font-size: 13px;
  color: #0f172a;
  vertical-align: middle;
}
.cp-forn-tabela tbody tr:hover { background: rgba(6, 113, 111, 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(6, 113, 111, 0.06);
  border-top-color: rgba(6, 113, 111, 0.18);
}
.cp-forn-linha--escolhida:hover td { background: rgba(6, 113, 111, 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: #06716f; 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(6, 113, 111, 0.10);
  color: #06716f;
}
.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(6, 113, 111, 0.08) !important;
}
.cp-forn-cel-editable:hover::after {
  content: 'editar';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  color: #06716f;
  opacity: 0.5;
}
.cp-forn-cel-editing { background: rgba(6, 113, 111, 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: #06716f;
  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: #2a9a3a; }
.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: #06716f; 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: #06716f;
  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: #06716f;
  background: rgba(6, 113, 111, 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: #2a9a3a; }

/* === 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(6,113,111,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: #2a9a3a; }
.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: #2a9a3a; }
.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: #2a9a3a; 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(6,113,111,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: #2a9a3a;
  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(6, 113, 111, 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: #06716f;
  box-shadow: 0 0 0 3px rgba(6, 113, 111, 0.10);
}
.cp-busca-icon { color: #94a3b8; flex-shrink: 0; }
.cp-busca-wrap:focus-within .cp-busca-icon { color: #06716f; }
.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: #06716f;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(6, 113, 111, 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(6, 113, 111, 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(6, 113, 111, 0.08);
  color: #06716f;
}
#cpExportarMenu .cp-export-item svg { color: #06716f; 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(6, 113, 111, 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(6, 113, 111, 0.12) 0%, rgba(10, 148, 146, 0.08) 100%);
  color: #06716f;
}
.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: #06716f; 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(6, 113, 111, 0.16);
}
.cp-reabrir-btn--cancel:hover {
  background: #f8fafc;
  border-color: rgba(6, 113, 111, 0.30);
  color: #06716f;
}
.cp-reabrir-btn--ok {
  background: #06716f;
  color: #fff;
  border: 1px solid #06716f;
  box-shadow: 0 4px 10px -3px rgba(6, 113, 111, 0.35);
}
.cp-reabrir-btn--ok:hover {
  background: #137a4c;
  border-color: #137a4c;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(6, 113, 111, 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: #2a9a3a;
  background-image: linear-gradient(135deg, #16a34a, #2a9a3a);
  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: #2a9a3a;
  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,#01b3b2,#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, #06716f 0%, #1d6b40 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px -4px rgba(6,113,111,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: #06716f; 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, #0a9492); color: var(--og-green, #0a9492); }
.kn-kpi-per-btn.on { background: var(--og-green, #0a9492); border-color: var(--og-green, #0a9492); 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: #2a9a3a; --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: #2a9a3a;
  background-image: linear-gradient(135deg, #16a34a 0%, #2a9a3a 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: #2a9a3a;
  background-image: linear-gradient(135deg, #16a34a 0%, #2a9a3a 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, #06716f, #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: #06716f;
  box-shadow: 0 0 0 3px rgba(6, 113, 111, 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: #06716f;
  color: #06716f;
}
.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, #06716f, #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(6, 113, 111, 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; }

/* ---- Board com cabeçalhos fixos e cards em lotes de 20 (09/10, Pablo: "quando os cabeçalhos
   chegarem abaixo do header ele precisa ficar ali pra sempre") ----
   A página (.main) rola normalmente com filtros/KPIs; quando o board encosta no header+abas do app
   ele GRUDA (position:sticky) e passa a ter a altura da janela: só o corpo de cada coluna rola
   (cabeçalho com título, contador, total R$ e barra fica parado). --kn-topo = altura do header +
   barra de abas (o JS mede em _knMedirTopo; o valor abaixo é o padrão). Celular (<=768px) mantém o
   layout antigo: colunas empilhadas, sem sticky. ---- */
.kn-wrap { --kn-topo: calc(var(--topbar-height, 71px) + 38px); --kn-folga: 12px; --kn-fundo: #f3f6f4; }
:root[data-theme="dark"] .kn-wrap { --kn-fundo: var(--panel); }
/* Sentinela do carregamento por lotes: 1px que não ocupa espaço (come o gap de cima) e não aparece. */
.kn-wrap .kn-col-sentinela { flex: none; height: 1px; margin: -10px 0 -1px; pointer-events: none; visibility: hidden; }
/* Spinner discreto no fim da lista enquanto ainda há cards pra vir. */
.kn-wrap .kn-col-mais { flex: none; display: flex; justify-content: center; padding: 2px 0 8px; }
.kn-wrap .kn-col-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--col-cor, var(--og-green)) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--col-cor, var(--og-green)) 65%, transparent);
  animation: kn-spin 0.9s linear infinite;
}
@keyframes kn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kn-wrap .kn-col-spin { animation: none; } }
@media (min-width: 769px) {
  .kn-wrap:has(> .kn-board) { padding-bottom: var(--kn-folga); }
  .content:has(#page-meu-kanban.active .kn-board) { padding-bottom: 0 !important; }
  .kn-wrap .kn-board {
    position: sticky; top: var(--kn-topo); z-index: 3;
    height: calc(100vh - var(--kn-topo) - var(--kn-folga));
    min-height: 320px;
    overflow-x: auto; overflow-y: hidden;   /* o scroll horizontal continua no board; o vertical é de cada coluna */
    align-items: stretch;
    margin: 0 -8px; padding: 10px 8px 8px;  /* respiro pra sombra dos cards/cabeçalhos não ser cortada */
    background: var(--kn-fundo);            /* tapa o que passa por baixo (KPIs subindo) */
  }
  .kn-wrap .kn-col { min-height: 0; }
  .kn-wrap .kn-col-head { flex: none; }
  .kn-wrap .kn-col > .kn-col-add { flex: none; }
  .kn-wrap .kn-col-drop {
    flex: 1 1 0; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    margin: 0 -4px; padding: 4px;
  }
  /* Os cards têm overflow:hidden e, dentro de uma coluna de altura fixa, encolheriam até sumir. */
  .kn-wrap .kn-col-drop > .kn-card, .kn-wrap .kn-col-drop > .kn-col-empty { flex: none; }
  .kn-wrap .kn-col-drop > .kn-col-empty { flex: 1 0 auto; }
  /* Barras de rolagem finas e discretas (coluna na vertical, board na horizontal). */
  .kn-wrap .kn-col-drop::-webkit-scrollbar { width: 6px; }
  .kn-wrap .kn-board::-webkit-scrollbar { height: 8px; }
  .kn-wrap .kn-col-drop::-webkit-scrollbar-track, .kn-wrap .kn-board::-webkit-scrollbar-track { background: transparent; }
  .kn-wrap .kn-col-drop::-webkit-scrollbar-thumb, .kn-wrap .kn-board::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--og-ink-3) 32%, transparent); border-radius: 6px;
  }
  .kn-wrap .kn-col-drop::-webkit-scrollbar-thumb:hover, .kn-wrap .kn-board::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--og-ink-3) 55%, transparent);
  }
  @supports not selector(::-webkit-scrollbar) {
    .kn-wrap .kn-col-drop, .kn-wrap .kn-board { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--og-ink-3) 38%, transparent) transparent; }
  }
}

/* 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; }
/* WhatsApp no card indica atendimento pendente; a conversa abre pelo card. */
.kn-wrap .kn-card-wa-btn {
  position: relative; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; background: #12834c; color: #fff;
  display: grid; place-items: center;
}
.kn-wrap .kn-card-wa-btn svg { flex: none; }
.kn-wrap .kn-card-wa-count {
  font-size: 9px; font-weight: 800; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.kn-wrap .kn-card-wa-count--compact { font-size: 7px; }
.kn-wrap .kn-card--wa-pendente { outline: 2px solid #12834c; outline-offset: -2px; }
.kn-wrap .kn-card-wa-btn--aguardando::after {
  content: ''; position: absolute; inset: -4px; border: 2px solid #d97706;
  border-radius: 50%; pointer-events: none; animation: kn-wa-espera 1.8s ease-out infinite;
}
.kn-wrap .kn-card--wa-sem-resposta {
  outline: 3px solid #d97706; outline-offset: -3px;
  box-shadow: inset 4px 0 #d97706;
}
@keyframes kn-wa-espera {
  0%, 100% { opacity: 1; transform: scale(1); }
  65% { opacity: .2; transform: scale(1.28); }
}
@media (prefers-reduced-motion: reduce) {
  .kn-wrap .kn-card-wa-btn--aguardando::after { animation: none; }
}
.tms-tab-wa-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; margin-left: 6px;
  border-radius: 50%; background: #b42318;
}
.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; }
/* Chip "Análise de crédito" (Serasa): clicável, spinner enquanto a consulta roda. */
.kn-wrap .kn-serasa-chip { cursor: pointer; font-family: inherit; line-height: 1.3; }
.kn-wrap .kn-serasa-chip:hover { filter: brightness(0.96); }
.kn-wrap .kn-serasa-chip--sem-clique { cursor: default; }
.kn-serasa-spin, .wa-serasa-spin {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  display: inline-block; box-sizing: border-box;
  animation: kn-serasa-giro .8s linear infinite;
}
@keyframes kn-serasa-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kn-serasa-spin, .wa-serasa-spin { animation: none; border-right-color: currentColor; opacity: .55; }
}
.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,#0a9492); 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,#0a9492); }
#mkAutomFlowCanvas .drawflow-node .drawflow_content_node { width: 100%; padding: 10px 12px; box-sizing: border-box; }
#mkAutomFlowCanvas .connection .main-path { stroke: var(--og-green,#0a9492); stroke-width: 2.5px; }
#mkAutomFlowCanvas .drawflow-node .input, #mkAutomFlowCanvas .drawflow-node .output { background: var(--og-green,#0a9492); height: 12px; width: 12px; }
#mkAutomFlowCanvas .drawflow-node.mk-autflow-gatilho { border-top-color: var(--og-green,#0a9492); }
#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,#0a9492); }
.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:#06716f / #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:#06716f"],
button[style*="background: #06716f"],
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, #06716f"],
button[style*="linear-gradient(145deg, #2fe06f"],
a[style*="background:#06716f"],
a[style*="background: #06716f"],
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, #06716f); 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, #06716f); 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, #06716f); 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, #06716f); 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, #06716f); 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(6, 113, 111, 0.08); color: var(--og-brand, #06716f); 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, #06716f); }
.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, #06716f);
  background: rgba(6, 113, 111, 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, #0a9492);
}

/* 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(6, 113, 111, 0.06);
  color: var(--og-ink-2);
  border: 1px solid var(--og-hairline);
}
.cat-mat-badge-sugerido a {
  color: var(--og-brand, #06716f);
  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, #06716f); }
.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(10,148,146,.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(10,148,146,.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: #2a9a3a; }
.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(10,148,146,.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; }
/* Plano do chassi (15/10/2026) — cartão "Plano de revisões" da aba Revisões: o plano do modelo com os
   ajustes só desta máquina. Só tokens da pele (--accent/--muted/--line/--ink…): o modo escuro vem junto. */
.mq-tit-normal { text-transform: none; letter-spacing: 0; font-weight: 500; }
.mq-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mq-chip-neutro, .mq-chip-ajuste, .mq-chip-removido { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 18px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.mq-chip-neutro { background: var(--chip); color: var(--ink-2); border: 1px solid var(--line); }
.mq-chip-ajuste { background: var(--accent-50); color: var(--accent-ink); border: 1px solid var(--accent-line); }
.mq-chip-removido { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }
.mq-plano-regua { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; }
.mq-plano-marco { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 96px; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.mq-plano-marco .h { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mq-plano-marco .n { font-size: 11.5px; color: var(--muted); }
.mq-plano-marco:hover:not(:disabled) { border-color: var(--accent-line); background: var(--hover); }
.mq-plano-marco.ativo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-50); }
.mq-plano-marco:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mq-plano-marco:disabled { cursor: not-allowed; opacity: .5; }
.mq-plano-ajustada { color: var(--accent-ink); font-weight: 700; }   /* "6 peças · ajustada" no marco com ajuste */
.mq-plano-tabela td { padding: 8px; }
.mq-plano-tabela th.num { text-align: right; }
.mq-plano-tabela tr.mq-ajustado td { background: var(--accent-50); }
.mq-plano-tabela tr.mq-removido .riscado { text-decoration: line-through; color: var(--muted); }
.mq-plano-tabela .mq-plano-col-cod { width: 96px; }
.mq-plano-tabela .mq-plano-col-qtd { width: 56px; }
.mq-plano-tabela .mq-plano-col-qtdin { width: 92px; }
.mq-plano-tabela .mq-plano-col-preco { width: 128px; }
.mq-plano-tabela .mq-plano-col-est { width: 104px; }
.mq-plano-tabela .mq-plano-col-marca, .mq-plano-tabela .mq-plano-col-acoes { width: 1%; }   /* do tamanho do conteúdo */
/* com ajuste em alguma revisão, a coluna da marca tem largura fixa ("Adicionado neste chassi" + "Voltar ao plano
   do modelo" numa linha; se a fonte for mais larga, o botão desce): as colunas não pulam ao trocar de revisão */
.mq-plano--com-ajuste .mq-plano-tabela:not(.mq-plano-tabela-edicao) .mq-plano-col-marca { width: 336px; }
.mq-plano--com-ajuste .mq-plano-tabela:not(.mq-plano-tabela-edicao) .mq-plano-marca { flex-wrap: wrap; row-gap: 4px; }
.mq-chip-inline { margin-left: 8px; vertical-align: 1px; }
.mq-plano-troca-busca { max-width: 440px; }
.mq-plano-troca-busca .input { width: 100%; }
.mq-plano-tabela .mq-plano-qtd { width: 80px; }
.mq-plano-sem { padding: 12px 8px; }
.mq-plano-era { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mq-plano-marca { display: flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.mq-plano-acoes-linha { display: flex; justify-content: flex-end; gap: 14px; white-space: nowrap; }
.mq-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-ink); cursor: pointer; white-space: nowrap; }
.mq-link-btn:hover { text-decoration: underline; }
.mq-link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mq-link-btn.mq-link-perigo { color: var(--red); }
.mq-sem-estoque { color: var(--red); font-weight: 600; }
.mq-plano-rodape { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.mq-plano-rodape b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mq-plano-rodape .sep { flex: 1; }
.mq-plano-aviso-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); font-size: 12.5px; color: var(--ink-2); }
.mq-plano-vazio { padding: 18px 4px; font-size: 13px; color: var(--ink-2); }
.mq-plano-edicao { border: 1px solid var(--accent-line); border-radius: 12px; padding: 12px 14px; }
.mq-plano-nota { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.mq-plano-nota b { color: var(--ink); }
.mq-plano-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mq-plano-add-busca { flex: 1; min-width: 240px; max-width: 520px; }
.mq-plano-add-busca .input { width: 100%; }
.mq-plano-add-qtd { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mq-plano-add-qtd .input { width: 80px; }
/* Trocas do chassi (15/10/2026): troca de peça vale em todas as revisões do chassi; bloco acima da régua */
.mq-plano-trocas { margin: 0 0 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.mq-plano-trocas-tit { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 2px; }
.mq-plano-trocas-lista { list-style: none; margin: 0; padding: 0; }
/* o texto quebra linha dentro de .mq-plano-troca-txt; o botão fica sempre à direita, no alto */
.mq-plano-troca { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 2px 12px; padding: 4px 0; font-size: 12.5px; color: var(--ink-2); }
.mq-plano-troca + .mq-plano-troca { border-top: 1px solid var(--line); }
.mq-plano-troca-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.mq-plano-troca > .mq-link-btn { flex: 0 0 auto; white-space: nowrap; }
.mq-plano-troca .mq-mono { font-weight: 700; color: var(--ink); }
.mq-plano-troca-seta { color: var(--accent-ink); font-weight: 700; }
.mq-plano-troca-onde { color: var(--muted); }
.mq-plano-troca.sem-efeito .mq-plano-troca-de, .mq-plano-troca.sem-efeito .mq-plano-troca-para { color: var(--muted); }
.mq-plano-era-troca { color: var(--accent-ink); font-weight: 600; }   /* "A troca vale em todas as revisões…" na edição */
.cat-mat-troca { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; }   /* Busca Chassi */
.cat-mat-troca .mq-plano-era { margin-top: 0; }
.cat-mat-troca-topo { margin-top: 4px; }   /* Busca Chassi: "Neste chassi, a 3001 entra no lugar da 2095…" */
/* 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; }

/* ============================================================
   ABA SERASA do Cliente 360 (prefixo .sera-) — relatório avançado PJ/PF.
   Cores de situação seguem o contrato do chip (Kanban/WhatsApp usam as mesmas):
   processando cinza, ok verde, aviso amarelo, hoje laranja, sem/vencida/erro vermelho.
   ============================================================ */
.cli360-tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cli360-tab span { text-align: center; line-height: 1.15; }
.sera-aba { display: flex; flex-direction: column; gap: 14px; }
.sera-nd { color: var(--muted, #708078); }
.sera-mock {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 9px 14px; border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fef3c7, #fef3c7 10px, #fde68a 10px, #fde68a 20px);
  border: 1px solid #f59e0b; color: #78350f; font-size: 12px;
}
.sera-mock b { font-size: 12.5px; letter-spacing: .06em; font-weight: 800; }
.sera-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft);
}
.sera-top-info { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; min-width: 0; }
.sera-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; border: 1px solid; white-space: nowrap;
}
.sera-chip--proc { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
.sera-chip--ok { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.sera-chip--aviso { color: #a16207; background: #fef9c3; border-color: #fde68a; }
.sera-chip--hoje { color: #c2410c; background: #ffedd5; border-color: #fed7aa; }
.sera-chip--sem, .sera-chip--vencida, .sera-chip--erro { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.sera-last { display: flex; flex-direction: column; gap: 1px; }
.sera-last-lbl { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sera-last-val { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sera-last-sub { font-size: 11px; color: var(--ink-soft); }
.sera-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 18px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s;
}
.sera-btn:focus-visible, .sera-link:focus-visible, .sera-rc:focus-visible, .sera-acc-head:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.sera-btn--pri { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(10,148,146,.3); }
.sera-btn--pri:hover:not(:disabled) { filter: brightness(1.08); }
.sera-btn--sec { background: var(--panel); color: var(--brand-deep); border-color: var(--brand); }
.sera-btn--sec:hover:not(:disabled) { background: var(--brand-soft); }
.sera-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.sera-spin {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  border: 2px solid currentColor; border-right-color: transparent; animation: sera-gira .8s linear infinite;
}
@keyframes sera-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sera-spin { animation-duration: 2.4s; } .sera-skel-bloco { animation: none !important; } }

.sera-aviso {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; font-size: 12.5px;
}
.sera-aviso--erro { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.sera-aviso--vista { background: #fef9c3; border-color: #fde68a; color: #854d0e; justify-content: space-between; }
.sera-vazio-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 34px 22px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--ink-soft);
}
.sera-vazio-ico { color: var(--brand); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); }
.sera-vazio-t { font-size: 14px; font-weight: 800; color: var(--ink); }
.sera-vazio-p { font-size: 12.5px; max-width: 460px; line-height: 1.45; }
.sera-vazio-card--proc .sera-spin { width: 26px; height: 26px; border-width: 3px; color: var(--brand); }
.sera-vazio { padding: 12px; font-size: 12.5px; color: var(--ink-soft); }
.sera-skel { display: flex; flex-direction: column; gap: 14px; }
.sera-skel-linha { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
.sera-skel-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sera-skel-bloco {
  border-radius: 12px; background: linear-gradient(90deg, #eef2ef 25%, #f6f9f7 50%, #eef2ef 75%);
  background-size: 200% 100%; animation: sera-brilho 1.3s ease-in-out infinite;
}
@keyframes sera-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.sera-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px; }
.sera-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.sera-score { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sera-gauge { width: 100%; max-width: 280px; height: auto; display: block; }
.sera-g-num { font-size: 40px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.sera-g-sub { font-size: 11px; fill: var(--ink-soft); }
.sera-g-tick { font-size: 10px; fill: var(--muted, #708078); }
.sera-score-info { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.sera-pill {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  color: var(--c, var(--ink-soft)); background: color-mix(in srgb, var(--c, #64748b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #64748b) 35%, transparent);
}
.sera-pill--ok { --c: #15803d; } .sera-pill--neg { --c: #b91c1c; } .sera-pill--aviso { --c: #a16207; }
.sera-score-modelo { font-size: 11.5px; color: var(--ink-soft); }
.sera-score-prob { font-size: 12.5px; color: var(--ink); }
.sera-score-msg { font-size: 12px; color: var(--ink-soft); max-width: 340px; line-height: 1.4; }
.sera-lateral { display: flex; flex-direction: column; gap: 10px; }
.sera-total { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid; }
.sera-total--ok { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.sera-total--neg { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.sera-total-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.7); flex-shrink: 0; }
.sera-total-lbl { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.sera-total-val { font-size: 17px; font-weight: 800; }
.sera-limite { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.sera-mini-lbl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.sera-limite-val { font-size: 19px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sera-limite-val--txt { font-size: 14px; }

.sera-sec { display: flex; flex-direction: column; gap: 8px; }
.sera-h { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; }
.sera-h-sub { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted, #708078); }
.sera-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sera-rc {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid;
  font: inherit; text-align: left;
}
button.sera-rc { cursor: pointer; }
.sera-rc--ok { background: #f0fdf4; border-color: #bbf7d0; }
.sera-rc--neg { background: #fef2f2; border-color: #fecaca; }
button.sera-rc--neg:hover { background: #fee2e2; }
.sera-rc-nome { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.sera-rc-qtd { font-size: 22px; font-weight: 800; color: #b91c1c; line-height: 1.1; }
.sera-rc-val { font-size: 12px; font-weight: 700; color: #b91c1c; font-variant-numeric: tabular-nums; }
.sera-rc-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: #15803d; margin-top: 2px; }

.sera-grade { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sera-kv { margin: 0; padding: 9px 12px; background: var(--panel); min-width: 0; border-bottom: 1px solid var(--line); }
.sera-kv:nth-child(odd):not(.sera-kv--largo) { border-right: 1px solid var(--line); }
.sera-kv--largo { grid-column: 1 / -1; }
.sera-kv dt { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.sera-kv dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sera-kv dd a { color: var(--brand-deep); }
.sera-tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.sera-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.sera-tab th { text-align: left; padding: 8px 10px; background: var(--bg-soft); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; border-bottom: 1px solid var(--line); }
.sera-tab td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.sera-tab tbody tr:last-child td { border-bottom: 0; }
.sera-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sera-tab .ctr { text-align: center; }
.sera-tab td.mono { font-family: ui-monospace, monospace; white-space: nowrap; }
.sera-tab tr.clicavel { cursor: pointer; }
.sera-tab tr.clicavel:hover td { background: var(--bg-soft); }
.sera-tab tr.atual td { background: #fef9c3; }
.sera-restr { color: #b91c1c; display: inline-flex; }
.sera-tag { display: inline-block; font-size: 9.5px; font-weight: 800; color: #a16207; background: #fef9c3; border-radius: 5px; padding: 1px 6px; }
.sera-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--brand-deep); cursor: pointer; text-decoration: underline; }
.sera-st { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: #f1f5f9; color: #475569; }
.sera-st--concluida { background: #dcfce7; color: #15803d; }
.sera-st--erro { background: #fee2e2; color: #b91c1c; }
.sera-st-erro { font-size: 11px; color: #b91c1c; margin-top: 3px; }

.sera-accs { display: flex; flex-direction: column; gap: 6px; }
.sera-acc { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); overflow: hidden; }
.sera-acc.on { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.sera-acc-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: 0; font: inherit; cursor: pointer; text-align: left; color: var(--ink); }
.sera-acc-head:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sera-acc-tit { font-size: 13px; font-weight: 800; flex: 1; min-width: 0; }
.sera-acc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: 11.5px; }
.sera-acc-qtd { font-weight: 800; color: #b91c1c; background: #fee2e2; border-radius: 999px; padding: 1px 9px; }
.sera-acc-val { font-weight: 800; color: #b91c1c; font-variant-numeric: tabular-nums; }
.sera-acc-per { color: var(--ink-soft); }
.sera-chev { flex-shrink: 0; transition: transform .15s; color: var(--ink-soft); }
.sera-acc.on .sera-chev { transform: rotate(180deg); }
.sera-acc-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.sera-nota { font-size: 11px; color: var(--ink-soft); }

.sera-barras { display: flex; align-items: flex-end; gap: 5px; height: 112px; margin-top: 8px; }
.sera-barra { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; }
.sera-barra-n { font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.sera-barra-col { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--brand); }
.sera-barra-m { font-size: 9px; color: var(--muted, #708078); white-space: nowrap; }
.sera-rodape { font-size: 11px; color: var(--muted, #708078); text-align: center; padding: 4px 0 2px; }

@media (max-width: 768px) {
  .sera-hero { grid-template-columns: 1fr; }
  .sera-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sera-grade { grid-template-columns: 1fr; }
  .sera-kv:nth-child(odd):not(.sera-kv--largo) { border-right: 0; }
  .sera-top { flex-direction: column; align-items: stretch; }
  .sera-top .sera-btn { width: 100%; }
  .sera-skel-linha { grid-template-columns: 1fr; }
  .sera-acc-head { flex-wrap: wrap; }
  .sera-acc-meta { justify-content: flex-start; }
}

/* =========================================================
   Meu Kanban — TOPO compacto (prefixo .kn-top-)  [UX 09/10/2026, pedido do Pablo]
   Uma linha só: [breadcrumb] [busca] [Mês] [Filtrar] ............ [abas] [funil] [vendedor] [+ Nova] [engrenagem]
   + faixa de indicadores (KPIs) menor e recolhível.
   - As quebras usam CONTAINER QUERY no próprio .kn-header (largura real do painel, que muda com o menu
     lateral fixo/recolhido), não a largura da janela.
   - Mesma altura (--kn-top-h) e raio (pílula) em todos os controles; cores = tokens do portal.
   - O portal-2026.css (carregado por último) usa !important em .kn-btn/inputs; por isso o !important aqui.
   - Não mexe em .kn-board / .kn-col / .kn-card.
   ========================================================= */
.kn-wrap { --kn-top-h: 34px; }
@media (min-width: 769px) {
  .kn-wrap { padding: 14px 24px 18px; }
}
.kn-wrap .kn-header {
  container: kn-top / inline-size;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 8px;
  padding: 0; margin: 0 0 12px;
}
.kn-wrap .kn-top-id { display: none; flex: 0 0 auto; align-items: center; margin-right: 4px; }
.kn-wrap .kn-top-id .kn-breadcrumb { margin: 0; white-space: nowrap; font-size: 12px; color: var(--ink-2, #5b6b65); }
.kn-wrap .kn-top-id .kn-breadcrumb strong { color: var(--ink, #17221e); }

/* --- busca + período + etiquetas --- */
.kn-wrap .kn-header > .kn-filtro-bar {
  flex: 1 1 auto; min-width: 0; margin: 0; gap: 8px;
  align-items: center; flex-wrap: nowrap;
}
.kn-wrap .kn-header .kn-filtro-busca { flex: 1 1 200px; max-width: 400px; min-width: 150px; }
.kn-wrap .kn-header .kn-filtro-busca-ico { left: 12px; }
.kn-wrap .kn-header .kn-filtro-busca input {
  height: var(--kn-top-h); box-sizing: border-box;
  padding: 0 30px 0 34px;
  font-size: 12.5px; line-height: 1;
  text-overflow: ellipsis;
  border-radius: 999px !important;
  background: var(--panel, #fff) !important;
  border: 1px solid var(--line, #e4e8e6) !important;
  box-shadow: none !important;
}
.kn-wrap .kn-header .kn-filtro-busca input:hover { border-color: var(--line-2, #d3dcd9) !important; }
.kn-wrap .kn-header .kn-filtro-busca input:focus { border-color: var(--accent, #0a9492) !important; }
.kn-wrap .kn-header .kn-filtro-busca-clear { right: 5px; width: 24px; height: 24px; border-radius: 999px; }
.kn-wrap .kn-header .kn-filtro-tags-btn,
.kn-wrap .kn-header .kn-btn {
  height: var(--kn-top-h); box-sizing: border-box;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font: 600 12.5px/1 var(--font-body, system-ui, sans-serif) !important;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  background: var(--panel, #fff) !important;
  border: 1px solid var(--line, #e4e8e6) !important;
  color: var(--ink, #17221e) !important;
  box-shadow: none !important;
  transform: none !important;
}
.kn-wrap .kn-header .kn-filtro-tags-btn:hover,
.kn-wrap .kn-header .kn-btn:not(.kn-btn--primary):hover {
  background: var(--accent-50, #effaf9) !important;
  border-color: var(--accent-line, #cfe6e4) !important;
  color: var(--accent-ink, #06716f) !important;
}
.kn-wrap .kn-header .kn-filtro-tags-btn.on {
  background: var(--accent-soft, #e0f5f4) !important;
  border-color: var(--accent-line-2, #b9dedc) !important;
  color: var(--accent-ink, #06716f) !important;
}
.kn-wrap .kn-header .kn-filtro-tags-ico { color: var(--ink-2, #5b6b65); }
.kn-wrap .kn-header .kn-filtro-tags-btn.on .kn-filtro-tags-ico { color: var(--accent-ink, #06716f); }
.kn-wrap .kn-header .kn-filtro-tags-wrap { flex: 0 0 auto; }

/* --- abas (Kanban / Lista / Carteira / Calendário) --- */
.kn-wrap .kn-header > .kn-actions {
  flex: 0 0 auto; margin-left: auto;
  flex-wrap: nowrap; gap: 8px; align-items: center;
}
.kn-wrap .kn-header .kn-toggle {
  height: var(--kn-top-h); box-sizing: border-box;
  padding: 3px; border-radius: 999px;
  background: var(--hover, #f1f5f4) !important;
  border: 1px solid var(--line, #e4e8e6);
  box-shadow: none;
}
.kn-wrap .kn-header .kn-toggle button {
  height: 100%; padding: 0 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 12px/1 var(--font-body, system-ui, sans-serif);
  color: var(--ink-2, #5b6b65);
  white-space: nowrap;
}
.kn-wrap .kn-header .kn-toggle button:hover:not(.ativo) { color: var(--ink, #17221e); background: rgba(255,255,255,.6); }
.kn-wrap .kn-header .kn-toggle button.ativo {
  background: var(--panel, #fff) !important;
  color: var(--accent-ink, #06716f);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 28, 0.12);
}
.kn-top-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 99px;
  background: var(--red, #c43d3d); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center;
}

/* --- funil / vendedor / nova / engrenagem --- */
.kn-wrap .kn-header .kn-btn.kn-top-sel { gap: 6px; padding-right: 10px !important; }
.kn-wrap .kn-header .kn-top-sel-txt { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.kn-wrap .kn-header .kn-top-chev { display: inline-flex; color: var(--ink-3, #8a9893); }
.kn-wrap .kn-header .kn-btn--primary {
  background: var(--accent, #0a9492) !important;
  border-color: var(--accent, #0a9492) !important;
  color: var(--on-accent, #fff) !important;
  font-weight: 700 !important;
}
.kn-wrap .kn-header .kn-btn--primary:hover { background: var(--accent-ink, #06716f) !important; border-color: var(--accent-ink, #06716f) !important; }
.kn-wrap .kn-header #mkConfigBtn { width: var(--kn-top-h); padding: 0 !important; justify-content: center; }
/* Menus abertos logo abaixo do botão (antes: top fixo de 42px, pensado pra botão de 38px) */
.kn-wrap .kn-header .kn-funil-wrap .kn-cfg-dropdown,
.kn-wrap .kn-header .kn-vend-wrap .kn-cfg-dropdown,
.kn-wrap .kn-header > .kn-actions > .kn-cfg-dropdown { top: calc(100% + 6px); }

/* --- foco visível em todo o topo (teclado) --- */
.kn-wrap .kn-header :is(button, input):focus-visible,
.kn-wrap .kn-kpi-toggle:focus-visible,
.kn-wrap .kn-kpi:focus-visible {
  outline: 2px solid var(--accent, #0a9492) !important;
  outline-offset: 2px;
}

/* --- larguras: breadcrumb só onde sobra espaço; abaixo disso 2 linhas --- */
@container kn-top (min-width: 1480px) {
  .kn-wrap .kn-top-id { display: flex; }
}
/* faixa apertada (cabe em 1 linha, mas sem sobra): botões mais enxutos */
@container kn-top (min-width: 960px) and (max-width: 1159px) {
  .kn-wrap .kn-top-opp { display: none; }
  .kn-wrap .kn-header .kn-toggle button { padding: 0 9px; }
  .kn-wrap .kn-header .kn-filtro-tags-btn, .kn-wrap .kn-header .kn-btn { padding: 0 11px !important; }
}
/* muito estreito: 2 linhas (busca + filtros / abas + ações) */
@container kn-top (max-width: 959px) {
  .kn-wrap .kn-header > .kn-filtro-bar { flex: 1 1 100%; }
  .kn-wrap .kn-header .kn-filtro-busca { max-width: none; }
  .kn-wrap .kn-header > .kn-actions { flex: 1 1 100%; margin-left: 0; }
  .kn-wrap .kn-header > .kn-actions .kn-toggle { margin-right: auto; }
}

/* --- indicadores (KPIs): menores e recolhíveis --- */
.kn-wrap .kn-kpi-bloco { container: kn-kpi / inline-size; margin: 0 0 12px; }
.kn-wrap .kn-kpi-topo { display: flex; align-items: center; gap: 12px; min-height: 24px; margin: 0 0 6px; flex-wrap: wrap; }
.kn-wrap .kn-kpi-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 !important; padding: 3px 8px 3px 3px;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2, #5b6b65);
}
.kn-wrap .kn-kpi-toggle strong { color: var(--ink, #17221e); }
.kn-wrap .kn-kpi-toggle:hover { background: var(--hover, #f1f5f4) !important; color: var(--ink, #17221e); }
.kn-wrap .kn-kpi-toggle-chev { display: inline-flex; transition: transform .15s ease; }
.kn-wrap .kn-kpi-bloco.is-min .kn-kpi-toggle-chev { transform: rotate(-90deg); }
.kn-wrap .kn-kpi-res { display: none; align-items: center; gap: 4px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2, #5b6b65); }
.kn-wrap .kn-kpi-res b { color: var(--ink, #17221e); font-weight: 800; }
.kn-wrap .kn-kpi-bloco.is-min .kn-kpi-res { display: flex; }
.kn-wrap .kn-kpi-bloco.is-min .kn-kpis { display: none; }
.kn-wrap .kn-kpi-bloco.is-min .kn-kpi-topo { margin-bottom: 0; }

.kn-wrap .kn-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 0; }
.kn-wrap .kn-kpi { padding: 9px 12px; gap: 10px; border-radius: 12px; }
.kn-wrap .kn-kpi:hover { transform: none; box-shadow: 0 6px 16px -10px rgba(15, 23, 28, 0.28); border-color: var(--line-2, #d3dcd9); }
.kn-wrap .kn-kpi-ico { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 3px 8px -4px var(--kpi-c, var(--og-green)); }
.kn-wrap .kn-kpi-ico svg { width: 16px; height: 16px; }
.kn-wrap .kn-kpi-head { margin: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2, #5b6b65); }
.kn-wrap .kn-kpi-ver { font-size: 10px; font-weight: 600; color: var(--ink-2, #5b6b65); }
.kn-wrap .kn-kpi-valor { font-size: 19px; line-height: 1.15; }
.kn-wrap .kn-kpi-sub { display: block; margin-top: 1px; font-size: 10.5px; color: var(--ink-2, #5b6b65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-wrap .kn-kpi-pill { padding: 1px 7px; margin-left: 6px; font-size: 10px; }
@container kn-kpi (max-width: 1200px) { .kn-wrap .kn-kpi-ico { display: none; } }
@container kn-kpi (max-width: 860px) {
  .kn-wrap .kn-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kn-wrap .kn-kpi-ico { display: grid; }
}
@container kn-kpi (max-width: 560px) {
  .kn-wrap .kn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kn-wrap .kn-kpi-ico { display: none; }
  .kn-wrap .kn-kpi-valor { font-size: 17px; }
}

/* --- celular (a barra desce em blocos: busca, filtros, abas, ações) --- */
@media (max-width: 768px) {
  .kn-wrap .kn-header > .kn-filtro-bar { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kn-wrap .kn-header .kn-filtro-busca { flex: 1 1 100%; max-width: none; }
  .kn-wrap .kn-header .kn-filtro-tags-wrap { width: auto; flex: 1 1 0; }
  .kn-wrap .kn-header .kn-filtro-tags-btn { width: 100%; justify-content: space-between; }
  .kn-wrap .kn-header > .kn-actions { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; }
  .kn-wrap .kn-header > .kn-actions .kn-toggle { flex: 1 1 100%; margin-right: 0; overflow-x: auto; }
  .kn-wrap .kn-header > .kn-actions .kn-toggle button { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kn-wrap .kn-kpi-toggle-chev { transition: none; }
}

/* ============================================================
   KANBAN — refino visual (10/10/2026). Só camada visual: marcação, JS e arrastar/soltar não mudaram.
   Cabeçalho de coluna em seta (funil) com a cor do estágio em tom médio, cards com a cor da coluna em tom leve e barra
   lateral de alerta, KPIs com fundo e borda na cor do indicador e dropzone tracejada. Fica DEPOIS dos blocos .kn-* acima de propósito (mesma especificidade, vence
   pela ordem); o tema escuro entra pelas variáveis --kn-* e por liquid-glass.css / portal-2026-dark.css.
   ============================================================ */
.kn-wrap {
  --kn-line: #e2e8f0; --kn-line-2: #cbd5e1;
  --kn-ink-strong: #0f172a; --kn-ink: #1e293b; --kn-ink-2: #475569; --kn-ink-3: #64748b;
  --kn-surface: #ffffff; --kn-head-base: #ffffff;
  --kn-sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --kn-sombra-md: 0 6px 16px -4px rgba(15, 23, 42, 0.12), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --kn-seta: 14px;   /* profundidade da ponta do cabeçalho em seta */
}
:root[data-theme="dark"] .kn-wrap {
  --kn-line: var(--og-hairline-soft); --kn-line-2: var(--og-hairline);
  --kn-ink-strong: var(--og-ink); --kn-ink: var(--og-ink); --kn-ink-2: var(--og-ink-2); --kn-ink-3: var(--og-ink-3);
  --kn-surface: var(--panel); --kn-head-base: var(--panel);
}

/* --- Cabeçalho da coluna: pílula (celular) / seta de etapa (>= 769px) com a cor do estágio em tom médio:
   fundo tingido + faixa de 3px na base. Texto, ponto e contador seguem o padrão do portal. --- */
.kn-wrap .kn-col-head {
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 62px;
  padding: 10px 14px 12px;
  border: 0; border-radius: 10px;
  background:
    linear-gradient(90deg, var(--col-cor, var(--og-green)), color-mix(in srgb, var(--col-cor, var(--og-green)) 40%, transparent)) left bottom / 100% 3px no-repeat,
    color-mix(in srgb, var(--col-cor, var(--og-green)) 20%, var(--kn-head-base));
  box-shadow: none;
  transition: background-color 160ms;
}
.kn-wrap .kn-col-head:hover {
  background:
    linear-gradient(90deg, var(--col-cor, var(--og-green)), color-mix(in srgb, var(--col-cor, var(--og-green)) 40%, transparent)) left bottom / 100% 3px no-repeat,
    color-mix(in srgb, var(--col-cor, var(--og-green)) 28%, var(--kn-head-base));
  box-shadow: none; transform: none;
}
.kn-wrap .kn-col-head::after { content: none; }
.kn-wrap .kn-col-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-cor, var(--og-green)) 22%, transparent); }
/* Nome longo (ex.: "Desqualificado/parcial (tem máquina linha amarela)") cabe em até 2 linhas sem esticar a coluna. */
.kn-wrap .kn-col-nome {
  min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--og-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.kn-wrap .kn-col-cnt {
  flex: none; font-size: 11px; font-weight: 800; line-height: 1.5;
  color: color-mix(in srgb, var(--col-cor, var(--og-green)) 70%, var(--og-ink));
  background: color-mix(in srgb, var(--kn-head-base) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--col-cor, var(--og-green)) 35%, transparent);
  border-radius: 999px; padding: 0 8px;
}
.kn-wrap .kn-col-valor { margin-top: 3px; padding-left: 17px; font-size: 12.5px; font-weight: 700; color: var(--og-ink-2); }
@media (min-width: 769px) {
  /* A seta de cada etapa avança sobre o vão entre colunas e encaixa no entalhe da seguinte (folga de 4px). */
  .kn-wrap .kn-col-head {
    margin-right: calc(-1 * (16px + var(--kn-seta) - 4px));
    height: 72px;   /* igual em todas: a ponta da seta só encaixa no entalhe da vizinha se as alturas casam */
    padding: 9px calc(var(--kn-seta) + 8px) 12px calc(var(--kn-seta) + 8px);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--kn-seta)) 0, 100% 50%, calc(100% - var(--kn-seta)) 100%, 0 100%, var(--kn-seta) 50%);
  }
  .kn-wrap .kn-col:first-child > .kn-col-head {
    padding-left: 14px; border-radius: 10px 0 0 10px;
    clip-path: polygon(0 0, calc(100% - var(--kn-seta)) 0, 100% 50%, calc(100% - var(--kn-seta)) 100%, 0 100%);
  }
  .kn-wrap .kn-col:last-child > .kn-col-head { margin-right: 0; }
}

/* --- Cards de oportunidade: fundo e borda com a cor da coluna em tom leve; tarefa atrasada vira barra lateral --- */
.kn-wrap .kn-card {
  --kn-card-bd: color-mix(in srgb, var(--col-cor, var(--og-green)) 30%, var(--kn-line));
  --kn-card-bd-h: color-mix(in srgb, var(--col-cor, var(--og-green)) 60%, var(--kn-line));
  background: color-mix(in srgb, var(--col-cor, var(--og-green)) 4%, var(--kn-surface));
  border: 1px solid var(--kn-card-bd);
  border-radius: 12px;
  box-shadow: var(--kn-sombra-sm);
  transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.kn-wrap .kn-card:hover { border-color: var(--kn-card-bd-h); box-shadow: var(--kn-sombra-md); transform: none; }
/* "X min sem resposta" (cliente esperando no WhatsApp): o card inteiro ganha destaque na cor do alerta —
   anel, leve fundo e (laranja/vermelho) pulso na borda. 5 min = amarelo, 10 min = laranja, 15 min = vermelho (limites no renderCardOpp, meu-kanban-ui.js). */
.kn-wrap .kn-card.kn-card--sla-yellow { --kn-sla: #facc15; }
.kn-wrap .kn-card.kn-card--sla-amber  { --kn-sla: #f97316; }
.kn-wrap .kn-card.kn-card--sla-red    { --kn-sla: #dc2626; }
.kn-wrap .kn-card.kn-card--sla-yellow,
.kn-wrap .kn-card.kn-card--sla-amber,
.kn-wrap .kn-card.kn-card--sla-red {
  border-color: var(--kn-sla);
  background: color-mix(in srgb, var(--kn-sla) 6%, var(--kn-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kn-sla) 45%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--kn-sla) 40%, transparent);
}
.kn-wrap .kn-card.kn-card--sla-yellow:hover,
.kn-wrap .kn-card.kn-card--sla-amber:hover,
.kn-wrap .kn-card.kn-card--sla-red:hover {
  border-color: var(--kn-sla);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kn-sla) 60%, transparent), 0 8px 20px -4px color-mix(in srgb, var(--kn-sla) 50%, transparent);
}
/* Pulso bem leve na borda (só laranja e vermelho; o amarelo fica parado): um anel de 2px por dentro do card (::after) respira entre 25% e 100% de opacidade a cada 2,6s.
   Fica num pseudo-elemento de propósito: o JS trava `animation:none` inline nos cards reaproveitados a cada poll
   (ver _mkPatchBoard) e isso pararia um pulso aplicado no card; o ::after não é afetado. Sem pulso com prefers-reduced-motion. */
@keyframes kn-sla-pulso { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.kn-wrap .kn-card.kn-card--sla-amber::after,
.kn-wrap .kn-card.kn-card--sla-red::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--kn-sla);
  animation: kn-sla-pulso 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .kn-wrap .kn-card.kn-card--sla-amber::after,
  .kn-wrap .kn-card.kn-card--sla-red::after { animation: none; opacity: .6; }
}
/* Tarefa atrasada: antes pulsava com borda vermelha; agora só a barra lateral (o fade de entrada continua). */
.kn-wrap .kn-card.opp-card-com-tarefa-atrasada {
  animation: kn-card-in 420ms cubic-bezier(.22, 1, .36, 1) forwards !important;
  animation-delay: var(--kn-d, 0ms) !important;
  border-color: var(--kn-card-bd) !important;
}
.kn-wrap .kn-card.opp-card-com-tarefa-atrasada:hover { border-color: var(--kn-card-bd-h) !important; }
@media (prefers-reduced-motion: reduce) {
  .kn-wrap .kn-card.opp-card-com-tarefa-atrasada { animation: none !important; }
}
/* Barra lateral de 3px: some por padrão (antes era o acento da coluna no hover) e só marca tarefa atrasada. */
.kn-wrap .kn-card::before,
.kn-wrap .kn-card:hover::before { top: 0; bottom: 0; left: 0; width: 3px; border-radius: 0; opacity: 0; }
.kn-wrap .kn-card.opp-card-com-tarefa-atrasada::before { background: #ef4444; opacity: 1; }   /* o alerta de "min sem resposta" é só a borda do card, sem barra */

.kn-wrap .kn-card-titulo { font-weight: 600; color: var(--kn-ink); letter-spacing: -0.005em; }
.kn-wrap .kn-card-meta { font-size: 11.5px; color: var(--kn-ink-2); }
.kn-wrap .kn-card-empresa:not(.kn-card-empresa--falta) { font-size: 11.5px; font-weight: 500; color: var(--kn-ink-2); }
.kn-wrap .kn-card-empresa:not(.kn-card-empresa--falta) .kn-card-empresa-lbl { font-weight: 600; color: var(--kn-ink-3); }
.kn-wrap .kn-card-preco {
  font-family: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--kn-ink-strong);
}
.kn-wrap .kn-card-preco--vazio { font-size: 13px; font-weight: 500; color: var(--kn-ink-3); }

/* Selos (crédito, campanha, tempo sem resposta): pastel, compactos, canto levemente arredondado.
   As cores de crédito/origem vêm inline do JS (já pastel); aqui só forma e tamanho. */
.kn-wrap .kn-chip { padding: 2px 7px 2px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 600; line-height: 1.4; }
.kn-wrap .kn-card-sla-badge {
  align-self: flex-start; margin-top: 8px; padding: 2px 7px 2px 6px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 6px; font-size: 10.5px; font-weight: 600;
}
.kn-wrap .kn-card-sla-badge--yellow { background: #fefce8; color: #a16207; }
.kn-wrap .kn-card-sla-badge--amber { background: #fff7ed; color: #c2410c; }
.kn-wrap .kn-card-sla-badge--red { background: #fef2f2; color: #b91c1c; }
:root[data-theme="dark"] .kn-wrap .kn-card-sla-badge--yellow { background: color-mix(in srgb, #eab308 18%, transparent); color: #fde047; }
.kn-wrap .kn-card-tempo { background: #f1f5f9; color: var(--kn-ink-2); border-radius: 6px; font-weight: 500; }
.kn-wrap .kn-card-tempo--late { background: #fef2f2; color: #b91c1c; }

/* --- KPIs: fundo claro na cor do indicador, borda mais forte, número na cor do indicador --- */
.kn-wrap .kn-kpi--green   { --kpi-c: #059669; }
.kn-wrap .kn-kpi--blue    { --kpi-c: #2563eb; }
.kn-wrap .kn-kpi--red     { --kpi-c: #dc2626; }
.kn-wrap .kn-kpi--amber   { --kpi-c: #d97706; }
.kn-wrap .kn-kpi--neutral { --kpi-c: #7c3aed; }
.kn-wrap .kn-kpi {
  background: color-mix(in srgb, var(--kpi-c, var(--og-green)) 7%, #fff) !important;
  border: 1.5px solid color-mix(in srgb, var(--kpi-c, var(--og-green)) 42%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: var(--kn-sombra-sm) !important;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.kn-wrap .kn-kpi:hover {
  border-color: color-mix(in srgb, var(--kpi-c, var(--og-green)) 65%, transparent) !important;
  box-shadow: var(--kn-sombra-md) !important;
}
.kn-wrap .kn-kpi::before, .kn-wrap .kn-kpi::after { content: none !important; }   /* tira a faixa do topo e a lavagem em degradê */
.kn-wrap .kn-kpi-ico {
  background: color-mix(in srgb, var(--kpi-c, var(--og-green)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--kpi-c, var(--og-green)) 35%, transparent);
  color: var(--kpi-c, var(--og-green));
  box-shadow: none;
}
.kn-wrap .kn-kpi-head { font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--kpi-c, var(--og-green)) 70%, var(--kn-ink)); }
.kn-wrap .kn-kpi-ver { font-weight: 600; color: color-mix(in srgb, var(--kpi-c, var(--og-green)) 60%, var(--kn-ink-2)); }
.kn-wrap .kn-kpi-valor {
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--kpi-c, var(--og-ink)) 88%, #0f172a);
}
.kn-wrap .kn-kpi-sub { font-size: 10.5px; font-weight: 500; color: var(--kn-ink-2); }
:root[data-theme="dark"] .kn-wrap .kn-kpi {
  background: color-mix(in srgb, var(--kpi-c, var(--og-green)) 14%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--kpi-c, var(--og-green)) 70%, transparent) !important;
}
:root[data-theme="dark"] .kn-wrap .kn-kpi-valor {
  color: color-mix(in srgb, var(--kpi-c, var(--og-green)) 65%, #fff);
  text-shadow: none;
}
:root[data-theme="dark"] .kn-wrap .kn-kpi-head { color: color-mix(in srgb, var(--kpi-c, var(--og-green)) 55%, #fff); }
@container kn-kpi (max-width: 560px) { .kn-wrap .kn-kpi-valor { font-size: 17px; } }

/* --- Coluna vazia: dropzone tracejada na cor do estágio, discreta --- */
.kn-wrap .kn-col-empty {
  border: 2px dashed color-mix(in srgb, var(--col-cor, var(--og-green)) 45%, var(--kn-line-2));
  border-radius: 12px;
  background: color-mix(in srgb, var(--col-cor, var(--og-green)) 6%, transparent);
  color: var(--kn-ink-2);
  font-size: 12px; font-weight: 500;
}
.kn-wrap .kn-col-empty svg { opacity: .7; }

/* ============================================================
   ABA SERASA — Decisão do motor de regras e Ficha de crédito (prefixo .sera-dec-)
   ============================================================ */
.sera-dec-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.sera-dec-linha--duas { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.sera-dec, .sera-dec-ficha { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sera-dec--busy .sera-dec-selo, .sera-dec--busy .sera-dec-regra, .sera-dec--busy .sera-dec-motivo, .sera-dec--busy .sera-dec-detalhe { opacity: .55; transition: opacity .15s; }
.sera-dec-atualiza { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; }

.sera-dec-selo {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg);
}
.sera-dec-selo-ico {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--fg); color: #fff;
}
.sera-dec-selo-txt { font-size: 17px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.sera-dec-selo--ok     { --fg: #15803d; --bg: #dcfce7; --bd: #bbf7d0; }
.sera-dec-selo--neg    { --fg: #b91c1c; --bg: #fee2e2; --bd: #fecaca; }
.sera-dec-selo--aviso  { --fg: #a16207; --bg: #fef9c3; --bd: #fde68a; }
.sera-dec-selo--info   { --fg: #1d4ed8; --bg: #dbeafe; --bd: #bfdbfe; }
.sera-dec-selo--neutro { --fg: #475569; --bg: #f1f5f9; --bd: #e2e8f0; }

.sera-dec-regra { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.sera-dec-motivo { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.sera-dec-semserasa {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; font-size: 12px; font-weight: 600;
}
.sera-dec-semserasa svg { flex-shrink: 0; }

.sera-dec-por-que {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: 0; padding: 4px 2px;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--brand-deep); cursor: pointer;
}
.sera-dec-por-que:hover { text-decoration: underline; }
.sera-dec-por-que:focus-visible, .sera-dec-seg-op:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sera-dec-por-que .sera-chev { transition: transform .15s; }
.sera-dec-por-que[aria-expanded="true"] .sera-chev { transform: rotate(180deg); }
.sera-dec-por-que-n { font-weight: 600; color: var(--ink-soft); }
.sera-dec-detalhe[hidden] { display: none; }
.sera-dec-semregra { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.sera-dec-conds { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sera-dec-cond {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.sera-dec-cond:last-child { border-bottom: 0; }
.sera-dec-cond-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.sera-dec-cond--ok  .sera-dec-cond-ico { background: #dcfce7; color: #15803d; }
.sera-dec-cond--neg .sera-dec-cond-ico { background: #fee2e2; color: #b91c1c; }
.sera-dec-cond--nd  .sera-dec-cond-ico { background: #f1f5f9; color: #64748b; }
.sera-dec-cond-txt { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.sera-dec-cond-nome { font-weight: 700; }
.sera-dec-cond-op { color: var(--ink-soft); margin: 0 3px; }
.sera-dec-cond-enc { color: var(--ink-soft); text-align: right; white-space: nowrap; }
.sera-dec-cond-enc b { color: var(--ink); }
.sera-dec-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; font-size: 11px; font-weight: 700; }
.sera-dec-rodape { font-size: 11px; color: var(--ink-soft); }

.sera-dec-ficha-lbl { font-size: 13px; font-weight: 700; color: var(--ink); }
.sera-dec-seg {
  display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: #eef3f0; border: 1px solid var(--line);
}
.sera-dec-seg-op {
  flex: 1 1 0; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); transition: background .15s, color .15s;
}
.sera-dec-seg-op:hover:not(.on) { background: rgba(10,148,146,.1); }
.sera-dec-seg-op.on { background: var(--brand); color: #fff; box-shadow: 0 1px 4px rgba(10,148,146,.35); }
.sera-dec-seg--busy .sera-dec-seg-op { cursor: progress; opacity: .75; }
.sera-dec-dica { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); min-height: 16px; }

@media (max-width: 768px) {
  .sera-dec-linha--duas { grid-template-columns: minmax(0, 1fr); }
  .sera-dec-selo-txt { font-size: 15.5px; }
  .sera-dec-cond { grid-template-columns: 22px minmax(0, 1fr); }
  .sera-dec-cond-enc { grid-column: 2; text-align: left; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .sera-dec-por-que .sera-chev, .sera-dec--busy .sera-dec-selo, .sera-dec-seg-op { transition: none; }
}

/* ====================================================================
   Credito — Regras Se/Entao (motor dinamico). Prefixo .cmr-
   ==================================================================== */
.cmr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 16px; align-items: start; }
.cmr-col-lista, .cmr-col-sim { min-width: 0; }
.cmr-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.cmr-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; }
.cmr-ph-t { min-width: 0; }
.cmr-ph .panel-title { margin: 0; }
.cmr-ph > .btn { flex: none; white-space: nowrap; }
.cmr-cont { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.cmr-sub { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.cmr-pb { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.cmr-tools { padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.cmr-busca { position: relative; display: flex; align-items: center; }
.cmr-busca svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.cmr-busca input { width: 100%; padding: 9px 12px 9px 32px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; }
.cmr-busca input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,148,146,.12); }
.cmr-lista { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 10px; }

/* cartao da regra */
.cmr-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.cmr-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.cmr-card.cmr-off { background: var(--bg); }
.cmr-card.cmr-off .cmr-nome, .cmr-card.cmr-off .cmr-frase { opacity: .7; }
.cmr-card.cmr-arrastando { opacity: .45; }
.cmr-card.cmr-drop-antes { box-shadow: 0 -3px 0 0 var(--accent); }
.cmr-card.cmr-drop-depois { box-shadow: 0 3px 0 0 var(--accent); }
.cmr-card-top { display: flex; align-items: center; gap: 10px; }
.cmr-grip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: grab; }
.cmr-grip:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.cmr-grip:disabled { opacity: .35; cursor: not-allowed; }
.cmr-grip:active { cursor: grabbing; }
.cmr-prio { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 12.5px; }
.cmr-card-tit { flex: 1; min-width: 0; }
.cmr-nome { font-weight: 700; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.cmr-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.cmr-tag-off { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 8px; }
.cmr-acoes { flex: none; display: flex; gap: 2px; }
.cmr-desc { margin: 8px 0 0 64px; font-size: 12px; color: var(--muted); }
.cmr-frase { margin: 8px 0 0 64px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; }
.cmr-frase strong { color: var(--ink); font-weight: 700; }
.cmr-val { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.cmr-conj { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line-strong); color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .4px; }

/* badges de acao (cores do contrato) */
.cmr-badge, .cmr-dec { --fg: #a16207; --bgc: #fef9c3; --bd: #fde68a; }
.cmr-b-aprovar { --fg: #15803d; --bgc: #dcfce7; --bd: #bbf7d0; }
.cmr-b-reprovar { --fg: #b91c1c; --bgc: #fee2e2; --bd: #fecaca; }
.cmr-b-analise_manual { --fg: #a16207; --bgc: #fef9c3; --bd: #fde68a; }
.cmr-b-limite_sugerido { --fg: #1d4ed8; --bgc: #dbeafe; --bd: #bfdbfe; }
.cmr-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--fg); background: var(--bgc); border: 1px solid var(--bd); }

/* botoes pequenos */
.cmr-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.cmr-ib:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.cmr-ib-del:hover:not(:disabled) { background: #fee2e2; color: #b91c1c; }
.cmr-ib:disabled { opacity: .3; cursor: not-allowed; }
.cmr-grip:focus-visible, .cmr-ib:focus-visible, .cmr-add:focus-visible, .cmr-x:focus-visible, .cmr-seg button:focus-visible, .cmr-chip-x:focus-visible, .cmr-dd-btn:focus-visible, .cmr-cli:focus-visible, .cmr-det summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10,148,146,.35); }
.cmr .btn svg, .cmr-modal .kn-btn svg { vertical-align: -2px; margin-right: 4px; }

/* interruptor */
.cmr-sw { position: relative; flex: none; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.cmr-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cmr-sw-trk { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.cmr-sw-trk::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.cmr-sw input:checked + .cmr-sw-trk { background: var(--accent); }
.cmr-sw input:checked + .cmr-sw-trk::after { transform: translateX(16px); }
.cmr-sw input:focus-visible + .cmr-sw-trk { box-shadow: 0 0 0 3px rgba(10,148,146,.35); }

/* estados */
.cmr-estado { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cmr-estado p { margin: 0; max-width: 420px; line-height: 1.5; }
.cmr-estado-erro { color: #b91c1c; }
.cmr-vazio strong { color: var(--ink); font-size: 14px; }
.cmr-vazio-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cmr-vazio-ic svg { width: 22px; height: 22px; }
.cmr-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: cmrSpin .7s linear infinite; vertical-align: -2px; }
@keyframes cmrSpin { to { transform: rotate(360deg); } }
.cmr-dica { font-size: 12px; color: var(--muted); padding: 6px 2px; }
.cmr-dica-erro { color: #b91c1c; }
.cmr-alerta { padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; line-height: 1.45; }
.cmr-alerta[hidden] { display: none; }
.cmr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* dropdown estilizado (portado para o body) */
.cmr-dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; position: relative; }
.cmr-dd-btn:hover:not(:disabled) { border-color: var(--accent); }
.cmr-dd-btn:disabled { opacity: .55; cursor: not-allowed; background: var(--bg); }
.cmr-dd-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,148,146,.12); }
.cmr-dd-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmr-dd-ph { color: var(--muted); }
.cmr-dd-btn .cmr-chev { flex: none; opacity: .6; }
.cmr-dd-mini { width: auto; min-width: 150px; padding: 5px 10px; font-size: 12.5px; border-style: dashed; }
.cmr-dd-menu { position: fixed; z-index: 10100; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 30px -8px rgba(20,40,32,.28); padding: 4px; display: flex; flex-direction: column; max-height: min(340px, 60vh); }
.cmr-dd-busca { position: relative; display: flex; align-items: center; padding: 4px 4px 6px; flex: none; }
.cmr-dd-busca svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.cmr-dd-q { width: 100%; padding: 7px 10px 7px 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12.5px; }
.cmr-dd-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,148,146,.12); }
.cmr-dd-lista { overflow-y: auto; outline: none; min-height: 0; }
.cmr-dd-grp { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.cmr-dd-it { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.cmr-dd-it.ativo { background: var(--accent-soft); }
.cmr-dd-it.sel { font-weight: 700; color: var(--accent); }
.cmr-dd-vazio { padding: 12px; font-size: 12px; color: var(--muted); text-align: center; }

/* segmentado */
.cmr-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; max-width: 100%; flex-wrap: wrap; }
.cmr-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background .12s, color .12s; }
.cmr-seg button:hover:not(.on) { background: var(--accent-soft); }
.cmr-seg button.on { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(10,148,146,.3); }

/* modal do editor */
.cmr-overlay { position: fixed; inset: 0; z-index: 10060; background: rgba(15,23,28,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cmr-modal { position: relative; display: flex; flex-direction: column; width: 860px; max-width: 100%; max-height: calc(100vh - 40px); background: var(--og-surface, var(--panel)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; }
.cmr-mh { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); flex: none; }
.cmr-mh h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.cmr-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cmr-x:hover { background: var(--bg); color: var(--ink); }
.cmr-mb { padding: 18px 22px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.cmr-mf { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.cmr-sp { flex: 1; }
.cmr-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cmr-f > label, .cmr-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.cmr-req { color: #dc2626; }
.cmr-opc { text-transform: none; font-weight: 500; letter-spacing: 0; }
.cmr-modal textarea.field-input { resize: vertical; min-height: 56px; }
.cmr-ferr { font-size: 12px; color: #b91c1c; line-height: 1.4; }
.cmr-ferr:empty { display: none; }
.cmr-has-err > .field-input, .cmr-has-err .cmr-dd-btn, .cmr-has-err .cmr-money .field-input { border-color: #dc2626; }
.cmr-row.cmr-has-err { background: #fef2f2; border-radius: 10px; }

.cmr-bloco { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.cmr-bloco-entao { background: var(--accent-soft); border-color: rgba(10,148,146,.25); }
.cmr-bloco-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cmr-tag-bloco { display: inline-flex; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .8px; color: #fff; background: var(--accent); }
.cmr-tag-entao { background: #0b6b69; }
.cmr-row { display: grid; grid-template-columns: 38px minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1.2fr) 32px; gap: 8px; align-items: center; padding: 4px 4px; }
.cmr-row-conj { text-align: center; }
.cmr-row .cmr-ajuda, .cmr-row .cmr-c-err { grid-column: 2 / 5; }
.cmr-ajuda { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: -2px; }
.cmr-ajuda svg { flex: none; margin-top: 2px; }
.cmr-ph-val { font-size: 12px; color: var(--muted); padding: 9px 2px; }
.cmr-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px dashed var(--accent); border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cmr-add:hover { background: var(--panel); }
.cmr-ent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cmr-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
.cmr-chk input { accent-color: var(--accent); width: 15px; height: 15px; }
.cmr-money { position: relative; display: flex; align-items: center; }
.cmr-money > span { position: absolute; left: 12px; font-size: 13px; color: var(--muted); pointer-events: none; }
.cmr-money .field-input { padding-left: 36px; }
.cmr-money.cmr-disabled .field-input { background: var(--bg); opacity: .6; }
.cmr-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; }
.cmr-chips-in { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); }
.cmr-chips-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,148,146,.12); }
.cmr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.cmr-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.cmr-chip-x:hover { background: rgba(10,148,146,.2); }
.cmr-chip-in { flex: 1; min-width: 110px; border: 0; outline: none; background: transparent; font: inherit; font-size: 13px; color: var(--ink); padding: 4px 2px; }
.cmr-previa { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.cmr-previa-t { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.cmr-previa p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.cmr-previa strong { color: var(--ink); }
.cmr-ativa { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.cmr-ativa em { font-style: normal; font-size: 12px; color: var(--muted); }

/* simulador */
.cmr-rasc { padding: 10px 12px; border-radius: 10px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: 12.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.cmr-rasc-b { display: flex; gap: 6px; flex-wrap: wrap; }
.cmr-cli-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.cmr-cli, .cmr-cli-sel { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-align: left; font: inherit; color: var(--ink); }
.cmr-cli { cursor: pointer; }
.cmr-cli:hover { border-color: var(--accent); background: var(--accent-soft); }
.cmr-cli-sel { background: var(--accent-soft); border-color: rgba(10,148,146,.3); }
.cmr-cli-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmr-cli-i strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmr-cli-i span { font-size: 11.5px; color: var(--muted); }
.cmr-tag-serasa { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #1d4ed8; background: #dbeafe; border: 1px solid #bfdbfe; }
.cmr-run { align-self: flex-start; }
.cmr-run:disabled { opacity: .55; cursor: not-allowed; }
.cmr-res { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.cmr-res-rasc { font-size: 12px; color: #1e3a8a; background: #eff6ff; border-radius: 8px; padding: 6px 10px; margin-top: 10px; }
.cmr-dec { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--bgc); border: 1px solid var(--bd); color: var(--fg); margin-top: 4px; }
.cmr-dec-rot { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.cmr-dec-lim { font-size: 13px; }
.cmr-dec-lim strong { font-size: 16px; }
.cmr-kv { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; }
.cmr-kv dt { color: var(--muted); font-weight: 600; }
.cmr-kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cmr-h4 { margin: 4px 0 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cmr-conds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmr-cond { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.cmr-cond-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.cmr-cond.ok .cmr-cond-ic { background: #dcfce7; color: #15803d; }
.cmr-cond.no .cmr-cond-ic { background: #fee2e2; color: #b91c1c; }
.cmr-cond.nd .cmr-cond-ic { background: #fef9c3; color: #a16207; }
.cmr-cond-c { min-width: 0; }
.cmr-cond-t { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.cmr-cond-s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cmr-cond-s strong { color: var(--ink); }
.cmr-nd { display: inline-block; padding: 0 8px; border-radius: 999px; background: #fef9c3; color: #a16207; border: 1px solid #fde68a; font-size: 11px; font-weight: 700; }
.cmr-det { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.cmr-det summary { cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); border-radius: 10px; list-style: none; display: flex; align-items: center; gap: 8px; }
.cmr-det summary::-webkit-details-marker { display: none; }
.cmr-det summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.cmr-det[open] summary::before { transform: rotate(45deg); }
.cmr-det > :not(summary) { margin: 0 12px 12px; }
.cmr-ev { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cmr-ev li { display: flex; align-items: center; gap: 8px; }
.cmr-ev li span { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; flex: none; }
.cmr-ev li.ok span { background: #dcfce7; color: #15803d; }
.cmr-ev li.no span { background: #fee2e2; color: #b91c1c; }
.cmr-ev li em { font-style: normal; color: var(--muted); font-size: 11.5px; margin-left: auto; }
.cmr-tab { width: calc(100% - 24px); border-collapse: collapse; font-size: 12.5px; }
.cmr-tab th, .cmr-tab td { padding: 6px 4px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmr-tab tr:first-child th, .cmr-tab tr:first-child td { border-top: 0; }
.cmr-tab th { font-weight: 600; color: var(--muted); width: 55%; text-transform: none; letter-spacing: 0; font-size: 12.5px; background: transparent; }
.cmr-tab td { color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .cmr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cmr-ph { flex-direction: column; align-items: stretch; padding: 14px 14px 10px; }
  .cmr-tools, .cmr-lista, .cmr-pb { padding-left: 14px; padding-right: 14px; }
  .cmr-card-top { flex-wrap: wrap; }
  .cmr-card-tit { flex-basis: calc(100% - 100px); }
  .cmr-acoes { margin-left: auto; }
  .cmr-desc, .cmr-frase { margin-left: 0; }
  .cmr-overlay { padding: 0; align-items: stretch; }
  .cmr-modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .cmr-mh, .cmr-mb, .cmr-mf { padding-left: 14px; padding-right: 14px; }
  .cmr-row { grid-template-columns: minmax(0, 1fr) 32px; grid-template-areas: "conj conj" "param param" "op op" "val rem" "aj aj" "er er"; padding: 8px 4px; border-bottom: 1px solid var(--line); }
  .cmr-row-conj { grid-area: conj; text-align: left; }
  .cmr-c-param { grid-area: param; }
  .cmr-c-op { grid-area: op; }
  .cmr-c-val { grid-area: val; }
  .cmr-rem { grid-area: rem; }
  .cmr-row .cmr-ajuda { grid-area: aj; grid-column: auto; }
  .cmr-row .cmr-c-err { grid-area: er; grid-column: auto; }
  .cmr-ent { grid-template-columns: minmax(0, 1fr); }
  .cmr-mf .kn-btn { flex: 1 1 auto; justify-content: center; }
  .cmr-sp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cmr-spin { animation: none; }
  .cmr-sw-trk, .cmr-sw-trk::after, .cmr-det summary::before { transition: none; }
}
:root[data-theme="dark"] .cmr-alerta, :root[data-theme="dark"] .cmr-row.cmr-has-err { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.35); color: #fca5a5; }
:root[data-theme="dark"] .cmr-modal, :root[data-theme="dark"] .cmr-dd-menu { background: #12191d; }

/* ============================================================
   ABA SERASA — hero "Motor de crédito" (prefixo .sera-mot-)
   Primeiro bloco da aba: veredito + limite + fatores-chave + ficha de crédito.
   Cor do resultado vem de --mc (borda/ícone) e --mi (texto, contraste AA); tema escuro no fim do bloco.
   ============================================================ */
.sera-mot {
  --mc: #475569; --mi: #334155; --mfg: #fff;
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 14px 18px 11px 23px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--mc) 28%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--mc) 11%, var(--panel)) 0%, var(--panel) 62%);
  box-shadow: 0 1px 2px rgba(20,40,32,.05), 0 10px 26px -18px color-mix(in srgb, var(--mc) 55%, transparent);
  transition: opacity .15s;
}
.sera-mot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--mc); }
.sera-mot--ok     { --mc: #16a34a; --mi: #15803d; }
.sera-mot--neg    { --mc: #dc2626; --mi: #b91c1c; }
.sera-mot--aviso  { --mc: #ca8a04; --mi: #a16207; }
.sera-mot--info   { --mc: #2563eb; --mi: #1d4ed8; }
.sera-mot--anima  { animation: sera-mot-in .38s ease-out both; }
@keyframes sera-mot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sera-mot-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.sera-mot-tit { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -.005em; }
.sera-mot-tit-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--mi); background: color-mix(in srgb, var(--mc) 16%, transparent); flex-shrink: 0; }
.sera-mot-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.sera-mot-regras {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--accent-ink, #06716f); cursor: pointer;
}
.sera-mot-regras:hover { background: var(--accent-soft, #e0f5f4); }

.sera-mot-corpo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 12px 22px; align-items: stretch; transition: opacity .15s; }
.sera-mot--busy .sera-mot-corpo { opacity: .55; }
.sera-mot-ver { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.sera-mot-selo { display: flex; align-items: center; gap: 11px; }
.sera-mot-selo-ico { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--mc); color: var(--mfg); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--mc) 70%, transparent); }
.sera-mot-selo-txt { font-size: 17.5px; font-weight: 800; line-height: 1.2; color: var(--mi); overflow-wrap: anywhere; }
.sera-mot-num { display: flex; flex-direction: column; gap: 2px; padding: 9px 0 9px 0; border-top: 1px solid color-mix(in srgb, var(--mc) 18%, var(--line)); border-bottom: 1px solid color-mix(in srgb, var(--mc) 18%, var(--line)); }
.sera-mot-num-l { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sera-mot-num-v { font-size: 33px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sera-mot-num-t { font-size: 18px; line-height: 1.25; font-weight: 800; color: var(--ink); opacity: .86; }
.sera-mot-regra { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.sera-mot-motivo { font-size: 12px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sera-mot-pq {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: 0; padding: 5px 4px 5px 0;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--accent-ink, #06716f); cursor: pointer; border-radius: 6px;
}
.sera-mot-pq:hover span:first-of-type { text-decoration: underline; }
.sera-mot-pq .sera-chev { transition: transform .15s; }
.sera-mot-pq[aria-expanded="true"] .sera-chev { transform: rotate(180deg); }
.sera-mot-pq-n { font-weight: 600; color: var(--ink-soft); }
.sera-mot-pq:focus-visible, .sera-mot-regras:focus-visible, .sera-mot-seg-op:focus-visible { outline: 2px solid var(--accent-deep, #06716f); outline-offset: 2px; }

/* fatores-chave */
.sera-mot-fatores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; min-width: 0; }
.sera-mot-tile {
  --tc: #64748b; --tci: #475569;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 7px; row-gap: 3px; align-items: center; align-content: start; min-width: 0;
  padding: 8px 10px 9px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 90%, transparent);
}
.sera-mot-t--ok     { --tc: #16a34a; --tci: #15803d; }
.sera-mot-t--neg    { --tc: #dc2626; --tci: #b91c1c; }
.sera-mot-t--aviso  { --tc: #ca8a04; --tci: #a16207; }
.sera-mot-t--info   { --tc: #2563eb; --tci: #1d4ed8; }
.sera-mot-t--nd .sera-mot-tile-ico { opacity: .6; }
.sera-mot-tile-ico { grid-column: 1; grid-row: 1; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--tci); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.sera-mot-tile-c { display: contents; }
.sera-mot-tile-l { grid-column: 2; grid-row: 1; min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.sera-mot-tile-v, .sera-mot-tile-s, .sera-mot-bar, .sera-mot-seg { grid-column: 1 / -1; }
.sera-mot-tile-v { font-size: 14px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sera-mot-tile-v b { font-weight: 800; }
.sera-mot-de { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.sera-mot-tile-s { font-size: 11.5px; line-height: 1.35; color: var(--ink-soft); }
.sera-mot-tile--larg { grid-template-columns: 22px minmax(0, 1fr) auto; grid-column: 1 / -1; }
.sera-mot-tile--larg .sera-mot-tile-l { grid-column: 2 / -1; }
.sera-mot-tile--larg .sera-mot-tile-v { grid-column: 1 / 3; grid-row: 2; }
.sera-mot-tile--larg .sera-mot-tile-s { grid-column: 3; grid-row: 2; text-align: right; }
.sera-mot-nd { color: var(--ink-soft); font-weight: 700; }
.sera-mot-bar { display: block; height: 5px; margin-top: 2px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.sera-mot-bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--c); transform-origin: left center; }
.sera-mot--anima .sera-mot-bar i { animation: sera-mot-preenche .85s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sera-mot-preenche { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ficha de crédito (dentro do hero) */
.sera-mot-tile--ficha { grid-column: 1 / -1; grid-template-columns: 22px minmax(0, 1fr) auto; }
.sera-mot-tile--ficha .sera-mot-tile-l { grid-column: 2; }
.sera-mot-tile-st { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.sera-mot-seg { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, var(--panel)); border: 1px solid var(--line); }
.sera-mot-seg-op {
  flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 0 10px; white-space: nowrap; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); transition: background .15s, color .15s;
}
.sera-mot-seg-op:hover:not(.on) { background: var(--accent-soft, #e0f5f4); color: var(--ink); }
.sera-mot-seg-op.on { background: var(--accent-deep, #06716f); color: var(--on-accent, #fff); box-shadow: 0 1px 4px rgba(10,148,146,.35); }
.sera-mot-seg--busy .sera-mot-seg-op { cursor: progress; opacity: .75; }

/* aviso interno, detalhe, rodapé */
.sera-mot-sem {
  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 5%, var(--panel)); border: 1px solid var(--line); color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
}
.sera-mot-sem svg { flex-shrink: 0; }
.sera-mot-sem-t { flex: 1 1 200px; min-width: 0; color: var(--ink); }
.sera-mot-sem-btn { min-height: 32px; padding: 0 14px; font-size: 12.5px; margin-left: auto; }
.sera-mot-detalhe { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--mc) 30%, var(--line)); }
.sera-mot-detalhe[hidden] { display: none; }
.sera-mot-motivo-full { font-size: 12.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.sera-mot-dt { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.sera-mot .sera-dec-conds { background: var(--panel); }
.sera-mot-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sera-mot-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--ink); border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, var(--panel)); overflow-wrap: anywhere;
}
.sera-mot-chip-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-soft); }
.sera-mot-chip-ico svg { width: 11px; height: 11px; }
.sera-mot-chip--ok { border-color: color-mix(in srgb, #16a34a 40%, var(--line)); background: color-mix(in srgb, #16a34a 11%, var(--panel)); }
.sera-mot-chip--ok .sera-mot-chip-ico { background: #16a34a; color: #fff; }
.sera-mot-rodape { font-size: 11px; color: var(--ink-soft); }

/* indisponível */
.sera-mot--off { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; border-style: dashed; border-color: var(--line-strong); background: var(--bg-soft); box-shadow: none; border-radius: 14px; }
.sera-mot--off::before { display: none; }
.sera-mot-off-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft); flex-shrink: 0; }
.sera-mot-off-t { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.sera-mot-off-p { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }

/* anel de carregamento (cônico, verde da marca) e texto só para leitor de tela */
.sera-mot-anel {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: conic-gradient(from 0deg, transparent 0%, var(--accent, #0a9492) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: sera-mot-gira .8s linear infinite;
}
@keyframes sera-mot-gira { to { transform: rotate(360deg); } }
.sera-mot-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 768px) {
  .sera-mot { padding: 13px 14px 10px 19px; }
  .sera-mot-corpo { grid-template-columns: minmax(0, 1fr); }
  .sera-mot-num-v { font-size: 30px; }
  .sera-mot-seg-op { min-height: 40px; }
  .sera-mot-regras { padding: 10px 8px; }
  .sera-mot-pq { padding: 10px 4px 10px 0; }
  .sera-mot-sem-btn { flex: 1 1 100%; min-height: 40px; }
}
@media (max-width: 480px) {
  .sera-mot-selo-txt { font-size: 16px; }
  .sera-mot-tile { padding: 8px 8px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .sera-mot, .sera-mot-corpo, .sera-mot-pq .sera-chev, .sera-mot-seg-op { transition: none; }
  .sera-mot--anima, .sera-mot--anima .sera-mot-bar i { animation: none; }
  .sera-mot-anel { animation-duration: 2.4s; }
}

/* tema escuro: tons mais claros (contraste AA sobre o painel escuro) e ícones sobre fundo escuro */
:root[data-theme="dark"] .sera-mot { --mfg: #0e1513; box-shadow: 0 10px 26px -18px rgba(0,0,0,.7); }
:root[data-theme="dark"] .sera-mot--ok,    :root[data-theme="dark"] .sera-mot-t--ok    { --mc: #5fd68a; --mi: #5fd68a; --tc: #5fd68a; --tci: #5fd68a; }
:root[data-theme="dark"] .sera-mot--neg,   :root[data-theme="dark"] .sera-mot-t--neg   { --mc: #ff8080; --mi: #ff8080; --tc: #ff8080; --tci: #ff8080; }
:root[data-theme="dark"] .sera-mot--aviso, :root[data-theme="dark"] .sera-mot-t--aviso { --mc: #f0b454; --mi: #f0b454; --tc: #f0b454; --tci: #f0b454; }
:root[data-theme="dark"] .sera-mot--info,  :root[data-theme="dark"] .sera-mot-t--info  { --mc: #6ea4ff; --mi: #6ea4ff; --tc: #6ea4ff; --tci: #6ea4ff; }
:root[data-theme="dark"] .sera-mot-tile { --tci: #aebbb7; }
:root[data-theme="dark"] .sera-mot-t--ok, :root[data-theme="dark"] .sera-mot-t--neg, :root[data-theme="dark"] .sera-mot-t--aviso, :root[data-theme="dark"] .sera-mot-t--info { --tci: var(--tc); }
:root[data-theme="dark"] .sera-mot-chip--ok .sera-mot-chip-ico { background: #5fd68a; color: #0e1513; }
:root[data-theme="dark"] .sera-mot .sera-dec-cond--ok .sera-dec-cond-ico { background: rgba(95,214,138,.16); color: #5fd68a; }
:root[data-theme="dark"] .sera-mot .sera-dec-cond--neg .sera-dec-cond-ico { background: rgba(255,107,107,.16); color: #ff8080; }
:root[data-theme="dark"] .sera-mot .sera-dec-cond--nd .sera-dec-cond-ico { background: rgba(174,187,183,.14); color: #aebbb7; }
:root[data-theme="dark"] .sera-mot .sera-dec-tag { background: rgba(174,187,183,.12); border-color: var(--line); color: var(--ink-soft); }
:root[data-theme="dark"] .sera-mot-sem-btn.sera-btn--sec { background: transparent; color: var(--accent-ink); border-color: var(--accent); }

/* ============================================================
   FILA SERASA (financeiro-serasa-fila) — prefixo .sfi-
   Tela montada por assets/js/serasa-fila-ui.js
   ============================================================ */
.sfi { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.sfi [hidden] { display: none !important; }
.sfi-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(20,40,32,.04); }
.sfi-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sfi-mut { color: var(--muted); }
.sfi-pos { color: #15803d; }
.sfi-neg { color: #b91c1c; }
.sfi-mini { font-size: 11px; }
.sfi button:focus-visible, .sfi input:focus-visible, .sfi summary:focus-visible, .sfi-dlg button:focus-visible, .sfi-dlg input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Cabeçalho: situação da consulta automática */
.sfi-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; }
.sfi-head-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-deep); display: grid; place-items: center; flex: none; }
.sfi-head-txt { flex: 1 1 360px; min-width: 0; }
.sfi-head-txt p { margin: 0; }
.sfi-head-auto { font-size: 14px; font-weight: 600; }
.sfi-head-aviso { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px !important; }
.sfi-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: 1px; }
.sfi-dot--on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.sfi-dot--off { background: #94a3b8; }
.sfi-mockbox { margin: 0; }
.sfi-head-est { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-width: 360px; }

/* Interruptor */
.sfi-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; position: relative; flex: none; min-height: 38px; }
.sfi-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sfi-sw-trk { width: 42px; height: 24px; border-radius: 999px; background: #cbd5d1; position: relative; transition: background .18s; flex: none; }
.sfi-sw-trk::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.sfi-sw input:checked + .sfi-sw-trk { background: #16a34a; }
.sfi-sw input:checked + .sfi-sw-trk::after { transform: translateX(18px); }
.sfi-sw input:focus-visible + .sfi-sw-trk { outline: 2px solid var(--brand); outline-offset: 2px; }
.sfi-sw input:disabled { cursor: not-allowed; }
.sfi-sw input:disabled + .sfi-sw-trk { opacity: .55; }
.sfi-sw-lbl { font-size: 13px; font-weight: 700; min-width: 70px; }

/* Abas */
.sfi-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; overflow-y: hidden; flex: none; }
.sfi-tabs { scrollbar-width: none; }
.sfi-tabs::-webkit-scrollbar { display: none; }
.sfi-tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--muted); cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0; }
.sfi-tab:hover { color: var(--ink); }
.sfi-tab.on { color: var(--brand-deep); border-bottom-color: var(--brand); }
.sfi-pane { display: flex; flex-direction: column; gap: 14px; }
.sfi-pane > div:empty { display: none; }

/* Filtros */
.sfi-filtros { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.sfi-f-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.sfi-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sfi-f-l { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.sfi-f--dd { flex: 0 1 230px; }
.sfi-f--busca { flex: 1 1 260px; }
.sfi-f--data { flex: 0 1 160px; }
.sfi-in { font: inherit; font-size: 13px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 12px; min-height: 38px; box-sizing: border-box; width: 100%; }
.sfi-in::placeholder { color: var(--muted); }
.sfi-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sfi-fchip { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft); cursor: pointer; min-height: 32px; transition: background .12s, border-color .12s; }
.sfi-fchip:hover { border-color: var(--brand); }
.sfi-fchip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.sfi-fchip.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 7px; vertical-align: 1px; }

/* Botões */
.sfi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s; white-space: nowrap; }
.sfi-btn:disabled { opacity: .5; cursor: not-allowed; }
.sfi-btn--pri { background: linear-gradient(135deg, #16a34a, #2a9a3a); color: #fff; box-shadow: 0 6px 16px -8px rgba(22,163,74,.55); }
.sfi-btn--pri:hover:not(:disabled) { filter: brightness(1.07); }
.sfi-btn--sec { background: var(--panel); color: var(--brand-deep); border-color: var(--line-strong); }
.sfi-btn--sec:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
.sfi-btn--perigo { background: #dc2626; color: #fff; }
.sfi-btn--perigo-sec { background: var(--panel); color: #b91c1c; border-color: #fecaca; }
.sfi-btn--perigo-sec:hover:not(:disabled) { background: #fee2e2; }
.sfi-btn--mini { min-height: 30px; padding: 0 12px; font-size: 12px; background: var(--panel); color: var(--brand-deep); border-color: var(--line-strong); }
.sfi-btn--mini:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
.sfi-btn--mini.sfi-btn--pri { background: linear-gradient(135deg, #16a34a, #2a9a3a); color: #fff; border-color: transparent; }
.sfi-link { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--brand-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; margin-left: 10px; }
.sfi-link:hover { color: var(--brand); }

/* Lista de candidatos */
.sfi-lista { overflow: hidden; }
.sfi-barra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.sfi-barra-txt { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; font-size: 13px; }
.sfi-barra-acao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sfi-tw { overflow-x: auto; }
.sfi-tw.is-busy { opacity: .6; transition: opacity .15s; }
.sfi-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
.sfi-tb th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-soft); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sfi-tb td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.sfi-tb tbody tr:first-child td { border-top: 0; }
.sfi-tb--cand tbody tr { cursor: pointer; transition: background .1s; }
.sfi-tb--cand tbody tr:hover { background: var(--bg-soft); }
.sfi-tb tr.is-sel { background: var(--brand-soft) !important; }
.sfi-tb tr.is-bloq { cursor: default; }
.sfi-tb tr.is-bloq td:not(.sfi-td-chk) { opacity: .7; }
.sfi-td-chk { width: 44px; padding-right: 0 !important; }
.sfi-th-score, .sfi-td-score { text-align: right !important; }
.sfi-td-acao { text-align: right; white-space: nowrap; }
.sfi-acoes { display: inline-flex; gap: 6px; }
.sfi-cli { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sfi-cli strong { font-weight: 700; overflow-wrap: anywhere; }
.sfi-doc { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sfi-score { font-size: 15px; font-variant-numeric: tabular-nums; }
.sfi-td-score .sfi-mini { display: block; }
.sfi-erro-txt { margin-top: 3px; max-width: 220px; overflow-wrap: anywhere; }

/* Checkbox estilizado e acessível */
.sfi-chk { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; min-width: 24px; min-height: 24px; }
.sfi-chk input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sfi-chk-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-strong); background: var(--panel); display: grid; place-items: center; color: transparent; flex: none; transition: background .12s, border-color .12s; }
.sfi-chk:hover .sfi-chk-box { border-color: var(--brand); }
.sfi-chk input:checked + .sfi-chk-box { background: #16a34a; border-color: #16a34a; color: #fff; }
.sfi-chk input:indeterminate + .sfi-chk-box { background: #16a34a; border-color: #16a34a; }
.sfi-chk input:indeterminate + .sfi-chk-box svg { display: none; }
.sfi-chk input:indeterminate + .sfi-chk-box::after { content: ""; width: 9px; height: 2.5px; border-radius: 2px; background: #fff; }
.sfi-chk input:focus-visible + .sfi-chk-box { outline: 2px solid var(--brand); outline-offset: 2px; }
.sfi-chk input:disabled { cursor: not-allowed; }
.sfi-chk input:disabled + .sfi-chk-box { opacity: .45; background: var(--bg-soft); }
.sfi-chk--txt { font-size: 13px; line-height: 1.35; align-items: flex-start; }
.sfi-chk--txt .sfi-chk-box { margin-top: 1px; }

/* Chips e selos */
.sfi-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; border: 1px solid; white-space: nowrap; }
.sfi-chip--proc, .sfi-chip--neutro { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
.sfi-chip--ok { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.sfi-chip--aviso { color: #a16207; background: #fef9c3; border-color: #fde68a; }
.sfi-chip--hoje { color: #c2410c; background: #ffedd5; border-color: #fed7aa; }
.sfi-chip--sem, .sfi-chip--vencida, .sfi-chip--erro, .sfi-chip--neg { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.sfi-chip--info { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }
.sfi-fchip--sem.on, .sfi-fchip--vencida.on, .sfi-fchip--erro.on { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.sfi-fchip--sem.on::before, .sfi-fchip--vencida.on::before, .sfi-fchip--erro.on::before { background: #dc2626; }
.sfi-fchip--hoje.on { background: #ffedd5; border-color: #fdba74; color: #c2410c; }
.sfi-fchip--hoje.on::before { background: #ea580c; }
.sfi-fchip--aviso.on { background: #fef9c3; border-color: #fde047; color: #a16207; }
.sfi-fchip--aviso.on::before { background: #ca8a04; }
.sfi-fchip--ok.on { background: #dcfce7; border-color: #86efac; color: #15803d; }
.sfi-fchip--ok.on::before { background: #16a34a; }
.sfi-selo { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 800; border: 1px solid; }
.sfi-selo--ok { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.sfi-selo--neg { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.sfi-selo--aviso { color: #a16207; background: #fef9c3; border-color: #fde68a; }
.sfi-selo--info { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }
.sfi-selo--neutro { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }

/* Paginação e estados */
.sfi-pag { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.sfi-pag:empty { display: none; }
.sfi-pag-nav { display: inline-flex; align-items: center; gap: 10px; }
.sfi-pag-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.sfi-estado { padding: 38px 20px; text-align: center; color: var(--muted); font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sfi-estado--erro { color: #b91c1c; }
.sfi-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(10,148,146,.25); border-top-color: var(--brand); display: inline-block; animation: sfi-giro .8s linear infinite; flex: none; }
@keyframes sfi-giro { to { transform: rotate(360deg); } }

/* Painel do lote */
.sfi-retomar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; border-color: #fde68a; background: #fffbeb; font-size: 13px; }
.sfi-prog { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sfi-prog-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; }
.sfi-prog-tit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sfi-prog-tit h3 { margin: 0; font-size: 15px; font-weight: 800; }
.sfi-prog-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sfi-prog-txt { margin: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.sfi-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sfi-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #16a34a, #4ade80); transition: width .35s ease; }
.sfi-prog-cont { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-soft); }
.sfi-cnt--ok { color: #15803d; font-weight: 700; }
.sfi-cnt--erro { color: #b91c1c; font-weight: 700; }
.sfi-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; font-weight: 600; }
.sfi-aviso svg { flex: none; margin-top: 2px; }
.sfi-itens { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; position: relative; }
.sfi-it { display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); }
.sfi-it:first-child { border-top: 0; }
.sfi-it--processando { background: var(--brand-soft); }
.sfi-it--erro { background: #fef2f2; }
.sfi-it-n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.sfi-it-main { display: flex; flex-direction: column; min-width: 0; }
.sfi-it-main strong { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.sfi-it-st { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: 12.5px; }
.sfi-it-mot { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.sfi-it-score { font-size: 12.5px; color: var(--ink-soft); }
.sfi-it-score strong { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.sfi-it-acao { justify-self: end; }
.sfi-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: #f1f5f9; color: #475569; }
.sfi-pill--proc { background: #fff; color: var(--brand-deep); border: 1px solid var(--brand); }
.sfi-pill--ok { background: #dcfce7; color: #15803d; }
.sfi-pill--erro { background: #fee2e2; color: #b91c1c; }

/* Lotes recentes */
.sfi-rec { padding: 0; overflow: hidden; }
.sfi-rec summary { padding: 13px 16px; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.sfi-rec summary::-webkit-details-marker { display: none; }
.sfi-rec summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.sfi-rec[open] summary::before { transform: rotate(45deg); }
.sfi-rec[open] summary { border-bottom: 1px solid var(--line); }

/* Diálogo */
.sfi-ov { position: fixed; inset: 0; z-index: 10060; background: rgba(15,23,28,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sfi-dlg { background: var(--panel); color: var(--ink); border-radius: 16px; width: 480px; max-width: 100%; max-height: 90vh; overflow: auto; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 12px; }
.sfi-dlg-t { margin: 0; font-size: 17px; font-weight: 800; }
.sfi-dlg-p { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sfi-dlg-res { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sfi-dlg-res > div { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.sfi-dlg-res dt { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.sfi-dlg-res dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sfi-dlg-res-dest { background: var(--brand-soft) !important; border-color: var(--brand) !important; }
.sfi-dlg-custo { margin: 0; font-size: 12.5px; color: var(--ink-soft); padding: 9px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; }
.sfi-dlg-f { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Responsivo: tabelas viram cartões no celular */
@media (max-width: 900px) {
  .sfi-it { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .sfi-it-st { grid-column: 2 / 4; grid-row: 2; }
}
@media (max-width: 720px) {
  .sfi-head { padding: 12px 14px; gap: 10px 12px; }
  .sfi-head-txt { flex: 1 1 200px; }
  .sfi-tab { padding: 10px 12px; font-size: 12.5px; }
  .sfi-dlg-res dt { font-size: 10px; }
  .sfi-f--dd, .sfi-f--busca, .sfi-f--data { flex: 1 1 100%; }
  .sfi-f--data { flex: 1 1 calc(50% - 7px); }
  .sfi-tw { overflow-x: visible; }
  .sfi-tb, .sfi-tb tbody, .sfi-tb tr, .sfi-tb td { display: block; width: 100%; box-sizing: border-box; }
  .sfi-tb thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .sfi-tb tr { position: relative; padding: 10px 14px 12px 52px; border-top: 1px solid var(--line); }
  .sfi-tb tbody tr:first-child { border-top: 0; }
  .sfi-tb td { border: 0; padding: 3px 0; text-align: left !important; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .sfi-tb td[data-l]::before { content: attr(data-l); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); flex: none; }
  .sfi-tb td[data-l="Cliente"] { display: block; padding-bottom: 5px; }
  .sfi-tb td[data-l="Cliente"]::before { display: none; }
  .sfi-tb .sfi-cli { align-items: flex-end; text-align: right; }
  .sfi-tb td[data-l="Cliente"] .sfi-cli { align-items: flex-start; text-align: left; }
  .sfi-tb td.sfi-td-chk { position: absolute; left: 14px; top: 12px; width: auto; padding: 0 !important; display: block; }
  .sfi-tb--cons tr, .sfi-tb--lotes tr { padding-left: 14px; }
  .sfi-td-acao { padding-top: 8px !important; display: block !important; }
  .sfi-acoes { display: flex; }
  .sfi-acoes .sfi-btn { flex: 1 1 auto; }
  .sfi-barra { flex-direction: column; align-items: stretch; }
  .sfi-barra-acao { justify-content: space-between; }
  .sfi-barra-acao .sfi-btn { flex: 1 1 auto; }
  .sfi-pag { justify-content: center; }
  .sfi-prog-btns { width: 100%; }
  .sfi-prog-btns .sfi-btn { flex: 1 1 auto; }
  .sfi-it { padding: 9px 10px; gap: 6px 8px; }
  .sfi-itens { max-height: 320px; }
  .sfi-dlg { padding: 18px; }
  .sfi-dlg-f .sfi-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sfi-spin { animation: none; }
  .sfi-bar span, .sfi-sw-trk, .sfi-sw-trk::after, .sfi-rec summary::before { transition: none; }
}

/* Modo escuro */
:root[data-theme="dark"] .sfi-card { box-shadow: none; }
:root[data-theme="dark"] .sfi-retomar { background: rgba(250,204,21,.08); border-color: rgba(250,204,21,.3); }
:root[data-theme="dark"] .sfi-dlg-custo { background: rgba(250,204,21,.08); border-color: rgba(250,204,21,.3); }
:root[data-theme="dark"] .sfi-aviso { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.35); color: #fca5a5; }
:root[data-theme="dark"] .sfi-it--erro { background: rgba(220,38,38,.1); }
:root[data-theme="dark"] .sfi-chip--proc, :root[data-theme="dark"] .sfi-chip--neutro, :root[data-theme="dark"] .sfi-pill, :root[data-theme="dark"] .sfi-selo--neutro { background: rgba(148,163,184,.14); border-color: var(--line); color: var(--ink-soft); }
:root[data-theme="dark"] .sfi-chip--ok, :root[data-theme="dark"] .sfi-selo--ok, :root[data-theme="dark"] .sfi-pill--ok { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); color: #5fd68a; }
:root[data-theme="dark"] .sfi-chip--aviso, :root[data-theme="dark"] .sfi-selo--aviso { background: rgba(250,204,21,.12); border-color: rgba(250,204,21,.35); color: #fcd34d; }
:root[data-theme="dark"] .sfi-chip--hoje { background: rgba(249,115,22,.14); border-color: rgba(249,115,22,.4); color: #fdba74; }
:root[data-theme="dark"] .sfi-chip--sem, :root[data-theme="dark"] .sfi-chip--vencida, :root[data-theme="dark"] .sfi-chip--erro, :root[data-theme="dark"] .sfi-chip--neg, :root[data-theme="dark"] .sfi-selo--neg, :root[data-theme="dark"] .sfi-pill--erro { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.4); color: #fca5a5; }
:root[data-theme="dark"] .sfi-chip--info, :root[data-theme="dark"] .sfi-selo--info { background: rgba(79,141,255,.14); border-color: rgba(79,141,255,.4); color: #93b8ff; }
:root[data-theme="dark"] .sfi-pos, :root[data-theme="dark"] .sfi-cnt--ok { color: #5fd68a; }
:root[data-theme="dark"] .sfi-neg, :root[data-theme="dark"] .sfi-cnt--erro { color: #fca5a5; }
:root[data-theme="dark"] .sfi-pill--proc { background: transparent; }

/* ===== Integração Serasa (Admin Catálogo, serasa-config-ui.js) — reaproveita .sfi-* da Fila Serasa ===== */
.scc { max-width: 980px; }
.scc-carregando { padding: 18px; }
.scc-bloco { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.scc-tit { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.scc-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 16px; }
.scc-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.scc-lbl { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.scc-dica { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.scc-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--line); align-self: flex-start; }
.scc-seg-btn { font: inherit; font-size: 13px; font-weight: 700; min-height: 34px; padding: 0 16px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.scc-seg-btn.on { background: var(--panel); color: var(--brand-deep); box-shadow: 0 1px 3px rgba(20,40,32,.12); }
.scc-seg-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.scc-link { align-self: flex-start; font: inherit; font-size: 12px; font-weight: 700; color: #b91c1c; background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; }
.scc-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.scc-msg { flex: 1 1 260px; font-size: 12.5px; font-weight: 600; min-height: 18px; }
:root[data-theme="dark"] .scc-seg-btn.on { box-shadow: 0 1px 3px rgba(0,0,0,.4); }
:root[data-theme="dark"] .scc-link { color: #fca5a5; }

/* =====================================================================================================================
   Estoque › Etiquetas de peças (estoque-etiquetas-ui.js, etapa 5, 15/10/2026). Só tokens do portal-2026.css: o modo
   escuro vem junto, sem passar pelo gerar_dark_css.py. Um rolar só, no miolo da página; sem título de tela.
   ===================================================================================================================== */
.etp { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; color: var(--ink); }
.etp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.etp-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; overflow-y: hidden; flex: none; scrollbar-width: none; }
.etp-tabs::-webkit-scrollbar { display: none; }
.etp-tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink-2); cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0; }
.etp-tab:hover { color: var(--ink); }
.etp-tab.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.etp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.etp-bloqueada .etp-tabs { display: none; }
.etp-pane { display: flex; flex-direction: column; gap: 14px; }
.etp-pane[hidden] { display: none; }
.etp-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.etp-h4, .etp-secao h4 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.etp-txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.etp-intro { max-width: 860px; }
.etp-forte { font-weight: 700; color: var(--ink); }
.etp-mudo { color: var(--ink-2); font-size: 12px; }
.etp-neg { color: var(--red); font-weight: 600; }
.etp-atencao { color: var(--ink); font-weight: 700; }
.etp-atencao::before, .etp-pend::before, .etp-marca::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--amber); vertical-align: 1px; }
.etp-flex { flex: 1 1 auto; }
.etp-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.etp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.etp-destaque { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--ink); font-weight: 800; text-align: center; box-shadow: inset 0 0 0 1px var(--amber); }

/* barra do painel: busca + pílulas + Novo link */
.etp-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.etp-busca { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 320px; min-width: 200px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--input); color: var(--ink-3); }
.etp-busca:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.etp .etp-busca input { flex: 1; min-width: 0; height: 32px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; font: inherit; font-size: 13px; color: var(--ink); }
.etp-pilulas { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
.etp-pilulas--quebra { flex-wrap: wrap; }
.etp-pilula { display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.etp-pilula:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-50); }
.etp-pilula.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.etp-pilula:disabled { opacity: .55; cursor: default; }
.etp-pilula--alta { flex-direction: column; height: auto; min-height: 44px; padding: 6px 14px; align-items: flex-start; border-radius: 12px; }
.etp-pilula--alta b { font-size: 12.5px; font-weight: 800; color: inherit; }
.etp-pilula--alta small { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.etp-btn-novo { display: inline-flex; align-items: center; gap: 6px; }
.etp-voltar { display: inline-flex; align-items: center; gap: 4px; }
/* revisão de UX (15/10): o portal não tem estilo de .btn desabilitado (parecia ativo); "Anular" (claro e escuro) e as
   ações vermelhas no escuro perdiam o vermelho para as regras gerais de botão (portal-2026.css e a do escuro, acima) */
.etp .btn:disabled { opacity: .5; cursor: not-allowed; }
.etp .etp-td-acoes .btn.etp-btn-neg:not(:disabled):not(:hover) { color: var(--red) !important; }
:root[data-theme="dark"] .etp .btn.btn-danger:not(:disabled),
:root[data-theme="dark"] .etp .etp-td-acoes .btn.etp-btn-neg:not(:disabled) { color: var(--red) !important; border-color: var(--red-line) !important; }
.etp a.btn { text-decoration: none !important; }
.etp-link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }

/* pílulas de situação */
.etp-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; color: var(--ink); border: 1px solid transparent; }
.etp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.etp-pill--ok { background: var(--good-soft); }
.etp-pill--ok::before { background: var(--good); }
.etp-pill--aviso { background: var(--amber-soft); }
.etp-pill--aviso::before { background: var(--amber); }
.etp-pill--neg { background: var(--red-soft); }
.etp-pill--neg::before { background: var(--red); }
.etp-pill--info { background: var(--accent-soft); }
.etp-pill--info::before { background: var(--accent); }
.etp-pill--neutro { background: var(--chip); color: var(--ink-2); }
.etp-pend { display: block; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.etp-marca { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--ink-2); }

/* tabelas: um rolar só (o da página); largas rolam na horizontal dentro do cartão */
.etp-tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.etp-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.etp-tabela thead th { position: sticky; top: 0; background: var(--bg-2); color: var(--ink-2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.etp-tabela thead th.etp-num { text-align: right; }
.etp-tabela td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.etp-tabela tbody tr:last-child td { border-bottom: 0; }
/* no escuro, sem a grade que portal-2026-dark.css põe em toda tabela: só a linha de baixo, como no claro */
:root[data-theme="dark"] .etp-tabela td, :root[data-theme="dark"] .etp-tabela th { border-width: 0 0 1px 0 !important; }
:root[data-theme="dark"] .etp-tabela tbody tr:last-child td { border-bottom-width: 0 !important; }
.etp-linha { cursor: pointer; }
.etp-linha:hover td, .etp-linha:focus td { background: var(--accent-50); }
.etp-linha:focus { outline: none; }
.etp-linha:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.etp-removido td { color: var(--ink-2); font-style: italic; }
.etp-td-foto { width: 56px; }
.etp-foto { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--photo); border: 1px solid var(--line); }
.etp-semfoto { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: 1px dashed var(--line-2); color: var(--ink-2); font-size: 10px; font-weight: 700; text-align: center; line-height: 1.1; }
.etp-td-acoes { white-space: nowrap; }
.etp-td-acoes .btn { margin: 0 4px 4px 0; }
.etp-tr-conf td, .etp-tr-arq td { background: var(--bg-2); }
.etp-rodape { margin: 0; font-size: 12px; color: var(--ink-2); }
.etp-seriais code, .etp-resultado code { font-family: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 12px; background: var(--chip); color: var(--ink); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.etp-seriais { margin: 0; line-height: 1.9; }

/* detalhe */
.etp-det-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etp-det-titulo { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.etp-dados { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--ink-2); }
.etp-secao { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.etp-acoes-link { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.etp-renovar { display: inline-flex; align-items: flex-end; gap: 6px; }
.etp-aviso { margin: 0; padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.45; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); }
.etp-aviso--ok { background: var(--good-soft); border-color: transparent; color: var(--ink); }
.etp-aviso--erro, .etp-aviso--neg { background: var(--red-soft); border-color: var(--red-line); color: var(--ink); }
.etp-aviso--atencao { background: var(--amber-soft); border-color: transparent; color: var(--ink); }
.etp-conf { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-50); }
.etp-conf--neg { border-color: var(--red-line); background: var(--red-soft); }
.etp-conf p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.etp-acoes { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.etp-lista-pm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.etp-pm { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.etp-pm-acoes { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.etp-controle { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px; }
.etp-teto { display: flex; align-items: center; gap: 6px; }

/* campos */
.etp-campo { display: inline-flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.etp-campo > span { text-transform: none; }
.etp-campo input { height: 32px; padding: 0 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
.etp-campo--largo { display: flex; width: 100%; max-width: 560px; }
.etp-campo--largo input { width: 100%; }
.etp-campo--curto input { width: 92px; }
.etp-campo--dias input { width: 100%; }
.etp-campo--mais { flex-direction: row; align-items: center; gap: 4px; }
.etp-campo--mais b { font-size: 14px; color: var(--ink-2); }
.etp-input-largo { width: 100%; max-width: 560px; height: 38px; padding: 0 12px; font: inherit; font-size: 13.5px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
.etp-escolhas { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 2px; max-width: 760px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.etp-escolha { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.etp-escolha:hover, .etp-escolha:focus-visible { background: var(--accent-50); color: var(--ink); outline: none; }
.etp-escolha:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }  /* o fundo sozinho não se vê (1,04:1) */
.etp-escolha[aria-disabled="true"] { cursor: not-allowed; opacity: .75; }
.etp-novo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-50); }

/* quadro do link (aparece uma vez) */
.etp-quadro { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--accent-line-2); border-radius: var(--r-lg); background: var(--accent-50); box-shadow: var(--shadow-soft); }
.etp-quadro p { margin: 0; }
.etp .etp-url { width: 100%; max-width: 760px; height: 38px; padding: 0 12px; font-family: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace) !important; font-size: 12.5px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--input); }

/* arquivos da fila */
.etp-arq { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; color: var(--ink-2); }
.etp-giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-line); border-top-color: var(--accent); animation: etp-giro .8s linear infinite; }
@keyframes etp-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .etp-giro { animation: none; } }

/* etiqueta avulsa */
.etp-form { display: flex; flex-direction: column; gap: 14px; }
.etp-passo { display: flex; gap: 12px; align-items: flex-start; }
.etp-passo-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; }
.etp-passo-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.etp-rotulo { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.etp-ajuda { margin: 0; font-size: 12px; color: var(--ink-2); }
.etp-peca-cartao { display: flex; align-items: center; gap: 12px; max-width: 560px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); font-size: 13px; }
.etp-peca-cartao > div { flex: 1; min-width: 0; }
.etp-qtd { display: inline-flex; align-items: center; gap: 6px; }
.etp-qtd input { width: 84px; height: 34px; text-align: center; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
.etp-qtd .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; font-size: 16px; padding: 0 !important; }
.etp-gerar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-left: 36px; }
.etp-resultado { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-50); }
.etp-resultado p { margin: 0; }

@media (max-width: 1366px) {
  .etp-card { padding: 12px 12px; }
  .etp-tabela td, .etp-tabela thead th { padding: 8px 9px; }
}
@media (max-width: 767px) {
  .etp-barra { flex-direction: column; align-items: stretch; }
  .etp-busca { flex: 1 1 auto; }
  .etp-gerar { padding-left: 0; }
}