/*
 * Imágenes publicitarias del catálogo.
 *
 * ⚠ Casi todo el aspecto de esta pantalla lo pone el TEMA: acá va solo lo que el tema no tiene,
 * que es cómo se muestra el lienzo. Ver la memoria del CSS compartido.
 */

/* La vista previa. El canvas tiene el tamaño REAL de la pieza —1080 px o más— y se muestra
   escalado: `max-width: 100%` con `height: auto` deja que el navegador lo achique sin tocar los
   píxeles que se van a descargar. Es lo que permite que lo que se ve sea exactamente lo que se
   baja. */
.pub-previa {
  display: flex;
  justify-content: center;
  background: var(--ins-tertiary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: 8px;
  padding: 14px;
  /* Tope de alto para que una historia de 1920 px no empuje el resto de la pantalla fuera de la
     vista: la pieza se ve entera igual, más chica. */
  max-height: 68vh;
  overflow: auto;
}
.pub-previa canvas {
  max-width: 100%;
  max-height: 64vh;
  height: auto;
  /* La sombra la separa del fondo de la caja: sin ella, una pieza de fondo claro se confunde con
     el contenedor y no se ve dónde termina. */
  box-shadow: 0 2px 14px rgba(11, 20, 26, .18);
  background: #fff;
}

/* La vista previa queda PEGADA mientras se baja por los controles.
   ⚠ Solo de `xl` para arriba, que es donde el diseño es de dos columnas: abajo de eso la previa va
   debajo de los controles, y pegarla ahí taparía justo lo que se está tocando.
   El `top` sale de la altura de la barra superior del tema —fija— más el aire de la tarjeta;
   escribir 86px a mano rompería el día que el tema cambie de alto. */
@media (min-width: 1200px) {
  .pub-pegada {
    position: sticky;
    top: calc(var(--ins-topbar-height, 70px) + 1rem);
  }
  /* Con la tarjeta pegada, el alto ya no puede ser 68vh: el resto de la tarjeta —selector,
     medidas, aviso— vive dentro del mismo alto de pantalla, y la pieza terminaba asomando por
     abajo del borde sin forma de verla. Se mide contra la ventana, no contra la pieza. */
  .pub-pegada .pub-previa        { max-height: calc(100vh - 290px); }
  .pub-pegada .pub-previa canvas { max-height: calc(100vh - 320px); }
}

/* El selector de tipografía muestra cada opción en su propia fuente; el alto por omisión las
   corta en las que tienen trazos largos. */
#pubTipografia option { font-size: 1rem; line-height: 1.6; }

/* ══ Modal para elegir el diseño ════════════════════════════════════════════════════════════
   Una galería, no una lista: acá el contenido ES la imagen, así que todo lo demás —fondos,
   bordes, rótulos— se mantiene callado para que las piezas sean lo único que se mira. */

/* ⚠ El reparto en columnas y el de las tarjetas por fila los hace la GRILLA DE BOOTSTRAP, en el
   markup de `modales/publicidad/disenos.php`. Acá quedó solo lo que el framework no tiene.
   Un flex propio con `align-items: flex-start` fue justamente lo que rompió el teléfono: al
   apilarse, la cuadrícula tomaba el ancho de su contenido y entraba una sola tarjeta por fila. */

/* La previa. Lo de pegarse lo pone `sticky-lg-top`; esto es solo su fondo, que hace falta porque
   la cuadrícula le pasa por debajo al scrollear y se leerían dos piezas superpuestas. */
.pub-hero {
  background: var(--ins-secondary-bg);
  padding-bottom: 12px;
}
.pub-hero-lienzo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* ⚠ El alto se mide contra la VENTANA. Fijo, en una pantalla baja la previa —que va pegada— se
     comía el cuerpo entero de la modal y la cuadrícula quedaba escondida detrás: se scrolleaba y
     no aparecía nada. Con `clamp` se achica sola donde estorba. */
  height: clamp(220px, 50vh, 480px);
  border-radius: 14px;
  background: var(--ins-tertiary-bg);
  padding: 14px;
  margin-bottom: 12px;
}

@media (max-width: 991.98px) {
  /* Apilada, la previa no puede llevarse media pantalla: la cuadrícula tiene que verse debajo. */
  .pub-hero-lienzo { height: clamp(150px, 26vh, 240px); }
}
.pub-hero-lienzo canvas {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border-radius: 6px;
  /* La misma sombra de la vista previa: separa una pieza de fondo claro de su tablero. */
  box-shadow: 0 4px 18px rgba(11, 20, 26, .20);
}
/* El texto no se estira: una nota de una línea a lo ancho de la modal no se lee, se barre. */
.pub-hero-datos { min-width: 0; max-width: 46ch; }

/* La tarjeta de un diseño. El ancho se lo da su `.col`; acá va cómo se ve. */
.pub-diseno {
  height: 100%;
  position: relative;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--ins-tertiary-bg);
  padding: 8px 8px 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pub-diseno:hover,
.pub-diseno:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(11, 20, 26, .14);
  outline: none;
}
/* La elegida lleva anillo del color de acento del tema. Es lo único con color en la grilla: el
   resto es gris para que la única señal fuerte sea cuál está puesta. */
.pub-diseno.elegido {
  border-color: var(--ins-primary);
  box-shadow: 0 0 0 4px rgba(var(--ins-primary-rgb), .16);
}
.pub-diseno-lienzo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  margin-bottom: 7px;
}
.pub-diseno-lienzo canvas {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(11, 20, 26, .16);
  background: #fff;
}
.pub-diseno-nombre {
  display: block;
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.3;
  /* Un nombre largo no puede empujar la tarjeta ni partir la grilla. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-diseno-nota {
  display: block;
  font-size: .6875rem;
  color: var(--ins-secondary-color);
  line-height: 1.35;
}
/* El check de la elegida y la papelera de las guardadas comparten esquina, y nunca conviven: solo
   las guardadas se borran, y el check solo lo tiene una. */
.pub-diseno-check,
.pub-diseno-borrar {
  position: absolute;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  line-height: 1;
}
.pub-diseno-check {
  right: 6px;
  background: var(--ins-primary);
  color: #fff;
}
.pub-diseno-borrar {
  left: 6px;
  background: rgba(255, 255, 255, .92);
  color: var(--ins-danger);
  box-shadow: 0 1px 6px rgba(11, 20, 26, .18);
  /* Aparece al pasar por encima: en una grilla de veinte, veinte papeleras rojas es lo primero
     que se ve, y borrar no es lo que se viene a hacer acá. En pantalla táctil no hay hover, así
     que ahí se muestra siempre. */
  opacity: 0;
  transition: opacity .15s ease;
}
.pub-diseno:hover .pub-diseno-borrar,
.pub-diseno-borrar:focus-visible { opacity: 1; }

@media (hover: none) {
  .pub-diseno-borrar { opacity: 1; }
}

/* ══ Grilla de productos (paso 2) ═══════════════════════════════════════════════════════════
   Tarjetas de ancho fijo que se acomodan solas: con `auto-fill` el navegador decide cuántas
   caben, así no hay que escribir un punto de corte por tamaño de pantalla. */
.pub-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.pub-tarjeta {
  border: 2px solid var(--ins-border-color);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--ins-secondary-bg);
  position: relative;
  transition: border-color .12s;
}
.pub-tarjeta:hover { border-color: var(--ins-secondary-color); }
.pub-tarjeta.marcada { border-color: var(--ins-primary); }
.pub-tarjeta canvas { display: block; width: 100%; height: auto; }
.pub-tarjeta-pie {
  padding: 8px 10px;
  font-size: .78rem;
  line-height: 1.25;
  border-top: 1px solid var(--ins-border-color);
}
.pub-tarjeta-pie .sku { color: var(--ins-secondary-color); }
/* La palomita de selección, sobre la miniatura. */
.pub-check {
  position: absolute; top: 8px; left: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 2px solid var(--ins-border-color);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
}
.pub-tarjeta.marcada .pub-check {
  background: var(--ins-primary);
  border-color: var(--ins-primary);
}
/* El botón de IA de cada pieza: opt-in, como pidió Mario. Nada se le pide al modelo si nadie
   toca esto. */
.pub-ia {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--ins-border-color);
  display: flex; align-items: center; justify-content: center;
  color: var(--ins-primary); font-size: 15px;
}
.pub-ia:hover { background: #fff; }