/* Estrutura das telas: casca do ERP (sidebar, topbar, rodape) e tela solta. */

/* O container declara o ritmo. Nenhum filho precisa saber do vizinho. */
.pagina {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5) 50px;
  min-width: 0;
}

/* Item de flex nasce com min-width auto e nao encolhe abaixo do conteudo mais
   largo que tem dentro. Sem isto, tabela larga empurra a pagina de lado. */
.pagina > * { min-width: 0; }

/* Tela solta, sem sidebar (login, 2FA, troca de senha, erro): um cartao no meio da tela. */
.solo {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5) var(--sp-4);
}

.solo-cartao {
  width: 100%;
  max-width: 400px;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.solo-marca {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -.02em;
  color: var(--cor-primaria-texto);
}

.solo-titulo { font-size: var(--fs-2xl); overflow-wrap: anywhere; }
.solo-texto { color: var(--texto-suave); }
.solo-nota { font-size: var(--fs-xs); color: var(--texto-suave); overflow-wrap: anywhere; }

.solo-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.solo-acoes { display: flex; justify-content: center; }

/* QR e chave da ativacao do 2FA */
.qr-2fa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.qr-2fa-imagem { width: 200px; height: auto; aspect-ratio: 1; }
.qr-2fa-legenda { font-size: var(--fs-sm); color: var(--texto-suave); text-align: center; }

.chave-2fa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.chave-2fa-valor {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  letter-spacing: .05em;
  padding: var(--sp-2) var(--sp-3);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  overflow-wrap: anywhere;
  user-select: all;
}

/* Cracha do convite: o que o convite da, so leitura, no fundo da pagina. */
.convite-cracha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}

.convite-cracha-linha { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.convite-cracha-linha dt { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); }
.convite-cracha-linha dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }

/* Documento solto (termos de uso): texto longo numa coluna de leitura. */
.documento {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
}

.documento-cartao {
  align-self: flex-start;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}

.documento-titulo { font-size: var(--fs-2xl); }
.documento-secao { display: flex; flex-direction: column; gap: var(--sp-2); }
.documento-secao h2 { font-size: var(--fs-lg); }
.documento-secao p { color: var(--texto-suave); line-height: 1.65; overflow-wrap: anywhere; }

/* Celular estreito: o cartao devolve espaco para o conteudo. */
@media (max-width: 520px) {
  .solo-cartao { padding: var(--sp-5) var(--sp-4); }
  .documento { padding: var(--sp-4) var(--sp-3); }
  .documento-cartao { padding: var(--sp-5) var(--sp-4); }
}

/* --- Casca do ERP ------------------------------------------------------------------------ */

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

/* Sidebar fixa; a largura vem de --sidebar-width (o main.js guarda a que o usuario arrastou). */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-sidebar);
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border-right: 1px solid var(--borda);
}

.sidebar-resize {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  transition: background var(--transicao);
}

.sidebar-resize:hover,
.redimensionando .sidebar-resize { background: var(--cor-primaria); opacity: .35; }
.redimensionando { cursor: col-resize; user-select: none; }

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--borda);
  min-width: 0;
}

.logo-quadro {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cor-primaria);
  border-radius: 50%;
  color: var(--cor-primaria-escura);
  font-size: 20px;
}

.marca-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.marca-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 14px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Grupo do menu: sanfona. O da tela atual abre e os outros fecham (foco contextual). */
.grupo-cab {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 14px 10px 4px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.grupo:first-child .grupo-cab { padding-top: 4px; }
.grupo-cab:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 1px; }

.grupo-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-suave);
}

.grupo-chevron { font-size: 12px; color: var(--texto-suave); transition: transform var(--transicao); }
.grupo.aberto .grupo-chevron { transform: rotate(90deg); }

.grupo-corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}

.grupo.aberto .grupo-corpo { grid-template-rows: 1fr; }

/* Fechado, o grupo some tambem do Tab (visibility), depois da animacao. Aberto, herda da sidebar:
   com visible, os itens escapavam da gaveta fechada e o Tab caia num link fora da tela. */
.corpo-interno {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
  visibility: hidden;
  transition: visibility 0s linear .25s;
}

.grupo.aberto .corpo-interno { visibility: inherit; transition: none; }

.sub-grupo { display: flex; flex-direction: column; }

.sub-grupo-label {
  padding: 7px 10px 5px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-secundario);
}

.sub-grupo-itens {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid var(--borda);
}

.itens-diretos { display: flex; flex-direction: column; gap: 2px; margin-left: 8px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}

.nav-item i { flex: 0 0 auto; font-size: 16px; opacity: .85; }
.nav-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.nav-item:hover { background: var(--fundo); color: var(--texto); }
.nav-item:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 1px; }

.nav-item.ativo {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  font-weight: 600;
}

/* Modulo sem tela ainda: visivel para o usuario saber que vem, sem link. */
.nav-item.esmaecido { color: var(--texto-fraco); cursor: not-allowed; opacity: .65; }
/* Na sidebar o aviso e so o relogio: a etiqueta cortaria o nome. O texto fica para o leitor de tela. */
.nav-item .nav-em-breve { font-size: 13px; opacity: 1; }

/* Rodape: Inicio da empresa, quem esta logado, meu perfil e sair. */
.sidebar-rodape {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--borda);
}

/* Texto preto sobre o degrade: o texto fica no terco claro, com 5,5:1 ou mais. */
.btn-home-side {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--raio-sm);
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
  color: var(--texto-sobre-cor-primaria);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px var(--cor-primaria-sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.btn-home-side i { font-size: 17px; }
.btn-home-side:hover { transform: translateY(-1px); box-shadow: 0 6px 16px var(--cor-primaria-sombra); }
.btn-home-side:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }
.btn-home-side.ativo { box-shadow: inset 0 0 0 2px var(--brilho-interno), 0 4px 12px var(--cor-primaria-sombra); }

.usuario-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px 0 10px;
  min-width: 0;
}

.avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-full);
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
  color: var(--texto-sobre-cor-primaria);
  font-family: var(--font-titulo);
  font-size: 13px;
  font-weight: 700;
}

.usuario-textos { flex: 1; min-width: 0; line-height: 1.3; }

.usuario-textos .nome,
.usuario-textos .papel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.usuario-textos .nome { font-size: 13px; font-weight: 600; color: var(--texto); }
.usuario-textos .papel { font-size: 11px; color: var(--texto-suave); }
.form-sair { display: contents; }

/* Area principal: topbar fixa no alto e a pagina. */
.principal {
  margin-left: var(--sidebar-width);
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.principal > .pagina { flex: 1; }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-5);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  min-width: 0;
}

.topbar .titulo-pagina {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Com .topbar na frente: o .btn do components.css vem depois e ganharia no empate. */
.topbar .btn-menu { display: none; }

.tb-empresa { display: flex; align-items: center; gap: var(--sp-1); flex: 0 1 auto; min-width: 0; }
.tb-empresa .selectbusca { width: 260px; min-width: 0; }
.tb-acoes { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.tb-ocultar { display: flex; align-items: center; gap: var(--sp-2); }
.tb-ocultar-rotulo { font-size: 13px; color: var(--texto-suave); white-space: nowrap; }

/* Busca global (so na empresa e com modulo da busca no perfil). Na topbar larga, o campo com o painel
   embaixo, do canto de cima a esquerda; na estreita (ate 1499px, sidebar padrao), a lupa abre a caixa
   flutuante, que o busca.js poe embaixo dela, da borda esquerda da lupa para o conteudo, sem passar da
   tela, e que nasce da lupa (o transform-origin daqui vale ate o JS posicionar). Escala curta e
   opacidade, como o .popover (Padrao_Origem_Ancorada). */
.tb-busca { position: relative; flex: 0 0 auto; }
.topbar .tb-busca-abrir { display: none; } /* com .topbar na frente, como o .btn-menu */
.tb-busca-caixa { position: relative; width: 200px; }
.tb-busca-entrada { position: relative; display: flex; align-items: center; }
.tb-busca-entrada > i { position: absolute; left: 10px; color: var(--texto-suave); pointer-events: none; }

.tb-busca-campo {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--fs-sm);
}

.tb-busca-campo:focus { outline: 2px solid var(--cor-primaria-escura); outline-offset: 0; border-color: var(--cor-primaria-escura); }

.tb-busca-painel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  width: 460px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
  transform-origin: top left;
  opacity: 0;
  transform: scale(.96);
  visibility: hidden;
  pointer-events: none;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1), opacity .16s, visibility 0s linear .16s;
}

.tb-busca.mostrando .tb-busca-painel {
  opacity: 1;
  transform: scale(1);
  visibility: inherit; /* herda, nunca visible: nao escapa de um pai escondido */
  pointer-events: auto;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1), opacity .16s;
}

@media (max-width: 1499px) {
  .topbar .tb-busca-abrir { display: inline-flex; }

  .tb-busca-caixa {
    position: fixed;
    z-index: var(--z-dropdown);
    width: min(440px, calc(100vw - 32px));
    padding: 8px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra-md);
    transform-origin: top left;
    opacity: 0;
    transform: scale(.96);
    visibility: hidden;
    pointer-events: none;
    transition: transform .16s cubic-bezier(.2, .9, .3, 1), opacity .16s, visibility 0s linear .16s;
  }

  .tb-busca.aberta .tb-busca-caixa {
    opacity: 1;
    transform: scale(1);
    visibility: inherit;
    pointer-events: auto;
    transition: transform .16s cubic-bezier(.2, .9, .3, 1), opacity .16s;
  }

  /* Dentro da caixa, o painel e a continuacao dela: sem borda propria, so quando ha o que mostrar. */
  .tb-busca-painel,
  .tb-busca.mostrando .tb-busca-painel {
    position: static;
    display: none;
    width: auto;
    max-height: min(60vh, 420px);
    margin-top: 6px;
    padding: 0;
    border: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    visibility: inherit;
    pointer-events: auto;
    transition: none;
  }

  .tb-busca.mostrando .tb-busca-painel { display: block; }
  .tb-busca-campo { height: 44px; font-size: var(--fs-lg); }
}

@media (max-width: 720px) {
  .topbar .tb-busca-abrir { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-busca-painel, .tb-busca.mostrando .tb-busca-painel, .tb-busca-caixa, .tb-busca.aberta .tb-busca-caixa { transform: none; }
}

.overlay-mob { display: none; }

/* Secao da pagina (titulo do grupo + grade de cards). */
.secao { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.secao-titulo { font-size: var(--fs-lg); }

/* Card de modulo no Inicio da empresa: mesma altura na fileira, nome no pe. */
.cd-modulo { min-height: 104px; justify-content: space-between; }

/* Ate 880px a sidebar vira gaveta, aberta pelo botao de menu da topbar. */
@media (max-width: 880px) {
  /* A gaveta e um painel por cima do scrim (.overlay-mob), na camada do modal. */
  .sidebar {
    z-index: var(--z-modal);
    width: min(300px, 86vw);
    box-shadow: var(--sombra-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }

  .drawer-aberto .sidebar { transform: none; visibility: visible; transition: transform .2s ease; }
  body.drawer-aberto { overflow: hidden; } /* o que fica atras da gaveta nao rola */
  .sidebar-resize { display: none; }
  .principal { margin-left: 0; }
  .topbar .btn-menu { display: inline-flex; }
  .topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .nav-item { padding: 10px 9px; min-height: 44px; }
  .grupo-cab, .btn-home-side { min-height: 44px; } /* gaveta e toque: 44px de altura */

  .overlay-mob {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--cor-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .drawer-aberto .overlay-mob { opacity: 1; pointer-events: auto; }
}

/* As acoes da topbar nao encolhem, e a acao principal pode ser longa (Nova categoria financeira): antes
   de o seletor de empresa espremer, os rotulos saem e o title do botao leva o nome. Faixas pela sidebar
   padrao (248px): ate 1220, Novo registro e Ocultar valores; de 881 a 1020 e na gaveta ate 780, a acao
   principal tambem. Abaixo de 720, a regra do celular tira todos. */
@media (max-width: 1220px) {
  .tb-acoes [data-popover="popNovoRegistro"] .rotulo-largo, .tb-ocultar-rotulo { display: none; }
}

@media (min-width: 881px) and (max-width: 1020px), (max-width: 780px) {
  .tb-acoes .rotulo-largo { display: none; }
}

@media (max-width: 720px) {
  .rotulo-largo, .tb-ocultar-rotulo { display: none; }
  .tb-empresa .selectbusca { width: 180px; }
  .tb-acoes .btn { min-width: 44px; } /* acao que virou so icone continua com 44px de toque */
}

/* No celular o titulo da tela vale mais que o Imprimir, que e acao de mesa, e que o Voltar, que o menu
   ja leva (sem ele, no detalhe da conta o seletor de empresa caia para 34px). */
@media (max-width: 520px) {
  .topbar .tb-todas, .topbar [data-imprimir], .topbar [data-voltar] { display: none; }
  /* A lupa da busca global entra na fila: vaos de 4px, para o seletor e o titulo nao pagarem os 44px dela. */
  .topbar, .tb-acoes { gap: var(--sp-1); }
  .tb-empresa .selectbusca { width: 128px; }
  .topbar .titulo-pagina { font-size: var(--fs-lg); }
  .principal > .pagina { padding: var(--sp-5) var(--sp-3) 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .overlay-mob, .grupo-corpo, .grupo-chevron, .btn-home-side { transition: none; }
}

/* Impressao: so o conteudo, sem menu, topbar de acoes, filtros, paginacao, Acoes, toast nem espera. */
@media print {
  .sidebar, .overlay-mob, .btn-menu, .tb-busca, .tb-empresa, .tb-acoes, .toasts, .loading-overlay,
  .portal-barra, .oc-pag, .col-acoes, .portal-card-acoes, .portal-rodape form, .conv-acoes,
  .fu-bar, .tabela-ferramentas, .tabela-filtros, .col-sel, .tsel-bar, .th-seta { display: none !important; }
  .tabela-scroll { overflow: visible; }
  .principal { margin-left: 0; }
  .topbar { position: static; height: auto; padding: 0 0 var(--sp-3); border: 0; }
  .principal > .pagina { padding: 0; }
  body { background: var(--branco); }
}