/* ==========================================================================
   STAMINA · COMPONENTES WEB
   Para sites, landing pages, dashboards e sistemas internos.
   Requer: stamina-tokens.css (carregue antes) + fonte Manrope.

     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500&display=swap" rel="stylesheet">
     <link href="stamina-tokens.css" rel="stylesheet">
     <link href="stamina.css" rel="stylesheet">

   Todas as classes começam com "stm-" para não colidir com outros CSS.
   Modo claro: data-tema="claro" no <html> ou em qualquer bloco.

   Sumário
   1. Base            6. Listas, etapas, métricas
   2. Layout          7. Tabela e status
   3. Tipografia      8. Formulários e filtros
   4. Botões e links  9. Navegação
   5. Cards          10. Dashboard e gráficos
   ========================================================================== */


/* 1. BASE ================================================================== */
.stm, .stm *, .stm *::before, .stm *::after { box-sizing: border-box; }
.stm {
  margin: 0;
  background: var(--stm-fundo);
  color: var(--stm-texto);
  font-family: var(--stm-fonte);
  font-weight: 300;
  font-size: var(--stm-t-corpo);
  line-height: var(--stm-lh-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.stm :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.stm :where(ul, ol) { padding: 0; list-style: none; }
.stm :where(img, svg) { display: block; max-width: 100%; }
.stm b, .stm strong { font-weight: 400; color: var(--stm-texto); }
.stm a { color: inherit; }
.stm :focus-visible { outline: 2px solid var(--stm-roxo-claro); outline-offset: 3px; border-radius: 4px; }
.stm ::selection { background: var(--stm-roxo); color: #fff; }


/* 2. LAYOUT ================================================================ */
.stm-container {
  width: calc(100% - var(--stm-margem) * 2);
  max-width: var(--stm-largura-max);
  margin-inline: auto;
}
.stm-secao {
  position: relative;
  padding-block: clamp(4rem, 10vh, 9rem);
  border-top: 1px solid var(--stm-linha);
}
.stm-secao--roxo {
  background: var(--stm-roxo);
  border-top: 0;
  --stm-texto: #fff;
  --stm-texto-2: rgba(255, 255, 255, 0.84);
  --stm-texto-3: rgba(255, 255, 255, 0.7);
  --stm-tom: rgba(255, 255, 255, 0.55);
  --stm-linha: rgba(255, 255, 255, 0.25);
  --stm-linha-forte: rgba(255, 255, 255, 0.45);
  --stm-marca-dagua: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.stm-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--stm-gutter);
  row-gap: var(--stm-e-6);
}
/* Colunas: stm-col-1 … stm-col-12 (quantas ocupa) · stm-ini-1 … (onde começa) */
.stm-col-3 { grid-column-end: span 3; } .stm-col-4 { grid-column-end: span 4; }
.stm-col-5 { grid-column-end: span 5; } .stm-col-6 { grid-column-end: span 6; }
.stm-col-7 { grid-column-end: span 7; } .stm-col-8 { grid-column-end: span 8; }
.stm-col-12 { grid-column: 1 / -1; }
.stm-ini-7 { grid-column-start: 7; } .stm-ini-8 { grid-column-start: 8; } .stm-ini-9 { grid-column-start: 9; }
@media (max-width: 1024px) {
  .stm-grade > * { grid-column: 1 / -1 !important; }
}
.stm-cabecalho { margin-bottom: clamp(2.5rem, 5vw, 5rem); max-width: 64rem; }
.stm-cabecalho--linha {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--stm-gutter);
  align-items: end;
}
.stm-cabecalho--linha > :first-child { grid-column: 1 / span 7; }
.stm-cabecalho--linha > :last-child { grid-column: 9 / span 4; }
@media (max-width: 1024px) {
  .stm-cabecalho--linha > * { grid-column: 1 / -1 !important; }
  .stm-cabecalho--linha > :last-child { margin-top: var(--stm-e-4); }
}


/* 3. TIPOGRAFIA ============================================================ */
.stm-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: var(--stm-t-micro);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stm-texto-3);
}
.stm-eyebrow::before {
  content: "";
  flex: none;
  width: 32px;
  height: 2.5px;
  border-radius: 9999px;
  background: var(--stm-roxo);
}
.stm-secao--roxo .stm-eyebrow::before { background: rgba(255, 255, 255, 0.85); }

.stm-display, .stm-h1, .stm-h2, .stm-h3 { font-weight: 200; color: var(--stm-texto); text-wrap: balance; }
.stm-display { font-size: var(--stm-t-display); line-height: var(--stm-lh-display); letter-spacing: var(--stm-ls-display); }
.stm-h1 { font-size: var(--stm-t-h1); line-height: var(--stm-lh-h1); letter-spacing: var(--stm-ls-h1); }
.stm-h2 { font-size: var(--stm-t-h2); line-height: var(--stm-lh-h2); letter-spacing: var(--stm-ls-h2); font-weight: 300; }
.stm-h3 { font-size: var(--stm-t-h3); line-height: var(--stm-lh-h3); letter-spacing: var(--stm-ls-h3); font-weight: 300; }
.stm-lede { font-size: var(--stm-t-lede); line-height: var(--stm-lh-lede); color: var(--stm-texto-2); max-width: 36em; }
.stm-corpo { font-size: var(--stm-t-corpo); line-height: var(--stm-lh-corpo); color: var(--stm-texto-2); }
.stm-legenda { font-size: var(--stm-t-legenda); line-height: var(--stm-lh-legenda); color: var(--stm-texto-2); }
.stm-micro {
  font-size: var(--stm-t-micro);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stm-texto-3);
}
.stm-tom { color: var(--stm-tom); }
.stm-num { font-variant-numeric: tabular-nums; }

/* Número tipográfico em marca d'água (no lugar de ícones em caixinha) */
.stm-wm {
  display: block;
  font-size: clamp(4rem, 8vw, 8.5rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--stm-marca-dagua);
  user-select: none;
}

/* Riscado roxo ("o que não somos") — sempre em uma linha */
.stm-risco {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--stm-tom);
}
.stm-risco::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  top: 55%;
  height: max(3px, 0.05em);
  background: var(--stm-roxo);
}

/* Ícone de linha — traço fino, SEM caixa ou fundo em volta */
.stm-ico {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.stm-ico--grande { width: clamp(4rem, 6vw, 6rem); height: clamp(4rem, 6vw, 6rem); }
.stm-ico * { vector-effect: non-scaling-stroke; }


/* 4. BOTÕES E LINKS ======================================================== */
.stm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.6875rem;
  padding: 0 2rem;
  border: 0;
  border-radius: var(--stm-raio-pilula);
  background: var(--stm-verde);
  color: #000 !important;
  font: 400 0.95rem/1 var(--stm-fonte);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--stm-dur) var(--stm-curva), background-color var(--stm-dur-rapido) ease, box-shadow var(--stm-dur-lento) var(--stm-curva);
}
.stm-btn:hover {
  background: var(--stm-verde-claro);
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(11, 253, 129, 0.85), 0 0 60px rgba(11, 253, 129, 0.45);
}
.stm-btn svg { width: 20px; height: 20px; fill: currentColor; }
.stm-btn--sm { min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.8rem; }

/* Secundário: contorno fino em pílula (como "Meu próximo passo" da LP) */
.stm-btn--sec {
  background: transparent;
  color: var(--stm-texto) !important;
  box-shadow: inset 0 0 0 1px var(--stm-linha-forte);
}
.stm-btn--sec:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--stm-texto);
  transform: none;
}

/* Link de ação: verde, caixa alta, sublinhado que cresce */
.stm-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--stm-verde) !important;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
[data-tema="claro"] .stm-link, .tema-claro .stm-link { color: var(--stm-roxo) !important; }
.stm-link span { position: relative; }
.stm-link span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 0.4s var(--stm-curva);
}
.stm-link:hover span::after { transform: scaleX(1); }


/* 5. CARDS ================================================================= */
/* Regra da marca: fundo sólido (#252525 no escuro), SEM borda. Selecionado = roxo. */
.stm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--stm-e-5);
  padding: clamp(1.5rem, 3vw, 3rem);
  border-radius: var(--stm-raio-card);
  background: var(--stm-superficie);
  color: var(--stm-texto);
}
.stm-card--sel,
.stm-card[aria-selected="true"],
.stm-card[aria-checked="true"] {
  background: var(--stm-roxo);
  --stm-texto: #fff;
  --stm-texto-2: rgba(255, 255, 255, 0.85);
  --stm-texto-3: rgba(255, 255, 255, 0.7);
  --stm-marca-dagua: rgba(255, 255, 255, 0.3);
  --stm-linha: rgba(255, 255, 255, 0.25);
}
.stm-card--clicavel { cursor: pointer; transition: background-color var(--stm-dur) var(--stm-curva); }
.stm-card--clicavel:hover:not(.stm-card--sel) { background: var(--stm-superficie-alta); }
.stm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--stm-gutter);
}


/* 6. LISTAS, ETAPAS, MÉTRICAS ============================================= */
/* Lista em linhas finas com número pequeno */
.stm-lista { border-top: 1px solid var(--stm-linha); }
.stm-lista > li {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: clamp(0.9rem, 1.4vw, 1.25rem) 0;
  border-bottom: 1px solid var(--stm-linha);
}
.stm-lista-n {
  flex: none;
  width: 2rem;
  font-size: var(--stm-t-micro);
  letter-spacing: 0.12em;
  color: var(--stm-texto-3);
  font-variant-numeric: tabular-nums;
}
.stm-lista--grande > li { font-size: clamp(1.4rem, 2.6vw, 2.8rem); font-weight: 200; line-height: 1.12; letter-spacing: -0.03em; }

/* Etapas sobre uma linha com pontos */
.stm-etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  column-gap: var(--stm-gutter);
  row-gap: var(--stm-e-7);
  border-top: 1px solid var(--stm-linha-forte);
}
.stm-etapa { position: relative; padding: 2.25rem 1.5rem 0 0; }
.stm-etapa::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--stm-roxo);
  box-shadow: 0 0 0 6px rgba(109, 75, 255, 0.22);
}
.stm-secao--roxo .stm-etapa::before { background: #fff; box-shadow: none; }
.stm-etapa .stm-wm { margin: 0 0 1.25rem -0.05em; }
.stm-etapa .stm-h3 { margin-bottom: 0.85rem; }

/* Métrica (número grande + rótulo) */
.stm-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  column-gap: var(--stm-gutter);
  row-gap: var(--stm-e-6);
}
.stm-metrica { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--stm-linha-forte); }
.stm-metrica-v {
  font-size: clamp(2.6rem, 4.6vw, 5.2rem);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--stm-texto);
  white-space: nowrap;
}
.stm-metrica-v small { font-size: 0.4em; font-weight: 300; letter-spacing: 0; margin-left: 0.1em; }
.stm-metrica-r { font-size: var(--stm-t-legenda); color: var(--stm-texto-2); }


/* 7. TABELA E STATUS ======================================================= */
.stm-tabela { width: 100%; border-collapse: collapse; font-size: var(--stm-t-legenda); }
.stm-tabela th {
  padding: 0 1rem 0.85rem 0;
  border-bottom: 1px solid var(--stm-linha-forte);
  text-align: left;
  font-size: var(--stm-t-micro);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stm-texto-3);
}
.stm-tabela td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--stm-linha); color: var(--stm-texto); vertical-align: middle; }
.stm-tabela .stm-num, .stm-tabela th.stm-num { text-align: right; font-variant-numeric: tabular-nums; }
.stm-tabela tbody tr:hover td { background: color-mix(in srgb, var(--stm-texto) 3%, transparent); }

/* Status: bolinha + texto (nunca só a cor) */
.stm-status { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--stm-t-legenda); color: var(--stm-texto-2); white-space: nowrap; }
.stm-status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--stm-texto-2); }
.stm-status--roxo::before { background: var(--stm-roxo); border-color: var(--stm-roxo); }
.stm-status--positivo::before { background: var(--stm-positivo); border-color: var(--stm-positivo); }
.stm-status--atencao::before { background: var(--stm-atencao); border-color: var(--stm-atencao); }
.stm-status--alerta::before { background: var(--stm-alerta); border-color: var(--stm-alerta); }
.stm-status--critico::before { background: var(--stm-critico); border-color: var(--stm-critico); }
.stm-status--positivo, .stm-status--critico { color: var(--stm-texto); }

/* Variação (↑ ↓) em KPIs */
.stm-delta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--stm-t-legenda); font-weight: 400; font-variant-numeric: tabular-nums; }
.stm-delta--bom { color: var(--stm-positivo); }
.stm-delta--ruim { color: var(--stm-critico); }
.stm-delta--neutro { color: var(--stm-texto-2); }


/* 8. FORMULÁRIOS E FILTROS ================================================= */
.stm-campo { display: flex; flex-direction: column; gap: 0.5rem; }
.stm-campo label { font-size: var(--stm-t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stm-texto-3); }
.stm-input, .stm-select {
  min-height: 3rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--stm-superficie-alta);
  color: var(--stm-texto);
  font: 300 1rem var(--stm-fonte);
  box-shadow: inset 0 -1px 0 var(--stm-linha-forte);
  transition: box-shadow var(--stm-dur-rapido) ease;
}
.stm-input::placeholder { color: var(--stm-texto-3); }
.stm-input:focus, .stm-select:focus { outline: none; box-shadow: inset 0 -2px 0 var(--stm-roxo); }
.stm-select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* Controle segmentado (períodos: 7d · 30d · 90d) */
.stm-segmentado { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--stm-raio-pilula); background: var(--stm-superficie); }
.stm-segmentado button {
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--stm-raio-pilula);
  background: transparent;
  color: var(--stm-texto-2);
  font: 400 0.8rem var(--stm-fonte);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.stm-segmentado button:hover { color: var(--stm-texto); }
.stm-segmentado button[aria-pressed="true"] { background: var(--stm-roxo); color: #fff; }
.stm-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stm-e-4); }


/* 9. NAVEGAÇÃO ============================================================= */
.stm-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--stm-fundo) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--stm-linha);
}
.stm-topo-in { display: flex; align-items: center; justify-content: space-between; gap: var(--stm-e-5); min-height: 4.25rem; }
.stm-topo-logo { height: 1.6rem; width: auto; }
.stm-menu { display: flex; gap: var(--stm-e-6); font-size: 0.85rem; }
.stm-menu a { color: var(--stm-texto-2); text-decoration: none; }
.stm-menu a:hover, .stm-menu a[aria-current="page"] { color: var(--stm-texto); }
@media (max-width: 760px) { .stm-menu { display: none; } }
.stm-rodape { padding-block: var(--stm-e-6); font-size: var(--stm-t-micro); color: var(--stm-texto-3); }


/* 10. DASHBOARD E GRÁFICOS ================================================= */
.stm-app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.stm-lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--stm-e-7);
  padding: var(--stm-e-6) var(--stm-e-5);
  border-right: 1px solid var(--stm-linha);
}
.stm-lateral nav { display: flex; flex-direction: column; gap: 2px; }
.stm-lateral nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  color: var(--stm-texto-2);
  font-size: 0.9rem;
  text-decoration: none;
}
.stm-lateral nav a:hover { color: var(--stm-texto); background: var(--stm-superficie); }
.stm-lateral nav a[aria-current="page"] { color: #fff; background: var(--stm-roxo); }
.stm-conteudo { padding: var(--stm-e-7) clamp(1.5rem, 3vw, 3rem) var(--stm-e-9); display: flex; flex-direction: column; gap: var(--stm-e-6); }
@media (max-width: 900px) {
  .stm-app { grid-template-columns: 1fr; }
  .stm-lateral { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--stm-linha); }
  .stm-lateral nav { flex-direction: row; }
}

/* KPI (número principal + rótulo + variação) */
.stm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--stm-gutter); }
.stm-kpi { gap: var(--stm-e-3); padding: var(--stm-e-5) var(--stm-e-5) var(--stm-e-5); }
.stm-kpi-v { font-size: clamp(2.4rem, 3.4vw, 3.4rem); font-weight: 200; line-height: 1; letter-spacing: -0.045em; color: var(--stm-texto); }
.stm-kpi-v small { font-size: 0.42em; letter-spacing: 0; margin-left: 0.15em; color: var(--stm-texto-2); }

/* Bloco de gráfico */
.stm-grafico { gap: var(--stm-e-4); }
.stm-grafico-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--stm-e-4); flex-wrap: wrap; }
.stm-grafico-area { position: relative; width: 100%; }
.stm-grafico svg { width: 100%; height: auto; overflow: visible; }
.stm-legenda-g { display: flex; flex-wrap: wrap; gap: var(--stm-e-5); font-size: var(--stm-t-legenda); color: var(--stm-texto-2); }
.stm-legenda-g span { display: inline-flex; align-items: center; gap: 0.5rem; }
.stm-legenda-g i { width: 12px; height: 3px; border-radius: 2px; background: currentColor; }

/* Elementos de SVG */
.stm-eixo text { fill: var(--stm-texto-3); font: 400 11px var(--stm-fonte); font-variant-numeric: tabular-nums; }
.stm-eixo line, .stm-grade-h { stroke: var(--stm-linha); stroke-width: 1; shape-rendering: crispEdges; }
.stm-base { stroke: var(--stm-linha-forte); stroke-width: 1; shape-rendering: crispEdges; }
.stm-rotulo-g { fill: var(--stm-texto); font: 400 12px var(--stm-fonte); font-variant-numeric: tabular-nums; }
.stm-mira { stroke: var(--stm-texto-3); stroke-width: 1; stroke-dasharray: 2 3; }

/* Tooltip */
.stm-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  min-width: 10rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--stm-superficie-alta);
  color: var(--stm-texto);
  font-size: 0.8rem;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--stm-dur-rapido) ease, transform var(--stm-dur-rapido) ease;
}
.stm-tooltip.is-on { opacity: 1; transform: none; }
.stm-tooltip .t { font-size: var(--stm-t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stm-texto-3); margin-bottom: 0.35rem; }
.stm-tooltip .l { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.stm-tooltip .l span:first-child { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--stm-texto-2); }
.stm-tooltip .l i { width: 8px; height: 8px; border-radius: 50%; }

/* Acessibilidade de gráficos: tabela alternativa */
.stm-ver-tabela summary { cursor: pointer; font-size: var(--stm-t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stm-texto-3); list-style: none; }
.stm-ver-tabela summary::-webkit-details-marker { display: none; }
.stm-ver-tabela[open] summary { margin-bottom: var(--stm-e-4); }

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