/* v27g — Override Microsoft Teams style sobre o v27 layout original.
   Adiciona: product-bar (activity bar de produtos), product-header na sidebar, top searchbar. */

/* === Layout 3 colunas (activity bar + sidebar + main) === */
.app-container.teams-layout {
  display: grid;
  grid-template-columns: 68px 248px 1fr;
  height: 100vh;
}

/* === Product bar (Teams layout · cor da família Alpargatas/Blanes pra uniformidade) === */
.product-bar {
  background: #0a2540;          /* deep navy harmonioso com #0052a3 do gradient da sidebar */
  display: flex; flex-direction: column;
  padding: 6px 0;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;                                  /* Firefox: barra fina */
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.product-bar::-webkit-scrollbar { width: 6px; }
.product-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
/* Arrastar-para-rolar (pan) no DESKTOP quando os ícones não cabem — equivalente ao scroll de toque do mobile.
   .pb-scrollable (há overflow) mostra o "agarrar"; .pb-grabbing (arrastando) fecha a mão e trava a seleção. */
.product-bar.pb-scrollable { cursor: grab; }
.product-bar.pb-scrollable .product-item { cursor: pointer; }
.product-bar.pb-grabbing, .product-bar.pb-grabbing .product-item { cursor: grabbing; }
.product-bar.pb-grabbing { user-select: none; }
/* Botão "Produtos" (4 quadradinhos) do rodapé do menu = toggle da barra de aplicativos. No desktop ele fica
   SEMPRE visível (antes só aparecia quando a barra estava recolhida), pra poder recolher E mostrar. */
@media (min-width: 769px) {
  .app-container.teams-layout .nav-apps-btn { display: inline-flex; }
  /* recolhida → o ícone vira p/ "mostrar" (espelha) */
  .app-container.teams-layout.external-collapsed .nav-apps-btn svg { transform: scaleX(-1); }
}
.product-bar .product-logo {
  width: 68px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 4px;
}
.product-bar .product-logo-text {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #4BB2F2, #0597F2);
  color: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.product-item {
  width: 68px; height: 64px;
  flex-shrink: 0;                 /* NÃO encolher: senão a barra "espreme" os ícones p/ caber em 100vh e nunca
                                     transborda (sem scroll/sem arrasto). Com shrink:0 ela transborda → rola. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: rgba(255,255,255,0.72);
  background: none; border: none; cursor: pointer;
  position: relative;
  transition: color .15s, background .15s;
}
.product-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.product-item.active { color: #fff; background: rgba(43,99,148,.32); }
.product-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: #4BB2F2;          /* Alpargatas light blue · indicador ativo */
  border-radius: 0 3px 3px 0;
}
.product-item .product-icon svg { width: 22px; height: 22px; }
.product-item .product-label {
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.product-item .product-tooltip {
  position: absolute;
  left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 10px;
  background: #1a1a1a; color: #fff;
  padding: 6px 10px; border-radius: 4px;
  font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  z-index: 200;
  transition: opacity .12s;
}
.product-item:hover .product-tooltip { opacity: 1; }
.product-spacer { flex: 1; }

/* === Sidebar (cabeçalho do produto, novo) === */
.product-header {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(0,0,0,.10), transparent);
}
.product-header-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.product-header-text { min-width: 0; }
.product-header-name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.1; }
.product-header-sub  { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 3px; }

/* === Header com search box (estilo Teams) === */
.header.teams-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding: 0 16px;
}
.teams-searchbar {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 520px; width: 40%;
  z-index: 1;
}
.profile-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.teams-search-btn {
  width: 100%;
  height: 36px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 6px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  color: #616161;
  cursor: pointer;
  transition: background .15s;
}
.teams-search-btn:hover { background: rgba(0,0,0,.08); }
.teams-search-btn svg { color: #616161; flex-shrink: 0; }
.teams-search-placeholder { font-size: 13px; font-weight: 500; }
.profile-info { margin-left: auto; }

/* Em mobile · esconde searchbar, mostra hamburger */
@media (max-width: 768px) {
  .app-container.teams-layout {
    display: block;
    height: auto;
    min-height: 100vh;
  }
  .product-bar {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    flex-direction: row; gap: 0;
    width: 100%; height: 56px;
    border-top: 1px solid rgba(255,255,255,.1);
    z-index: 50; padding: 0;
    overflow-x: auto; overflow-y: hidden;
  }
  .product-bar .product-logo { display: none; }
  .product-item { width: 56px; height: 56px; }
  .product-item.active::before {
    top: auto; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 30px; height: 3px;
    border-radius: 3px 3px 0 0;
  }
  .product-item .product-label { display: none; }
  .product-item .product-tooltip { display: none; }
  .product-spacer { display: none; }

  .navigation {
    padding-bottom: 70px;   /* espaço pra product-bar no rodapé */
  }
  .content-area { padding-bottom: 70px; }
  .teams-searchbar { display: none; }
}

/* === Page placeholder dos outros produtos === */
.prod-stub {
  padding: 80px 40px;
  text-align: center;
  color: #6B7280;
}
.prod-stub h1 {
  font-size: 28px; font-weight: 700; letter-spacing: -.5px;
  margin-bottom: 8px; color: #111827;
}
.prod-stub .prod-stub-color {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}
.prod-stub p {
  font-size: 15px; max-width: 540px; margin: 0 auto 22px; line-height: 1.6;
}
.prod-stub .prod-stub-features {
  display: inline-flex; flex-direction: column; gap: 6px;
  text-align: left;
  background: white; border: 1px solid #E5E7EB;
  border-radius: 8px; padding: 16px 20px;
  font-size: 13px;
  margin-top: 12px;
}
.prod-stub .prod-stub-features strong { display: block; margin-bottom: 6px; }
.prod-stub .prod-stub-back {
  display: inline-block; margin-top: 18px;
  background: #003B6F; color: white;
  padding: 10px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
}
.prod-stub .prod-stub-back:hover { background: #002A50; }

/* Stub message na sidebar */
.nav-stub-msg { padding: 0; }

/* =========================================================================
   v27g · IDENTIDADE VISUAL UNIFORME (paleta Alpargatas + componentes shared)
   ========================================================================= */

/* Page layout shared · usado por todas agregadoras (Pendências, Solicitações, Histórico, Relatórios, Nova Solicitação, Catálogo) */
.page-wrap {
  padding: 24px 32px;
  max-width: 1280px;
}
.page-head { margin-bottom: 20px; }
.page-title {
  font-size: 24px; font-weight: 700; letter-spacing: -.5px;
  color: #323130;
  margin-bottom: 4px;
}
.page-sub {
  font-size: 13px;
  color: #605e5c;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  color: #605e5c;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 24px 0 12px;
}

/* Filtros · chips Alpargatas */
.filter-chips, .filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-label {
  font-size: 11px;
  font-weight: 700;
  color: #605e5c;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.chip {
  padding: 6px 14px;
  border-radius: 14px;
  border: 1px solid #d1d1d1;
  background: white;
  color: #605e5c;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: #0597F2; color: #0597F2; }
.chip.active {
  background: #0597F2;
  color: white;
  border-color: #0597F2;
}
.chips-hint {
  margin-left: auto;
  font-size: 11px;
  color: #9aa1a8;
  align-self: center;
}

/* Tabs · Relatórios */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #d1d1d1;
  margin-bottom: 18px;
}
.tab {
  padding: 10px 18px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #605e5c;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}
.tab:hover { color: #0597F2; }
.tab.active {
  color: #0597F2;
  border-bottom-color: #0597F2;
}

/* Cards reutilizáveis (Catálogo, Nova Solicitação) */
.cat-grid, .ns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.cat-card, .ns-card {
  text-align: left;
  background: var(--card-background, #fff);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-card:hover, .ns-card:hover {
  border-color: #0597F2;
  box-shadow: 0 2px 8px rgba(43,99,148,.15);
}
.cat-ctx, .ns-ctx {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 2px;
}
.cat-ctx-pessoal { color: #0597F2; }
.cat-ctx-equipe  { color: #107c10; }
.cat-ctx-gestor  { color: #7c2fa0; }
.cat-ctx-bp,
.cat-ctx-rh      { color: #d83b01; }
.cat-ctx-admin   { color: #605e5c; }
.cat-ctx-todos   { color: #6b7280; }
.ns-ctx          { color: #0597F2; }

.cat-title, .ns-title {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
}
.cat-desc, .ns-desc {
  font-size: 12px;
  color: #605e5c;
  line-height: 1.5;
}
.cat-cta, .ns-cta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
  font-size: 11px;
  font-weight: 600;
  color: #0597F2;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #605e5c;
  font-size: 14px;
}

/* === Product stub · também com paleta Alpargatas === */
.prod-stub h1 { color: #323130; }
.prod-stub .prod-stub-back {
  background: #0597F2;
}
.prod-stub .prod-stub-back:hover { background: #0476c0; }
.prod-stub .prod-stub-features {
  background: var(--card-background, white);
  border-color: #e5e7eb;
  color: #323130;
}

/* =========================================================================
   v27g · Harmonização do azul da sidebar com o navy do product-bar
   ========================================================================= */

/* Sidebar (.navigation) · fundo QUASE BRANCO com texto escuro · só o item SELECIONADO
   ganha o tom navy. Estilo Teams 2.x · clean, hierarquia clara, baixo cansaço visual. */

/* === Backgrounds (light) === */
.app-container.teams-layout .navigation,
.app-container.teams-layout .nav-header,
.app-container.teams-layout .nav-dashboard-pin {
  background: #f3f5f7;
  border-color: #e5e7eb;
}
.app-container.teams-layout .nav-header {
  border-bottom: 1px solid #e5e7eb;
}
.app-container.teams-layout .product-header {
  background: #f3f5f7;
  border-bottom: 1px solid #e5e7eb;
}
.app-container.teams-layout .product-header-name { color: #323130; }
.app-container.teams-layout .product-header-sub  { color: #605e5c; }

/* === Texto dark === */
.app-container.teams-layout .navigation .nav-link {
  color: #323130;
}
.app-container.teams-layout .navigation .nav-link:hover {
  background: rgba(0,0,0,.04);
}
.app-container.teams-layout .navigation .nav-link .nav-icon svg {
  color: #605e5c;
}
.app-container.teams-layout .navigation .nav-link:hover .nav-icon svg {
  color: #323130;
}

/* === Group titles + dividers (light theme) === */
.app-container.teams-layout .nav-group-title {
  color: #6b7280;
  font-weight: 700;
}
.app-container.teams-layout .nav-divider {
  background: rgba(0,0,0,.08);
}

/* === Profile badge no topo da sidebar === */
.app-container.teams-layout .nav-profile-badge {
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid #e5e7eb;
}
.app-container.teams-layout .nav-profile-label {
  color: #323130;
}

/* === Logout footer === */
.app-container.teams-layout .nav-logout-footer {
  border-top: 1px solid #e5e7eb;
  background: #f3f5f7;
}
.app-container.teams-layout .nav-logout-btn {
  color: #605e5c;
}
.app-container.teams-layout .nav-logout-btn:hover {
  background: rgba(0,0,0,.04);
  color: #d83b01;
}

/* === Dev switcher (no topo do menu · troca de perfil/persona) ===
   Estilo controle de formulário neutro · navy só aparece como HOVER/FOCUS
   (cor de "escolha em curso") · nunca como fill default. */
.app-container.teams-layout .nav-header {
  height: 48px !important;
  padding: 6px 10px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.app-container.teams-layout .nav-header .dev-switcher {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.app-container.teams-layout .nav-header .dev-switcher select {
  width: 100%;
  height: 32px;
  background: transparent !important;                /* base · discreto */
  color: #605e5c !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 0 26px 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* chevron pequeno e discreto */
  background-image: 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='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.app-container.teams-layout .nav-header .dev-switcher select:hover {
  background-color: rgba(43,99,148,.06) !important;  /* tint navy só no hover */
  border-color: rgba(43,99,148,.2) !important;
  color: #323130 !important;
}
.app-container.teams-layout .nav-header .dev-switcher select:focus-visible {
  outline: 2px solid #2B6394;
  outline-offset: 1px;
  border-color: transparent !important;
}
.app-container.teams-layout .nav-header .dev-switcher select option {
  background: white;
  color: #323130;
  font-weight: 500;
  padding: 8px;
}
.app-container.teams-layout .nav-header .dev-switcher select option:checked,
.app-container.teams-layout .nav-header .dev-switcher select option:hover {
  background: #2B6394;                                /* opção em percurso/checked · navy */
  color: white;
}

/* === ITEM ATIVO · destaque navy === */
.app-container.teams-layout .navigation .nav-link.active {
  background: #2B6394;
  color: white;
}
.app-container.teams-layout .navigation .nav-link.active:hover {
  background: #1f5085;
}
.app-container.teams-layout .navigation .nav-link.active .nav-icon svg {
  color: white;
}
.app-container.teams-layout .navigation .nav-link.active::before {
  background: #6CA5D5;
}
.app-container.teams-layout .nav-dashboard-pin .nav-link.active {
  background: #2B6394;
  color: white;
}

/* =========================================================================
   v27g · Harmonização final · background único para sidebar + header + content
   ========================================================================= */

/* Background uniforme · sidebar e área de conteúdo no mesmo cinza-claro neutro */
.app-container.teams-layout .navigation,
.app-container.teams-layout .nav-header,
.app-container.teams-layout .nav-dashboard-pin,
.app-container.teams-layout .nav-logout-footer,
.app-container.teams-layout .product-header,
.app-container.teams-layout .main-content,
.app-container.teams-layout .content-area,
.app-container.teams-layout .header.teams-header {
  background: #f5f7fa;
}

/* Header recebe linha de separação sutil em vez de cor diferente */
.app-container.teams-layout .header.teams-header {
  border-bottom: 1px solid #e5e7eb;
}

/* Conteúdo das páginas-views também herda o background uniforme */
.app-container.teams-layout .page-view {
  background: #f5f7fa;
}

/* Cards continuam BRANCOS para criar a única camada de elevação · cria a hierarquia
   visual sem precisar de cores diferentes no background */
.app-container.teams-layout .adherence-card,
.app-container.teams-layout .stats-card,
.app-container.teams-layout .admin-card,
.app-container.teams-layout .pie-card,
.app-container.teams-layout .day-card,
.app-container.teams-layout .week-card,
.app-container.teams-layout .chart-card,
.app-container.teams-layout .kpi-card,
.app-container.teams-layout .cat-card,
.app-container.teams-layout .ns-card,
.app-container.teams-layout .prod-stub-features {
  background: #ffffff;
}

/* === Acentos harmonizados · paleta navy unificada em vez de #0597F2 misturado === */

/* Chips ativos · navy em vez de cyan vivo */
.chip.active {
  background: #2B6394;
  border-color: #2B6394;
}
.chip:hover {
  border-color: #2B6394;
  color: #2B6394;
}

/* Tabs ativas · navy */
.tab:hover { color: #2B6394; }
.tab.active {
  color: #2B6394;
  border-bottom-color: #2B6394;
}

/* Cards hover · navy */
.cat-card:hover,
.ns-card:hover {
  border-color: #2B6394;
  box-shadow: 0 2px 8px rgba(43,99,148,.15);
}
.cat-cta,
.ns-cta {
  color: #2B6394;
}

/* Catálogo · context dots harmonizados (mesma família navy/blue) */
.cat-ctx-pessoal { color: #2B6394; }
.cat-ctx-equipe  { color: #107c10; }
.cat-ctx-gestor  { color: #6264A7; }
.cat-ctx-bp,
.cat-ctx-rh      { color: #D83B01; }
.cat-ctx-admin   { color: #605e5c; }
.cat-ctx-todos   { color: #6b7280; }
.ns-ctx          { color: #2B6394; }

/* Ícone busca no topbar · cor matching */
.teams-search-btn:hover { border-color: #2B6394; }

/* Botão "voltar ao Checkpoint" do prod-stub · usa navy */
.prod-stub .prod-stub-back {
  background: #2B6394;
}
.prod-stub .prod-stub-back:hover { background: #1f5085; }

/* =========================================================================
   v27g · POLIMENTO VISUAL (Teams 2.x · Fluent UI · refinamento)
   ========================================================================= */

/* === Tipografia · system stack moderno + anti-aliasing === */
body, .app-container.teams-layout {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === Sidebar · itens em formato "pill" (Teams 2.x style) === */
.app-container.teams-layout .navigation {
  padding: 8px 8px;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.04);
}
.app-container.teams-layout .navigation .nav-item {
  margin: 1px 0;
}
.app-container.teams-layout .navigation .nav-link {
  border-radius: 8px;
  padding: 9px 12px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  position: relative;
}
.app-container.teams-layout .navigation .nav-link:hover {
  background: rgba(43,99,148,.08);
  color: #1f5085;
}
.app-container.teams-layout .navigation .nav-link:hover .nav-icon svg {
  color: #2B6394;
}
.app-container.teams-layout .navigation .nav-link.active {
  background: #2B6394;
  color: #fff;
  box-shadow: 0 1px 2px rgba(43,99,148,.25);
}
.app-container.teams-layout .navigation .nav-link.active:hover {
  background: #245580;
  transform: none;
}
/* Esconde a faixinha lateral · o pill já dá destaque suficiente */
.app-container.teams-layout .navigation .nav-link.active::before { display: none; }

/* Profile badge no topo · cleaner */
.app-container.teams-layout .nav-profile-badge {
  background: rgba(43,99,148,.06);
  border-bottom: 1px solid rgba(0,0,0,.05);
  margin: -8px -8px 8px;
  padding: 12px 16px;
  border-radius: 0;
}
.app-container.teams-layout .nav-profile-dot {
  box-shadow: 0 0 0 3px rgba(43,99,148,.12);
}

/* Group title mais sutil e elegante */
.app-container.teams-layout .nav-group-title {
  color: #8a8a8a;
  font-weight: 600;
  font-size: 10px;
  padding: 10px 16px 4px;
}
.app-container.teams-layout .nav-divider {
  background: transparent;
  margin: 8px 12px;
  height: 1px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Product header no topo da sidebar */
.app-container.teams-layout .product-header {
  padding: 16px;
  background: linear-gradient(180deg, rgba(43,99,148,.06), transparent);
  margin: -8px -8px 4px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.app-container.teams-layout .product-header-dot {
  width: 12px; height: 12px;
  box-shadow: 0 0 0 3px rgba(43,99,148,.12);
}
.app-container.teams-layout .product-header-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.1px;
}

/* === Product bar · refinamento (cor padrão navy harmonizada) === */
.product-bar {
  box-shadow: 1px 0 0 rgba(0,0,0,.04);
}
.product-item {
  border-radius: 8px;
  margin: 0 6px;
  width: 56px;
}
.product-item:hover { background: rgba(255,255,255,.08); }
.product-item.active {
  background: rgba(43,99,148,.32);   /* navy translúcido · padrão */
  color: #fff;
}
.product-item.active .product-icon svg { color: #4BB2F2; }
.product-item.active::before {
  top: 14px; bottom: 14px;
  left: -6px;
}
.product-item .product-label {
  font-size: 9px;
  opacity: .85;
  letter-spacing: .1px;
}

/* === Top search · estilo Teams 2.x · pill com soft shadow === */
.teams-searchbar { max-width: 520px; }
.teams-search-btn {
  height: 32px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.teams-search-btn:hover {
  border-color: #2B6394;
  background: #fff;
  box-shadow: 0 1px 3px rgba(43,99,148,.15);
}
.teams-search-placeholder { font-weight: 400; color: #8a8a8a; }

.header.teams-header {
  border-bottom: 1px solid rgba(0,0,0,.06);
  height: 48px;
  min-height: 48px;
}

/* === Cards · soft shadows em vez de bordas duras === */
.app-container.teams-layout .adherence-card,
.app-container.teams-layout .stats-card,
.app-container.teams-layout .admin-card,
.app-container.teams-layout .pie-card,
.app-container.teams-layout .day-card,
.app-container.teams-layout .week-card,
.app-container.teams-layout .chart-card,
.app-container.teams-layout .kpi-card,
.app-container.teams-layout .cat-card,
.app-container.teams-layout .ns-card,
.app-container.teams-layout .prod-stub-features {
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.03);
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cat-card:hover,
.ns-card:hover {
  border-color: rgba(43,99,148,.3);
  box-shadow: 0 4px 12px rgba(43,99,148,.12), 0 2px 4px rgba(43,99,148,.06);
  transform: translateY(-1px);
}

/* === Chips refinados === */
.chip {
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  border-color: rgba(0,0,0,.08);
  background: #fff;
  transition: all .15s ease;
  font-weight: 500;
}
.chip:hover {
  background: rgba(43,99,148,.06);
  color: #2B6394;
  border-color: rgba(43,99,148,.3);
}
.chip.active {
  background: #2B6394;
  color: #fff;
  border-color: #2B6394;
  box-shadow: 0 1px 3px rgba(43,99,148,.25);
}

/* === Tabs com indicador animado === */
.tabs { gap: 4px; padding: 0 4px; }
.tab {
  padding: 12px 18px;
  border-radius: 6px 6px 0 0;
  transition: background .15s ease, color .15s ease;
}
.tab:hover {
  background: rgba(43,99,148,.06);
}
.tab.active {
  background: rgba(43,99,148,.06);
  font-weight: 600;
}

/* === Page header · espaçamento e hierarquia mais sutis === */
.page-wrap { padding: 28px 36px; }
.page-head { margin-bottom: 24px; }
.page-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.4px;
  color: #1a1a1a;
}
.page-sub {
  font-size: 13px;
  color: #6b6b6b;
  margin-top: 4px;
}
.section-title { font-weight: 600; margin: 28px 0 14px; }

/* === Catálogo · cards mais convidativos === */
.cat-grid, .ns-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.cat-card, .ns-card { padding: 18px 20px; }
.cat-title, .ns-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.05px;
  margin-bottom: 4px;
}
.cat-desc, .ns-desc {
  font-size: 12.5px;
  color: #6b6b6b;
}
.cat-cta, .ns-cta {
  margin-top: 14px;
  padding-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #2B6394;
  letter-spacing: .2px;
}

/* === Logout footer · subtle === */
.app-container.teams-layout .nav-logout-footer {
  padding: 10px 8px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.01);
}
.app-container.teams-layout .nav-logout-btn {
  border-radius: 8px;
  padding: 9px 12px;
  transition: background .15s ease, color .15s ease;
}

/* === Mobile polish === */
@media (max-width: 768px) {
  .product-item { width: 52px; margin: 0; }
  .page-wrap { padding: 18px 16px; }
}

/* === Animação suave em todos elementos clicáveis === */
.nav-link, .chip, .tab, .cat-card, .ns-card, .product-item, .teams-search-btn,
.btn-aprovar, .btn-secondary, .btn-solicitar {
  transition: all .15s ease;
}

/* === Borda direita do menu interno · separa visualmente do conteúdo === */
.app-container.teams-layout .navigation {
  border-right: 1px solid rgba(0,0,0,.10);
  box-shadow: none;
}

/* === Persona switcher discreto (chevron ao lado do avatar) === */
.persona-switch {
  background: transparent;
  border: none;
  color: #605e5c;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  transition: color .15s ease, background .15s ease;
}
.persona-switch:hover { color: #2B6394; background: rgba(43,99,148,.06); }
.persona-switch:focus-visible { outline: 2px solid #2B6394; outline-offset: 1px; }

.persona-popover {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 8px;
  background: white;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  min-width: 220px;
  padding: 6px;
  display: none;
  z-index: 150;
}
.persona-popover.open { display: block; }

.persona-opt {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background .12s ease;
}
.persona-opt:hover { background: rgba(43,99,148,.08); }
.persona-opt.active { background: rgba(43,99,148,.12); }
.persona-opt:focus-visible { outline: 2px solid #2B6394; outline-offset: -2px; }

.persona-opt-ini {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #4BB2F2, #2B6394);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.persona-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.persona-opt-name { font-size: 13px; font-weight: 600; color: #323130; }
.persona-opt-role { font-size: 11px; color: #605e5c; }
.persona-opt-check { color: #2B6394; font-weight: 700; }

/* Esconde o dev-switcher do nav-header (persona switcher migrou pro topo direito) */
.app-container.teams-layout .nav-header { display: none !important; }

/* Entrada /apps: casca invisível até (e se) um app abrir NESTA janela — evita o "flash" do app
   default (Checkpoint) atrás da grade durante o boot. Classe posta/removida em main.js/product-bar. */
html.launcher-entry .app-container.teams-layout { visibility: hidden; }

/* Com viewport-fit=cover (index.html), a página se estende sob notch e faixa de home no iPhone —
   o chrome da casca ganha os recuos de safe-area (env=0 fora do iOS: sem efeito nos demais). */
.app-container.teams-layout .header.teams-header { padding-top: env(safe-area-inset-top, 0px); }
@media (max-width: 768px) {
  .app-container.teams-layout .product-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* === App Launcher — a HOME do domínio ('/'): grade dos apps disponíveis ao usuário =============== */
/* align-items: flex-start + margin:auto na caixa (NÃO center): com center + overflow, conteúdo maior
   que a tela fica com o começo/fim INALCANÇÁVEIS ao rolar (tiles "escondidos atrás da barra" no
   iPhone). margin:auto centraliza quando cabe e rola inteiro quando não cabe. */
/* QUEM ROLA É A CAIXA INTERNA, não o overlay — padding num scroll-container só vale no FIM do
   scroll: durante a rolagem o conteúdo passava pela borda física (curva do iPhone / barra do
   browser). Com o scroll confinado na .launch-box (max-height 100% do MIOLO do overlay, que já
   desconta os recuos), o conteúdo NUNCA entra na zona proibida — modelo do rodapé do Welcome. */
.app-launcher { position: fixed; inset: 0; z-index: 4000; background: #f0f2f5; overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
  /* ALTURA DINÂMICA (100dvh): com inset:0 puro, o Safari/Chrome iOS dimensionam pelo viewport GRANDE
     (barra recolhida) e a base ficava ATRÁS da barra de navegação do browser. Com height definido, o
     bottom do inset é ignorado (over-constrained) e a caixa termina acima da barra. Fallback: 100vh. */
  height: 100vh; height: 100dvh;
  /* iPhone (e afins): não desenhar sob o notch nem sob a faixa curva do indicador de home. */
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.app-launcher .launch-box { margin: auto; max-height: 100%; overflow-y: auto; }
/* Desktop = PAISAGEM: caixa larga (até ~6 colunas de tiles) — a grade espalha na horizontal e só
   então quebra linha, sempre centrada. No mobile a largura não importa (lista empilhada, 1 coluna). */
.launch-box { text-align: center; padding: 40px 24px; max-width: min(1100px, 92vw); width: 100%; }
.launch-logo { width: 64px; height: 64px; margin-bottom: 12px; }
.launch-box h1 { margin: 0 0 4px; font-size: 22px; color: #1a365d; }
.launch-sub { margin: 0 0 24px; color: #64748b; font-size: 14px; }
/* Desktop: CARTÕES DE TAMANHO FIXO e iguais, grade CENTRADA na página (colunas de largura fixa +
   justify-content:center — com auto-fill 1fr os cartões esticavam e variavam de altura). */
.launch-grid { display: grid; grid-template-columns: repeat(auto-fit, 170px); justify-content: center; gap: 14px; }
.launch-tile { position: relative; }
.launch-open { width: 100%; height: 100%; min-height: 148px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 18px 12px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: box-shadow .15s ease, transform .15s ease; }
.launch-open:hover { box-shadow: 0 4px 14px rgba(2, 6, 23, .10); transform: translateY(-1px); }
.launch-icon, .launch-icon svg { width: 34px; height: 34px; }
.launch-icon { color: var(--p-color, #334155); display: inline-flex; flex-shrink: 0; }
.launch-text { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.launch-name { font-weight: 600; color: #0f172a; font-size: 14px; }
.launch-desc { color: #64748b; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Mobile: LISTA EMPILHADA estilo Power Apps — uma linha por app, ícone à esquerda, textos à direita. */
@media (max-width: 768px) {
  /* Fôlego extra embaixo no celular: a lista rola e o último item não pode "sentar" na borda curva. */
  .launch-box { padding: 24px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .launch-grid { grid-template-columns: 1fr; gap: 10px; }
  .launch-open { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 0; padding: 14px; gap: 12px; }
  .launch-icon, .launch-icon svg { width: 28px; height: 28px; }
  .launch-text { align-items: flex-start; }
}
.launch-box { position: relative; }
.launch-close { position: absolute; top: 4px; right: 8px; border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: #94a3b8; padding: 4px 8px; }
.launch-close:hover { color: #334155; }
/* Ícones de apps do CATÁLOGO do portal (imagem ou glifo emoji/letra) — no launcher e na barra. */
.launch-img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.launch-glyph { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; }
.product-ext-img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.product-ext-glyph { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
@media (max-width: 768px) { .launch-img, .launch-glyph { width: 28px; height: 28px; font-size: 22px; } }
/* Estrela = INDICADOR (somente leitura) do app inicial definido pela administração (tag appdefault). */
.launch-star { position: absolute; top: 6px; right: 8px; font-size: 16px; line-height: 1; color: #f59e0b; cursor: default; }
@media (max-width: 768px) { .launch-star { top: 50%; transform: translateY(-50%); } }