/* =====================================================================================
 * Universidade Oriente 3D, Fase 0 (03/11/2026): o cartão do motor YN38GBZ na grade da Universidade
 * (#page-cat-universidade) e a tela do 3D (#page-cat-univ-motor, universidade-motor-ui.js).
 * Só tokens do portal-2026.css (claro e escuro). Exceção de propósito: a tela de carregamento usa o verde da marca
 * do splash do portal (#appSplash, o mesmo nos dois temas) com o anel cônico lima.
 * ===================================================================================== */

/* ---------- cartão em destaque na grade ---------- */
.univ3d-cartao {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 20px;
  margin: 0 0 20px; padding: 18px 20px;
  background: linear-gradient(120deg, var(--accent-50) 0%, var(--panel) 60%);
  border: 1px solid var(--accent-line); border-radius: var(--r-lg, 14px);
  color: var(--ink); font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.univ3d-cartao:hover { border-color: var(--accent-line-2); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.univ3d-cartao-arte {
  position: relative; overflow: hidden; display: grid; place-items: center;
  width: 112px; height: 112px; border-radius: var(--r-lg, 14px);
  background: linear-gradient(135deg, var(--accent-deep), var(--accent)); color: var(--on-accent);
}
.univ3d-cartao-arte::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 200deg, transparent 0 52%, var(--lime) 72%, transparent 88%);
  opacity: .32;
}
.univ3d-cartao-arte svg { position: relative; width: 50px; height: 50px; }
.univ3d-cartao-arte b { position: absolute; right: 10px; bottom: 7px; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.univ3d-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.univ3d-selo {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill, 999px);
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.3; white-space: nowrap;
}
.univ3d-selo--aviso { background: var(--amber-soft); color: color-mix(in srgb, var(--amber) 58%, var(--ink)); }
.univ3d-cartao h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.univ3d-cartao p { margin: 0 0 12px; max-width: 68ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.univ3d-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.univ3d-kpi { min-width: 96px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.univ3d-kpi strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.univ3d-kpi span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--ink-3); overflow-wrap: normal; word-break: normal; hyphens: none; }
.univ3d-abrir {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px;
  background: var(--brand-strong); border: 1px solid var(--brand-strong); border-radius: 10px; color: var(--on-accent);
  font: 700 13.5px/1 var(--font-body, 'Manrope', system-ui, sans-serif); white-space: nowrap; cursor: pointer;
}
.univ3d-abrir svg { width: 16px; height: 16px; }
.univ3d-cartao:hover .univ3d-abrir, .univ3d-abrir:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.univ3d-abrir:focus-visible, .univ3d-voltar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* celular: arte e título lado a lado; texto, números e botão na largura toda (o corpo vira itens da grade) */
@media (max-width: 760px) {
  .univ3d-cartao { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 16px; }
  .univ3d-cartao-corpo { display: contents; }
  .univ3d-cartao-arte { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 12px; }
  .univ3d-cartao-arte svg { width: 28px; height: 28px; }
  .univ3d-cartao-arte b { right: 5px; bottom: 3px; font-size: 9px; }
  .univ3d-selos { grid-column: 2; margin: 0; align-self: end; }
  .univ3d-cartao h3 { grid-column: 2; align-self: start; margin: 0; font-size: 16px; }
  .univ3d-cartao p { grid-column: 1 / -1; margin: 10px 0 2px; }
  .univ3d-kpis { grid-column: 1 / -1; margin-top: 8px; flex-wrap: nowrap; gap: 6px; }
  .univ3d-kpi { flex: 1 1 auto; min-width: 0; padding: 8px 10px; }   /* largura pelo texto: "passos de desmontagem" não quebra no meio */
  .univ3d-abrir { grid-column: 1 / -1; width: 100%; margin-top: 10px; }
}

/* ---------- a tela do 3D: ocupa a área de conteúdo inteira (sem o respiro do .content) ---------- */
html body .main .content:has(> #page-cat-univ-motor.active) { padding: 0 !important; }
html body .main .content > #page-cat-univ-motor.active { padding: 0 !important; margin: 0; }
.univ3d {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--univ3d-topo, 110px)); min-height: 460px;
  background: var(--bg); color: var(--ink); font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
}
.univ3d-barra {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0;
}
.univ3d-voltar {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill, 999px); color: var(--ink);
  font: 600 13px/1 var(--font-body, 'Manrope', system-ui, sans-serif); cursor: pointer;
}
.univ3d-voltar:hover { background: var(--hover); }
.univ3d-voltar svg { width: 16px; height: 16px; }
.univ3d-aviso-txt { min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.univ3d-aviso-forte { display: none; font-weight: 700; color: var(--ink); }
.univ3d-palco { position: relative; flex: 1 1 auto; min-height: 0; background: var(--bg); }
.univ3d-frame {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0;
  background: var(--bg); opacity: 0; transition: opacity .3s ease;
}
.univ3d-frame--pronto { opacity: 1; }

/* carregamento: o verde da marca e o anel cônico do splash do portal */
.univ3d-carregando {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center; overflow: hidden;
  background: linear-gradient(135deg, #0B3D2E 0%, #06716f 46%, #0a9492 100%);
  transition: opacity .3s ease;
}
.univ3d-carregando::before {
  content: ""; position: absolute; top: -30%; right: -20%; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 229, 42, .16), transparent 60%); pointer-events: none;
}
.univ3d-carregando[hidden] { display: none; }
.univ3d-carregando--saindo { opacity: 0; }
.univ3d-anel {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, #bbe52a 22%, #9fcf2a 50%, transparent 74%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: univ3d-gira .85s linear infinite;
}
.univ3d-carregando-txt {
  position: relative; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, .86);
}
.univ3d-carregando-sub { position: relative; max-width: 36ch; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.univ3d-carregando-sub:empty { display: none; }
/* erro: volta para o fundo da tela, com o estado de erro padrão (OG.estado.erro) */
.univ3d-carregando--erro { background: var(--bg); }
.univ3d-carregando--erro::before { display: none; }
@keyframes univ3d-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .univ3d-anel { animation-duration: 2.4s; } .univ3d-cartao { transition: none; } }

@media (max-width: 600px) {
  .univ3d { min-height: 420px; }
  .univ3d-barra { padding: 6px 10px; gap: 8px; }
  .univ3d-barra > .univ3d-selo { display: none; }   /* o selo vira texto: cabe em duas linhas ao lado do Voltar */
  .univ3d-aviso-forte { display: inline; }
  .univ3d-aviso-txt { font-size: 12px; }
  .univ3d-credito { display: none; }
}