/* MRO Manager: prints de app em HTML e CSS (.mock-*) e palco fixo no scroll (.dash).
   Arquivo COMPARTILHADO, carregado só pelas páginas que mostram um print.
   O print é decorativo (aria-hidden no .mock-app, com uma frase em .sr-only ao lado).
   Escala: tudo dentro do .mock-app é em em, e o font-size do .mock-app é 1% da
   largura do print (--mw), então o print inteiro encolhe junto, sem JS. Em tela
   estreita a largura mínima corta o print pela direita em vez de encolher mais.
   Referência de medida: 1em = 19,2 px do desenho de 1920 px do app. */

.mock-wrap { container-type: inline-size; width: 100%; }
.mock-frame {
  --mw: max(100cqw, 46rem);
  position: relative; overflow: hidden; width: 100%;
  height: calc(var(--mw) * .492);
  border: 1px solid var(--c-line-2); border-radius: var(--r-ui);
  background: #09090b; box-shadow: var(--sh-2);
  content-visibility: auto; /* fora da tela o navegador pula estilo e layout das centenas de nós do print */
}
.mock-app {
  --m-card: #18181b; --m-line: #232326; --m-mute: #a1a1aa; --m-dim: #71717a;
  --m-blue: #3987e5; --m-green: #199e70; --m-orange: #d95926; --m-violet: #8b5cf6; --m-ok: #34d399;
  position: absolute; inset: 0 auto 0 0; width: var(--mw); display: flex;
  font-family: var(--f-body); font-size: calc(var(--mw) / 100); line-height: 1.3;
  color: #fafafa; text-align: left; user-select: none; pointer-events: none;
}
.mock-app ul { list-style: none; }
.mock-app p { line-height: 1.3; text-wrap: nowrap; }
.mock-app i { font-style: normal; display: block; }
.mock-app b { font-weight: 500; }
.mock-i { width: 1em; height: 1em; flex: none; display: block; }
.mock-num { font-variant-numeric: tabular-nums; }
.mock-app .b { background: var(--m-blue); }
.mock-app .g { background: var(--m-green); }
.mock-app .o { background: var(--m-orange); }
.mock-app .v { background: var(--m-violet); }

/* ---- Menu lateral ---- */
.mock-side { flex: none; width: 11.6em; display: flex; flex-direction: column; border-right: 1px solid var(--m-line); }
.mock-brand { height: 2.9em; padding-inline: .8em; display: flex; align-items: center; border-bottom: 1px solid var(--m-line); }
.mock-brand img { width: 6.8em; height: auto; }
.mock-nav { padding: .4em; display: grid; gap: .1em; align-content: start; }
.mock-nav__i { display: flex; align-items: center; gap: .8em; height: 2.53em; padding-inline: .93em; border-radius: .53em; font-size: .75em; font-weight: 500; color: var(--m-mute); }
.mock-nav__i .mock-i { width: 1.1em; height: 1.1em; }
.mock-nav__i.is-on { background: var(--c-brand); color: #fff; }
.mock-side__foot { margin-top: auto; padding: .5em .8em .6em; border-top: 1px solid var(--m-line); }
.mock-side__foot li { display: flex; align-items: center; gap: .75em; height: 2.4em; font-size: .73em; font-weight: 500; color: #d4d4d8; }
.mock-side__foot .mock-i { width: 1.15em; height: 1.15em; color: var(--m-mute); }
.mock-av { flex: none; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: #27272a; color: var(--m-mute); font-size: .6em; font-weight: 600; }
.mock-user { font-weight: 400; }
.mock-user .mock-av { width: 1.7em; height: 1.7em; font-size: .75em; background: rgba(122, 28, 255, .28); color: #d6c2ff; }

/* ---- Conteúdo ---- */
.mock-main { flex: 1; min-width: 0; padding: 1.25em 1.2em 0 1.3em; overflow: hidden; }
.mock-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1em; }
.mock-h1 { font-size: 1.3em; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.mock-sub { margin-top: .3em; font-size: .73em; color: var(--m-mute); }
.mock-btn { display: inline-flex; align-items: center; gap: .55em; height: 2.1em; padding-inline: 1.1em; border-radius: .4em; background: var(--c-brand); color: #fff; font-size: .7em; font-weight: 600; white-space: nowrap; }
.mock-btn .mock-i { width: 1.2em; height: 1.2em; }
.mock-bar { display: flex; align-items: center; gap: .55em; margin-bottom: 1.05em; }
.mock-chips { display: inline-flex; gap: .1em; padding: .15em; border-radius: .6em; background: #27272a; font-size: .73em; }
.mock-chips span { display: block; padding: .5em .95em; border-radius: .45em; line-height: 1; color: var(--m-mute); white-space: nowrap; }
.mock-chips .is-on { background: #09090b; color: #fafafa; box-shadow: 0 0 0 1px #3f3f46 inset; }
.mock-select { display: inline-flex; align-items: center; justify-content: space-between; width: 16em; height: 2.26em; padding-inline: .9em; border: 1px solid #27272a; border-radius: .5em; background: #141416; font-size: .73em; white-space: nowrap; }
.mock-select .mock-i { width: .9em; height: .9em; color: var(--m-mute); }
.mock-upd { margin-left: auto; font-size: .62em; color: var(--m-mute); white-space: nowrap; }

.mock-card { background: var(--m-card); border: 1px solid var(--m-line); border-radius: .5em; padding: .85em; min-width: 0; }
.mock-t { font-size: .85em; font-weight: 500; }
.mock-s { margin-top: .3em; font-size: .73em; color: var(--m-mute); }

/* Cartões de número */
.mock-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; margin-bottom: .85em; }
.mock-kpi { position: relative; min-height: 7.7em; }
.mock-kpi__l { font-size: .65em; color: #d4d4d8; }
.mock-kpi__ic { position: absolute; top: .85em; right: .85em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: .45em; background: #27272a; color: var(--m-mute); font-size: 1em; }
.mock-kpi__ic .mock-i { width: .8em; height: .8em; }
.mock-kpi__v { margin-top: .75em; font-size: 1.65em; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.mock-kpi__v small { margin-left: .3em; font-size: .45em; font-weight: 400; color: var(--m-mute); letter-spacing: 0; }
.mock-kpi__s { display: flex; align-items: center; margin-top: .6em; font-size: .62em; color: var(--m-mute); }
.mock-kpi__s + .mock-kpi__s { margin-top: .35em; }
.mock-up { display: inline-flex; align-items: center; gap: .3em; margin-right: .5em; color: var(--m-ok); }
.mock-up b { font-weight: 600; }
.mock-up .mock-i { width: 1.1em; height: 1.1em; }

/* Linhas de cartões */
.mock-row { display: grid; gap: .8em; margin-bottom: .85em; }
.mock-row--chart { grid-template-columns: minmax(0, 2.02fr) minmax(0, 1fr); height: 22em; }
.mock-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mock-card__head { display: flex; justify-content: space-between; align-items: flex-start; }
.mock-chips--sm { font-size: .73em; }
.mock-legend { display: flex; gap: 1em; margin-top: 1.1em; font-size: .65em; color: var(--m-mute); }
.mock-legend span { display: inline-flex; align-items: center; gap: .55em; }
.mock-legend i { width: .85em; height: .85em; border-radius: .2em; }

/* Gráfico de barras empilhadas: 30 colunas, azul embaixo e verde em cima */
.mock-plotwrap { display: grid; grid-template-columns: 1.7em minmax(0, 1fr); grid-template-rows: 13.6em auto; margin-top: .9em; }
.mock-y { position: relative; font-size: .62em; color: var(--m-dim); }
.mock-y span { position: absolute; left: 0; right: 0; top: calc(var(--k) * 25%); transform: translateY(-50%); text-align: center; }
.mock-plot { display: flex; align-items: stretch; border-bottom: 1px solid #252528; background: linear-gradient(to bottom, #252528 1px, transparent 1px) 0 0 / 100% 25%; }
.mock-col { flex: 1; display: flex; flex-direction: column-reverse; align-items: center; }
.mock-col i { width: .88em; height: 25%; }
.mock-col .g2 { height: 50%; }
.mock-col i:last-child { border-radius: .15em .15em 0 0; }
.mock-x { grid-column: 2; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); margin-top: .9em; font-size: .62em; color: var(--m-dim); }
.mock-x span { justify-self: center; white-space: nowrap; }

/* "Pede sua ação" */
.mock-action { display: flex; flex-direction: column; }
.mock-empty { flex: 1; margin-top: .85em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #1f1f22; border-radius: .5em; text-align: center; }
.mock-ok { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: #0f3d2e; color: var(--m-ok); }
.mock-ok .mock-i { width: 1.1em; height: 1.1em; }
.mock-empty__t { margin-top: .85em; font-size: .73em; font-weight: 500; }
.mock-empty__s { margin-top: .5em; font-size: .62em; color: var(--m-mute); }

/* Listas (próximas publicações e contas) */
.mock-list { margin-top: .6em; }
.mock-list li { display: flex; align-items: center; gap: .8em; padding-block: .6em; border-top: 1px solid #1d1d20; }
.mock-list li:first-child { border-top: 0; }
.mock-li__ic { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .5em; background: #27272a; color: var(--m-mute); }
.mock-li__ic .mock-i { width: .9em; height: .9em; }
.mock-li__tx, .mock-li__r { display: flex; flex-direction: column; min-width: 0; }
.mock-li__tx { flex: 1; }
.mock-li__r { align-items: flex-end; flex: none; }
.mock-li__tx b { font-size: .73em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-li__r b { font-size: .65em; white-space: nowrap; }
.mock-list small { font-size: .62em; color: var(--m-mute); white-space: nowrap; }
.mock-pill { display: inline-flex; align-items: center; gap: .4em; padding: .35em .85em; border: 1px solid #176b50; border-radius: 99px; background: #0f3d2e; color: var(--m-ok); font-size: .62em; white-space: nowrap; }
.mock-pill .mock-i { width: 1.1em; height: 1.1em; }

/* Tipos de post */
.mock-split { display: flex; gap: .15em; height: .6em; margin-top: 1.3em; border-radius: .3em; overflow: hidden; }
.mock-types { margin-top: .5em; }
.mock-types li { display: flex; align-items: center; margin-top: .9em; font-size: .73em; }
.mock-types i { width: .8em; height: .8em; margin-right: .6em; border-radius: .2em; }
.mock-types b { margin-left: auto; }
.mock-types small { width: 3.2em; text-align: right; font-size: .85em; color: var(--m-mute); }

/* ---------- Seção do painel (home) ---------- */
/* Estado base (celular, tablet e movimento reduzido): sem fixar, print no estado final,
   com o degradê do fim cobrindo a parte de baixo do print. */
.dash { position: relative; padding-top: clamp(40px, 6vw, 96px); }
.dash__stage { position: relative; }
.dash__head { margin-bottom: clamp(28px, 4vw, 48px); }
.dash__mock { width: min(1240px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.dash__fade { position: absolute; inset: auto 0 0 0; height: clamp(64px, 11vw, 140px); background: linear-gradient(to bottom, transparent, var(--c-ink-1) 90%); pointer-events: none; }
@media (max-width: 760px) {
  .mock-frame { --mw: 48rem; -webkit-mask-image: linear-gradient(to right, #000 74%, transparent); mask-image: linear-gradient(to right, #000 74%, transparent); }
}

/* Desktop com movimento e JS ligado: palco fixo por ~3 telas de rolagem. A trilha reserva a
   altura só com CSS (nada pula quando o JS chega). Sem suporte a (scripting) cai no estado base.
   O palco sempre cabe na tela: título com altura fixa (--dash-head) e o print ocupa o resto,
   com largura pela altura livre (proporção do recorte, .492). Tela baixa = print menor. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .dash { --dash-stage-h: max(560px, calc(100vh - var(--header-h))); --dash-head: 188px; padding-top: 0; margin-bottom: calc(-1 * clamp(32px, 6vh, 56px)); } /* o fim do palco já é degradê: a próxima seção sobe sobre a folga */
  @supports (height: 1svh) { .dash { --dash-stage-h: max(560px, calc(100svh - var(--header-h))); } }
  .dash__track { height: calc(var(--dash-stage-h) + 200vh); }
  .dash__stage { position: sticky; top: var(--header-h); height: var(--dash-stage-h); overflow: hidden; display: flex; flex-direction: column; }
  .dash__head { flex: none; height: var(--dash-head); margin: 0 auto; padding-top: 18px; }
  .dash__head .eyebrow { margin-bottom: 10px; }
  .dash__head .section__title { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); }
  .dash__head .section__lead { max-width: 760px; margin-top: 10px; font-size: 1rem; }
  .dash__mock { --dash-mock-h: calc(var(--dash-stage-h) - var(--dash-head)); flex: none; width: min(1680px, calc(100% - var(--gutter) * 2), calc(var(--dash-mock-h) / .492)); height: min(var(--dash-mock-h), calc((100vw - var(--gutter) * 2) * .56)); }
  .dash .mock-wrap, .dash .mock-frame { height: 100%; }
  .dash__fade { height: 18%; }
  .dash.is-live .dash__mock { will-change: transform; transform-origin: 50% 0; }
  .dash.is-live .mock-col { transform: scaleY(clamp(0, calc(var(--pb, 0) * 2.2 - var(--i, 0) * .0414), 1)); transform-origin: 50% 100%; }
}