/* Seletor de área (Trabalho | Central) no topo do menu e contador da Inbox. */
.area-seletor { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; padding: 3px; border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--superficie-2); }
.area-seletor button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-pilula);
  background: transparent; color: var(--tinta-2); font: 600 calc(13px * var(--fs, 1))/1 var(--texto); cursor: pointer; transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); }
.area-seletor button:hover { color: var(--tinta); }
.area-seletor button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.area-seletor .ico { width: 16px; height: 16px; }
[data-lateral="recolhida"] .area-seletor { grid-template-columns: 1fr; border-radius: var(--r-card); }
[data-lateral="recolhida"] .area-seletor span { display: none; }
.nav__conta { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: var(--r-pilula); background: var(--tinta); color: var(--fundo); font: 500 calc(11px * var(--fs, 1))/1.5 var(--dados); text-align: center; }
[data-lateral="recolhida"] .nav__conta { display: none; }
/* Três áreas: botões mais estreitos para caber na lateral. */
.area-seletor button { padding: 0 4px; gap: 4px; font-size: calc(12px * var(--fs, 1)); min-width: 0; }
.area-seletor button span { overflow: hidden; text-overflow: ellipsis; }
.area-seletor .ico { width: 14px; height: 14px; flex: none; }