/* ============================================================================
   cdSync - estilos globais (mobile-first)
   ============================================================================ */

:root {
  --cd-azul: #1656a8;
  --cd-azul-escuro: #0d3f7c;
  --cd-verde: #1a8f4c;
  --cd-vermelho: #c0392b;
  --cd-laranja: #d98e04;
  --cd-cinza-fundo: #f2f4f7;
  --cd-cinza-borda: #d9dee5;
  --cd-texto: #1f2733;
  --cd-texto-suave: #667085;
  --cd-branco: #ffffff;
  --cd-raio: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cd-cinza-fundo);
  color: var(--cd-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

h3.cd-subtitulo {
  margin: 24px 0 10px;
  font-size: 16px;
  color: var(--cd-texto);
}

/* --- Cabeçalho e navegação -------------------------------------------------- */

.cd-header {
  background: var(--cd-azul);
  color: var(--cd-branco);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 20;
}

.cd-header-titulo { display: flex; flex-direction: column; line-height: 1.25; }
.cd-header-app { font-size: 12px; opacity: 0.85; }
.cd-header-pagina { font-size: 17px; font-weight: 600; }

.cd-header-usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cd-btn-sair {
  color: var(--cd-branco);
  background: rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
}

.cd-nav {
  display: flex;
  overflow-x: auto;
  background: var(--cd-azul-escuro);
  position: sticky;
  top: 52px;
  z-index: 19;
}
.cd-nav a {
  flex: 0 0 auto;
  padding: 10px 14px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.cd-nav a.ativo {
  color: var(--cd-branco);
  border-bottom-color: var(--cd-laranja);
  font-weight: 600;
}

.cd-conteudo {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 48px;
}

/* --- Cards do dashboard ------------------------------------------------------ */

.cd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.cd-card {
  background: var(--cd-branco);
  border: 1px solid var(--cd-cinza-borda);
  border-radius: var(--cd-raio);
  padding: 14px 8px;
  text-align: center;
  text-decoration: none;
  color: var(--cd-texto);
}
.cd-card-valor { font-size: 24px; font-weight: 700; }
.cd-card-label { font-size: 11px; color: var(--cd-texto-suave); margin-top: 4px; }
.cd-card-atencao { border-color: var(--cd-laranja); }
.cd-card-atencao .cd-card-valor { color: var(--cd-laranja); }
.cd-card-erro { border-color: var(--cd-vermelho); }
.cd-card-erro .cd-card-valor { color: var(--cd-vermelho); }

.cd-info-sync { font-size: 13px; color: var(--cd-texto-suave); margin: 8px 0 20px; }

.cd-atalhos { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* --- Botões ------------------------------------------------------------------- */

.cd-btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cd-btn-primario { background: var(--cd-azul); color: var(--cd-branco); }
.cd-btn-secundario { background: var(--cd-branco); color: var(--cd-azul); border: 1px solid var(--cd-azul); }
.cd-btn-grande { width: 100%; padding: 14px; font-size: 16px; font-weight: 600; }
.cd-btn-link { background: none; color: var(--cd-texto-suave); text-decoration: underline; padding: 8px 0; }
.cd-btn-icone { font-size: 20px; padding: 8px 12px; background: var(--cd-branco); border: 1px solid var(--cd-cinza-borda); border-radius: 8px; }
.cd-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Formulários --------------------------------------------------------------- */

.cd-form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cd-form label { font-size: 13px; font-weight: 600; margin-top: 8px; color: var(--cd-texto-suave); }
.cd-form input[type="text"],
.cd-form input[type="password"],
.cd-form input[type="number"],
.cd-form input[type="search"] {
  padding: 12px;
  border: 1px solid var(--cd-cinza-borda);
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  background: var(--cd-branco);
}
.cd-form button { margin-top: 14px; }
.cd-form .cd-busca-barra { margin-bottom: 0; }
.cd-form .cd-busca-barra button { margin-top: 0; }

.cd-form select {
  padding: 12px;
  border: 1px solid var(--cd-cinza-borda);
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  background: var(--cd-branco);
}

/* --- Catálogo (Pedido de Compra) ------------------------------------------------ */

.cd-catalogo-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: center; }
.cd-catalogo-acoes label { font-size: 13px; color: var(--cd-texto-suave); display: flex; align-items: center; gap: 6px; }
.cd-catalogo-acoes input[type="number"] { width: 70px; padding: 6px; border: 1px solid var(--cd-cinza-borda); border-radius: 6px; }
.cd-tabela td small { color: var(--cd-texto-suave); }

/* --- Login ---------------------------------------------------------------------- */

.cd-login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}
.cd-login-caixa {
  background: var(--cd-branco);
  border-radius: var(--cd-raio);
  padding: 28px 22px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.cd-login-titulo { font-size: 20px; margin: 0 0 4px; color: var(--cd-azul); text-align: center; }
.cd-login-subtitulo { font-size: 13px; color: var(--cd-texto-suave); text-align: center; margin: 0 0 18px; }

/* --- Campo com ícone (login/senha) ---------------------------------------------- */

.cd-input-icone { position: relative; }
.cd-input-icone svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: var(--cd-texto-suave);
  pointer-events: none;
}
.cd-input-icone input {
  padding-left: 40px !important;
}
.cd-input-icone-clicavel input { cursor: pointer; background: var(--cd-cinza-fundo); }
.cd-input-icone-clicavel.cd-input-preenchido input {
  background: #eaf2fc;
  border-color: var(--cd-azul);
  color: var(--cd-texto);
  font-weight: 600;
}

/* Variante com o ícone do lado direito (usada no campo "Usuário" do login,
   pra ficar igual ao padrão do Retaguarda Web) */
.cd-input-icone-direita svg { left: auto; right: 12px; }
.cd-input-icone-direita input {
  padding-left: 12px !important;
  padding-right: 40px !important;
}

/* --- Lista de usuários (tela de login) - tela cheia escura, igual ao
   Retaguarda Web: sem moldura de modal, cada usuário é um cartão cinza-claro
   arredondado, ícone à esquerda do nome. -------------------------------- */

.cd-modal-usuarios-conteudo {
  background: transparent;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cd-modal-usuarios-topo {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px 10px;
}
.cd-busca-usuarios {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 12px;
  background: var(--cd-branco);
}
.cd-lista-usuarios {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}
.cd-usuario-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef0f3;
  color: #222833;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 16px;
  cursor: pointer;
}
.cd-usuario-item:active { background: #dde1e6; }
.cd-usuario-item svg { width: 20px; height: 20px; fill: #555f6b; flex-shrink: 0; }
.cd-lista-usuarios .cd-vazio { color: var(--cd-branco); }

/* --- Alertas ---------------------------------------------------------------------- */

.cd-alerta { padding: 10px 12px; border-radius: 8px; font-size: 13px; margin: 10px 0; }
.cd-alerta-erro { background: #fdecea; color: var(--cd-vermelho); }
.cd-alerta-sucesso { background: #e8f6ee; color: var(--cd-verde); }
.cd-alerta-info { background: #eaf2fc; color: var(--cd-azul-escuro); }

/* --- Busca e listas de produto ------------------------------------------------- */

.cd-busca-barra { display: flex; gap: 8px; margin-bottom: 12px; }
.cd-busca-barra input { flex: 1; padding: 12px; border: 1px solid var(--cd-cinza-borda); border-radius: 8px; font-size: 16px; }

.cd-vazio { color: var(--cd-texto-suave); font-size: 13px; text-align: center; padding: 20px 0; }

.cd-lista-produtos, .cd-lista-sugestoes { display: flex; flex-direction: column; gap: 8px; }

.cd-produto-card, .cd-sugestao-item {
  background: var(--cd-branco);
  border: 1px solid var(--cd-cinza-borda);
  border-radius: 8px;
  padding: 10px 12px;
}
.cd-sugestao-item { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cd-sugestao-item span { font-size: 12px; color: var(--cd-texto-suave); }
.cd-sugestao-item:active { background: var(--cd-cinza-fundo); }

.cd-produto-nome { font-weight: 600; margin-bottom: 4px; }
.cd-produto-codigo { font-size: 12px; color: var(--cd-texto-suave); margin-bottom: 8px; }
.cd-produto-estoques { display: flex; gap: 10px; }
.cd-estoque-tag {
  background: var(--cd-cinza-fundo);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
}
.cd-produto-fornecedor {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: -2px 0 10px;
  padding: 6px 10px;
  background: #eaf1fb;
  border-left: 3px solid var(--cd-azul);
  border-radius: 6px;
  font-size: 12px;
  min-width: 0;
}
.cd-produto-fornecedor span { color: var(--cd-texto-suave); flex: 0 0 auto; }
.cd-produto-fornecedor strong {
  color: var(--cd-azul-escuro);
  font-weight: 600;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.cd-produto-blocos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cd-bloco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cd-cinza-fundo);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 0;
}
.cd-bloco-rotulo { font-size: 11px; color: var(--cd-texto-suave); }
.cd-bloco.cd-bloco-cd { background: #e9f0fa; }
.cd-bloco.cd-bloco-cd .cd-bloco-rotulo { color: var(--cd-azul-escuro); }
.cd-bloco-valor { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-indicador-positivo { color: var(--cd-verde); }
.cd-indicador-negativo { color: var(--cd-vermelho); }
@media (max-width: 340px) {
  .cd-produto-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .cd-produto-blocos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- Vínculo de produto (Transferência) ----------------------------------- */
.cd-vinculo-box {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: #fff7e6;
  border: 1px solid #f3d38a;
  border-left: 4px solid var(--cd-laranja);
  border-radius: 8px;
}
.cd-vinculo-titulo { font-size: 12px; font-weight: 600; color: #8a5a00; margin-bottom: 4px; }
.cd-vinculo-destino { font-size: 14px; line-height: 1.35; }
.cd-vinculo-destino span { font-size: 12px; color: var(--cd-texto-suave); }
.cd-vinculo-box label { display: block; margin-top: 8px; }
.cd-vinculo-box input { margin-top: 4px; }
.cd-vinculo-box .cd-btn-link { padding: 6px 0 0; color: #8a5a00; }
.cd-carrinho-vinculo { margin-top: 3px; font-size: 12px; color: #8a5a00; }

/* --- Sub-abas (Transferência x Nota Fiscal Entrada) ------------------------ */
.cd-subabas {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 14px;
  background: #e3e8ef;
  border-radius: 10px;
}
.cd-subaba {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: var(--cd-texto-suave);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.cd-subaba.ativo { background: var(--cd-branco); color: var(--cd-azul); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* --- Nota Fiscal Entrada ---------------------------------------------------- */
.cd-nf-card { cursor: pointer; }
.cd-nf-card:active { background: #f7faff; border-color: var(--cd-azul); }
.cd-nf-card .cd-produto-nome, .cd-nf-cabecalho .cd-produto-nome { font-size: 17px; }
.cd-nf-card .cd-produto-fornecedor, .cd-nf-cabecalho .cd-produto-fornecedor { margin-top: 6px; }
.cd-nf-serie { font-size: 12px; font-weight: 500; color: var(--cd-texto-suave); }
.cd-card-topo .cd-badge { flex: 0 0 auto; margin-top: 2px; }
.cd-bloco-hora { display: block; font-size: 12px; font-weight: 600; color: var(--cd-texto-suave); }
.cd-nf-abrir { margin-top: 10px; text-align: right; font-size: 13px; font-weight: 600; color: var(--cd-azul); }
.cd-nf-voltar { padding-left: 0; margin-bottom: 8px; color: var(--cd-azul); text-decoration: none; font-weight: 600; }
.cd-nf-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.cd-nf-acoes .cd-btn { flex: 1 1 auto; }
.cd-nf-acoes .cd-btn:disabled, .cd-nf-envio .cd-btn:disabled { opacity: .45; cursor: not-allowed; }
.cd-nf-item.cd-sem-selecao { cursor: default; }
.cd-nf-item.cd-sem-selecao .cd-card-check { display: none; }
.cd-nf-envio {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  margin: 14px -16px 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--cd-branco);
  border-top: 1px solid var(--cd-cinza-borda);
  box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
}
.cd-nf-envio .cd-btn { flex: 1 1 0; padding: 12px 8px; font-weight: 600; }

/* --- Card selecionável (Catálogo do Pedido de Compra) - mesmo card da aba
   Estoque, com checkbox; tocar no card inteiro marca/desmarca ------------- */
.cd-card-selecionavel { display: block; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.cd-card-selecionavel.selecionado,
.cd-card-selecionavel:has(.cd-card-check:checked) {
  border-color: var(--cd-azul);
  box-shadow: 0 0 0 2px var(--cd-azul) inset;
  background: #f7faff;
}
.cd-card-topo { display: flex; align-items: flex-start; gap: 10px; }
.cd-card-titulo { flex: 1 1 auto; min-width: 0; }
.cd-card-check {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin: 2px 0 0;
  accent-color: var(--cd-azul);
  cursor: pointer;
}
.cd-barra-selecao {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--cd-branco);
  border-top: 1px solid var(--cd-cinza-borda);
  box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
}
.cd-barra-selecao span { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--cd-azul-escuro); }
.cd-barra-selecao .cd-btn { width: auto; margin: 0; padding: 10px 14px; white-space: nowrap; flex: 0 0 auto; }
body:has(.cd-barra-selecao[style*="flex"]) .cd-conteudo { padding-bottom: 90px; }

.cd-produto-selecionado {
  background: var(--cd-branco);
  border: 1px solid var(--cd-cinza-borda);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.cd-produto-selecionado span { font-size: 12px; color: var(--cd-texto-suave); }

.cd-saldo-detalhado { margin: 0 0 12px; }
.cd-saldo-linha {
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--cd-cinza-fundo);
  margin-bottom: 6px;
}
.cd-saldo-linha strong { color: var(--cd-texto); }
.cd-saldo-linha.cd-saldo-zero { background: #fbe9e7; color: var(--cd-vermelho); }
.cd-saldo-linha.cd-saldo-zero strong { color: var(--cd-vermelho); }

/* --- Toggles (Entrada/Saída, CD/Loja) ------------------------------------------- */

.cd-toggle-grupo { display: flex; gap: 8px; margin-top: 4px; }
.cd-toggle-opcao {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--cd-cinza-borda);
  border-radius: 8px;
  background: var(--cd-branco);
  font-size: 14px;
  cursor: pointer;
}
.cd-toggle-opcao.ativo { background: var(--cd-azul); color: var(--cd-branco); border-color: var(--cd-azul); }

/* --- Transferência: linha de quantidade e carrinho ------------------------------ */

.cd-linha-quantidade { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cd-linha-quantidade .cd-produto-selecionado { flex: 1 1 100%; margin-bottom: 0; }
.cd-linha-quantidade input { flex: 1; padding: 10px; border: 1px solid var(--cd-cinza-borda); border-radius: 8px; font-size: 16px; }

.cd-carrinho { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cd-carrinho-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cd-branco);
  border: 1px solid var(--cd-cinza-borda);
  border-radius: 8px;
  padding: 10px 12px;
}
.cd-carrinho-item > div:first-child { flex: 1; font-size: 14px; }
.cd-carrinho-item span { font-size: 12px; color: var(--cd-texto-suave); }
.cd-carrinho-qtd { font-weight: 700; min-width: 40px; text-align: right; }
.cd-btn-remover { background: none; border: none; color: var(--cd-vermelho); font-size: 16px; cursor: pointer; }

#observacaoTransf {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--cd-cinza-borda);
  border-radius: 8px;
  font-size: 16px;
  margin: 4px 0 14px;
}

/* --- Tabelas (fila de sincronização) --------------------------------------------- */

.cd-tabela-scroll { overflow-x: auto; margin-bottom: 20px; }
.cd-tabela { border-collapse: collapse; width: 100%; font-size: 13px; background: var(--cd-branco); }
.cd-tabela th, .cd-tabela td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cd-cinza-borda);
  text-align: left;
  white-space: nowrap;
}
.cd-tabela th { background: var(--cd-cinza-fundo); font-size: 11px; text-transform: uppercase; color: var(--cd-texto-suave); }

.cd-badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-pendente { background: #fdf1d8; color: var(--cd-laranja); }
.badge-aplicado { background: #e8f6ee; color: var(--cd-verde); }
.badge-parcial { background: #e7effb; color: var(--cd-azul); }
.badge-erro { background: #fdecea; color: var(--cd-vermelho); }

/* --- Modal da câmera --------------------------------------------------------------- */

.cd-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cd-modal-conteudo {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
}
.cd-modal-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.08);
  color: var(--cd-branco);
  font-size: 13px;
}
.cd-btn-fechar { background: none; border: none; color: var(--cd-branco); font-size: 18px; cursor: pointer; }
.cd-modal video { width: 100%; display: block; max-height: 70vh; background: #000; }
.cd-scanner-status { padding: 10px 14px; background: #000; color: #fff; font-size: 14px; text-align: center; }

/* --- Variante clara do modal (perguntas/comprovante sobre fundo branco,
   em vez do fundo preto pensado originalmente pra câmera) --------------- */
.cd-modal-conteudo-clara { background: var(--cd-branco); color: var(--cd-texto); max-height: 85vh; display: flex; flex-direction: column; }
.cd-modal-topo-clara {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--cd-cinza-fundo);
  color: var(--cd-texto);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--cd-cinza-borda);
}
.cd-btn-fechar-claro { background: none; border: none; color: var(--cd-texto-suave); font-size: 20px; cursor: pointer; line-height: 1; }

/* --- Comprovante de transferência (mesmo conteúdo do PDVTransferencia,
   uImpressaoComprovante.pas - fonte monoespaçada, negrito/título/separador
   igual à prévia RichEdit de lá) ------------------------------------------ */
.cd-comprovante {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  color: var(--cd-texto);
}
.cd-comprovante .cdc-linha { white-space: pre-wrap; word-break: break-word; }
.cd-comprovante .cdc-linha:empty:not(.cdc-sep-simples):not(.cdc-sep-duplo) { height: 0.8em; }
.cd-comprovante .cdc-titulo { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 2px; }
.cd-comprovante .cdc-negrito { font-weight: 700; }
.cd-comprovante .cdc-centro { text-align: center; }
.cd-comprovante .cdc-direita { text-align: right; }
.cd-comprovante .cdc-sep-simples { border-top: 1px dashed var(--cd-cinza-borda); margin-top: 6px; padding-top: 6px; }
.cd-comprovante .cdc-sep-duplo { border-top: 2px solid var(--cd-texto); margin-top: 6px; padding-top: 6px; }

@media print {
  body * { visibility: hidden; }
  #comprovanteImprimivel, #comprovanteImprimivel * { visibility: visible; }
  #comprovanteImprimivel {
    position: absolute; left: 0; top: 0; width: 100%;
    max-height: none; overflow: visible; padding: 0;
  }
  /* Solta o modal do comprovante (fixed + max-height 85vh + overflow hidden)
     na impressão - sem isso, comprovante com muitos itens saía cortado,
     só a primeira "tela" ia pro papel. */
  .cd-modal-comprovante,
  .cd-modal-comprovante .cd-modal-conteudo {
    position: static !important;
    max-height: none !important; overflow: visible !important;
    background: none !important; padding: 0 !important;
  }
  /* Com o comprovante aberto, tira do layout (display:none) tudo que não é
     ele - só "visibility:hidden" deixava o resto da página ocupando espaço
     e saíam folhas em branco a mais na impressora. */
  body:has(.cd-modal-comprovante[style*="flex"]) *:not(:has(#comprovanteImprimivel)):not(#comprovanteImprimivel):not(#comprovanteImprimivel *) {
    display: none !important;
  }
  @page { margin: 8mm; }
}

/* --- Telas maiores (tablet / desktop) ------------------------------------------------ */

@media (min-width: 640px) {
  .cd-atalhos { flex-direction: row; }
}

/* ---------- Marca Grandsoft (logo) ---------- */
.cd-login-caixa::before { content: ''; display: block; height: 150px; margin: 0 auto 10px;
  background: url(../../pwa/logo.svg) center / contain no-repeat; }
.cd-header-titulo { padding-left: 46px; min-height: 36px; justify-content: center;
  background: url(../../pwa/g.svg) left center / 36px 36px no-repeat; }

/* comprovante de transferência: botões "imprimir na loja" (cupomSync / etiquetaSync) */
.cd-btn-loja { background: #15803d; color: #fff; border: 1px solid #15803d; }
.cd-msg-loja:empty { display: none; }
.cd-msg-loja .cd-alerta { margin: 0; }

/* botões de etiqueta no card do produto (Estoque / Lançamento) */
.cd-etq-caixa { margin-top: 10px; }
.cd-etq-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-etq-botoes .cd-btn { flex: 1 1 45%; width: auto; margin: 0; text-align: center; text-decoration: none; padding: 10px 8px; font-size: 14px; }
.cd-msg-etq:empty { display: none; }
.cd-msg-etq { margin-top: 8px; }
.cd-msg-etq .cd-alerta { margin: 0; }
.cd-btn-loja:disabled { opacity: .6; }

[hidden] { display: none !important; }

/* card do Estoque: 4 atalhos (etiqueta na loja em linha cheia) */
.cd-etq-botoes .cd-btn-loja { flex-basis: 100%; }

/* Sem zoom por toque duplo no celular (a tela fica estatica); rolagem e toque normal continuam. */
html, body, a, button, input, select, textarea, label, table, td, th, div, span { touch-action: manipulation; }