/* Cabeçalho padronizado — portal legado (index + pages) */

.header,
.header.header-v2 {
  display: grid;
  min-height: 88px;
  padding: 8px 10px !important;
  align-items: center;
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--lg-border, rgba(255, 255, 255, 0.42));
  background: var(--lg-fill-header, rgba(255, 255, 255, 0.18));
  backdrop-filter: var(--lg-blur, blur(32px) saturate(190%));
  -webkit-backdrop-filter: var(--lg-blur, blur(32px) saturate(190%));
  box-shadow: var(--lg-shadow, 0 12px 32px -20px rgba(6, 36, 92, 0.28));
}

.header.header-v2 {
  grid-template-columns: 1fr auto 1fr !important;
  gap: 12px !important;
}

.header.header-v2 .header-brand,
.header.header-v2 .portal-brand-lockup {
  justify-self: start;
}

.header.header-v2 .header-hero {
  justify-self: center;
}

.header.header-v2 .header-actions {
  justify-self: end;
}

.header:not(.header-v2) {
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(180px, auto) !important;
  gap: 12px !important;
}

.header .portal-brand-mark,
.header-v2 .portal-brand-mark,
.header-brand.portal-brand-mark,
.header > a.portal-brand-mark {
  max-width: none;
  justify-self: start;
}

.header .logo,
.header .logo-right,
.header .logo-tcgl,
.header-v2 .logo-right {
  height: 36px !important;
  max-height: 36px !important;
  width: auto;
  object-fit: contain;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  min-width: 0;
}

@media (min-width: 1101px) {
  .header:not(.header-v2) {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr) !important;
  }

  .header:not(.header-v2) > a:first-child,
  .header:not(.header-v2) > .portal-brand-mark {
    justify-self: start !important;
  }

  .header:not(.header-v2) > .pontualidade-title-wrap,
  .header:not(.header-v2) > .icv-title-wrap,
  .header:not(.header-v2) > .telemetria-title-wrap,
  .header:not(.header-v2) > .fleetbus-title-wrap,
  .header:not(.header-v2) > .autuacoes-title-wrap,
  .header:not(.header-v2) > .portal-shell-title,
  .header:not(.header-v2) > .header-title,
  .header:not(.header-v2) > h1 {
    justify-self: center !important;
    text-align: center !important;
  }

  .header:not(.header-v2) .header-actions {
    justify-self: end !important;
  }
}

.header-hero:not(.header-hero-pro) {
  padding: 4px 10px !important;
  background: var(--hero-mes-gradiente, linear-gradient(135deg, var(--azul), var(--azul-hover))) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--hero-mes-cor, var(--azul)) 22%, transparent) !important;
}

.header-hero-welcome {
  font-size: clamp(0.78rem, 1.5vw, 0.9rem) !important;
  color: #fff !important;
}

.header-hero-mes-nome {
  font-size: clamp(0.6rem, 1.05vw, 0.7rem) !important;
  color: #fff !important;
}

.header-hero-mes {
  font-size: clamp(0.42rem, 0.8vw, 0.52rem) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.header-hero-campanha-destaque {
  font-size: clamp(0.98rem, 1.95vw, 1.28rem) !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  .header-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .header-hero-welcome {
    text-align: center;
  }

  .header-hero-campanha {
    justify-content: center;
  }

  .header-hero-campanha-texto {
    max-width: min(100%, 220px);
    text-align: left;
  }
}

@media (max-width: 1100px) {
  .header:not(.header-v2),
  .header.header-v2 {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    min-height: auto;
    padding: 10px 14px !important;
    gap: 10px !important;
  }

  .header-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .header .logo-right,
  .header .logo-tcgl,
  .header-v2 .logo-right {
    height: 46px !important;
    max-height: 46px !important;
  }
}

/* Tema escuro — cabeçalho */
html.dk-dark .header,
html.dk-dark .header.header-v2 {
  background: var(--lg-fill-header, rgba(20, 24, 32, 0.28)) !important;
  border-bottom: 1px solid var(--lg-border, rgba(168, 178, 188, 0.28)) !important;
  box-shadow: var(--lg-shadow) !important;
  color: #f4f6f8 !important;
}

html.dk-dark .header .page-title,
html.dk-dark .header h1,
html.dk-dark .header .subtitle,
html.dk-dark .header .title-sub,
html.dk-dark .header .header-subtitle,
html.dk-dark .title-wrap,
html.dk-dark .title-wrap .subtitle,
html.dk-dark .title-wrap .title-sub {
  color: #f4f6f8 !important;
  text-shadow: none !important;
}

.header,
.header.header-v2 {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  min-height: 88px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}