/* =========================================================================
   Plataforma SST — camada MOBILE
   Carregada DEPOIS de estilo.css. Só ajusta o comportamento no celular/tablet;
   no desktop nada muda.

   • até 900px: menu lateral vira GAVETA (hambúrguer + fundo escurecido)
   • tabelas rolam na horizontal com dica visual
   • campos com 16px (o iPhone não dá zoom ao focar)
   • alvos de toque ≥ 44px, modais em tela cheia
   ========================================================================= */

/* ===================== BOTÃO HAMBÚRGUER ===================== */

.btn-menu-mobile {
  display: none;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 1.15rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .2s;
}
.btn-menu-mobile:hover { background: rgba(255, 255, 255, .26); }

/* fundo escurecido quando a gaveta está aberta */
#egBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, .58);
  backdrop-filter: blur(2px);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
#egBackdrop.ativo { opacity: 1; pointer-events: auto; }

/* ===================== TABLET / CELULAR (≤ 900px) ===================== */

@media (max-width: 900px) {

  .btn-menu-mobile { display: inline-flex; }

  .topbar {
    padding: 0 12px;
    height: 58px;
    gap: 8px;
  }
  .topbar-esq { gap: 8px; min-width: 0; }
  .topbar-logo { height: 30px; }
  .topbar-nome {
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-dir { gap: 6px; }
  .badge-perfil { font-size: .62rem; padding: 3px 8px; }
  .lbl-usuario {
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .78rem;
  }
  .btn-sair { padding: 8px 12px; font-size: .8rem; }

  /* ---- SIDEBAR VIRA GAVETA ---- */
  .corpo { display: block; position: relative; }

  .sidebar {
    position: fixed;
    top: 58px;
    left: 0;
    bottom: 0;
    width: min(84vw, 300px);
    padding: 10px 0 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.22, .68, .36, 1);
    z-index: 60;
    box-shadow: 6px 0 30px rgba(0, 0, 0, .38);
  }
  .sidebar.aberta { transform: translateX(0); }

  /* desfaz o "modo ícones" do estilo.css antigo: aqui a gaveta mostra tudo */
  .sidebar #menu-nav a .txt { display: inline !important; }
  .sidebar #menu-nav .menu-grupo { display: block !important; }

  .sidebar #menu-nav a {
    padding: 13px 18px;
    font-size: .95rem;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .sidebar #menu-nav a span:first-child { font-size: 1.15rem; }

  /* conteúdo ocupa a largura toda */
  .conteudo {
    padding: 16px 14px 34px;
    overflow-x: hidden;
  }

  /* ---- CABEÇALHO DOS MÓDULOS ---- */
  .cab-modulo {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }
  .cab-modulo h1, .cab-modulo h2 { font-size: 1.22rem; }
  .cab-modulo .btn-primario,
  .cab-modulo button { width: 100%; justify-content: center; }

  /* ---- TABELAS ROLÁVEIS ---- */
  .tabela-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;
    padding: 0 14px 4px;
    position: relative;
  }
  .tabela { min-width: 620px; font-size: .82rem; }
  .tabela th, .tabela td { white-space: nowrap; padding: 9px 11px; }

  /* dica: "arraste para o lado" */
  .tabela-wrap::after {
    content: "↔ arraste";
    position: absolute;
    right: 14px;
    top: -4px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--cinza-txt, #94a3b8);
    text-transform: uppercase;
    pointer-events: none;
  }

  /* ---- CARDS / GRIDS ---- */
  .grid-cards { grid-template-columns: 1fr; gap: 14px; }
  .form-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .detalhe-top { flex-direction: column; align-items: flex-start; gap: 12px; }

  .carrossel-wrap { gap: 8px; }
  .carr-btn { width: 40px; height: 40px; font-size: 1.35rem; }
  .emp-card { min-width: 200px; max-width: 200px; }

  /* ---- CAMPOS: 16px evita o zoom automático do iPhone ---- */
  .campo input, .campo select, .campo textarea,
  input, select, textarea {
    font-size: 16px !important;
    min-height: 46px;
    padding: 12px 13px;
  }
  textarea { min-height: 96px; }

  /* ---- BOTÕES COM ALVO DE TOQUE ---- */
  .btn-primario, .btn-secundario, .btn-perigo,
  button:not(.carr-btn):not(.modal-x):not(.btn-menu-mobile) {
    min-height: 44px;
  }

  /* ---- MODAIS EM TELA CHEIA ---- */
  .modal { padding: 0; align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
  .modal-cab { padding: 15px 18px; border-radius: 18px 18px 0 0; }
  .modal-corpo { padding: 18px; }
  .modal-rodape {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    flex-direction: column-reverse;
  }
  .modal-rodape button, .modal-rodape .btn-primario { width: 100%; }

  /* ---- TELA DE LOGIN ---- */
  .tela-login { padding: 18px 14px; }
  .login-box { padding: 30px 22px; border-radius: 16px; }
  .login-logo { max-height: 76px; }
  .login-titulo { font-size: 1.4rem; }

  /* ---- FERRAMENTAS DIVERSAS ---- */
  .tags-linha, .acoes-linha { flex-wrap: wrap; gap: 8px; }
  .inline { flex-wrap: wrap; }
}

/* ===================== CELULAR ESTREITO (≤ 480px) ===================== */

@media (max-width: 480px) {
  .topbar-nome { display: none; }
  .badge-perfil { display: none; }
  .conteudo { padding: 14px 12px 30px; }
  .sidebar { width: 88vw; }
  .cab-modulo h1, .cab-modulo h2 { font-size: 1.14rem; }
  .grid-cards { gap: 12px; }
  .emp-card { min-width: 176px; max-width: 176px; }
  .login-box { padding: 26px 18px; }
}

/* ===================== CELULAR DEITADO / TABLET GRANDE ===================== */
@media (min-width: 901px) {
  .btn-menu-mobile { display: none; }
  #egBackdrop { display: none; }
}

/* ===================== MODO ECONOMIA DE MOVIMENTO ===================== */
@media (prefers-reduced-motion: reduce) {
  .sidebar, #egBackdrop { transition: none; }
}