/* Ajustes para telemovel. Carregado por ultimo: manda sobre os outros. */

/* Sem realce azul ao tocar, sem atraso de 300ms, sem duplo-toque a ampliar. */
a,button,.celula,summary,label{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Impede o iOS de ampliar a pagina quando se toca num campo.
   Qualquer coisa abaixo de 16px faz o Safari dar zoom. */
@media (max-width:900px){
  input,select,textarea{font-size:16px !important}
}

/* ---- Barra de navegacao em baixo ---- */
.barra-movel{display:none}

@media (max-width:640px){
  .barra-movel{
    position:fixed;left:0;right:0;bottom:0;z-index:15;
    display:flex;background:var(--superficie);
    border-top:1px solid var(--linha);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .barra-movel a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
    padding:.6rem .25rem .55rem;text-decoration:none;
    color:var(--tinta-suave);font-size:.68rem;min-height:52px;
  }
  .barra-movel a.ativo{color:var(--verde-escuro);font-weight:600}
  .barra-movel .icone{font-size:1.15rem;line-height:1}

  /* Enquanto ha horas escolhidas, o resumo ocupa o lugar da barra. */
  body.tem-escolha .barra-movel{display:none}

  .rodape{
    flex-direction:column;gap:.35rem;text-align:center;
    padding-bottom:calc(1.25rem + 64px + env(safe-area-inset-bottom));
  }
  main{padding-bottom:calc(64px + env(safe-area-inset-bottom) + 1.5rem)}
  .topo{padding:.8rem 1rem}
  .resumo{padding-bottom:calc(.9rem + env(safe-area-inset-bottom))}
}

/* A grelha semanal em tabela foi substituida pela tira de dias mais os
   cartoes de hora — tudo em calendario.css, que ja e responsivo. Aqui
   ficam so os retoques de ecra pequeno. */
@media (max-width:640px){
  .cabecalho-grelha{
    align-items:center;gap:.5rem;margin-bottom:.9rem;flex-wrap:nowrap;
  }
  .cabecalho-grelha h1{font-size:1.25rem}
  .cabecalho-grelha .sub{font-size:.8rem}
  .btn-nav{width:44px;height:44px}

  .tira-seta{width:32px;height:32px}
  .td-dia{width:52px}
  .grelha-horas{gap:.4rem}

  .resumo-valores{gap:1.1rem;align-items:center}
  .resumo-valores strong{font-size:1.05rem}
}

/* ---- Resto do site em ecra pequeno ---- */
@media (max-width:640px){
  .caixa{padding:1.15rem 1rem;border-radius:12px}
  main{max-width:100%}
  h1{font-size:1.35rem}

  .totais{gap:1.25rem}
  .resumo-folha{grid-template-columns:1fr 1fr;gap:.6rem}
  .resumo-folha strong{font-size:1.15rem}

  /* Botoes pequenos passam a ter altura de dedo. */
  .mini,.botao-receber.pequeno,.botao-simples{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
    padding:.5rem 1rem;
  }
  .lj-accoes{width:100%;justify-content:flex-end}
  .linha-jogador{gap:.5rem}
  .lj-valor{min-width:64px}

  .form-folha,.form-despesa{gap:.5rem}
  .form-despesa input{flex:1 1 100%}

  .grelha-eventos{grid-template-columns:1fr}
  .linha-link input{font-size:16px}

  table.dados{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---- Backoffice em telemovel ----
   O Sr. Manuel lanca os recebimentos no balcao, provavelmente ao telemovel. */
@media (max-width:900px){
  .topo-admin{
    flex-wrap:wrap;gap:.5rem;padding:.7rem .9rem;
    align-items:center;
  }
  .topo-admin .marca{font-size:.95rem}
  .quem{margin-left:auto;font-size:.8rem;display:flex;gap:.75rem}

  /* Catorze separadores nao cabem numa tira: quem arrasta nunca sabe o
     que ficou de fora. Passam a um painel que abre com tudo a vista. */
  .menu-botao{
    order:3;flex:1 0 100%;display:flex;align-items:center;gap:.4rem;
    background:var(--fundo);border:1px solid var(--linha);border-radius:8px;
    padding:.55rem .85rem;font:inherit;font-size:.9rem;font-weight:600;
    color:var(--tinta);cursor:pointer;min-height:44px;
  }
  .mb-nome{flex:1;text-align:left}
  .mb-seta{color:var(--tinta-suave);font-size:.75rem;transition:transform .15s}
  body.menu-aberto .mb-seta{transform:rotate(180deg)}

  .menu-admin{
    order:4;flex:1 0 100%;display:none;
    grid-template-columns:1fr 1fr;gap:.3rem;
    margin-top:.5rem;padding-bottom:.25rem;
  }
  body.menu-aberto .menu-admin{display:grid}
  .menu-admin a{
    padding:.7rem .8rem;border-radius:8px;font-size:.88rem;
    background:var(--fundo);border:1px solid var(--linha);
    min-height:44px;display:flex;align-items:center;
  }

  .conteudo-admin{padding:1rem .8rem 3rem}

  /* Tabelas largas: arrastar na horizontal em vez de rebentar o ecra. */
  .conteudo-admin table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* MENOS O CALENDARIO.
     `display:block` numa <table> desliga a maquinaria de tabela: o
     `table-layout:fixed` deixa de valer, as colunas voltam a ser medidas
     pelo conteudo e a grelha fica mais larga do que o ecra. Pior do que
     isso: a pagina inteira fica mais larga, e um elemento `position:fixed`
     com `width:100%` passa a medir essa largura — foi assim que a ficha
     da reserva saiu fora do ecra pela direita.
     A grelha ja tem o seu proprio `.grelha-envolvente` para rolar. */
  .conteudo-admin table.calendario{
    display:table;overflow:visible;width:100%;table-layout:fixed;
  }

  /* Botoes de lancar pagamento com altura de dedo. */
  .conteudo-admin button,
  .conteudo-admin .botao-simples,
  .conteudo-admin .mini{min-height:44px}

  /* Excepto no calendario. Ali sao 119 celulas: a 44px a semana passava
     dos 800px e voltava a nao caber. O alvo continua a ter mais de 26px de
     altura e a largura toda da coluna, que chega para o dedo — e quem
     falha tem a ficha para fechar, nao perde nada. */
  .conteudo-admin .calendario button{min-height:0}
}