/* Telemóvel e tablet — partilhado por todas as páginas (ligado no fim do
   <head>, depois do CSS de cada página). Tudo dentro de media queries: no
   computador não muda nada. Não mexe na apresentação dos cartões, nas cores
   nem na estética de cada página (pedido do Nuno, 2026-10-02) — só:

   1. Rede de segurança: nenhuma página pode ficar mais larga que o ecrã
      (quando isso acontecia o telemóvel "afastava o zoom").
   2. Barra de navegação uniforme: logótipo do mesmo tamanho em todas as
      páginas e os três botões da direita (triângulo do carrinho, círculo da
      conta, quadrado do hambúrguer) com a mesma proporção e o mesmo
      afastamento, também nas páginas Office.
   3. Menu hambúrguer em balão (assets/mobile-nav.js): largura da barra
      flutuante, cantos arredondados, afastado da barra como os cartões do
      Descobre, com altura à medida do conteúdo. Network em cima e por baixo
      as páginas Office da conta (Pro, Admin, Daiki).
   4. Barras laterais dos Office (Pro, Admin, Daiki), escondidas em ecrãs
      pequenos, ficam acessíveis num botão redondo que abre um balão por
      cima da página, sem empurrar nem encolher nada.
   5. Campos de formulário a 16px (abaixo disso o iPhone faz zoom ao tocar).
   6. Comunidade: campo de mensagem e grelha de membros sem cortes. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: clip; }
  img, video, canvas { max-width: 100%; }
}

@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select,
  textarea { font-size: 16px; }
  .chat-inp input, .dm-thread-inp input { min-width: 0; }
  .chat-inp button, .dm-thread-inp button { flex-shrink: 0; }
  .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-card-admin { flex-direction: column; gap: 6px; }
}

/* ───────────── Barra de navegação superior ───────────── */
.mnav, .mnav-side, .mnav-side-btn { display: none; }
header .nav-burger.mnav-created { display: none; }

@media (max-width: 960px) {
  /* logótipo do mesmo tamanho em todas as páginas */
  header a[href="/index.html"] img, header .logo img, header img.circle-logo-img { height: 26px; width: auto; }
  header .logo-sub { display: none; }

  /* três botões (triângulo, círculo, quadrado) todos com a MESMA altura —
     a do triângulo do carrinho da página inicial (34px) — e com o mesmo
     afastamento entre si, em todas as barras da plataforma. */
  header .nav-actions { gap: 10px; flex-shrink: 0; margin-left: auto; align-items: center; }
  header .dcart-toggle { width: 40px; height: 34px; box-sizing: border-box; padding: 0; }
  header .nav-account, header .nav-burger { width: 34px; height: 34px; box-sizing: border-box; padding: 0; }
  header .dcart-toggle { display: flex; align-items: center; justify-content: center; }
  header #dcart-container .dcart-toggle svg { width: 40px; height: 34px; }
  header #dcart-container { display: flex; align-items: center; }
  header .nav-burger, header .nav-burger.mnav-created { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 1px solid rgba(204,0,0,.4); border-radius: 0; cursor: pointer; flex-shrink: 0; }
  header .nav-burger span { display: block; width: 18px; height: 2px; background: #111; transition: transform .25s, opacity .2s; }
  header .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  header .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* o que passa para dentro do menu hambúrguer */
  header .office-wrap, header #office-wrap, header ul.nav-links, header #nav-cta { display: none !important; }
  .navlinks, .navlinks.open { display: none !important; }

  /* balão do menu */
  .mnav { position: fixed; z-index: 1200; left: 12px; right: 12px; top: 0; box-sizing: border-box; background: #fff; border: 1px solid #E2E2E2; border-radius: 16px; box-shadow: 0 16px 36px rgba(0,0,0,.14); padding: 12px; flex-direction: column; gap: 8px; overflow-y: auto; }
  .mnav.open { display: flex; }
  .mnav-pill { display: block; text-align: center; padding: 13px 16px; border-radius: 999px; font: 600 14px/1.2 'Poppins', sans-serif; letter-spacing: .04em; text-decoration: none; box-sizing: border-box; border: 1.5px solid #CC0000; }
  .mnav-network { background: #fff; color: #CC0000; }
  .mnav-office { background: #CC0000; color: #fff; }
  .mnav-pill.active { opacity: .55; }
  .mnav-sep { height: 1px; background: #EFEFEF; margin: 4px 0; }
  .mnav-link { display: block; padding: 12px 8px; font: 500 15px/1.2 'Poppins', sans-serif; color: #111; text-decoration: none; border-radius: 8px; }
  .mnav-link.active { color: #CC0000; }

  /* páginas do Index: o mesmo menu de submenus de sempre, dentro do balão */
  .mnav.mnav-acc { padding: 6px 0 8px; gap: 0; }
  .mnav-acc .mnav-entrar { display: block; margin: 8px 16px 10px; text-align: center; }
  .mnav-acc .mnav-entrar .btn-primary { width: 100%; box-sizing: border-box; }
  .mnav-acc .mnav-item { border-bottom: 1px solid #F1EDE8; }
  .mnav-acc .mnav-toggle { padding: 16px 20px; }
  .mnav-acc .mnav-panel { padding: 0 20px 18px; }
  .mnav-acc > a { display: block; padding: 16px 20px; font: 500 15px/1.2 'Poppins', sans-serif; letter-spacing: .04em; color: #111; text-decoration: none; border-bottom: 1px solid #F1EDE8; }
  .mnav-acc > a:last-child, .mnav-acc .mnav-item:last-child { border-bottom: none; }
  /* grupos dentro de Criação: recolhidos, abre-se o que se quiser */
  .mnav-acc .mnav-sub { margin-bottom: 0; border-top: 1px solid #F1EDE8; }
  .mnav-acc .mnav-sub > h5 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 14px 0; cursor: pointer; }
  .mnav-acc .mnav-sub > h5 .chevron { transition: transform .2s ease; flex-shrink: 0; }
  .mnav-acc .mnav-sub.open > h5 .chevron { transform: rotate(180deg); }
  .mnav-acc .mnav-sub > a { display: none; }
  .mnav-acc .mnav-sub.open > a { display: block; }
  .mnav-acc .mnav-sub.open { padding-bottom: 8px; }
}

@media (max-width: 380px) {
  /* mesmos tamanhos dos botões; só o afastamento e o logótipo apertam um
     pouco para tudo caber em ecrãs estreitos */
  header .nav-actions { gap: 8px; }
  header a[href="/index.html"] img, header .logo img, header img.circle-logo-img { height: 24px; }
  header .nav-inner { padding-left: 14px; padding-right: 14px; }
}

/* ───────────── Barras laterais dos Office em ecrãs pequenos ───────────── */
@media (max-width: 1000px) {
  .mnav-side-btn { display: flex; position: fixed; z-index: 640; left: 14px; bottom: 88px; width: 48px; height: 48px; border-radius: 50%; align-items: center; justify-content: center; background: #CC0000; color: #fff; border: 2px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
  .mnav-side { position: fixed; z-index: 1200; left: 14px; bottom: 148px; width: min(280px, calc(100vw - 28px)); max-height: 60vh; overflow-y: auto; box-sizing: border-box; background: #fff; border: 1px solid #E2E2E2; border-radius: 16px; box-shadow: 0 16px 36px rgba(0,0,0,.18); padding: 8px; flex-direction: column; gap: 2px; }
  .mnav-side.open { display: flex; }
  .mnav-side-item { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; padding: 12px 14px; border: none; border-radius: 10px; background: none; color: #111; font: 500 14px/1.2 'Poppins', sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
  .mnav-side-item svg { width: 22px; height: 22px; flex-shrink: 0; color: #CC0000; }
  .mnav-side-item.active { background: #FFF5F5; color: #CC0000; }
}