@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =====================================================================
   SOMA — Componente canônico de banner (hero) · .soma-hero-std
   UM padrão: eyebrow, título, palavra-acento, subtítulo, pílula e botão
   IDÊNTICOS em todas as páginas. Altura/largura podem variar; fonte, peso,
   destaque e disposição não.
   Escopo restrito a .soma-hero-std. !important p/ vencer regras per-page
   e os congelados (page-platform.css).
   ===================================================================== */

/* ---------- Eyebrow: Inter 600, caixa-alta, turquesa, com ponto ---------- */
.soma-hero-std .eyebrow{
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:#7FE7EB !important;
  -webkit-text-fill-color:#7FE7EB !important;
  margin:0 0 12px !important;
}

/* ---------- Título: Inter 700, branco-gelo ---------- */
.soma-hero-std h1{
  font-family:'Inter',system-ui,sans-serif !important;
  font-weight:700 !important;
  font-size:clamp(26px,3.4vw,46px) !important;
  line-height:1.05 !important;
  letter-spacing:-.5px !important;
  margin:0 !important;
  color:#F4F7FB !important;
  -webkit-text-fill-color:#F4F7FB !important;
  text-shadow:0 2px 22px rgba(2,184,191,.18) !important;
}

/* ---------- Palavra-acento: Instrument Serif itálico, MESMO tamanho ---------- */
.soma-hero-std h1 i,
.soma-hero-std h1 em{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-weight:400 !important;
  font-style:italic !important;
  font-size:inherit !important;
  color:#7FE7EB !important;
  -webkit-text-fill-color:#7FE7EB !important;
  letter-spacing:0 !important;
}

/* ---------- Subtítulo: Inter 400 ---------- */
.soma-hero-std h1 ~ p{
  font-family:'Inter',system-ui,sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(14px,1.1vw,16px) !important;
  line-height:1.5 !important;
  color:rgba(244,247,251,.72) !important;
  -webkit-text-fill-color:rgba(244,247,251,.72) !important;
  max-width:54ch !important;
  margin:12px 0 0 !important;
}

/* ---------- Pílula de status (bloco direito) ---------- */
.soma-hero-std .module-status-pill{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  border:1px solid rgba(2,184,191,.35) !important;
  border-radius:100px !important;
  padding:8px 14px !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:12.5px !important; font-weight:600 !important;
  color:#7FE7EB !important; -webkit-text-fill-color:#7FE7EB !important;
  background:rgba(2,184,191,.08) !important;
  white-space:nowrap !important;
}
.soma-hero-std .module-status-pill::before{
  content:"" !important; width:7px !important; height:7px !important;
  border-radius:50% !important; background:#02D4DC !important; flex:none !important;
}
.soma-hero-std .module-status-pill .status-dot{ display:none !important; }

/* ---------- Botão de ação primária (bloco direito) ---------- */
.soma-hero-std .btn-primary{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  background:linear-gradient(135deg,#02D4DC,#02888F) !important;
  color:#04121f !important; -webkit-text-fill-color:#04121f !important;
  border:none !important;
  border-radius:12px !important;
  padding:10px 18px !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:13.5px !important; font-weight:600 !important;
  white-space:nowrap !important; cursor:pointer !important;
  box-shadow:0 8px 20px -10px rgba(2,184,191,.7) !important;
}
.soma-hero-std .btn-primary:hover{ filter:brightness(1.06) !important; }

/* ---------- Fundo: card navy + textura (páginas com card) ---------- */
.module-app-header.soma-hero-std{
  background:
    linear-gradient(135deg, rgba(6,19,35,.82) 0%, rgba(7,27,49,.76) 58%, rgba(11,49,75,.66) 100%),
    url("assets/blue-background-6.png") center / cover no-repeat !important;
}

/* ---------- Override estrutura/crm (vence page-platform.css congelado) ---------- */
html body.platform-body .platform-main.estrutura-app .module-app-header.soma-hero-std.soma-hero-std .eyebrow,
html body.platform-body .platform-main.jornada-crm-app .module-app-header.soma-hero-std.soma-hero-std .eyebrow{
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:11.5px !important; font-weight:600 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#7FE7EB !important; -webkit-text-fill-color:#7FE7EB !important;
  margin:0 0 12px !important;
}
html body.platform-body .platform-main.estrutura-app .module-app-header.soma-hero-std.soma-hero-std h1,
html body.platform-body .platform-main.jornada-crm-app .module-app-header.soma-hero-std.soma-hero-std h1{
  font-family:'Inter',system-ui,sans-serif !important;
  font-weight:700 !important; font-size:clamp(26px,3.4vw,46px) !important;
  line-height:1.05 !important; letter-spacing:-.5px !important;
  margin:0 !important; color:#F4F7FB !important;
  -webkit-text-fill-color:#F4F7FB !important;
  text-shadow:0 2px 22px rgba(2,184,191,.18) !important;
}
html body.platform-body .platform-main.estrutura-app .module-app-header.soma-hero-std.soma-hero-std h1 i,
html body.platform-body .platform-main.jornada-crm-app .module-app-header.soma-hero-std.soma-hero-std h1 i{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-weight:400 !important; font-style:italic !important; font-size:inherit !important;
  color:#7FE7EB !important; -webkit-text-fill-color:#7FE7EB !important;
  letter-spacing:0 !important;
}
html body.platform-body .platform-main.estrutura-app .module-app-header.soma-hero-std.soma-hero-std .module-app-subtitle,
html body.platform-body .platform-main.jornada-crm-app .module-app-header.soma-hero-std.soma-hero-std .module-app-subtitle{
  font-family:'Inter',system-ui,sans-serif !important; font-weight:400 !important;
  color:rgba(244,247,251,.72) !important;
  -webkit-text-fill-color:rgba(244,247,251,.72) !important;
  font-size:clamp(14px,1.1vw,16px) !important; line-height:1.5 !important;
  max-width:54ch !important; margin:12px 0 0 !important;
}

/* Cursos: eyebrow inline-block → restaura inline-flex p/ o dot respirar */
.platform-hero-panel.soma-hero-std .eyebrow{
  display:inline-flex !important; align-items:center !important; gap:10px !important;
}

/* ---------- Educação/Cursos (foto): botões do hero no padrão canônico ---------- */
.soma-hero-std .edu-btn-primary,
.soma-hero-std .button.primary{
  background:linear-gradient(135deg,#02D4DC,#02888F) !important;
  color:#04121f !important; -webkit-text-fill-color:#04121f !important;
  border:none !important; border-radius:12px !important;
  padding:10px 18px !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; font-size:13.5px !important;
  box-shadow:0 8px 20px -10px rgba(2,184,191,.7) !important;
}
.soma-hero-std .button.ghost,
.soma-hero-std .edu-btn-secondary{
  background:rgba(255,255,255,.06) !important;
  color:#F4F7FB !important; -webkit-text-fill-color:#F4F7FB !important;
  border:1px solid rgba(255,255,255,.26) !important; border-radius:12px !important;
  padding:10px 18px !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; font-size:13.5px !important;
}

/* ---------- Jornadas Clínicas (.hub-head): chips no estilo de pílula canônica ---------- */
.soma-hero-std .chip{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:#7FE7EB !important; -webkit-text-fill-color:#7FE7EB !important;
  background:rgba(2,184,191,.08) !important;
  border:1px solid rgba(2,184,191,.35) !important;
  border-radius:100px !important; padding:8px 14px !important;
}

/* =====================================================================
   SOMA — Sub-navegação: eyebrow canônico do submenu (.ctx em .subtabs)
   12px · JetBrains Mono · #0E7C82 · 600 · .12em · uppercase — idêntico em
   Estruturação / Documentos / Configurações (corrige o cinza de docs/config).
   ===================================================================== */
.subtabs .ctx, .crm-subnav-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#0E7C82 !important;
  -webkit-text-fill-color:#0E7C82 !important;
}

/* ---------------------------------------------------------------------
   Sub-navegação: FORMA ÚNICA das abas (.subtab)
   Retângulo radius 10px; inativo = ícone + texto slate; ativo = chip branco
   + borda + sombra + texto/ícone turquesa + tracinho turquesa. Mesma
   transição. Cobre Estruturação/Documentos/Configurações (.subtabs) e CRM
   (.crm-subtabs) — todas carregam este arquivo.
   --------------------------------------------------------------------- */
.subtabs .subtab, .crm-subtabs .subtab{
  position:relative !important;
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  padding:8px 13px !important; border-radius:10px !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; font-weight:500 !important;
  color:#5b7286 !important; -webkit-text-fill-color:#5b7286 !important;
  border:1px solid transparent !important; background:transparent !important;
  cursor:pointer !important; white-space:nowrap !important; transition:all .18s ease !important;
}
.subtabs .subtab svg, .crm-subtabs .subtab svg{ width:15px !important; height:15px !important; opacity:.85 !important; }
.subtabs .subtab:hover, .crm-subtabs .subtab:hover{
  background:rgba(2,184,191,.07) !important; color:#0B6E73 !important; -webkit-text-fill-color:#0B6E73 !important;
}
.subtabs .subtab.is-active, .subtabs .subtab[aria-selected="true"],
.crm-subtabs .subtab.is-active, .crm-subtabs .subtab[aria-selected="true"]{
  background:#fff !important; color:#0B6E73 !important; -webkit-text-fill-color:#0B6E73 !important;
  border:1px solid rgba(11,31,51,.12) !important; box-shadow:0 1px 3px rgba(11,31,51,.08) !important;
}
.subtabs .subtab.is-active svg, .subtabs .subtab[aria-selected="true"] svg,
.crm-subtabs .subtab.is-active svg, .crm-subtabs .subtab[aria-selected="true"] svg{ opacity:1 !important; }
.subtabs .subtab.is-active::after, .subtabs .subtab[aria-selected="true"]::after,
.crm-subtabs .subtab.is-active::after, .crm-subtabs .subtab[aria-selected="true"]::after{
  content:"" !important; position:absolute !important; display:block !important;
  left:50% !important; transform:translateX(-50%) !important; bottom:3px !important;
  width:16px !important; height:2px !important; border-radius:2px !important;
  margin:0 !important; background:#02B8BF !important;
}

/* ---------- Sub-navegação: respiro padrão da barra ----------
   Mesma altura e gap em Estruturação/Documentos/Configurações
   (a distância do header — sticky top — já é igual: var(--pl-header-h,64px)). */
.subtabs{ height:50px !important; gap:6px !important; align-items:center !important; }

/* ---------- Troca de subseção ---------- */
/* Anti-flicker: a animação de ENTRADA (somaPanelIn, opacity 0→1) rodava no 1º paint
   porque o painel ativo é estático no HTML → o conteúdo principal "aparecia em fade" a
   cada carregamento (flicker em Estruturação/Documentos/Configurações). Removida: o
   painel aparece instantâneo na altura já reservada. A troca por clique continua trocando
   o conteúdo (só sem o fade de 0.26s). Ver reports/systemic-fix-rule.md. */
@keyframes somaPanelIn{ from{opacity:0} to{opacity:1} }
.estrutura-app .est-tabpanel.is-active,
.documents-app .module-app-panel.is-active,
.configuracoes-app .module-app-panel.is-active{
  animation:none !important;
}