:root {
  --vermelho: #b5121b;
  --vermelho-escuro: #7d0b12;
  --preto: #111315;
  --texto: #22262b;
  --texto-claro: #6d737b;
  --linha: #dfe2e6;
  --fundo: #eef0f3;
  --branco: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}

.barra-superior {
  min-height: 72px;
  padding: 12px clamp(20px, 4vw, 64px);
  background: var(--preto);
  border-bottom: 4px solid var(--vermelho);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.numero-marca {
  padding: 7px 10px;
  background: var(--vermelho);
  border-radius: 5px;
  font-size: 1.45rem;
  letter-spacing: -0.06em;
}

.situacao {
  color: #d6d8da;
  font-size: 0.875rem;
}

.situacao i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  background: #4ed17d;
  border-radius: 50%;
}

main {
  width: 100%;
  max-width: 1600px;
  margin: auto;
  padding: 26px;
}

.area-trabalho {
  display: grid;
  grid-template-columns: minmax(360px, 510px) 1fr;
  gap: 24px;
  align-items: start;
}

.painel {
  background: var(--branco);
  border: 1px solid #d9dde2;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(13, 17, 23, 0.06);
}

.controles {
  padding: 25px;
}

.titulo-secao {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}

.titulo-secao.compacto {
  margin-top: 24px;
  margin-bottom: 17px;
  padding-bottom: 12px;
}

.titulo-secao > span {
  padding: 6px 8px;
  background: var(--vermelho);
  border-radius: 4px;
  color: var(--branco);
  font-size: 0.8rem;
  font-weight: 800;
}

.titulo-secao h1,
.titulo-secao h2 {
  margin: 0;
  font-size: 1.35rem;
}

.titulo-secao p {
  margin: 4px 0 0;
  color: var(--texto-claro);
  font-size: 0.875rem;
}

label {
  position: relative;
  display: block;
  margin: 14px 0;
  color: #3b3f45;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

input,
select {
  width: 100%;
  height: 43px;
  margin-top: 7px;
  padding: 0 12px;
  background: var(--branco);
  border: 1px solid #cfd4da;
  border-radius: 5px;
  color: #17191c;
  outline: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
}

input:focus,
select:focus {
  border-color: var(--vermelho);
  box-shadow: 0 0 0 3px rgba(181, 18, 27, 0.11);
}

.grade-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.campo-com-botao {
  display: flex;
  gap: 7px;
}

.campo-com-botao button {
  width: 82px;
  margin-top: 7px;
  background: #2e3338;
  border: 0;
  border-radius: 5px;
  color: var(--branco);
  cursor: pointer;
  font-weight: 700;
}

.campo-com-botao button:hover {
  background: var(--vermelho);
}

small {
  display: block;
  margin-top: 5px;
  color: var(--texto-claro);
  font-weight: 400;
  letter-spacing: 0;
}

label em {
  position: absolute;
  right: 11px;
  bottom: 13px;
  color: #7b8188;
  font-style: normal;
  font-weight: 500;
}

.enviar-logotipo {
  min-height: 48px;
  margin-top: 18px;
  padding: 14px;
  border: 1px dashed #aeb4bc;
  border-radius: 5px;
  color: var(--texto-claro);
  cursor: pointer;
}

.enviar-logotipo:hover {
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.enviar-logotipo input {
  display: none;
}

.enviar-logotipo::before {
  content: "+";
  margin-right: 7px;
  color: var(--vermelho);
  font-size: 1rem;
  font-weight: 900;
}

.opcao-logotipo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  margin-top: 28px;
  padding: 8px 10px;
  background: #f7f8f9;
  border: 1px solid #d7dbe0;
  border-radius: 5px;
}

.opcao-logotipo input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--vermelho);
}

.acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.acoes button {
  min-height: 48px;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 800;
}

.botao-principal {
  background: linear-gradient(
    135deg,
    var(--vermelho),
    var(--vermelho-escuro)
  );
  border: 0;
  color: var(--branco);
}

.botao-principal:hover {
  filter: brightness(1.08);
}

.botao-secundario {
  background: var(--branco);
  border: 1px solid #23272b;
  color: #17191c;
}

.botao-secundario:hover {
  background: #f2f3f4;
}

.aviso {
  margin: 17px 0 0;
  padding-left: 10px;
  border-left: 3px solid #c5c8cc;
  color: #747a81;
  font-size: 0.75rem;
  line-height: 1.45;
}

.area-visualizacao {
  min-width: 0;
}

.cabecalho-visualizacao,
.legenda {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cabecalho-visualizacao {
  margin: 4px 0 14px;
}

.cabecalho-visualizacao > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cabecalho-visualizacao span {
  color: var(--vermelho);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.cabecalho-visualizacao strong {
  font-size: 1rem;
}

.ampliacao {
  padding: 7px 10px;
  background: var(--branco);
  border: 1px solid #d5d8dc;
  border-radius: 4px;
  font-size: 0.75rem;
}

.papel {
  width: 100%;
  min-height: 690px;
  padding: 25px;
  overflow: auto;
  background: var(--branco);
  border: 1px solid #cfd3d8;
  box-shadow: 0 12px 30px rgba(10, 16, 22, 0.1);
}

.lista-etiquetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-content: start;
  gap: 8px;
}

.etiqueta {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 3px 7px;
  overflow: hidden;
  padding: 8px;
  background: var(--branco);
  border: 1px dashed #b8bcc1;
  color: #000000;
}

.etiqueta h3 {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.1;
}

.informacoes-produto {
  min-width: 0;
}

.descricao-etiqueta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333333;
  font-size: 8px;
}

.preco-etiqueta {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
}

.logotipo-etiqueta {
  align-self: start;
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
}

.logotipo-pequeno {
  width: 22px;
  height: 22px;
}

.logotipo-medio {
  width: 32px;
  height: 32px;
}

.logotipo-grande {
  width: 44px;
  height: 44px;
}

.logotipo-esquerda {
  grid-column: 1;
  grid-row: 1;
}

.logotipo-centro {
  display: block;
  grid-column: 1 / 3;
  grid-row: 1;
  margin: 0 auto;
}

.logotipo-direita {
  grid-column: 2;
  grid-row: 1;
}

.area-codigo {
  grid-column: 1 / 3;
  overflow: hidden;
  padding: 1px 4px 0;
  text-align: center;
}

.area-codigo svg {
  display: block;
  width: 100%;
  height: 38px;
}

.numero-codigo {
  margin-top: 1px;
  font-family: Consolas, monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.legenda {
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  color: #666666;
  font-size: 0.75rem;
}

.legenda span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legenda i {
  width: 8px;
  height: 8px;
  border-radius: 1px;
}

.cor-preta {
  background: #111111;
}

.cor-vermelha {
  background: var(--vermelho);
}

#mensagem {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: 340px;
  padding: 13px 18px;
  pointer-events: none;
  background: #16191c;
  border-left: 4px solid var(--vermelho);
  border-radius: 4px;
  color: var(--branco);
  opacity: 0;
  transform: translateY(10px);
  transition: 0.2s;
}

#mensagem.mostrar {
  opacity: 1;
  transform: translateY(0);
}

.etiqueta-somente-codigo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5mm;
  border: 0;
}

.etiqueta-somente-codigo.com-guia-recorte {
  border: 1px dashed #777777;
}

.area-codigo-alta-resolucao {
  width: 100%;
  height: 100%;
  padding: 0;
}

.area-codigo-alta-resolucao svg {
  width: 100%;
  height: 100%;
}

.etiqueta-somente-codigo .area-codigo.qr svg {
  width: min(100%, 110mm);
  height: auto;
  max-height: 100%;
}

.atalhos-modulos { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }
.atalhos-modulos a,.atalhos-modulos button { min-height:42px; padding:10px 14px; border:1px solid #cbd0d6; border-radius:6px; background:#fff; color:#252a2f; font:700 .82rem "Segoe UI",Arial,sans-serif; text-decoration:none; cursor:pointer; }
.atalhos-modulos a:first-child,.atalhos-modulos button { border-color:var(--vermelho); color:var(--vermelho); }
.resultado-leitura { margin:14px 0; padding:13px; border:1px solid #d7dce1; border-left:4px solid var(--vermelho); border-radius:6px; background:#fafbfc; }
.resultado-leitura strong { display:block; color:#1c2024; }.resultado-leitura p { margin:6px 0 0; color:#535b63; font-size:.85rem; line-height:1.45; }.resultado-leitura button { margin-top:10px; padding:8px 11px; border:0; border-radius:4px; background:var(--vermelho); color:#fff; font-weight:800; cursor:pointer; }

[hidden] { display: none !important; }
.dados-lote-etiqueta { margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333; font-size: 7px; font-weight: 700; }
.gestao-estoque { margin-top: 28px; padding: 24px; background: var(--branco); border: 1px solid #d9dde2; border-radius: 10px; box-shadow: 0 8px 24px rgba(13,17,23,.06); }
.espelho-estoque { margin-top:28px; padding:24px; background:linear-gradient(135deg,#fff,#f7f8fa); border:1px solid #d9dde2; border-radius:10px; box-shadow:0 8px 24px rgba(13,17,23,.06); }.resumo-financeiro-estoque { min-width:210px; padding:12px 16px; background:#16191c; border-radius:7px; color:#fff; }.resumo-financeiro-estoque span { display:block; color:#d9dde2; font-size:.75rem; }.resumo-financeiro-estoque strong { display:block; margin-top:4px; color:#fff; font-size:1.35rem; }.espelho-wrap { margin-top:18px; overflow:auto; }.tabela-espelho { width:100%; border-collapse:collapse; min-width:780px; background:#fff; }.tabela-espelho th { padding:11px; background:#1c2024; color:#fff; text-align:left; font-size:.75rem; }.tabela-espelho td { padding:12px 11px; border-bottom:1px solid #e1e4e7; font-size:.85rem; }.tabela-espelho td small { display:block; margin-top:3px; color:var(--texto-claro); font-size:.7rem; }.botao-tabela { padding:6px 9px; border:1px solid #b6bbc1; background:#fff; border-radius:4px; cursor:pointer; font-weight:700; }
.titulo-gestao { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--linha); }
.titulo-gestao span { color:var(--vermelho); font-size:.72rem; font-weight:800; letter-spacing:.13em; }.titulo-gestao h2 { margin:5px 0; font-size:1.35rem; }.titulo-gestao p { margin:0; color:var(--texto-claro); font-size:.86rem; }.titulo-gestao button { min-height:46px; padding:10px 16px; border-radius:5px; cursor:pointer; font-weight:800; }
.grade-gestao,.tabelas-gestao { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; margin-top:18px; }.cartao-gestao { padding:18px; border:1px solid #dfe2e6; border-radius:8px; background:#fbfcfd; }.cartao-gestao h3 { margin:0 0 12px; font-size:1rem; }
.indicadores-estoque { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.indicadores-estoque strong { display:block; color:var(--vermelho); font-size:1.55rem; }.indicadores-estoque span { color:var(--texto-claro); font-size:.72rem; line-height:1.2; }.produto-lido { margin:18px 0 0; padding:10px; background:#fff; border-left:3px solid var(--vermelho); color:#42474d; font-size:.84rem; }
.lista-registros { display:grid; gap:8px; max-height:330px; overflow:auto; }.registro { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; background:#fff; border:1px solid #e1e4e7; border-radius:5px; }.registro strong,.registro small { display:block; }.registro strong { font-size:.86rem; }.registro small { margin-top:3px; color:var(--texto-claro); font-size:.73rem; }.registro-acoes { text-align:right; }.registro-acoes b { font-size:.82rem; }.registro-acoes button { margin-top:5px; padding:5px 7px; background:#fff; border:1px solid #aeb4bc; border-radius:4px; cursor:pointer; font-size:.7rem; }.movimento-entrada { color:#16733a; }.movimento-saida { color:var(--vermelho); }.movimento-ajuste { color:#805d00; }.vazio { margin:10px 0; color:var(--texto-claro); font-size:.84rem; }
.pedido-gestao { margin-top:18px; }.titulo-pedido { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }.titulo-pedido h3 { margin:0; }.titulo-pedido p { margin:4px 0 0; color:var(--texto-claro); font-size:.82rem; }.titulo-pedido label { width:min(320px,100%); margin:0; }.fechamento-pedido { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--linha); }.fechamento-pedido strong span { color:var(--vermelho); font-size:1.2rem; }.fechamento-pedido button { min-height:44px; padding:8px 14px; border:0; border-radius:5px; cursor:pointer; font-weight:800; }

@media (max-width: 900px) {
  main {
    padding: 14px;
  }

  .area-trabalho {
    grid-template-columns: 1fr;
  }

  .papel {
    min-height: 450px;
  }

  .barra-superior {
    min-height: 64px;
  }

  .situacao {
    display: none;
  }

  .grade-gestao,.tabelas-gestao { grid-template-columns:1fr; }
  .titulo-pedido,.fechamento-pedido { align-items:stretch; flex-direction:column; }.titulo-pedido label { width:100%; }.fechamento-pedido button { width:100%; }
}

@media (max-width: 520px) {
  .controles {
    padding: 18px;
  }

  .grade-dupla,
  .acoes {
    grid-template-columns: 1fr;
  }

  .papel {
    padding: 10px;
  }

  .lista-etiquetas {
    grid-template-columns: 1fr;
  }

  .marca {
    font-size: 0.85rem;
  }

  .titulo-gestao { align-items:flex-start; flex-direction:column; }.titulo-gestao button { width:100%; }.gestao-estoque { padding:16px; }
}

@media print {
  @page {
    margin: 8mm;
  }

  body {
    background: #ffffff;
  }

  .barra-superior,
  .controles,
  .gestao-estoque,
  .espelho-estoque,
  .atalhos-modulos,
  .cabecalho-visualizacao,
  .legenda,
  #mensagem {
    display: none !important;
  }

  main,
  .area-trabalho,
  .area-visualizacao {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .papel {
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  .lista-etiquetas {
    display: grid !important;
    gap: var(--espaco-impressao, 2mm) !important;
  }

  .etiqueta:not(.etiqueta-somente-codigo),
  .etiqueta-somente-codigo.com-guia-recorte {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px dashed #aaaaaa !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}