/* Catálogo (produtos.js e catalogo.js): lista e ficha do café, tabela de preços, margens, cupons, descontos e o feed
   do Google e da Meta. Só variáveis de cor de demo.css, para o tema escuro valer aqui também. */

/* ---------- ficha do café ---------- */
.cat-volta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); margin-bottom: 10px; }
.cat-volta svg { width: 16px; height: 16px; }
.cat-volta:hover { color: var(--ink); }
.cat-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-cab h2 { font-size: 22px; font-weight: var(--w-display); letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-cab p { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.cat-g { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cat-col { min-width: 0; }
.cat-col > .caixa:first-child { margin-top: 0; }
.cat-inp { height: 34px; width: 108px; text-align: right; padding: 0 10px; font-variant-numeric: tabular-nums; }
.cat-inp-g { width: 100%; max-width: 170px; text-align: left; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }
.cat-falta { border-color: var(--neg); background: var(--neg-bg); }
.cat-fp td, .cat-vars td { vertical-align: middle; }
.cat-fp-acoes { margin-top: 14px; }
.cat-h3 { font-size: 13.5px; font-weight: var(--w-strong); margin: 18px 0 10px; }
/* a lista */
.cat-lista td.pri { min-width: 240px; }
.cat-custo .cat-tot td { border-top: 1px solid var(--hair-2); }
.cat-gtin { font-family: var(--mono); font-size: .86em; letter-spacing: .02em; }
.kpi .cat-gtin { font-size: 15px; }

.cat-fotos { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; gap: 8px; }
.cat-foto { margin: 0; border-radius: var(--r-2); overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 1px var(--hair); aspect-ratio: 1 / 1; }
.cat-foto-1 { grid-row: span 3; aspect-ratio: auto; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.cat-notas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.cat-notas span { font-size: 12.5px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--dica-ink); }
.cat-escala { display: inline-flex; gap: 3px; align-items: center; }
.cat-escala i { width: 18px; height: 6px; border-radius: 3px; background: var(--paper-3); }
.cat-escala i.on { background: var(--accent-ink); }

.cat-lote { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-2); background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--hair-2); }
.cat-lote > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cat-lote small { font-size: 12px; color: var(--ink-3); }
.cat-lote b { font-size: 15px; font-weight: var(--w-strong); color: var(--accent-ink); }
.cat-lote .muted { font-size: 12.5px; }
.cat-lote svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.cat-lote:hover b { text-decoration: underline; }
.cat-lotes { list-style: none; margin: 8px 0 0; padding: 0; }
.cat-lotes li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.cat-lotes li:first-child { border-top: 0; }
.cat-hist { list-style: none; margin: 0; padding: 0; }
.cat-hist li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-2); }
.cat-hist li:first-child { border-top: 0; }
.cat-hist b { color: var(--ink); font-weight: var(--w-strong); }
.cat-hist b.pos { color: var(--pos); } .cat-hist b.neg { color: var(--neg); }
.cat-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cat-mini > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--hair); min-width: 0; }
.cat-mini small { font-size: 12px; color: var(--ink-3); }
.cat-mini b { font-size: 18px; font-weight: var(--w-strong); }
.cat-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cat-checks .check { align-items: center; }

.cat-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--r-2); background: var(--warn-bg); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.cat-aviso > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--warn); }
.cat-aviso b { color: var(--ink); font-weight: var(--w-strong); }
.nota.warn { color: var(--warn); }

/* ---------- tabela de preços ---------- */
.cat-grade td.r b { font-weight: var(--w-strong); }
.cat-grade .sec .pos, .cat-grade .sec .warn, .cat-grade .sec .neg { font-weight: var(--w-strong); }
.cat-risca { text-decoration: line-through; color: var(--ink-3); font-weight: var(--w-medium) !important; }
.cat-grade th .pill-canal { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 12px; }
.cat-lote-g { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cat-prev-box { min-width: 0; border-radius: var(--r-2); background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--hair); padding: 14px; }
.cat-prev-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cat-prev-kpis > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-prev-kpis small { font-size: 12px; color: var(--ink-3); }
.cat-prev-kpis b { font-size: 20px; font-weight: var(--w-strong); letter-spacing: -.01em; }
.cat-prev-kpis em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.cat-prev-w { margin: 0 -14px -6px; max-height: 360px; overflow: auto; }
.cat-prev { font-size: 13px; }
.cat-prev th, .cat-prev td { padding-top: 7px; padding-bottom: 7px; }
.cat-prev th:first-child, .cat-prev td:first-child { padding-left: 14px; }
.cat-prev th:last-child, .cat-prev td:last-child { padding-right: 14px; }
.cat-prev tr.cat-seg td { color: var(--ink-3); }
.cat-ped-w { margin: 0; }
.cat-ped th:first-child, .cat-ped td:first-child { padding-left: 0; }
.cat-ped th:last-child, .cat-ped td:last-child { padding-right: 0; }
.cat-lin4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.cat-cod { text-transform: uppercase; font-family: var(--mono); letter-spacing: .04em; }
.cat-cod-t { display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .05em; padding: 2px 8px; border-radius: var(--r-1); background: var(--accent-soft); color: var(--dica-ink); border: 1px dashed var(--accent); }

/* ---------- margens ---------- */
.cat-mg .cat-mg-cafe td { font-weight: var(--w-medium); }
.cat-mg .cat-mg-cafe td:first-child b { font-weight: var(--w-strong); }
.cat-mg td:first-child { min-width: 200px; }
.cat-sim-ctl { margin-bottom: 14px; max-width: 520px; }
.cat-sim-ctl b { color: var(--accent-ink); }
.cat-sim-ctl input[type="range"], .cat-g input[type="range"] { width: 100%; accent-color: var(--accent-ink); }
.cat-sim-kpis { margin-bottom: 14px; }

/* ---------- Google e Meta ---------- */
.cat-canais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.cat-canal { display: flex; flex-direction: column; gap: 10px; }
.cat-canal-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cat-canal-cab b { display: block; font-size: 15px; font-weight: var(--w-strong); }
.cat-canal-cab small { display: block; font-size: 12.5px; color: var(--ink-3); }
.cat-quando { font-size: 13px; color: var(--ink-2); }
.cat-quando b { color: var(--ink); font-weight: var(--w-strong); }
.cat-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.cat-nums b { display: block; font-size: 22px; font-weight: var(--w-strong); line-height: 1.1; }
.cat-nums b.pos { color: var(--pos); } .cat-nums b.warn { color: var(--warn); } .cat-nums b.neg { color: var(--neg); }
.cat-nums small { font-size: 12px; color: var(--ink-3); }
.cat-canal .nota { margin-top: 0; }
.cat-pr { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cat-feed tr.cat-prob td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
.cat-previa .filtros { justify-content: space-between; }
.cat-code { margin: 0; max-height: 360px; overflow: auto; padding: 14px 16px; border-radius: var(--r-2); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--ink-2); white-space: pre; tab-size: 2; }
.cat-q { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair); }
.cat-q:first-child { border-top: 0; padding-top: 0; }
.cat-q > p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.cat-q > p b { color: var(--ink); }
.cat-q .btn { align-self: flex-start; }

@media (max-width: 1080px) {
  .cat-g { grid-template-columns: minmax(0, 1fr); }
  .cat-lote-g { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cat-canais { grid-template-columns: minmax(0, 1fr); }
  .cat-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-prev-kpis { grid-template-columns: minmax(0, 1fr); }
  .cat-code { font-size: 11px; max-height: 300px; }
  .cat-previa .filtros .acoes { width: 100%; }
  .cat-feed tr.cat-prob td:first-child { box-shadow: none; }
  .cat-feed tr.cat-prob { box-shadow: inset 3px 0 0 var(--neg); }
  .cat-cab h2 { font-size: 19px; }
  .cat-inp { width: 100%; max-width: 140px; text-align: left; }
  .tab.cartoes .cat-inp-g { max-width: none; }
  .cat-mg td:first-child { min-width: 150px; }
}
.cat-canais > .caixa, .cat-g > .cat-col > .caixa:first-child { margin-top: 0; }