/* Rodapé padrão Erenhatec: versão + novidades (ajustado ao menu do M4) */
:root{
  --sidebar-width: 248px;    /* menu lateral do M4 (58px recolhido, 0 no celular) */
  --cl-azul: #0a6ed1;        /* cor de destaque (versão no hover, botão, tag) */
  --cl-azul-claro: #e3f2fd;  /* fundo do hover da versão e da tag */
  --cl-topo: #354a5f;        /* fundo do topo da janela de novidades */
}

/* ---------- Rodapé ---------- */
.app-footer{
  position: fixed; bottom: 0; left: var(--sidebar-width, 0px); right: 0; z-index: 50;
  height: 24px; box-sizing: border-box; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 0 24px; border-top: 1px solid #eaecf0; background: #fff;
  color: #98a2b3; font-size: 11px; line-height: 1;
}
/* Versão clicável: no hover ganha fundo azul claro e texto azul */
.app-footer .ver-btn{
  background: none; border: 0; padding: 3px 8px; border-radius: 12px;
  color: inherit; font: inherit; letter-spacing: .03em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s;
}
.app-footer .ver-btn:hover,
.app-footer .ver-btn:focus-visible{ background: var(--cl-azul-claro); color: var(--cl-azul); outline: 0; }
.app-footer .ver-btn svg{ width: 11px; height: 11px; fill: currentColor; opacity: .7; }

.main .view{ padding-bottom: 48px; }    /* conteúdo não fica atrás da barra */
body:has(.nav.collapsed){ --sidebar-width: 58px; }
body.sem-menu{ --sidebar-width: 0px; }
.toast{ bottom: 36px !important; }        /* aviso do sistema acima da barra */

/* ---------- Janela "Novidades" ---------- */
.cl-fundo{ position: fixed; inset: 0; z-index: 1060; background: rgba(16,24,40,.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; animation: clFade .2s ease; }
.cl-modal{ width: 100%; max-width: 800px; max-height: calc(100vh - 96px); display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.25); font-size: 14px; color: #1d2939; }
.cl-modal-topo{ display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--cl-topo); color: #fff; }
.cl-modal-topo h5{ margin: 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.cl-modal-topo svg{ width: 18px; height: 18px; fill: currentColor; }
.cl-fechar{ margin-left: auto; background: none; border: 0; color: #fff; opacity: .8; cursor: pointer; padding: 4px; line-height: 0; }
.cl-fechar:hover{ opacity: 1; }
.cl-fechar svg{ width: 16px; height: 16px; }
.cl-corpo{ overflow-y: auto; padding: 4px 18px 14px; }
.cl-ver{ padding: 14px 4px 10px; border-bottom: 1px solid #eaecf0; }
.cl-ver:last-child{ border-bottom: 0; }
.cl-ver:not(.atual){ opacity: .85; }
.cl-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-num{ font-weight: 800; font-size: 15px; }
.cl-ver.atual .cl-num{ color: var(--cl-azul); }
.cl-tag{ font-size: 11px; font-weight: 700; background: var(--cl-azul-claro); color: var(--cl-azul); border-radius: 10px; padding: 2px 9px; }
.cl-data{ margin-left: auto; font-size: 12px; color: #667085; }
.cl-tit{ font-weight: 600; margin: 4px 0 6px; }
.cl-ver ul{ margin: 0; padding-left: 20px; }
.cl-ver li{ margin: 3px 0; line-height: 1.45; font-size: 13px; }

/* ---------- Aviso "Sistema atualizado" (1x por versão) ---------- */
.cl-aviso{ position: fixed; left: calc(var(--sidebar-width, 0px) + 16px); bottom: 40px; z-index: 1050;
  display: flex; gap: 12px; align-items: flex-start; max-width: 380px; padding: 12px 36px 12px 14px;
  background: #fff; border: 1px solid #bbdefb; border-left: 4px solid var(--cl-azul); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18); animation: clIn .35s ease; font-size: 12.5px; }
.cl-aviso-ic{ width: 34px; height: 34px; border-radius: 50%; background: var(--cl-azul-claro); color: var(--cl-azul);
  display: flex; align-items: center; justify-content: center; flex: none; }
.cl-aviso-ic svg{ width: 15px; height: 15px; fill: currentColor; }
.cl-aviso-txt{ display: flex; flex-direction: column; gap: 2px; color: #667085; }
.cl-aviso-txt b{ font-size: 13.5px; color: #1d2939; }
.cl-aviso-ver{ align-self: flex-start; margin-top: 6px; background: var(--cl-azul); color: #fff; border: 0; border-radius: 7px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cl-aviso-ver:hover{ background: #0854a0; }
.cl-aviso-x{ position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 20px; line-height: 1; color: #667085; cursor: pointer; padding: 2px 6px; }

@keyframes clIn{ from{ transform: translateY(16px); opacity: 0 } to{ transform: none; opacity: 1 } }
@keyframes clFade{ from{ opacity: 0 } to{ opacity: 1 } }

/* Celular / menu recolhido */
@media (max-width: 700px){
  :root, body:has(.nav.collapsed){ --sidebar-width: 0px; }
  .app-footer{ left: 0; padding: 0 14px; }
  .cl-aviso{ left: 12px; right: 12px; bottom: 32px; max-width: none; }
}
/* Impressão: rodapé e aviso não saem no papel */
@media print{ .app-footer, .cl-aviso, .cl-fundo{ display: none !important; } }