/* ============================================================
   Residente Online — Funcionalidades do sistema (/funcionalidades/)
   Prints reais do sistema. Abas de função + abas de aparelho.
   Depende dos tokens de /assets/css/styles.css
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Palco ---------- */
.demo-stage {
  background: var(--deep);
  color: #eafaf4;
  overflow: clip;
  padding-block: clamp(40px, 6vw, 84px);
}
.demo-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 80% -8%, hsl(168 65% 42% / .24), transparent 60%),
    radial-gradient(55% 70% at 4% 104%, hsl(190 65% 42% / .15), transparent 60%);
}
.demo-stage h2, .demo-stage h3 { color: #fff; }
.demo-stage .eyebrow { color: #6ee7bd; }
.demo-stage .eyebrow::before { background: #6ee7bd; }
.demo-inner { position: relative; z-index: 1; }

/* ---------- Palco: visor + trilho de funções lado a lado ---------- */
/* Altura na LINHA do grid, não nos filhos: com linha automática os 27 itens do
   trilho ditariam a altura e o card lateral ficaria muito mais alto que o
   visor. Linha definida = visor e trilho com exatamente a mesma altura, e o
   excedente da lista vira rolagem interna. */
.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(238px, 22vw, 300px);
  grid-template-rows: clamp(430px, 58vh, 640px);
  gap: clamp(14px, 1.8vw, 24px);
}

/* ---------- Trilho de funções (card à direita do visor) ---------- */
.fn-rail {
  display: flex; flex-direction: column; min-height: 0;
  border-radius: var(--r-lg); overflow: hidden;
  background: hsl(0 0% 100% / .045);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .08);
}
.rail-head { flex: none; padding: 10px 10px 8px; border-bottom: 1px solid hsl(0 0% 100% / .08); }
.rail-search {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: hsl(0 0% 100% / .06);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .1);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.rail-search:focus-within { background: hsl(0 0% 100% / .1); box-shadow: inset 0 0 0 1px hsl(160 60% 70% / .55); }
.rail-search svg {
  width: 15px; height: 15px; flex: none; fill: none; stroke: #7fae9f;
  stroke-width: 2.2; stroke-linecap: round;
}
.rail-input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0;
  font: inherit; font-size: .88rem; font-weight: 600; color: #eafaf4;
}
.rail-input::placeholder { color: #6f9e90; font-weight: 600; }
.rail-input:focus { outline: none; }
.rail-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rail-empty { flex: none; padding: 18px 16px; font-size: .86rem; color: #7fae9f; }
.rail-empty[hidden] { display: none; }

/* ---------- Abas de função ---------- */
.fn-tabs {
  position: relative; /* base do offsetTop usado pelo scroll interno do JS */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: hsl(0 0% 100% / .2) transparent;
}
.fn-tabs::-webkit-scrollbar { width: 8px; }
.fn-tabs::-webkit-scrollbar-thumb { background: hsl(0 0% 100% / .18); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.fn-tabs::-webkit-scrollbar-thumb:hover { background: hsl(0 0% 100% / .3); background-clip: content-box; }

/* display:block (e não flex) para o text-overflow valer: em flex o texto vira
   item anônimo e o ellipsis não aplica. */
.fn-tab {
  position: relative; flex: none;
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; border-radius: 11px;
  font-weight: 700; font-size: .92rem; line-height: 1.35; letter-spacing: -.012em;
  color: #a9cfc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .22s var(--ease), background .22s var(--ease);
}
.fn-tab[hidden] { display: none; }
.fn-tab:hover { color: #eafaf4; background: hsl(0 0% 100% / .07); }
.fn-tab[aria-selected="true"] {
  color: #04231c; background: #6ee7bd;
  box-shadow: 0 10px 26px -14px hsl(160 70% 50% / .8);
}

/* ---------- Abas de aparelho ---------- */
.dev-tabs[hidden] { display: none; }
.dev-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: var(--r-pill); background: hsl(0 0% 100% / .07);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .1);
}
.dev-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 17px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .88rem; color: #a9cfc4;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.dev-tab i { width: 9px; height: 7px; border-radius: 1.5px; flex: none; background: currentColor; opacity: .55; }
.dev-tab[data-dev="morador"] i, .dev-tab[data-dev="portaria"] i { width: 5px; height: 9px; border-radius: 1.5px; }
.dev-tab:hover { color: #eafaf4; }
.dev-tab[aria-selected="true"] { color: #04231c; background: #fff; }
.dev-tab[aria-selected="true"] i { opacity: 1; }

/* min-height: 10 dos 27 módulos só têm tela de Sistema e escondem as abas de
   aparelho. Sem altura reservada a barra colapsa e empurra o visor e o trilho
   ~48px pra cima — a lista "pula" em mais de um terço dos cliques. */
.viewer-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; min-height: 48px; margin-bottom: 18px;
}
.viewer-legend { font-size: .86rem; color: #7fae9f; }
.viewer-legend b { color: #cfe6de; font-weight: 700; }

/* ---------- Visor ---------- */
/* sem aspect-ratio no desktop: dividindo a largura com o trilho, a proporção
   derrubaria a altura e encolheria o print de celular. A altura vem da linha
   do grid (align-self: stretch). */
.viewer {
  position: relative;
  min-height: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, hsl(160 40% 30% / .16), hsl(190 40% 30% / .06));
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .08);
}

.shot {
  position: absolute; inset: clamp(16px, 2.4vw, 34px);
  display: flex; align-items: center; justify-content: center;
}
.shot[hidden] { display: none; }
.shot.entering { animation: shotIn .6s var(--ease-soft) both; }
@keyframes shotIn { from { opacity: 0; transform: translateY(14px) scale(.982); filter: blur(7px); } }

/* moldura de navegador — print do sistema */
.frame-web {
  width: 100%; max-height: 100%;
  border-radius: 12px; overflow: hidden;
  background: #223038;
  box-shadow: 0 40px 80px -40px hsl(170 60% 4% / .95), inset 0 0 0 1px hsl(160 20% 60% / .2);
  display: flex; flex-direction: column;
}
.web-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; background: linear-gradient(#2b3b44, #1d2a31); flex: none;
}
.web-dot { width: 9px; height: 9px; border-radius: 50%; background: hsl(0 0% 100% / .22); flex: none; }
.web-url {
  flex: 1; margin-left: 8px; max-width: 340px;
  font-size: .72rem; font-weight: 600; color: #9dc6ba;
  background: hsl(0 0% 100% / .08); border-radius: 99px;
  padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* flex-shrink padrão achatava a imagem; flex:none preserva a proporção real */
.frame-web img { flex: none; width: 100%; height: auto; display: block; }

/* moldura de celular — sem padding: a caixa da imagem é a própria proporção
   do print (9:19.5). O aro de titânio é desenhado com anéis de box-shadow,
   que ficam FORA da caixa e por isso não deformam nada. */
.frame-app {
  position: relative;
  height: 100%; width: auto; max-width: calc(100% - 14px);
  aspect-ratio: 1170 / 2532;
  border-radius: 12.6% / 5.8%;
  background: #05090b;
  box-shadow:
    0 0 0 3px #10171c,
    0 0 0 5px #3d4c55,
    0 0 0 6px hsl(200 16% 68% / .5),
    0 24px 48px -24px hsl(170 60% 4% / .9),
    0 58px 108px -54px hsl(170 60% 4% / .75);
}
.frame-app img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top center;
  border-radius: inherit;
}
/* sem ilha dinâmica: os prints começam no conteúdo do app (não há barra de
   status capturada), então um recorte falso taparia texto de verdade. */
/* botões laterais */
.frame-app::before {
  content: ""; position: absolute; right: -7px; top: 21%;
  width: 3px; height: 11%; border-radius: 0 2px 2px 0;
  background: linear-gradient(#4a5a63, #2b373e);
}

/* ---------- Cabeçalho da função (acima do print) ---------- */
.fn-head { margin-bottom: clamp(20px, 2.4vw, 28px); }
.fn-head h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom: 10px; }
.fn-head p { color: #a9cfc4; font-size: 1.04rem; line-height: 1.55; max-width: 72ch; }
/* As descrições vão de 163 a 202 caracteres e trocam de nº de linhas entre um
   módulo e outro, mexendo tudo o que vem abaixo. No desktop o parágrafo tem
   largura fixa (72ch ≈ 764px, ~86 caracteres por linha), então o pior caso são
   3 linhas — reservadas aqui. No mobile a largura é a da tela e o texto passa
   de 7 linhas, onde a reserva não faz sentido. */
@media (min-width: 901px) {
  .fn-head p { min-height: calc(3 * 1.55em); }
}
.fn-head.swap h3, .fn-head.swap p { animation: panelIn .5s var(--ease-soft) both; }
.fn-head.swap p { animation-delay: .05s; }

/* ---------- Fluxo (abaixo do print) ---------- */
.fn-panel { margin-top: clamp(26px, 3.4vw, 40px); }

.flow {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px);
  counter-reset: fl;
}
.flow-2 { grid-template-columns: repeat(2, 1fr); max-width: 62rem; }
.flow li {
  position: relative; padding: 22px 20px;
  border-radius: var(--r-md);
  background: hsl(0 0% 100% / .045);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .08);
}
.flow li::before {
  counter-increment: fl; content: counter(fl);
  position: absolute; top: -11px; left: 20px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: #04231c; background: #6ee7bd;
}
.flow-where {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #6ee7bd; margin: 4px 0 7px;
}
.flow-txt { color: #cfe6de; font-size: .95rem; line-height: 1.5; }
.flow-txt b { color: #fff; font-weight: 700; }

.fn-panel.swap .flow li { animation: panelIn .5s var(--ease-soft) both; }
.fn-panel.swap .flow li:nth-child(1) { animation-delay: .08s; }
.fn-panel.swap .flow li:nth-child(2) { animation-delay: .13s; }
.fn-panel.swap .flow li:nth-child(3) { animation-delay: .18s; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

/* ---------- Controles ---------- */
.demo-ctl { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.ctl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 700; color: #b8d7cd;
  padding: 9px 16px; border-radius: 99px;
  background: hsl(0 0% 100% / .06); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .12);
  transition: color .25s, background .25s, transform .25s var(--ease);
}
.ctl-btn:hover { color: #fff; background: hsl(0 0% 100% / .12); transform: translateY(-1px); }
.ctl-btn svg { width: 14px; height: 14px; fill: currentColor; }
.ctl-hint { font-size: .82rem; color: #6f9e90; }

/* ---------- Responsivo ---------- */
/* Sem largura para duas colunas, o trilho vira faixa horizontal colada no
   visor: continua sendo "escolhe e já vê", sem rolar a página.
   display:contents desmonta o grid para reordenar tudo em uma coluna só. */
@media (max-width: 900px) {
  .demo-inner { display: flex; flex-direction: column; }
  .demo-grid { display: contents; }
  /* trilho em primeiro: é o único bloco de altura fixa, então fica parado
     enquanto título e descrição mudam de tamanho abaixo dele */
  .fn-rail   { order: 1; margin-bottom: 16px; }
  .fn-head   { order: 2; }
  .viewer-bar{ order: 3; }
  .viewer    { order: 4; }
  .fn-panel  { order: 5; }
  .demo-ctl  { order: 6; }

  .viewer { height: auto; aspect-ratio: 4 / 3.9; }
  .fn-tabs {
    flex: none; flex-direction: row; gap: 6px; padding: 8px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .fn-tabs::-webkit-scrollbar { display: none; }
  .fn-tab { width: auto; border-radius: var(--r-pill); scroll-snap-align: start; }
  .rail-empty { padding: 12px 16px; }
  .flow { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 620px) {
  .fn-tab { font-size: .88rem; padding: 9px 14px; }
  .viewer { aspect-ratio: 3 / 4.6; }
  .shot { inset: 12px; }
  .dev-tab { padding: 8px 13px; font-size: .82rem; }
  .web-url { display: none; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .fn-tab, .dev-tab, .ctl-btn, .rail-search { transition: none; }
  .fn-tabs { scroll-behavior: auto; }
  .shot.entering, .fn-head.swap h3, .fn-head.swap p, .fn-panel.swap .flow li { animation: none !important; }
}

/* ---------- Resumo estático: títulos de grupo ---------- */
.grupo-titulo {
  font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
  color: var(--brand-700); text-transform: uppercase;
  margin: clamp(34px, 4vw, 52px) 0 20px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.section-head + .grupo-titulo { margin-top: 0; }