/* Openfy: estrutura da página. Barra lateral escura com a marca, barra do topo e a tela.
   Computador: lateral com nomes (220px). De 721 a 1200px: lateral estreita (76px) com ícone e nome curto embaixo.
   Celular (até 720px): barra embaixo. Áreas seguras (recorte da câmera, cantos) respeitadas nos três. */

.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100dvh; }

/* ---------- barra lateral ---------- */

.lateral {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px 14px max(12px, env(safe-area-inset-left)); background: var(--lateral); color: var(--lateral-texto); z-index: 30;
  /* no escuro a lateral (#070706) quase some no fundo: uma linha fina marca a borda */
  box-shadow: inset -1px 0 0 var(--lateral-linha);
}
/* a lateral é sempre escura: o foco usa champagne (o --foco do tema claro é verde profundo e sumiria) */
.lateral :focus-visible { outline-color: var(--champanhe); }
.lateral__marca { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; margin-bottom: 6px; border-bottom: 1px solid var(--lateral-linha); }
.lateral__marca img { height: 22px; width: auto; }
.lateral__marca .so-o { display: none; height: 22px; }
.lateral__nav { display: grid; gap: 2px; }
.lateral__nav a, .lateral__rodape button, .lateral__rodape a {
  display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--raio);
  background: none; color: var(--lateral-mudo); font-size: var(--t-base); white-space: nowrap; width: 100%; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.lateral__nav a:hover, .lateral__rodape button:hover, .lateral__rodape a:hover { background: var(--lateral-ativo); color: var(--lateral-texto); }
.lateral__nav a[aria-current="page"] { background: var(--lateral-ativo); color: var(--marfim); font-weight: 700; }
.lateral__nav a[aria-current="page"] .ic { color: var(--champanhe); }
.lateral .ic { width: var(--ic-g); height: var(--ic-g); }
.lateral__nav .contador { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--contador-fundo); color: var(--contador-texto); font-size: var(--t-xs); font-weight: 700; display: inline-grid; place-items: center; }
.lateral__rodape { margin-top: auto; display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--lateral-linha); }
.lateral__eu { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lateral__eu .avatar { width: 24px; height: 24px; }
.lateral__assinatura { padding: 10px 10px 0; font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--lateral-mudo); }

/* ---------- área principal ---------- */

.area { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--esp-4);
  height: 60px; padding: 0 max(var(--pagina-vao), env(safe-area-inset-right)) 0 var(--pagina-vao);
  background: color-mix(in srgb, var(--fundo) 92%, transparent);
  border-bottom: 1px solid var(--linha); backdrop-filter: saturate(1.2) blur(8px);
}
.topo__titulo { font-size: var(--t-lg); font-weight: 700; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* o título e o <main> recebem foco depois de trocar de tela (rotas.js): sem contorno, é só o ponto de partida do leitor de tela */
.topo__titulo:focus, .tela:focus, .tela h1[tabindex="-1"]:focus, .tela h2[tabindex="-1"]:focus { outline: none; }
.topo__busca { position: relative; flex: 1; max-width: 460px; margin-left: auto; }
.topo__busca .entrada { height: 36px; background: var(--superficie); }
.topo__busca kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: inherit; font-size: var(--t-xs); color: var(--mudo); border: 1px solid var(--linha-forte); border-radius: var(--raio-p); padding: 1px 5px; pointer-events: none; }
.topo__acoes { display: flex; align-items: center; gap: var(--esp-2); }

/* criar: "+ Negócio" e o chevron com as outras opções, colados como um botão só (uma ação principal por tela) */
.topo__novo { display: inline-flex; }
.topo__novo > .btn:first-child { border-radius: var(--raio) 0 0 var(--raio); }
.topo__novo > .btn + .btn {
  width: 32px; border-radius: 0 var(--raio) var(--raio) 0;
  border-left-color: color-mix(in srgb, var(--primaria-texto) 28%, var(--primaria));
}
.topo__novo > .btn + .btn:hover { border-left-color: color-mix(in srgb, var(--primaria-texto) 28%, var(--primaria-hover)); }
.topo__novo > .btn:focus-visible { position: relative; z-index: 1; }
/* os dois botões estão colados: a área de toque extra do chevron não pode cobrir o "+ Negócio" */
.topo__novo > .btn::before { width: 100%; }
/* no toque o chevron tem a largura inteira de 44px (a área extra acima não ganha largura, então ela vem do botão) */
@media (pointer: coarse) { .topo__novo > .btn + .btn { width: 44px; } }

/* conta no topo: só no celular, onde a barra de baixo não tem o rodapé da lateral */
.topo__eu { display: none; flex: none; position: relative; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; }
.topo__eu .avatar { width: 30px; height: 30px; }
.topo__eu:hover .avatar { box-shadow: 0 0 0 2px var(--destaque); }
.topo__eu::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

.tela { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* cada tela desenha num contêiner próprio dentro do <main> (rotas.js), com o mesmo layout dele */
.tela__conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* telas com conteúdo corrido usam .pagina dentro de .tela: mesma largura e mesma borda esquerda em todas */
.pagina {
  width: 100%; max-width: var(--pagina-max); margin: 0 auto;
  padding: var(--pagina-vao) max(var(--pagina-vao), env(safe-area-inset-right)) var(--pagina-vao) var(--pagina-vao);
  display: grid; gap: var(--esp-5); align-content: start;
}
.pagina__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
/* barra de ferramentas logo abaixo do topo (filtros, alternar visão) */
.ferramentas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: var(--esp-3) max(var(--pagina-vao), env(safe-area-inset-right)) var(--esp-3) var(--pagina-vao);
  border-bottom: 1px solid var(--linha); background: var(--fundo);
}

/* ---------- lateral estreita (721 a 1200px): ícone com o nome curto embaixo ---------- */

@media (max-width: 1200px) {
  .app { grid-template-columns: calc(76px + env(safe-area-inset-left)) minmax(0, 1fr); }
  .lateral { padding: 16px 6px 12px max(6px, env(safe-area-inset-left)); align-items: center; }
  .lateral__marca { padding: 2px 0 16px; justify-content: center; align-self: stretch; }
  .lateral__marca img { display: none; }
  .lateral__marca .so-o { display: block; }
  .lateral__nav { align-self: stretch; }
  .lateral__nav a {
    position: relative; flex-direction: column; justify-content: center; gap: 3px;
    height: 54px; padding: 0 2px; font-size: var(--t-xs); text-align: center; line-height: 1.1;
  }
  .lateral__nav a > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .lateral__rodape { align-self: stretch; justify-items: center; }
  .lateral__rodape button, .lateral__rodape a { width: 44px; height: 44px; justify-content: center; padding: 0; position: relative; }
  /* tema e conta só com o ícone/avatar (o nome fica no title e no texto oculto); o avatar aparece */
  #alternar-tema > span, #eu-nome, .lateral__assinatura { display: none; }
  .lateral__eu .avatar { width: 28px; height: 28px; }
  .lateral__nav .contador { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px; }
}

/* ---------- celular (até 720px): barra de baixo ---------- */

@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .area { min-height: calc(100dvh - 60px - env(safe-area-inset-bottom)); }
  .lateral {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: calc(60px + env(safe-area-inset-bottom));
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    border-top: 1px solid var(--lateral-linha); box-shadow: none;
  }
  .lateral__marca, .lateral__rodape { display: none; }
  .lateral__nav { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .lateral__nav a { width: auto; height: 60px; flex-direction: column; gap: 3px; font-size: var(--t-xs); border-radius: 0; }
  .lateral__nav a > span { display: block; }
  .lateral__nav a[aria-current="page"] { background: none; }
  .lateral__nav .contador { top: 6px; right: calc(50% - 20px); }
  .topo { height: 56px; gap: 10px; }
  .topo__busca { max-width: none; }
  .topo__busca kbd { display: none; }
  /* sem espaço para o título no celular: some da vista, mas o leitor de tela continua lendo */
  .topo__titulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* "+ Negócio" vira só "+" (o nome continua para o leitor de tela) e a conta aparece no topo.
     "+" e chevron com 44px de largura: alvo de toque inteiro, sem área invisível que invada o vizinho */
  #novo-negocio, .topo__novo > .btn + .btn { width: 44px; padding: 0; }
  #novo-negocio > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topo__eu { display: inline-grid; }
}

/* ---------- financeiro, "Mais" e sino (barra de baixo com no máximo 5 itens) ---------- */
.nav--celular { display: none !important; }
.topo__sino { position: relative; }
.topo__sino .contador {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--contador-fundo); color: var(--contador-texto); font-size: var(--t-xs); font-weight: 700; line-height: 16px; text-align: center;
}
@media (max-width: 720px) {
  .lateral__nav .nav--larga { display: none !important; }
  .lateral__nav .nav--celular { display: flex !important; }
  .lateral__nav button.nav--celular {
    width: auto; height: 60px; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: var(--t-xs); border: 0; border-radius: 0; background: none; color: var(--lateral-mudo);
  }
  .lateral__nav button.nav--celular[aria-current="page"] { color: var(--marfim); font-weight: 700; }
  .lateral__nav button.nav--celular[aria-current="page"] .ic { color: var(--champanhe); }
}