/* ═══════════════════════════════════════════════════════════════════
   UFVAI — site v7
   1) correções de posicionamento para o app real dentro do mock
   2) bloco de registro no INPI
   3) ajustes da demonstração (Colab · Termos · App)
   Nada aqui altera regra editorial, científica ou de conteúdo.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. O app real usa position:fixed (topbar/rodapé/splash/overlay).
      Dentro do mock, essas peças têm de obeyecer o quadro da demo. ── */
#appmock {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#appmock #mock-topbar {
  position: absolute;
  inset: 0 0 auto 0;
}
#appmock #mock-footer {
  position: absolute;
  inset: auto 0 0 0;
}
#appmock #mock-boot-splash {
  position: absolute;
  inset: 0;
}
#appmock #mock-terms-overlay {
  position: absolute;
  inset: 0;
}

/* ── 2. Registro no INPI ─────────────────────────────────────────────── */
.inpi {
  margin-top: 22px;
  padding: 16px 18px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--surface-2, var(--surface));
}
.inpi__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  padding: 5px 12px 5px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 11%, transparent);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-ink, var(--gold));
}
.inpi__seal {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  font-size: .68rem;
  line-height: 1;
}
.inpi__proc {
  margin: 0 0 6px;
  font-size: .92rem;
  color: var(--body);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.inpi__proc strong {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  letter-spacing: .02em;
  color: var(--ink);
}
.inpi__year {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.inpi__note {
  margin: 0;
  font-size: .84rem;
  line-height: 1.62;
  color: var(--muted);
}
.footer__inpi {
  margin-top: 12px;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted);
}
.footer__inpi strong {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  color: var(--ink);
}
.footer__inpiYear {
  margin-left: 6px;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── 3. Demonstração ─────────────────────────────────────────────────── */
/* O quadro tem altura adaptativa: as telas de boot e de Termos usam TODO o
   espaço disponível e rolam por dentro quando o conteúdo é maior — nada
   é cortado. */
.screen {
  height: clamp(540px, 78vh, 840px);
  min-height: 540px;
}
.screen__panel {
  overflow-y: auto;
  overflow-x: hidden;
}
.mock-app {
  position: relative;
  height: 100%;
  min-height: 0;
  background: #141c24;
  container-type: inline-size;
  container-name: mockapp;
}

/* O rodapé e a barra superior do app real são fluidos: estreitam
   rótulos e ocultam itens como o próprio app faz em telas estreitas
   (regras por container, porque aqui a largura é a do mock, não a da
   janela do navegador). */
@container mockapp (max-width: 1180px) {
  #appmock #mock-footer { gap: 10px; }
  #appmock #mock-footer .footer-brand,
  #appmock #mock-footer .footer-link { flex: none; white-space: nowrap; }
  #appmock #mock-footer .footer-link { font-size: 0; }
  #appmock #mock-footer .footer-link svg { margin-right: 0; }
  #appmock #mock-footer .footer-loc { display: none; }
  #appmock #mock-footer .footer-sep { display: none; }
}
@container mockapp (max-width: 940px) {
  #appmock #mock-footer .footer-oc { display: none; }
  #appmock #mock-footer .autosave-all-switch { display: none; }
  #appmock #mock-topbar .tb-btn span { display: none; }
  #appmock #mock-topbar .tb-btn { padding: 0 10px; }
}
@container mockapp (max-width: 760px) {
  #appmock #mock-footer .autosave-switch .autosave-label { display: none; }
  #appmock #mock-topbar .tb-icons .tb-icon:nth-child(2),
  #appmock #mock-topbar .tb-icons .tb-icon:nth-child(3),
  #appmock #mock-topbar .tb-icons .tb-icon:nth-child(4) { display: none; }
}
/* Em tela estreita, o app real passa a usar o menu (hambúrguer) no lugar
   dos botões da barra e reduz o rodapé a marcas e chaves. */
@container mockapp (max-width: 560px) {
  #appmock #mock-topbar .status span:not(.status-dot) { display: none; }
  #appmock #mock-topbar .tb-icons .tb-icon:nth-child(5) { display: none; }
  #appmock #mock-topbar .tb-btn { display: none; }
  #appmock #mock-topbar .sep { display: none; }
  #appmock #mock-footer .autosave-all-switch,
  #appmock #mock-footer .btn-provider,
  #appmock #mock-footer .footer-oc { display: none; }
  #appmock #mock-footer .autosave-switch .autosave-label { display: none; }
  .mock-appframe .app-status-right { display: none; }
}
.mock-appframe {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface, #141c24);
  color: var(--ink, #e8e6e0);
  font-family: var(--font-sans);
}

/* 3a. Estágio 1 — Colab (tema papel da marca) */
.panel--colab {
  padding: 0;
  background: #e8e6e0;
  overflow-y: auto;
}
.mock-colab {
  width: 100%;
  min-height: 100%;
  background: #f1efe9;
  padding: clamp(12px, 2.4vw, 26px);
  font-family: "DM Mono", ui-monospace, monospace;
}
.mock-cell {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #d6d3cb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(43, 45, 58, .1);
}
.mock-cell__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: #f7f6f2;
  border-bottom: 1px solid #e4e2db;
  font-size: 11px;
  color: #8f8d86;
}
.mock-cell__tag { font-weight: 600; }
.mock-cell__time { margin-left: auto; }
.mock-cell__done { color: #5dba7e; }
.mock-cell__out {
  padding: 4px 14px 16px;
  background: #fff;
}
/* o painel de boot real (.ufl-*) — adjustments só de escala */
.ufl-panel {
  margin: 12px auto;
  padding: 20px 22px 18px;
  font-size: .92em;
}
.ufl-panel .ufl-wordmark { font-size: 28px; }
.ufl-panel .ufl-row { font-size: 11.5px; }
.ufl-panel .ufl-list { gap: 6px; }
.ufl-panel .ufl-ready { font-size: 13px; }
/* o card "ABRIR O UFVAI" real (.ufb-*) */
.ufb-card {
  margin: 0 auto 12px;
  padding: 20px 20px 18px;
  max-width: 460px;
}
.ufb-card .ufb-logo { width: 132px; height: auto; border-radius: 8px; }
.ufb-card .ufb-btn { font-size: 13px; padding: 15px 26px; }
/* as DUAS PORTAS */
.ufl-panel .ufl-row {
  opacity: .26;
  transition: opacity .45s ease;
}
.ufl-panel .ufl-row.done { opacity: 1; }
.ufl-panel .ufl-row .ufl-mark { opacity: 0; transition: opacity .35s ease; }
.ufl-panel .ufl-row.done .ufl-mark { opacity: 1; }
.ufl-panel .ufl-ready[hidden] { display: none; }
#mock-launch,
.mock-ports {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
#mock-launch.is-on,
.mock-ports.is-on {
  opacity: 1;
  transform: none;
}
.mock-ports {
  max-width: 460px;
  margin: 4px auto 0;
  padding: 12px 14px;
  border: 1px solid #d6d3cb;
  border-radius: 10px;
  background: #f7f6f2;
  font-size: 11.5px;
  color: #3c3f4e;
}
.mock-ports__title {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8f8d86;
}
.mock-ports__line {
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}
.mock-ports__ico { font-style: normal; }
.mock-ports__k { font-weight: 700; color: #2b2d3a; }
.mock-ports__url {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: #6b675e;
  word-break: break-all;
}
.mock-ports__port {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #2b2d3a;
  color: #f6f5f0;
  font-size: 10px;
  letter-spacing: .06em;
}
.mock-ports__note {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: #8f8d86;
}

/* 3b. Estágio 2 — Termos de Uso (tela real) */
.panel--terms {
  padding: 0;
  background: rgba(10, 13, 17, .93);
  overflow-y: auto;
}
/* O overlay e o card ocupam a altura disponível: nada é cortado e os
   botões ("Não aceitar" / "Aceitar e começar") ficam sempre visíveis —
   o texto longo rola dentro da caixa, como no app real. */
#appmock #mock-terms-overlay {
  padding: clamp(8px, 1.6vw, 18px);
  align-items: center;
  overflow: hidden;
}
#appmock #mock-terms-overlay .t-card {
  max-width: min(720px, 100%);
  width: 100%;
  margin: auto;
  max-height: 100%;
  min-height: 0;
  font-size: .82em;
  padding: 16px 18px;
}
/* dentro da caixa de texto, a rolagem é a do app real; o restante do card
   (campos, aceite e botões) fica logo abaixo e é alcançável pela rolagem
   animada do próprio card. */
#appmock #mock-terms-overlay .t-scroll {
  max-height: 26vh;
  overflow-y: auto;
}
#appmock #mock-terms-overlay .t-brand { font-size: 20px; }
#appmock #mock-terms-overlay .t-sub { margin-bottom: 10px; }
#appmock #mock-terms-overlay img { width: 72px !important; height: 72px !important; }
#appmock #mock-terms-overlay .t-links { margin-bottom: 10px; }
#appmock #mock-terms-overlay .t-actions { margin-top: 10px; }
#appmock #mock-terms-overlay input[type="text"],
#appmock #mock-terms-overlay input[type="email"] { font-size: 12px; }

/* 3c. Estágio 3 — app real */
.panel--app {
  padding: 0;
  background: #0d1117;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .62rem;
  line-height: 1.5;
}
.mock-appframe .app-tabs {
  background: #0d1117;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: #c9d1d9;
}
.mock-appframe .app-main { flex: 1; min-height: 0; }
.mock-appframe .term { background: #0d1117; color: #c9d1d9; }
.mock-appframe .ctx {
  background: #010409;
  border-left: 1px solid rgba(255, 255, 255, .09);
  color: #8b949e;
}
.mock-appframe .app-status {
  background: #010409;
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: #8b949e;
}
.mock-appframe .term-chip--ok { color: #3fb950; border-color: rgba(63, 185, 80, .45); }
.mock-appframe .term-chip--none { color: #f85149; border-color: rgba(248, 81, 73, .45); }
.mock-appframe .term-line--sys { color: #3fb950; }
.mock-appframe .term-line--thought { color: #8b949e; }
.mock-appframe .term-line--thought b { color: #d29922; }
.mock-appframe .term-src { color: #6e7681; }
.mock-appframe .term-line--user::before { color: #d29922; }

/* a TUI (dentro do iframe real) tem barra própria; o rodapé do app real
   fica logo abaixo — no app, os dois são consecutivos. */
.mock-tui {
  position: absolute;
  inset: 50px 0 40px;
  display: flex;
  flex-direction: column;
  background: #0d1117;
}
.mock-appframe #topbar { z-index: 3; }
.mock-appframe #footer { z-index: 3; }

/* ── 4. Responsivo ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .screen { height: clamp(620px, 86vh, 900px); }
  .ufl-panel { padding: 16px 14px 14px; }
  .ufl-panel .ufl-row { font-size: 10.5px; }
  .mock-ports__port { margin-left: 0; }
  #appmock #mock-terms-overlay .t-card { max-width: 100%; }
  .mock-appframe .ctx { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen { height: clamp(540px, 78vh, 840px); }
}