/* ============================================================
   NAV38 — Botão Voltar + Perfil (foto & menu) · DS38 · mobile-first
   Aditivo: usa as variáveis do Portal com fallback ao tema escuro atual.
   ============================================================ */

/* ---------- BOTÃO VOLTAR (canto superior direito, só no celular) ---------- */
#nav38-back{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 8px);
  right:calc(env(safe-area-inset-right,0px) + 12px);
  z-index:1600;
  display:none; align-items:center; gap:6px;
  height:40px; padding:0 15px 0 11px;
  border:1px solid var(--accent,#dd9933);
  border-radius:999px;
  background:rgba(18,16,10,.88);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  color:var(--accent,#dd9933);
  font:700 13.5px/1 inherit; letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;
}
#nav38-back.mostrar{ display:inline-flex; }
#nav38-back svg{ width:20px; height:20px; margin-right:-1px; }
#nav38-back:active{ transform:translateY(1px); }
@media(min-width:901px){ #nav38-back{ display:none !important; } } /* desktop tem a lateral fixa */

/* Módulos em tela cheia (overlays) abrem folga p/ a pílula flutuante não
   cobrir os controles do próprio módulo (largura real via --nav38-reserva). */
body.nav38-back-on .t38-topo,
body.nav38-back-on .p38-head,
body.nav38-back-on #chk38 > header,
body.nav38-back-on .chk38-topo{ padding-right:var(--nav38-reserva,116px); }

/* ---------- ‹ VOLTAR no lugar do ☰ (topo-esquerda, módulos comuns) ---------- */
#nav38-esq{
  display:none; align-items:center; gap:5px; flex:none;
  height:44px; padding:0 15px 0 10px;
  border:1px solid var(--accent,#dd9933); border-radius:999px;
  background:transparent; color:var(--accent,#dd9933);
  font:700 13.5px/1 inherit; letter-spacing:.01em; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#nav38-esq.mostrar{ display:inline-flex; }
#nav38-esq svg{ width:20px; height:20px; margin-right:-1px; }
#nav38-esq:active{ transform:translateY(1px); }
@media(min-width:901px){ #nav38-esq{ display:none !important; } } /* desktop tem a lateral fixa */
/* TROCA: nos módulos o ☰ some e o ‹ Voltar ocupa o lugar dele */
body.nav38-modulo .m38-menu-btn{ display:none !important; }

/* ---------- CABEÇALHO EM 2 LINHAS NO CELULAR ----------
   1ª linha: botão da esquerda (☰ no Dashboard / ‹ Voltar nos módulos) + TÍTULO
   inteiro. 2ª linha: sino, busca e avatar. Assim o título nunca é cortado. */
@media(max-width:640px){
  main > header{ flex-wrap:wrap; row-gap:8px; align-items:center; }
  .m38-menu-btn, #nav38-esq{ order:1; flex:none; }              /* botão esquerdo → 1º */
  main > header > div:first-of-type{ order:2; flex:1 1 0; min-width:0; } /* título → resto da 1ª linha (ao lado do botão esq.) */
  main > header > .hdr-right{ order:3; flex:1 1 100%; justify-content:flex-end; } /* controles → 2ª linha */
  main > header h2{ white-space:normal; overflow:visible; text-overflow:clip; }
}

/* ---------- AVATAR COM FOTO ---------- */
.avatar.nav38-av{ position:relative; overflow:hidden; }
.avatar.nav38-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* ---------- MENU DO PERFIL ---------- */
#nav38-menu-bd{ position:fixed; inset:0; z-index:100000; display:none; background:transparent; }
#nav38-menu-bd.aberto{ display:block; }

#nav38-menu{
  position:fixed; z-index:100001; display:none;
  min-width:232px; max-width:min(86vw,300px);
  background:var(--surface,#191c22);
  border:1px solid var(--line,#2a2e37);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  padding:8px;
  color:var(--text,#f2f3f5);
  font:14px/1.3 inherit;
}
#nav38-menu.aberto{ display:block; animation:nav38pop .14s ease-out; }
@keyframes nav38pop{ from{ opacity:0; transform:scale(.96) translateY(-4px); } to{ opacity:1; transform:none; } }

#nav38-menu .nav38-perfil{ display:flex; align-items:center; gap:11px; padding:8px 8px 10px; }
#nav38-menu .nav38-fotomenu{
  flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--accent-soft,rgba(221,153,51,.16)); color:var(--accent,#dd9933);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; position:relative; overflow:hidden;
  border:1px solid var(--accent,#dd9933);
}
#nav38-menu .nav38-fotomenu img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#nav38-menu .nav38-quem{ min-width:0; }
#nav38-menu .nav38-quem b{ display:block; font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#nav38-menu .nav38-quem span{ display:block; font-size:12px; color:var(--muted,#8a919e); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#nav38-menu .nav38-sep{ height:1px; background:var(--line,#2a2e37); margin:2px 4px 6px; }

#nav38-menu .nav38-mi{
  display:flex; align-items:center; gap:11px; width:100%;
  min-height:46px; padding:10px 12px; margin:2px 0;
  background:none; border:none; border-radius:10px;
  color:var(--text,#f2f3f5); font:600 14px/1.2 inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#nav38-menu .nav38-mi svg{ width:19px; height:19px; flex:none; color:var(--muted,#b6bcc8); }
#nav38-menu .nav38-mi:hover, #nav38-menu .nav38-mi:active{ background:var(--surface2,rgba(255,255,255,.06)); }
#nav38-menu .nav38-mi.perigo{ color:#ff6b6b; }
#nav38-menu .nav38-mi.perigo svg{ color:#ff6b6b; }

/* ============================================================
   ÁREA SEGURA DO TOPO — iPhone com Dynamic Island / notch
   (AREA-SEGURA-TOPO · 10/09/2026)

   O index.html declara viewport-fit=cover + status bar
   black-translucent: isso é proposital (o app ocupa a tela
   inteira), mas obriga o layout a reservar o espaço da barra de
   status por conta própria. O mobile38.css só reservava a área
   segura de BAIXO (4 regras com safe-area-inset-bottom) e nenhuma
   de CIMA — por isso o cabeçalho subia por baixo do relógio e da
   Dynamic Island.

   Também é preciso soltar a altura fixa: o mobile38.css trava
   header{height:56px} abaixo de 480px, e o nosso cabeçalho de
   DUAS linhas no celular não cabe em 56px depois de reservar o
   topo. min-height preserva o tamanho mínimo confortável.
   ============================================================ */
@media(max-width:900px){
  main > header{
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding-bottom: 10px;
    height: auto;
    min-height: 56px;
    box-sizing: border-box;
  }
  /* a gaveta é fixed com top:0 — o logotipo dela também ficava sob a
     ilha. margin no 1º filho em vez de padding no aside: assim não se
     perde o espaçamento que a folha base já define. */
  aside > *:first-child{ margin-top: env(safe-area-inset-top, 0px); }
}