/*
 * Checklist ESEN — protótipo (Etapa A)
 * layout.css — moldura (shell), barra superior, conteúdo, cabeçalho de página, grades,
 * áreas fixas do preenchimento (modo foco) e regras básicas de impressão.
 *
 * Faixas: celular < 768 | tablet 768–1023 | notebook 1024–1199 | desktop ≥ 1200 | largo ≥ 1440
 *  - desktop: barra lateral de 232 px
 *  - notebook: trilho de 64 px (expande por cima do conteúdo)
 *  - tablet: barra superior com botão "menu" que abre a gaveta de navegação (280 px)
 *  - celular: faixa demonstrativa (28) + app bar (56) + navegação inferior (64)
 */

/* =========================================================================
   RAIZ
   ========================================================================= */
#app { min-height: 100vh; min-height: 100dvh; }
.app { display: block; min-height: 100vh; min-height: 100dvh; }
.app__principal { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.app__fundo-nav { position: fixed; inset: 0; z-index: calc(var(--z-gaveta) - 1); background: var(--cor-sobreposicao); }

/* Telas sem moldura (login, recuperação de senha) */
.tela-avulsa { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.tela-avulsa__conteudo { flex: 1; min-width: 0; }

/* Faixa demonstrativa: só celular (e no modo foco abaixo de 1024) */
.app > .faixa-demo, .tela-avulsa > .faixa-demo { display: none; }
@media (max-width: 767px) {
  .app > .faixa-demo, .tela-avulsa > .faixa-demo { display: flex; position: sticky; top: 0; z-index: calc(var(--z-barra) + 1); }
}

/* =========================================================================
   BARRA LATERAL — .lateral
   ========================================================================= */
.lateral {
  display: flex; flex-direction: column; width: var(--largura-lateral); height: 100vh; height: 100dvh;
  background: var(--cor-superficie-1); border-right: var(--borda-largura) solid var(--cor-borda-sutil);
  overflow-x: hidden; overflow-y: auto;
}
.lateral__marca { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); flex: none; height: var(--altura-barra-superior); padding: 0 var(--esp-3) 0 var(--esp-4); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil); }
.lateral__marca .marca { border-radius: var(--raio-2); }
.lateral__fechar { display: none; }
.lateral__nav { flex: 1 1 auto; padding: var(--esp-2) var(--esp-2) var(--esp-4); }
.lateral__grupo-rotulo { padding: var(--esp-4) var(--esp-3) 6px; font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-forte); color: var(--cor-texto-3); }
.lateral__grupo:first-child .lateral__grupo-rotulo { padding-top: var(--esp-2); }
.lateral__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.nav-item {
  position: relative; display: flex; align-items: center; gap: var(--esp-3); height: var(--altura-item-nav); padding: 0 var(--esp-3);
  border-radius: var(--raio-2); color: var(--cor-texto-2); text-decoration: none;
  font-size: var(--fs-corpo); line-height: var(--lh-corpo); font-weight: var(--peso-medio);
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}
.nav-item > .icone { width: 20px; height: 20px; }
.nav-item:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.nav-item[aria-current="page"] { background: var(--cor-superficie-3); color: var(--cor-texto); font-weight: var(--peso-forte); }
.nav-item[aria-current="page"] > .icone { color: var(--cor-destaque); }
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(-1 * var(--esp-2)); top: var(--esp-2); bottom: var(--esp-2); width: var(--borda-marcador);
  background: var(--cor-destaque); border-radius: 0 var(--raio-1) var(--raio-1) 0;
}
.nav-item__rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__contador { display: inline-flex; align-items: center; gap: var(--esp-1); margin-left: auto; font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-forte); color: var(--cor-texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-item__contador .icone { width: 12px; height: 12px; stroke-width: var(--traco-icone-status); }
.nav-item__contador--processo { color: var(--cor-processo-texto); }
.nav-item__contador--perigo { color: var(--cor-perigo-texto); }
.nav-item__dica { display: none; }

.lateral__rodape { display: flex; align-items: center; gap: var(--esp-2); flex: none; padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4); border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.lateral__escopo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lateral__escopo-nome { font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__escopo-meta { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__recolher { display: none; }

/* =========================================================================
   BARRA SUPERIOR — .barra-superior (sem botão primário)
   ========================================================================= */
.barra-superior {
  position: sticky; top: 0; z-index: var(--z-barra); display: flex; align-items: center; gap: var(--esp-4);
  height: var(--altura-barra-superior); padding: 0 var(--esp-6); flex: none;
  background: var(--cor-fundo); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil);
}
.barra-superior__menu, .barra-superior__voltar, .barra-superior__simbolo, .barra-superior__titulo { display: none; }
.barra-superior__simbolo .marca__simbolo { width: 28px; height: 28px; }
.barra-superior__titulo { flex: 1 1 auto; min-width: 0; font-family: var(--fonte-titulo); font-size: var(--fs-barra-titulo); line-height: var(--lh-barra-titulo); font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-superior__acoes { display: flex; align-items: center; gap: var(--esp-3); margin-left: auto; flex: none; }

/* Trilha de navegação */
.trilha { flex: 1 1 auto; min-width: 0; }
.trilha__lista { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); color: var(--cor-texto-2); min-width: 0; }
/* Só o nível atual encolhe (com reticências); os anteriores e as setas mantêm o espaço (antes as setas encostavam no texto em 1200 px). */
.trilha__item { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.trilha__item:last-child { flex: 0 1 auto; min-width: 0; }
.trilha__item > .icone { width: 14px; height: 14px; color: var(--cor-texto-3); flex: none; }
.trilha__item a { color: var(--cor-texto-2); text-decoration: none; white-space: nowrap; }
.trilha__item a:hover { color: var(--cor-texto); text-decoration: underline; }
.trilha__item:last-child { overflow: hidden; }
.trilha__atual { color: var(--cor-texto); font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha__atual.mono { font-weight: var(--peso-medio); }

/* Gatilho da busca rápida: campo (desktop) ou ícone (toque) */
.busca-gatilho {
  /* 320 px a partir de 1440; entre 1200 e 1439 cede espaço à trilha (mínimo 240, como no notebook) */
  display: inline-flex; align-items: center; gap: var(--esp-2); width: clamp(240px, calc(25vw - 40px), var(--largura-busca)); height: var(--altura-controle); padding: 0 var(--esp-2) 0 10px;
  background: var(--cor-superficie-2); border: var(--borda-largura) solid var(--cor-borda-controle); border-radius: var(--raio-2); color: var(--cor-texto-3);
  font-size: var(--fs-corpo); line-height: var(--lh-corpo); text-align: left;
}
.busca-gatilho:hover { border-color: var(--cor-borda-controle-hover); }
.busca-gatilho > .icone { width: 18px; height: 18px; }
.busca-gatilho__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menu do usuário */
.usuario-gatilho { display: inline-flex; align-items: center; gap: var(--esp-2); height: 40px; padding: 0 var(--esp-1); border-radius: var(--raio-2); color: var(--cor-texto); }
.usuario-gatilho:hover { background: var(--cor-superficie-2); }
.usuario-gatilho__texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 180px; }
.usuario-gatilho__nome { font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.usuario-gatilho__perfil { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }
.usuario-gatilho > .icone { width: 16px; height: 16px; color: var(--cor-texto-2); }
.usuario-gatilho .avatar--40 { display: none; }

/* =========================================================================
   CONTEÚDO
   ========================================================================= */
.conteudo {
  display: flex; flex-direction: column; gap: var(--esp-5); flex: 1 1 auto; width: 100%; max-width: var(--largura-conteudo-max);
  padding: var(--esp-6); min-width: 0;
}
.conteudo:focus { outline: none; }
.pagina { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.pagina--estreita { max-width: var(--largura-formulario); }

/* Cabeçalho de página — .pagina-cab */
.pagina-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-3) var(--esp-6); min-width: 0; }
.pagina-cab__texto { display: flex; flex-direction: column; gap: var(--esp-1); flex: 1 1 320px; min-width: 0; }
.pagina-cab__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-1); }
.pagina-cab__titulo {
  font-family: var(--fonte-titulo); font-size: var(--fs-pagina); line-height: var(--lh-pagina); font-weight: var(--peso-forte);
  letter-spacing: -0.01em; color: var(--cor-texto); overflow-wrap: anywhere;
}
.pagina-cab__sub { font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-texto-2); }
.pagina-cab__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }

/* Grades de página */
.colunas-2 { display: grid; gap: var(--esp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.colunas-principal { display: grid; gap: var(--esp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .colunas-principal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.layout-indice { display: grid; gap: var(--esp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .layout-indice { grid-template-columns: var(--largura-indice-preenchimento) minmax(0, var(--largura-formulario)); }
  .layout-indice__lateral { position: sticky; top: calc(var(--altura-barra-superior) + var(--esp-5)); }
}

/* Rodapé de ações fixo no fim da área de conteúdo (desktop) */
.rodape-acoes {
  position: sticky; bottom: 0; z-index: calc(var(--z-barra) - 1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2);
  min-height: 64px; margin: 0 calc(-1 * var(--esp-6)) calc(-1 * var(--esp-6)); padding: var(--esp-3) var(--esp-6);
  background: var(--cor-superficie-1); border-top: var(--borda-largura) solid var(--cor-borda);
}

/* =========================================================================
   PREENCHIMENTO — "modo foco" (celular/tablet) e barra de ação
   Estrutura sugerida: .foco > .foco__cab + .foco__progresso + .foco__corpo + .barra-acao
   ========================================================================= */
.foco { display: flex; flex-direction: column; min-width: 0; background: var(--cor-fundo); color: var(--cor-texto); }
.foco__cab {
  position: sticky; top: 0; z-index: var(--z-barra); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-1);
  min-height: 56px; padding: var(--esp-1); background: var(--cor-superficie-1); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil);
}
.foco__titulos { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--esp-1); }
.foco__titulo { font-size: 16px; line-height: 20px; font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foco__titulo .mono { font-weight: var(--peso-medio); }
.foco__sub { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); color: var(--cor-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foco__ferramentas { display: flex; align-items: center; gap: 0; }
.foco__progresso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); padding: 10px var(--esp-4) var(--esp-3); background: var(--cor-superficie-1); border-bottom: var(--borda-largura) solid var(--cor-borda); }
.foco__secao { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
.foco__secao-nome { font-size: 15px; line-height: 20px; font-weight: var(--peso-forte); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foco__secao-pos { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); color: var(--cor-texto-2); white-space: nowrap; }
.foco__contagem { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); color: var(--cor-texto-2); }
.foco__nc { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--cor-perigo-texto); font-weight: var(--peso-forte); }
.foco__nc .icone { width: 14px; height: 14px; stroke-width: var(--traco-icone-status); }
.foco__corpo { display: flex; flex-direction: column; flex: 1 0 auto; gap: var(--esp-4); padding: var(--esp-4); min-width: 0; }

.barra-acao {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); background: var(--cor-superficie-1); border-top: var(--borda-largura) solid var(--cor-borda);
  padding: var(--esp-2) var(--esp-4) max(12px, env(safe-area-inset-bottom));
}
.barra-acao__estado { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 24px; }
.barra-acao__posicao { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); color: var(--cor-texto-3); white-space: nowrap; }
.barra-acao__botoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--esp-2); }
.barra-acao__botoes > .btn { width: 100%; padding: 0 var(--esp-3); gap: var(--esp-2); }
@media (max-width: 1023px) {
  .barra-acao { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav-inferior); }
}
@media (min-width: 1024px) {
  .barra-acao { position: sticky; bottom: 0; z-index: calc(var(--z-barra) - 1); margin: 0 calc(-1 * var(--esp-6)) calc(-1 * var(--esp-6)); padding: var(--esp-3) var(--esp-6); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .barra-acao__botoes { grid-template-columns: auto auto; }
  .barra-acao__botoes > .btn { width: auto; }
  .foco__cab { top: var(--altura-barra-superior); }
}

/* =========================================================================
   NAVEGAÇÃO INFERIOR (celular) — .nav-inferior
   ========================================================================= */
.nav-inferior { display: none; }

/* =========================================================================
   DESKTOP ≥ 1200 — barra lateral de 232
   ========================================================================= */
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--largura-lateral) minmax(0, 1fr); }
  .app > .lateral { grid-column: 1; grid-row: 1; position: sticky; top: 0; }
  .app__principal { grid-column: 2; grid-row: 1; }
  .app__fundo-nav { display: none; }
}

/* =========================================================================
   NOTEBOOK 1024–1199 — trilho de 64 (expande por cima)
   ========================================================================= */
@media (min-width: 1024px) and (max-width: 1199px) {
  .app { grid-template-columns: var(--largura-lateral-recolhida) minmax(0, 1fr); }
  .lateral__recolher { display: inline-flex; }
  .busca-gatilho { width: 240px; }

  .app:not(.app--lateral-expandida) > .lateral { width: var(--largura-lateral-recolhida); overflow: visible; }
  .app:not(.app--lateral-expandida) .lateral__marca { justify-content: center; padding: 0; }
  .app:not(.app--lateral-expandida) .lateral__marca .marca__texto { display: none; }
  .app:not(.app--lateral-expandida) .lateral__grupo-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app:not(.app--lateral-expandida) .lateral__grupo + .lateral__grupo { margin-top: var(--esp-2); padding-top: var(--esp-2); border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
  .app:not(.app--lateral-expandida) .nav-item { justify-content: center; width: 48px; padding: 0; margin: 0 auto; }
  .app:not(.app--lateral-expandida) .nav-item__rotulo,
  .app:not(.app--lateral-expandida) .nav-item__contador { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app:not(.app--lateral-expandida) .nav-item__dica {
    display: block; position: absolute; left: calc(100% + var(--esp-3)); top: 50%; transform: translateY(-50%); z-index: var(--z-menu);
    padding: var(--esp-1) var(--esp-2); background: var(--cor-superficie-3); border: var(--borda-largura) solid var(--cor-borda); border-radius: var(--raio-2);
    box-shadow: var(--sombra-sobreposicao); color: var(--cor-texto); font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-medio); white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity var(--dur-rapida);
  }
  .app:not(.app--lateral-expandida) .nav-item:hover .nav-item__dica,
  .app:not(.app--lateral-expandida) .nav-item:focus-visible .nav-item__dica { opacity: 1; }
  .app:not(.app--lateral-expandida) .lateral__rodape { justify-content: center; padding: var(--esp-3) 0; }
  .app:not(.app--lateral-expandida) .lateral__escopo { display: none; }

  .app--lateral-expandida > .lateral { position: fixed; left: 0; top: 0; z-index: var(--z-gaveta); width: var(--largura-lateral); box-shadow: var(--sombra-sobreposicao); }
  .app--lateral-expandida .app__fundo-nav { display: block; }
}

/* =========================================================================
   TABLET 768–1023 — barra superior com "menu" + gaveta de navegação (280)
   ========================================================================= */
@media (max-width: 1023px) {
  .app { display: block; }
  .app > .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-gaveta); width: var(--largura-gaveta-nav); max-width: 88vw;
    box-shadow: var(--sombra-sobreposicao); border-right: var(--borda-largura) solid var(--cor-borda);
    visibility: hidden; opacity: 0; transform: translateX(-16px);
    transition: opacity var(--dur-lenta) var(--curva-padrao), transform var(--dur-lenta) var(--curva-padrao), visibility 0s linear var(--dur-lenta);
  }
  .app--nav-aberta > .lateral { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .lateral__fechar { display: inline-flex; }
  .nav-item { height: var(--alvo-minimo); font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .nav-item > .icone { width: 24px; height: 24px; }
  .nav-item__contador { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .lateral__grupo-rotulo { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .lateral__escopo-nome { font-size: var(--fs-rotulo-toque); line-height: var(--lh-rotulo-toque); }
  .lateral__escopo-meta { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }

  .barra-superior { gap: var(--esp-2); padding: 0 var(--esp-4) 0 var(--esp-2); }
  .barra-superior__menu { display: inline-flex; }
  .barra-superior__titulo { display: block; }
  .barra-superior__voltar:not([hidden]) { display: inline-flex; }
  .trilha, .barra-superior__divisor { display: none; }
  .barra-superior__acoes { gap: var(--esp-1); }
  .busca-gatilho { width: var(--alvo-minimo); height: var(--alvo-minimo); padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--cor-texto-2); }
  .busca-gatilho > .icone { width: 24px; height: 24px; }
  .busca-gatilho__texto, .busca-gatilho kbd { display: none; }
  .usuario-gatilho { height: var(--alvo-minimo); width: var(--alvo-minimo); padding: 0; justify-content: center; }
  .usuario-gatilho__texto, .usuario-gatilho > .icone, .usuario-gatilho .avatar:not(.avatar--40) { display: none; }
  .usuario-gatilho .avatar--40 { display: inline-flex; }
  .conteudo { padding: var(--esp-6); }
  .pagina-cab__sub { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .rodape-acoes { margin: 0 calc(-1 * var(--esp-6)) calc(-1 * var(--esp-6)); }
}

/* =========================================================================
   CELULAR < 768 — faixa demo + app bar 56 + navegação inferior 64
   ========================================================================= */
@media (max-width: 767px) {
  .app > .lateral { display: none; }
  .app__fundo-nav { display: none; }
  .barra-superior { top: var(--altura-faixa-demo); padding: 0 var(--esp-1) 0 var(--esp-4); background: var(--cor-superficie-1); gap: var(--esp-2); }
  .barra-superior__menu { display: none; }
  .barra-superior__simbolo { display: inline-flex; align-items: center; justify-content: center; width: var(--alvo-minimo); height: var(--alvo-minimo); margin-left: calc(-1 * var(--esp-2) - 2px); border-radius: var(--raio-2); }
  .barra-superior--com-voltar .barra-superior__simbolo { display: none; }
  .barra-superior--com-voltar { padding-left: var(--esp-1); }
  .barra-superior__titulo { font-size: var(--fs-pagina-toque); line-height: var(--lh-pagina-toque); }
  .barra-superior__acoes > .selo-demo, .barra-superior__acoes > .aviso-simulacao { display: none; }
  .barra-superior__acoes { gap: 0; }

  .conteudo { padding: var(--esp-4) var(--margem-pagina-celular); padding-bottom: calc(var(--altura-nav-inferior) + var(--esp-4) + env(safe-area-inset-bottom)); gap: var(--esp-4); }
  .pagina { gap: var(--esp-4); }
  .pagina-cab__acoes { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .pagina-cab__acoes > .btn { width: 100%; }
  .pagina-cab--titulo-na-barra .pagina-cab__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rodape-acoes { margin: 0 calc(-1 * var(--esp-4)); padding: var(--esp-3) var(--esp-4); }

  .nav-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav-inferior); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--altura-nav-inferior) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--cor-superficie-1); border-top: var(--borda-largura) solid var(--cor-borda);
  }
  .nav-inferior__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1); min-width: 0;
    color: var(--cor-texto-2); text-decoration: none; font-size: var(--fs-nav-inferior); line-height: var(--lh-nav-inferior); font-weight: var(--peso-medio);
  }
  .nav-inferior__item > .icone { width: 24px; height: 24px; margin-block: var(--esp-1); } /* 32 px de área, como o bloco "Novo": rótulos alinhados */
  .nav-inferior__item { gap: 2px; }
  .nav-inferior__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .nav-inferior__item:focus-visible { outline-offset: -4px; }
  .nav-inferior__item[aria-current="page"] { color: var(--cor-texto); font-weight: var(--peso-forte); }
  .nav-inferior__item[aria-current="page"] > .icone { color: var(--cor-destaque); }
  .nav-inferior__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: var(--borda-marcador); background: var(--cor-destaque); }
  .nav-inferior__novo-bloco {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 32px;
    background: var(--cor-superficie-3); border: var(--borda-largura) solid var(--cor-borda-controle); border-radius: var(--raio-2); color: var(--cor-texto);
  }
  .nav-inferior__novo-bloco .icone { width: 22px; height: 22px; stroke-width: 2.5; }
  .nav-inferior__item--novo[aria-current="page"]::before { content: none; }
  .nav-inferior__item--novo[aria-current="page"] .nav-inferior__novo-bloco { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }
}

/* =========================================================================
   MODO FOCO (preenchimento) — CE.shell.modoFoco(true)
   Abaixo de 1024: some a barra superior e a navegação inferior; a faixa demo continua.
   ========================================================================= */
@media (max-width: 1023px) {
  .app--foco > .faixa-demo { display: flex; position: sticky; top: 0; z-index: calc(var(--z-barra) + 1); }
  .app--foco .barra-superior, .app--foco .nav-inferior { display: none; }
  .app--foco .conteudo { padding: 0; gap: 0; }
  /* .foco ocupa a tela toda (o "Modo sol" pinta tudo) e reserva espaço para a barra de ação fixa */
  .app--foco .foco {
    min-height: calc(100vh - var(--altura-faixa-demo)); min-height: calc(100dvh - var(--altura-faixa-demo));
    padding-bottom: calc(var(--altura-barra-acao) + var(--esp-4) + env(safe-area-inset-bottom));
  }
  .app--foco .conteudo:not(:has(.foco)) { padding-bottom: calc(var(--altura-barra-acao) + var(--esp-4) + env(safe-area-inset-bottom)); }
  .app--foco .foco__cab { top: var(--altura-faixa-demo); }
}

/* =========================================================================
   IMPRESSÃO — regras básicas (a tela de relatórios completa o documento A4)
   ========================================================================= */
.so-impressao { display: none; }
@page { size: A4; margin: 0; }
@media print {
  html, body { background: var(--doc-papel) !important; color: var(--doc-texto); }
  .lateral, .barra-superior, .nav-inferior, .faixa-demo, .toasts, .camada, .menu, .lightbox, .pular-conteudo, .app__fundo-nav, .nao-imprimir { display: none !important; }
  .app, .app__principal { display: block !important; min-height: 0 !important; }
  .conteudo { padding: 0 !important; max-width: none !important; gap: 0 !important; }
  .so-impressao { display: block !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}