/* Estrutura: cabecalho com pilulas, navegacao superior, conteudo, dock flutuante. Mobile-first. */

.app { min-height: 100vh; min-height: 100dvh; }

/* ---------- Cabecalho ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); background: var(--pagina);
}
.brand { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta); min-width: 0; }
.brand:hover { color: var(--tinta); }
.brand-mark { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--marca-900); position: relative; overflow: hidden; }
.brand-mark::before { content: ""; position: absolute; inset: 9px; border-radius: 4px; background: repeating-linear-gradient(90deg, #f1f4f2 0 2.5px, transparent 2.5px 5px); }
:root[data-tema="escuro"] .brand-mark { background: #e4e8e6; }
:root[data-tema="escuro"] .brand-mark::before { background: repeating-linear-gradient(90deg, #111514 0 2.5px, transparent 2.5px 5px); }
.brand-name { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--t-18); letter-spacing: -0.02em; }

.topbar__right { display: flex; align-items: center; gap: var(--e-2); }
.pill-status { display: none; align-items: center; gap: var(--e-2); min-height: 44px; padding: 4px var(--e-4); background: var(--painel); border-radius: var(--raio-pilula); line-height: 1.2; max-width: 280px; }
.pill-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sucesso); flex: none; }
.pill-status[data-suspensa="true"] .pill-status__dot { background: var(--alerta); }
.pill-status__t { display: grid; min-width: 0; }
.pill-status__t strong { font-size: var(--t-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-status__t span { font-size: var(--t-12); color: var(--texto-2); white-space: nowrap; }
.circle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--painel); color: var(--tinta); transition: background var(--mov-rapido) var(--ease-in), transform var(--mov-rapido) var(--ease-in); }
.circle:hover { background: var(--hover); }
.circle:active { transform: scale(0.96); }
.circle--avatar { background: var(--consig-bg); color: var(--consig); font-weight: 600; font-size: var(--t-13); }
.btn-novo { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4); border: 0; border-radius: var(--raio-pilula); background: var(--marca-700); color: var(--on-marca); font-weight: 600; }
.btn-novo:hover { background: var(--marca-800); }
.btn-novo__t { display: none; }

/* ---------- Navegacao superior (texto, sem barra lateral) ---------- */
.mainnav { padding: 0 var(--e-4) var(--e-2); }
.mainnav__list { display: flex; gap: var(--e-1); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.mainnav__list::-webkit-scrollbar { display: none; }
.mainnav__item { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--e-3); border: 0; background: none; border-radius: var(--raio-pilula); color: var(--tinta); font-weight: 500; text-decoration: none; position: relative; }
.mainnav__item:hover { background: var(--painel); color: var(--tinta); }
.mainnav__item[aria-current="true"], .mainnav__item[aria-current="page"] { background: var(--painel); font-weight: 600; box-shadow: inset 0 -2px 0 var(--tinta); }
.mainnav__item .icon { width: 16px; height: 16px; color: var(--texto-3); }

/* ---------- Conteudo ---------- */
.main { min-width: 0; padding-bottom: calc(var(--dock-h) + var(--e-12)); }
.content { width: 100%; max-width: var(--conteudo-max); margin: 0 auto; padding: var(--e-2) var(--e-4) var(--e-4); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.page-head__title { display: grid; gap: var(--e-1); min-width: 0; }
.page-head__sub { color: var(--texto-2); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--e-1); list-style: none; margin: 0; padding: 0; font-size: var(--t-13); color: var(--texto-3); }
.crumbs li + li::before { content: "/"; margin-right: var(--e-1); color: var(--linha-forte); }
.crumbs a { color: var(--texto-2); }
.banner { display: flex; align-items: center; gap: var(--e-3); margin: 0 var(--e-4); padding: var(--e-3) var(--e-4); background: var(--alerta-bg); color: var(--alerta); border-radius: var(--raio-grande); font-weight: 500; }
h1 { font-size: var(--t-28); }

/* ---------- Dock flutuante (atalhos) ---------- */
.dock {
  position: fixed; left: 50%; bottom: calc(var(--e-4) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  display: flex; align-items: stretch; gap: 2px; padding: 6px; max-width: calc(100vw - 24px);
  background: var(--marca-900); color: #e9edeb; border-radius: 28px; box-shadow: var(--sombra-dock);
}
:root[data-tema="escuro"] .dock { background: #242a28; border: 1px solid #343c3a; color: #eceeed; }
.dock__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; min-height: 52px; padding: 4px var(--e-2); border: 0; border-radius: 22px; background: none; color: inherit; text-decoration: none; font-size: 11px; font-weight: 500; white-space: nowrap; }
.dock__item:hover { background: rgb(255 255 255 / 0.1); color: inherit; }
.dock__item[aria-current="page"] { background: rgb(255 255 255 / 0.16); }
.dock :focus-visible { box-shadow: 0 0 0 2px var(--marca-900), 0 0 0 4px #fff; }
.dock .icon { width: 20px; height: 20px; }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 768px) {
  .topbar { padding: var(--e-4) var(--e-6); }
  .mainnav { padding: 0 var(--e-6) var(--e-3); }
  .content { padding: var(--e-2) var(--e-6) var(--e-6); }
  .btn-novo__t { display: inline; }
  .pill-status { display: inline-flex; }
  .banner { margin: 0 var(--e-6); }
  .dock__item { min-width: 84px; font-size: var(--t-12); }
}
@media (min-width: 1280px) {
  .topbar { padding: var(--e-4) var(--e-8); }
  .mainnav { padding: 0 var(--e-8) var(--e-3); }
  .content { padding: var(--e-2) var(--e-8) var(--e-8); }
}
@media (min-width: 1024px) {
  .mainnav__list { overflow: visible; flex-wrap: wrap; }
}

/* Ajustes de telas estreitas */
.mainnav__item, .brand-name, .dock__item span { white-space: nowrap; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
@media (max-width: 479px) {
  .topbar { padding-inline: var(--e-3); gap: var(--e-2); }
  .topbar__right { gap: 6px; }
  .circle, .btn-novo { width: 40px; height: 40px; min-height: 40px; }
  .btn-novo { padding: 0; justify-content: center; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: var(--t-16); }
}