/* ==========================================================================
   Ellos ConnecTI — Painel do sistema ("mock")
   Requer ellos-ds.css. Par com ellos-mock.js.
   Prefixo: ec-mock   |  Versão: 1.0.0

   Uma janela falsa com abas, que se anima sozinha e não exige clique. Serve
   para ilustrar um software quando não há print do sistema real — e sai de
   cena assim que houver, porque imagem verdadeira vale mais que ilustração.

   Os painéis têm formatos de dado diferentes de propósito: indicadores com
   barras, indicadores com linha, e conversa. Um formato genérico que
   servisse aos três viraria uma caixa de texto que aceita qualquer coisa.
   ========================================================================== */

.ec-mock {
  background: var(--ec-white);
  border-radius: var(--ec-r-lg);
  box-shadow: var(--ec-shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

/* --------------------------------------------------------------------------
   Barra da janela
   -------------------------------------------------------------------------- */
.ec-mock__bar {
  display: flex;
  align-items: center;
  gap: var(--ec-sp-3);
  padding: var(--ec-sp-3) var(--ec-sp-4);
  background: var(--ec-blue-900);
  color: var(--ec-white);
}
.ec-mock__dots { display: flex; gap: 5px; }
.ec-mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.ec-mock__name { font-size: var(--ec-fs-xs); letter-spacing: .04em; opacity: .82; min-width: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Abas

   As colunas são minmax(0, 1fr) e não 1fr: com rótulo longo, o mínimo
   automático da coluna é a largura do texto, e o painel inteiro estoura a
   caixa. Mesma armadilha do grid que já custou uma versão neste projeto.
   -------------------------------------------------------------------------- */
.ec-mock__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-bottom: 1px solid rgba(1, 63, 182, .12);
  background: var(--ec-blue-050);
}
.ec-mock__tab {
  font: inherit;
  font-size: var(--ec-fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ec-sp-2);
  padding: var(--ec-sp-3) var(--ec-sp-2);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ec-ink-400);
  border-bottom: 3px solid transparent;
  min-width: 0;
  transition: color var(--ec-dur) var(--ec-ease),
              border-color var(--ec-dur) var(--ec-ease),
              background var(--ec-dur) var(--ec-ease);
}
.ec-mock__tab span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.ec-mock__tab svg { width: 1.15rem; height: 1.15rem; flex: none; }
.ec-mock__tab.is-on { color: var(--ec-blue-600); border-bottom-color: var(--ec-blue-600); background: var(--ec-white); }
.ec-mock__tab:focus-visible { outline: 3px solid var(--ec-yellow-400); outline-offset: -3px; }

/* --------------------------------------------------------------------------
   Palco

   Painéis empilhados em posição absoluta, com altura mínima fixa: sem isso
   a caixa encolhe e cresce a cada troca de aba, e o bloco inteiro pula.
   -------------------------------------------------------------------------- */
.ec-mock__stage { position: relative; min-height: 20rem; padding: var(--ec-sp-5); }
.ec-mock__panel {
  position: absolute;
  inset: var(--ec-sp-5);
  display: grid;
  gap: var(--ec-sp-5);
  align-content: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 380ms var(--ec-ease), transform 380ms var(--ec-ease), visibility 0s linear 380ms;
}
.ec-mock__panel.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 380ms var(--ec-ease), transform 380ms var(--ec-ease), visibility 0s;
}

/* --------------------------------------------------------------------------
   Indicadores numéricos
   -------------------------------------------------------------------------- */
.ec-mock__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--ec-sp-3); }
.ec-mock__kpis div { background: var(--ec-blue-050); border-radius: var(--ec-r-sm); padding: var(--ec-sp-3); display: grid; gap: 2px; min-width: 0; }
.ec-mock__kpis b {
  font-family: var(--ec-font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1;
  color: var(--ec-blue-600);
  overflow-wrap: anywhere;
}
.ec-mock__kpis span { font-size: var(--ec-fs-xs); color: var(--ec-ink-400); line-height: 1.3; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Barras
   -------------------------------------------------------------------------- */
.ec-mock__bars { display: flex; align-items: flex-end; gap: var(--ec-sp-2); height: 9rem; }
.ec-mock__bars span {
  flex: 1;
  min-width: 0;
  height: 0;
  position: relative;
  border-radius: var(--ec-r-sm) var(--ec-r-sm) 0 0;
  background: linear-gradient(180deg, var(--ec-blue-400), var(--ec-blue-600));
  transition: height 700ms var(--ec-ease);
}
.ec-mock__panel.is-on .ec-mock__bars span { height: var(--h); }
.ec-mock__bars span:nth-child(1) { transition-delay: 60ms; }
.ec-mock__bars span:nth-child(2) { transition-delay: 130ms; }
.ec-mock__bars span:nth-child(3) { transition-delay: 200ms; }
.ec-mock__bars span:nth-child(4) { transition-delay: 270ms; }
.ec-mock__bars span:nth-child(5) { transition-delay: 340ms; }
.ec-mock__bars span:nth-child(6) { transition-delay: 410ms; }
.ec-mock__bars i {
  position: absolute;
  left: 50%;
  bottom: -1.35rem;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 10px;
  color: var(--ec-ink-400);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Linha que se desenha
   -------------------------------------------------------------------------- */
.ec-mock__spark { width: 100%; height: 7rem; display: block; margin-top: var(--ec-sp-4); }
.ec-mock__spark-line {
  fill: none;
  stroke: var(--ec-blue-600);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1200ms var(--ec-ease) 160ms;
}
.ec-mock__spark-fill { fill: rgba(0, 120, 214, .12); opacity: 0; transition: opacity 700ms var(--ec-ease) 700ms; }
.ec-mock__panel.is-on .ec-mock__spark-line { stroke-dashoffset: 0; }
.ec-mock__panel.is-on .ec-mock__spark-fill { opacity: 1; }
.ec-mock__foot { margin: 0; font-size: var(--ec-fs-xs); color: var(--ec-ink-400); }

/* --------------------------------------------------------------------------
   Conversa
   -------------------------------------------------------------------------- */
.ec-mock__chat { display: grid; gap: var(--ec-sp-2); align-content: start; }
.ec-mock__msg {
  margin: 0;
  font-size: var(--ec-fs-sm);
  line-height: 1.45;
  padding: var(--ec-sp-3);
  border-radius: var(--ec-r-md);
  max-width: 84%;
  opacity: 0;
  transform: translateY(8px);
  overflow-wrap: anywhere;
}
.ec-mock__msg--in { background: var(--ec-blue-050); justify-self: start; border-bottom-left-radius: 4px; }
.ec-mock__msg--out { background: var(--ec-blue-600); color: var(--ec-white); justify-self: end; border-bottom-right-radius: 4px; }
.ec-mock__panel.is-on .ec-mock__msg { animation: ec-mock-in 420ms var(--ec-ease) forwards; }
.ec-mock__panel.is-on .ec-mock__msg:nth-child(1) { animation-delay: 120ms; }
.ec-mock__panel.is-on .ec-mock__msg:nth-child(2) { animation-delay: 640ms; }
.ec-mock__panel.is-on .ec-mock__msg:nth-child(3) { animation-delay: 1160ms; }
.ec-mock__panel.is-on .ec-mock__msg:nth-child(4) { animation-delay: 1680ms; }
.ec-mock__panel.is-on .ec-mock__msg:nth-child(5) { animation-delay: 2200ms; }
.ec-mock__panel.is-on .ec-mock__msg:nth-child(6) { animation-delay: 2720ms; }

@keyframes ec-mock-in { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Telas estreitas

   Duas correções vindas de medição, não de palpite.

   1. Com três abas em 390px sobram ~103px por aba, e "Atendimento" a 14px
      mede mais que isso: a palavra quebrava no meio, virando "Atendime /
      nto". O ícone sai primeiro — ele acompanha um rótulo que já diz tudo.

   2. Os rótulos das barras são absolutos, centrados e sem quebra. Com seis
      barras em 358px, cada uma tem ~50px e "Referência" mede 55: os textos
      encavalavam. Na vertical cada rótulo ocupa a largura da própria barra,
      e o sentido de leitura continua natural (de baixo para cima).
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .ec-mock__tab {
    font-size: var(--ec-fs-xs);
    padding-inline: var(--ec-sp-1);
    gap: var(--ec-sp-1);
  }
  .ec-mock__tab svg { display: none; }

  .ec-mock__bars { height: 8rem; margin-bottom: 2.5rem; }
  .ec-mock__bars i {
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    transform-origin: center;
    bottom: -0.4rem;
    translate: 0 100%;
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   Sem movimento

   Painel absoluto não empilha, então esconder os inativos continua sendo
   necessário: só o que muda é como eles entram. Sem isso, quem tem
   "reduzir movimento" ligado veria os três painéis sobrepostos.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ec-mock__panel,
  .ec-mock__panel.is-on,
  .ec-mock__tab,
  .ec-mock__bars span,
  .ec-mock__spark-line,
  .ec-mock__spark-fill { transition: none; }

  .ec-mock__panel { transform: none; }
  .ec-mock__panel.is-on .ec-mock__msg { animation: none; opacity: 1; transform: none; }
  .ec-mock__spark-line { stroke-dashoffset: 0; }
  .ec-mock__spark-fill { opacity: 1; }
}