/* ============================================================
   catalogo.css - Catálogo estilo PDF GN Nutrition
   Portada dark + separadores + tabla con fotos de productos
   ============================================================ */

/* ===== PREVIEW BODY ===== */
.cat-preview-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* ===== PÁGINA BASE ===== */
.cat-page {
  width: 100%;
  max-width: 595px;
  aspect-ratio: 595 / 842;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  /* CLAVE: forzar impresión de fondos */
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

/* ===== FONDO OSCURO (portada y separador) ===== */
.cat-cover-bg {
  position: absolute;
  inset: 0;
  background: #111 !important;
  z-index: 0;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* Textura sutil con gradientes */
.cat-cover-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 60%);
}

/* Líneas decorativas de fondo (simula el texto repetido del PDF) */
.cat-cover-bg::after {
  content: 'GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION  GN NUTRITION ';
  position: absolute;
  inset: -50px;
  font-size: 4.5rem;
  font-weight: 900;
  font-style: italic;
  color: rgba(147,193,31,0.06);
  line-height: 1.3;
  word-break: break-all;
  transform: rotate(-10deg);
  pointer-events: none;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* ===== CHEVRONES decorativos ===== */
.cat-cover-chevrons-tl {
  position: absolute;
  top: 28px; left: 24px;
  z-index: 2;
  display: flex;
  gap: 2px;
}
.cat-cover-chevrons-tl i {
  font-size: 2rem;
  color: #fff;
}

.cat-sep-chevrons-br {
  position: absolute;
  bottom: 28px; right: 24px;
  z-index: 2;
  display: flex;
  gap: 2px;
}
.cat-sep-chevrons-br i {
  font-size: 2rem;
  color: #fff;
}

/* ===== PORTADA ===== */
.cat-page--cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.cat-cover-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cat-cover-title {
  font-size: 5rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 4px;
  line-height: 1;
  margin: 0;
  color: #fff;
  text-shadow: 3px 3px 6px rgba(0,0,0,.5);
}

.cat-cover-year {
  font-size: 5.5rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 6px;
  line-height: 1;
  margin: .25rem 0 0;
  color: #fff;
  text-shadow: 3px 3px 6px rgba(0,0,0,.5);
}

.cat-cover-handle {
  display: inline-block;
  background: rgba(147,193,31,.4) !important;
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  padding: 6px 20px;
  margin-top: 1.25rem;
  z-index: 2;
  position: relative;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.cat-cover-logo {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cat-cover-logo img {
  width: 48px;
  height: 48px;
}
.cat-cover-logo-text {
  font-size: .65rem;
  color: #93C11F;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ===== SEPARADOR DE CATEGORÍA ===== */
.cat-page--separator {
  display: flex;
  flex-direction: column;
  color: #fff;
}

.cat-sep-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 2.5rem;
  padding-top: 60px;
}

.cat-sep-title {
  font-size: 3.5rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  margin: 0;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,.5);
  /* Borde verde lima */
  -webkit-text-stroke: 1.5px #93C11F;
  paint-order: stroke fill;
}

.cat-sep-sub {
  position: relative;
  z-index: 2;
  padding: 0 2.5rem 80px;
}

.cat-sep-desc {
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 1px;
  color: rgba(255,255,255,.85);
  margin: 0 0 1rem;
}

/* ===== PÁGINA DE PRODUCTOS ===== */
.cat-page--products {
  display: flex;
  flex-direction: column;
  background: #93C11F !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.cat-prod-bg {
  position: absolute;
  inset: 0;
  background: #93C11F !important;
  z-index: 0;
  border: 8px solid #888;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.cat-prod-table {
  position: relative;
  z-index: 2;
  width: calc(100% - 40px);
  margin: 20px auto 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .82rem;
}

.cat-prod-table thead th {
  background: transparent;
  color: #1a1a1a;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .5px;
  padding: 10px 8px;
  text-align: center;
  border-bottom: 2px solid rgba(0,0,0,.15);
}

.cat-prod-table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.cat-prod-table tbody td {
  padding: 10px 8px;
  vertical-align: middle;
  text-align: center;
  color: #1a1a1a;
  font-weight: 500;
}

/* Columna imagen */
.cat-th-img { width: 90px; }
.cat-tbl-img-cell { width: 90px; padding: 6px !important; }
.cat-tbl-img-wrap {
  width: 75px;
  height: 75px;
  background: #fff !important;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
.cat-tbl-img-wrap img {
  max-width: 68px;
  max-height: 68px;
  object-fit: contain;
}

/* Columna nombre */
.cat-th-name { text-align: left !important; }
.cat-tbl-name {
  text-align: left !important;
  font-weight: 700 !important;
  font-size: .82rem;
  max-width: 180px;
}

/* Columna peso */
.cat-th-peso { width: 110px; }
.cat-tbl-peso { font-size: .78rem; }

/* Columna precio */
.cat-th-precio { width: 90px; }
.cat-tbl-precio {
  font-weight: 700 !important;
  font-size: .85rem;
}

/* Columna unidades */
.cat-th-uds { width: 60px; }
.cat-tbl-uds {
  font-size: .78rem;
  font-weight: 600 !important;
  color: #084734 !important;
}

/* Watermark logo en la tabla */
.cat-prod-watermark {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: .12;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.cat-prod-watermark img {
  width: 120px;
  filter: grayscale(1) brightness(0.3);
}
.cat-prod-watermark span {
  font-size: .85rem;
  color: #333;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ===== COLORES ANTIGUOS (compat) ===== */
.cat-color-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--brand-border);
  display: inline-block;
}

/* ===== DROPZONE UPLOAD (Subir Refs) ===== */
.subref-dropzone {
  border: 2px dashed var(--brand-border);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--brand-surface-alt);
}
.subref-dropzone:hover,
.subref-dropzone--active {
  border-color: var(--brand-accent);
  background: rgba(var(--brand-accent-rgb, 99,102,241), .06);
}
.subref-dropzone__icon {
  font-size: 2.5rem;
  color: var(--brand-accent);
  margin-bottom: .75rem;
  opacity: .7;
}
.subref-row-error {
  background: rgba(239,68,68,.06) !important;
}

/* ===== PRINT ===== */
@media print {
  /* Forzar fondos en todo el documento */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Ocultar todo lo que NO es el catálogo */
  .com-hero, .com-breadcrumb, .com-kpi-strip,
  .app-sidebar, .app-navbar, .sidebar-overlay,
  #sidebar-overlay, #cat-p-print, #cat-p-download,
  .bottom-nav { display: none !important; }

  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0 !important; }
  .com-root { padding: 0 !important; margin: 0 !important; }
  body { background: #fff !important; margin: 0 !important; padding: 0 !important; }

  .cat-preview-body { padding: 0; gap: 0; }

  .cat-page {
    max-width: none;
    width: 100%;
    aspect-ratio: auto;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    page-break-after: always;
    break-after: page;
    margin: 0;
  }
  .cat-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Asegurar fondos visibles */
  .cat-cover-bg {
    background: #111 !important;
  }
  .cat-page--products,
  .cat-prod-bg {
    background: #93C11F !important;
  }
  .cat-cover-handle {
    background: rgba(147,193,31,.4) !important;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .cat-page { aspect-ratio: auto; min-height: 500px; }
  .cat-cover-title { font-size: 3rem; }
  .cat-cover-year { font-size: 3.5rem; }
  .cat-sep-title { font-size: 2.2rem; }
  .cat-prod-table { font-size: .72rem; }
  .cat-tbl-img-wrap { width: 50px; height: 50px; }
  .cat-tbl-img-wrap img { max-width: 44px; max-height: 44px; }
  .cat-th-img, .cat-tbl-img-cell { width: 60px; }
  .subref-dropzone { padding: 1.5rem 1rem; }
  .subref-dropzone__icon { font-size: 2rem; }
}