:root{
  --bg:#0b1220; --card:#111827; --muted:#6b7280; --text:#e5e7eb;
  --primary:#60a5fa; --accent:#f59e0b; --danger:#f87171;
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
}

/* ===== Layout base ===== */
.container{ max-width:1100px; margin:0 auto; padding:24px }
.header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.brand{ display:flex; gap:12px; align-items:center }

/* Logo usando imagem (em vez de gradiente) */
.brand .logo{
  width:50px; height:50px; border-radius:12px; display:inline-block;
  background:none;
  background-image:url('favicon2.png');
  background-repeat:no-repeat; background-size:contain; background-position:center;
  background-color:#fff;
}

.card{
  background:var(--card); border:1px solid #1f2937; border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.25); padding:20px;
}

.grid{ display:grid; gap:16px }
.grid.cols-2{ grid-template-columns:repeat(2,1fr) }
.grid.cols-4{ grid-template-columns:repeat(4,1fr) }


/* grade de 6 colunas p/ os 6 cards dos status */
.grid.cols-6{ grid-template-columns:repeat(6,1fr) }

/* responsivo (ajuste como preferir) */
@media (max-width:1100px){ .grid.cols-6{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:640px){  .grid.cols-6{ grid-template-columns:repeat(2,1fr) } }


@media (max-width:900px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){
  .grid.cols-2,.grid.cols-4{ grid-template-columns:1fr }
  .header{ flex-direction:column; gap:12px; align-items:flex-start }
}

h1{ margin:.2em 0 .4em; font-size:28px }
h3{ margin:.2em 0 .4em; color:#cbd5e1 }
.muted{ color:var(--muted) }
.small{ font-size:12px; color:#9ca3af }
.hidden{ display:none!important }
.footer{ margin-top:20px; color:#94a3b8; font-size:12px; text-align:center }
hr.sep{ border:none; border-top:1px solid #263147; margin:16px 0 }
.tag{ font-size:12px; color:#9ca3af }

.input,select,textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a344a;
  background:#0f172a; color:var(--text); outline:none;
}
.input:focus{ border-color:#3759a8 }

.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #2b3753; background:#0e172a; color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn.primary{ background:linear-gradient(135deg,#2563eb,#60a5fa); border:none }
.btn.accent{ background:linear-gradient(135deg,#d97706,#f59e0b); border:none; color:#0b0f1a }
.btn.danger{ background:linear-gradient(135deg,#b91c1c,#f87171); border:none }

/* ===== Tabelas ===== */
.table{ width:100%; border-collapse:collapse }
.table th,.table td{ padding:10px; border-bottom:1px solid #233049; text-align:left }
.table th{ color:#cbd5e1; font-weight:600 }

/* ===== Barra fixa do carrinho (4 cantos arredondados) ===== */
.sticky-bar{
  position:sticky; bottom:0; left:0; right:0;
  background:#0c1323; border-top:1px solid #22314d;
  padding:12px; border-radius:16px;  /* quatro cantos */
  display:flex; justify-content:space-between; align-items:center;
}

/* Destaque ao adicionar item */
.sticky-bar.flash{
  box-shadow:0 0 0 3px rgba(245,158,11,.75) inset; /* laranja mais chamativo */
  transition:box-shadow .25s ease;
}
/* Efeito bump no contador e subtotal */
#cartCount.bump, #cartSubtotal.bump{ animation:cart-bump 280ms ease-out }
@keyframes cart-bump{ 0%{transform:scale(1)} 35%{transform:scale(1.25)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){
  .sticky-bar.flash{ box-shadow:none }
  #cartCount.bump,#cartSubtotal.bump{ animation:none }
}

/* ===== Catálogo: estilo “quadradinhos” ===== */
.catalog-header{
  font-weight:800; color:#ff3b3b; font-size:18px; margin:18px 0 12px;
  text-align:center; letter-spacing:.5px;
}

.catalog-grid{ display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:1024px){ .catalog-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:768px){ .catalog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:480px){ .catalog-grid{ grid-template-columns:1fr } }

.catalog-item{
  border:1px solid #111; background:#ffffff; color:#111827; padding:10px; border-radius:8px;
  display:flex; flex-direction:column;
}
.catalog-item .sku{ font-weight:800; margin-bottom:6px; color:#003366 }
.catalog-item img{
  width:100%; height:120px; object-fit:contain; background:#ffffff;
  border:1px dashed #cbd5e1; border-radius:6px; margin:6px 0;
}
.catalog-item .meta{ display:flex; flex-direction:column; flex:1 1 auto }
.catalog-item .desc{
  color:#111827; font-size:.9rem; margin-bottom:4px; word-break:break-word;
}
.catalog-item .app{ font-size:.8rem; color:#6b7280; font-style:italic; margin-bottom:6px; white-space:pre-wrap }
.catalog-item .bottom{ margin-top:12px }
.catalog-item .unit-price{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px }
.catalog-item .unit-price .price{ font-weight:800 }
.catalog-item .actions{ display:flex; gap:8px; align-items:center }
.catalog-item .actions .input{ width:64px; text-align:center }

/* Inputs numéricos maiores (catálogo e revisão) */
#revTable input[type=number], .catalog-item input[type=number]{
  width:70px!important; min-width:70px; text-align:center;
  color:#111827; background:#ffffff; border:1px solid #cbd5e1; border-radius:6px;
}

/* Espaçamentos entre seções do catálogo */
#catalogContainer .catalog-header{ margin-top:22px }
#catalogContainer .catalog-grid{ margin-bottom:8px }

/* ===== Catálogo: barra de filtros ===== */
#catalogBar{
  display:grid;
  grid-template-columns:200px 1fr 220px 150px;
  grid-template-areas:
    "scope search sort page"
    "actions actions . .";
  align-items:end; column-gap:12px; row-gap:8px; margin-bottom:8px;
}
#qScope{ grid-area:scope }  #q{ grid-area:search }  #sortSel{ grid-area:sort }  #pageSize{ grid-area:page }
#actionsBar{ grid-area:actions; display:flex; gap:8px }
#q{ width:100%; min-width:260px; max-width:60vw }
#catalogBar .btn{ white-space:nowrap }
@media (max-width:1100px){
  #catalogBar{
    grid-template-columns:1fr;
    grid-template-areas:"scope" "search" "sort" "page" "actions";
  }
  #q{ max-width:100% }
}

/* ===== Botão “Voltar ao topo” ===== */
.to-top{
  position:fixed; right:16px; bottom:96px; /* JS ajusta para ficar acima da sticky-bar */
  width:40px; height:40px; border-radius:999px;
  background:rgba(59,130,246,.9); color:#fff; border:1px solid rgba(255,255,255,.15);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:50;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.to-top:hover{ filter:brightness(1.05) }
.to-top:active{ transform:translateY(7px) scale(.98) }
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0) }
@media (prefers-reduced-motion:reduce){
  .to-top, .to-top:active{ transition:none; transform:none }
}

/* ===== Wrapper de tabela: permite rolagem só quando realmente necessário ===== */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
/* sem min-width aqui para não forçar rolagem em telas pequenas */

/* =========================================================
   MEUS PEDIDOS (My Orders) — alinhar com Admin Orders
   ========================================================= */

/* Desktop: mesmo “zoom”/respiro do Admin */
#myOrdersTable{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
#myOrdersTable th,#myOrdersTable td{
  padding:12px;
  border-bottom:1px solid #233049;
  text-align:left;
}
#myOrdersTable .badge{ font-size:12px; padding:2px 8px }













/* ===== Meus Pedidos — versão mobile (cartões) ===== */
@media (max-width:520px){
  .container{ padding:16px }
  h1{ font-size:24px }

  /* Tabela em “linhas-cartão” com espaçamento vertical */
  #myOrdersTable{
    width:100%;
    table-layout:auto;
    font-size:14px;
    border-collapse:separate;      /* permite espaçamento entre linhas */
    border-spacing:0 10px;         /* gap vertical entre pedidos */
  }

  /* Cabeçalho compacto */
  #myOrdersTable thead th{
    padding:8px 10px;
  }

  /* Remove a borda padrão das células (vamos usar borda do “cartão”) */
  #myOrdersTable th, #myOrdersTable td{
    padding:10px;
    white-space:nowrap;
    vertical-align:middle;
    border-bottom:none;
  }

  /* Colunas curtas encolhem ao mínimo */
  #myOrdersTable th:nth-child(1), #myOrdersTable td:nth-child(1), /* # */
  #myOrdersTable th:nth-child(3), #myOrdersTable td:nth-child(3), /* Itens */
  #myOrdersTable th:nth-child(4), #myOrdersTable td:nth-child(4), /* Subtotal */
  #myOrdersTable th:nth-child(5), #myOrdersTable td:nth-child(5), /* Status */
  #myOrdersTable th:nth-child(6), #myOrdersTable td:nth-child(6)  /* Ações */
  { width:1%; }

  /* Data usa o espaço restante */
  #myOrdersTable th:nth-child(2), #myOrdersTable td:nth-child(2){ width:auto }

  /* Data e hora empilhadas */
  .dt{ display:flex; flex-direction:column; line-height:1.15 }
  .dt .date{ font-weight:700 }
  .dt .time{ font-size:12px; opacity:.85 }

  .badge{ font-size:11px; padding:2px 8px }

  /* Esconde a coluna Ações (6ª) da primeira linha (botões vão na .row-actions) */
  #myOrdersTable th:nth-child(6),
  #myOrdersTable td:nth-child(6){
    display:none;
  }

  /* ===== Cartão: linha principal ===== */
  #myOrdersTable tbody tr.order-main td{
    background:#0f172a;
    border:1px solid #22314d;
  }
  /* cantos superiores arredondados: 1ª e 5ª células (a 6ª some no mobile) */
  #myOrdersTable tbody tr.order-main td:first-child{
    border-top-left-radius:12px;
    /* faixa lateral de destaque (accent) */
    box-shadow:inset 4px 0 0 var(--accent);
  }
  #myOrdersTable tbody tr.order-main td:nth-child(5){
    border-top-right-radius:12px;
  }

  /* ===== Cartão: linha de ações (parte de baixo) ===== */
  #myOrdersTable tr.row-actions td{
    background:#0f172a;
    border:1px solid #22314d;
    border-top:none;               /* gruda visualmente na linha de cima */
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    padding:10px 12px 12px;
    box-shadow:0 8px 18px rgba(0,0,0,.20); /* leve sombra do cartão */
  }

  /* Ações empilhadas para toque fácil */
  #myOrdersTable .actions{
    display:flex; flex-direction:column; gap:6px;
  }
  #myOrdersTable .actions .btn{
    padding:6px 10px; font-size:13px; width:100%;
  }
}


















/* Fallback opcional para telas MUITO estreitas (se quiser rolagem controlada) */
@media (max-width:360px){
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  /* .table-wrap .table{ min-width:560px; }  <- habilite se quiser forçar largura mínima */
}

/* ===== Mobile tuning geral (<=480px) ===== */
@media (max-width:480px){
  .container{ padding:12px }
  h3{ font-size:16px }
  .small{ font-size:11px }
  .btn{ padding:8px 10px; border-radius:10px; font-size:14px }

  .table{ font-size:13px }
  .table th,.table td{ padding:8px }

  /* Sticky-bar com margem para respirar no mobile */
  .sticky-bar{ margin:8px; border-radius:16px }
}


/* ===== Catálogo: ordem e tamanhos dos campos de busca ===== */
#catalogBar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 1) Texto "Buscar" */
#catalogBar #q{
  order: 0;
  flex: 1 1 360px;
  min-width: 220px;
}

/* 2) Dropdown "Onde buscar" (Todos os campos / Código / etc.) */
#catalogBar #qScope{
  order: 1;
  flex: 0 0 220px;
  max-width: 300px;
}

/* 3) Botões [Buscar] e [Limpar] juntos */
#catalogBar #actionsBar{
  order: 2;
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* 4) Itens por página vem por último */
#catalogBar #pageSize{
  order: 3;
  flex: 0 0 180px;
}

/* ===== Mobile ===== */
@media (max-width: 640px){
  /* Campo de texto ocupa a linha toda */
  #catalogBar #q{ flex-basis: 100%; }

  /* Dropdown numa linha seguinte */
  #catalogBar #qScope{ flex: 1 1 48%; }

  /* Botões logo depois do dropdown (linha cheia) */
  #catalogBar #actionsBar{ flex-basis: 100%; }

  /* Itens/página por último */
  #catalogBar #pageSize{ flex: 1 1 48%; }
}

/* ===== Miniatura no SKU (Revisão & Envio) ===== */
#revTable td:first-child{
  vertical-align: top;               /* SKU + thumb ficam “no alto” */
}

#revTable .sku-cell{
  line-height: 1.05;
  white-space: nowrap;               /* evita quebrar o SKU */
}

#revTable .sku-code{
  display: block;
  font-weight: 700;
  margin-bottom: 2px;                /* “joga o código um pouco pra cima” */
}





/* A imagem tenta ocupar toda a LARGURA da coluna do SKU,
   mas respeita ALTURA MÁXIMA de 60px (sem distorcer). */
#revTable .sku-thumb{
  display: block;
  width: 100%;            /* ocupa a largura disponível da coluna */
  height: auto;           /* altura proporcional */
  max-height: 60px;       /* não passa da altura da linha */
  object-fit: contain;    /* mantém proporção dentro das restrições */
  image-rendering: -webkit-optimize-contrast;
  margin: 0 auto;         /* centra quando a largura final for menor */
  opacity: .95;
}






@media (max-width:520px){
  #revTable .sku-thumb{ height: 24px; } /* ainda menor no celular */
}


/* ===== Mobile: SKU ocupa largura real e a thumb acompanha ===== */
@media (max-width: 520px){
  /* Colunas com largura previsível 
  #revTable{ table-layout: fixed; width: 100%; }*/

  /* Largura da coluna do SKU (ajuste fino à vontade) */
  #revTable th:first-child,
  #revTable td:first-child{
    width: 120px;   /* experimente 110–140px conforme seu layout */
    max-width: 140px;
  }

  /* Deixa a célula poder expandir (o nowrap encolhia demais) */
  #revTable .sku-cell{
    white-space: normal;
  }

  /* Thumb usa toda a largura da coluna, respeitando altura máx. */
  #revTable .sku-thumb{
    width: 100%;
    height: auto;
    max-height: 60px;   /* se quiser maior no cel, troque p/ 72px */
    object-fit: contain;
  }
}


/* --- Overlay de processamento global --- */
.busy {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 9999;
  backdrop-filter: blur(1px);
}
.busy .spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.busy .label {
  color: #fff;
  font-weight: 600;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================
   CATÁLOGO IMPRESSO (print-catalog) — integrado ao SPA
   Todas as classes prefixadas com pc-* para evitar conflitos
   =========================================================== */

/* Variáveis do grid de impressão */
#viewPrintCatalog {
  --pc-gap-h: 0mm;
  --pc-gap-v: 4mm;
  --pc-cell-w: 47mm;
  --pc-cell-h: 41.5mm;
  --pc-line-width: 80%;
  --pc-line-font: 10px;
  --pc-line-pad-y: 4px;
  --pc-line-pad-x: 8px;
  --pc-line-radius: 8px;
  --pc-line-gap: 10px;
  --pc-line-margin-y: 1px;
}

/* Painéis e utilitários locais */
#viewPrintCatalog .pc-panel { background:#111827; border:1px solid #1f2937; border-radius:14px; padding:14px; }
#viewPrintCatalog .pc-muted { color:#94a3b8; }
#viewPrintCatalog .pc-row   { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#viewPrintCatalog .pc-col   { display:flex; flex-direction:column; gap:6px; }

/* Cabeçalho da view (título + botão Voltar) */
#viewPrintCatalog .pc-header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
#viewPrintCatalog .pc-header h1 { margin:0; }

/* Banner de aviso (Passo 0) */
#viewPrintCatalog .pc-warn {
  background:#fef3c7; border:1px solid #fcd34d; color:#92400e;
  padding:10px 14px; border-radius:8px; margin-bottom:12px;
  font-size:14px; font-weight:600; text-align:center;
}

/* Status da geração: linha horizontal quando visível */
#viewPrintCatalog #pcGenStatus { display:flex; align-items:center; gap:8px; }

/* Utilitários de espaçamento dentro dos passos */
#viewPrintCatalog .pc-mt-8  { margin-top:8px;  }
#viewPrintCatalog .pc-mt-10 { margin-top:10px; }
#viewPrintCatalog .pc-mt-20 { margin-top:20px; }
#viewPrintCatalog .pc-mb-6  { margin-bottom:6px;  }
#viewPrintCatalog .pc-mb-8  { margin-bottom:8px;  }
#viewPrintCatalog .pc-mb-10 { margin-bottom:10px; }
#viewPrintCatalog .pc-gap-6 { gap:6px; }
#viewPrintCatalog .pc-row-top  { align-items:flex-start; }
#viewPrintCatalog .pc-col-grow { flex:1 1 260px; }
#viewPrintCatalog .pc-tight      { margin:0 0 8px 0; }
#viewPrintCatalog .pc-tight-list { margin:0 0 8px 16px; }

/* Botões do wizard */
#viewPrintCatalog .pc-btn { background:#0e172a; color:#e5e7eb; border:1px solid #2a344a; border-radius:10px; padding:8px 12px; cursor:pointer; }
#viewPrintCatalog .pc-btn:disabled { opacity:.5; cursor:not-allowed; }
#viewPrintCatalog .pc-btn.pc-primary { background:#1f2937; border-color:#334155; }
#viewPrintCatalog .pc-btn.pc-ghost   { background:transparent; border-color:#2a344a; }

/* Inputs do wizard */
#viewPrintCatalog input[type="text"],
#viewPrintCatalog input[type="number"],
#viewPrintCatalog textarea {
  background:#0b1220; color:#e5e7eb; border:1px solid #2a344a; border-radius:8px; padding:6px 8px;
}
#viewPrintCatalog .pc-num { width:100px; }
#viewPrintCatalog textarea { min-height:70px; resize:vertical; }
#viewPrintCatalog #pcMarkupPctInput:disabled { opacity:.6; cursor:not-allowed; }

/* Wizard — cada passo é o próprio card visual */
#viewPrintCatalog .pc-wizard-step { display:none; }
#viewPrintCatalog .pc-wizard-step.active {
  display:block;
  background:#0c1220; border:1px solid #1f2937; border-radius:16px; padding:18px;
}
#viewPrintCatalog .pc-wizard-step > h2 { margin:0 0 12px 0; }
#viewPrintCatalog .pc-wizard-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#viewPrintCatalog .pc-choice { padding:20px; border:1px solid #2a344a; border-radius:16px; background:#0b1220; cursor:pointer; }
#viewPrintCatalog .pc-choice h3 { margin:0 0 6px 0; }
#viewPrintCatalog .pc-choice:hover { background:#0e172a; }

/* Topbar fixa (aparece nos passos 1, 2, 3) */
#viewPrintCatalog .pc-wizard-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(0deg, rgba(11,18,32,0.98), rgba(11,18,32,0.98));
  border:1px solid #1f2937;
  border-radius:14px;
  padding:10px 14px;
  margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  backdrop-filter: blur(4px);
}
#viewPrintCatalog .pc-wizard-topbar .pc-left { display:flex; gap:8px; align-items:center; }
#viewPrintCatalog .pc-wizard-topbar .pc-right { display:flex; gap:8px; align-items:center; }
#viewPrintCatalog .pc-wizard-topbar .pc-step-label { font-weight:700; }

/* Badge */
#viewPrintCatalog .pc-badge { display:inline-block; background:#0b3b6f; border:1px solid #1d4ed8; color:#dbeafe; padding:2px 6px; border-radius:8px; font-size:11px; }

/* Progresso Imagens */
#viewPrintCatalog .pc-progress-wrap { display:none; align-items:center; gap:6px; }
#viewPrintCatalog .pc-progress { height:8px; width:220px; background:#1f2937; border:1px solid #334155; border-radius:9999px; overflow:hidden; }
#viewPrintCatalog .pc-progress .pc-bar { height:100%; width:0%; background:#60a5fa; transition:width .2s ease; }

/* Lista de linhas */
#viewPrintCatalog .pc-lines-list { border:1px dashed #2a344a; border-radius:10px; padding:8px; max-height:none; height:auto; overflow:visible; position:relative; transition: height .25s ease; }
#viewPrintCatalog .pc-lines-list.is-collapsed { height:0; overflow:hidden; }
#viewPrintCatalog .pc-line-row { display:flex; align-items:center; gap:var(--pc-line-gap); padding:var(--pc-line-pad-y) var(--pc-line-pad-x); border:1px solid #22304a; border-radius:var(--pc-line-radius); background:#0c152a; margin:var(--pc-line-margin-y) 0; cursor:pointer; user-select:none; width:var(--pc-line-width); font-size:var(--pc-line-font); }
#viewPrintCatalog .pc-line-row:hover { background:#0e172a; }
#viewPrintCatalog .pc-line-row input[type=checkbox]{ pointer-events:auto; }
#viewPrintCatalog .pc-selection-box{ position:absolute; border:1px dashed #93c5fd; background:rgba(96,165,250,.15); pointer-events:none; z-index:2; }

/* ========== PÁGINAS A4 (impressão) ========== */
@page { size: A4 portrait; margin: 0; }

#viewPrintCatalog .pc-page { page-break-after:always; background:#fff; color:#111; width:210mm; height:297mm; margin:0 auto 16px auto; position:relative; overflow:hidden; }
#viewPrintCatalog .pc-page-inner { box-sizing:border-box; height:100%; padding:12mm; display:block; }

/* Rodapé */
#viewPrintCatalog .pc-footer {
  position:absolute;
  bottom:6mm; left:12mm; right:12mm;
  font-size:9px; color:#555;
  display:flex; justify-content:space-between; align-items:center;
}
#viewPrintCatalog .pc-footer .pc-footer-left { text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70%; }
#viewPrintCatalog .pc-footer .pc-footer-right { text-align:right; }

/* Selo de versão */
#viewPrintCatalog .pc-version-badge {
  position:absolute;
  top:6mm; right:12mm;
  font-size:9px; line-height:1;
  color:#111;
  background:#fafbfc;
  border:1px solid #d8dee7;
  border-radius:6px;
  padding:2px 6px;
}

/* Capa/Contracapa e páginas em branco */
#viewPrintCatalog .pc-fullpage-img { position:absolute; inset:0; width:210mm; height:297mm; object-fit:cover; }
#viewPrintCatalog .pc-blank .pc-page-inner { padding:0; }

/* Índice (duas colunas) */
#viewPrintCatalog .pc-index {
  display:flex; flex-direction:column; height:100%; box-sizing:border-box; padding-bottom:18mm;
}
#viewPrintCatalog .pc-index h2 { margin:0 0 4px 0; color:#111; font-size:15px; text-align:center; }
#viewPrintCatalog .pc-index-cols {
  display:grid; grid-template-columns:1fr 1fr; column-gap:8mm; flex:1;
}

/* Só na tela: trava o grid no limite do flex:1 pra evitar que pixels
   fracionários estiquem o conteúdo por cima do rodapé. Impressão já
   renderiza em mm exatos, então não precisa (e não deve: overflow:hidden
   no print cortaria a última linha por arredondamento). */
@media screen {
  #viewPrintCatalog .pc-index { min-height:0; }
  #viewPrintCatalog .pc-index-cols { min-height:0; overflow:hidden; }
}
#viewPrintCatalog .pc-index-col  { font-size:10px; line-height:1.4; display:flex; flex-direction:column; gap:2.7px; }
#viewPrintCatalog .pc-index-row  { display:flex; align-items:center; gap:6px; padding:0; border-bottom:none; }
#viewPrintCatalog .pc-index-txt  { flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#viewPrintCatalog .pc-index-pg   { flex:0 0 auto; font-weight:700; }
#viewPrintCatalog .pc-pg-badge{ display:inline-block; padding:0 5px; line-height:1.3; border:1px solid #d8dee7; border-radius:5px; background:#fafbfc; color:#111; font-weight:700; font-size:8px; }

/* Grid e dimensões (miolo 4x6) */
#viewPrintCatalog .pc-grid-wrap{
  position: relative;
  width:  calc(4 * var(--pc-cell-w) + 3 * var(--pc-gap-h));
  height: calc(6 * var(--pc-cell-h) + 5 * var(--pc-gap-v) + (3 * var(--pc-gap-v) / 2));
  padding: var(--pc-gap-v) 0 calc(var(--pc-gap-v)/2) 0;
  margin: 0 auto;
}
#viewPrintCatalog .pc-grid24 {
  position: relative;
  display:grid;
  grid-template-columns: repeat(4, var(--pc-cell-w));
  grid-template-rows: repeat(6, var(--pc-cell-h));
  gap: var(--pc-gap-v) var(--pc-gap-h);
  width: 100%;
  height: calc(6 * var(--pc-cell-h) + 5 * var(--pc-gap-v));
}

#viewPrintCatalog .pc-line-label{
  position:absolute; left:0; width:100%; height: var(--pc-gap-v);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; font-size:10px; color:#c00; line-height:1; pointer-events:none;
}

/* Card produto (miolo) */
#viewPrintCatalog .pc-card { background:#fff; border:1px solid #9ca3af; border-radius:3px; box-sizing:border-box; padding:0mm 1mm 0mm 1mm; display:flex; flex-direction:column; overflow:hidden; color:#111; font-size:11px; }
#viewPrintCatalog .pc-placeholder { visibility:hidden; }
#viewPrintCatalog .pc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.2mm; }
#viewPrintCatalog .pc-sku { font-weight:700; font-size:10.5px; color:#0a2540; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#viewPrintCatalog .pc-price { font-weight:800; font-size:11px; white-space:nowrap; line-height:1; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
#viewPrintCatalog .pc-unit  { font-size:7px; font-weight:normal; display:block; margin-top:0.2mm; }
#viewPrintCatalog .pc-imgbox{ flex: 0 0 auto; width:100%; height:22mm; display:flex; align-items:center; justify-content:center; margin-bottom:1mm; }
#viewPrintCatalog .pc-imgbox img{ max-width:100%; max-height:100%; object-fit:contain; background:#fff; border:0; }
#viewPrintCatalog .pc-name { font-size:9.5px; line-height:1.25; margin-bottom:0.6mm; text-align:center; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#viewPrintCatalog .pc-app  { font-size:8px; color:#555; line-height:1.2; text-align:center; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Índice remissivo (7 colunas) */
#viewPrintCatalog .pc-remissivo { padding-bottom:12mm; }
#viewPrintCatalog .pc-remissivo h2 { margin:0 0 3mm 0; text-align:center; font-size:10px; line-height:1.1; color:#111; }
#viewPrintCatalog .pc-rem-cols { display:grid; grid-template-columns: repeat(7, 1fr); gap:1mm 3mm; font-size:6.25px; line-height:1.15; }
#viewPrintCatalog .pc-rem-col { display:flex; flex-direction:column; gap:1px; }
#viewPrintCatalog .pc-rem-row { display:flex; justify-content:space-between; align-items:center; gap:1mm; border-bottom:none; padding:0; white-space:nowrap; }
#viewPrintCatalog .pc-rem-sku { font-weight:600; color:#111; }
#viewPrintCatalog .pc-rem-pg  { font-weight:700; font-size:8px; color:#000; }

/* ====== RESPONSIVO (MOBILE) ====== */
@media (max-width: 768px) {
  #viewPrintCatalog .pc-wizard-choices { grid-template-columns:1fr; gap:10px; }

  #viewPrintCatalog #pcStep1 .pc-row { flex-direction:column; align-items:stretch; gap:10px; }
  #viewPrintCatalog #pcStep1 .pc-col { width:100%; }
  #viewPrintCatalog input[type="text"],
  #viewPrintCatalog input[type="number"],
  #viewPrintCatalog textarea { width:100%; font-size:16px; }
  #viewPrintCatalog .pc-num { width:100%; max-width:140px; }

  #viewPrintCatalog .pc-wizard-topbar { padding:8px 10px; flex-wrap:wrap; gap:6px; }
  #viewPrintCatalog .pc-wizard-topbar .pc-right,
  #viewPrintCatalog .pc-wizard-topbar .pc-left { width:100%; justify-content:space-between; }

  #viewPrintCatalog .pc-line-row { width:100%; font-size:12px; padding:10px 12px; gap:12px; }
  #viewPrintCatalog .pc-line-row input[type=checkbox]{ width:18px; height:18px; }

  #viewPrintCatalog .pc-progress { width:100%; }

  #viewPrintCatalog #pcStep4 .pc-row { flex-direction:column; align-items:stretch; }
  #viewPrintCatalog #pcStep4 .pc-row .pc-btn { width:100%; }
}

/* ====== IMPRESSÃO ====== */
@media print {
  /* Fundo branco global */
  html, body { background:#fff !important; color:#111 !important; margin:0 !important; padding:0 !important; }

  /* Container: mantém visível mas limpa estilos */
  .container { max-width:none !important; margin:0 !important; padding:0 !important; background:#fff !important; }

  /* Esconde TUDO dentro do container exceto viewPrintCatalog */
  .container > *:not(#viewPrintCatalog) { display:none !important; }

  /* Esconde elementos fora do container */
  #toTopBtn, #revBarMobile, #lightbox, #busy,
  #offlineBanner, #updateBanner { display:none !important; }

  /* viewPrintCatalog: visível, limpo */
  #viewPrintCatalog { display:block !important; padding:0 !important; margin:0 !important; border:none !important; box-shadow:none !important; background:#fff !important; }

  /* Esconde wizard e controles dentro */
  #viewPrintCatalog .pc-wizard-topbar,
  #viewPrintCatalog .pc-header,
  #viewPrintCatalog #pcWizard,
  #viewPrintCatalog #pcGenStatus { display:none !important; }

  /* Mostra só as páginas */
  #viewPrintCatalog .pc-page { margin:0; display:block !important; }
  #pcPagesRoot { display:block !important; }
}