/**

 * Template 3 — Gráficos Animados (donut + barras verticais)

 * Solides Profiler Feed — v14.1.1

 * Escopo: tudo prefixado com #spftfm-wrapper-t3 para não vazar estilos.

 */

/* ==========================================================

   Wrapper / base

   ========================================================== */

#spftfm-wrapper-t3 {

  position: relative;

  width: 100%;

  height: 100%;

  min-height: 400px;

  overflow: hidden;

  background: var(--spftfm-bg, #ffffff);

  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  --spftfm-red:    #d7263d;

  --spftfm-yellow: #ffb400;

  --spftfm-green:  #0a9950;

  --spftfm-blue:   #2364e8;

  --spftfm-track:  #ececec;

  --spftfm-text:   #2b2b3a;

}

#spftfm-wrapper-t3 *,

#spftfm-wrapper-t3 *::before,

#spftfm-wrapper-t3 *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

/* ==========================================================

   Slides (carrossel)

   ========================================================== */

#spftfm-wrapper-t3 .spftfm-slide {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2%;

  padding: 3% 4%;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.6s ease, visibility 0.6s ease;

  z-index: 1;

}

#spftfm-wrapper-t3 .spftfm-slide.is-active {

  opacity: 1;

  visibility: visible;

  z-index: 2;

}

#spftfm-wrapper-t3 .spftfm-slide.has-bg {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}

/* ==========================================================

   Colunas laterais de mascotes

   ========================================================== */

#spftfm-wrapper-t3 .side-img-left,

#spftfm-wrapper-t3 .side-img-right {

  flex: 0 0 18%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-around;

  gap: 4%;

  height: 100%;

  min-width: 0;

}

#spftfm-wrapper-t3 .spftfm-slide-image {

  display: block;

  width: 100%;

  max-width: 220px;

  max-height: 38vh;

  height: auto;

  object-fit: contain;

  opacity: 1;

}

/* ==========================================================

   Área central (texto / imagem custom)

   ========================================================== */

#spftfm-wrapper-t3 .center-text {

  flex: 1 1 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4%;

  height: 100%;

  min-width: 0;

  text-align: center;

}

#spftfm-wrapper-t3 .spftfm-slide-title {

  font-weight: 800;

  font-size: clamp(1.2rem, 5vmin, 3.2rem);

  line-height: 1.2;

  color: var(--spftfm-text);

  overflow-wrap: break-word;

  max-width: 100%;

}

#spftfm-wrapper-t3 .spftfm-custom-image {

  display: block;

  max-width: 100%;

  max-height: 42vh;

  height: auto;

  object-fit: contain;

}

/* ==========================================================

   Layout DONUT

   ========================================================== */

#spftfm-wrapper-t3 .layout-donut .spftfm-slide-image {

  max-height: 60vh;

}

#spftfm-wrapper-t3 .spftfm-donut-wrap {

  position: relative;

  width: min(60vh, 42vw);

  max-width: 480px;

  aspect-ratio: 1 / 1;

  margin: 0 auto;

}

#spftfm-wrapper-t3 .spftfm-donut-wrap svg {

  display: block;

  width: 100%;

  height: 100%;

  transform: rotate(-90deg); /* segmentos começam no topo */

}

#spftfm-wrapper-t3 .donut-track {

  fill: none;

  stroke: var(--spftfm-track);

  stroke-width: 14;

}

#spftfm-wrapper-t3 .donut-seg {

  fill: none;

  stroke-width: 14;

  stroke-linecap: butt;

  stroke-dasharray: 0 251.327;

  stroke-dashoffset: 0;

  transition: stroke-dasharray 1.2s cubic-bezier(0.4, 0, 0.2, 1),

              stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1),

              opacity 0.5s ease;

}

#spftfm-wrapper-t3 .donut-seg.seg-executor    { stroke: var(--spftfm-red); }

#spftfm-wrapper-t3 .donut-seg.seg-comunicador { stroke: var(--spftfm-yellow); }

#spftfm-wrapper-t3 .donut-seg.seg-planejador  { stroke: var(--spftfm-green); }

#spftfm-wrapper-t3 .donut-seg.seg-analista    { stroke: var(--spftfm-blue); }

/* Perfil em destaque: demais segmentos esmaecidos */

#spftfm-wrapper-t3 .layout-donut[data-profile-key="executor"]    .donut-seg:not(.seg-executor),

#spftfm-wrapper-t3 .layout-donut[data-profile-key="comunicador"] .donut-seg:not(.seg-comunicador),

#spftfm-wrapper-t3 .layout-donut[data-profile-key="planejador"]  .donut-seg:not(.seg-planejador),

#spftfm-wrapper-t3 .layout-donut[data-profile-key="analista"]    .donut-seg:not(.seg-analista) {

  opacity: 0.22;

}

#spftfm-wrapper-t3 .donut-center {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2%;

  text-align: center;

  pointer-events: none;

  padding: 18%;

}

#spftfm-wrapper-t3 .donut-pct {

  font-weight: 900;

  font-size: clamp(1.6rem, 8vmin, 4.5rem);

  line-height: 1;

  color: var(--spftfm-text);

}

#spftfm-wrapper-t3 .donut-name {

  font-weight: 700;

  font-size: clamp(0.8rem, 2.6vmin, 1.6rem);

  color: var(--spftfm-text);

  opacity: 0.85;

}

#spftfm-wrapper-t3 .layout-donut[data-profile-key="executor"]    .donut-pct { color: var(--spftfm-red); }

#spftfm-wrapper-t3 .layout-donut[data-profile-key="comunicador"] .donut-pct { color: var(--spftfm-yellow); }

#spftfm-wrapper-t3 .layout-donut[data-profile-key="planejador"]  .donut-pct { color: var(--spftfm-green); }

#spftfm-wrapper-t3 .layout-donut[data-profile-key="analista"]    .donut-pct { color: var(--spftfm-blue); }

/* ==========================================================

   Layout BARRAS VERTICAIS

   ========================================================== */

#spftfm-wrapper-t3 .spftfm-chart-bars {

  flex: 1 1 auto;

  display: flex;

  align-items: stretch;

  justify-content: center;

  gap: clamp(14px, 4vw, 56px);

  height: 82%;

  max-height: 82%;

  min-height: 260px;

  width: 100%;

  min-width: 0;

}

#spftfm-wrapper-t3 .chart-bar {

  flex: 0 1 clamp(64px, 16%, 180px);

  min-width: 70px;

  display: flex;

  flex-direction: column;

  align-items: center;

  height: 100%;

  min-height: 0;

}

/* Percentual no topo */

#spftfm-wrapper-t3 .chart-pct {

  flex: 0 0 auto;

  font-weight: 900;

  font-size: clamp(1rem, 4.2vmin, 2.4rem);

  line-height: 1.1;

  margin-bottom: clamp(6px, 1.5vh, 16px);

  white-space: nowrap;

}

/* Trilha — flex:1 + min-height garante altura sempre */

#spftfm-wrapper-t3 .chart-track {

  position: relative;

  flex: 1 1 auto;

  width: clamp(44px, 60%, 90px);

  min-height: 120px;

  background: var(--spftfm-track);

  border-radius: 16px;

  overflow: hidden;

}

/* Preenchimento animado de baixo para cima */

#spftfm-wrapper-t3 .chart-fill {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 0%;

  border-radius: 16px;

  transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);

}

/* Nome do perfil embaixo */

#spftfm-wrapper-t3 .chart-name {

  flex: 0 0 auto;

  font-weight: 700;

  font-size: clamp(0.6rem, 1.9vmin, 1.3rem);

  line-height: 1.2;

  margin-top: clamp(6px, 1.2vh, 14px);

  max-width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  text-align: center;

  padding: 0 2px;

}

/* Cores por perfil */

#spftfm-wrapper-t3 .chart-bar[data-profile-key="executor"]    .chart-fill { background: var(--spftfm-red); }

#spftfm-wrapper-t3 .chart-bar[data-profile-key="comunicador"] .chart-fill { background: var(--spftfm-yellow); }

#spftfm-wrapper-t3 .chart-bar[data-profile-key="planejador"]  .chart-fill { background: var(--spftfm-green); }

#spftfm-wrapper-t3 .chart-bar[data-profile-key="analista"]    .chart-fill { background: var(--spftfm-blue); }

#spftfm-wrapper-t3 .chart-bar[data-profile-key="executor"]    .chart-pct,

#spftfm-wrapper-t3 .chart-bar[data-profile-key="executor"]    .chart-name { color: var(--spftfm-red); }

#spftfm-wrapper-t3 .chart-bar[data-profile-key="comunicador"] .chart-pct,

#spftfm-wrapper-t3 .chart-bar[data-profile-key="comunicador"] .chart-name { color: var(--spftfm-yellow); }

#spftfm-wrapper-t3 .chart-bar[data-profile-key="planejador"]  .chart-pct,

#spftfm-wrapper-t3 .chart-bar[data-profile-key="planejador"]  .chart-name { color: var(--spftfm-green); }

#spftfm-wrapper-t3 .chart-bar[data-profile-key="analista"]    .chart-pct,

#spftfm-wrapper-t3 .chart-bar[data-profile-key="analista"]    .chart-name { color: var(--spftfm-blue); }

/* ==========================================================

   Logo "Profilerômetro" (slide 1)

   v14.1.1 FIX: faltavam as cores dos spans — a palavra ficava

   monocromática. Agora colorida igual ao Template 2, seguindo

   as variáveis de cor dos perfis.

   ========================================================== */

#spftfm-wrapper-t3 .spftfm-logo-text {

  font-weight: 900;

  font-size: clamp(1.5rem, 7vmin, 5rem);

  letter-spacing: -0.02em;

  line-height: 1.3;

  padding: 0.12em 0.05em;

  margin: 0;

  white-space: nowrap;

}

#spftfm-wrapper-t3 .spftfm-logo-text .logo-pro   { color: var(--spftfm-red); }

#spftfm-wrapper-t3 .spftfm-logo-text .logo-filer { color: var(--spftfm-yellow); }

#spftfm-wrapper-t3 .spftfm-logo-text .logo-ome   { color: var(--spftfm-green); }

#spftfm-wrapper-t3 .spftfm-logo-text .logo-tro   { color: var(--spftfm-blue); }

/* ==========================================================

   Container queries (ajuste fino quando suportado)

   ========================================================== */

@supports (height: 1cqh) {

  #spftfm-wrapper-t3#spftfm-wrapper-t3 { container-type: size; }

  #spftfm-wrapper-t3 .spftfm-slide-image { max-height: 38cqh; }

  #spftfm-wrapper-t3 .layout-donut .spftfm-slide-image { max-height: 60cqh; }

  #spftfm-wrapper-t3 .spftfm-custom-image { max-height: 42cqh; }

  #spftfm-wrapper-t3 .spftfm-slide-title { font-size: min(9cqmin, 24cqh); }

  #spftfm-wrapper-t3 .spftfm-donut-wrap  { width: min(80cqh, 60cqw); }

  #spftfm-wrapper-t3 .donut-pct  { font-size: min(11cqmin, 16cqh); }

  #spftfm-wrapper-t3 .donut-name { font-size: min(4cqmin, 6cqh); }

  #spftfm-wrapper-t3 .chart-pct  { font-size: min(6cqmin, 9cqh); }

  #spftfm-wrapper-t3 .chart-name { font-size: min(2.6cqmin, 8cqh); }

}

/* ==========================================================

   Telas estreitas

   ========================================================== */

@media (max-width: 640px) {

  #spftfm-wrapper-t3 .side-img-left,

  #spftfm-wrapper-t3 .side-img-right { display: none; }

  #spftfm-wrapper-t3 .spftfm-slide { justify-content: center; }

  #spftfm-wrapper-t3 .spftfm-chart-bars { gap: 8px; min-height: 220px; }

  #spftfm-wrapper-t3 .chart-bar { min-width: 58px; }

  #spftfm-wrapper-t3 .chart-track { width: clamp(34px, 60%, 60px); min-height: 100px; }

}

/* ==========================================================

   Animações de entrada + flutuação

   ========================================================== */

@keyframes spftfm3-in-left {

  from { opacity: 0; transform: translateX(-130%) rotate(-12deg) scale(0.7); }

  to   { opacity: 1; transform: translateX(0) rotate(0) scale(1); }

}

@keyframes spftfm3-in-right {

  from { opacity: 0; transform: translateX(130%) rotate(12deg) scale(0.7); }

  to   { opacity: 1; transform: translateX(0) rotate(0) scale(1); }

}

@keyframes spftfm3-in-up {

  from { opacity: 0; transform: translateY(28%) scale(0.96); }

  to   { opacity: 1; transform: translateY(0) scale(1); }

}

@keyframes spftfm3-float {

  0%, 100% { translate: 0 0; }

  50%      { translate: 0 -4%; }

}

@keyframes spftfm3-pop {

  0%   { opacity: 0; transform: scale(0.6); }

  70%  { transform: scale(1.06); }

  100% { opacity: 1; transform: scale(1); }

}

#spftfm-wrapper-t3 .spftfm-slide.is-active .side-img-left .spftfm-slide-image {

  animation-name: spftfm3-in-left, spftfm3-float;

  animation-duration: var(--spftfm-anim-dur, 0.8s), 5s;

  animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1), ease-in-out;

  animation-iteration-count: 1, infinite;

  animation-fill-mode: backwards, none;

}

#spftfm-wrapper-t3 .spftfm-slide.is-active .side-img-right .spftfm-slide-image {

  animation-name: spftfm3-in-right, spftfm3-float;

  animation-duration: var(--spftfm-anim-dur, 0.8s), 5s;

  animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1), ease-in-out;

  animation-iteration-count: 1, infinite;

  animation-fill-mode: backwards, none;

}

/* Stagger — delays de entrada E flutuação (dois valores) */

#spftfm-wrapper-t3 .spftfm-slide.is-active .side-img-left  .spftfm-slide-image:nth-child(1) { animation-delay: 0.10s, 1.0s; }

#spftfm-wrapper-t3 .spftfm-slide.is-active .side-img-right .spftfm-slide-image:nth-child(1) { animation-delay: 0.22s, 1.4s; }

#spftfm-wrapper-t3 .spftfm-slide.is-active .side-img-left  .spftfm-slide-image:nth-child(2) { animation-delay: 0.34s, 1.8s; }

#spftfm-wrapper-t3 .spftfm-slide.is-active .side-img-right .spftfm-slide-image:nth-child(2) { animation-delay: 0.46s, 2.2s; }

#spftfm-wrapper-t3 .spftfm-slide.is-active .center-text {

  animation: spftfm3-in-up 0.7s ease-out 0.25s backwards;

}

#spftfm-wrapper-t3 .spftfm-slide.is-active .donut-center {

  animation: spftfm3-pop 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 0.9s backwards;

}

/* ==========================================================

   Acessibilidade

   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #spftfm-wrapper-t3 .spftfm-slide,

  #spftfm-wrapper-t3 .donut-seg,

  #spftfm-wrapper-t3 .chart-fill { transition: none; }

  #spftfm-wrapper-t3 .spftfm-slide.is-active .spftfm-slide-image,

  #spftfm-wrapper-t3 .spftfm-slide.is-active .center-text,

  #spftfm-wrapper-t3 .spftfm-slide.is-active .donut-center { animation: none; }

}

/* ==========================================================

   v14.1.2 FIX — Slide de barras (4 perfis): nome SEMPRE completo

   Causa do corte: .chart-name tinha overflow:hidden + ellipsis e

   a coluna (.chart-bar) era mais estreita que o nome "Comunicador".

   Solução:

     1. Nome pode ser mais largo que a trilha (width:max-content +

        overflow:visible) — ele fica centralizado sob a barra.

     2. Fim do ellipsis: nunca mais "Comuni…".

     3. Fonte recalibrada para o nome mais longo caber no espaço

        entre colunas (o gap de clamp(14px,4vw,56px) dá a folga).

   ========================================================== */

#spftfm-wrapper-t3 .chart-name {

  white-space: nowrap;      /* nome em uma linha só... */

  overflow: visible;        /* ...e NUNCA cortado */

  text-overflow: clip;      /* desativa o "…" */

  max-width: none;          /* não limita à largura da coluna */

  width: max-content;       /* ocupa a largura exata do texto */

  font-size: clamp(0.6rem, 1.7vmin, 1.1rem);

}

/* Colunas dividem o espaço igualmente — todas com a mesma largura,

   com folga suficiente para "Comunicador" e "Planejador". */

#spftfm-wrapper-t3 .chart-bar {

  flex: 1 1 0;

  min-width: 84px;

  max-width: 220px;

}

/* Ajuste fino quando o navegador suporta container queries

   (sobrescreve o min(2.6cqmin, 8cqh) do bloco @supports acima). */

@supports (height: 1cqh) {

  #spftfm-wrapper-t3 .chart-name {

    font-size: min(2.2cqmin, 5cqh);

  }

}

/* Telas estreitas: fonte um pouco menor mantém o nome inteiro. */

@media (max-width: 640px) {

  #spftfm-wrapper-t3 .chart-name {

    font-size: clamp(0.55rem, 2.6vw, 0.85rem);

  }

}