.menu-admin { display: contents; }
.btn-menu-admin { display: none; }
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { padding: 0.9rem !important; overflow-x: hidden; }
  .extranet-header { margin: -0.9rem -0.9rem 1rem !important; padding: 0.6rem 0.9rem !important; padding-top: max(0.6rem, env(safe-area-inset-top)) !important; position: sticky; top: 0; z-index: 40; }
  .extranet-header h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Menu: some da barra e abre pelo ☰ no cabeçalho */
  .btn-menu-admin { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 0 auto !important; width: 2.6rem; height: 2.6rem; padding: 0 !important; background: transparent !important; color: #F5F5DC !important; border: 1px solid rgba(245,245,220,0.35) !important; border-radius: 6px; font-size: 1.3rem !important; line-height: 1; cursor: pointer; flex: none; }
  .menu-admin, .info-saida { display: none !important; }
  body.menu-aberto .menu-admin { display: flex !important; flex-direction: column; gap: 0; position: fixed; left: 0; right: 0; top: var(--altura-cabecalho, 3.4rem); bottom: 0; z-index: 39; background: #F5F5DC; padding: 0.5rem 0.9rem 1rem; overflow-y: auto; }
  body.menu-aberto .menu-admin .btn-link { background: transparent !important; color: #1E2E18 !important; font-size: 1rem !important; padding: 0.95rem 0.2rem !important; border-bottom: 1px solid rgba(30,46,24,0.12) !important; width: 100%; text-align: left; }
  body.menu-aberto .info-saida { display: flex !important; flex-wrap: wrap; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; margin: 0 !important; background: #fff; padding: 0.9rem; padding-bottom: max(0.9rem, env(safe-area-inset-bottom)); font-size: 0.9rem !important; border-top: 1px solid rgba(30,46,24,0.15); }
  body.menu-aberto { overflow: hidden; }
  /* No celular quem fica fixo é o cabeçalho verde; a barra de ações rola junto com a página */
  .ash-barra-fixa { position: static !important; box-shadow: none !important; margin: 0 0 1rem !important; padding: 0 !important; background: none !important; }
  body:not(.menu-aberto) .toolbar:not(:has(> :not(.menu-admin):not(.info-saida))) { display: none !important; }

  /* Barras de ações: botões com área de toque maior */
  .toolbar { gap: 0.5rem !important; }
  button, .btn-link, .toolbar select { min-height: 2.5rem; }
  .btn-link { display: inline-flex; align-items: center; }
  .toolbar input[type=text], .toolbar input[type=search], .toolbar select { min-width: 0 !important; flex: 1 1 100%; }

  /* iPhone dá zoom em campo com fonte menor que 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }

  /* Janelas de edição ocupam a tela toda (a tarefa já tem painel próprio, src/tarefas.js) */
  dialog:not(#dlg-tarefa) { min-width: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100% !important; max-height: 100% !important; margin: 0 !important; border-radius: 0 !important; padding: 1rem !important; padding-top: max(1rem, env(safe-area-inset-top)) !important; padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; box-sizing: border-box; }
  #dlg-tarefa .dlg-x { margin: 0.35rem 0.35rem 0 0.35rem; }
  dialog .linha-2, dialog .linha-3 { flex-wrap: wrap; }
  dialog .linha-2 > div, dialog .linha-3 > div { flex: 1 1 100% !important; }
  dialog .acoes { position: sticky; bottom: calc(-1 * max(1rem, env(safe-area-inset-bottom))); background: #fff; padding: 0.7rem 0; margin-bottom: -0.2rem; flex-wrap: wrap; }

  .status-badge { white-space: normal !important; display: inline-block; }

  /* Tabela marcada .cartoes-mobile sem layout próprio: cartão de duas colunas, primeira célula como título.
     :where() deixa a especificidade baixa, então o layout próprio de cada tela sempre ganha. */
  :where(table.cartoes-mobile) { display: block; background: none; }
  :where(table.cartoes-mobile) thead { display: none; }
  :where(table.cartoes-mobile) tbody { display: block; }
  :where(table.cartoes-mobile) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.7rem; background: #fff; border: 1px solid rgba(30,46,24,0.15); padding: 0.75rem 0.85rem; margin-bottom: 0.55rem; }
  :where(table.cartoes-mobile) td { border: none; padding: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  :where(table.cartoes-mobile) td:empty { display: none; }
  :where(table.cartoes-mobile td[data-rotulo])::before { content: attr(data-rotulo); display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #777; margin-bottom: 0.1rem; font-weight: 400; }
  :where(table.cartoes-mobile) td:first-child { grid-column: 1 / -1; font-weight: 600; font-size: 0.98rem; }
  :where(table.cartoes-mobile) td:first-child::before { display: none; }
  :where(table.cartoes-mobile) td:last-child:not(:first-child) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; }
  :where(table.cartoes-mobile) td:last-child button { flex: 1 1 auto; margin: 0; }
}
/* Tabelas largas rolam de lado dentro de uma caixa em vez de estourar a tela (celular e tablet) */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }