/*
  Identidade visual centralizada do ProjetoG.SiteP (spec sitep-shell, requirement "Identidade
  visual centralizada") — trocar a marca do cliente real é só reatribuir estas custom properties
  e os arquivos de wwwroot/images/ (ver tabela no README do projeto), sem tocar em markup.

  Valores abaixo refletem o padrão visual real do site de referência Demo/"No ritmo das Vendas"
  (change alter-new-layout, design.md Decisão 1) — substituem a identidade placeholder anterior.
*/

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Regular.woff2") format("woff2"),
       url("../fonts/MyriadPro-Regular.woff") format("woff"),
       url("../fonts/MyriadPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Bold.woff2") format("woff2"),
       url("../fonts/MyriadPro-Bold.woff") format("woff"),
       url("../fonts/MyriadPro-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --pg-cor-primaria: #4d4d4d;
  --pg-cor-primaria-hover: #3a3a3a;
  --pg-cor-secundaria: #d61c38;
  --pg-cor-secundaria-hover: #b8172f;
  --pg-cor-terciaria: #9b162a;

  --pg-cor-preta: #000000;
  --pg-cor-branca: #ffffff;
  --pg-cor-cinza-escuro: #1a1a1a;
  --pg-cor-cinza: #d4d4d4;
  --pg-cor-cinza-claro: #f8f8f8;
  --pg-cor-contraste: #f4f4f4;

  --pg-cor-sucesso: #258202;
  --pg-cor-erro: #bc0707;

  --pg-cor-texto: var(--pg-cor-cinza-escuro);
  --pg-cor-texto-secundario: #6c6c6c;
  --pg-cor-fundo-alternado: var(--pg-cor-cinza-claro);
  --pg-cor-fundo: var(--pg-cor-branca);

  --pg-fonte-titulos: "Myriad Pro", "Segoe UI", sans-serif;
  --pg-fonte-corpo: "Myriad Pro", "Segoe UI", sans-serif;
}

body {
  font-family: var(--pg-fonte-corpo);
  color: var(--pg-cor-texto);
  background-color: var(--pg-cor-fundo);
  letter-spacing: 0.5px;
}

h1, h2, h3, h4, h5, h6, .pg-titulo {
  font-family: var(--pg-fonte-titulos);
  font-weight: 700;
}

a {
  color: var(--pg-cor-secundaria);
}

.pg-text-secundario {
  color: var(--pg-cor-texto-secundario);
}

.pg-bg-alternado {
  background-color: var(--pg-cor-fundo-alternado);
}

/* Fundos de seção coloridos (equivalentes a .bgCorPrimaria/.bgCorSecundaria/.bgCorCinza do Demo). */
.pg-bg-primaria {
  background-color: var(--pg-cor-primaria);
  color: var(--pg-cor-branca);
}

.pg-bg-secundaria {
  background-color: var(--pg-cor-secundaria);
  color: var(--pg-cor-branca);
}

.pg-bg-cinza-escuro {
  background-color: var(--pg-cor-cinza-escuro);
  color: var(--pg-cor-branca);
}

/* Botões primário/secundário — formato pílula, no padrão .btnDefault/.btnPrimario do Demo
   (border-radius alto, altura de 48px na Landing/Login — spec sitep-landing/sitep-auth). */
.btn-primary {
  --bs-btn-bg: var(--pg-cor-primaria);
  --bs-btn-border-color: var(--pg-cor-primaria);
  --bs-btn-hover-bg: var(--pg-cor-primaria-hover);
  --bs-btn-hover-border-color: var(--pg-cor-primaria-hover);
  --bs-btn-active-bg: var(--pg-cor-primaria-hover);
  --bs-btn-active-border-color: var(--pg-cor-primaria-hover);
  --bs-btn-border-radius: 50px;
}

.btn-outline-primary {
  --bs-btn-color: var(--pg-cor-primaria);
  --bs-btn-border-color: var(--pg-cor-primaria);
  --bs-btn-hover-bg: var(--pg-cor-primaria);
  --bs-btn-hover-border-color: var(--pg-cor-primaria);
  --bs-btn-border-radius: 50px;
}

.btn-secondary {
  --bs-btn-bg: var(--pg-cor-secundaria);
  --bs-btn-border-color: var(--pg-cor-secundaria);
  --bs-btn-hover-bg: var(--pg-cor-secundaria-hover);
  --bs-btn-hover-border-color: var(--pg-cor-secundaria-hover);
  --bs-btn-active-bg: var(--pg-cor-secundaria-hover);
  --bs-btn-active-border-color: var(--pg-cor-secundaria-hover);
  --bs-btn-border-radius: 50px;
}

/* Botões de altura fixa 48px, formato pílula (Landing/Login — LayoutBase Landing.html/design.md
   Decisão 4 e 7 de alter-new-layout). */
.pg-btn-pilula {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  border-radius: 50px;
}

.badge-pg-secundaria {
  background-color: var(--pg-cor-secundaria);
  color: var(--pg-cor-branca);
}

/* Navbar (Landing/Login/Home, desktop e mobile) — fundo vermelho, igual ao padrão real do Demo
   (change alter-new-layout, referências Layout_Login.jpg/Layout_Home.jpg fornecidas pelo
   solicitante). Substituiu o fundo branco placeholder anterior. */
.pg-navbar {
  background-color: var(--pg-cor-secundaria);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Tamanho do logotipo aumentado — comparado ao Layout_Home.jpg (feedback do solicitante): o
   logotipo "No ritmo das Vendas" estava pequeno demais em toda a navegação. */
.pg-navbar .pg-logo {
  height: 64px;
}

/* Home: logo em destaque, igual ou maior que a altura dos boxes ao seu redor
   (Layout_Home.jpg — box ~124px de altura). */
.pg-navbar .pg-logo-grande {
  height: 64px;
}

.pg-navbar a,
.pg-navbar button.btn-link {
  color: var(--pg-cor-branca);
}

.pg-navbar a:hover,
.pg-navbar button.btn-link:hover {
  color: var(--pg-cor-branca);
  opacity: 0.85;
}

/* Carrossel de banners (Landing/Home) */
.pg-banner-carousel img {
  width: 100%;
  object-fit: cover;
}

.pg-banner-carousel .pg-banner-desktop {
  aspect-ratio: 2000 / 500;
}

.pg-banner-carousel .pg-banner-mobile {
  aspect-ratio: 919 / 461;
}

/* Barra de consentimento de cookies (spec sitep-shell) */
.pg-cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background-color: var(--pg-cor-texto);
  opacity: 0.8;
  color: var(--pg-cor-branca);
  padding: 0.75rem 1rem;
}

.pg-cookie-bar a {
  color: var(--pg-cor-branca);
  text-decoration: underline;
}

/* Rodapé */
.pg-footer {
  background-color: var(--pg-cor-fundo-alternado);
  color: var(--pg-cor-texto-secundario);
  padding: 2rem 0;
}

.pg-footer .pg-logo-groove {
  height: 36px;
}

.pg-logo-footer {
  height: 36px;
}

/* Seções institucionais */
.pg-secao-institucional {
  padding: 3rem 0;
}

/* Boxes à esquerda/direita do logotipo na Home (Layout_Home.jpg fornecido pelo solicitante) —
   card com borda branca fina sobre o fundo vermelho da navbar, divisória tracejada. */
.pg-home-box {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  color: var(--pg-cor-branca);
}

.pg-home-box-divisor {
  border: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.5);
  margin: 0.5rem 0;
}

.pg-home-box a {
  color: var(--pg-cor-branca);
}

/* Linha "Saldo" dentro do box direito (spec sitep-home) — sem pílula verde, para caber no
   padrão de box do Demo. */
.pg-caixa-saldo {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

/* Menu horizontal secundário da Home (abaixo dos boxes) — mesma cor da navbar, links brancos
   separados por "|", item ativo em negrito (Layout_Home.jpg). */
.pg-menu-secundario {
  background-color: var(--pg-cor-secundaria);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--pg-cor-branca);
}

.pg-menu-secundario a {
  color: var(--pg-cor-branca);
  text-decoration: none;
}

.pg-menu-secundario a.active {
  font-weight: 700;
}

/* Barra inferior mobile (Home autenticada) */
.pg-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background-color: var(--pg-cor-fundo);
  border-top: 1px solid var(--pg-cor-fundo-alternado);
}

.pg-bottom-nav .nav-link {
  color: var(--pg-cor-texto-secundario);
  text-align: center;
}

.pg-bottom-nav .nav-link.active {
  color: var(--pg-cor-secundaria);
}

/* Card de destaque com ícone (equivalente a .boxDestaqueHome do Demo — Home, abaixo do banner). */
.pg-box-destaque {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 170px;
  padding: 1.5rem;
  border-radius: 4px;
  background-color: var(--pg-cor-fundo);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Box de conteúdo com imagem + texto (Landing/Login — equivalente a .box_destaque do Demo). */
.pg-box-imagem-texto img {
  width: 100%;
  border-radius: 4px;
}

/* Fundo da página de Login — vermelho com padrão de círculos concêntricos, igual ao
   Layout_Login.jpg fornecido pelo solicitante. Cobre toda a página, atrás da navbar e do box. */
.pg-login-page {
  background-image: url("/images/login-bg-pattern.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* Login: box com imagem à esquerda + formulário à direita, alturas emparelhadas
   (LayoutBase Login.html — spec sitep-auth, design.md Decisão 7 de alter-new-layout). */
.pg-login-box {
  min-height: 452px;
}

.pg-login-imagem {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  object-fit: cover;
  height: 100%;
  min-height: 452px;
}

.pg-login-formulario {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: var(--pg-cor-branca);
  color: var(--pg-cor-texto);
}

.pg-login-formulario .form-control {
  background-color: var(--pg-cor-contraste);
  border-color: var(--pg-cor-contraste);
}