/* =============================================================================
   SIMULADOR DE NEGÓCIOS v2.0 — Tema "Construtor"
   Paleta: azul-noite + jade + âmbar | Tipografia: Plus Jakarta Sans + Inter
   Layout: menu lateral fixo + área de conteúdo | Mobile-first
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------------------
   1. TOKENS DE DESIGN
   --------------------------------------------------------------------------- */
:root {
  /* Paleta principal */
  --noite:          #0F1923;
  --petroleo:       #1A3A4A;
  --petroleo-claro: #254D63;
  --jade:           #2ECC8B;
  --jade-escuro:    #25A872;
  --jade-claro:     #E8F9F2;
  --ambar:          #F5A623;
  --ambar-claro:    #FEF3DC;
  --coral:          #E85D4A;
  --coral-claro:    #FDECEA;

  /* Neutros */
  --neve:           #F0F4F0;
  --gelo:           #E8EDF2;
  --cinza-200:      #D4DCE4;
  --cinza-400:      #8FA0B0;
  --cinza-600:      #5A6E7E;
  --branco:         #FFFFFF;

  /* Texto */
  --txt-principal:  #0F1923;
  --txt-secundario: #5A6E7E;
  --txt-suave:      #8FA0B0;
  --txt-invertido:  #F0F4F0;

  /* Tipografia */
  --fonte-display:  'Plus Jakarta Sans', system-ui, sans-serif;
  --fonte-corpo:    'Inter', system-ui, sans-serif;
  --fonte-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Escala tipográfica */
  --t-xs:    0.6875rem;  /* 11px */
  --t-sm:    0.75rem;    /* 12px */
  --t-base:  0.875rem;   /* 14px */
  --t-md:    1rem;       /* 16px */
  --t-lg:    1.125rem;   /* 18px */
  --t-xl:    1.375rem;   /* 22px */
  --t-2xl:   1.75rem;    /* 28px */
  --t-3xl:   2.25rem;    /* 36px */

  /* Espaçamento */
  --s1:   0.25rem;
  --s2:   0.5rem;
  --s3:   0.75rem;
  --s4:   1rem;
  --s5:   1.25rem;
  --s6:   1.5rem;
  --s8:   2rem;
  --s10:  2.5rem;
  --s12:  3rem;
  --s16:  4rem;

  /* Layout */
  --sidebar-w:        240px;
  --sidebar-w-mini:   64px;
  --header-h:         56px;
  --content-max:      860px;
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;

  /* Sombras */
  --sombra-sm:   0 1px 4px rgba(15,25,35,.08);
  --sombra-md:   0 4px 16px rgba(15,25,35,.10);
  --sombra-lg:   0 8px 32px rgba(15,25,35,.14);

  /* Transições */
  --tr-fast:  100ms ease;
  --tr-med:   200ms ease;
  --tr-slow:  350ms ease;
}

/* ---------------------------------------------------------------------------
   2. RESET E BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte-corpo);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--txt-principal);
  background-color: var(--neve);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--jade-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------------------
   3. LAYOUT PRINCIPAL — sidebar + content
   --------------------------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
   4. SIDEBAR — menu lateral fixo
   --------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background-color: var(--noite);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: width var(--tr-slow);
  overflow: hidden;
}

/* Colapsado */
.sidebar--mini { width: var(--sidebar-w-mini); }

/* Logo / marca */
.sidebar__logo {
  padding: var(--s5) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  border-bottom: 1px solid rgba(255,255,255,.08);
  min-height: var(--header-h);
  flex-shrink: 0;
}

.sidebar__logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--jade) 0%, var(--jade-escuro) 100%);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-md);
  flex-shrink: 0;
  font-weight: 700;
  color: var(--noite);
  font-family: var(--fonte-display);
}

.sidebar__logo-text {
  font-family: var(--fonte-display);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--txt-invertido);
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--tr-med);
  line-height: 1.2;
}

.sidebar__logo-text span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--cinza-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.sidebar--mini .sidebar__logo-text { opacity: 0; pointer-events: none; }

/* Nome do negócio em progresso */
.sidebar__plano {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.sidebar__plano-label {
  font-size: var(--t-xs);
  color: var(--cinza-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: var(--s1);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar__plano-nome {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--jade);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--tr-med);
}

.sidebar--mini .sidebar__plano { display: none; }

/* Navegação de fases */
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--s3) 0;
}

.sidebar__nav::-webkit-scrollbar { width: 4px; }
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.nav-fase {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  transition: background-color var(--tr-fast);
  position: relative;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-fase:hover { background-color: rgba(255,255,255,.05); }

.nav-fase--ativa {
  background-color: rgba(46,204,139,.12) !important;
}

.nav-fase--ativa::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--jade);
  border-radius: 0 2px 2px 0;
}

/* Ícone/número da fase */
.nav-fase__icone {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-sm);
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--tr-med);
  font-family: var(--fonte-display);
  position: relative;
}

/* Estados do ícone */
.nav-fase__icone--vazia {
  background-color: rgba(255,255,255,.08);
  color: var(--cinza-400);
  border: 1.5px solid rgba(255,255,255,.12);
}

.nav-fase__icone--progresso {
  background-color: rgba(245,166,35,.15);
  color: var(--ambar);
  border: 1.5px solid rgba(245,166,35,.4);
}

.nav-fase__icone--concluida {
  background-color: rgba(46,204,139,.18);
  color: var(--jade);
  border: 1.5px solid rgba(46,204,139,.4);
}

.nav-fase--ativa .nav-fase__icone {
  background-color: var(--jade);
  color: var(--noite);
  border-color: var(--jade);
  box-shadow: 0 0 12px rgba(46,204,139,.35);
}

/* Texto da fase */
.nav-fase__texto {
  flex: 1;
  min-width: 0;
  opacity: 1;
  transition: opacity var(--tr-med);
}

.nav-fase__titulo {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--txt-invertido);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.nav-fase__subtitulo {
  font-size: var(--t-xs);
  color: var(--cinza-400);
  white-space: nowrap;
  margin-top: 1px;
}

.nav-fase--ativa .nav-fase__titulo { color: var(--jade); }
.sidebar--mini .nav-fase__texto { opacity: 0; pointer-events: none; }

/* Barra de progresso vertical — ASSINATURA DO DESIGN */
.sidebar__progresso {
  padding: var(--s4);
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.sidebar__progresso-label {
  font-size: var(--t-xs);
  color: var(--cinza-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s2);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--tr-med);
}

.sidebar--mini .sidebar__progresso-label { opacity: 0; }

.progresso-barra {
  height: 4px;
  background-color: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}

.progresso-barra__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--jade) 0%, #5DDBA8 100%);
  border-radius: 2px;
  width: 0%;
  transition: width 500ms cubic-bezier(.4,0,.2,1);
}

.sidebar__progresso-pct {
  font-family: var(--fonte-mono);
  font-size: var(--t-xs);
  color: var(--jade);
  margin-top: var(--s1);
  text-align: right;
  transition: opacity var(--tr-med);
}

.sidebar--mini .sidebar__progresso-pct { opacity: 0; }

/* Ações do sidebar */
.sidebar__acoes {
  padding: var(--s3) var(--s2);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  flex-shrink: 0;
}

.sidebar__btn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-md);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--cinza-400);
  cursor: pointer;
  transition: all var(--tr-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.sidebar__btn:hover { background-color: rgba(255,255,255,.06); color: var(--txt-invertido); }
.sidebar__btn-icon { font-size: var(--t-md); flex-shrink: 0; width: 24px; text-align: center; }
.sidebar__btn-label { transition: opacity var(--tr-med); }
.sidebar--mini .sidebar__btn-label { opacity: 0; pointer-events: none; }

/* Botão salvar com destaque */
.sidebar__btn--salvar {
  background-color: rgba(46,204,139,.12);
  color: var(--jade) !important;
  border-radius: var(--radius-md);
  margin-bottom: var(--s1);
}
.sidebar__btn--salvar:hover {
  background-color: rgba(46,204,139,.22) !important;
}

/* Toggle mini */
.sidebar__toggle {
  position: absolute;
  top: var(--s4);
  right: -12px;
  width: 24px;
  height: 24px;
  background-color: var(--noite);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  color: var(--cinza-400);
  transition: all var(--tr-fast);
  z-index: 10;
}

.sidebar__toggle:hover { background-color: var(--petroleo-claro); color: var(--jade); }

/* ---------------------------------------------------------------------------
   5. ÁREA DE CONTEÚDO
   --------------------------------------------------------------------------- */
.content-area {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--tr-slow);
  min-width: 0;  /* Evita overflow em flex */
  width: calc(100% - var(--sidebar-w));
}

.content-area--mini {
  margin-left: var(--sidebar-w-mini);
  width: calc(100% - var(--sidebar-w-mini));
}

/* Header da área de conteúdo */
.content-header {
  height: var(--header-h);
  background-color: var(--branco);
  border-bottom: 1px solid var(--cinza-200);
  display: flex;
  align-items: center;
  padding: 0 var(--s8);
  gap: var(--s4);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--sombra-sm);
}

.content-header__fase {
  font-family: var(--fonte-display);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--txt-principal);
}

.content-header__separador {
  color: var(--cinza-200);
  font-size: var(--t-lg);
}

.content-header__nome {
  font-size: var(--t-base);
  color: var(--txt-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.content-header__spacer { flex: 1; }

.content-header__salvo {
  font-size: var(--t-xs);
  color: var(--txt-suave);
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.content-header__salvo .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--jade);
}

/* Conteúdo principal */
.content-main {
  flex: 1;
  padding: var(--s8);
  width: 100%;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   6. FASES — container de conteúdo de cada fase
   --------------------------------------------------------------------------- */
.fase {
  display: none;
  animation: fadeSlide 180ms ease;
}

.fase--ativa { display: block; }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabeçalho de fase */
.fase__header {
  margin-bottom: var(--s8);
}

.fase__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--jade-escuro);
  margin-bottom: var(--s2);
}

.fase__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--txt-principal);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: var(--s3);
}

.fase__descricao {
  font-size: var(--t-md);
  color: var(--txt-secundario);
  line-height: 1.65;
  max-width: 620px;
}

/* ---------------------------------------------------------------------------
   7. CARDS E PAINÉIS
   --------------------------------------------------------------------------- */
.card {
  background-color: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--radius-lg);
  padding: var(--s6) var(--s8);
  box-shadow: var(--sombra-sm);
  margin-bottom: var(--s6);
}

.card--destaque {
  border-color: var(--jade);
  border-width: 1.5px;
}

.card--ambar {
  border-color: var(--ambar);
  background-color: var(--ambar-claro);
}

.card--alerta {
  border-color: var(--coral);
  background-color: var(--coral-claro);
}

.card__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--txt-principal);
  margin-bottom: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.card__titulo-icon {
  font-size: var(--t-xl);
}

/* Seção dentro de card */
.secao {
  margin-bottom: var(--s8);
}

.secao__titulo {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--txt-principal);
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--gelo);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* ---------------------------------------------------------------------------
   8. BMC — Business Model Canvas — RESPONSIVO
   --------------------------------------------------------------------------- */
.bmc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  grid-template-rows: auto auto auto;
  gap: var(--s3);
  margin-bottom: var(--s6);
  /* Scroll horizontal em telas menores que 900px */
  overflow-x: auto;
  min-width: 0;
  padding-bottom: var(--s2); /* Espaço para scrollbar */
}

/* Em tablet: 2 colunas + scroll */
@media (max-width: 900px) {
  .bmc-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    grid-template-rows: auto;
  }
  /* Remove posicionamento de grade específico — exibe em fluxo linear */
  .bmc-bloco--parceiros,
  .bmc-bloco--atividades,
  .bmc-bloco--proposta,
  .bmc-bloco--relacionamento,
  .bmc-bloco--clientes,
  .bmc-bloco--recursos,
  .bmc-bloco--canais,
  .bmc-bloco--custos,
  .bmc-bloco--receitas {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .bmc-bloco--proposta,
  .bmc-bloco--custos {
    grid-column: span 2 !important;
  }
}

/* Em mobile: 1 coluna */
@media (max-width: 540px) {
  .bmc-grid {
    grid-template-columns: 1fr;
  }
  .bmc-bloco--proposta,
  .bmc-bloco--custos {
    grid-column: auto !important;
  }
}

.bmc-bloco {
  background-color: var(--branco);
  border: 1.5px solid var(--cinza-200);
  border-radius: var(--radius-md);
  padding: var(--s4);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

.bmc-bloco:hover { border-color: var(--jade); box-shadow: var(--sombra-sm); }

/* Cores por bloco (mantidas) */
.bmc-bloco--parceiros    { background-color: #FDF8F0; border-color: #E8D9BC; }
.bmc-bloco--atividades   { background-color: #F0F7FD; border-color: #BDD6EC; }
.bmc-bloco--proposta     { background-color: #F0FCF7; border-color: #B8EDD8; }
.bmc-bloco--relacionamento{ background-color: #FDF0F7; border-color: #ECC0DC; }
.bmc-bloco--clientes     { background-color: #F0F4FD; border-color: #BCC8EC; }
.bmc-bloco--recursos     { background-color: #F5F0FD; border-color: #D0BCE8; }
.bmc-bloco--canais       { background-color: #FDF5F0; border-color: #ECDBC0; }
.bmc-bloco--custos       { background-color: #FFF8F0; border-color: #F0DCC0; }
.bmc-bloco--receitas     { background-color: #F0FDF6; border-color: #B8E8CC; }

/* Grid de 5 colunas só em desktop */
@media (min-width: 901px) {
  .bmc-bloco--parceiros    { grid-column: 1; grid-row: 1 / 3; }
  .bmc-bloco--atividades   { grid-column: 2; grid-row: 1; }
  .bmc-bloco--proposta     { grid-column: 3; grid-row: 1 / 3; }
  .bmc-bloco--relacionamento{ grid-column: 4; grid-row: 1; }
  .bmc-bloco--clientes     { grid-column: 5; grid-row: 1 / 3; }
  .bmc-bloco--recursos     { grid-column: 2; grid-row: 2; }
  .bmc-bloco--canais       { grid-column: 4; grid-row: 2; }
  .bmc-bloco--custos       { grid-column: 1 / 4; grid-row: 3; }
  .bmc-bloco--receitas     { grid-column: 4 / 6; grid-row: 3; }
}

.bmc-bloco__titulo {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-secundario);
  margin-bottom: var(--s3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bmc-bloco__add {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--jade);
  color: var(--noite);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  border: none;
  flex-shrink: 0;
  transition: background-color var(--tr-fast);
}

.bmc-bloco__add:hover { background-color: var(--jade-escuro); }

.bmc-bloco__cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.bmc-card {
  background-color: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  font-size: var(--t-base);
  color: var(--txt-principal);
  line-height: 1.45;
  position: relative;
  group: true;
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}

.bmc-card__texto { flex: 1; min-width: 0; word-break: break-word; }

.bmc-card__acoes {
  display: flex;
  gap: var(--s1);
  opacity: 0;
  transition: opacity var(--tr-fast);
  flex-shrink: 0;
}

.bmc-card:hover .bmc-card__acoes { opacity: 1; }

.bmc-card__btn {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all var(--tr-fast);
}

.bmc-card__btn--editar { background-color: var(--gelo); color: var(--txt-secundario); }
.bmc-card__btn--editar:hover { background-color: var(--cinza-200); }
.bmc-card__btn--excluir { background-color: var(--coral-claro); color: var(--coral); }
.bmc-card__btn--excluir:hover { background-color: var(--coral); color: var(--branco); }

.bmc-empty {
  font-size: var(--t-base);
  color: var(--txt-suave);
  text-align: center;
  padding: var(--s4) 0;
  font-style: italic;
}

/* Modal de input BMC */
.bmc-input-wrapper {
  margin-top: var(--s2);
  display: none;
}

.bmc-input-wrapper--ativa { display: flex; gap: var(--s2); }

.bmc-input {
  flex: 1;
  padding: var(--s2) var(--s3);
  border: 1.5px solid var(--jade);
  border-radius: var(--radius-sm);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  color: var(--txt-principal);
  background-color: var(--branco);
  outline: none;
  resize: none;
}

/* ---------------------------------------------------------------------------
   9. JORNADA DO CLIENTE
   --------------------------------------------------------------------------- */
.jornada-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s4);
  overflow-x: auto;
}

.jornada-coluna {
  min-width: 160px;
}

.jornada-coluna__header {
  text-align: center;
  padding: var(--s3) var(--s2);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: var(--s3);
}

.jornada-coluna__etapa {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jornada-coluna__icon { font-size: var(--t-xl); margin-bottom: var(--s1); }

/* Cores por etapa */
.jornada-coluna--descoberta .jornada-coluna__header  { background-color: #EEF2FF; color: #4B67E8; }
.jornada-coluna--consideracao .jornada-coluna__header{ background-color: #FEF3DC; color: #C07D0A; }
.jornada-coluna--decisao .jornada-coluna__header     { background-color: #E8F9F2; color: #1A8A5C; }
.jornada-coluna--uso .jornada-coluna__header         { background-color: #F0F4FD; color: #2D5FBF; }
.jornada-coluna--fidelizacao .jornada-coluna__header { background-color: #FDF0F7; color: #A0308A; }

.jornada-item {
  background-color: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  font-size: var(--t-base);
  margin-bottom: var(--s2);
  cursor: pointer;
  position: relative;
}

.jornada-item--acao       { border-left: 3px solid #4B67E8; }
.jornada-item--emocao     { border-left: 3px solid var(--ambar); }
.jornada-item--dor        { border-left: 3px solid var(--coral); }
.jornada-item--oportunidade { border-left: 3px solid var(--jade); }

/* ---------------------------------------------------------------------------
   10. FORMULÁRIOS
   --------------------------------------------------------------------------- */
.form-grupo { margin-bottom: var(--s5); }

.form-label {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--txt-principal);
  margin-bottom: var(--s2);
}

.form-label-hint {
  display: block;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--txt-suave);
  margin-top: var(--s1);
  line-height: 1.45;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--s3) var(--s4);
  font-family: var(--fonte-corpo);
  font-size: var(--t-md);
  color: var(--txt-principal);
  background-color: var(--neve);
  border: 1.5px solid var(--cinza-200);
  border-radius: var(--radius-md);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast),
              background-color var(--tr-fast);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--jade);
  background-color: var(--branco);
  box-shadow: 0 0 0 3px rgba(46,204,139,.15);
}

.form-input--erro,
.form-select--erro { border-color: var(--coral); background-color: var(--coral-claro); }

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.form-erro-msg {
  display: block;
  font-size: var(--t-sm);
  color: var(--coral);
  margin-top: var(--s2);
  font-weight: 500;
}

/* Input monetário */
.input-moeda { position: relative; }
.input-moeda::before {
  content: 'R$';
  position: absolute;
  left: var(--s3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-mono);
  font-size: var(--t-sm);
  color: var(--txt-suave);
  pointer-events: none;
  z-index: 1;
}
.input-moeda .form-input { padding-left: calc(var(--s3) + 26px); }

/* Input percentual */
.input-percent { position: relative; }
.input-percent::after {
  content: '%';
  position: absolute;
  right: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-mono);
  font-size: var(--t-sm);
  color: var(--txt-suave);
  pointer-events: none;
}
.input-percent .form-input { padding-right: calc(var(--s4) + 18px); }

/* Select wrapper */
.select-wrapper { position: relative; }
.select-wrapper::after {
  content: '▾';
  position: absolute;
  right: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--txt-suave);
  pointer-events: none;
}
.select-wrapper .form-select { padding-right: calc(var(--s4) + 20px); cursor: pointer; }

/* Grid de formulário */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s5); }

@media (max-width: 680px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

/* Toggle switch */
.switch-wrapper {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background-color: var(--neve);
  border: 1.5px solid var(--cinza-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--tr-fast);
}
.switch-wrapper:hover { border-color: var(--jade); }
.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 40px; height: 22px;
  background-color: var(--cinza-200);
  border-radius: 11px; flex-shrink: 0; position: relative;
  transition: background-color var(--tr-med);
}
.switch-track::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: var(--branco); border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform var(--tr-med);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch-input:checked + .switch-track { background-color: var(--jade); }
.switch-input:checked + .switch-track::after { transform: translateX(18px); }
.switch-label-text { font-size: var(--t-base); font-weight: 500; color: var(--txt-principal); }

/* ---------------------------------------------------------------------------
   11. BOTÕES
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--tr-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--jade); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn--primario  { background-color: var(--jade); color: var(--noite); }
.btn--primario:hover { background-color: var(--jade-escuro); box-shadow: 0 4px 12px rgba(46,204,139,.30); }

.btn--secundario { background-color: transparent; color: var(--jade-escuro); border: 1.5px solid var(--jade); }
.btn--secundario:hover { background-color: var(--jade-claro); }

.btn--ghost { background-color: transparent; color: var(--txt-secundario); border: 1.5px solid var(--cinza-200); }
.btn--ghost:hover { background-color: var(--gelo); color: var(--txt-principal); }

.btn--perigo { background-color: transparent; color: var(--coral); border: 1.5px solid var(--coral); }
.btn--perigo:hover { background-color: var(--coral-claro); }

.btn--noite { background-color: var(--noite); color: var(--txt-invertido); }
.btn--noite:hover { background-color: var(--petroleo); }

.btn--sm { padding: var(--s1) var(--s3); font-size: var(--t-sm); }
.btn--lg { padding: var(--s4) var(--s8); font-size: var(--t-md); }
.btn--bloco { width: 100%; }

/* Barra de navegação entre fases */
.nav-fases {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s10);
  padding-top: var(--s6);
  border-top: 1px solid var(--cinza-200);
}

/* ---------------------------------------------------------------------------
   12. TABELAS (listas de equipe, equipamentos, produtos)
   --------------------------------------------------------------------------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}

.tabela th {
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--txt-suave);
  padding: var(--s2) var(--s3);
  border-bottom: 2px solid var(--cinza-200);
  background-color: var(--neve);
}

.tabela td {
  padding: var(--s3);
  border-bottom: 1px solid var(--gelo);
  color: var(--txt-principal);
  vertical-align: middle;
}

.tabela tbody tr:hover { background-color: var(--neve); }
.tabela tbody tr:last-child td { border-bottom: none; }

.tabela td .mono { font-family: var(--fonte-mono); font-size: var(--t-base); }

/* Badge de MVP */
.badge-mvp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background-color: var(--ambar-claro);
  color: #8A5E0A;
  border: 1px solid rgba(245,166,35,.35);
  letter-spacing: 0.04em;
}

/* Badge de tipo */
.badge-tipo {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.badge-tipo--servico    { background-color: var(--jade-claro);  color: var(--jade-escuro); }
.badge-tipo--produto    { background-color: var(--gelo);         color: var(--petroleo-claro); }
.badge-tipo--recorrente { background-color: var(--ambar-claro);  color: #8A5E0A; }
.badge-tipo--digital    { background-color: #EEF2FF;             color: #4B67E8; }

/* ---------------------------------------------------------------------------
   13. MÉTRICAS E KPIs
   --------------------------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.kpi-card {
  background-color: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--radius-md);
  padding: var(--s4) var(--s5);
  box-shadow: var(--sombra-sm);
}

.kpi-card__label {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-suave);
  margin-bottom: var(--s2);
}

.kpi-card__valor {
  font-family: var(--fonte-mono);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--txt-principal);
  line-height: 1.1;
}

.kpi-card__valor--jade   { color: var(--jade-escuro); }
.kpi-card__valor--ambar  { color: var(--ambar); }
.kpi-card__valor--coral  { color: var(--coral); }
.kpi-card__valor--noite  { color: var(--noite); }

.kpi-card__sub {
  font-size: var(--t-sm);
  color: var(--txt-suave);
  margin-top: var(--s1);
}

/* ---------------------------------------------------------------------------
   14. GRÁFICOS (wrappers para Chart.js)
   --------------------------------------------------------------------------- */
.grafico-wrapper {
  background-color: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  box-shadow: var(--sombra-sm);
  margin-bottom: var(--s6);
}

.grafico-wrapper__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--txt-principal);
  margin-bottom: var(--s4);
}

.grafico-canvas { max-height: 300px; }

/* Tabela de projeção */
.tabela-projecao-wrapper {
  overflow-x: auto;
  border: 1px solid var(--cinza-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s6);
}

.tabela-projecao {
  min-width: 800px;
}

.tabela-projecao th:first-child,
.tabela-projecao td:first-child {
  background-color: var(--neve);
  font-weight: 600;
  color: var(--txt-secundario);
  min-width: 140px;
  border-right: 1px solid var(--cinza-200);
  position: sticky;
  left: 0;
}

.tabela-projecao .positivo { color: var(--jade-escuro); font-weight: 600; }
.tabela-projecao .negativo { color: var(--coral); font-weight: 600; }

/* Abas da projeção */
.abas {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--cinza-200);
  margin-bottom: var(--s6);
  overflow-x: auto;
}

.aba {
  padding: var(--s3) var(--s5);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--txt-suave);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--tr-fast);
}

.aba:hover { color: var(--txt-principal); }
.aba--ativa { color: var(--jade-escuro); border-bottom-color: var(--jade); }

.aba-painel { display: none; }
.aba-painel--ativa { display: block; animation: fadeSlide 150ms ease; }

/* ---------------------------------------------------------------------------
   15. TOOLTIP / AJUDA CONTEXTUAL
   --------------------------------------------------------------------------- */
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--cinza-200);
  color: var(--txt-suave);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  flex-shrink: 0;
  margin-left: var(--s1);
}

.tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--noite);
  color: var(--txt-invertido);
  font-size: var(--t-sm);
  font-weight: 400;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-md);
  white-space: normal;
  width: 220px;
  line-height: 1.5;
  box-shadow: var(--sombra-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-fast);
  z-index: 200;
}

.tooltip-wrapper:hover .tooltip-bubble { opacity: 1; }

/* ---------------------------------------------------------------------------
   16. ALERTAS E ESTADOS
   --------------------------------------------------------------------------- */
.alerta {
  padding: var(--s4);
  border-radius: var(--radius-md);
  font-size: var(--t-base);
  margin-bottom: var(--s4);
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  line-height: 1.5;
}

.alerta--erro    { background-color: var(--coral-claro); border: 1px solid var(--coral); color: #8A2218; }
.alerta--ok      { background-color: var(--jade-claro);  border: 1px solid var(--jade);  color: #0E6641; }
.alerta--info    { background-color: var(--ambar-claro); border: 1px solid var(--ambar); color: #7A4E0A; }
.alerta--oculto  { display: none !important; }

.spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 3px solid var(--cinza-200);
  border-top-color: var(--jade);
  border-radius: 50%;
  animation: girar 600ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.estado-vazio {
  text-align: center;
  padding: var(--s12) var(--s6);
  color: var(--txt-suave);
}

.estado-vazio__icon  { font-size: 2.5rem; margin-bottom: var(--s4); opacity: .45; }
.estado-vazio__titulo { font-family: var(--fonte-display); font-size: var(--t-lg); font-weight: 700; color: var(--txt-principal); margin-bottom: var(--s2); }

/* ---------------------------------------------------------------------------
   17. SAZONALIDADE — barras interativas
   --------------------------------------------------------------------------- */
.sazonalidade-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s2);
  align-items: end;
}

.sazon-mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
}

.sazon-mes__label {
  font-size: var(--t-xs);
  color: var(--txt-suave);
  font-weight: 600;
  text-transform: uppercase;
}

.sazon-mes__input {
  width: 100%;
  text-align: center;
  font-family: var(--fonte-mono);
  font-size: var(--t-xs);
  padding: var(--s1);
  border: 1px solid var(--cinza-200);
  border-radius: var(--radius-sm);
  background-color: var(--neve);
  color: var(--txt-principal);
  outline: none;
}

.sazon-mes__input:focus { border-color: var(--jade); }

/* ---------------------------------------------------------------------------
   18. MODAL
   --------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15,25,35,.55);
  backdrop-filter: blur(3px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-med);
}

.modal-overlay--ativa {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background-color: var(--branco);
  border-radius: var(--radius-xl);
  padding: var(--s8);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--sombra-lg);
  transform: translateY(12px);
  transition: transform var(--tr-med);
}

.modal-overlay--ativa .modal { transform: translateY(0); }

.modal__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--txt-principal);
  margin-bottom: var(--s4);
}

.modal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* ---------------------------------------------------------------------------
   20. RESPONSIVO MOBILE
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   TABLET: 769px–1024px — sidebar mini automático
   --------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: var(--sidebar-w-mini);
  }

  .sidebar__logo-text,
  .sidebar__plano,
  .sidebar__progresso-label,
  .sidebar__progresso-pct,
  .sidebar__btn-label { opacity: 0; pointer-events: none; }

  .sidebar__toggle { display: none; }

  .nav-fase__texto { opacity: 0; pointer-events: none; }

  .content-area {
    margin-left: var(--sidebar-w-mini);
    width: calc(100% - var(--sidebar-w-mini));
  }
}

/* ---------------------------------------------------------------------------
   20. RESPONSIVO MOBILE — até 768px
   Layout: sidebar vira barra INFERIOR de navegação por ícones
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* App-shell vira coluna (sidebar em baixo) */
  .app-shell {
    flex-direction: column-reverse; /* sidebar no fundo */
    min-height: 100dvh;
  }

  /* Sidebar: barra de navegação inferior fixa */
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100% !important;
    height: auto;
    min-height: 0;
    flex-direction: row;
    align-items: stretch;
    z-index: 200;
    border-top: 1px solid rgba(255,255,255,.12);
    overflow: visible;
  }

  /* Oculta elementos não necessários na barra */
  .sidebar__logo,
  .sidebar__plano,
  .sidebar__progresso,
  .sidebar__acoes,
  .sidebar__toggle { display: none !important; }

  /* Nav vira row horizontal */
  .sidebar__nav {
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar__nav::-webkit-scrollbar { display: none; }

  /* Cada botão de fase */
  .nav-fase {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s2) var(--s1);
    min-width: 64px;
    flex: 1;
    border-radius: 0;
    gap: 2px;
  }

  .nav-fase__icone {
    font-size: 1.4rem;
    line-height: 1;
  }

  .nav-fase__texto {
    display: block !important; /* mostra abreviação */
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
    line-height: 1.2;
    margin-top: 2px;
  }

  .nav-fase--ativa .nav-fase__texto {
    color: var(--jade) !important;
  }

  .nav-fase::before { display: none; }

  /* Conteúdo principal */
  .content-area {
    margin-left: 0 !important;
    width: 100% !important;
    padding-bottom: 72px; /* espaço para a barra inferior */
    min-height: 100dvh;
  }

  .content-main {
    padding: var(--s4) var(--s3);
    width: 100%;
  }

  /* Header mobile */
  .content-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: var(--s3) var(--s4);
  }

  /* BMC: 1 coluna */
  .bmc-grid {
    grid-template-columns: 1fr !important;
    overflow-x: visible;
  }

  .bmc-bloco--parceiros, .bmc-bloco--atividades,
  .bmc-bloco--proposta, .bmc-bloco--relacionamento,
  .bmc-bloco--clientes, .bmc-bloco--recursos,
  .bmc-bloco--canais, .bmc-bloco--custos,
  .bmc-bloco--receitas {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Jornada: scroll horizontal */
  .jornada-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--s3);
    padding-bottom: var(--s3);
    -webkit-overflow-scrolling: touch;
  }

  .jornada-coluna {
    min-width: 200px;
    flex-shrink: 0;
  }

  /* Forms: 1 coluna */
  .form-grid-2, .form-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* KPIs: 2 colunas */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Modais: tela cheia no mobile */
  .modal {
    max-width: 100% !important;
    max-height: 92dvh;
    margin: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .modal-overlay {
    align-items: flex-end !important;
  }

  /* Tabelas: scroll horizontal */
  .tabela-projecao-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Abas: scroll horizontal */
  .abas {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--s1);
  }
  .abas::-webkit-scrollbar { display: none; }

  .aba {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Cookie banner: compacto */
  #cookie-banner {
    padding: var(--s3) var(--s4) !important;
    font-size: 12px !important;
  }
}

/* ---------------------------------------------------------------------------
   Mobile pequeno — 375px
   --------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .nav-fase {
    min-width: 54px;
    padding: var(--s2) 4px;
  }

  .nav-fase__texto {
    font-size: 8px;
    max-width: 50px;
  }

  .content-main {
    padding: var(--s3) var(--s2);
  }

  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   21. UTILITÁRIOS
   --------------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.oculto  { display: none !important; }
.mt-4    { margin-top: var(--s4); }
.mt-6    { margin-top: var(--s6); }
.mt-8    { margin-top: var(--s8); }
.mb-4    { margin-bottom: var(--s4); }
.mb-6    { margin-bottom: var(--s6); }
.text-centro  { text-align: center; }
.text-direita { text-align: right; }
.flex         { display: flex; }
.flex-entre   { display: flex; justify-content: space-between; align-items: center; }
.gap-2        { gap: var(--s2); }
.gap-3        { gap: var(--s3); }
.gap-4        { gap: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}