/* ============================================================================
   NOVA CASCA (estilo CRM / RD Station) — carregada no <head> pra aplicar já na
   PRIMEIRA PINTURA (sem o layout antigo piscando). Só APARÊNCIA: a navegação
   (clique dos .nav-item, goTo, troca de módulo) é a mesma.
   - Topo verde ESCURO (todas as larguras)
   - Rail de ícones CLARO à esquerda (desktop > 1366px)
   - Troca de módulo no topo (#moduloSwitcher) — a barra da direita fica oculta
   Abaixo de 1366px a sidebar continua sendo o drawer com rótulos (mobile/notebook).
   ========================================================================== */

/* Remove os anéis concêntricos decorativos do fundo (body::after do liquid-glass) */
body::after { display: none !important; }

/* ---- Topo verde escuro ---- */
.topbar {
  background: linear-gradient(100deg, #0b1a15, #103028) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar .breadcrumb { color: rgba(234,244,240,0.6) !important; }
.topbar .page-title { color: #eaf4f0 !important; }
/* Busca branca nítida: campo sólido que "flutua" sobre a barra verde (sombra suave),
   borda sutil pra definir, foco com anel verde da marca. */
.topbar .topbar-search { background: #ffffff !important; border: 1px solid rgba(8,18,15,0.06) !important; box-shadow: 0 2px 8px rgba(8,18,15,0.20) !important; }
.topbar .topbar-search:hover { box-shadow: 0 3px 12px rgba(8,18,15,0.26) !important; }
.topbar .topbar-search:focus-within { background: #ffffff !important; border-color: var(--og-green) !important; box-shadow: 0 0 0 3px rgba(14,124,102,0.22), 0 2px 8px rgba(8,18,15,0.20) !important; }
.topbar .topbar-search-input { color: #10231d !important; }
.topbar .topbar-search-input::placeholder { color: #8a9a94 !important; }
.topbar .topbar-search-icone { color: #4e8f79 !important; }
.topbar .topbar-icon-btn { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.12) !important; color: #eaf4f0 !important; }
.topbar .topbar-icon-btn:hover { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.22) !important; color: #fff !important; }
.topbar .sidebar-toggle { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.12) !important; color: #eaf4f0 !important; }

/* ---- Botão de troca de módulo no topo (#moduloSwitcher) ---- */
.modulo-switcher-top {
  display: flex; align-items: center; gap: 9px; padding: 5px 11px 5px 6px; border-radius: 12px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.12); cursor: pointer;
  transition: background .14s, border-color .14s; margin-left: 6px; flex: 0 0 auto; font-family: inherit;
}
.modulo-switcher-top:hover { background: rgba(255,255,255,0.15); }
.modulo-switcher-top .mst-av {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--modulo-cor, #23322a); color: #fff; font-weight: 800; font-size: 13px; overflow: hidden;
}
.modulo-switcher-top .mst-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.modulo-switcher-top .mst-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; min-width: 0; }
.modulo-switcher-top .mst-txt small { font-size: 9px; letter-spacing: .6px; text-transform: uppercase; color: rgba(234,244,240,0.6); }
.modulo-switcher-top .mst-txt strong { font-size: 13.5px; color: #eaf4f0; font-weight: 700; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.modulo-switcher-top .mst-chev { color: rgba(234,244,240,0.7); flex: 0 0 auto; transition: transform .2s; }
.modulo-switcher-top.open .mst-chev { transform: rotate(180deg); }
@media (max-width: 820px) { .modulo-switcher-top .mst-txt { display: none; } }

/* Esconde a barra de módulos vertical da direita (substituída pelo botão do topo) */
#moduloRail, #moduloRailHandle { display: none !important; }
body.com-rail-modulos { margin-right: 0 !important; }

/* ---- Enhancer universal de <select> (select-enhance.js): esconde o nativo e
   mostra um botão + popup custom (mata o "azul do SO"). Cobre o sistema todo. ---- */
.ns-wrap { display: inline-block; vertical-align: middle; position: relative; max-width: 100%; }
select.ns-native { display: none !important; }
.ns-btn {
  display: inline-flex !important; align-items: center; justify-content: space-between; gap: 8px;
  box-sizing: border-box; width: 100%; cursor: pointer; text-align: left;
  min-height: 36px; font: inherit; font-size: 13px;
  border: 1px solid var(--line) !important; background: var(--panel) !important; color: var(--ink) !important;
  border-radius: 9px !important; padding: 7px 11px !important; -webkit-appearance: none !important; appearance: none !important;
  transition: border-color .12s;
}
.ns-btn:hover { border-color: color-mix(in srgb, var(--og-green) 40%, var(--line)) !important; }
.ns-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--og-green) 45%, transparent); outline-offset: 1px; }
.ns-btn .ns-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ns-btn .ns-chev { flex: none; opacity: .5; transition: transform .15s; }
.ns-btn.open .ns-chev { transform: rotate(180deg); }
.ns-menu { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: 0 16px 38px rgba(8,18,15,.22); z-index: 100060; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.ns-opt { display: block; width: 100%; text-align: left; padding: 8px 11px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.ns-opt:hover:not(:disabled) { background: var(--bg); }
.ns-opt.sel { background: color-mix(in srgb, var(--og-green) 15%, transparent); color: var(--og-green); font-weight: 600; }
.ns-opt:disabled { opacity: .5; cursor: default; }

/* ---- Selects nativos: popup theme-aware (Chrome respeita option bg/color).
   O modelo definitivo (sem o azul do SO) é o og-dropdown — conversão incremental
   via auditoria. Isto é o baseline que cobre todos os <select> de imediato. ---- */
.app select { accent-color: var(--og-green); }
.app option { background-color: var(--panel); color: var(--ink); }
.app option:checked { background-color: color-mix(in srgb, var(--og-green) 22%, var(--panel)); color: var(--og-green); font-weight: 600; }

/* ---- Sidebar clara (casca) em TODAS as larguras — inclusive o drawer (≤1366px).
   Antes o visual casca só valia >1367px; abaixo disso caía na sidebar antiga
   verde + rodapé de login. Agora o drawer também é claro, com rótulos. ---- */
.app.casca-rail .sidebar { background: var(--panel) !important; color: var(--ink) !important; border-right: 1px solid var(--line) !important; }
.app.casca-rail .sidebar-footer { display: none !important; } /* perfil vive no menu do topo */
.app.casca-rail .nav-item { color: var(--ink) !important; }
.app.casca-rail .nav-item svg { color: inherit; }
.app.casca-rail .nav-item:hover { background: var(--bg) !important; color: var(--ink) !important; }
.app.casca-rail .nav-item.active, .app.casca-rail .nav-item.ativo { background: rgba(14,124,102,0.14) !important; color: var(--og-green) !important; }
.app.casca-rail .nav-item-meupainel { background: none !important; color: var(--ink) !important; box-shadow: none !important; }
.app.casca-rail .nav-item-meupainel:hover { background: var(--bg) !important; color: var(--ink) !important; transform: none !important; }
.app.casca-rail .nav-item-meupainel.active, .app.casca-rail .nav-item-meupainel.ativo { background: rgba(14,124,102,0.14) !important; color: var(--og-green) !important; }
.app.casca-rail .nav-item-meupainel svg { color: inherit !important; }
.app.casca-rail .nav-subheader, .app.casca-rail .nav-module { color: var(--muted) !important; }
.app.casca-rail .nav-module .chevron { color: var(--muted); }
.app.casca-rail .nav-divisor { background: var(--line) !important; }
/* logo com faixa verde pra a marca branca aparecer sobre a sidebar clara */
.app.casca-rail .logo { background: linear-gradient(160deg,#0e2a22,#0a1f19) !important; }

/* ---- Rail de ícones premium (desktop) ----
   Reforma visual de 10/09 (Pablo: "ficou muito feio, não ficou nem premium").
   Antes: fundo chapado, ícones soltos de largura 100%, hover/active só trocavam
   a cor de fundo — sem profundidade, sem hierarquia entre o dock fixo e o resto.
   Agora: painel com leve gradiente + sombra flutuante, ícones em "squircles"
   44×44 centralizados, hover com leve elevação, estado ativo com pill em
   gradiente + indicador verde fino na lateral (acento pontual, não borda
   grossa — feedback antigo do Pablo).

   Abre ao passar o mouse (mostra o nome de cada aba) e recolhe sozinho ao
   sair — pedido do Pablo no mesmo dia. Primeira versão flutuava por cima do
   conteúdo (z-index), mas isso cobria o canto do topbar/abas — "não está
   incorporando com o portal" (Pablo 10/09). Agora é reflow de verdade: a
   COLUNA do grid cresce (68px→210px) via :has(.sidebar:hover), então
   .main/topbar/abas encolhem e deslizam junto — nada fica coberto/cortado. */
@media (min-width: 1367px) {
  .app.casca-rail {
    grid-template-columns: 68px 1fr;
    transition: grid-template-columns .18s ease;
  }
  /* 270px (era 210, 18/09): rótulos longos do módulo Sistema ("Orçamentos: Regras de
     Desconto", "Configurações de E-mail") saíam cortados — Pablo: "barra lateral precisa aumentar". */
  .app.casca-rail:has(.sidebar:hover) { grid-template-columns: 270px 1fr; }
  .app.casca-rail #sidebarToggle { display: none !important; }

  .app.casca-rail .sidebar {
    background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--bg) 45%, var(--panel))) !important;
    border-right: none !important;
    color: var(--ink) !important; overflow: visible;
    width: 100%; box-shadow: none; transition: box-shadow .18s ease;
  }
  .app.casca-rail .sidebar:hover {
    box-shadow: 6px 0 20px -12px rgba(8,20,16,.35);
  }
  /* A linha clara da borda fica só no .nav (parte clara) — a faixa da marca
     em cima é escura e emenda no topbar sem risco no meio. */
  .app.casca-rail .nav {
    padding: 12px 7px 10px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
    display: flex; flex-direction: column; gap: 3px; align-items: center;
    border-right: 1px solid var(--line); box-sizing: border-box;
    /* flex:1 1 0 + min-height:0 — sem isso o overflow-y:auto acima não faz nada:
       .nav é filho flex-column de .sidebar (altura travada em 100vh pelo grid do
       .app) e, sem essa trava, cresce pro tamanho do próprio conteúdo em vez de
       ocupar só o espaço que sobra — a lista (ex.: módulo Sistema com Admin
       Catálogo expandido) fica cortada embaixo, sem scroll (Pablo 22/09: "barra
       lateral falta opção de poder rolar pra cima a tela pra ver as opções"). */
    flex: 1 1 0; min-height: 0;
  }
  .app.casca-rail .nav::-webkit-scrollbar { display: none; width: 0; }

  /* Faixa da marca no topo do rail (Pablo 10/09: "faltou a logo" / "logo não
     está encaixando"): MESMA altura (--topbar-height, medida pelo JS) e mesmo
     verde escuro do topbar — o topo do rail + topbar viram uma barra contínua
     de ponta a ponta, em vez da logo boiar solta no branco. Fechado mostra o
     selo redondo (favicon); aberto mostra o logotipo branco por extenso.
     Continua clicável pra Meu Painel (wireLogo() no JS). */
  .app.casca-rail .logo {
    display: flex !important; align-items: center; justify-content: center;
    height: var(--topbar-height, 71px); min-height: 0; padding: 0 10px; flex: none;
    background: linear-gradient(100deg, #0b1a15, #0f2b23) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    cursor: pointer; overflow: hidden;
  }
  .app.casca-rail .logo-img {
    content: url('../../img/favicon/favicon-192.png');
    width: 34px; height: 34px; max-width: 34px; object-fit: cover; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 4px 12px -4px rgba(0,0,0,.6);
  }
  .app.casca-rail .sidebar:hover .logo-img {
    content: url('../../img/logo-oriente-branca.png');
    width: 150px; height: auto; max-width: 150px; object-fit: contain;
    border-radius: 0; box-shadow: none;
  }

  /* nav-item = squircle centralizado, texto escondido (font-size:0). Ao
     abrir a barra (.sidebar:hover) vira uma linha com ícone + rótulo. */
  .app.casca-rail .nav-item {
    justify-content: center; align-items: center; gap: 0; font-size: 0;
    position: relative; width: 38px; height: 38px; flex: none; margin: 0 0 3px; border-radius: 11px;
    color: var(--ink) !important;
    transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease,
                width .18s ease, padding .18s ease, font-size 0s .08s;
  }
  .app.casca-rail .nav-item svg { width: 18px; height: 18px; flex: none; transition: transform .16s ease; }
  .app.casca-rail .nav-item:hover {
    background: color-mix(in srgb, var(--og-green) 10%, var(--panel)) !important;
    color: var(--og-green) !important;
    box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--og-green) 35%, transparent);
  }
  .app.casca-rail .sidebar:not(:hover) .nav-item:hover { transform: translateY(-1px); }
  .app.casca-rail .nav-item:hover svg { transform: scale(1.06); }
  .app.casca-rail .nav-item.active, .app.casca-rail .nav-item.ativo {
    background: linear-gradient(160deg, color-mix(in srgb, var(--og-green) 20%, var(--panel)), color-mix(in srgb, var(--og-green) 7%, var(--panel))) !important;
    color: var(--og-green) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--og-green) 26%, transparent);
  }
  .app.casca-rail .nav-item.active::before, .app.casca-rail .nav-item.ativo::before {
    content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 14px; border-radius: 3px; background: var(--og-green);
    transition: left .18s ease;
  }

  /* Início (cat-painel) agora aparece no dock como ícone de casa plano — o topo
     tem a marca Oriente compacta, sem botão HOME verde grandão. */

  /* Unifica os itens "meupainel" (que têm fundo verde + margem) com os ícones
     lisos do resto — some a desproporção do rail. */
  .app.casca-rail .nav-item-meupainel {
    background: none !important; border: none !important;
    margin: 0 0 3px !important; width: 38px !important; height: 38px !important; flex: none !important; box-shadow: none !important;
    padding: 0 !important; border-radius: 11px !important;
    color: var(--ink) !important; font-size: 0 !important;
    display: flex !important; justify-content: center !important; align-items: center !important; gap: 0 !important;
    position: relative; transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease,
                width .18s ease, padding .18s ease, font-size 0s .08s;
  }
  .app.casca-rail .nav-item-meupainel:hover {
    background: color-mix(in srgb, var(--og-green) 10%, var(--panel)) !important;
    color: var(--og-green) !important;
    box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--og-green) 35%, transparent);
  }
  .app.casca-rail .sidebar:not(:hover) .nav-item-meupainel:hover { transform: translateY(-1px); }
  .app.casca-rail .nav-item-meupainel.active, .app.casca-rail .nav-item-meupainel.ativo {
    background: linear-gradient(160deg, color-mix(in srgb, var(--og-green) 20%, var(--panel)), color-mix(in srgb, var(--og-green) 7%, var(--panel))) !important;
    color: var(--og-green) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--og-green) 26%, transparent);
  }
  .app.casca-rail .nav-item-meupainel.active::before, .app.casca-rail .nav-item-meupainel.ativo::before {
    content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 14px; border-radius: 3px; background: var(--og-green);
    transition: left .18s ease;
  }
  .app.casca-rail .nav-item-meupainel svg { color: inherit !important; width: 18px !important; height: 18px !important; flex: none; }

  /* Headers de grupo somem só no rail FECHADO (68px, só ícone — não cabe texto).
     BUG (Pablo 21/09, "barra lateral ta muito feia design desalinhado"): esta regra
     estava sem o `:not(:hover)`, então escondia os headers (".nav-module": botões
     "Comercial"/"Gestão Comercial"/"Sistema"...) TAMBÉM com a barra ABERTA (hover,
     270px, rótulos visíveis) — só que o switcher (modulo-switcher-ui.js) continua
     mostrando o `.nav-module-items` correspondente, então os itens (Orçamentos,
     Tarefas, Manutenção da Frota, TV Comercial…) ficavam soltos, sem o cabeçalho do
     módulo acima, logo abaixo do card "Acesso rápido". Abaixo de 1366px (drawer) o
     header nunca some (styles.css) — aqui, aberto, tem que se comportar igual. */
  .app.casca-rail .sidebar:not(:hover) .nav-module,
  .app.casca-rail .sidebar:not(:hover) .nav-subheader,
  .app.casca-rail .sidebar:not(:hover) .nav-section { display: none !important; }
  /* Dock dos itens FIXOS (atalhos que aparecem em todo módulo) — cartão com leve
     profundidade, separado claramente dos itens MÓVEIS (do módulo atual). */
  .app.casca-rail .nav-fixos {
    background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
    padding: 5px; margin: 0 0 10px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(8,20,16,.05);
    transition: align-items .18s ease;
  }
  .app.casca-rail .nav-divisor { display: none !important; }
  /* No rail os cabeçalhos de grupo somem, então não há o que recolher: libera o max-height
     inline (medido pelo JS com a barra fechada) que cortava o fim do módulo Sistema —
     "Outras integrações" pela metade e Auditoria/Backup/WhatsApp conexão sumidos (18/09). */
  .app.casca-rail .nav-module-items:not(.collapsed) { max-height: none !important; }

  /* Barra ABERTA (mouse em cima) — ícone + rótulo numa linha só, largura cheia.
     font-size volta assim que a largura começa a crescer (delay 0 aqui, o
     "esconder" acima é que atrasa .08s pra não piscar texto durante o fechar). */
  .app.casca-rail .sidebar:hover .nav-fixos { align-items: stretch; }
  .app.casca-rail .sidebar:hover .nav-item,
  .app.casca-rail .sidebar:hover .nav-item-meupainel {
    width: 100% !important; justify-content: flex-start !important; gap: 10px !important;
    /* min-width:0 — item de flex não encolhe abaixo do conteúdo (rótulo nowrap); ficava mais
       largo que a barra e, centralizado, cortava ícone à esquerda e texto à direita (18/09). */
    min-width: 0; max-width: 100%; box-sizing: border-box;
    padding: 0 10px !important; font-size: 12.5px !important; font-weight: 600;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, width .18s ease, padding .18s ease, font-size 0s;
  }
  .app.casca-rail .sidebar:hover .nav-item.active::before,
  .app.casca-rail .sidebar:hover .nav-item.ativo::before,
  .app.casca-rail .sidebar:hover .nav-item-meupainel.active::before,
  .app.casca-rail .sidebar:hover .nav-item-meupainel.ativo::before { left: -5px; }

  /* No rail SÓ mostramos os badges de WhatsApp/Tarefas/E-mail. Os outros
     (Rastreamento, Separação, contadores de Cadastros/Compras…) somem — eles
     vazavam pro lado e quebravam o layout. */
  .app.casca-rail .nav-item span:not(#navCntWhatsapp):not(#navCntTarefas):not(#navCntEmail) { display: none !important; }
  .app.casca-rail .nav-item span#navCntWhatsapp,
  .app.casca-rail .nav-item span#navCntTarefas,
  .app.casca-rail .nav-item span#navCntEmail {
    position: absolute !important; top: -3px !important; right: -3px !important;
    margin: 0 !important; padding: 0 2px !important; min-width: 9px !important; height: 15px !important;
    font-size: 9px !important; font-weight: 800 !important; line-height: 15px !important; text-align: center !important;
    border-radius: 8px !important; background: #dc2626 !important; color: #fff !important;
    border: 2px solid var(--panel); box-sizing: content-box; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  }
  /* Barra aberta: o badge some do canto do ícone e volta pro fim da linha,
     do lado do rótulo — como numa lista normal de menu. */
  .app.casca-rail .sidebar:hover .nav-item span#navCntWhatsapp,
  .app.casca-rail .sidebar:hover .nav-item span#navCntTarefas,
  .app.casca-rail .sidebar:hover .nav-item span#navCntEmail {
    position: static !important; margin-left: auto !important; border: none !important; box-shadow: none !important;
  }

  /* Link externo "Etiquetas Fornecedor" (↗) sai do rail — quebrava o layout.
     Continua acessível pela página de etiquetas / estoque-etiquetas.html. */
  .app.casca-rail a.nav-item[href="estoque-etiquetas.html"] { display: none !important; }

  /* rodapé sai fora — perfil está no menu do topo */
  .app.casca-rail .sidebar-footer { display: none !important; }
}

/* ---- Barra de abas mais limpa (sem o scrollbar cinza feio) ---- */
#tms-tabs-bar.tms-tabs-bar { scrollbar-width: none !important; border-bottom: 1px solid var(--line) !important; background: var(--panel) !important; }
#tms-tabs-bar::-webkit-scrollbar { height: 0 !important; display: none !important; }
.tms-tab { border-radius: 9px 9px 0 0 !important; }
.tms-tab.active { box-shadow: inset 0 -2px 0 var(--og-green) !important; }
.tms-tabs-help { display: none !important; }
/* Abas somem ao rolar pra baixo (lendo) e voltam ao rolar pra cima */
#tms-tabs-bar.tms-tabs-bar { transition: transform .24s ease, opacity .2s ease; }
.main .content { transition: margin-top .24s ease; }
/* WhatsApp inbox é um app full-height — remove a sobra branca do topo (o padding
   de 28px do .content ficava como gap entre as abas e os painéis). */
.main .content:has(> #page-whatsapp-inbox.active) { padding-top: 6px; }
/* Auto-esconder das abas DESATIVADO (Pablo 20/08: "as abas estão sumindo"). Abas SEMPRE fixas.
   Regra neutralizada aqui também pra sobreviver a JS antigo em cache que ainda adicione a classe. */
body.abas-ocultas #tms-tabs-bar.tms-tabs-bar { transform: none; opacity: 1; pointer-events: auto; }
body.abas-ocultas .main .content { margin-top: 0; }

/* ---- Dropdown compacto de módulos (ancorado no botão do topo) ---- */
#moduloDropMenu { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(8,18,15,.22); padding: 12px; width: auto; max-width: calc(100vw - 24px); }
#moduloDropMenu .mdm-wrap { display: flex; align-items: stretch; gap: 12px; }
#moduloDropMenu .mdm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 400px; flex: 0 0 auto; }
/* Coluna "Gestão AI" à direita */
/* Gestão AI em 2 colunas → cresce pro lado, não pra baixo */
.mdm-gestao { flex: 0 0 auto; border-left: 1px solid var(--line); padding-left: 12px; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); grid-auto-rows: min-content; gap: 2px 6px; align-content: start; }
.mdm-gestao-cap { grid-column: 1 / -1; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); font-weight: 800; padding: 2px 8px 8px; }
.mdm-gcell { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); text-align: left; line-height: 1.15; transition: background .12s, border-color .12s; }
.mdm-gcell:hover { background: var(--bg); border-color: color-mix(in srgb, var(--og-green) 30%, transparent); }
.mdm-gic { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--og-green) 12%, transparent); color: var(--og-green); display: grid; place-items: center; flex: 0 0 auto; }
.mdm-gic svg { width: 16px; height: 16px; }
@media (max-width: 700px) { #moduloDropMenu .mdm-wrap { flex-direction: column; } .mdm-gestao { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 10px; } #moduloDropMenu .mdm-grid { width: auto; } }
.mdm-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 4px; border: 1px solid transparent; border-radius: 11px; background: none; cursor: pointer; font: inherit; transition: background .12s, border-color .12s; }
.mdm-cell:hover { background: var(--bg); }
.mdm-cell.ativo { background: var(--bg); border-color: color-mix(in srgb, var(--og-green) 45%, transparent); }
.mdm-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.18); }
.mdm-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mdm-nm { font-size: 10.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.15; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdm-cell.ativo .mdm-nm { color: var(--og-green); }

/* ---- Menu de perfil no topo-direito (pill escuro no topo verde) ---- */
.topbar-perfil { display: flex; align-items: center; gap: 9px; padding: 5px 11px 5px 6px; border-radius: 12px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; transition: background .14s; max-width: 230px; font-family: inherit; }
.topbar-perfil:hover { background: rgba(255,255,255,0.15); }
.topbar-perfil-av { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #2fc19c, #0a3f30); color: #fff; font-weight: 800; font-size: 12px; }
.topbar-perfil-av img { width: 100%; height: 100%; object-fit: cover; }
.topbar-perfil-who { display: flex; flex-direction: column; line-height: 1.2; text-align: left; min-width: 0; }
.topbar-perfil-who strong { font-size: 13px; color: #eaf4f0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.topbar-perfil-who small { font-size: 10.5px; color: rgba(234,244,240,0.6); white-space: nowrap; }
.topbar-perfil-chev { color: rgba(234,244,240,0.7); flex: 0 0 auto; }
@media (max-width: 900px) { .topbar-perfil-who { display: none; } }
#perfilDropdown.perfil-dd { position: absolute; top: calc(100% + 8px); right: 0; width: 270px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(8,18,15,0.20); z-index: 10000; padding: 8px; overflow: hidden; }
.perfil-dd-head { display: flex; align-items: center; gap: 11px; padding: 10px 10px 13px; }
.perfil-dd-head .av { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #2fc19c, #0a3f30); color: #fff; font-weight: 800; font-size: 15px; }
.perfil-dd-head .av img { width: 100%; height: 100%; object-fit: cover; }
.perfil-dd-head strong { font-size: 14px; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.perfil-dd-head small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 180px; }
.perfil-dd-sep { height: 1px; background: var(--line); margin: 6px 8px; }
.perfil-dd-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 11px; border: none; background: none; border-radius: 10px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; transition: background .12s; }
.perfil-dd-item:hover { background: var(--bg); }
.perfil-dd-item svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.perfil-dd-item.danger { color: var(--red, #dc2626); }
.perfil-dd-item.danger svg { color: var(--red, #dc2626); }

/* ---- Telas de Gestão: saem do menu dos módulos (acesso só via "Gestão AI", gated) ---- */
.app .nav-item.gestao-oculto { display: none !important; }

/* ---- Conversas (rail): itens WhatsApp/E-mail agrupados no flyout.
   (O agrupamento "Meu Trabalho" = Kanban+Tarefas foi DESFEITO a pedido do
   Pablo 10/09 — os dois voltaram a ser itens diretos do rail.) ---- */
.app .nav-item.conv-oculto { display: none !important; }
#convFlyout, #calcFlyout {
  position: fixed; z-index: 99992; min-width: 224px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(8,18,15,.22); padding: 8px;
}
#convFlyout .conv-cap, #calcFlyout .conv-cap { font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); font-weight: 800; padding: 4px 8px 8px; }
/* item com título + subtítulo */
.conv-item .conv-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; min-width: 0; }
.conv-item .conv-sub { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.conv-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); text-align: left; transition: background .12s, border-color .12s; }
.conv-item:hover:not(:disabled) { background: var(--bg); border-color: color-mix(in srgb, var(--og-green) 28%, transparent); }
.conv-item:disabled { cursor: default; opacity: .6; }
.conv-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; flex: 0 0 auto; }
.conv-ic svg { width: 18px; height: 18px; }
.conv-nome { flex: 1; }
.conv-cnt { font-size: 10px; font-weight: 800; background: #dc2626; color: #fff; border-radius: 10px; padding: 1px 8px; }
.conv-soon { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }

/* Tela de Usuários & Permissões — two-pane (form esquerda + lista direita) empilha em telas estreitas */
@media (max-width: 1024px) { .usu-2col { grid-template-columns: 1fr !important; } }

/* ============================================================================
   Rail premium v2 (16/09 — Pablo: "muito simples, sem graça; quero algo mais
   moderno, mais premium, bonito"). MESMA arquitetura aprovada em 10/09 (rail
   claro, abre no hover por reflow 68→210px, nunca overlay). O que muda é só o
   acabamento, em cima das regras acima (por isso vem DEPOIS e repete !important
   onde as regras antigas usam):
   - fundo com um brilho suave da marca saindo da faixa verde do topo
   - ícones em "tiles" (quadradinho arredondado com tinta) na barra aberta
   - ativo: fechado = squircle verde sólido com brilho; aberto = pill clara +
     tile verde sólido + acento lateral em gradiente (verde → teal)
   - card de acesso rápido com profundidade real e rótulo "Acesso rápido"
   - badges em pílula, hover com leve deslize
   Verde do rail é o da marca (#0E7C66 → #2fc19c), não o --og-green genérico. */
.app.casca-rail { --rail-green: #0E7C66; --rail-teal: #2fc19c; }
@media (min-width: 1367px) {
  .app.casca-rail .sidebar {
    background:
      radial-gradient(520px 260px at 0% 0%, color-mix(in srgb, var(--rail-green) 13%, transparent), transparent 64%),
      linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--bg) 60%, var(--panel))) !important;
  }
  .app.casca-rail .nav {
    padding: 12px 8px 14px; gap: 2px;
    border-right: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  }

  /* --- Card de acesso rápido (itens fixos de todo módulo) --- */
  /* Faixa de ponta a ponta (margem negativa anula o padding do .nav) com o MESMO
     recuo interno dos itens do módulo — assim as linhas do acesso rápido ficam do
     mesmo tamanho das de baixo (Pablo 16/09), sem perder o bloco destacado. */
  .app.casca-rail .nav-fixos {
    /* .nav é flex-column com align-items:center → sem isto o card fica com largura
       "do conteúdo" (mais estreito que os itens do módulo) e a margem negativa
       não faz nada. Esticado, vai de borda a borda em qualquer estado. */
    align-self: stretch;
    background: var(--panel);
    border: 1px solid var(--line); border-left: none; border-right: none;
    border-radius: 0;
    padding: 6px 8px; margin: 0 -8px 12px; gap: 2px;
    box-shadow: 0 1px 2px rgba(8,20,16,.04), 0 16px 30px -22px rgba(8,20,16,.42), inset 0 1px 0 rgba(255,255,255,.7);
    position: relative;
  }
  .app.casca-rail .sidebar:hover .nav-fixos { padding: 10px 8px 6px; }
  .app.casca-rail .sidebar:hover .nav-fixos::before {
    content: 'Acesso rápido';
    display: block; padding: 0 8px 7px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
  }
  /* Separador suave entre o card e os itens do módulo (barra aberta) */
  .app.casca-rail .sidebar:hover .nav-fixos::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: -8px; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rail-green) 28%, var(--line)), transparent);
  }

  /* --- Linhas da barra aberta: ícone vira tile, texto mais firme --- */
  .app.casca-rail .sidebar:hover .nav-item,
  .app.casca-rail .sidebar:hover .nav-item-meupainel {
    height: 40px !important; border-radius: 12px !important;
    padding: 0 8px !important; gap: 11px !important;
    font-size: 13px !important; font-weight: 600; letter-spacing: -.1px;
    color: var(--ink) !important;
  }
  .app.casca-rail .sidebar:hover .nav-item svg,
  .app.casca-rail .sidebar:hover .nav-item-meupainel svg {
    width: 30px !important; height: 30px !important; padding: 6px; box-sizing: border-box;
    border-radius: 9px;
    background: color-mix(in srgb, var(--rail-green) 8%, var(--panel));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rail-green) 14%, transparent);
    color: color-mix(in srgb, var(--rail-green) 85%, var(--ink)) !important;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
  }
  .app.casca-rail .sidebar:hover .nav-item:hover,
  .app.casca-rail .sidebar:hover .nav-item-meupainel:hover {
    background: color-mix(in srgb, var(--rail-green) 7%, var(--panel)) !important;
    color: var(--rail-green) !important;
    box-shadow: none !important;
    transform: translateX(2px);
  }
  .app.casca-rail .sidebar:hover .nav-item:hover svg,
  .app.casca-rail .sidebar:hover .nav-item-meupainel:hover svg {
    background: color-mix(in srgb, var(--rail-green) 16%, var(--panel));
    color: var(--rail-green) !important;
    transform: none;
  }

  /* --- Ativo (barra fechada): squircle verde sólido com brilho, ícone branco --- */
  .app.casca-rail .nav-item.active, .app.casca-rail .nav-item.ativo,
  .app.casca-rail .nav-item-meupainel.active, .app.casca-rail .nav-item-meupainel.ativo {
    background: linear-gradient(160deg, var(--rail-green), var(--rail-teal)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--rail-green) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  .app.casca-rail .nav-item.active svg, .app.casca-rail .nav-item.ativo svg,
  .app.casca-rail .nav-item-meupainel.active svg, .app.casca-rail .nav-item-meupainel.ativo svg { color: #fff !important; }
  .app.casca-rail .nav-item.active::before, .app.casca-rail .nav-item.ativo::before,
  .app.casca-rail .nav-item-meupainel.active::before, .app.casca-rail .nav-item-meupainel.ativo::before {
    height: 18px; width: 3px;
    background: linear-gradient(180deg, var(--rail-green), var(--rail-teal));
    box-shadow: 0 0 8px color-mix(in srgb, var(--rail-teal) 60%, transparent);
  }

  /* --- Ativo (barra aberta): pill clara + tile verde sólido --- */
  .app.casca-rail .sidebar:hover .nav-item.active, .app.casca-rail .sidebar:hover .nav-item.ativo,
  .app.casca-rail .sidebar:hover .nav-item-meupainel.active, .app.casca-rail .sidebar:hover .nav-item-meupainel.ativo {
    background: linear-gradient(90deg, color-mix(in srgb, var(--rail-green) 14%, var(--panel)), color-mix(in srgb, var(--rail-green) 4%, var(--panel))) !important;
    color: var(--rail-green) !important; font-weight: 700;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rail-green) 18%, transparent) !important;
    transform: none;
  }
  .app.casca-rail .sidebar:hover .nav-item.active svg, .app.casca-rail .sidebar:hover .nav-item.ativo svg,
  .app.casca-rail .sidebar:hover .nav-item-meupainel.active svg, .app.casca-rail .sidebar:hover .nav-item-meupainel.ativo svg {
    background: linear-gradient(160deg, var(--rail-green), var(--rail-teal));
    color: #fff !important;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--rail-green) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  }

  /* --- Badges (WhatsApp / Tarefas / E-mail) em pílula, barra aberta --- */
  .app.casca-rail .sidebar:hover .nav-item span#navCntWhatsapp,
  .app.casca-rail .sidebar:hover .nav-item span#navCntTarefas,
  .app.casca-rail .sidebar:hover .nav-item span#navCntEmail {
    min-width: 18px !important; height: 18px !important; line-height: 18px !important;
    padding: 0 6px !important; border-radius: 999px !important; font-size: 10px !important;
    background: linear-gradient(160deg, #ef4444, #dc2626) !important;
    box-shadow: 0 2px 6px -2px rgba(220,38,38,.6) !important;
  }

  /* Faixa da marca: emenda com um brilho fino na base pra não "cortar" seco no claro */
  .app.casca-rail .logo { box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 22px -18px rgba(8,20,16,.6); }
}