/* ============================================================
   Ideal Sistemas — vitrine /demo (demo-vitrine.css)

   Esqueleto das páginas de MÓDULO e de SISTEMA da rota /demo.
   Mesma doutrina do demo.css: todo seletor tem prefixo viz- e
   toda cor usa var() com fallback, para a página se sustentar
   mesmo se o style.css não carregar.

   Depende de: ../style.css (tokens + cabeçalho) e ../demo.css
   (vocabulário de painel: .demo-panel-top, .demo-sig, .demo-pip).
   ============================================================ */

/* ----- estrutura da página --------------------------------- */
.viz-main{
  padding:clamp(104px,12vw,168px) var(--pad, clamp(24px,5vw,88px)) clamp(64px,8vw,120px);
  max-width:1240px; margin:0 auto;
}

/* cabeçalho da vitrine -------------------------------------- */
.viz-label{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted, #718070);
  margin:0 0 20px;
}
.viz-label i{ font-style:normal; color:var(--accent, #5F8F26); }
.viz-label a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-2, #CDD6C7); }
.viz-label a:hover{ color:var(--accent, #5F8F26); border-bottom-color:currentColor; }
.viz-label s{ text-decoration:none; color:var(--line-2, #CDD6C7); }

.viz-titulo{
  font-family:var(--display, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  font-weight:900;
  font-size:clamp(34px,6vw,68px); line-height:1.02; letter-spacing:-.04em;
  color:var(--ink, #18211B);
  margin:0 0 20px; max-width:16ch; text-wrap:balance;
}
.viz-lead{
  color:var(--ink-2, #47544A); font-size:clamp(16px,1.6vw,19px); line-height:1.65;
  max-width:58ch; margin:0 0 14px;
}

/* etiqueta obrigatória de todo painel simulado --------------- */
.viz-selo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted, #718070);
  border:1px solid var(--line-2, #CDD6C7);
  background:var(--surface, #FFFFFF);
  padding:7px 12px; margin:0 0 clamp(44px,6vw,76px);
}

.viz-titulo--curto{ margin-bottom:16px; }

/* ----- grade de miniaturas AO VIVO (abertura da vitrine) ---- */
.mini-sec{ margin:0 0 clamp(52px,7vw,88px); }

.mini-grade{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(22px,2.6vw,32px);
}
@media (max-width:980px){ .mini-grade{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:700px){ .mini-grade{ grid-template-columns:1fr; } }

.mini-item{ min-width:0; }

.mini-card{
  --cat-cor: var(--dim, #A3AFA0);
  display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--line-2, #CDD6C7);
  border-top:3px solid var(--cat-cor);
  border-radius:10px; overflow:hidden;
  background:var(--surface, #FFFFFF);
  box-shadow:0 2px 10px -6px rgba(24,33,27,.14);
  text-decoration:none; color:inherit;
  transition:transform .28s var(--ease, cubic-bezier(.16,1,.3,1)),
             box-shadow .28s var(--ease, cubic-bezier(.16,1,.3,1)),
             border-color .28s var(--ease, cubic-bezier(.16,1,.3,1));
}
a.mini-card:hover,
a.mini-card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--cat-cor);
  box-shadow:0 22px 42px -20px color-mix(in srgb, var(--cat-cor) 55%, rgba(24,33,27,.3));
}
a.mini-card:focus-visible{ outline:2px solid var(--cat-cor); outline-offset:2px; }

.mini-tela{
  position:relative; display:block; width:100%; aspect-ratio:16/10;
  overflow:hidden; background:var(--surface-2, #EFF3EB);
  border-bottom:1px solid var(--line-2, #CDD6C7);
}
.mini-tela-icone{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:30px; color:color-mix(in srgb, var(--cat-cor) 45%, var(--line-2, #CDD6C7));
  pointer-events:none;
}
.mini-tela iframe{
  position:absolute; top:0; left:0;
  width:1000px; height:625px; border:0;
  transform:scale(.33); transform-origin:0 0;
  pointer-events:none;           /* o card inteiro é o link; o iframe é só vitrine */
  background:#fff;
}
/* mini.html ainda não existe nesta demo — fica só o ícone de categoria */
.mini-tela--sem-mini .mini-tela-icone{ font-size:34px; }
.mini-tela--espera{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--surface-2, #EFF3EB);
}
.mini-tela--espera .mini-tela-icone{ position:static; font-size:18px; color:var(--dim, #A3AFA0); }
.mini-tela--espera span{
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim, #A3AFA0);
}

.mini-rotulo{
  display:flex; flex-direction:column; gap:5px;
  padding:13px 14px 15px;
}
.mini-sig{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--cat-cor) 70%, var(--muted, #718070));
}
.mini-nome{
  font-family:var(--display, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  font-weight:700; font-size:16.5px; line-height:1.2; letter-spacing:-.01em;
  color:var(--ink, #18211B);
}
.mini-item--espera .mini-nome{ color:var(--ink-2, #47544A); }
.mini-rotulo .viz-estado{ font-size:9.5px; margin-top:2px; }

/* ----- navegação por módulo (abaixo da grade de miniaturas) - */
.viz-sub{
  font-family:var(--display, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  font-weight:700; font-size:clamp(18px,2vw,22px); letter-spacing:-.01em;
  color:var(--ink, #18211B);
  margin:0 0 18px;
}

/* ----- o registro: a página como manifesto ------------------ */
.viz-reg{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line-2, #CDD6C7);
}
.viz-reg-cab{
  display:none;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim, #A3AFA0);
  padding:12px 2px; border-bottom:1px solid var(--line, #E3E8DF);
}
@media (min-width:900px){
  .viz-reg-cab{ display:grid; grid-template-columns:56px 30px minmax(0,1fr) 150px; gap:20px; align-items:center; }
  .viz-reg-cab span:first-child{ grid-column:1 / span 2; }
}

.viz-item{ border-bottom:1px solid var(--line-2, #CDD6C7); }

.viz-linha{
  --cat-cor: var(--accent-bright, #8DC63F);
  position:relative; display:grid; gap:14px 20px;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  padding:clamp(22px,3vw,34px) 2px clamp(22px,3vw,34px) 16px;
  text-decoration:none; color:inherit;
  transition:background .32s var(--ease, cubic-bezier(.16,1,.3,1)),
             padding-left .32s var(--ease, cubic-bezier(.16,1,.3,1));
}
@media (min-width:900px){
  .viz-linha{ grid-template-columns:56px 30px minmax(0,1fr) 150px; align-items:center; }
}

.viz-cat-icone{
  display:none;
  align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px; flex:none;
  font-size:13px;
  color:color-mix(in srgb, var(--cat-cor) 85%, var(--ink, #18211B));
  background:color-mix(in srgb, var(--cat-cor) 16%, var(--surface, #FFFFFF));
}
@media (min-width:900px){ .viz-cat-icone{ display:flex; } }

/* trilho de acento que cresce na borda esquerda --------------- */
.viz-linha::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cat-cor);
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .38s var(--ease, cubic-bezier(.16,1,.3,1));
}
a.viz-linha:hover::before,
a.viz-linha:focus-visible::before{ transform:scaleY(1); transform-origin:50% 0; }
a.viz-linha:hover,
a.viz-linha:focus-visible{ background:var(--surface-2, #EFF3EB); padding-left:26px; }
a.viz-linha:focus-visible{ outline:2px solid var(--cat-cor); outline-offset:-2px; }

.viz-num{
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:12px; letter-spacing:.1em;
  color:var(--dim, #A3AFA0);
  font-variant-numeric:tabular-nums;
}
a.viz-linha:hover .viz-num{ color:var(--cat-cor); }

.viz-corpo{ min-width:0; }
.viz-sig{
  display:block;            /* <span>: sem isto, assinatura+nome+descricao caem na MESMA linha */
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted, #718070);
  margin:0 0 7px;
}
.viz-nome{
  display:block;
  font-family:var(--display, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  font-weight:700; font-size:clamp(21px,2.4vw,27px); line-height:1.12; letter-spacing:-.025em;
  color:var(--ink, #18211B);
  margin:0 0 9px;
}
.viz-desc{
  display:block;
  color:var(--ink-2, #47544A); font-size:15px; line-height:1.62;
  max-width:62ch; margin:0;
}
.viz-fatos{
  list-style:none; margin:13px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:7px 9px;
}
.viz-fatos li{
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:10.5px; letter-spacing:.06em; line-height:1.4;
  color:var(--muted, #718070);
  border:1px solid var(--line, #E3E8DF);
  padding:5px 9px;
}

/* coluna de estado ------------------------------------------- */
.viz-estado{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted, #718070);
  white-space:nowrap;
}
@media (min-width:900px){ .viz-estado{ justify-self:end; } }
.viz-estado--ativo{ color:var(--accent, #5F8F26); font-weight:500; }
.viz-estado--espera{ color:var(--dim, #A3AFA0); }
.viz-estado--espera .viz-pip{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:transparent; border:1px solid var(--line-2, #CDD6C7);
}
.viz-seta{ transition:transform .3s var(--ease, cubic-bezier(.16,1,.3,1)); display:inline-block; }
a.viz-linha:hover .viz-seta{ transform:translateX(5px); }

/* item inerte (em breve) ------------------------------------- */
.viz-item--espera .viz-nome{ color:var(--ink-2, #47544A); }
.viz-item--espera .viz-desc{ color:var(--muted, #718070); }

/* ----- entrada escalonada (IntersectionObserver) ------------ */
.viz-anim .viz-item{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease, cubic-bezier(.16,1,.3,1)),
             transform .6s var(--ease, cubic-bezier(.16,1,.3,1));
}
.viz-anim .viz-item.viz-in{ opacity:1; transform:none; }

/* ----- rodapé da vitrine ------------------------------------ */
.viz-rodape{
  margin-top:clamp(56px,7vw,96px);
  padding-top:26px;
  border-top:1px solid var(--line-2, #CDD6C7);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted, #718070);
}
.viz-rodape a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-2, #CDD6C7); }
.viz-rodape a:hover{ color:var(--accent, #5F8F26); }

/* ----- estados de carga / erro ------------------------------ */
.viz-vazio{
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim, #A3AFA0);
  padding:34px 2px; border-bottom:1px solid var(--line-2, #CDD6C7);
}

@media (prefers-reduced-motion:reduce){
  .viz-anim .viz-item{ opacity:1; transform:none; transition:none; }
  .viz-linha, .viz-linha::before, .viz-seta{ transition:none; }
}