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);
}

/* 17/09/2026 (pedido do usuário — "Testes reprovados do PedWeb"): esconde o
   spinner nativo (setas de incremento/decremento) que o navegador desenha em
   `<input type="number">`. Ele quebrava o layout dos campos de quantidade em
   todo o site — a quantidade já tem botões −/+ próprios (ver
   _GradeResultadosBusca/_CarrinhoParcial), então o spinner nativo era redundante
   além de feio. Digitar direto no campo continua funcionando normalmente. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 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;
}

/* 09/09/2026 (pedido do usuário): o Bootstrap declara `.btn-primary:disabled`
   com a cor azul explícita e especificidade (0,2,0) — maior que a de
   `.btn-primary` sozinha (0,1,0) logo acima —, então botão desabilitado
   voltava a ficar azul. Aparecia no "Novo pedido" do painel de pedidos, que
   nasce desabilitado até escolher um cliente. O apagamento do estado
   desabilitado continua vindo do `opacity: .65` que o Bootstrap aplica em
   `.btn:disabled`; aqui só a cor é corrigida. */
.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: var(--cpw-destaque);
  border-color: var(--cpw-destaque);
}

.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;
}

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

.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;
}

/* 09/09/2026 (pedido do usuário): combo de busca — <input> com uma lista
   filtrável embaixo, no lugar do <datalist> nativo (que só casa o texto
   inteiro, muda de aparência conforme o navegador e não navega por teclado).
   Usado na "Forma de pagamento" da tela de pedido, onde a lista de condições
   é longa. O componente é genérico de propósito: se outra tela precisar do
   mesmo padrão, é só repetir a estrutura .cpw-combo > input + ul. */
.cpw-combo {
  position: relative;
}

.cpw-combo-opcoes {
  position: absolute;
  z-index: 1056; /* acima do modal do Bootstrap (1055) — a tela de pedido abre
                    a busca de produtos em modal e o combo pode ficar atrás */
  left: 0;
  right: 0;
  margin: 0.15rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .35);
}

.cpw-combo-opcao {
  padding: 0.4rem 0.6rem;
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: 0.925rem;
}

.cpw-combo-opcao:hover,
.cpw-combo-opcao.ativa {
  background: var(--cpw-destaque);
  color: #fff;
}

html[data-theme="escuro"] .cpw-combo-opcoes {
  background: var(--cpw-dark-bg-elevado);
  border-color: var(--cpw-dark-borda);
  color: var(--cpw-dark-texto);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6);
}

.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);
}

/* 10/09/2026 (pedido do usuário): no celular o menu lateral virava uma faixa
   horizontal de ícones, sem nome, que não se comportava como menu "sanduíche".
   Abaixo do breakpoint lg do Bootstrap (992px) ele passa a ser uma gaveta
   flutuante: fica fora da tela e abre por cima do conteúdo pelo botão do topo,
   com um fundo escurecido que fecha ao tocar (ver site.js). O topo fica preso
   no alto da tela, então o botão está sempre à mão. Acima de 992px nada muda. */
.cpw-topbar-menu {
  margin-right: auto;
  display: none;
}

.cpw-shell.cpw-menu-fechado .cpw-topbar-menu {
  display: inline-flex;
}

.cpw-topbar-logo,
.cpw-sidebar-fundo,
.cpw-so-celular {
  display: none;
}

@media (max-width: 991.98px) {
  .cpw-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    width: min(280px, 85vw);
    transform: translateX(-100%);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* O "fechado" do desktop não vale aqui — a gaveta tem estado próprio. */
  .cpw-shell.cpw-menu-fechado .cpw-sidebar {
    display: flex;
  }

  .cpw-shell.cpw-menu-aberto .cpw-sidebar {
    transform: translateX(0);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
  }

  .cpw-sidebar-fundo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .cpw-shell.cpw-menu-aberto .cpw-sidebar-fundo {
    opacity: 1;
    visibility: visible;
  }

  .cpw-so-desktop {
    display: none;
  }

  .cpw-so-celular {
    display: inline-block;
  }

  .cpw-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: 0.5rem 0.75rem;
  }

  .cpw-topbar-menu,
  .cpw-shell.cpw-menu-fechado .cpw-topbar-menu {
    display: inline-flex;
    margin-right: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.35rem;
  }

  .cpw-topbar-logo {
    display: block;
    margin-right: auto;
  }

  .cpw-topbar-logo img {
    max-height: 1.9rem;
    max-width: 9rem;
    object-fit: contain;
  }

  body.cpw-sem-rolagem {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpw-sidebar,
  .cpw-sidebar-fundo {
    transition: none;
  }
}

/* 10/09/2026 (pedido do usuário): carrinho no celular — ver o comentário em
   _CarrinhoParcial.cshtml. No desktop só ganha o −/+ na quantidade. */
.cpw-qtd-carrinho {
  width: 8.5rem;
  margin-left: auto;
  flex-wrap: nowrap;
}

.cpw-carrinho-finalizar {
  margin-bottom: 1.5rem;
}

.cpw-carrinho-finalizar-total {
  display: none;
}

@media (max-width: 767.98px) {
  .cpw-carrinho-rolagem {
    overflow-x: visible;
  }

  .cpw-tabela-carrinho thead {
    display: none;
  }

  .cpw-tabela-carrinho,
  .cpw-tabela-carrinho tbody,
  .cpw-tabela-carrinho tfoot {
    display: block;
    width: 100%;
  }

  .cpw-tabela-carrinho tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem 0.75rem;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
    border: 1px solid #e3e6ea;
    border-radius: 0.75rem;
    background: #fff;
  }

  .cpw-tabela-carrinho tbody td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .cpw-tabela-carrinho tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    color: var(--cpw-texto-secundario);
  }

  /* Ordem do cartão: nome, código, quantidade + total, preço/IPI/ST, botões. */
  .cpw-tabela-carrinho .cpw-carrinho-produto {
    grid-column: 1 / -1;
    order: -3;
    font-weight: 600;
  }

  .cpw-tabela-carrinho .cpw-carrinho-codigo {
    grid-column: 1 / -1;
    order: -2;
    margin-top: -0.4rem;
    font-size: 0.8rem;
    color: var(--cpw-texto-secundario);
  }

  .cpw-tabela-carrinho tbody td.cpw-carrinho-codigo[data-label]::before {
    display: inline;
    margin-right: 0.25rem;
    font-size: inherit;
  }

  .cpw-tabela-carrinho .cpw-carrinho-qtd {
    grid-column: span 2;
    order: -1;
  }

  .cpw-tabela-carrinho .cpw-carrinho-total {
    order: -1;
    text-align: right !important;
    font-size: 1rem;
    font-weight: 700;
  }

  .cpw-qtd-carrinho {
    width: 100%;
    max-width: 10.5rem;
    margin-left: 0;
  }

  .cpw-qtd-carrinho .btn,
  .cpw-qtd-carrinho .form-control {
    min-height: 2.5rem;
    font-size: 1rem;
  }

  .cpw-qtd-carrinho .btn {
    width: 2.75rem;
  }

  .cpw-tabela-carrinho .cpw-carrinho-acoes {
    grid-column: 1 / -1;
    display: flex !important;
    gap: 0.5rem;
  }

  .cpw-carrinho-acoes .btn {
    flex: 1 1 0;
    min-height: 2.5rem;
  }

  .cpw-tabela-carrinho tfoot tr {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0.25rem;
    border-bottom: 1px solid #e3e6ea;
  }

  .cpw-tabela-carrinho tfoot th {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .cpw-carrinho-finalizar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 -1rem 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-top: 1px solid #e3e6ea;
    box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.06);
  }

  .cpw-carrinho-finalizar-total {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .cpw-carrinho-finalizar-total span {
    font-size: 0.75rem;
    color: var(--cpw-texto-secundario);
  }

  .cpw-carrinho-finalizar-total strong {
    font-size: 1.15rem;
  }

  .cpw-carrinho-finalizar .btn {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
  }

  html[data-theme="escuro"] .cpw-tabela-carrinho tbody tr,
  html[data-theme="escuro"] .cpw-carrinho-finalizar {
    background: var(--cpw-dark-bg-elevado);
    border-color: var(--cpw-dark-borda);
  }

  html[data-theme="escuro"] .cpw-tabela-carrinho tfoot tr {
    border-color: var(--cpw-dark-borda);
  }
}

/* 10/09/2026 (pedido do usuário): filtros da vitrine do Cliente e do modal de
   busca do Administrador. No desktop, a vitrine continua numa linha só (com a
   rolagem lateral e o respiro pro anel de foco explicados em Novo.cshtml); no
   celular os campos quebram em linhas, sem rolagem. */
.cpw-vitrine-busca-area {
  min-width: 0;
  overflow-x: auto;
}

.cpw-vitrine-busca {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.75rem 0.35rem;
}

.cpw-vitrine-tipo {
  flex: 0 0 auto;
  max-width: 140px;
}

.cpw-vitrine-termo {
  flex: 1 1 auto;
  min-width: 160px;
}

.cpw-vitrine-categoria {
  flex: 0 0 auto;
  max-width: 220px;
}

.cpw-vitrine-buscar {
  flex: 0 0 auto;
}

/* 10/09/2026 (pedido do usuário): "Somente em promoção" na mesma linha dos
   filtros, com a caixinha alinhada ao texto (sem o recuo padrão do Bootstrap). */
.cpw-vitrine-promocao {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding-left: 0;
  white-space: nowrap;
}

.cpw-vitrine-promocao .form-check-input {
  float: none;
  margin: 0;
}

@media (min-width: 768px) {
  .cpw-busca-modal-termo {
    min-width: 240px;
  }
}

@media (max-width: 767.98px) {
  .cpw-vitrine-busca-area {
    overflow-x: visible;
  }

  /* Respiro pro número de itens do ícone do carrinho, que fica metade pra
     fora do botão e sumia atrás do topo fixo. */
  .cpw-vitrine-barra {
    padding-top: 0.75rem;
  }

  .cpw-vitrine-busca {
    flex-wrap: wrap;
    padding: 0.25rem 0 0;
  }

  .cpw-vitrine-termo {
    order: -1;
    flex: 1 1 100%;
    min-width: 0;
  }

  .cpw-vitrine-tipo,
  .cpw-vitrine-categoria {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .cpw-vitrine-promocao {
    flex: 1 1 100%;
    min-height: 2.25rem;
  }

  .cpw-vitrine-promocao .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
  }

  .cpw-vitrine-buscar,
  .cpw-busca-modal-botao {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* 10/09/2026 (pedido do usuário): listas do dia a dia no celular — histórico de
   pedidos (Cliente e painel do Administrador), boletos e itens do pedido. Abaixo
   de 768px cada linha da tabela vira um cartão com "rótulo  valor" (o rótulo vem
   do data-label da célula; célula sem rótulo vira o título do cartão) e os botões
   da linha ficam embaixo, largos. Mesma ideia do carrinho (.cpw-tabela-carrinho).
   No desktop continuam tabelas. */
.cpw-acoes-pedido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .cpw-tabela-cartoes thead {
    display: none;
  }

  .cpw-tabela-cartoes,
  .cpw-tabela-cartoes tbody,
  .cpw-tabela-cartoes tfoot,
  .cpw-tabela-cartoes tr,
  .cpw-tabela-cartoes td {
    display: block;
    width: 100%;
  }

  .cpw-tabela-cartoes tbody tr {
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid #e3e6ea;
    border-radius: 0.75rem;
    background: #fff;
  }

  .cpw-tabela-cartoes tbody tr.table-danger {
    background: #fdf1f2;
    border-color: #f1aeb5;
  }

  .cpw-tabela-cartoes tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f2f4 !important;
    text-align: right !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .cpw-tabela-cartoes tbody td:last-child {
    border-bottom: 0 !important;
  }

  .cpw-tabela-cartoes tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--cpw-texto-secundario);
    text-align: left;
  }

  .cpw-tabela-cartoes tbody td:not([data-label]):not(.cpw-celula-acoes) {
    display: block;
    text-align: left !important;
    font-weight: 600;
  }

  .cpw-tabela-cartoes .cpw-celula-acoes > div {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  .cpw-tabela-cartoes .cpw-celula-acoes > div:empty {
    display: none !important;
  }

  .cpw-tabela-cartoes .cpw-celula-acoes .btn,
  .cpw-tabela-cartoes .cpw-celula-acoes form {
    flex: 1 1 0;
  }

  .cpw-tabela-cartoes .cpw-celula-acoes .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.5rem;
  }

  .cpw-tabela-cartoes tfoot tr {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0.25rem;
    border-bottom: 1px solid #e3e6ea;
  }

  .cpw-tabela-cartoes tfoot th {
    width: auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

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

  html[data-theme="escuro"] .cpw-tabela-cartoes tbody tr.table-danger {
    background: #3a1c1f;
    border-color: #6d1a1a;
  }

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

  html[data-theme="escuro"] .cpw-tabela-cartoes tfoot tr {
    border-color: var(--cpw-dark-borda);
  }

  /* Barra de filtros/ações do histórico e do painel: no celular virava 4-5
     linhas tortas de botões pequenos. Agora uma coluna organizada — grupo de
     abas largo, datas lado a lado, botões com altura de toque. */
  .cpw-barra-filtros > * {
    flex: 1 1 100%;
  }

  .cpw-barra-filtros .btn-group {
    display: flex;
  }

  .cpw-barra-filtros .btn-group > .btn {
    flex: 1 1 0;
  }

  .cpw-barra-filtros .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
  }

  .cpw-barra-filtros > .btn,
  .cpw-barra-filtros > form .btn {
    width: 100%;
  }

  .cpw-filtro-periodo {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem !important;
  }

  /* "Filtrar" sozinho (sem "Limpar" ao lado) ocupa a linha inteira. */
  .cpw-filtro-periodo > .btn:last-child {
    grid-column: 1 / -1;
  }

  /* Painel do Administrador: campo do cliente em cima, botão embaixo. */
  .cpw-novo-pedido-para {
    flex-wrap: wrap;
  }

  .cpw-novo-pedido-para > * {
    flex: 1 1 100%;
    max-width: none !important;
  }

  .cpw-novo-pedido-para > .btn {
    min-height: 2.5rem;
  }

  .cpw-acoes-pedido > * {
    flex: 1 1 100%;
  }

  .cpw-acoes-pedido .btn {
    width: 100%;
    min-height: 2.5rem;
  }

  /* Botões −/+ do card da busca com alvo de toque decente. */
  [data-acao="diminuir-quantidade"],
  [data-acao="aumentar-quantidade"] {
    min-width: 2.25rem;
  }

  /* iOS dá zoom na página ao focar campo com fonte abaixo de 16px — e aqui a
     base cai pra 14px no celular. */
  .form-control,
  .form-select,
  .input-group-sm > .form-control,
  .input-group-sm > .form-select {
    font-size: 16px;
  }
}

/* 10/09/2026: busca de Clientes — largura mínima só onde cabe (antes os 320px
   fixos estouravam em celular de 320px). */
@media (min-width: 576px) {
  .cpw-busca-clientes {
    min-width: 320px;
  }
}

/* 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);
}

/* 09/09/2026 (bug real reportado pelo usuário — no histórico de pedidos, os
   botões laranja ficavam com o texto ilegível no tema escuro): esta regra
   genérica de link era `a` puro, com especificidade (0,1,2) — maior que a de
   qualquer `.btn-*` sozinha (0,1,0) — então TODO link estilizado como botão
   (`<a class="btn btn-primary">`, usado em "Novo pedido", "Todos", "Ver",
   "Voltar"...) recebia o laranja de link. No .btn-primary isso virava laranja
   sobre laranja, invisível. O `:not(.btn)` tira os botões da regra e deixa
   cada `.btn-*` valer igual ao tema claro (que já tem contraste correto);
   `.btn-link`, que não pinta fundo nenhum, ganha a cor de link logo abaixo.
   Havia uma correção pontual pro card de login (`.cpw-login-card a.btn-primary`,
   03/08/2026) que virou redundante, mas continua lá por ser inofensiva. */
html[data-theme="escuro"] a:not(.btn) {
  color: #ff9142;
}

html[data-theme="escuro"] a:not(.btn):hover {
  color: #ffab6b;
}

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

html[data-theme="escuro"] .btn-link:hover,
html[data-theme="escuro"] .btn-link:focus {
  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);
}