/* ============================================================
   APP SHELL — frame responsivo + topbar + bottom-nav
   Baseado em _prototipos/app-aluna.html (aprovado 18-22/mai/2026).

   Comportamento responsivo:
     - mobile  (<= 640px)  → fullscreen, sem moldura
     - tablet  (641-1024)  → fullscreen com max-width 720px central
     - desktop (>= 1025)   → frame de celular 390px com notch + sombra
     - toggle "Sem moldura" no canto inferior direito (desktop only)
       remove o frame e usa max-width 720px (como tablet)
   ============================================================ */

/* ----- Background do "palco" quando frame esta em desktop ----- */
@media (min-width: 1025px) {
  body:not(.shell-flat) {
    background: #D4D4D4;
    padding: 30px 20px;
    min-height: 100vh;
  }
  [data-theme="dark"] body:not(.shell-flat) {
    background: #0A0B0E;
  }
}

/* ----- App frame: shell principal que conteudo dos modulos vai dentro ----- */
.app-frame {
  background: var(--efp-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Mobile: fullscreen normal */
@media (max-width: 640px) {
  .app-frame {
    max-width: 100%;
  }
}

/* Tablet: largura central confortavel sem moldura */
@media (min-width: 641px) and (max-width: 1024px) {
  .app-frame {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop: frame de celular com notch e moldura */
@media (min-width: 1025px) {
  body:not(.shell-flat) .app-frame {
    max-width: 390px;
    margin: 0 auto;
    border-radius: 42px;
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.25),
      0 0 0 12px #1A1A1A,
      0 0 0 14px #2A2A2A;
    overflow: hidden;
    min-height: 780px;
  }
  body:not(.shell-flat) .app-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #1A1A1A;
    border-radius: 0 0 18px 18px;
    z-index: 100;
  }
  body:not(.shell-flat) .app-frame .topbar,
  body:not(.shell-flat) .app-frame .app-header {
    padding-top: 38px;
  }

  /* Toggle "Sem moldura" — sem o frame */
  body.shell-flat .app-frame {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* ----- Toggle de moldura (so aparece em desktop) ----- */
.shell-toggle-moldura {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  background: rgba(28, 30, 34, 0.92);
  color: #F1F1F2;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: var(--efp-font-sans);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.shell-toggle-moldura:hover {
  background: var(--efp-laranja);
}
@media (min-width: 1025px) {
  .shell-toggle-moldura {
    display: block;
  }
}

/* ============================================================
   TOPBAR (header padrao do app · usado pela home e por dentro dos modulos)
   ============================================================ */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--efp-bg);
  display: flex;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--efp-border);
}

.app-topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--efp-laranja), var(--efp-laranja-suave, #FF8A65));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin-right: 12px;
  font-family: var(--efp-font-sans);
}

.app-topbar-mid {
  flex: 1;
  min-width: 0;
}
.app-topbar-nome {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar-sub {
  font-size: 11px;
  color: var(--efp-text-muted);
  letter-spacing: 0.5px;
}

.app-topbar-acoes {
  display: flex;
  gap: 6px;
}
.app-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--efp-surface);
  border: 1px solid var(--efp-border);
  color: var(--efp-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
  position: relative;
}
.app-icon-btn:hover {
  color: var(--efp-laranja);
  border-color: var(--efp-laranja);
}
.app-icon-btn .app-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--efp-laranja);
  color: white;
  font-size: 8px;
  font-weight: 800;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--efp-surface);
}

/* ============================================================
   MAIN (conteudo principal de cada modulo)
   ============================================================ */
.app-main {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  padding: 20px 18px 100px;
}
@media (min-width: 641px) {
  .app-main {
    padding: 18px 16px 90px;
  }
}

/* ============================================================
   BOTTOM NAV · 5 icones (Home, Treinos, Programas, Progresso, Chat)
   ============================================================ */
.app-bottom-nav {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--efp-surface);
  border-top: 1px solid var(--efp-border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 0 18px;
  z-index: 50;
}
.app-bn-item {
  background: transparent;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  color: var(--efp-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
}
.app-bn-item.ativo {
  color: var(--efp-laranja);
}
.app-bn-ico {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   ANIMACAO de transicao entre paginas/modulos
   ============================================================ */
@keyframes app-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.app-fade-in {
  animation: app-fade-in 0.3s ease;
}

/* ============================================================
   Tipografia base do app (overrides do variables.css)
   ============================================================ */
body {
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.app-h1 {
  font-family: var(--efp-font-display);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--efp-text);
  margin: 0;
}
.app-h2 {
  font-family: var(--efp-font-display);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--efp-text);
  margin: 0;
}
.app-eyebrow {
  font-family: var(--efp-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--efp-ciano);
}
[data-theme="light"] .app-eyebrow {
  color: #006D7A; /* ciano-escuro pra contraste no claro */
}