/**
 * Shell v2 (AB#492, AB#494, AB#545, AB#496): cabeçalho completo (>=1024 px), cabeçalho compacto (<1024 px),
 * menu da conta no avatar e shell do parceiro (barra lateral >=768 px, cabeçalho com ícones abaixo).
 * Sem barras fixas inferiores (R8). Somente tokens.
 */

/* ---- Cabeçalho completo ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.topbar .brand,
.mhead .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  max-height: none;
  font-size: 17px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
}
.topbar .brand img { width: 36px; height: 36px; min-width: 36px; max-width: 36px; min-height: 36px; max-height: 36px; border-radius: 11px; object-fit: contain; background: var(--paper); box-shadow: none; }
.navpill {
  margin: 0 auto;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--raised);
  box-shadow: var(--shadow);
}
.navpill a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text2);
  transition: background var(--motion-menu) var(--ease), color var(--motion-menu);
}
.navpill a:hover { color: var(--brand); }
.navpill a[aria-current="page"] { background: var(--wash); color: var(--brand); font-weight: 700; }
.topbar-end { display: flex; align-items: center; gap: 12px; min-width: 96px; justify-content: flex-end; }

/* ---- Avatar e menu da conta ---- */
.umenu-wrap { position: relative; display: inline-flex; }
.umenu-btn { border: 0; cursor: pointer; font-family: inherit; }
.umenu-btn.avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--wash);
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  transform: none;
}
.umenu[hidden] { display: none; }
.umenu-head .umenu-name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.umenu-head .umenu-email { font-size: 14px; line-height: 20px; color: var(--text2); overflow-wrap: anywhere; }
.umenu a, .umenu button.mi { text-decoration: none; }
.umenu .mi svg { flex: none; }

/* ---- Cabeçalho compacto (abaixo de 1024 px) ---- */
.mhead {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 60px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: color-mix(in srgb, var(--page) 90%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.mhead .brand { min-width: 0; margin-right: auto; font-size: 16px; line-height: 22px; font-weight: 700; flex-shrink: 1; }
.mhead .brand img { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; object-fit: contain; background: var(--paper); flex: none; }
.mhead .brand span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhead-title { flex: 1; min-width: 0; text-align: center; font-size: 16px; line-height: 22px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhead-step { min-width: 44px; text-align: right; font-size: 12px; line-height: 16px; color: var(--subtle); white-space: nowrap; }
.mhead-spacer { width: 44px; flex: none; }
.mnav { display: flex; align-items: center; gap: 4px; flex: none; }
.mnav a, .mnav .icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--text2); transition: background var(--motion-menu) var(--ease), color var(--motion-menu); }
.mnav a[aria-current="page"] { background: var(--wash); color: var(--brand); }
.mnav .grad-fill { color: var(--on-grad); }
.mhead .umenu-wrap { margin-left: calc(6px); }
.mhead .icon-btn { flex: none; }

/* ---- Shell do parceiro ---- */
.pshell { display: flex; min-height: 100vh; }
.pside {
  flex: none;
  width: 248px;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--page);
}
.pside-brand { display: flex; align-items: center; gap: 8px; }
.pside-brand img { width: 36px; height: 36px; border-radius: 11px; object-fit: contain; background: var(--paper); }
.pside-brand strong { display: block; font-size: 15px; line-height: 20px; font-weight: 800; }
.pside-brand small { display: block; font-size: 12px; line-height: 16px; color: var(--subtle); }
.pside nav { display: flex; flex-direction: column; gap: 4px; }
.pside nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text2);
  transition: background var(--motion-menu) var(--ease), color var(--motion-menu);
}
.pside nav a:hover { background: var(--inset); color: var(--ink); }
.pside nav a[aria-current="page"] { background: var(--wash); color: var(--brand); font-weight: 700; }
.pcount { margin-left: auto; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); }
.pside-user { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.pside-user-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pside-user-row .avatar-ini { flex: none; }
.pside-user-row strong { display: block; font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pside-user-row small { display: block; font-size: 12px; line-height: 16px; color: var(--subtle); }
.pmain { flex: 1; min-width: 0; padding: 32px 32px 64px; display: flex; flex-direction: column; gap: 24px; }
.pshell > .mhead { display: none; }

/* Abaixo de 768 px: sem barra lateral; cabeçalho com ícones (R13) */
@media (max-width: 767px) {
  .pshell { flex-direction: column; }
  .pside { display: none; }
  .pshell > .mhead { display: flex; }
  .pmain { padding: 20px 16px 32px; }
}

/* Itens de destaque do menu da conta */
.umenu a.mi-strong, .umenu button.mi.mi-strong { color: var(--brand); font-weight: 700; }
.umenu a.mi-danger, .umenu button.mi.mi-danger { color: var(--bad); }

/* Cabeçalho móvel do parceiro com seis ou mais atalhos: reduz espaçamento e oculta logotipo para manter alvos de 44 px sem estouro */
@media (max-width: 480px) {
  .mhead:has(.mnav a:nth-child(6)) {
    padding: 0 4px 0 8px;
    gap: 4px;
  }
  .mhead:has(.mnav a:nth-child(6)) .brand img {
    display: none;
  }
  .mhead:has(.mnav a:nth-child(6)) .brand {
    flex-shrink: 1;
    min-width: 0;
  }
  .mhead:has(.mnav a:nth-child(6)) .brand span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Decisão PO AB#963: abaixo de 440 px o cabeçalho compacto do parceiro não mostra o título */
@media (max-width: 439px) {
  .mhead:has(.mnav a:nth-child(6)) .brand span,
  .pshell > .mhead .brand span {
    display: none;
  }
}