/* Celulares e tablets: tudo o que adapta o RBytesMarinas a telas pequenas e ao toque fica neste arquivo.
   É carregado depois de site.css (área logada) e de site-publico.css (página inicial e telas de acesso), nos três
   layouts, então sobrescreve as regras deles com a mesma especificidade.

   Faixas usadas (as mesmas do Bootstrap):
   - toque (pointer: coarse): celulares e tablets, em qualquer largura;
   - até 991.98px: tablets e celulares (o menu vira o botão "hambúrguer");
   - até 575.98px: celulares.

   As tabelas viram cartões no celular; o título de cada coluna ao lado do valor vem do atributo data-rotulo,
   preenchido pelo site.js a partir do cabeçalho da tabela. */

/* =====================================================================================================
   Geral
   ===================================================================================================== */

/* O iOS aumenta sozinho o texto ao girar o aparelho; o layout já se adapta à largura. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Elementos com position: absolute dentro de uma tabela (ex.: o texto oculto "Ações" do cabeçalho) passam a ter
   a área de rolagem como referência: antes escapavam dela, alargavam a página inteira e empurravam o botão do
   WhatsApp para fora da tela. */
.table-responsive {
  position: relative;
}

/* Datas e horários no iOS: o Safari centraliza o valor e ignora a largura do campo. */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="month"].form-control {
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}

input.form-control::-webkit-date-and-time-value {
  text-align: left;
}

/* =====================================================================================================
   Telas de toque (celulares e tablets, pelo tipo de ponteiro ou pela largura)
   ===================================================================================================== */

@media (pointer: coarse), (max-width: 991.98px) {
  /* Campos com menos de 16px fazem o iPhone e o iPad darem zoom na página ao tocar no campo. */
  .form-control,
  .form-select,
  .input-group-text,
  .input-group-sm > .form-control,
  .input-group-sm > .form-select,
  .input-group-sm > .input-group-text {
    font-size: 16px;
  }

  /* Alvos de toque com pelo menos ~40px de altura (os botões pequenos e os links soltos tinham de 20 a 29px). */
  .btn-sm {
    min-height: 2.5rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .navegacao-periodo .btn {
    min-width: 2.5rem;
  }

  .abas a {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .voltar {
    padding: 0.6rem 0;
    margin-top: 0.9rem;
  }

  .voltar + .cabecalho-pagina {
    margin-top: 0;
  }

  a.btn-link-discreto,
  .link-discreto {
    display: inline-block;
    padding: 0.55rem 0;
  }

  .dropdown-item {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  /* Etiqueta de situação que é link (ex.: "Faturado" leva à fatura). */
  a.situacao {
    padding: 0.6rem 0.85rem;
  }
}

/* Sem mouse, o "hover" fica preso depois do toque: sem o efeito de levantar cartões e botões. */
@media (hover: none) {
  .recurso:hover,
  .whatsapp-flutuante:hover {
    transform: none;
  }
}

/* =====================================================================================================
   Tablets e celulares (até 991.98px)
   ===================================================================================================== */

@media (max-width: 991.98px) {
  /* ---- Área logada: menu recolhido ---- */

  .navbar-marina .navbar-collapse {
    padding-top: 0.75rem;
  }

  .navbar-marina .navbar-nav {
    gap: 0.15rem;
  }

  .navbar-marina .nav-link {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .navbar-marina .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.98);
  }

  /* Menu do usuário: dentro do menu recolhido, abre no fluxo da página (não por cima dos itens). */
  .navbar-marina .navbar-collapse .dropdown {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .navbar-marina .navbar-collapse .dropdown-menu {
    position: static;
    margin-top: 0.5rem;
  }

  /* ---- Site público: menu do topo ---- */

  .topo .navbar-collapse {
    padding: 1rem 0 0.5rem;
  }

  /* O topo é fixo: com o celular deitado, o menu aberto rola em vez de ficar cortado. */
  .topo .navbar-collapse.show,
  .topo .navbar-collapse.collapsing {
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }

  .topo-acoes {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0.5rem;
  }

  /* ---- Telas de acesso (login, cadastro e senha): só o formulário, sem a vitrine ---- */

  .autenticacao-grade {
    grid-template-columns: 1fr;
  }

  .autenticacao-vitrine {
    display: none;
  }

  .autenticacao-marca-movel {
    display: inline-block;
  }

  .autenticacao-formulario {
    justify-content: flex-start;
    padding-top: 2.5rem;
    padding-bottom: 6rem; /* o último link não fica embaixo do botão do WhatsApp */
  }
}

/* =====================================================================================================
   Só tablets (576px a 991.98px): tabelas compactas, para caberem sem rolar de lado com o tablet em pé
   ===================================================================================================== */

@media (min-width: 576px) and (max-width: 991.98px) {
  .tabela {
    font-size: 0.9rem;
  }

  .tabela th,
  .tabela td {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  /* Detalhes de uma célula (ex.: "Pago em 02/10/2026") quebram linha mesmo em colunas sem quebra. */
  .tabela .celula-detalhe {
    white-space: normal;
  }

  .tabela th:first-child,
  .tabela td:first-child {
    padding-left: 1rem;
  }

  .tabela th:last-child,
  .tabela td:last-child {
    padding-right: 1rem;
  }

  /* Botões de ação quebram linha dentro da célula em vez de alargar a tabela. */
  .tabela .acoes {
    white-space: normal;
  }

  .tabela .acoes .btn {
    margin: 0.15rem 0;
  }

  /* Os rótulos do cabeçalho (ex.: "Valor unitário") quebram linha em vez de alargar a coluna. */
  .tabela th {
    white-space: normal;
  }
}

/* =====================================================================================================
   Celulares (até 575.98px)
   ===================================================================================================== */

@media (max-width: 575.98px) {
  /* ---- Espaçamentos da área logada ---- */

  .cartao-corpo,
  .cartao-cabecalho,
  .cartao-rodape,
  .agenda-item,
  .embarcacao {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .cabecalho-pagina {
    margin: 1.5rem 0 1.25rem;
  }

  /* Ações do cabeçalho da página dividem a largura: mais fáceis de alcançar com o polegar. */
  .cabecalho-acoes {
    width: 100%;
  }

  .cabecalho-acoes > .btn {
    flex: 1 1 auto;
  }

  .boas-vindas {
    margin-top: 1.5rem;
    padding: 1.75rem 1.4rem;
  }

  .indicador {
    padding: 1rem 1.1rem;
  }

  .indicador-valor {
    font-size: 1.35rem;
    white-space: nowrap;
  }

  /* ---- Agenda: a situação desce para baixo do nome ---- */

  .agenda-item {
    grid-template-columns: 3.6rem 1fr;
  }

  .agenda-item .situacao {
    grid-column: 2;
    justify-self: start;
  }

  /* ---- Filtros: campos dividem a linha, dois por vez ---- */

  .filtros > div {
    flex: 1 1 9rem;
    min-width: 0;
    max-width: none !important; /* a busca tem largura máxima inline, pensada para o computador */
  }

  /* ---- Listas de dados (rótulo e valor): o rótulo fica em cima quando não cabe ao lado ---- */

  .dados {
    grid-template-columns: minmax(6.5rem, max-content) 1fr;
    gap: 0.5rem 1rem;
  }

  /* ---- Tabelas viram cartões ----
     A primeira célula é o título do cartão; as demais mostram o nome da coluna (data-rotulo) à esquerda e o
     valor à direita; a coluna de ações fica embaixo, com os botões lado a lado. */

  .tabela,
  .tabela tbody,
  .tabela tfoot {
    display: block;
    width: 100%;
  }

  .tabela thead {
    display: none;
  }

  .tabela tbody tr,
  .tabela tfoot tr {
    display: block;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--linha-suave);
  }

  .tabela tbody tr:last-child {
    border-bottom: 0;
  }

  /* Rodapé (totais): mais um cartão, com fundo próprio. */
  .tabela tfoot tr {
    border-top: 1px solid var(--linha);
    border-bottom: 0;
    background-color: #fcfbf7;
  }

  .tabela td,
  .tabela tfoot td {
    display: flow-root;
    padding: 0.3rem 0;
    border: 0;
    text-align: right;
  }

  .tabela tbody tr:hover td {
    background-color: transparent;
  }

  .tabela td:empty {
    display: none;
  }

  .tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    float: left;
    margin-right: 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6rem;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    color: var(--texto-suave);
  }

  /* Título do cartão */
  .tabela tbody td:first-child,
  .tabela tfoot td:first-child {
    padding-top: 0;
    padding-bottom: 0.4rem;
    text-align: left;
  }

  .tabela tbody td:first-child::before,
  .tabela tfoot td:first-child::before {
    content: none;
  }

  /* Campos editáveis dentro da tabela (consumos da descida): o campo ocupa a linha, abaixo do rótulo. */
  .tabela td .input-group {
    margin-top: 0.15rem;
  }

  /* Ações */
  .tabela td.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.65rem;
    text-align: left;
    white-space: normal;
  }

  .tabela td.acoes::before {
    content: none;
  }

  /* ---- Site público: abertura ---- */

  .hero {
    padding: 7.5rem 0 7rem;
  }

  .cartoes-demo {
    grid-template-columns: 1fr;
  }

  .aviso-flutuante {
    position: relative;
    left: auto;
    bottom: auto;
    margin: -1.25rem auto 0;
  }

  /* ---- Botão do WhatsApp ----
     Na área logada ele cobria os valores e situações alinhados à direita nos cartões ao rolar: some no celular,
     e o suporte fica no menu do usuário ("Suporte pelo WhatsApp"). Nas páginas públicas, fica um pouco menor. */

  .area-logada .whatsapp-flutuante {
    display: none;
  }

  .whatsapp-flutuante {
    width: 3.1rem;
    height: 3.1rem;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .whatsapp-flutuante svg {
    width: 26px;
    height: 26px;
  }
}