/* ===========================================================================
   CAMADA 3 - LAYOUT
   Primitivas reaproveitaveis e os dois shells de pagina.
   =========================================================================== */

/* --- Primitivas ----------------------------------------------------------
   Aceitam variavel local, entao servem em qualquer pagina sem criar variante.
   Espacamento sai daqui, nao de classe utilitaria de margem. */
.ipr-stack   { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-5)); }
.ipr-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.ipr-split   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ipr-center  { display: grid; place-items: center; }

/* Cabecalho do formulario de edicao: diz QUAL registro esta sendo editado.
   Sem ele, duas empresas parecidas viram a mesma tela e o gestor so descobre
   que editou a errada depois de salvar. */
.ipr-form-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}
.ipr-form-cabecalho__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  box-shadow: inset 0 0 0 1px var(--color-accent-tint-strong);
  color: var(--color-accent-400);
}
.ipr-form-cabecalho__nome { font-size: var(--font-size-lg); letter-spacing: var(--tracking-snug); }
.ipr-form-cabecalho__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* A COLUNA DO FORMULARIO. `grid` com `gap`, e nao so uma largura maxima: a
   tela de tabela de comissao tem DOIS cartoes (o de copiar e o de
   cadastrar), e sem o espacamento eles ficavam colados, parecendo um cartao
   so partido ao meio. Fica no layout, e nao no CSS de uma pagina: cadastro de
   usuario, de empresa e o que vier depois usam a mesma caixa, e formulario
   esparramado na largura toda cansa de ler. */
.ipr-form-pagina {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  max-inline-size: 46rem;
  margin-inline: auto;
}

.ipr-grid {
  display: grid;
  gap: var(--space-5);
  /* `min(..., 100%)`: um minimo maior que o espaco disponivel faria a unica
     coluna passar da tela no celular. */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

/* --- Shell de autenticacao -----------------------------------------------
   Coluna UNICA, centrada na tela. Usado pelo login, pelo cadastro e pela
   pagina de erro.

   Substituiu um split-screen. O motivo nao foi so gosto: com duas colunas, o
   conteudo de cada lado se alinha em relacao a coluna dele, nunca a tela, e
   qualquer diferenca de altura entre os dois lados aparece como desalinho.
   Uma caixa so no centro nao tem com o que desalinhar, em largura nenhuma. */
.ipr-auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-10) var(--space-5);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* A pilha central: marca, cartao e rodape. Largura vem do token, entao a
   medida do formulario e a mesma em qualquer tela de credencial. */
.ipr-auth__panel {
  width: min(100%, var(--container-narrow));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* ===========================================================================
   SHELL DA APLICACAO: barra lateral, barra do topo e conteudo.

   RECOLHER A SIDEBAR, sem travar.

   Anima UMA propriedade em UM elemento: a primeira coluna do grid. Tudo que
   muda de aparencia dentro da barra usa so `opacity`, que o compositor resolve
   sem passar por layout.

   O que costuma deixar esse efeito travado, e que aqui esta evitado:
     - animar varias propriedades ao mesmo tempo (width + padding + font-size);
     - deixar o texto REQUEBRAR durante a animacao. `nowrap` + `overflow:
       hidden` na barra fazem o rotulo ser cortado em vez de recalculado a cada
       quadro, que e a diferenca entre suave e picotado;
     - animar por JavaScript, quadro a quadro. Aqui o JS so troca uma classe.
   =========================================================================== */
.ipr-shell {
  /*
    ALTURA EXATA DA TELA, nao `min-height`.

    Com `min-height`, uma pagina alta faz o shell inteiro crescer, e a sidebar
    cresce junto: ela passa a ter a altura do CONTEUDO, nao da janela. O rodape
    do usuario iria para o fim de uma barra de 2000px, e nao para o rodape da
    tela. Fixando a altura, quem rola e o `.ipr-main`, e a topbar fica sempre
    visivel.
  */
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  transition: grid-template-columns var(--dur-panel) var(--ease-out);
}
/* Largura recolhida: cabe o icone e o respiro dele, nada mais. */
.ipr-shell.is-compacta { --sidebar-width: var(--sidebar-compacta); }

/* --- A barra lateral -----------------------------------------------------
   O NAVY DA MARCA, LISO: o mesmo fundo da cortina de abertura, entao quem
   acabou de entrar sente que continua no mesmo lugar. A luz azul que
   derramava do canto saiu com o resto do brilho. */
.ipr-sidebar {
  grid-area: sidebar;
  position: relative;
  background: var(--color-bg-sunken);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3) var(--space-4);
  /* Corta o que passa da largura enquanto ela encolhe. Sem isto o rotulo
     empurraria a barra e o grid brigaria com o conteudo a cada quadro. */
  overflow: hidden;
  transition: padding-inline var(--dur-panel) var(--ease-out);
}
.ipr-sidebar__brand {
  display: flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline: var(--space-3);
  flex-shrink: 0;
}
/* O link da marca tem classe propria, e nao `.ipr-sidebar__brand a`: o seletor
   por elemento tinha mais especificidade que `.ipr-sidebar__fechar` e trazia o
   "x" da gaveta de volta no monitor, onde a barra nao fecha. */
.ipr-sidebar__inicio { display: inline-flex; border-radius: var(--radius-sm); }

/* --- Estados da barra recolhida ------------------------------------------

   REGRA QUE SUSTENTA ESTE BLOCO: o que "some" ao recolher precisa DEIXAR DE
   OCUPAR ESPACO, e nao apenas ficar invisivel.

   Com `opacity: 0` sozinho o rotulo mantem a largura dele. O conteudo do link
   (icone + gap + rotulo) continua com uns 150px dentro de uma trilha de 60px,
   e `justify-content: center` centraliza um conteudo MAIOR que a caixa: as
   sobras vao para os dois lados e o icone sai pela esquerda, cortado.

   Por isso `max-width: 0` junto do fade. E `max-width` e nao `width` porque o
   estado expandido nao pode ter largura fixa: o rotulo tem que caber seja
   "Painel" ou "Relatorios gerenciais".
*/
.ipr-nav__rotulo,
.ipr-sidebar__ident,
.ipr-brand__word {
  overflow: hidden;
  max-width: 14rem;
  /* A largura acompanha a animacao do grid, entao o icone DESLIZA ate o
     centro em vez de saltar para la no primeiro quadro. O fade e mais rapido:
     o texto some antes de a barra terminar de encolher. */
  transition: opacity calc(var(--dur-panel) * .5) var(--ease-out),
              max-width var(--dur-panel) var(--ease-out);
  /* Sem esta linha o atraso da dica valeria tambem na SAIDA, e o rotulo
     ficaria na tela depois de o mouse ja ter ido embora. */
  transition-delay: 0s;
}
.ipr-shell.is-compacta :is(.ipr-nav__rotulo, .ipr-sidebar__ident, .ipr-brand__word) {
  opacity: 0;
  max-width: 0;
  /* Sai da ordem de tabulacao junto: um rotulo invisivel que ainda recebe
     foco e uma armadilha para quem navega por teclado. */
  pointer-events: none;
}

/* O `gap` do flex SOBREVIVE a um filho de largura zero. Sem zera-lo sobra um
   vao de 12px ao lado do icone e ele fica visivelmente fora do centro. */
.ipr-shell.is-compacta :is(.ipr-nav__link, .ipr-sidebar__usuario, .ipr-brand) {
  gap: 0;
  justify-content: center;
}
/* Sem o padding lateral o icone fica no centro exato da trilha, e nao
   deslocado pela metade do padding. */
.ipr-shell.is-compacta :is(.ipr-nav__link, .ipr-sidebar__usuario,
                           .ipr-sidebar__brand) { padding-inline: 0; }
.ipr-shell.is-compacta .ipr-sidebar__brand { justify-content: center; }
.ipr-shell.is-compacta .ipr-sidebar { padding-inline: var(--space-2); }
.ipr-shell.is-compacta .ipr-sidebar__sair { display: none; }

/* --- Dica ao passar o mouse, so com a barra recolhida ---------------------

   REAPROVEITA O PROPRIO ROTULO. Ele ja esta no DOM (fica com max-width 0
   quando recolhido), entao nao ha texto escrito duas vezes, nao ha atributo
   `title` para manter em sincronia e um item de menu novo ganha a dica
   sozinho.

   `position: fixed` e a peca central. A barra tem `overflow: hidden` e o menu
   tem `overflow-x: hidden`: qualquer coisa `absolute` seria recortada pelos
   dois. Elemento fixo NAO e recortado por overflow de ancestral, entao a dica
   escapa da barra sem precisar desligar o recorte.

   POSICIONAMENTO: so o eixo horizontal e declarado. Com `top` em `auto` o
   navegador usa a POSICAO ESTATICA vertical: a dica nasce alinhada ao item
   que esta sob o mouse, sem uma linha de JavaScript medindo nada.

   A DICA CRESCE POR `min-width`, NUNCA POR `max-width`. Abrindo com
   `max-width`, ao tirar o mouse o estilo volta ao da barra recolhida, cuja
   transicao anima justamente `max-width`: o rotulo REENTRAVA no fluxo ainda
   largo e passava 220ms empurrando o icone para fora. Com `min-width:
   max-content` o `max-width: 0` continua de pe, e no calculo de largura o
   `min-width` vence: a caixa fica do tamanho do texto enquanto o mouse esta
   em cima e volta a ter largura ZERO no quadro em que ele sai.
*/
.ipr-shell.is-compacta .ipr-nav__link:is(:hover, :focus-visible) .ipr-nav__rotulo,
.ipr-shell.is-compacta .ipr-sidebar__usuario:hover .ipr-sidebar__ident {
  position: fixed;
  inset-inline-start: calc(var(--sidebar-width) + var(--space-2));
  z-index: var(--z-toast);

  opacity: 1;
  min-width: max-content;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  /* OPACO. Dentro da barra as superficies sao vidro sobre o navy; a dica sai
     da barra e pousaria sobre o conteudo claro, onde vidro vira invisivel. */
  background: var(--color-surface-opaco);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;

  /* A dica nao recebe clique: ela cobre parte do conteudo e um alvo invisivel
     ali roubaria o clique de quem mirou no que esta atras. */
  pointer-events: none;

  /* So a opacidade anima, e com um atraso curto, para a dica nao piscar
     quando o ponteiro apenas atravessa a barra a caminho de outra coisa. */
  transition: opacity 120ms var(--ease-out) 160ms;
}

/* O rodape mostra nome E cargo, entao a dica dele volta a ser duas linhas. */
.ipr-shell.is-compacta .ipr-sidebar__usuario:hover .ipr-sidebar__ident {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* O titulo de divisao ("Menu", "Moderacao") nao encolhe de largura, ele
   desaparece: e um bloco proprio, e um fade sozinho deixaria um vao vertical
   sem explicacao entre a marca e o primeiro item. */
.ipr-sidebar__secao {
  overflow: hidden;
  max-height: 2rem;
  padding-inline: var(--space-3);
  margin-block: var(--space-4) var(--space-2);
  transition: opacity calc(var(--dur-panel) * .5) var(--ease-out),
              max-height var(--dur-panel) var(--ease-out),
              margin var(--dur-panel) var(--ease-out);
}
.ipr-sidebar__secao:first-child { margin-block-start: 0; }
.ipr-shell.is-compacta .ipr-sidebar__secao {
  opacity: 0;
  max-height: 0;
  margin-block: 0;
  pointer-events: none;
}
/* Recolhida, a divisao vira um fio: sem titulo, "Moderacao" encostaria no
   ultimo item de atendimento e as duas areas virariam uma lista so. */
.ipr-shell.is-compacta .ipr-sidebar__secao:not(:first-child) + .ipr-nav__link {
  margin-block-start: var(--space-3);
  box-shadow: 0 calc(var(--space-2) * -1) 0 -1px var(--color-border);
}

/*
  O MENU ocupa toda a sobra vertical, e e ele que rola quando houver paginas
  demais. Sem `min-height: 0` um item flex se recusa a encolher abaixo do
  proprio conteudo, o `overflow` nunca entra em acao e a lista vaza por baixo
  do bloco do usuario.

  `overflow-x: hidden` e obrigatorio junto: declarar so o eixo Y transforma o
  outro em `auto`, e ai a barra ganharia rolagem horizontal justamente durante
  a animacao de recolher.
*/
.ipr-sidebar .ipr-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Respiro para o anel de foco do item nao ser cortado pela rolagem. */
  padding: var(--space-1);
  margin: calc(var(--space-1) * -1);
  scrollbar-width: none;
}

/* --- Rodape: quem esta logado -------------------------------------------
   Com o menu ocupando a sobra, o rodape ja e empurrado para baixo. */
.ipr-sidebar__usuario {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
  white-space: nowrap;
}
.ipr-sidebar__ident {
  display: flex;
  flex-direction: column;
  min-width: 0;              /* deixa o truncate funcionar dentro do flex */
  line-height: var(--line-snug);
}
.ipr-sidebar__nome {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipr-sidebar__cargo {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.ipr-sidebar__sair {
  margin-inline-start: auto;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ipr-sidebar__sair:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.ipr-sidebar__logout { margin: 0; display: contents; }

/* O "x" da gaveta so existe no celular: no monitor a barra nao fecha. */
.ipr-sidebar__fechar { display: none; }

/* --- Barra do topo ------------------------------------------------------- */
.ipr-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-1);
}
.ipr-topbar__esquerda { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ipr-topbar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  /* O titulo e quem cede quando falta largura: uma linha so, com reticencias,
     e nunca por cima dos botoes. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Os dois botoes da esquerda -----------------------------------------
   No monitor, `toggle` recolhe a barra. No celular, `menu` abre a gaveta. Sao
   dois controles, e nao um que muda de papel, porque fazem coisas diferentes
   e o leitor de tela precisa anunciar o que cada um faz. */
.ipr-topbar__toggle,
.ipr-topbar__menu {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.ipr-topbar__toggle:hover,
.ipr-topbar__menu:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
.ipr-topbar__menu { display: none; text-decoration: none; }
/* A seta gira em vez de trocar de icone: um icone so, e o giro comunica a
   direcao melhor do que dois desenhos diferentes. */
.ipr-topbar__toggle .ipr-icon { transition: rotate var(--dur-panel) var(--ease-out); }
.ipr-shell.is-compacta .ipr-topbar__toggle .ipr-icon { rotate: 180deg; }

/*
  A CAIXA DE ACOES E UMA LINHA, e isso precisa estar escrito.

  A consulta tem tres controles, e um deles e um `<form>`, que e de BLOCO: sem
  esta regra ele caia para uma segunda linha dentro de uma topbar de altura
  fixa (`--topbar-height`) e vazava por cima do conteudo da pagina.

  `align-items: center` alinha controles de alturas diferentes; o `gap`
  substitui o espaco em branco entre elementos inline, que some no momento em
  que a caixa vira flex. `flex-shrink: 0` protege os botoes: quem encolhe
  quando falta largura e o titulo, que ja tem `min-width: 0`.
*/
.ipr-topbar__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* --- A coluna de conteudo ------------------------------------------------ */
.ipr-main {
  grid-area: main;
  padding: var(--space-8) var(--space-8) var(--space-12);
  overflow: auto;
  /* A rolagem e da area de conteudo, e nao da pagina: sem isto o fim da
     lista "puxava" a pagina inteira no trackpad e a topbar balancava. */
  overscroll-behavior: contain;
}
/* TETO DE LARGURA, centrado. Num monitor largo o cartao esticado ate a borda
   vira uma faixa, e ler uma linha de tabela vira um passeio lateral. */
.ipr-main > * {
  max-inline-size: var(--conteudo-max);
  margin-inline: auto;
}

/* --- O veu da gaveta ------------------------------------------------------
   Existe no DOM em qualquer largura, mas so aparece com a gaveta aberta no
   celular. E um LINK para o conteudo: sem JavaScript, tocar fora do menu ja
   fecha a gaveta, porque o alvo da URL deixa de ser o menu. */
.ipr-shell__veu { display: none; }


/* ===========================================================================
   CELULAR E TABLET (abaixo de 64rem)

   A barra lateral vira GAVETA: sai pela esquerda, por cima do conteudo, com
   um veu escuro atras. Antes ela so sumia, e o sistema ficava sem menu e sem
   botao de sair em qualquer tela menor que um notebook.

   SEM JAVASCRIPT A GAVETA FUNCIONA: o botao do menu e um link para
   `#menu-lateral`, e o seletor `:target` abre a barra. O modulo `gaveta` so
   acrescenta o que CSS nao faz: fechar com Esc, levar o foco para dentro e
   de volta, e travar a rolagem da pagina atras.
   =========================================================================== */
@media (width < 64rem) {
  .ipr-shell {
    /* `minmax(0, 1fr)`, e nao `1fr`: item de grid nasce com `min-width: auto`
       e nao encolhe abaixo do conteudo. Com `1fr` a coluna crescia ate o
       min-content da tabela mais larga e a PAGINA INTEIRA passava a ter 981px
       num celular de 390px, rolando para o lado. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "topbar" "main";
    /* No celular a altura fixa so atrapalharia: com o conteudo rolando DENTRO
       do main, a barra de endereco do navegador nunca recolhe e a pessoa
       perde altura de tela numa tela que ja e pequena. Volta a rolagem
       natural da pagina. */
    height: auto;
    min-height: 100dvh;
  }

  .ipr-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--z-drawer);
    inline-size: min(18.5rem, 86vw);
    padding-block-start: var(--space-4);
    box-shadow: var(--shadow-xl);
    /* FECHADA = FORA DA TELA E FORA DA ARVORE. `visibility: hidden` tira os
       links da ordem de tabulacao e do leitor de tela: uma gaveta fechada que
       ainda recebe foco e uma armadilha invisivel. O atraso da visibilidade
       e o que deixa a saida terminar antes de esconder. */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-expo),
                visibility 0s linear var(--dur-slow);
  }
  .ipr-sidebar:target,
  .ipr-shell.is-menu-aberto .ipr-sidebar {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-expo), visibility 0s;
  }
  /* A barra recolhida nao existe no celular: a gaveta abre sempre inteira,
     mesmo que o cookie do monitor diga "compacta". */
  .ipr-shell.is-compacta .ipr-sidebar { padding-inline: var(--space-3); }
  .ipr-shell.is-compacta :is(.ipr-nav__rotulo, .ipr-sidebar__ident, .ipr-brand__word) {
    opacity: 1;
    max-width: 14rem;
    pointer-events: auto;
  }
  .ipr-shell.is-compacta .ipr-sidebar__secao { opacity: 1; max-height: 2rem; margin-block: var(--space-4) var(--space-2); }
  .ipr-shell.is-compacta .ipr-sidebar__secao:first-child { margin-block-start: 0; }
  .ipr-shell.is-compacta :is(.ipr-nav__link, .ipr-sidebar__usuario, .ipr-brand) { gap: var(--space-3); justify-content: flex-start; }
  .ipr-shell.is-compacta .ipr-nav__link { padding-inline: var(--space-3); }
  .ipr-shell.is-compacta .ipr-sidebar__usuario { padding-inline: var(--space-3) var(--space-2); }
  .ipr-shell.is-compacta .ipr-sidebar__brand { justify-content: space-between; padding-inline: var(--space-3); }
  .ipr-shell.is-compacta .ipr-sidebar__sair { display: grid; }

  .ipr-sidebar__brand { justify-content: space-between; }
  .ipr-sidebar__fechar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast);
  }
  .ipr-sidebar__fechar:hover { background: var(--color-surface-2); color: var(--color-text-primary); }

  .ipr-shell__veu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--color-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .ipr-sidebar:target ~ .ipr-shell__veu,
  .ipr-shell.is-menu-aberto .ipr-shell__veu {
    opacity: 1;
    pointer-events: auto;
  }

  .ipr-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    /* DUAS LINHAS QUANDO PRECISA: titulo em cima, acoes embaixo. Antes a
       altura era fixa e as acoes, sem lugar, passavam POR CIMA do titulo. */
    flex-wrap: wrap;
    min-block-size: 3.5rem;
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2) var(--space-3);
  }
  .ipr-topbar__esquerda { flex: 1 1 12rem; min-block-size: 2.5rem; }
  .ipr-topbar__toggle { display: none; }
  .ipr-topbar__menu { display: grid; }
  .ipr-topbar__title { font-size: var(--font-size-md); }

  /* As acoes ganham a linha delas, e ROLAM DE LADO se nao couberem: tres
     botoes espremidos viram tres botoes ilegiveis, e quebrados em tres linhas
     empurrariam o conteudo para baixo da dobra. */
  .ipr-topbar__acoes {
    flex-shrink: 1;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ipr-topbar__acoes:not(:empty) { flex: 1 1 100%; padding-block-end: var(--space-1); }

  .ipr-main { padding: var(--space-5) var(--space-4) var(--space-10); overflow: visible; }

  /* Gaveta aberta, a pagina de tras nao rola: o dedo que arrasta o menu
     arrastaria a tela inteira junto. A classe vem do modulo `gaveta`. */
  :root.is-gaveta-aberta { overflow: hidden; }
}

@media (width < 40rem) {
  .ipr-main { padding-inline: var(--space-3); }
}