/* Trilho · layout: barra superior (desktop), barra inferior por papel (celular), página, gaveta "Ver como". */
.topbar { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: var(--page-max); margin: 0 auto; min-height: var(--topbar-h); padding: 0 var(--s-4); display: flex; align-items: center; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.01em; flex: none; }
.brand .icon { width: 24px; height: 24px; stroke-width: 1.75; }
.contract-switcher { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--muted); font-size: var(--fs-sm); }
.contract-switcher strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.contract-switcher .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mainnav { display: none; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.bell { position: relative; }
.bell-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--bad); color: var(--on-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.whoami { display: inline-flex; align-items: center; gap: var(--s-2); }
.whoami-name { font-weight: 500; }
.switch-person { display: none; }

@media (min-width: 1024px) {
  .mainnav { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-4); }
  .mainnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-md);
    color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
  .mainnav a:hover { color: var(--ink); background: var(--surface-2); }
  .mainnav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--surface-2); }
  .switch-person { display: inline-flex; }
}
/* Barra cheia (especialista: 6 itens): o nome do contrato sai antes de o menu quebrar linha; o código fica. */
@media (min-width: 1024px) and (max-width: 1599px) {
  .topbar-inner:has(.mainnav a:nth-child(6)) .contract-switcher .name { display: none; }
  .topbar-inner:has(.mainnav a:nth-child(6)) .contract-switcher { flex: none; }
  .topbar-inner:has(.mainnav a:nth-child(6)) .mainnav { margin-left: var(--s-2); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .mainnav a { padding: 0 var(--s-2); }
  .topbar-inner { gap: var(--s-2); }
}
@media (max-width: 1023px) {
  .contract-switcher .name { display: none; }
  .whoami-name { display: none; }
}

.page { max-width: var(--page-max); margin: 0 auto; padding: var(--s-4) var(--s-4) calc(var(--bottomnav-h) + var(--s-8)); display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .page { padding: var(--s-8) var(--s-6) var(--s-12); } }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.page-head .stack-sm { min-width: 0; }
.page-narrow { max-width: 760px; }

.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a, .bottomnav button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: var(--bottomnav-h);
  color: var(--muted); text-decoration: none; font: inherit; font-size: var(--fs-xs); font-weight: 500; background: none; border: 0; cursor: pointer; }
.bottomnav .icon { width: 22px; height: 22px; }
.bottomnav [aria-current="page"] { color: var(--ink); font-weight: 700; }
@media (min-width: 1024px) { .bottomnav { display: none; } .page { padding-bottom: var(--s-12); } }

.people-group { display: grid; gap: var(--s-2); }
.person-option { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.person-option:hover { background: var(--surface-2); }
.person-option[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.person-option .who { display: grid; min-width: 0; }
.person-option .who strong { font-weight: 600; }
.person-option .who span { font-size: var(--fs-sm); color: var(--muted); }
.more-links { list-style: none; margin: 0; padding: 0; display: grid; }
.more-links li:first-child > * { border-top: 0; }
.more-links a, .more-links button { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-2); color: var(--ink);
  text-decoration: none; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; width: 100%; cursor: pointer; }
.theme-switch { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.theme-switch .btn[aria-pressed="true"] { border-color: var(--ink); font-weight: 600; }

/* Entrar */
.auth { min-height: 100vh; display: grid; align-content: start; }
.auth-inner { width: 100%; max-width: 1040px; margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-12); display: grid; gap: var(--s-8); }
.auth-groups { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .auth-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } .auth-groups .span-all { grid-column: 1 / -1; } }
.auth-groups .span-all .people-grid { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .auth-groups .span-all .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .auth-groups .span-all .people-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.home-grid { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) { .home-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.home-col { display: grid; gap: var(--s-4); }
.footer-note { color: var(--muted); font-size: var(--fs-sm); }
/* Link no meio do texto do rodapé: área de toque de 44 px sem mudar a altura da linha. */
.footer-note a { display: inline-block; padding: 13px 0; margin: -13px 0; }