/* ═══════════════════════════════════════════════════════════════
   app.bccufabc.com — template visual
   Paleta: apenas preto, branco e cinzas estruturais.
   Geometria: sem cantos arredondados em nenhum elemento.

   Escrito mobile-first. Sao tres arranjos da mesma casca:
     ate 679px    celular  — coluna cheia, menu fixo embaixo
     680–999px    tablet   — coluna centrada com moldura
     1000px+      monitor  — barra lateral + conteudo + trilho lateral
   ═══════════════════════════════════════════════════════════════ */

:root {
  --preto: #000;
  --branco: #fff;
  --cinza-forte: #6e6e6e;   /* texto secundario */
  --cinza-medio: #b8b8b8;   /* bordas desabilitadas */
  --cinza-fraco: #ededed;   /* fundos de apoio */
  --borda: 2px solid var(--preto);
  --fonte-ui: "Chakra Petch", "DejaVu Sans Mono", monospace;
  --fonte-mono: "JetBrains Mono", "DejaVu Sans Mono", monospace;

  /* Ritmo vertical. O respiro cresce nas telas maiores, e o que
     mantem o layout arejado sem mudar nenhum componente. */
  --respiro: 18px;          /* distancia entre blocos de uma tela */
  --folga: 20px;            /* padding interno da area de conteudo */
  --altura-menu: 68px;      /* reservado embaixo para o menu fixo */

  /* Movimento */
  --tempo: 240ms;
  --tempo-curto: 150ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte-ui);
  background: var(--branco);
  color: var(--preto);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   1. CASCA — celular (padrao)
   ═══════════════════════════════════════════════════════════════ */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.moldura {
  background: var(--branco);
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

/* ── Topo ── */
.topo {
  border-bottom: var(--borda);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  background: var(--branco);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topo-marca { display: flex; align-items: center; gap: 10px; }
.topo-titulo {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cinza-forte);
  text-transform: uppercase;
}
.marca {
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
}
.marca span { background: var(--preto); color: var(--branco); padding: 2px 5px; }

/* Quadradinhos decorativos */
.quadros { display: flex; gap: 3px; }
.quadros i { width: 8px; height: 8px; background: var(--preto); display: block; }
.quadros i:nth-child(2) { opacity: 0.6; }
.quadros i:nth-child(3) { opacity: 0.3; }
.quadros i:nth-child(4) { opacity: 0.18; }
.quadros i:nth-child(5) { opacity: 0.08; }

/* ── Area de conteudo ──
   O padding inferior grande e proposital: deixa a ultima acao longe
   do menu e da ao fim da tela o mesmo respiro que o inicio tem. */
.tela {
  flex: 1;
  padding: 26px var(--folga) calc(var(--altura-menu) + 40px);
  overflow-x: hidden;
}
.tela > * + * { margin-top: var(--respiro); }

/* ═══════════════════════════════════════════════════════════════
   2. TIPOGRAFIA
   ═══════════════════════════════════════════════════════════════ */

h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; text-transform: uppercase; line-height: 1.15; }
h2 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; }
h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.legenda { font-size: 12px; color: var(--cinza-forte); font-family: var(--fonte-mono); }
.mono { font-family: var(--fonte-mono); }

.rotulo-secao {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 2px;
  border-bottom: var(--borda);
  padding-bottom: 6px;
  text-transform: uppercase;
}
/* Um rotulo abre uma secao nova: merece mais ar acima do que abaixo. */
.tela > .rotulo-secao + * { margin-top: 12px; }
.tela > * + .rotulo-secao { margin-top: calc(var(--respiro) + 12px); }

/* ═══════════════════════════════════════════════════════════════
   3. BLOCOS E COMPONENTES
   ═══════════════════════════════════════════════════════════════ */

.bloco { border: var(--borda); padding: 18px; background: var(--branco); }
.bloco + .bloco { margin-top: 12px; }
.bloco-invertido { border: var(--borda); padding: 22px 20px; background: var(--preto); color: var(--branco); }
.bloco-invertido .legenda { color: var(--cinza-medio); }
.bloco-tracejado { border: 2px dashed var(--preto); padding: 18px; }

/* Bloco dominante da tela inicial: e o elemento com mais peso da
   interface, entao e o que mais ganha espaco proprio. */
.heroi { padding: 28px 22px 26px; }
.heroi h1 { margin: 12px 0 4px; }
.heroi .btn-acao { margin-top: 24px; }
/* Titulo de atividade e texto real, nao rotulo: nao pode ocupar a tela toda. */
.heroi-atividade h1 { font-size: 20px; text-transform: none; letter-spacing: 0; }

/* ── Botoes ── */
.btn {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 16px;
  border: var(--borda);
  background: var(--branco);
  color: var(--preto);
  cursor: pointer;
  width: 100%;
  display: block;
  text-align: center;
  transition: background-color var(--tempo-curto) var(--curva),
              color var(--tempo-curto) var(--curva),
              border-color var(--tempo-curto) var(--curva),
              transform 90ms var(--curva);
}
.btn:hover { background: var(--preto); color: var(--branco); }
.btn:active { transform: translate(2px, 2px); }
.btn-primario { background: var(--preto); color: var(--branco); }
.btn-primario:hover { background: var(--branco); color: var(--preto); }
.btn-pequeno { padding: 9px 12px; font-size: 12px; width: auto; display: inline-block; }
.btn:disabled { border-color: var(--cinza-medio); color: var(--cinza-medio); cursor: default; background: var(--branco); }
.btn:disabled:hover { background: var(--branco); color: var(--cinza-medio); }
.btn:disabled:active { transform: none; }
.btn + .btn { margin-top: 10px; }

/* Botao de acao dominante: quadrado grande, alto contraste */
.btn-acao {
  background: var(--preto); color: var(--branco);
  padding: 22px 16px; font-size: 17px; letter-spacing: 2px;
  border: var(--borda);
}
.btn-acao:hover { background: var(--branco); color: var(--preto); }

/* Dentro do bloco preto a acao se inverte, para continuar sendo o
   elemento de maior contraste da tela. */
.bloco-invertido .btn-acao,
.bloco-invertido .btn {
  background: var(--branco); color: var(--preto); border-color: var(--branco);
}
.bloco-invertido .btn-acao:hover,
.bloco-invertido .btn:hover { background: var(--preto); color: var(--branco); }

/* Foco visivel: contorno solido, sem cor */
:focus-visible { outline: 3px solid var(--preto); outline-offset: 3px; }
.bloco-invertido :focus-visible { outline-color: var(--branco); }

/* ── Chips de interesse ── */
.grade-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chip {
  border: var(--borda); padding: 16px 4px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  cursor: pointer; background: var(--branco); font-family: var(--fonte-mono);
  transition: background-color var(--tempo-curto) var(--curva),
              color var(--tempo-curto) var(--curva),
              transform 90ms var(--curva);
}
.chip:hover { background: var(--cinza-fraco); }
.chip:active { transform: translate(1px, 1px); }
.chip[data-ativo="1"] { background: var(--preto); color: var(--branco); }

/* ── Listas de atividades ──
   Sempre dentro de .lista: no celular vira pilha, no monitor vira grade. */
.lista { display: grid; grid-template-columns: 1fr; gap: 10px; }

.item {
  border: var(--borda); padding: 14px; display: flex; gap: 14px; align-items: flex-start;
  background: var(--branco);
  transition: background-color var(--tempo-curto) var(--curva),
              color var(--tempo-curto) var(--curva);
}
.item .quando {
  font-family: var(--fonte-mono); font-size: 11px; font-weight: 700;
  border: var(--borda); padding: 6px; text-align: center; min-width: 58px; flex-shrink: 0;
}
.item .corpo { flex: 1; min-width: 0; }
.item .titulo { font-weight: 700; font-size: 14px; line-height: 1.25; }
.item.na-trilha { background: var(--preto); color: var(--branco); }
.item.na-trilha .quando { border-color: var(--branco); }
.item.na-trilha .legenda { color: var(--cinza-medio); }
.item.na-trilha .tag { border-color: var(--branco); }
.item.na-trilha .btn { background: var(--branco); color: var(--preto); }
.item.na-trilha .btn:hover { background: var(--preto); color: var(--branco); border-color: var(--branco); }

.tag {
  display: inline-block; border: 1px solid var(--preto); padding: 1px 5px;
  font-size: 10px; font-family: var(--fonte-mono); margin: 6px 4px 0 0;
}

/* ── Abas ── */
.abas { display: flex; border: var(--borda); }
.aba {
  flex: 1; padding: 13px 6px; text-align: center; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  background: var(--branco);
  transition: background-color var(--tempo-curto) var(--curva),
              color var(--tempo-curto) var(--curva);
}
.aba:hover { background: var(--cinza-fraco); }
.aba + .aba { border-left: var(--borda); }
.aba[data-ativo="1"] { background: var(--preto); color: var(--branco); }

/* ── Codigo QR simulado (grade de quadrados) ── */
.qr {
  width: 190px; height: 190px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr);
  border: var(--borda); padding: 6px; gap: 2px; background: var(--branco);
}
.qr i { background: var(--branco); display: block; }
.qr i.on { background: var(--preto); }
.visor {
  border: var(--borda); padding: 28px 20px; text-align: center; background: var(--cinza-fraco);
}

/* ── Alternador (consentimentos) ── */
.linha-alt { display: flex; align-items: center; gap: 14px; }
.linha-alt + .linha-alt { margin-top: 16px; border-top: 1px solid var(--cinza-medio); padding-top: 16px; }
.linha-alt .corpo { flex: 1; }
.alt {
  width: 52px; height: 28px; border: var(--borda); background: var(--branco);
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: background-color var(--tempo-curto) var(--curva);
}
.alt::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: var(--preto);
  transition: left var(--tempo-curto) var(--curva),
              background-color var(--tempo-curto) var(--curva);
}
.alt[data-ativo="1"] { background: var(--preto); }
.alt[data-ativo="1"]::after { left: 26px; background: var(--branco); }
.alt[data-travado="1"] { border-color: var(--cinza-medio); cursor: default; }
.alt[data-travado="1"]::after { background: var(--cinza-medio); }

/* ── Avisos ── */
.aviso { border: var(--borda); padding: 14px; font-size: 12.5px; }
.aviso-forte { background: var(--preto); color: var(--branco); }
.aviso .rot { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 1.5px; display: block; margin-bottom: 5px; }
.aviso-forte .btn { background: var(--branco); color: var(--preto); }
.aviso-forte .btn:hover { background: var(--preto); color: var(--branco); border-color: var(--branco); }

/* ═══════════════════════════════════════════════════════════════
   4. NAVEGACAO
   O mesmo HTML e desenhado duas vezes: uma na barra inferior do
   celular, outra na coluna lateral do computador. So muda a pele.
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra inferior (celular / tablet) ── */
.menu {
  display: flex;
  border-top: var(--borda);
  flex-shrink: 0;
  background: var(--branco);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.menu:empty { display: none; }
.menu button {
  flex: 1; border: none; background: var(--branco); cursor: pointer;
  padding: 12px 4px 10px; font-family: var(--fonte-ui); font-weight: 700;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-right: var(--borda); color: var(--preto);
  position: relative;
  transition: background-color var(--tempo-curto) var(--curva),
              color var(--tempo-curto) var(--curva);
}
.menu button:last-child { border-right: none; }
.menu button[data-ativo="1"] { background: var(--preto); color: var(--branco); }

/* Icones geometricos, comuns as duas peles */
.ic { width: 16px; height: 16px; border: 2px solid currentColor; display: block; flex-shrink: 0; }
.ic.cheio { background: currentColor; }
.ic.meio { background: linear-gradient(to bottom, currentColor 50%, transparent 50%); }
.ic.pontos { border: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ic.pontos b { background: currentColor; display: block; }
[data-destaque="1"] .ic { outline: 3px solid currentColor; outline-offset: 2px; }

/* Selo de pendencia */
.selo {
  position: absolute; top: 8px; left: 50%; margin-left: 6px;
  background: var(--preto); color: var(--branco);
  font-size: 9px; padding: 0 4px; font-family: var(--fonte-mono);
  border: 1px solid var(--branco); line-height: 1.5;
}
.menu button[data-ativo="1"] .selo { background: var(--branco); color: var(--preto); border-color: var(--preto); }

/* ── Coluna lateral (computador) ── */
.lateral { display: none; }
.lateral-marca { border: var(--borda); padding: 20px; background: var(--branco); }
.lateral-marca .quadros { margin-bottom: 14px; }
.lateral-marca .legenda { margin-top: 8px; }

.lateral .menu {
  position: static;
  display: flex;
  flex-direction: column;
  border: var(--borda);
  border-top: var(--borda);
  padding-bottom: 0;
}
.lateral .menu button {
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px 18px;
  font-size: 12px;
  border-right: none;
  border-bottom: var(--borda);
}
.lateral .menu button:last-child { border-bottom: none; }
.lateral .menu button:hover { background: var(--cinza-fraco); }
.lateral .menu button[data-ativo="1"]:hover { background: var(--preto); }
.lateral .menu .selo {
  position: static; margin: 0 0 0 auto;
  border-color: var(--branco);
}
.lateral-rodape { border: 2px dashed var(--cinza-medio); padding: 16px; }

/* ═══════════════════════════════════════════════════════════════
   5. PAINEL DE DEMONSTRACAO (nao faz parte do produto)
   ═══════════════════════════════════════════════════════════════ */

.demo {
  border: 2px dashed var(--preto);
  background: var(--branco);
  padding: 18px;
  margin: 0 var(--folga) calc(var(--altura-menu) + 32px);
}
.demo h3 { margin-bottom: 4px; }
.demo .grupo { margin-top: 20px; }
.demo .grupo > .rotulo-secao { margin-bottom: 10px; }
.demo .btn { margin-top: 8px; }
.demo-cabecalho { display: flex; align-items: flex-start; gap: 12px; }
.demo-cabecalho .corpo { flex: 1; }
.demo-corpo[data-aberto="0"] { display: none; }
.demo-alternar { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   6. UTILITARIOS
   ═══════════════════════════════════════════════════════════════ */

.linha { display: flex; gap: 10px; }
.linha > * { flex: 1; }
.centro { text-align: center; }
.vazio { border: 2px dashed var(--cinza-medio); padding: 40px 20px; text-align: center; color: var(--cinza-forte); font-size: 13px; }
.passo { font-family: var(--fonte-mono); font-size: 11px; letter-spacing: 2px; }
hr { border: none; border-top: var(--borda); }

/* Espacador explicito: onde o vazio e conteudo, e nao sobra. */
.respiro { height: 12px; }
.respiro-grande { height: 32px; }

/* Cartao de secao (rotulo + bloco andam juntos numa grade) */
.cartao > .rotulo-secao { margin-bottom: 12px; }
.grade-secoes { display: grid; grid-template-columns: 1fr; gap: var(--respiro); }

/* ═══════════════════════════════════════════════════════════════
   7. TELAS COM ARRANJO PROPRIO
   ═══════════════════════════════════════════════════════════════ */

.abertura { padding: 20px 0 8px; }
.abertura .quadros { margin-bottom: 26px; }
.abertura .legenda { margin-top: 12px; }

.perguntas { display: grid; grid-template-columns: 1fr; gap: 12px; }
.perguntas .bloco + .bloco { margin-top: 0; }   /* quem espaca aqui e o gap */
.checkin-grade { display: grid; grid-template-columns: 1fr; gap: var(--respiro); }

/* ═══════════════════════════════════════════════════════════════
   8. MOVIMENTO
   A troca de secao e a unica animacao de layout: o conteudo entra
   de baixo, em cascata curta. Redesenhos dentro da mesma tela nao
   animam — quem controla isso e o app.js.
   ═══════════════════════════════════════════════════════════════ */

@keyframes surgir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes surgir-curto {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.tela.entrando > * { animation: surgir var(--tempo) var(--curva) both; }
.tela.entrando > *:nth-child(1) { animation-delay: 0ms; }
.tela.entrando > *:nth-child(2) { animation-delay: 45ms; }
.tela.entrando > *:nth-child(3) { animation-delay: 90ms; }
.tela.entrando > *:nth-child(4) { animation-delay: 125ms; }
.tela.entrando > *:nth-child(5) { animation-delay: 155ms; }
.tela.entrando > *:nth-child(n+6) { animation-delay: 180ms; }

.topo-titulo.entrando { animation: surgir-curto var(--tempo) var(--curva) both; }

/* Preferencia do sistema por menos movimento: tudo instantaneo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   9. TABLET — 680px em diante
   A coluna volta a ter moldura e o fundo cinza reaparece.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 680px) {
  :root { --respiro: 20px; --folga: 32px; }

  body { background: var(--cinza-fraco); }

  .app {
    max-width: 620px;
    margin: 0 auto;
    padding: 32px 24px 0;
  }
  .moldura {
    border: var(--borda);
    min-height: 720px;
  }
  .topo { top: 0; }
  .tela { padding: 34px var(--folga) calc(var(--altura-menu) + 48px); }

  .menu {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 572px;
    border: var(--borda);
    bottom: 0;
  }
  .demo { margin: var(--respiro) 0 calc(var(--altura-menu) + 40px); }
  .grade-chips { grid-template-columns: repeat(5, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   10. COMPUTADOR — 1000px em diante
   Navegacao vira coluna a esquerda, o menu inferior desaparece e o
   conteudo ganha margens largas de proposito.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1000px) {
  :root { --respiro: 24px; --folga: 48px; --altura-menu: 0px; }

  .app {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "lateral conteudo"
      "lateral demo";
    align-content: start;
    align-items: start;
    gap: 28px;
    max-width: 1180px;
    padding: 40px 32px 56px;
  }

  .lateral {
    grid-area: lateral;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 40px;
  }

  .moldura { grid-area: conteudo; min-height: 78vh; }

  /* O menu inferior existe no HTML, mas aqui quem navega e a lateral. */
  .app > .menu { display: none; }

  /* A mesma navegacao, desfixada da base da janela e empilhada. */
  .lateral .menu {
    position: static;
    left: auto; right: auto; bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
  }

  .topo { padding: 22px 32px; }
  .topo-marca { display: none; }
  .topo-titulo {
    margin-left: 0;
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--preto);
    font-weight: 700;
  }

  .tela {
    padding: 48px var(--folga) 64px;
  }

  /* No celular o h2 e o titulo da tela; aqui quem titula e a barra do
     topo, entao repetir seria ruido. */
  .tela > h2 { display: none; }
  .tela > h2 + p.legenda { margin-top: 0; }

  .demo {
    grid-area: demo;
    margin: 0;
    padding: 22px;
  }
  .demo-alternar { display: none; }
  .demo-corpo[data-aberto="0"] { display: block; }

  h1 { font-size: 30px; }
  .heroi { padding: 40px 36px 36px; }
  .heroi h1 { font-size: 34px; }
  .heroi-atividade h1 { font-size: 26px; }
  .heroi .btn-acao { max-width: 340px; }
  .bloco { padding: 22px; }
  .abertura { padding: 40px 0 16px; }

  /* Listas em duas colunas: e o ganho real de uma tela larga. */
  .lista { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grade-chips { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .grade-secoes { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .perguntas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

  /* Check-in: leitor de um lado, simulacao do outro. */
  .checkin-grade { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
  .qr { width: 230px; height: 230px; }
  .visor { padding: 40px 24px; }

  /* Telas curtas leem melhor estreitas: o resto da largura fica vazio
     de proposito, em vez de esticar caixas ate a borda. */
  .tela-estreita { max-width: 560px; }
}

/* ═══════════════════════════════════════════════════════════════
   11. MONITOR LARGO — 1280px em diante
   Entra o terceiro trilho: o painel de demonstracao sai de baixo do
   conteudo e vai para a direita.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  :root { --folga: 64px; }

  .app {
    grid-template-columns: 260px minmax(0, 1fr) 300px;
    grid-template-areas: "lateral conteudo demo";
    max-width: 1460px;
    gap: 32px;
    padding: 48px 40px 64px;
  }

  .demo { position: sticky; top: 48px; }
  .tela { padding: 56px var(--folga) 80px; }
  .lista { gap: 14px; }
}