/* Shared layout refinements for desktop and mobile. */
:root {
  --verde: #01542e;
  --verde-claro: #0a7a4a;
  --borda: #d7dde3;
  --fundo: #f4f6f8;
}

*:focus-visible {
  outline: 3px solid rgba(10, 122, 74, .35);
  outline-offset: 2px;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Acabamento consistente para ações em todas as telas. */
button,
.btn,
.btn-sec,
.btn-gerar,
.btn-scan,
.btn-salvar,
.btn-add-foto,
.btn-cadastrar-func,
button[type="submit"] {
  border-radius: 9px;
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease,
    color .16s ease, box-shadow .16s ease, transform .16s ease;
}

button:not(:disabled),
.btn,
.btn-sec,
.btn-gerar,
.sair {
  cursor: pointer;
}

.btn,
button[type="submit"]:not(.excluir) {
  box-shadow: 0 2px 5px rgba(1, 84, 46, .14);
}

.btn:hover,
button[type="submit"]:not(.excluir):hover {
  box-shadow: 0 4px 10px rgba(1, 84, 46, .2);
  transform: translateY(-1px);
}

.btn:active,
button:active:not(:disabled) {
  transform: translateY(0);
}

button:disabled {
  cursor: not-allowed;
}

.sair {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  transition: background-color .16s ease, color .16s ease;
}

.sair:hover {
  color: var(--verde);
  background: #e8f6ee;
  text-decoration: none;
}

.menu-acoes .botao-menu {
  box-shadow: 0 1px 3px rgba(28, 41, 51, .08);
}

.menu-acoes .botao-menu:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  button,
  .btn,
  .btn-sec,
  .btn-gerar,
  .sair {
    transition: none;
  }
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.scroll-hint {
  display: none;
}

.tabela-mobile {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 640px) {
  body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .wrap {
    width: 100%;
  }

  .topo {
    align-items: flex-start;
  }

  .topo h1 {
    line-height: 1.25;
  }

  .acoes-topo {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .btn,
  button[type="submit"] {
    min-height: 44px;
  }

  .card-topo {
    gap: 12px;
    padding: 18px 20px;
  }

  .card-corpo {
    padding: 20px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .scroll-hint {
    display: block;
    padding: 9px 14px;
    color: #6b7a86;
    background: #f8fafb;
    border-bottom: 1px solid var(--borda);
    font-size: 12px;
  }

  .tabela-mobile,
  .tabela-mobile thead,
  .tabela-mobile tbody,
  .tabela-mobile tr,
  .tabela-mobile td {
    display: block;
    width: 100%;
  }

  .tabela-mobile thead {
    display: none;
  }

  .tabela-mobile tbody {
    padding: 10px;
  }

  .tabela-mobile tbody tr {
    margin: 0 0 10px;
    padding: 6px 0;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: #fff;
  }

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

  .tabela-mobile td {
    padding: 7px 12px;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tabela-mobile td[data-label]::before {
    display: block;
    margin-bottom: 2px;
    color: #6b7a86;
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .tabela-mobile td.acao {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--borda);
  }

  .table-scroll table {
    min-width: 900px;
  }
}

/* ==========================================================================
   Identidade visual mobile (2026-10-20) — baseada no design aprovado
   (G:\...\designe\TI Fontanella — App.html: teal + amarelo, cabeçalho com
   onda, barra de navegação fixa embaixo). Só mobile — desktop fica como
   estava, por isso tudo aqui mora dentro do @media (max-width: 640px).
   Como este bloco é carregado depois do <style> de cada página (o <link>
   vem no fim do <head>), empates de especificidade são resolvidos a favor
   daqui — mesmo truque já usado no bloco de mobile acima pra sobrescrever
   .card-topo/.card-corpo por página. */
@media (max-width: 640px) {
  :root {
    --m-teal: #1590ab;
    --m-teal-escuro: #0e7389;
    --m-teal-claro: #3dbfd9;
    --m-amarelo: #ffc72c;
    --m-fundo: #f2f7f9;
    --m-texto: #17323c;
    --m-texto-sec: #5b7380;
  }

  body {
    font-family: 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif;
    background: var(--m-fundo);
    color: var(--m-texto);
    padding: 0 12px calc(90px + env(safe-area-inset-bottom));
  }

  .wrap { padding-top: 0; }

  /* Cabeçalho vira o "card" teal com onda na base — mesma estrutura HTML
     de cada página (título + ações), só muda a casca visual. */
  .topo {
    background: var(--m-teal);
    color: #fff;
    margin: 0 -12px 18px;
    padding: 22px 16px 26px;
    border-radius: 0 0 24px 24px;
  }
  .topo h1 { color: #fff; }
  .acoes-topo .sair {
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 6px 12px;
  }
  .acoes-topo .sair:hover { color: #fff; background: rgba(255, 255, 255, .24); }

  .btn,
  button[type="submit"]:not(.excluir) {
    background: var(--m-amarelo);
    color: var(--m-texto);
  }
  .btn:hover,
  button[type="submit"]:not(.excluir):hover { background: #e6b324; }

  .card,
  .card-resumo,
  .card-contas {
    border-radius: 18px;
  }

  .badge-pendente, .badge-gerente {
    background: #fff6da; color: #6b5200;
  }
  .badge-padrao, .badge-patrimonio {
    background: #e3f5f9; color: #0e6175;
  }
  .badge-ok {
    background: #e3f5f9; color: #0e6175;
  }

  /* Barra de navegação fixa embaixo — mesmas 4 seções do design
     (Início/Atividades/Patrimônio/Histórico). Cada página marca seu botão
     ativo com a classe .ativo direto no HTML. */
  .nav-mobile {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--m-teal-escuro);
    border-radius: 22px 22px 0 0;
    padding: 9px 6px calc(9px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
  }
  .nav-mobile-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: rgba(255, 255, 255, .65); text-decoration: none; font-size: 11px; font-weight: 600;
    padding: 4px 0;
  }
  .nav-mobile-item .emoji { font-size: 18px; line-height: 1; }
  .nav-mobile-item.ativo { color: var(--m-amarelo); }
}

@media (min-width: 641px) {
  .nav-mobile { display: none; }
}