:root{
  --erp-sidebar-width:260px;
  --erp-banner-highlight:#a875ff;
  --erp-banner-yellow:#ffd100;
  --erp-accent-purple:#64034a;
  --erp-accent-pink:#f21c3f;
  --erp-accent-orange:#ff5e18;
}

/* Menu lateral compartilhado por todos os módulos. */
@media (min-width:981px){
  body:not(:has(.app-shell-public)) .app-shell{grid-template-columns:var(--erp-sidebar-width) minmax(0,1fr)}
  body:not(:has(.app-shell-public)) .app-sidebar{width:var(--erp-sidebar-width);min-width:var(--erp-sidebar-width)}
}

.app-sidebar .brand-panel{
  position:relative;
  min-height:92px;
  margin-bottom:18px;
  padding:10px 12px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.app-sidebar .brand-panel img{
  position:relative;
  z-index:1;
  display:block;
  width:min(205px,100%);
  max-width:205px;
  height:auto;
  object-fit:contain;
}

/* A máscara usa exatamente o lettering do arquivo oficial e preserva o símbolo colorido. */
.app-sidebar .brand-panel::after{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:min(205px,calc(100% - 24px));
  aspect-ratio:910/275;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:#fff;
  -webkit-mask:url('../images/Logo-transparente.png') center/contain no-repeat;
  mask:url('../images/Logo-transparente.png') center/contain no-repeat;
  clip-path:inset(0 0 0 25%);
}

.app-sidebar .sidebar-nav{gap:8px}
.app-sidebar .nav-item{
  min-height:50px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:8px;
  color:rgba(255,255,255,.84);
  font-weight:700;
}
.app-sidebar .nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.app-sidebar .nav-item.active{
  border-color:rgba(255,255,255,.12);
  color:#fff;
  background:rgba(255,255,255,.11);
  box-shadow:inset 4px 0 0 var(--erp-accent-orange);
  font-weight:800;
}
.app-sidebar .nav-icon{width:34px;height:34px;flex:0 0 34px}

/* Identificação superior e título bicolor dos banners. */
.erp-banner-eyebrow,
.finance-dashboard-copy>.erp-banner-eyebrow,
.module-fiscal .fiscal-page>.finance-hero .erp-banner-eyebrow,
.cad-hero-copy>.erp-banner-eyebrow,
.obras-module-banner-copy>.erp-banner-eyebrow,
.commercial-dashboard-banner .erp-banner-eyebrow,
.commercial-kanban-banner .erp-banner-eyebrow,
.commercial-detail-banner .erp-banner-eyebrow{
  display:block;
  margin:0 0 5px;
  color:var(--erp-banner-yellow)!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1.2;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}

.finance-dashboard-copy h1,
.module-fiscal .fiscal-main-hero h3,
.cad-hero-copy h1,
.obras-module-banner-copy h1,
.commercial-dashboard-banner h1,
.commercial-kanban-banner h1,
.commercial-detail-banner h1{
  color:#fff!important;
  font-size:clamp(27px,2.1vw,34px)!important;
  font-weight:850!important;
  line-height:1.06!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
}

/* O CSS original do painel também estiliza todo <span> do banner como uma
   etiqueta pequena. No título, o primeiro termo precisa acompanhar a mesma
   tipografia do restante. */
.commercial-dashboard-banner h1>span,
.commercial-kanban-banner h1>span,
.commercial-detail-banner h1>span{
  color:#fff!important;
  font-size:inherit!important;
  font-weight:850!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  text-transform:none!important;
}

.erp-shared-banner-title{
  color:#fff!important;
  font-size:clamp(27px,2.1vw,34px)!important;
  font-weight:850!important;
  line-height:1.06!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
}

.finance-dashboard-copy h1 b,
.module-fiscal .fiscal-main-hero h3 b,
.cad-hero-copy h1 b,
.obras-module-banner-copy h1 b,
.commercial-dashboard-banner h1 b,
.commercial-kanban-banner h1 b,
.commercial-detail-banner h1 b{
  color:var(--erp-banner-highlight)!important;
  font-weight:900!important;
  text-transform:none!important;
}

.erp-shared-banner-title b{
  color:var(--erp-banner-highlight)!important;
  font-weight:900!important;
  text-transform:none!important;
}

.finance-dashboard-copy>.erp-banner-accent,
.module-fiscal .fiscal-main-hero>div:first-child>.erp-banner-accent,
.cad-hero-copy>.erp-banner-accent,
.obras-module-banner-copy>.erp-banner-accent,
.commercial-dashboard-banner div>.erp-banner-accent,
.commercial-kanban-banner div>.erp-banner-accent,
.commercial-detail-banner div>.erp-banner-accent{
  display:block;
  width:78px;
  height:3px;
  margin-top:12px;
  border-radius:2px;
  background:var(--erp-banner-yellow);
  box-shadow:none;
}

.erp-banner-accent{
  display:block!important;
  width:78px!important;
  height:3px!important;
  margin-top:12px!important;
  border-radius:2px!important;
  background:var(--erp-banner-yellow)!important;
  box-shadow:none!important;
}

/* Alguns layouts antigos desenhavam o mesmo destaque com um pseudo-elemento
   ou com um <i> sem classe. O cabeçalho compartilhado mantém somente a linha
   .erp-banner-accent, evitando dois traços amarelos na mesma tela. */
body.module-financeiro .finance-page:not(.contract-detail-page)>.finance-hero>div:first-child::after,
body.module-financeiro .finance-page:not(.contract-detail-page)>.commission-dashboard-hero>div:first-child::after{
  content:none!important;
  display:none!important;
}

.finance-dashboard-copy>i:not(.erp-banner-accent),
body.module-fiscal .fiscal-main-hero>div:first-child>i:not(.erp-banner-accent){
  display:none!important;
}

.commercial-detail-banner small{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.82);
  font-size:10px;
  font-weight:650;
}

@media (max-width:980px){
  .app-sidebar .brand-panel{min-height:70px;margin-bottom:10px;padding:7px}
  .app-sidebar .brand-panel img,
  .app-sidebar .brand-panel::after{width:min(180px,calc(100% - 14px))}
}

@media (max-width:700px){
  .finance-dashboard-copy h1,
  .module-fiscal .fiscal-main-hero h3,
  .cad-hero-copy h1,
  .obras-module-banner-copy h1,
  .commercial-dashboard-banner h1,
  .commercial-kanban-banner h1,
  .commercial-detail-banner h1{font-size:25px}
  .erp-shared-banner-title{font-size:25px!important}
}