/* Casca do app: cabecalho baixo, faixa de avisos, area da tela e barra de abas. Celular e a tela principal;
   a partir de 1025 px a barra de abas sobe para o topo (layout de computador). */
@import url('/app/telas/hoje.css');
@import url('/app/telas/buscar.css');
@import url('/app/telas/relatorios.css');

html,body{height:100%}
body{display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; font-size:15px; line-height:1.45}
.cab{display:flex; align-items:center; gap:10px; padding:6px 14px; padding-top:max(6px,env(safe-area-inset-top)); background:var(--faixa); border-bottom:2px solid var(--linha-forte); flex:none}
.cab h1{margin:0; font-size:17px; font-weight:650; line-height:1.25; flex:1 1 auto; min-width:0}
.cab .btn-icone{flex:none; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--texto2); cursor:pointer; border:1px solid var(--linha-forte); border-radius:50%}
.cab .btn-icone:hover{color:var(--acento); border-color:var(--acento)}
.cab .btn-icone:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
#pendentes{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:999px; border:1px solid var(--alerta-borda); background:var(--alerta-fundo); color:var(--alerta-txt); font:inherit; font-size:13px; font-weight:650; cursor:pointer}

#faixa{flex:none; display:flex; flex-direction:column; gap:6px; padding:0 14px}
#faixa:empty{display:none}
#faixa .aviso{display:flex; align-items:center; gap:10px; margin-top:8px; padding:9px 12px; border-radius:9px; border:1px solid; font-size:14px; line-height:1.4}
#faixa .aviso span{flex:1 1 auto; min-width:0}
#faixa .aviso button{flex:none; min-height:44px; padding:0 12px; border-radius:8px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer}
#faixa .aviso.erro{background:var(--erro-fundo); border-color:var(--erro-borda); color:var(--erro-txt)}
#faixa .aviso.alerta{background:var(--alerta-fundo); border-color:var(--alerta-borda); color:var(--alerta-txt)}
#faixa .aviso.info{background:var(--info-fundo); border-color:var(--info-borda); color:var(--info-txt)}

#raiz{flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 14px 88px}   /* rolagem encadeada: sem overscroll-behavior (regra 1). Fundo de 88 px: o fim da lista rola para cima do botao + flutuante (60 + 16 + folga), senao a ultima linha fica tapada */

#abas{flex:none; display:flex; background:var(--faixa); border-top:1px solid var(--linha-forte); padding-bottom:env(safe-area-inset-bottom)}
#abas a{flex:1 1 0; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--texto2); text-decoration:none; font-size:12px; font-weight:600; cursor:pointer}
#abas a svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
#abas a[aria-current="page"]{color:var(--texto); box-shadow:inset 0 3px 0 var(--marca-clara)}
#abas a:focus-visible{outline:2px solid var(--acento); outline-offset:-3px}

.lista-pend{display:flex; flex-direction:column; gap:8px; margin:0 0 14px; padding:0; list-style:none; text-align:left}
.lista-pend li{padding:8px 10px; border:1px solid var(--borda); border-radius:8px; background:var(--cartao); font-size:14px}
.lista-pend small{display:block; color:var(--texto3)}
.lista-pend .acoes{display:flex; gap:8px; margin-top:6px}
.lista-pend .acoes button{min-height:44px; padding:0 12px; border-radius:8px; border:1px solid var(--borda); background:var(--campo); color:var(--texto); font:inherit; font-weight:600; cursor:pointer}
.vazio{padding:28px 12px; text-align:center; color:var(--texto3)}

/* Botao + flutuante (so celular/tablet): toque curto escreve, segurar dita. Fora de #raiz para sobreviver a troca de aba. */
#bt-mais{position:fixed; right:16px; bottom:calc(56px + env(safe-area-inset-bottom) + 16px); z-index:20; width:60px; height:60px; padding:0; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--acento); color:var(--sobre-acento); box-shadow:0 3px 10px rgba(0,0,0,.35); cursor:pointer;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent}
#bt-mais:focus-visible{outline:3px solid var(--texto); outline-offset:3px}
.voz-faixa{position:fixed; left:14px; right:90px; bottom:calc(56px + env(safe-area-inset-bottom) + 16px); z-index:20; display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; border:1px solid; font-size:14px; line-height:1.4}
.voz-faixa[hidden]{display:none}
.voz-faixa.ouvindo{background:var(--info-fundo); border-color:var(--info-borda); color:var(--info-txt)}
.voz-faixa.alerta{background:var(--alerta-fundo); border-color:var(--alerta-borda); color:var(--alerta-txt)}
.voz-parcial{font-weight:400; overflow-wrap:anywhere}
.hj-mic.ouvindo{color:var(--erro-txt); background:var(--erro-fundo)}

@media (min-width:1025px){
  #bt-mais{display:none}
  .voz-faixa{right:auto; bottom:20px; max-width:480px}
  body{flex-direction:column}
  #abas{order:-1; border-top:0; border-bottom:1px solid var(--linha-forte); padding:0 14px}
  #abas a{flex:0 0 auto; flex-direction:row; min-height:44px; padding:0 18px; gap:8px; font-size:14px}
  #abas a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--marca-clara)}
  #raiz{padding:16px 24px}
}