/**
 * shell.css — Estilos da Shell 2.0 (Linha & Lucro).
 * Sprint UI002: apenas scaffold de navegação — layout das páginas fica nos CSS MPA.
 */

:root {
  --shell-bg: #f8f4f6;
  --shell-surface: #ffffff;
  --shell-border: #e8dce3;
  --shell-text: #3d2a35;
  --shell-muted: #7a6570;
  --shell-accent: #d4567a;
  --shell-placeholder: #f0e8ec;
}

* {
  box-sizing: border-box;
}

/* ── Ambiente isolado shell/index.html (demo) ── */
body.shell-body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--shell-bg);
  color: var(--shell-text);
}

#shell-app:not(.shell-app-montado) {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar outlet"
    "bottom bottom";
  min-height: 100vh;
}

.shell-header {
  grid-area: header;
  padding: 12px 20px;
  background: var(--shell-surface);
  border-bottom: 1px solid var(--shell-border);
  font-weight: 600;
}

.shell-sidebar {
  grid-area: sidebar;
  padding: 20px 16px;
  background: var(--shell-placeholder);
  border-right: 1px solid var(--shell-border);
  font-size: 0.9rem;
  color: var(--shell-muted);
}

#shell-app:not(.shell-app-montado) .view-outlet {
  grid-area: outlet;
  padding: 24px;
  overflow: auto;
}

.shell-bottom-nav {
  grid-area: bottom;
  padding: 12px 20px;
  background: var(--shell-surface);
  border-top: 1px solid var(--shell-border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--shell-muted);
}

#shell-app:not(.shell-app-montado) .shell-view {
  max-width: 560px;
  padding: 24px;
  background: var(--shell-surface);
  border: 1px solid var(--shell-border);
  border-radius: 12px;
}

.shell-view h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.shell-view-meta {
  color: var(--shell-muted);
  font-size: 0.9rem;
}

.shell-btn {
  margin-top: 16px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--shell-accent);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}

.shell-btn:hover {
  filter: brightness(1.05);
}

.shell-test-banner {
  position: fixed;
  right: 12px;
  bottom: 56px;
  padding: 8px 12px;
  background: #1e1e1e;
  color: #8f8;
  font-family: monospace;
  font-size: 12px;
  border-radius: 6px;
  z-index: 100;
}

/* ============================================================================
   Sprint UI002 — Shell nativa (app.html / body.pagina-shell)
   Apenas: Sidebar, Header, Page Chrome, View Outlet, Bottom Nav
   ============================================================================ */

.shell-app-montado {
  display: contents;
}

body.pagina-shell {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
}

body.pagina-shell #shell-app.shell-app-montado {
  display: contents;
}

body.pagina-shell .main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

body.pagina-shell .header {
  flex: 0 0 auto;
}

/* ── Sprint A005.12.4 — Layout: posicionamento e offset (sem aparência) ── */
body.pagina-shell .main-content > .header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

body.pagina-shell .main-content {
  position: relative;
}

/* ── Sprint A005.12.5 — Aparência (demais páginas): transparente → scrolled ── */
body.pagina-shell.pagina-materiais .main-content > .header,
body.pagina-shell.pagina-projetos .main-content > .header,
body.pagina-shell.pagina-perfil .main-content > .header,
body.pagina-shell.pagina-gestao .main-content > .header,
body.pagina-shell.pagina-atendimento .main-content > .header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease,
    -webkit-backdrop-filter 0.25s ease;
}

body.pagina-shell.pagina-materiais .main-content > .header.header-scrolled,
body.pagina-shell.pagina-projetos .main-content > .header.header-scrolled,
body.pagina-shell.pagina-perfil .main-content > .header.header-scrolled,
body.pagina-shell.pagina-gestao .main-content > .header.header-scrolled,
body.pagina-shell.pagina-atendimento .main-content > .header.header-scrolled {
  background: rgba(248, 243, 239, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ── Sprint A005.12.6 — Home: Header sobrepõe o Hero (só aparência/composição) ──
   Offset (--ll-header-altura) e padding interno do Hero permanecem intactos. */
body.pagina-shell.pagina-inicio .main-content > .header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease,
    -webkit-backdrop-filter 0.25s ease;
}

body.pagina-shell.pagina-inicio .main-content > .header.header-scrolled {
  background: rgba(248, 243, 239, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.pagina-shell .content-area,
body.pagina-shell #view-outlet.content-area,
body.pagina-shell #view-outlet {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding: 28px 32px;
}

/* Remove faixa entre Header e Hero — content sobe até o topo do main-content */
body.pagina-shell.pagina-inicio .content-area,
body.pagina-shell.pagina-inicio #view-outlet.content-area,
body.pagina-shell.pagina-inicio #view-outlet {
  padding-top: 0;
}

#shell-page-chrome {
  flex-shrink: 0;
  display: block;
  min-height: 0;
}

body.pagina-shell #shell-page-chrome .perfil-tabs,
body.pagina-shell #shell-page-chrome .atendimento-tabs,
body.pagina-shell #shell-page-chrome .gestao-tabs,
body.pagina-shell #shell-page-chrome .gestao-tabs-principal {
  margin-top: 0;
}

/* Rodapé — altura fixa, nunca participa do cálculo da área útil da View */
body.pagina-shell .ll-app-footer {
  flex: 0 0 auto;
  flex-grow: 0;
  flex-shrink: 0;
}

body.pagina-shell .sidebar {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Wrapper de lifecycle — invisível ao layout (paridade MPA) */
body.pagina-shell .shell-view:not(.shell-view--login):not(.shell-view-erro) {
  display: contents;
}

/* Neutraliza .content-area aninhada do perfil-logic sem alterar markup */
body.pagina-shell .shell-view > .content-area {
  display: contents;
}

body.pagina-shell .bottom-nav-mobile {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  body.pagina-shell {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
  }

  body.pagina-shell .main-content {
    flex: 1 1 0;
    min-height: 0;
  }

  body.pagina-shell .content-area,
  body.pagina-shell #view-outlet.content-area,
  body.pagina-shell #view-outlet {
    flex: 1 1 0;
    min-height: 0;
    padding: 18px 16px;
  }

  body.pagina-shell.pagina-inicio .content-area,
  body.pagina-shell.pagina-inicio #view-outlet.content-area,
  body.pagina-shell.pagina-inicio #view-outlet {
    padding-top: 0;
  }

  /* Sprint A005.12.8 — Rodapé institucional abaixo da Bottom Navigation
     (DOM permanece antes da nav; ordem visual via flex order) */
  body.pagina-shell .bottom-nav-mobile {
    order: 1;
    padding-bottom: 8px;
  }

  body.pagina-shell main.main-content > .ll-app-footer {
    order: 2;
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
  }
}

/* Modo login — chrome oculto; mantém cadeia flex do body (evita tela branca mobile) */
.shell-app-montado.shell-modo-login {
  display: contents;
}

.shell-app-montado.shell-modo-login .sidebar,
.shell-app-montado.shell-modo-login .header,
.shell-app-montado.shell-modo-login #shell-page-chrome,
.shell-app-montado.shell-modo-login .bottom-nav-mobile,
.shell-app-montado.shell-modo-login .ll-app-footer {
  display: none !important;
}

.shell-app-montado.shell-modo-login .main-content {
  flex: 1;
  min-height: 0;
}

.shell-app-montado.shell-modo-login .content-area,
.shell-app-montado.shell-modo-login .view-outlet {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* Empilhamento — pilha unificada via variáveis CSS (style.css) */
body.pagina-shell .bottom-nav-mobile {
  z-index: var(--ll-z-bottom-nav);
}

body.pagina-shell .menu-perfil-flutuante {
  z-index: var(--ll-z-dropdown);
}

body.pagina-shell .header {
  overflow: visible;
  z-index: var(--ll-z-dropdown);
}

body.pagina-shell .header-right {
  overflow: visible;
}

body.pagina-shell .notificacoes-wrapper {
  overflow: visible;
}

body.pagina-shell .user-profile {
  overflow: visible;
}

/* ============================================================================
   Sprint UI009 — Hero Único (apenas Shell / página Início)
   ============================================================================ */

body.pagina-shell.pagina-inicio .inicio-hero {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  margin-top: 0;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 72%,
      rgba(248, 242, 238, 0.35) 88%,
      var(--ll-bg) 100%
    ),
    linear-gradient(
      90deg,
      rgba(248, 243, 239, 0.92) 0%,
      rgba(248, 243, 239, 0.82) 18%,
      rgba(248, 243, 239, 0.60) 36%,
      rgba(248, 243, 239, 0.28) 52%,
      rgba(248, 243, 239, 0.08) 68%,
      rgba(248, 243, 239, 0) 82%
    ),
    url("../midia/hero-artesanal.png");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

body.pagina-shell.pagina-inicio .inicio-hero::before,
body.pagina-shell.pagina-inicio .inicio-hero::after {
  content: none;
  display: none;
}

/* Tablet — ajuste de posicionamento */
@media (max-width: 900px) and (min-width: 769px) {
  body.pagina-shell.pagina-inicio .inicio-hero {
    background-position: center 92%;
  }
}

/* Mobile — imagem única com gradientes */
@media (max-width: 768px) {
  body.pagina-shell.pagina-inicio .inicio-hero {
    background-size: cover;
    background-position: center bottom;
  }
}

body.pagina-shell.pagina-inicio .inicio-hero-titulo {
  font-size: clamp(1.9rem, 3.7vw, 2.6rem);
  line-height: 1.08;
  font-weight: 800;
}

body.pagina-shell .modal-overlay {
  z-index: var(--ll-z-modal) !important;
}

body.pagina-shell .dropdown-materiais {
  z-index: var(--ll-z-dropdown) !important;
}

@media (max-width: 768px) {
  body.pagina-shell .balao-crochetando:not(.balao-crochetando-arrastavel) {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--ll-z-bottom-nav) + 5);
  }
}

/* Login — view ocupa viewport sem scroll duplicado */
body.pagina-shell.shell-corpo-login,
body.pagina-shell.shell-corpo-login .content-area,
body.pagina-shell.shell-corpo-login .view-outlet {
  overflow: hidden;
}

body.pagina-shell .shell-view--login.login-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Sprint A005.12 — Transição visual contínua entre Views */
.shell-view-staging {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

body.pagina-shell .view-outlet {
  position: relative;
}

/* Durante transição: views empilhadas — evita colapso com display:contents */
body.pagina-shell .view-outlet > .shell-view.shell-view--transicao {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1;
}

body.pagina-shell .view-outlet > .shell-view.shell-view--saindo {
  pointer-events: none;
  z-index: 1;
}

body.pagina-shell .view-outlet > .shell-view.shell-view--transicao:last-child {
  z-index: 2;
}

.shell-view--transicao {
  will-change: opacity;
}

/* Sprint A005.12.3 — Tela de erro amigável no outlet */
.shell-view-erro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 32px 24px;
  text-align: center;
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--ll-marrom, #4b2b1f);
}

.shell-view-erro__icone {
  font-size: 48px;
  color: var(--ll-rosa, #cf7d7d);
  margin-bottom: 16px;
}

.shell-view-erro__titulo {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
}

.shell-view-erro__mensagem {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: var(--ll-texto, #6f6f6f);
  max-width: 420px;
  line-height: 1.5;
}

.shell-view-erro__acao {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: var(--ll-rosa, #cf7d7d);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.shell-view-erro__acao:hover {
  filter: brightness(1.05);
}