/**
 * combo-collage.css — render deterministico del collage de imágenes de combos.
 *
 * Este CSS es la fuente de verdad compartida entre el POS Electron y la web
 * pública. Si lo modificas aquí, COPIA EL ARCHIVO COMPLETO al web (no edites
 * solo lo que cambió — un drift entre versiones rompe la consistencia visual).
 *
 * No depende de variables CSS del proyecto. Todo está hardcoded para que sea
 * fácil de portar.
 */

.combo-collage {
  display: grid;
  gap: 2px;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.combo-collage-cell {
  position: relative;
  overflow: hidden;
  background-color: #e0e0e0;
}

/* Wrapper interno que carga la imagen como background. Se separa del cell
 * para permitir transform: scale (zoom-in) sin que la celda misma cambie de
 * tamaño. La celda actúa como ventana; el .img es el lienzo escalable.
 *
 * background-size: contain → la imagen completa se ve a zoom=1 (puede dejar
 *   bordes si el aspect ratio no coincide con el cell). Esto es el "punto
 *   más alejado" que tiene sentido. Para acercar, el caller pone zoom>1.
 */
.combo-collage-img {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;   /* sobreescrito inline por renderComboCollage */
}

/* Celda sin imagen: gris claro con un trazo diagonal sutil para indicar "vacío". */
.combo-collage-cell-empty {
  background-color: #ececec;
  background-image: linear-gradient(
    135deg,
    transparent 49%, #d6d6d6 49%, #d6d6d6 51%, transparent 51%
  );
  background-size: 20px 20px;
}

/* ─────────────────────────────────────────────────────────────
 * Layouts. El aspect-ratio se fija aquí; el caller solo define
 * `width` (vía clase `-size-*` o estilo inline).
 * ───────────────────────────────────────────────────────────── */

/* 2x2: cuadrícula clásica, 4 imágenes iguales. */
.combo-collage-2x2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1 / 1;
}

/* 1+3: una imagen grande a la izquierda, tres chicas apiladas a la derecha. */
.combo-collage-1plus3 {
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  aspect-ratio: 1 / 1;
}
.combo-collage-1plus3 > .combo-collage-cell:nth-child(1) {
  grid-row: 1 / span 3;
}

/* 1+2: una imagen grande a la izquierda (mitad completa), dos chicas
 * apiladas vertical en la mitad derecha. */
.combo-collage-1plus2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1 / 1;
}
.combo-collage-1plus2 > .combo-collage-cell:nth-child(1) {
  grid-row: 1 / span 2;
}

/* horizontal: 3 imágenes en línea, formato banner. */
.combo-collage-horizontal {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  aspect-ratio: 3 / 1;
}

/* vertical: 3 imágenes apiladas, formato póster/storie. */
.combo-collage-vertical {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  aspect-ratio: 1 / 1.5;
}

/* 2h: 2 imágenes lado a lado. Total cuadrado (cada cell 1:2 alta y delgada). */
.combo-collage-2h {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  aspect-ratio: 1 / 1;
}

/* 2v: 2 imágenes apiladas. Total cuadrado (cada cell 2:1 ancho y bajo). */
.combo-collage-2v {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1 / 1;
}

/* single: una sola imagen, ocupa todo el cuadro. */
.combo-collage-single {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  aspect-ratio: 1 / 1;
}

/* ─────────────────────────────────────────────────────────────
 * Tamaños preset. Solo definen `width`; el alto sale del aspect-ratio.
 * ───────────────────────────────────────────────────────────── */

.combo-collage-size-xs    { width: 40px;  }
.combo-collage-size-small { width: 60px;  }
.combo-collage-size-medium{ width: 120px; }
.combo-collage-size-large { width: 240px; }
.combo-collage-size-xl    { width: 360px; }
.combo-collage-size-fluid { width: 100%; max-width: 400px; }