html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--cpw-destaque);
}

/* 31/08/2026 (pedido do usuário): rodapé sempre no fim da página (visível),
   não logo depois do conteúdo curto — clássico "sticky footer" via flexbox.
   Substitui a técnica antiga do template padrão (`html{min-height:100%}` +
   `body{margin-bottom:60px}` + `.footer{position:absolute;bottom:0}`), que
   já tinha perdido a metade (o `.footer{position:absolute}`) numa correção
   anterior de rolagem horizontal — sobrava só o `margin-bottom:60px` sem
   efeito nenhum, um respiro solto no fim da página. */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

/* Filho único do body no layout com menu lateral (Cliente/Administrador) —
   já tem min-height:100vh próprio; flex:1 garante que ocupa o resto da
   altura do body quando o body cresce além disso. */
body > .cpw-shell {
  flex: 1 0 auto;
}

/* Wrapper do conteúdo no layout sem menu lateral (Vendedor/deslogado) —
   cresce pra empurrar o rodapé pro fim da viewport em páginas curtas. */
.cpw-conteudo-principal {
  flex: 1 0 auto;
  background: #f8f9fa;
}

html[data-theme="escuro"] .cpw-conteudo-principal {
  background: #0b1220;
}

/* 11/08/2026 (pedido do usuário): identidade visual alinhada ao site
   institucional www.cessistemas.com.br — cores/fontes extraídas dos estilos
   computados reais do site (inspeção via DevTools), adaptadas ao CesPedWeb
   (portal denso de pedidos/tabelas, então sem os cantos em pílula/raio
   grande do site institucional — ver .btn e .card abaixo). Substitui a
   paleta azul genérica anterior (RNF-09, 31/07/2026), que não tinha vínculo
   com nenhuma marca. */
:root {
  --cpw-primaria: #1a1a1a;
  --cpw-primaria-escura: #0a0a0a;
  --cpw-destaque: #ff8d23;
  --cpw-destaque-escuro: #d1741d;
  --cpw-texto-secundario: #71717a;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.cpw-logo, .cpw-sidebar-logo, .card-header {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
}

a {
  color: var(--cpw-primaria);
}

a:hover {
  color: var(--cpw-destaque);
}

/* Bootstrap nesta versão (5.1.0) ainda não expõe os botões via CSS custom
   properties (--bs-btn-*, só a partir da 5.2) — a cor precisa ser
   sobrescrita direto nas classes, senão o azul padrão do Bootstrap continua
   vencendo por já vir com color/background-color explícitos. */
.btn-primary {
  color: #fff;
  background-color: var(--cpw-destaque);
  border-color: var(--cpw-destaque);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  color: #fff;
  background-color: var(--cpw-destaque-escuro) !important;
  border-color: var(--cpw-destaque-escuro) !important;
}

.btn-outline-primary {
  color: var(--cpw-destaque);
  border-color: var(--cpw-destaque);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  color: #fff;
  background-color: var(--cpw-destaque) !important;
  border-color: var(--cpw-destaque) !important;
}

.text-primary {
  color: var(--cpw-destaque) !important;
}

.bg-primary {
  background-color: var(--cpw-destaque) !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--cpw-destaque);
  border-color: var(--cpw-destaque);
}

.text-muted, .form-text {
  color: var(--cpw-texto-secundario) !important;
}

/* 11/08/2026: leve aumento sobre o padrão do Bootstrap (0.375rem/0.375rem),
   sem virar pílula/raio grande (o site institucional usa botões 100%
   arredondados e cards com raio ~20px, mas isso prejudicaria a leitura das
   telas densas de tabela/formulário do CesPedWeb). */
.btn {
  border-radius: 0.5rem;
}

.card {
  border-radius: 0.5rem;
}

.cpw-header {
  background: var(--cpw-primaria-escura);
  color: #fff;
  margin-bottom: 1.5rem;
}

.cpw-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--cpw-primaria);
}

.cpw-logo {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

/* 03/08/2026 (pedido do usuário): logo configurável (/Parametros) — fundo
   branco arredondado pra funcionar com qualquer logo (claro ou colorido)
   sobre a barra azul do cabeçalho. */
.cpw-logo img {
  height: 2.25rem;
  max-width: 10rem;
  object-fit: contain;
  background: #fff;
  border-radius: 0.35rem;
  padding: 0.2rem 0.5rem;
}

/* 01/09/2026 (pedido do usuário): tela de login redesenhada como página
   independente (sem o <header>/menu do resto do site — só a logo do topo
   saiu; a logo dentro do cartão continua vindo de /Parametros), inspirada na
   estrutura do projeto CesML (cartão centralizado, ícones nos campos, botão
   de mostrar/ocultar senha). Fundo com leve degradê e paleta do CesPedWeb
   (--cpw-destaque) em vez do laranja fixo do CesML. */
.cpw-login-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #f7f8fa, #eef0f3);
}

html[data-theme="escuro"] .cpw-login-body {
  background: var(--cpw-dark-bg);
}

/* Botão de tema fixo no canto superior direito — substitui o cabeçalho
   removido desta página. Variante clara de .cpw-icone-link, que por padrão
   é branco sobre fundo escuro (não visível sobre o fundo claro do login). */
/* 01/09/2026 (pedido do usuário): mesmo botão "Alternar tema" do
   CotaçãoWeb — círculo com borda sutil, fundo transparente, ícone laranja
   (bi-moon-stars/bi-sun-fill via CDN do Bootstrap Icons). */
.cpw-login-tema-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.3);
  background: transparent;
  color: var(--cpw-destaque);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.cpw-login-wrap {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem 2rem;
}

.cpw-login-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 0.75rem 2.5rem rgba(18, 63, 112, 0.14);
  border-bottom: 4px solid var(--cpw-destaque);
  padding: 2.75rem 2.5rem 2.5rem;
  text-align: center;
}

html[data-theme="escuro"] .cpw-login-card {
  box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.5);
}

.cpw-login-card img {
  max-height: 10rem;
  max-width: 100%;
}

/* Logo padrão troca de arquivo por tema (variante clara/escura, cada uma já
   com a cor de texto certa) — a escura começa escondida. */
.cpw-login-logo-escuro {
  display: none;
}

html[data-theme="escuro"] .cpw-login-logo-claro {
  display: none;
}

html[data-theme="escuro"] .cpw-login-logo-escuro {
  display: inline-block;
}

.cpw-login-card h1 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
  color: var(--cpw-primaria-escura);
}

.cpw-login-selo-sucesso {
  margin: 0.5rem 0 0.25rem;
  color: #198754;
  font-weight: 600;
  font-size: 1.05rem;
}

.cpw-login-subtitulo {
  margin: -1rem 0 1.5rem;
  color: var(--cpw-texto-secundario);
  font-size: 0.9rem;
  line-height: 1.4;
}

html[data-theme="escuro"] .cpw-login-subtitulo {
  color: var(--cpw-dark-texto-secundario);
}

.cpw-login-card form {
  text-align: left;
}

.cpw-login-campo {
  position: relative;
  margin-bottom: 1.1rem;
}

.cpw-login-campo .form-control {
  border-radius: 0.75rem;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  border-color: #dfe3e8;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.cpw-login-campo .form-control:focus {
  box-shadow: 0 0 0 4px rgba(255, 141, 35, 0.18);
  border-color: var(--cpw-destaque);
}

html[data-theme="escuro"] .cpw-login-campo .form-control {
  border-color: var(--cpw-dark-borda);
}

.cpw-login-campo .cpw-login-icone {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  /* -2px: correção óptica — texto sem descendentes (E-mail/Senha) parece
     mais alto que o centro geométrico do campo, então o ícone (centrado
     geometricamente) parecia mais baixo que o texto ao lado. */
  transform: translateY(calc(-50% - 3.5px));
  width: 1.1rem;
  height: 1.1rem;
  color: #9ca3af;
  pointer-events: none;
}

.cpw-login-campo .cpw-login-icone svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cpw-login-campo .cpw-login-alternar-senha {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(calc(-50% - 3.5px));
  width: 1.1rem;
  height: 1.1rem;
  color: #9ca3af;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.cpw-login-campo .cpw-login-alternar-senha svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cpw-login-card .btn {
  border-radius: 0.75rem;
  padding: 0.65rem;
  font-weight: 600;
}

/* html[data-theme="escuro"] a {color:...} (regra genérica de link) tem
   especificidade maior que .btn-primary sozinho e sobrescrevia o texto do
   botão "Voltar ao login" (link estilizado como botão) pra laranja sobre
   laranja no tema escuro. */
html[data-theme="escuro"] .cpw-login-card a.btn-primary {
  color: #fff;
}

html[data-theme="escuro"] .cpw-login-card a.btn-outline-secondary {
  color: var(--cpw-dark-texto);
}

.cpw-login-opcoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.cpw-login-opcoes a {
  color: var(--cpw-destaque);
  text-decoration: none;
}

.cpw-login-opcoes a:hover {
  text-decoration: underline;
}

/* Rodapé próprio desta página — mais discreto (fonte menor) que o rodapé
   padrão do site, já que aqui não há mais conteúdo/menu acima disputando
   atenção com ele. */
.cpw-login-footer {
  flex-shrink: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--cpw-texto-secundario);
  padding: 1rem;
}

html[data-theme="escuro"] .cpw-login-footer {
  color: var(--cpw-dark-texto-secundario);
}

.cpw-usuario {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #fff;
}

.cpw-usuario a {
  color: #fff;
}

.cpw-icone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  padding: 0.35rem;
}

.cpw-icone-link:hover {
  background: rgba(255, 255, 255, 0.3);
}

.cpw-icone-link svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 02/09/2026 (pedido do usuário): header no mesmo padrão do CesCotacaoWeb —
   botão de tema circular (mesmo tamanho do avatar) e ícone via Bootstrap
   Icons (fonte carregada via CDN só pra isso, mesma decisão já tomada nas
   telas de login). */
.cpw-tema-btn {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.05rem;
}

/* Avatar com iniciais + dropdown "Conectado como / Alterar senha / Sair" */
.cpw-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
}

.cpw-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--cpw-destaque);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

.cpw-user-dropdown .dropdown-menu {
  min-width: 220px;
}

.cpw-dropdown-email {
  color: var(--cpw-primaria-escura);
  max-width: 220px;
}

html[data-theme="escuro"] .cpw-dropdown-email {
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .dropdown-menu {
  background: var(--cpw-dark-bg-elevado);
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .dropdown-item {
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .dropdown-item:hover,
html[data-theme="escuro"] .dropdown-item:focus {
  background: rgba(255, 141, 35, 0.14);
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .dropdown-item.text-danger:hover {
  color: #f87171 !important;
}

html[data-theme="escuro"] .dropdown-divider {
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .cpw-user-dropdown .border-bottom {
  border-color: var(--cpw-dark-borda) !important;
}

.cpw-toolbar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.6rem 1rem;
}

.cpw-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 6.5rem;
  padding: 0.5rem 0.25rem;
  border-radius: 0.5rem;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
}

.cpw-item:hover {
  background: var(--cpw-destaque);
  color: #fff;
}

.cpw-item svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 03/08/2026 (pedido do usuário): menu lateral só pro perfil Cliente, inspirado
   num print de referência (distribuidora "Pelegrini") — Administrador/Vendedor
   continuam com a barra de ícones no topo (.cpw-header/.cpw-toolbar acima). */
.cpw-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* 02/09/2026 (pedido do usuário): sidebar no mesmo padrão visual do
   CesCotacaoWeb (largura, cabeçalho com logo+collapse na mesma linha, itens
   arredondados com destaque laranja suave no hover/ativo, em vez do
   preenchimento sólido escuro anterior). */
.cpw-sidebar {
  flex: 0 0 260px;
  width: 260px;
  background: #fff;
  border-right: 1px solid #edf2f7;
  display: flex;
  flex-direction: column;
}

.cpw-sidebar-header {
  padding: 1.5rem 1.25rem;
  display: flex;
  align-items: center;
}

.cpw-sidebar-logo {
  display: block;
  min-width: 0;
}

.cpw-sidebar-logo img {
  max-width: 100%;
  max-height: 3.25rem;
  object-fit: contain;
}

/* Troca por tema — a escura começa escondida. */
.cpw-sidebar-logo-escuro {
  display: none;
}

html[data-theme="escuro"] .cpw-sidebar-logo-claro {
  display: none;
}

html[data-theme="escuro"] .cpw-sidebar-logo-escuro {
  display: inline-block;
}

.cpw-sidebar-collapse {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--cpw-texto-secundario);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.3rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.cpw-sidebar-collapse:hover {
  color: var(--cpw-destaque);
  background: #fff5eb;
}

.cpw-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.9rem;
}

.cpw-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  color: var(--cpw-texto-secundario);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.cpw-sidebar-item:hover {
  background: #fff5eb;
  color: var(--cpw-destaque);
}

.cpw-sidebar-item.active {
  background: #fff5eb;
  color: var(--cpw-destaque);
  font-weight: 600;
}

.cpw-sidebar-item svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 02/09/2026 (pedido do usuário): fundo da área de conteúdo (sem mexer no
   header/sidebar, que já têm fundo próprio) no mesmo tom do CesCotacaoWeb —
   cinza claro no tema claro, navy escuro no tema escuro (mesmos valores de
   #dashboard-container/--content-bg de lá). */
.cpw-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

html[data-theme="escuro"] .cpw-main {
  background: #0b1220;
}

/* 04/08/2026 (pedido do usuário): com o menu lateral visível, várias telas
   (principalmente tabelas com muitas colunas — Clientes, Produtos, Condições
   de pagamento, etc.) empurravam a página inteira e abriam uma barra de
   rolagem horizontal no `body`. `min-width: 0` no flex item deixa o
   container encolher até a largura disponível. A causa raiz de fato era o
   `.footer` (ver _Layout.cshtml.css), já corrigida; o `overflow-x: auto` que
   existia aqui como reforço foi removido (04/08/2026) porque, ao definir
   overflow-x sem definir overflow-y, o navegador força overflow-y para
   "auto" também (regra do CSS2.1 ainda vigente) — isso cortava
   verticalmente qualquer elemento posicionado que saísse do container, como
   o badge de quantidade do carrinho (`translate-middle`, sai acima do
   ícone). Tabelas largas continuam OK: cada uma já está dentro do próprio
   `.table-responsive`. */
.cpw-main > .container-fluid {
  min-width: 0;
  max-width: 100%;
  /* 31/08/2026 (pedido do usuário): cresce pra empurrar o rodapé (irmão
     seguinte, fora deste container) pro fim da tela em páginas curtas —
     `.cpw-main` já era flex-column, só faltava este item crescer. */
  flex: 1 0 auto;
}

/* 04/08/2026 (pedido do usuário): botão "sanduíche" pra fechar/abrir o menu
   lateral — ver btnAlternarMenu em _Layout.cshtml/site.js. */
.cpw-shell.cpw-menu-fechado .cpw-sidebar {
  display: none;
}

.cpw-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e3e6ea;
  background: #fff;
  color: #333c46;
}

.cpw-topbar .cpw-icone-link {
  background: rgba(18, 63, 112, 0.08);
  color: var(--cpw-primaria-escura);
}

.cpw-topbar .cpw-icone-link:hover {
  background: rgba(18, 63, 112, 0.18);
}

@media (max-width: 768px) {
  .cpw-shell {
    flex-direction: column;
    min-height: 0;
  }

  .cpw-sidebar {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    padding: 0.75rem;
    overflow-x: auto;
  }

  .cpw-sidebar-header {
    padding: 0 0.75rem 0 0;
    flex: 0 0 auto;
  }

  .cpw-sidebar-collapse {
    display: none;
  }

  .cpw-sidebar-nav {
    flex-direction: row;
    padding: 0;
  }

  .cpw-sidebar-item span {
    display: none;
  }
}

/* 03/08/2026 (pedido do usuário): skin claro/escuro, alternado pelo botão no
   cabeçalho e salvo no localStorage (ver site.js) — Bootstrap 5.1 nesta
   versão não tem dark mode nativo (só a partir da 5.3, `data-bs-theme`), por
   isso os componentes usados no app (card/tabela/formulário/modal/alerta)
   são sobrescritos manualmente aqui via `[data-theme="escuro"]`. Cobertura
   pragmática dos componentes de fato usados no CesPedWeb, não de todo o
   Bootstrap. */
html[data-theme="escuro"] {
  --cpw-dark-bg: #14181d;
  --cpw-dark-bg-elevado: #1e242b;
  --cpw-dark-borda: #333c46;
  --cpw-dark-texto: #e4e7eb;
  --cpw-dark-texto-secundario: #9aa4b2;
}

html[data-theme="escuro"] body {
  background: var(--cpw-dark-bg);
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] a {
  color: #ff9142;
}

html[data-theme="escuro"] a:hover {
  color: #ffab6b;
}

html[data-theme="escuro"] .card,
html[data-theme="escuro"] .modal-content,
html[data-theme="escuro"] .list-group-item {
  background: var(--cpw-dark-bg-elevado);
  color: var(--cpw-dark-texto);
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .table {
  color: var(--cpw-dark-texto);
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .table > :not(caption) > * > * {
  background-color: var(--cpw-dark-bg-elevado);
  color: var(--cpw-dark-texto);
  border-bottom-color: var(--cpw-dark-borda);
  box-shadow: none;
}

html[data-theme="escuro"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.04);
}

html[data-theme="escuro"] .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.07);
}

html[data-theme="escuro"] .form-control,
html[data-theme="escuro"] .form-select {
  background-color: var(--cpw-dark-bg-elevado);
  color: var(--cpw-dark-texto);
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .form-control:focus,
html[data-theme="escuro"] .form-select:focus {
  background-color: var(--cpw-dark-bg-elevado);
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .form-control::placeholder {
  color: var(--cpw-dark-texto-secundario);
}

/* .form-floating esconde o placeholder real (color: transparent) pra só o
   label flutuante aparecer no estado "vazio, sem foco" — sem isso os dois
   ficam sobrepostos. A regra acima tem b=2/c=2 (html + [data-theme] + .form-control
   + ::placeholder) contra b=2/c=1 do Bootstrap (.form-floating + .form-control
   + ::placeholder), então ela ganha e reexibe o placeholder por baixo do label
   no modo escuro. Precisa da mesma prioridade, restrita ao contexto floating. */
html[data-theme="escuro"] .form-floating > .form-control::placeholder {
  color: transparent;
}

html[data-theme="escuro"] .form-control:disabled,
html[data-theme="escuro"] .form-select:disabled {
  background-color: var(--cpw-dark-bg);
  color: var(--cpw-dark-texto-secundario);
}

html[data-theme="escuro"] .form-text,
html[data-theme="escuro"] .text-muted {
  color: var(--cpw-dark-texto-secundario) !important;
}

html[data-theme="escuro"] .btn-outline-secondary {
  color: var(--cpw-dark-texto);
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .btn-outline-secondary:hover {
  background-color: var(--cpw-dark-borda);
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.5);
}

html[data-theme="escuro"] hr,
html[data-theme="escuro"] .border,
html[data-theme="escuro"] .border-top {
  border-color: var(--cpw-dark-borda) !important;
}

html[data-theme="escuro"] .alert-info {
  background-color: #0f3a4a;
  color: #b8e4f5;
  border-color: #17566d;
}

html[data-theme="escuro"] .alert-danger {
  background-color: #4a1414;
  color: #f5b8b8;
  border-color: #6d1a1a;
}

html[data-theme="escuro"] .bg-light {
  background-color: var(--cpw-dark-bg) !important;
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .footer {
  background-color: #111a2b !important;
  border-top-color: #1e2a3d !important;
  color: #8b93a3 !important;
}

html[data-theme="escuro"] .cpw-login-card {
  background: var(--cpw-dark-bg-elevado);
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .cpw-login-card h1 {
  color: var(--cpw-dark-texto);
}

/* 01/09/2026 (pedido do usuário): o logo padrão agora tem uma variante
   própria pro tema escuro ("CES" em branco em vez de navy — ver
   .cpw-login-logo-escuro acima), não precisa mais do selo branco. Uma URL
   customizada em /Parametros não tem variante por tema, então continua
   usando a técnica do CotaçãoWeb (css/login.css de lá — mesmos valores de
   padding/raio) como fallback. */
html[data-theme="escuro"] .cpw-login-logo-personalizado img {
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
}


html[data-theme="escuro"] .pagination .page-link {
  background-color: var(--cpw-dark-bg-elevado);
  color: var(--cpw-dark-texto);
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .pagination .page-item.disabled .page-link {
  background-color: var(--cpw-dark-bg);
  color: var(--cpw-dark-texto-secundario);
}

html[data-theme="escuro"] .cpw-sidebar,
html[data-theme="escuro"] .cpw-topbar {
  background: var(--cpw-dark-bg-elevado);
  border-color: var(--cpw-dark-borda);
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .cpw-sidebar-item {
  color: var(--cpw-dark-texto-secundario);
}

html[data-theme="escuro"] .cpw-sidebar-item:hover,
html[data-theme="escuro"] .cpw-sidebar-item.active {
  background: rgba(255, 141, 35, 0.14);
  color: var(--cpw-destaque);
}

html[data-theme="escuro"] .cpw-sidebar-collapse {
  color: var(--cpw-dark-texto-secundario);
}

html[data-theme="escuro"] .cpw-sidebar-collapse:hover {
  color: var(--cpw-destaque);
  background: rgba(255, 141, 35, 0.14);
}

html[data-theme="escuro"] .cpw-topbar .cpw-icone-link {
  background: rgba(255, 255, 255, 0.1);
  color: var(--cpw-dark-texto);
}

html[data-theme="escuro"] .cpw-topbar .cpw-icone-link:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 11/08/2026 (pedido do usuário): telas de cadastro somente-leitura
   (Produtos/Clientes/Condições de pagamento — Details.cshtml) estavam "sem
   graça": linhas soltas de rótulo cinza + valor preto, sem nenhuma
   hierarquia visual. Componente reutilizável — cartão por seção com título
   em caixa alta na cor de destaque + pares rótulo/valor mais espaçados. */
.cpw-detalhe-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cpw-detalhe-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.cpw-detalhe-titulo h1 {
  margin-bottom: 0;
}

.cpw-detalhe-codigo-gestor {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--cpw-texto-secundario);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0.4rem;
  padding: 0.25rem 0.6rem;
}

.cpw-detalhe-foto {
  max-width: 128px;
  max-height: 128px;
  object-fit: contain;
  border: 1px solid #e3e6ea;
  border-radius: 0.5rem;
  padding: 0.4rem;
  background: #fff;
  flex: 0 0 auto;
}

.cpw-detalhe-secao {
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.cpw-detalhe-secao-titulo {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cpw-destaque);
  margin-bottom: 1.1rem;
}

.cpw-campo-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cpw-texto-secundario);
  margin-bottom: 0.2rem;
}

.cpw-campo-valor {
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a1a1a;
}

html[data-theme="escuro"] .cpw-detalhe-codigo-gestor {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cpw-dark-texto-secundario);
}

html[data-theme="escuro"] .cpw-detalhe-foto {
  background: var(--cpw-dark-bg-elevado);
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .cpw-detalhe-secao {
  background: var(--cpw-dark-bg-elevado);
  border-color: var(--cpw-dark-borda);
}

html[data-theme="escuro"] .cpw-campo-valor {
  color: var(--cpw-dark-texto);
}