/* Papillon OS no celular: gaveta de menu, barra de abas do cliente, tabelas em cartões, banner de instalação.
   Tudo aqui só vale em telas pequenas; no computador nada muda. */
.m-only{ display:none; }
@media (max-width:900px){
  .m-only{ display:flex; }
  html,body{ height:100%; }
  .app{ height:100vh; height:100dvh; }
  body{ -webkit-text-size-adjust:100%; }

  /* menu vira gaveta */
  .sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:70; width:84vw; max-width:300px; min-width:0;
    transform:translateX(-102%); transition:transform .22s ease; box-shadow:8px 0 30px rgba(0,0,0,.25); }
  .sidebar.m-open{ transform:none; }
  #m-scrim{ position:fixed; inset:0; background:rgba(20,20,20,.35); z-index:65; display:none; }
  #m-scrim.show{ display:block; }
  .nav-item{ padding-top:11px; padding-bottom:11px; }

  /* barra do topo */
  .topbar{ padding:0 12px; gap:8px; height:54px; min-height:54px; padding-top:env(safe-area-inset-top); box-sizing:content-box; }
  .search{ display:none; }
  #m-burger{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--paper); align-items:center; justify-content:center; color:var(--navy); flex:none; }
  #m-title{ font-family:var(--f-heading); font-weight:700; color:var(--navy); font-size:15px; letter-spacing:.3px; }
  .topbar-actions{ gap:8px; }
  .btn-ai{ padding:7px 10px; font-size:0; gap:0; }
  .btn-ai svg{ margin:0; }
  .topbar-actions .btn-gold{ padding:8px 12px; font-size:12.5px; }
  .notif-panel{ position:fixed; top:58px; left:8px; right:8px; width:auto; max-height:70vh; }
  .ai-panel{ width:100%; right:-100%; }

  /* conteúdo */
  .content{ padding:16px 14px 90px 14px; -webkit-overflow-scrolling:touch; }
  .page-head h1{ font-size:19px; }
  .grid-2,.grid-3{ grid-template-columns:1fr !important; }
  .grid-4{ grid-template-columns:repeat(2,1fr) !important; }
  .card{ padding:14px; overflow-x:auto; }
  .tabs{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:none; padding:10px 12px; }
  input,select,textarea{ font-size:16px !important; }
  .btn{ min-height:38px; }

  /* janelas (modais) ocupam a tela */
  div[id^="modal-"][style*="position:fixed"]{ width:96vw !important; max-width:96vw !important; max-height:92vh !important; max-height:92dvh !important;
    overflow-y:auto !important; padding:18px 16px !important; }
  .email-modal{ width:96vw !important; max-width:96vw !important; }
  div[id^="modal-"] [style*="display:flex"][style*="gap:12px"]{ flex-wrap:wrap; }
}

/* tabelas viram cartões na Área do Cliente (telas até 700px) */
@media (max-width:700px){
  #view-area-cliente table, #view-area-cliente tbody, #view-area-cliente tr, #view-area-cliente td{ display:block; width:100%; }
  #view-area-cliente tr.m-head{ display:none; }
  #view-area-cliente table{ min-width:0; }
  #view-area-cliente tr{ border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:10px; background:var(--paper); }
  #view-area-cliente tr:hover td{ background:transparent; }
  #view-area-cliente td{ border:none; padding:6px 0; display:flex; justify-content:space-between; gap:14px; text-align:right; }
  #view-area-cliente td[data-label]::before{ content:attr(data-label); flex:none; max-width:42%; text-align:left; font-size:11px;
    text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); padding-top:2px; }
  #view-area-cliente td.empty-note, #view-area-cliente td[colspan]{ display:block; text-align:left; }
  #view-area-cliente td[colspan]::before{ display:none; }
  .list-row{ flex-wrap:wrap; }
}

/* barra de abas fixa, só para o cliente */
#m-tabbar{ display:none; }
@media (max-width:900px){
  body.m-client #m-tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--paper);
    border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(64,64,64,.08); }
  #m-tabbar button{ flex:1; border:none; background:none; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
    font-family:var(--f-body); font-size:10.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; min-height:48px; }
  #m-tabbar button.on{ color:var(--navy); }
  #m-tabbar button.on svg{ stroke:var(--gold); }
  body.m-client #view-area-cliente > .tabs{ display:none; }
  body.m-client #m-burger{ display:none; }
  body.m-client .sidebar{ display:none; }
  body.m-client .btn-ai{ display:none; }
}

/* folha "Mais" */
#m-sheet-scrim{ position:fixed; inset:0; background:rgba(20,20,20,.35); z-index:80; display:none; }
#m-sheet-scrim.show{ display:block; }
#m-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:81; background:var(--paper); border-radius:16px 16px 0 0;
  padding:8px 16px calc(18px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .22s ease; box-shadow:0 -12px 40px rgba(0,0,0,.2); }
#m-sheet.show{ transform:none; }
#m-sheet .m-grab{ width:40px; height:4px; border-radius:2px; background:var(--line); margin:6px auto 12px; }
#m-sheet .m-item{ display:flex; align-items:center; gap:12px; width:100%; padding:14px 6px; border:none; background:none; border-bottom:1px solid var(--line);
  font-family:var(--f-body); font-size:14.5px; color:var(--ink); text-align:left; cursor:pointer; }
#m-sheet .m-item:last-child{ border-bottom:none; }
#m-sheet .m-item small{ margin-left:auto; color:var(--ink-soft); font-size:11.5px; }

/* banner de instalação */
#m-install{ display:none; position:fixed; left:10px; right:10px; z-index:60; bottom:10px; background:var(--navy); color:#fff; border-radius:14px;
  padding:12px 14px; box-shadow:0 10px 30px rgba(0,0,0,.28); align-items:center; gap:12px; font-size:13px; line-height:1.35; }
#m-install.show{ display:flex; }
body.m-client #m-install{ bottom:calc(76px + env(safe-area-inset-bottom)); }
#m-install b{ display:block; font-size:13.5px; }
#m-install .m-x{ margin-left:auto; background:none; border:none; color:#fff; opacity:.8; font-size:20px; padding:4px 8px; cursor:pointer; }
#m-install .m-go{ background:var(--gold); color:#fff; border:none; border-radius:8px; padding:8px 12px; font-weight:600; font-size:12.5px; cursor:pointer; white-space:nowrap; }
@media (min-width:901px){ #m-install,#m-sheet,#m-sheet-scrim{ display:none !important; } }
.nav-tag{ white-space:nowrap; flex:none; }
@media (max-width:900px){ .ai-panel:not(.open){ box-shadow:none; } }