/* ZeraCRM — layout do shell (topo, menu lateral, conteúdo, paleta). */

#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* nenhuma tela pode rolar horizontalmente: conteúdo largo (tabela, kanban) rola
   dentro do próprio container, nunca empurrando a página */
html, body { max-width: 100%; overflow-x: hidden; }

/* --------------------------------------------------------------------- topo */
#topo {
  height: var(--topo-altura); flex: 0 0 var(--topo-altura);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--vidro); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linha);
  z-index: 100;
}

.marca { display: flex; align-items: center; gap: 9px; }
.marca img { height: 22px; width: auto; display: block; }
/* a logo azul some no escuro e a branca some no claro — duas imagens em vez de
   filtro CSS, que deformaria o degradê da marca */
html[data-theme="dark"] .logo-clara, html:not([data-theme="dark"]) .logo-escura { display: none; }
.marca-produto {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--zera); padding: 2px 7px; border-radius: 5px; background: var(--zera-suave);
}

.busca-global {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px;
  background: var(--bg-afundado); border: 1px solid var(--linha);
  border-radius: var(--raio-p); color: var(--txt-fraco);
  font: inherit; font-size: 13px; cursor: pointer; text-align: left;
  transition: border-color var(--transicao), background var(--transicao);
}
.busca-global:hover { border-color: var(--zera); background: var(--bg-elevado); box-shadow: 0 0 0 3px var(--zera-suave); }
.busca-global span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-global kbd, .atalho-linha kbd {
  font-family: var(--fonte-mono); font-size: 10.5px;
  padding: 2px 6px; border: 1px solid var(--linha-forte); border-radius: 4px;
  background: var(--bg-elevado); color: var(--txt-fraco); white-space: nowrap;
}

.topo-acoes { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  flex: 0 0 auto; user-select: none;
}

/* --------------------------------------------------------------------- corpo */
#corpo { flex: 1; display: flex; min-height: 0; position: relative; }

/* botão de menu: só existe no celular */
#btn-menu { display: none; flex: 0 0 auto; }
#veu-menu { display: none; }

#menu {
  width: var(--lateral-largura); flex: 0 0 var(--lateral-largura);
  background: var(--bg-elevado); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 8px; overflow-y: auto;
}
.menu-lista, .menu-rodape { display: flex; flex-direction: column; gap: 2px; }
.menu-rodape { border-top: 1px solid var(--linha); padding-top: 8px; margin-top: 8px; }

#menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--raio-p);
  color: var(--txt-suave); font-size: 13px; font-weight: 550;
  text-decoration: none; transition: background var(--transicao), color var(--transicao);
}
#menu a:hover { background: var(--bg-hover); color: var(--txt); text-decoration: none; }
#menu a { position: relative; }
#menu a.ativo { background: var(--bg-ativo); color: var(--zera); font-weight: 650; }
#menu a.ativo::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--zera);
}
#menu a svg { flex: 0 0 auto; opacity: 0.85; }

#conteudo { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; }

/* cabeçalho padrão de tela — as views usam .tela + .tela-topo */
.tela { padding: 20px 24px 40px; max-width: 1500px; }
.tela-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.tela-topo h1 { margin: 0 0 2px; }
.tela-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* barra de filtros reutilizável */
.barra-filtros {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.barra-filtros input[type="search"] { max-width: 280px; }
.barra-filtros select { width: auto; min-width: 130px; }

/* ------------------------------------------------------------------- paleta */
.modal-paleta { max-width: 620px; }
.modal-paleta .modal-corpo { padding: 0; }
.paleta { display: flex; flex-direction: column; max-height: 62vh; }
.paleta-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--linha); color: var(--txt-fraco);
}
.paleta-topo input {
  border: none; background: transparent; padding: 0; min-height: 24px;
  font-size: 15px; color: var(--txt);
}
.paleta-topo input:focus { outline: none; box-shadow: none; }
.paleta-lista { overflow-y: auto; padding: 6px; }
.paleta-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: none; border-radius: var(--raio-p);
  background: transparent; color: var(--txt); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.paleta-item:hover, .paleta-item:focus { background: var(--bg-hover); outline: none; }
.paleta-item:focus-visible { background: var(--bg-ativo); box-shadow: inset 2px 0 0 var(--zera); }
.paleta-vazio { padding: 22px; text-align: center; color: var(--txt-fraco); font-size: 13px; }

.atalhos { display: flex; flex-direction: column; gap: 8px; }
.atalho-linha { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.atalho-linha kbd { min-width: 96px; text-align: center; }

/* ------------------------------------------------------------------ entrar */
/* Composição em duas metades: a esquerda vende, a direita recebe a senha.
   A metade da marca tem fundo escuro FIXO (não segue o tema): no claro as
   partículas do WebGL sumiam contra o branco. */
.entrar-split {
  display: grid; grid-template-columns: 1.05fr 1fr;
  min-height: 100vh; background: var(--bg);
}

.entrar-marca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;                    /* sem isto o rodapé encosta na última linha da lista */
  padding: 54px 56px 44px;
  background:
    radial-gradient(760px 520px at 22% 14%, rgba(127, 163, 196, 0.30), transparent 60%),
    radial-gradient(620px 480px at 88% 96%, rgba(91, 122, 153, 0.34), transparent 62%),
    linear-gradient(155deg, #1f2a37 0%, #17212c 45%, #101820 100%);
  color: #e8eef5;
  isolation: isolate;
}
.entrar-marca .fx-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.entrar-marca .fx-fundo canvas.hero3d { display: block; width: 100%; height: 100%; }
.entrar-marca-conteudo { position: relative; z-index: 1; max-width: 470px; margin-top: auto; }
.entrar-lista { margin-bottom: 4px; }

.entrar-logo {
  height: 46px; width: auto; display: block; margin-bottom: 34px;
  animation: surgir 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.entrar-titulo {
  font-size: 38px; line-height: 1.14; letter-spacing: -0.028em; font-weight: 700;
  color: #fff; margin: 0 0 16px;
  animation: surgir 560ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
.entrar-sub {
  font-size: 14.5px; line-height: 1.62; color: #aebdcd; max-width: 44ch; margin: 0 0 26px;
  animation: surgir 560ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
.entrar-lista {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 11px;
  font-size: 13.5px; color: #c3d0dd;
  animation: surgir 560ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}
.entrar-lista li { display: flex; align-items: center; gap: 11px; }
.entrar-lista .ponto {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #8aa2b8; box-shadow: 0 0 0 4px rgba(138, 162, 184, 0.18);
}
.entrar-rodape-marca {
  position: relative; z-index: 1; flex: 0 0 auto;
  font-size: 11.5px; color: #7f92a6;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.entrar-form {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
  min-width: 0;                 /* item de grid não encolhe sem isto */
  background:
    radial-gradient(680px 420px at 78% -12%, var(--zera-suave), transparent 64%),
    var(--bg);
}
.caixa-entrar {
  width: 100%; max-width: 372px;
  animation: surgir 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.marca-login { display: flex; align-items: center; gap: 9px; margin-bottom: 30px; }
.marca-login img { height: 26px; width: auto; display: block; }
.entrar-bemvindo { font-size: 25px; margin: 0 0 4px; letter-spacing: -0.024em; }
.caixa-entrar .subtitulo { color: var(--txt-suave); margin-bottom: 26px; font-size: 13.5px; }
.caixa-entrar #btn-entrar { width: 100%; margin-top: 4px; }
.entrar-nota { margin-top: 20px; line-height: 1.55; color: var(--txt-fraco); }

.aviso-entrar {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  border-radius: var(--raio-p); border: 1px solid var(--erro);
  background: var(--erro-bg); color: var(--erro);
  font-size: 12.5px; line-height: 1.5;
  animation: surgir 200ms ease-out both;
}

/* A metade da marca some antes de espremer: num celular ela roubaria a tela
   inteira do formulário, que é o que a pessoa veio fazer. */
@media (max-height: 760px) {
  .entrar-marca { padding: 34px 44px 30px; gap: 22px; }
  .entrar-titulo { font-size: 31px; }
  .entrar-logo { height: 38px; margin-bottom: 22px; }
  .entrar-sub { margin-bottom: 18px; }
}

@media (max-width: 980px) {
  .entrar-split { grid-template-columns: 1fr; }
  .entrar-marca { display: none; }
  .entrar-form { min-height: 100vh; }
}

/* Num celular de 390px, 372 de caixa + 64 de padding = 436: o formulário
   estourava para fora da tela e os campos ficavam cortados na borda direita. */
@media (max-width: 460px) {
  .entrar-form { padding: 28px 18px; }
  .caixa-entrar { max-width: 100%; }
  .entrar-bemvindo { font-size: 22px; }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 860px) {
  #btn-menu { display: inline-flex; }
  #menu {
    position: fixed; left: 0; top: var(--topo-altura); bottom: 0; z-index: 95;
    transform: translateX(-100%); transition: transform 180ms ease;
    box-shadow: var(--sombra-forte);
  }
  #menu.aberto { transform: translateX(0); }
  /* fechado, o menu não pode receber foco por Tab: o cursor sumiria da tela */
  #menu:not(.aberto) { visibility: hidden; }
  #menu:not(.aberto) a { pointer-events: none; }
  #veu-menu {
    display: block; position: fixed; inset: var(--topo-altura) 0 0 0; z-index: 92;
    background: rgba(10, 16, 22, 0.42); opacity: 0; pointer-events: none;
    transition: opacity 180ms ease;
  }
  body.menu-aberto #veu-menu { opacity: 1; pointer-events: auto; }
  #corpo { display: block; }
  #conteudo { height: calc(100vh - var(--topo-altura)); }
  .tela { padding: 16px 14px 32px; }
  .busca-global span { display: none; }
  .busca-global kbd { display: none; }
  .busca-global { max-width: 44px; justify-content: center; }
}