/* ============================================================
   Escritório Digital da KNX
   Tema claro, uma família de fonte, iPhone na mão.
   Verde KNX só para ação e aprovação.
   ============================================================ */

:root{
  /* superfícies */
  --papel:        #F7F8F7;
  --superficie:   #FFFFFF;
  --papel-fundo:  #EFF2F0;

  /* tinta, sempre tingida do verde da marca, nunca cinza puro */
  --tinta:        #0A1F14;   /* 16.2:1 no papel */
  --tinta-2:      #4A5C52;   /*  6.7:1 no papel */
  --tinta-3:      #607166;   /*  4.9:1 no papel, 4.6:1 no papel-fundo */

  /* verde KNX */
  --verde:        #00A859;   /* a marca: anel, pulso, foco, seleção */
  --verde-acao:   #00874A;   /*  4.6:1 com texto branco */
  --verde-press:  #006F3D;
  --verde-fraco:  #E6F6EE;

  /* linhas */
  --borda:        #DEE4E0;
  --borda-campo:  #7A8A81;   /*  3.4:1 no papel, limite de componente */

  /* medidas */
  --alvo:         44px;
  --raio-card:    14px;
  --raio-folha:   22px;
  --gutter:       16px;
  --topo:         env(safe-area-inset-top, 0px);
  --base:         env(safe-area-inset-bottom, 0px);

  /* movimento */
  --saida:        cubic-bezier(.22,1,.36,1);
  --folha-curva:  cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  background:var(--papel);
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.45;
  font-weight:400;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,ul,li,figure{ margin:0; padding:0; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }

::selection{ background:var(--verde-fraco); color:var(--tinta); }
:focus-visible{ outline:3px solid var(--tinta); outline-offset:2px; border-radius:6px; }
/* dentro da faixa escura o anel de tinta sumiria */
.faixa-botao:focus-visible{ outline-color:#fff; }
:focus:not(:focus-visible){ outline:none; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.icone{
  width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}

[hidden]{ display:none !important; }

/* ---------- botões, base comum ---------- */

button{
  font:inherit; color:inherit; letter-spacing:inherit;
  margin:0; border:0; background:none; cursor:pointer;
  touch-action:manipulation;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}

.botao{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--alvo); width:100%;
  padding:0 18px; border-radius:12px;
  font-size:17px; font-weight:600; letter-spacing:-.014em;
  transition:transform 110ms var(--saida), background-color 110ms linear, color 110ms linear;
}
.botao:active{ transform:scale(.975); }
.botao:disabled{ opacity:.42; cursor:default; transform:none; }

.botao-grande{ min-height:56px; font-size:18px; }

.botao-acao{ background:var(--verde-acao); color:#fff; }
.botao-acao:active:not(:disabled){ background:var(--verde-press); }

.botao-escuro{ background:var(--tinta); color:#fff; }

.botao-linha{
  background:var(--superficie); color:var(--tinta);
  box-shadow:inset 0 0 0 1.5px var(--borda-campo);
}
.botao-linha:active{ background:var(--papel-fundo); }

.botao-quieto{ color:var(--tinta-3); font-size:15.5px; font-weight:550; }
.botao-quieto:active{ color:var(--tinta); }

.botao-redondo{
  display:grid; place-items:center;
  width:var(--alvo); height:var(--alvo); flex:none;
  margin-right:-10px;
  border-radius:50%; color:var(--tinta-3);
  transition:background-color 110ms linear, color 110ms linear;
}
.botao-redondo:active{ background:var(--papel-fundo); color:var(--tinta); }

@media (hover:hover) and (pointer:fine){
  .botao-acao:hover:not(:disabled){ background:var(--verde-press); }
  .botao-linha:hover{ background:var(--papel-fundo); }
  .botao-redondo:hover{ background:var(--papel-fundo); color:var(--tinta); }
  .botao-quieto:hover{ color:var(--tinta); }
}

/* ---------- campos ---------- */

.rotulo{
  display:block; margin-bottom:8px;
  font-size:14px; font-weight:600; color:var(--tinta-2); letter-spacing:-.004em;
}

.campo{
  display:block; width:100%; min-height:54px;
  padding:14px 16px;
  font-family:inherit; font-size:17px; font-weight:500; color:var(--tinta);
  letter-spacing:-.01em;
  background:var(--superficie);
  border:1px solid var(--borda-campo);
  border-radius:12px;
  caret-color:var(--verde-acao);
  transition:border-color 120ms linear, box-shadow 120ms linear;
  -webkit-appearance:none; appearance:none;
}
.campo::placeholder{ color:var(--tinta-3); font-weight:400; }
.campo:focus{
  outline:none;
  border-color:var(--verde-acao);
  box-shadow:0 0 0 3px var(--verde-fraco);
}
textarea.campo{ min-height:96px; resize:none; line-height:1.4; }

.campo-com-botao{ position:relative; }
.campo-com-botao .campo{ padding-right:56px; }
.campo-olho{
  position:absolute; top:50%; right:5px; transform:translateY(-50%);
  display:grid; place-items:center;
  width:var(--alvo); height:var(--alvo);
  border-radius:10px; color:var(--tinta-3);
}
.campo-olho:active{ background:var(--papel-fundo); color:var(--tinta); }

.aviso-erro{
  display:flex; gap:7px; align-items:flex-start;
  margin-top:10px;
  font-size:14.5px; font-weight:550; color:#9A2617;
}
.aviso-erro::before{
  content:"!"; flex:none;
  display:grid; place-items:center;
  width:19px; height:19px; margin-top:1px;
  font-size:13px; font-weight:700; line-height:1;
  color:#fff; background:#9A2617; border-radius:50%;
}

/* ============================================================
   ENTRADA
   ============================================================ */

.entrada{
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:100dvh;
  padding:
    calc(var(--topo) + 40px)
    var(--gutter)
    calc(var(--base) + 13dvh);
  background:var(--papel);
  overflow-y:auto;
}
.entrada-bloco{ width:100%; max-width:420px; margin:0 auto; }

.entrada-logo{ height:44px; width:auto; margin-bottom:28px; }

.entrada-titulo{
  margin-bottom:30px;
  font-size:40px; font-weight:650; line-height:1.03;
  letter-spacing:-.032em; color:var(--tinta);
}

.entrada-form .botao-grande{ margin-top:16px; }

/* ============================================================
   CABEÇALHO
   ============================================================ */

.cabecalho{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  height:calc(var(--topo) + 54px);
  padding:var(--topo) 10px 0 var(--gutter);
  background:var(--papel);
  border-bottom:1px solid transparent;
  transition:border-color 160ms linear;
}
.cabecalho.rolou{ border-bottom-color:var(--borda); }
.cabecalho-logo{ height:26px; width:auto; }

.cabecalho-titulo{
  position:absolute; left:0; right:0; top:var(--topo);
  display:grid; place-items:center;
  height:54px; pointer-events:none;
  font-size:17.5px; font-weight:650; letter-spacing:-.018em;
}

.selo-exemplo{
  padding:3px 8px; border-radius:7px;
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  color:var(--tinta-2); background:var(--papel-fundo);
}

.botao-cabecalho{
  display:flex; align-items:center; gap:6px;
  min-height:var(--alvo); margin-left:auto; padding:0 10px;
  border-radius:11px;
  font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  color:var(--tinta-2);
  transition:background-color 110ms linear, color 110ms linear;
}
.botao-cabecalho .icone{ width:20px; height:20px; }
.botao-cabecalho:active{ background:var(--papel-fundo); color:var(--tinta); }
.botao-cabecalho-voltar{ position:relative; z-index:1; margin-left:0; margin-right:auto; }

@media (hover:hover) and (pointer:fine){
  .botao-cabecalho:hover{ background:var(--papel-fundo); color:var(--tinta); }
}

/* ============================================================
   ABAS
   ============================================================ */

.abas{
  position:sticky; z-index:38;
  top:calc(var(--topo) + 54px);
  display:flex; align-items:stretch;
  padding:0 6px;
  background:var(--papel);
  border-bottom:1px solid var(--borda);
}
.aba{
  position:relative; z-index:1;
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:7px;
  height:54px; padding:0 4px;
  font-size:15px; font-weight:550; letter-spacing:-.014em;
  color:var(--tinta-3);
  transition:color 150ms linear;
}
.aba-nome{ white-space:nowrap; }
.aba-conta{ font-variant-numeric:tabular-nums; font-weight:600; }
.aba[aria-selected="true"]{ color:var(--tinta); font-weight:650; }
.aba[aria-selected="true"] .aba-conta{ color:var(--tinta-2); }

.aba-marca{
  position:absolute; bottom:-1px; left:0;
  width:100px; height:2.5px; border-radius:2px 2px 0 0;
  background:var(--tinta);
  transform-origin:left center;
  transition:transform 260ms var(--saida);
  will-change:transform;
}

/* ============================================================
   QUADRO
   ============================================================ */

.quadro{
  padding:14px var(--gutter) calc(var(--base) + 104px);
  max-width:560px; margin:0 auto;
}

.cartao{
  position:relative;
  display:block; width:100%;
  margin-bottom:10px; padding:15px 16px;
  text-align:left;
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio-card);
  transition:transform 130ms var(--saida), border-color 150ms linear;
}
.cartao:active{ transform:scale(.985); }
.cartao:last-child{ margin-bottom:0; }

.cartao-titulo{
  font-size:16.5px; font-weight:600; line-height:1.3;
  letter-spacing:-.016em; color:var(--tinta);
  overflow-wrap:break-word;
}

.cartao-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  margin-top:9px;
  font-size:13.5px; font-weight:500; color:var(--tinta-3);
  letter-spacing:-.004em;
}
.cartao-meta-item{ display:flex; align-items:center; gap:5px; }
.cartao-meta-item .icone{ width:16px; height:16px; stroke-width:1.9; }

.cartao-miniatura{
  width:100%; height:128px; margin-top:12px;
  object-fit:cover;
  background:var(--papel-fundo);
  border-radius:9px;
}

/* esperando o sim dela: o único destaque da tela */
.cartao-aguardando{
  border-color:var(--verde-acao);
  border-width:1.5px;
}
.cartao-aguardando::after{
  content:""; position:absolute; inset:-5px; pointer-events:none;
  border:2px solid var(--verde);
  border-radius:19px;
  opacity:0;
  animation:pulso 2.6s var(--saida) infinite;
}
@keyframes pulso{
  0%   { opacity:.38; transform:scale(.988); }
  65%  { opacity:0;   transform:scale(1.012); }
  100% { opacity:0;   transform:scale(1.012); }
}
.cartao-chamada{
  display:flex; align-items:center; gap:6px;
  margin-top:10px;
  font-size:14px; font-weight:650; letter-spacing:-.008em;
  color:var(--verde-acao);
}
.cartao-chamada .icone{ width:17px; height:17px; stroke-width:2; }

/* a chamada de aprovação, pedida pelo Max em 27/10: pílula verde cheia, não frase solta */
.cartao-tag{
  display:inline-flex; align-items:center;
  margin-top:11px; padding:7px 13px;
  border-radius:999px;
  background:var(--verde-acao); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}

/* carrossel: cada arte numerada, pra ninguém aprovar vendo só a primeira */
.peca-item{ margin:0; }
.peca-item + .peca-item{ margin-top:16px; }
.peca-conta{
  margin-top:7px;
  font-size:12.5px; font-weight:650; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-3);
}

/* já aprovado: apagado, sem pulso, sem peso */
.cartao-aprovado .cartao-titulo{ font-weight:500; color:var(--tinta-2); }
.cartao-aprovado .cartao-miniatura{ opacity:.6; }

.vazio{
  padding:48px 8px 40px; text-align:center;
}
.vazio-titulo{
  font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--tinta);
}
.vazio-texto{
  max-width:30ch; margin:8px auto 0;
  font-size:15px; color:var(--tinta-3); line-height:1.5;
}

/* ============================================================
   FAB · a ação mais usada, no alcance do polegar
   ============================================================ */

.fab{
  position:fixed; z-index:45;
  right:var(--gutter); bottom:calc(var(--base) + 18px);
  display:flex; align-items:center; gap:7px;
  height:54px; padding:0 22px 0 18px;
  border-radius:27px;
  font-size:16.5px; font-weight:650; letter-spacing:-.016em;
  color:#fff; background:var(--verde-acao);
  box-shadow:0 8px 22px -6px rgba(10,31,20,.3), 0 2px 6px -2px rgba(10,31,20,.18);
  transition:transform 130ms var(--saida), background-color 120ms linear;
}
.fab:active{ transform:scale(.955); background:var(--verde-press); }
.fab .icone{ stroke-width:2.2; }

@media (hover:hover) and (pointer:fine){
  .fab:hover{ background:var(--verde-press); }
}

/* ============================================================
   FOLHA DE BAIXO PRA CIMA
   ============================================================ */

.veu{
  position:fixed; inset:0; z-index:60;
  background:rgba(10,31,20,.4);
  opacity:0;
  transition:opacity 300ms linear;
}
.veu.abre{ opacity:1; }

.folha{
  position:fixed; z-index:61;
  left:0; right:0; bottom:0;
  display:flex; flex-direction:column;
  max-height:92dvh;
  background:var(--superficie);
  border-radius:var(--raio-folha) var(--raio-folha) 0 0;
  box-shadow:0 -14px 44px -10px rgba(10,31,20,.26);
  transform:translateY(100%);
  transition:transform 420ms var(--folha-curva);
  will-change:transform;
}
.folha.abre{ transform:translateY(0); }
.folha.arrastando{ transition:none; }

.folha-pega{
  display:grid; place-items:center;
  height:26px; flex:none;
  touch-action:none;
}
.folha-pega span{
  width:38px; height:5px; border-radius:3px; background:var(--borda);
}

.folha-topo{
  display:flex; align-items:flex-start; gap:12px;
  padding:4px var(--gutter) 14px;
  flex:none;
}
.folha-titulo{
  flex:1; padding-top:4px;
  font-size:21px; font-weight:650; line-height:1.22;
  letter-spacing:-.024em; color:var(--tinta);
  overflow-wrap:break-word;
}

.folha-corpo{
  flex:1 1 auto;
  padding:0 var(--gutter) 4px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.folha-pe{
  flex:none;
  padding:14px var(--gutter) calc(var(--base) + 14px);
  background:var(--superficie);
  border-top:1px solid var(--borda);
}
.folha-pe:empty{ display:none; }
.folha-pe > * + *{ margin-top:9px; }

/* blocos dentro da folha */

.bloco{ padding-bottom:20px; }
.bloco + .bloco{ border-top:1px solid var(--borda); padding-top:20px; }

.bloco-rotulo{
  margin-bottom:10px;
  font-size:13px; font-weight:650; letter-spacing:.012em;
  text-transform:uppercase; color:var(--tinta-3);
}

.descricao{ font-size:16px; line-height:1.5; color:var(--tinta-2); }

/* o botão maior da tela do card: gravar */
.gravar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:68px;
  border-radius:16px;
  font-size:18.5px; font-weight:650; letter-spacing:-.018em;
  color:#fff; background:var(--verde-acao);
  transition:transform 120ms var(--saida), background-color 140ms linear;
}
.gravar .icone{ width:26px; height:26px; stroke-width:1.9; }
.gravar:active{ transform:scale(.978); background:var(--verde-press); }
.gravar.ativo{ background:var(--tinta); }
.gravar.ativo:active{ background:#132E20; }

.gravar-relogio{
  font-variant-numeric:tabular-nums;
  font-weight:600; letter-spacing:0;
}
.ponto-vivo{
  width:10px; height:10px; flex:none;
  border-radius:50%; background:var(--verde);
  animation:bate 1.1s ease-in-out infinite;
}
@keyframes bate{ 0%,100%{opacity:1} 50%{opacity:.25} }

.audio-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0;
}
.audio-item + .audio-item{ border-top:1px solid var(--borda); }
.audio-tocar{
  display:grid; place-items:center;
  width:var(--alvo); height:var(--alvo); flex:none;
  border-radius:50%;
  color:var(--verde-acao);
  box-shadow:inset 0 0 0 1.5px var(--borda-campo);
  transition:background-color 120ms linear;
}
.audio-tocar:active{ background:var(--verde-fraco); }
.audio-tocar .icone{ width:19px; height:19px; }
.audio-corpo{ flex:1; min-width:0; padding-top:2px; }
.audio-tempo{
  font-size:13px; font-weight:600; color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}
.audio-texto{ margin-top:3px; font-size:15.5px; line-height:1.45; color:var(--tinta); }
.audio-sem-texto{ margin-top:3px; font-size:15px; color:var(--tinta-3); }

.peca{
  width:100%; border-radius:12px; background:var(--papel-fundo);
}
.peca-legenda{ margin-top:9px; font-size:15px; color:var(--tinta-2); line-height:1.45; }

.mover-lista{ display:flex; flex-direction:column; gap:9px; }
.mover-lista.afastado{ margin-top:14px; }
.caixa-ajuste{ margin-top:12px; }
.caixa-ajuste .botao{ margin-top:10px; }
.descricao.afastada{ margin-top:14px; }
.mover-lista .botao{ min-height:52px; justify-content:flex-start; }

.linha-dupla{ display:flex; gap:9px; }
.linha-dupla > *{ flex:1; }

.apagar{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; min-height:var(--alvo); margin-top:4px;
  font-size:15.5px; font-weight:550; color:var(--tinta-3);
  border-radius:11px;
  transition:color 120ms linear, background-color 120ms linear;
}
.apagar .icone{ width:18px; height:18px; }
.apagar:active{ color:#9A2617; background:var(--papel-fundo); }

.pronto{
  display:flex; align-items:center; gap:9px;
  padding:13px 15px; margin-top:10px;
  font-size:15.5px; font-weight:600; color:var(--verde-press);
  background:var(--verde-fraco); border-radius:12px;
}
.pronto .icone{ width:20px; height:20px; stroke-width:2; }

/* ============================================================
   PÁGINA DE ACESSOS
   ============================================================ */

.pagina{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column;
  background:var(--papel);
  transform:translateX(100%);
  transition:transform 340ms var(--saida);
}
.pagina.abre{ transform:translateX(0); }
.pagina .cabecalho{ position:relative; }

.pagina-corpo{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:10px var(--gutter) calc(var(--base) + 32px);
  max-width:560px; width:100%; margin:0 auto;
}

.nota{
  padding:13px 15px; margin-bottom:22px;
  font-size:14.5px; line-height:1.5; color:var(--tinta-2);
  background:var(--papel-fundo); border-radius:12px;
}

.lista-acessos{ border-top:1px solid var(--borda); }
.acesso{ padding:16px 2px; border-bottom:1px solid var(--borda); }
.acesso-plataforma{
  font-size:16.5px; font-weight:650; letter-spacing:-.016em; color:var(--tinta);
}
.acesso-email{
  margin-top:3px; font-size:14.5px; font-weight:500; color:var(--tinta-2);
  user-select:text; -webkit-user-select:text;
  overflow-wrap:anywhere;
}
.acesso-pares{ margin-top:11px; display:flex; flex-direction:column; gap:7px; }
.acesso-par{ display:flex; gap:10px; font-size:14.5px; line-height:1.4; }
.acesso-par dt{ flex:none; width:132px; color:var(--tinta-3); font-weight:550; }
.acesso-par dd{ margin:0; color:var(--tinta); }
.acesso-obs{ margin-top:9px; font-size:14px; color:var(--tinta-3); line-height:1.45; }

.botao-sair{ margin-top:30px; }
.botao-sair .icone{ width:19px; height:19px; }

/* ============================================================
   FAIXA DE DESFAZER
   ============================================================ */

.faixa{
  position:fixed; z-index:70;
  left:var(--gutter); right:var(--gutter);
  bottom:calc(var(--base) + 84px);
  display:flex; align-items:center; gap:12px;
  min-height:54px; padding:8px 8px 8px 16px;
  background:var(--tinta); color:#fff;
  border-radius:14px;
  box-shadow:0 10px 28px -8px rgba(10,31,20,.4);
  transform:translateY(14px); opacity:0;
  transition:transform 280ms var(--saida), opacity 220ms linear;
}
.faixa.abre{ transform:translateY(0); opacity:1; }
.faixa-texto{ flex:1; font-size:15.5px; font-weight:500; }
.faixa-botao{
  display:flex; align-items:center; gap:6px;
  min-height:var(--alvo); padding:0 13px;
  border-radius:10px;
  font-size:15.5px; font-weight:650; letter-spacing:-.01em;
  color:var(--verde);
  transition:background-color 120ms linear;
}
.faixa-botao .icone{ width:18px; height:18px; stroke-width:2; }
.faixa-botao:active{ background:rgba(255,255,255,.12); }

/* ============================================================
   TELA TRAVADA ENQUANTO A FOLHA ESTÁ ABERTA
   ============================================================ */

body.travado{ overflow:hidden; }

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .cartao-aguardando::after{ display:none; }
  .ponto-vivo{ animation:none; }
}

/* ============================================================
   TELA LARGA · a mesma tela, sem esticar a medida do texto
   ============================================================ */

@media (min-width:620px){
  .quadro,.pagina-corpo{ padding-left:24px; padding-right:24px; }
  .folha{
    left:50%; right:auto; width:min(560px,100%);
    transform:translate(-50%,100%);
    border-radius:var(--raio-folha);
    bottom:24px;
    max-height:min(760px,88dvh);
  }
  .folha.abre{ transform:translate(-50%,0); }
  .fab{ right:calc(50% - 280px + 24px); }
  .faixa{ left:50%; right:auto; width:min(528px,calc(100% - 32px)); transform:translateX(-50%) translateY(14px); }
  .faixa.abre{ transform:translateX(-50%) translateY(0); }
}