/* 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 deu lugar ao calendario do mes — ver calendario.css. */
@media (max-width:640px){
  .calendario{padding:.8rem .7rem .9rem}
  .cal-dia{font-size:.9rem;border-radius:9px}
  .cal-semana,.cal-dias{gap:3px}
}

/* ---- restos da grelha antiga (ja nao usada) ---- */
.tira-dias{display:none}

@media (max-width:640px){
  .tira-dias{
    display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:.15rem .15rem .9rem;margin:0 -.15rem;
  }
  .tira-dias::-webkit-scrollbar{display:none}
  .td-dia{
    flex:0 0 auto;width:52px;padding:.5rem 0;border-radius:12px;
    border:1px solid var(--linha);background:var(--superficie);
    font:inherit;color:var(--tinta-suave);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:.1rem;
  }
  .td-nome{font-size:.66rem;text-transform:lowercase}
  .td-num{font-size:1.1rem;font-weight:700;color:var(--tinta)}
  .td-dia.ativo{
    background:var(--verde);border-color:var(--verde-escuro);color:#fff;
  }
  .td-dia.ativo .td-num{color:#fff}
  .td-dia.esgotado .td-num{color:var(--tinta-suave);font-weight:600}
  .td-dia.esgotado::after{
    content:'';width:4px;height:4px;border-radius:50%;
    background:#d8dcd6;margin-top:.1rem;
  }
  .td-dia.ativo.esgotado::after{background:rgba(255,255,255,.6)}

  .grelha-envolvente{overflow-x:visible}
  .grelha{min-width:0;border-spacing:0;padding:4px 6px}
  .grelha thead{display:none}

  /* Esconde todos os dias; a seguir mostra so o escolhido. */
  .grelha tr > *:not(:first-child){display:none}
  .grelha[data-dia="0"] tr > *:nth-child(2),
  .grelha[data-dia="1"] tr > *:nth-child(3),
  .grelha[data-dia="2"] tr > *:nth-child(4),
  .grelha[data-dia="3"] tr > *:nth-child(5),
  .grelha[data-dia="4"] tr > *:nth-child(6),
  .grelha[data-dia="5"] tr > *:nth-child(7),
  .grelha[data-dia="6"] tr > *:nth-child(8){display:table-cell}

  /* Em border-collapse:separate a borda tem de ir nas celulas, nao na linha. */
  .grelha tbody td,
  .grelha tbody th.hora{border-bottom:1px solid var(--linha)}
  .grelha tbody tr:last-child td,
  .grelha tbody tr:last-child th.hora{border-bottom:0}

  .grelha th.hora{
    width:64px;text-align:left;padding:.9rem .5rem .9rem .4rem;
    font-size:.95rem;color:var(--tinta);font-weight:600;
    vertical-align:middle;
  }
  .grelha td{padding:.3rem 0;vertical-align:middle}

  /* Alvos de toque grandes: uma linha por hora, a largura toda. */
  .celula{
    min-height:52px;display:flex;align-items:center;justify-content:center;
    font-size:1rem;border-radius:10px;
  }
  /* Sem rato nao ha hover: o sino tem de estar sempre visivel,
     senao ninguem descobre que pode pedir aviso. */
  .celula.ocupada{font-size:.85rem;gap:.4rem}
  a.celula.ocupada .sino{display:none}
  a.celula.ocupada::after{
    content:'🔔';font-size:.8rem;opacity:.55;
  }
  .celula.passada{min-height:44px}

  .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}
  .navegacao{flex:0 0 auto}
  .btn-nav{width:44px;height:44px}

  .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}

  /* Onze separadores nao cabem: passam a tira que se arrasta. */
  .menu-admin{
    order:3;flex:1 0 100%;display:flex;gap:.25rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -.9rem;padding:.15rem .9rem .1rem;
  }
  .menu-admin::-webkit-scrollbar{display:none}
  .menu-admin a{
    flex:0 0 auto;white-space:nowrap;padding:.5rem .7rem;
    border-radius:8px;font-size:.85rem;
  }

  .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}

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