/*
 * layout.css — a casca do app (visual Leve, D80): topo com a marca gocasa (D85), as seis áreas em pílula, a busca, o sino, a
 * engrenagem e a pessoa; sub-abas da área no alto do conteúdo; no celular, a barra de baixo com Hoje, Dinheiro, +,
 * Imóveis e Menu (RN-M17-34). Área de conteúdo, faixa "ver como" e páginas de entrada. Só tokens (D20).
 */
.pular {
  position: absolute; left: var(--esp-3); top: -100px; z-index: var(--z-aviso);
  padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-md);
  background: var(--cor-marca); color: var(--cor-sobre-marca); font-weight: var(--peso-medio);
}
.pular:focus { top: var(--esp-3); color: var(--cor-sobre-marca); }

/* ---------- Marca (RN-M17-22, D85): o G e o lettering gocasa, inline, na cor da marca ---------- */
.gocasa-marca { color: var(--cor-marca); display: inline-flex; align-items: center; text-decoration: none; }
.gocasa-marca:hover { color: var(--cor-marca-forte); text-decoration: none; }
.gocasa-marca__logo { display: block; height: var(--marca-media); width: auto; }
.gocasa-marca--pequena .gocasa-marca__logo { height: var(--marca-pequena); }
.gocasa-marca--grande .gocasa-marca__logo { height: var(--marca-grande); }

/* ---------- Topo: marca, áreas em pílula, busca, sino, engrenagem e pessoa (RN-M17-34) ---------- */
.topo {
  position: sticky; top: 0; z-index: var(--z-menu);
  background: var(--menu-fundo);
  border-bottom: var(--borda-fina) solid var(--menu-borda);
}
.topo__linha {
  display: flex; align-items: center; gap: var(--esp-4);
  max-width: var(--largura-max); margin-inline: auto;
  height: var(--altura-cabecalho);
  padding-left: max(var(--esp-5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--esp-5), env(safe-area-inset-right, 0px));
}
.topo__marca { flex: none; display: flex; align-items: center; }
.topo__direita { margin-left: auto; display: flex; align-items: center; gap: var(--esp-2); flex: none; }

.areas { display: flex; align-items: center; gap: var(--esp-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.areas::-webkit-scrollbar { display: none; }
.area {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: var(--altura-item-menu);
  padding: 0 var(--esp-4);
  border-radius: var(--raio-pill);
  color: var(--menu-texto);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.area:hover { background: var(--menu-hover); color: var(--cor-texto); text-decoration: none; }
.area[aria-current] { background: var(--menu-ativo); color: var(--menu-ativo-texto); }

/* Botões de ícone do topo (lupa, sino, engrenagem) */
.botao-icone {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--altura-controle); height: var(--altura-controle);
  border-radius: var(--raio-pill);
  color: var(--menu-texto);
  list-style: none; cursor: pointer;
}
.botao-icone::-webkit-details-marker { display: none; }
.botao-icone:hover { background: var(--menu-hover); color: var(--cor-texto); text-decoration: none; }
.botao-icone[aria-current] { background: var(--menu-ativo); color: var(--menu-ativo-texto); } /* a engrenagem, nas telas dela (D82) */
.sino__contador { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--raio-pill); background: var(--cor-erro-forte); color: var(--cor-sobre-erro); font-size: var(--texto-xs); font-weight: var(--peso-forte); line-height: 18px; text-align: center; }

/* Buscar em tudo (RN-M17-24): caixa no computador largo, lupa no resto */
.busca-topo { position: relative; display: flex; align-items: center; width: var(--largura-busca); min-width: 0; }
.busca-topo__icone { position: absolute; left: var(--esp-3); display: inline-flex; color: var(--cor-texto-fraco); pointer-events: none; }
.busca-topo input {
  width: 100%;
  height: var(--altura-controle);
  padding: 0 var(--esp-8) 0 var(--esp-7);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
}
.busca-topo input:focus { border-color: var(--cor-borda-forte); outline: none; box-shadow: var(--anel-foco); }
.busca-topo__atalho {
  position: absolute; right: var(--esp-3);
  padding: 0 var(--esp-1);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-xs);
  font-family: var(--fonte-texto); font-size: var(--texto-xs); color: var(--cor-texto-fraco);
  pointer-events: none;
}
.busca-topo__painel {
  position: absolute; right: 0; top: calc(100% + var(--esp-1));
  width: max(100%, var(--largura-busca-painel));
  max-height: calc(100vh - var(--altura-cabecalho) - var(--esp-6));
  overflow-y: auto;
  padding: var(--esp-3);
  background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-3);
  z-index: var(--z-menu);
  display: flex; flex-direction: column; gap: var(--esp-4);
}
.busca-topo__painel[hidden] { display: none; }
.busca-lupa { display: none; }

/* Menus que abrem do topo: a engrenagem e o da pessoa */
.menu-suspenso { position: relative; }
.menu-suspenso > summary { list-style: none; cursor: pointer; }
.menu-suspenso > summary::-webkit-details-marker { display: none; }
.menu-suspenso__lista {
  position: absolute; right: 0; top: calc(100% + var(--esp-1));
  width: var(--largura-menu-folha); max-width: calc(100vw - 2 * var(--esp-4));
  background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-2);
  padding: var(--esp-2);
  display: flex; flex-direction: column; gap: 2px;
  z-index: var(--z-menu);
}
.menu-suspenso__lista a, .menu-suspenso__lista button {
  display: flex; align-items: center; gap: var(--esp-3);
  width: 100%; text-align: left;
  min-height: var(--altura-controle);
  padding: 0 var(--esp-3);
  border: 0; background: none; border-radius: var(--raio-sm);
  color: var(--cor-texto); font: inherit;
}
.menu-suspenso__lista a:hover, .menu-suspenso__lista button:hover { background: var(--cor-superficie-2); text-decoration: none; }
.menu-suspenso__lista a[aria-current] { background: var(--cor-marca-suave); color: var(--cor-marca-forte); font-weight: var(--peso-medio); }
.menu-suspenso__titulo { padding: var(--esp-2) var(--esp-3); font-size: var(--texto-sm); font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
.usuario-menu > summary { display: inline-flex; border-radius: var(--raio-pill); }
.usuario-menu__nome { display: flex; flex-direction: column; padding: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-1); border-bottom: var(--borda-fina) solid var(--cor-borda); }
.usuario-menu__nome span { font-size: var(--texto-xs); color: var(--cor-texto-suave); overflow-wrap: anywhere; }

.avatar {
  width: var(--avatar); height: var(--avatar); border-radius: var(--raio-pill); flex: none;
  display: inline-grid; place-items: center;
  background: var(--cor-marca-suave); color: var(--cor-marca-forte);
  font-size: var(--texto-md); font-weight: var(--peso-medio);
}
.usuario-menu > summary:hover .avatar { background: var(--cor-superficie-3); }

/* Sub-abas: as telas da área, no alto do conteúdo (RN-M17-34) */
.abas-area {
  display: flex; gap: var(--esp-1);
  margin-bottom: var(--esp-5);
  overflow-x: auto; scrollbar-width: none;
}
.abas-area::-webkit-scrollbar { display: none; }
.abas-area a {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: var(--altura-item-menu);
  padding: 0 var(--esp-4);
  border-radius: var(--raio-pill);
  color: var(--menu-texto);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.abas-area a:hover { background: var(--menu-hover); color: var(--cor-texto); text-decoration: none; }
.abas-area a[aria-current] { background: var(--menu-ativo); color: var(--menu-ativo-texto); }

/* Barra de baixo do celular: Hoje, Dinheiro, +, Imóveis e Menu (RN-M17-34, RN-M17-26) */
.barra-baixo { display: none; }

/* ---------- Conteúdo ---------- */
.conteudo {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  min-width: 0;
  padding-block: var(--esp-5) var(--esp-8);
  padding-left: max(var(--esp-5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--esp-5), env(safe-area-inset-right, 0px));
}
.conteudo:focus { outline: none; box-shadow: none; }
.conteudo--estreito { max-width: calc(var(--largura-leitura) + var(--esp-8)); }

/* ---------- Faixa "ver como" ---------- */
.faixa {
  position: sticky; top: var(--altura-cabecalho); z-index: var(--z-faixa);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-3);
  padding: var(--esp-2) var(--gutter);
  background: var(--cor-aviso-suave); color: var(--cor-aviso-texto);
  border-bottom: var(--borda-fina) solid var(--cor-borda);
  font-size: var(--texto-md);
}

/* ---------- Páginas de entrada (login etc.) ---------- */
.pagina-entrada {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--esp-5) var(--gutter);
  background: var(--cor-fundo);
}
.pagina-entrada__caixa {
  width: 100%; max-width: 420px;
  background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--esp-6) var(--esp-5);
  display: flex; flex-direction: column; gap: var(--esp-4);
}
.pagina-entrada__marca { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); text-align: center; margin-bottom: var(--esp-2); }
.pagina-entrada__lema { font-size: var(--texto-md); color: var(--cor-texto-suave); }
.pagina-entrada__frase { max-width: 32ch; margin: 0; font-size: var(--texto-sm); font-style: italic; color: var(--cor-texto-suave); }
.pagina-entrada h1 { font-size: var(--texto-dialogo); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letras-secao); }

/* ---------- Telas médias: a busca vira lupa ---------- */
@media (max-width: 1180px) {
  .busca-topo { display: none; }
  .busca-lupa { display: inline-flex; }
  .topo__linha { gap: var(--esp-3); }
}

/* ---------- Celular: áreas na barra de baixo ---------- */
@media (max-width: 767px) {
  .topo__marca .gocasa-marca__logo { height: var(--marca-pequena); } /* 32px no celular (kit da marca) */
  .topo__linha { height: var(--altura-controle-grande); box-sizing: content-box; padding-block: var(--esp-2); padding-left: var(--gutter); padding-right: max(var(--esp-4), env(safe-area-inset-right, 0px)); gap: var(--esp-2); }
  .areas, .engrenagem { display: none; }
  .conteudo { padding-left: var(--gutter); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: var(--esp-4) var(--esp-7); }
  .conteudo--com-barra { padding-bottom: calc(var(--altura-barra-baixo) + env(safe-area-inset-bottom, 0px) + var(--esp-6)); }
  .abas-area { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); margin-bottom: var(--esp-4); }

  .barra-baixo {
    display: flex; align-items: stretch; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-menu);
    min-height: var(--altura-barra-baixo);
    padding: 0 max(var(--esp-2), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--esp-2), env(safe-area-inset-left, 0px));
    background: var(--menu-fundo);
    border-top: var(--borda-fina) solid var(--menu-borda);
  }
  .barra-baixo__item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: var(--esp-1) 0;
    color: var(--menu-texto);
    font-size: var(--texto-xs); font-weight: var(--peso-medio);
    list-style: none; cursor: pointer;
  }
  .barra-baixo__item::-webkit-details-marker { display: none; }
  .barra-baixo__item:hover { color: var(--cor-texto); text-decoration: none; }
  .barra-baixo__item[aria-current] { color: var(--cor-marca); }
  .barra-baixo__item[aria-current] .icone { color: var(--cor-marca); }

  .botao-mais { flex: 1 1 0; display: flex; justify-content: center; align-items: center; position: relative; }
  .botao-mais > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    width: var(--botao-mais); height: var(--botao-mais);
    border-radius: var(--raio-pill);
    background: var(--cor-acao); color: var(--cor-sobre-acao);
  }
  .botao-mais > summary::-webkit-details-marker { display: none; }
  .botao-mais[open] > summary { background: var(--cor-acao-forte); }
  .botao-mais__lista {
    position: fixed; left: var(--esp-4); right: var(--esp-4);
    bottom: calc(var(--altura-barra-baixo) + env(safe-area-inset-bottom, 0px) + var(--esp-2));
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--esp-2);
    background: var(--cor-superficie);
    border: var(--borda-fina) solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-3);
  }
  .botao-mais__lista a {
    display: flex; align-items: center; gap: var(--esp-3);
    min-height: var(--altura-controle-grande);
    padding: 0 var(--esp-3);
    border-radius: var(--raio-md);
    color: var(--cor-texto); font-weight: var(--peso-medio);
  }
  .botao-mais__lista a:hover { background: var(--cor-linha-hover); text-decoration: none; }

  .menu-folha { flex: 1 1 0; display: flex; }
  .menu-folha > summary { width: 100%; }
  .menu-folha__painel {
    position: fixed; left: 0; right: 0; top: 0;
    bottom: calc(var(--altura-barra-baixo) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    padding: var(--esp-5) var(--gutter) var(--esp-6);
    background: var(--cor-fundo);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-5) var(--esp-4);
    align-content: start;
    z-index: var(--z-menu);
  }
  .menu-folha__area { display: flex; flex-direction: column; gap: 2px; }
  .menu-folha__titulo { padding: 0 var(--esp-2) var(--esp-1); font-size: var(--texto-sm); font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
  .menu-folha__area a {
    display: flex; align-items: center; gap: var(--esp-2);
    min-height: var(--altura-controle);
    padding: 0 var(--esp-2);
    border-radius: var(--raio-md);
    color: var(--cor-texto);
  }
  .menu-folha__area a:hover { background: var(--cor-superficie-2); text-decoration: none; }
  .menu-folha__area a[aria-current] { background: var(--menu-ativo); color: var(--menu-ativo-texto); }
}

/* Na entrada, o botão principal é o grande (44px): é o único da tela e o primeiro toque do dia. */
.pagina-entrada .formulario__acoes .btn { min-height: var(--altura-controle-grande); font-size: var(--texto-lg); }