/* Hub de Operações: layout do web e do app (mesma base, se adapta à largura). Tokens em tema.css. */
* { box-sizing: border-box }
html, body { height: 100% }
body { font-size: 16px; line-height: 1.45 }
[hidden] { display: none !important }
.oculto-acess { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* casca */
.casca { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: auto 1fr }
.topo { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20 }
.topo .logo { height: 26px; width: auto }
.topo .espaco { flex: 1 }
.topo .quem { font-size: 14px; color: var(--t-suave); text-align: right }
.topo .quem b { display: block; color: var(--t-forte) }
.menu { background: var(--faixa); padding: 14px 0 28px; overflow-y: auto }
.menu a { display: flex; gap: 10px; align-items: center; padding: 10px 20px; color: var(--inv-t2); text-decoration: none; border-left: 3px solid transparent; font-size: 15px }
.menu a:hover { color: var(--inv-t); background: rgba(255,255,255,.06) }
.menu a.on { color: var(--inv-t); font-weight: 700; background: var(--azul-escuro); border-left-color: var(--azul-metal) }
.menu .grupo { margin: 14px 20px 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-t2) }
.area { padding: 24px 28px 96px; min-width: 0; display: flex; flex-direction: column; gap: 18px }
.estado-rede { font-size: 13px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok); font-weight: 700 }
.estado-rede.off { background: var(--at-bg); color: var(--at) }
.sino { position: relative }
.sino .contagem { position: absolute; top: -6px; right: -6px; background: var(--erro); color: #fff; font-size: 12px; border-radius: 999px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px }

/* celular: menu vira gaveta, botões grandes, sem rolagem lateral */
@media (max-width: 860px) {
  .casca { grid-template-columns: minmax(0, 1fr) }
  .menu { display: none }  /* no celular a navegação é a barra de baixo e o "Mais" (que lista tudo o que o menu tem) */
  .area { padding: 16px 14px 110px }
  .topo { padding: 8px 12px; flex-wrap: wrap; gap: 8px }
  .topo .btn { min-height: 40px; padding: 0 12px; font-size: 15px }
  .topo .logo { height: 20px }
  .topo .quem { display: none }
  h1.t { font-size: 25px }
  .tab thead { display: none }
  .tab, .tab tbody, .tab tr, .tab td { display: block; width: 100% }
  .tab tr { border-bottom: 1px solid var(--borda); padding: 8px 0 }
  .tab td { border: none; padding: 4px 6px }
  .tab td::before { content: attr(data-rotulo); display: block; font-size: 12px; color: var(--t-fraco); font-weight: 700 }
}

/* blocos */
.linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.linha.fim { justify-content: flex-end }
.pilha { display: flex; flex-direction: column; gap: 12px }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px }
.form .largo { grid-column: 1 / -1 }
.erro-campo { color: var(--erro); font-size: 14px; margin: 4px 0 0 }
.campo.invalido { border-color: var(--erro); border-width: 2px }
.obrig { color: var(--erro) }
.ajuda { font-size: 13px; color: var(--t-fraco); margin: 4px 0 0 }
.busca { max-width: 360px }
.paginas { display: flex; gap: 8px; align-items: center; justify-content: flex-end }
.vazio { padding: 28px; text-align: center; color: var(--t-suave) }
.carregando { padding: 20px; color: var(--t-suave) }
.tile-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px }

/* janela (modal) e avisos rápidos */
.janela-fundo { position: fixed; inset: 0; background: rgba(7,24,42,.62); display: grid; place-items: center; z-index: 100; padding: 16px }
.janela { background: var(--superficie); border-radius: var(--r-lg); box-shadow: var(--sombra-2); width: min(640px, 100%); max-height: 92vh; overflow: auto; padding: 22px }
.janela.critica { border-top: 6px solid var(--erro) }
.torrada { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--faixa); color: #fff; padding: 12px 18px; border-radius: var(--r-md); z-index: 200; box-shadow: var(--sombra-2); max-width: 92vw }
.torrada.erro { background: var(--erro) }

/* entrada */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, var(--faixa), var(--azul-escuro) 55%, var(--azul)) }
.entrada .cartao { width: min(440px, 100%) }
.entrada .logo { height: 34px; margin-bottom: 14px }

/* câmera */
.camera { position: relative; background: #000; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 4; max-width: 420px }
.camera video, .camera img { width: 100%; height: 100%; object-fit: cover; display: block }
.previa { max-width: 420px; border-radius: var(--r-lg); border: 1px solid var(--borda) }

/* quadro de demandas */
.quadro { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
.quadro .coluna { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 14px }
.quadro .num-grande { font-size: 32px; font-weight: 700; color: var(--azul-titulo) }

/* crachá */
.cracha { width: min(360px, 100%); background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-2); overflow: hidden; text-align: center }
.cracha .faixa-c { background: var(--faixa); padding: 16px }
.cracha .faixa-c img { height: 24px; filter: brightness(0) invert(1) }
.cracha .qr { width: 220px; height: 220px; margin: 16px auto }
.cracha .foto { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin-top: 18px; border: 3px solid var(--azul) }

/* chat */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px }
.msg { background: var(--superficie-2); border-radius: var(--r-lg); padding: 10px 14px; max-width: 80% }
.msg.minha { align-self: flex-end; background: var(--azul-claro) }
.msg .de { font-size: 12px; color: var(--t-fraco); font-weight: 700 }

/* documento no timbrado (na tela) */
.folha { position: relative; width: min(794px, 100%); aspect-ratio: 210 / 297; background: #fff url('../img/timbrado-pagina.png') center / 100% 100% no-repeat; box-shadow: var(--sombra-1); margin: 0 auto }
.folha .corpo-doc { position: absolute; left: 7%; right: 13%; top: 11.5%; bottom: 5%; overflow: auto; color: #000; font-family: "Trebuchet MS", Arial, sans-serif; font-size: clamp(10px, 1.6vw, 14px) }
.folha .corpo-doc * { color: #000 }
.folha table { width: 100%; border-collapse: collapse; margin: 0 0 10px }
.folha td, .folha th { border: 1px solid #000; padding: 4px 6px; text-align: left; vertical-align: top }
.folha .ass { display: flex; gap: 24px; margin-top: 36px }
.folha .ass div { flex: 1; border-top: 1px solid #000; text-align: center; padding-top: 4px }
.folha .dir { text-align: right }
.linha .espaco { flex: 1 }

/* navegação de baixo (celular) e atalho da AVI */
.nav-baixo { display: none }
.avi-flutua { position: fixed; right: 18px; bottom: 22px; z-index: 25; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--azul-metal), var(--azul)); color: var(--btn-txt); font-weight: 700; text-decoration: none; box-shadow: var(--brilho) }
.lista-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px }
.lista-links a { display: flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--borda); text-decoration: none; font-weight: 600 }
@media (max-width: 860px) {
  .nav-baixo { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 24; background: var(--superficie); border-top: 1px solid var(--borda);
    box-shadow: 0 -6px 18px rgba(6,42,77,.12); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) }
  .nav-baixo a { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px;
    font-weight: 600; color: var(--t-suave); text-decoration: none; border-radius: var(--r-md); padding: 0 2px }
  .nav-baixo a.on { color: var(--azul-titulo); background: var(--azul-claro); font-weight: 700 }
  .avi-flutua { bottom: 76px; right: 12px }
}

/* filtros acima da lista e campo de arquivo */
.filtros { align-items: flex-end }
.filtro { display: flex; flex-direction: column; min-width: 180px; flex: 0 1 220px }
.campo-arquivo .linha { gap: 8px }
.aviso.ok { background: var(--ok-bg); border-left-color: var(--ok) }

/* trilha, quadro, evidências e decisão */
.etapa { background: var(--trilha-5) }
.etapa[data-pos="1"] { background: var(--trilha-1) } .etapa[data-pos="2"] { background: var(--trilha-2) } .etapa[data-pos="3"] { background: var(--trilha-3) }
.etapa[data-pos="4"] { background: var(--trilha-4) } .etapa[data-pos="5"] { background: var(--trilha-5) } .etapa[data-pos="6"] { background: var(--trilha-6) }
.etapa[data-pos="7"] { background: var(--trilha-7) } .etapa[data-pos="8"] { background: var(--trilha-8) } .etapa[data-pos="9"] { background: var(--trilha-9) }
.etapa[data-pos="10"] { background: var(--trilha-10) } .etapa[data-pos="11"] { background: var(--trilha-11) } .etapa[data-pos="12"] { background: var(--trilha-12) }
.trilha { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px }
.trilha .passo { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); background: var(--trilha-off); border: 1px solid var(--borda); font-size: 14px }
.trilha .passo .n { font-weight: 700; color: var(--azul-titulo) }
.trilha .passo.feita { background: var(--azul-claro) }
.trilha .passo.aqui { border: 2px solid var(--azul); font-weight: 700 }
.trilha .passo.dispensada, .trilha .passo.nao_se_aplica { text-decoration: line-through; color: var(--t-fraco) }
.trilha .passo.dispensada .mini, .trilha .passo.nao_se_aplica .mini { text-decoration: none }
.cartao.fino { padding: 12px 14px; box-shadow: none }
.substituida { opacity: .7 }
.grade-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.link { background: none; border: none; padding: 0; color: var(--azul-link); text-decoration: underline; font: inherit; cursor: pointer }
.gate.critico { border-left: 4px solid var(--azul) }
.quadro-q { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px }
.coluna-q { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 140px }
.cartao-q { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px }
.faixa-etapas { display: none }
@media (max-width: 860px) {
  .quadro-q { display: block }
  .coluna-q { display: none }
  .coluna-q.visivel { display: flex }
  .faixa-etapas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px }
  .faixa-etapas .chip { flex: 0 0 auto; min-height: 40px }
}
.msg .iniciais { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--azul-titulo); color: var(--btn-txt); font-size: 11px; font-weight: 700 }
.msg .acoes-m { gap: 12px; margin-top: 4px }
.texto-m { white-space: pre-wrap; word-break: break-word }
.foto-previa { width: 88px; height: 88px; border-radius: 50%; background: var(--azul-claro); color: var(--azul-titulo); border: 3px solid var(--azul); display: inline-grid; place-items: center; font-size: 30px; font-weight: 700; overflow: hidden }
.foto-previa img { width: 100%; height: 100%; object-fit: cover }
.papel-parede { display: block; width: 100%; max-width: 720px; border: 1px solid var(--borda); border-radius: var(--r-md) }
.erro-txt { color: var(--erro); font-weight: 700 }
.ok-txt { color: var(--ok); font-weight: 700 }
.lista-tarefas { list-style: none; margin: 0; padding: 0 }
.tarefa { gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda-fina) }
.tarefa input[type=checkbox] { width: 22px; height: 22px }
.tarefa.feita label { text-decoration: line-through; color: var(--t-fraco) }

/* aviso de transparência: sempre visível, nunca recolhido */
.aviso-transparencia { border: 1px solid var(--borda-forte); border-left: 4px solid var(--azul); border-radius: var(--r-md); padding: 14px 16px; background: var(--superficie-2); display: flex; flex-direction: column; gap: 8px }
.aviso-transparencia h2.t { font-size: 17px }
.entrada .cartao { max-width: 560px }

/* tema escuro: a logomarca oficial não é recolorida; ela fica sobre uma placa clara, como no impresso */
[data-tema="escuro"] img.logo { background: #FFFFFF; padding: 4px 8px; border-radius: 8px; box-sizing: content-box }

/* celular: o topo é uma linha só (logo, conexão e avisos); tema e sair ficam em "Mais" */
@media (max-width: 860px) {
  .topo { flex-wrap: nowrap }
  .topo #tema, .topo .sair, .topo #pendencias { display: none }
}
.acrescentar { align-items: flex-end; flex-wrap: wrap }
.acrescentar .largo { flex: 1 1 260px }
/* QR code do aplicativo: sempre escuro sobre branco (a câmera precisa de contraste, inclusive no tema escuro) */
#qr-img { background: #fff; padding: 12px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); width: 220px; height: 220px; max-width: 100% }
#qr-resumo { overflow-wrap: anywhere }