/* Natalis v4.1 — layout para celular (telas até 820px). No computador nada muda. */
.menu-btn,.menu-mobile,#menu-fundo{display:none}
@media (max-width:820px){
  /* Menu lateral vira gaveta, aberta pelo botão ☰ */
  .menu-btn{display:inline-flex;font-size:18px;padding:4px 10px;flex-shrink:0}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:85vw;z-index:1500;transform:translateX(-100%);transition:transform .2s ease;box-shadow:8px 0 24px rgba(0,0,0,.5)}
  body.menu-aberto .sidebar{transform:none}
  body.menu-aberto #menu-fundo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1400}
  .menu-mobile{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-top:1px solid var(--border)}
  .menu-mobile .btn{justify-content:flex-start;width:100%;font-size:13px;padding:9px 12px}
  .menu-mobile .search-wrap,.menu-mobile .search-wrap input[type=text]{width:100%}
  .nav-item{padding:11px 14px;font-size:14px}
  /* Barra do topo compacta */
  .topbar{padding:0 8px;gap:6px}
  .topbar-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .topbar-actions{gap:4px;flex-shrink:0}
  .topbar-actions>.btn:not(.btn-primary){display:none}
  #nuvem-status{font-size:10px !important;max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .content{padding:12px}
  /* Blocos e formulários um embaixo do outro */
  .grid-2,.form-row,.form-row-3,.form-row-4{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:1fr 1fr !important}
  .content [style*="grid-template-columns"],.modal [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .content [style*="repeat(3"],.content [style*="repeat(4"],.modal [style*="repeat(3"],.modal [style*="repeat(4"]{grid-template-columns:1fr 1fr !important}
  .page-header{flex-wrap:wrap;gap:10px}
  .page-header>div:last-child{display:flex;flex-wrap:wrap;gap:6px}
  .page-title-big{font-size:18px}
  .kpi-value{font-size:20px}
  .tabs{width:auto;max-width:100%;overflow-x:auto;flex-wrap:nowrap}
  .tab{white-space:nowrap;padding:8px 12px}
  /* Tabelas, Kanban e calendário deslizam para o lado */
  .content .card{overflow-x:auto}
  .kanban-col{flex:0 0 240px;max-width:none}
  #cal-gantt-header,#cal-gantt-body{min-width:720px}
  .gantt-name{width:90px}
  .acervo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  /* Campos com letra de 16px: o iPhone não dá zoom ao tocar */
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=password],select,textarea{font-size:16px}
  /* Janelas de cadastro ocupam a tela inteira, com Salvar sempre à vista */
  .modal-overlay{padding:0;align-items:stretch}
  .modal{max-width:100% !important;width:100% !important;max-height:none;height:100%;border-radius:0;border:none;display:flex;flex-direction:column}
  .modal-header{position:sticky;top:0;background:var(--card);z-index:2;padding:14px 16px}
  .modal-body{padding:14px 16px;flex:1}
  .modal-footer{position:sticky;bottom:0;background:var(--card);z-index:2;padding:10px 16px;flex-wrap:wrap}
  .modal-close{font-size:22px;padding:4px 8px}
  #toast-container{left:10px;right:10px;bottom:10px}
  .toast{max-width:none}
  /* Tela Meus Projetos (gestor em campo) */
  #mp-projeto{max-width:100% !important;width:100%}
  #screen-meus-projetos .btn{padding:10px 14px;font-size:13px}
  #screen-meus-projetos label{padding:10px 0 !important}
  .nuvem-caixa{padding:20px}
}