/* UH17.2 — La pantalla de Marketing.
 *
 * Archivo propio y NO `style.css`: esa hoja la comparten las doce vistas que
 * todavía conservan su aspecto viejo, y tocarla para una pantalla nueva
 * arriesgaría las otras once. Aquí solo vive lo que no existía antes: el marco
 * de vista previa, el eco del SKU y la rejilla del editor. Todo lo demás
 * (tarjetas, botones, tablas, avisos, modal) reutiliza las clases `ci-`.
 *
 * Ni un color suelto: todo sale de los tokens del Epic 16.
 */

/* ── UH17.5 · EL DISTINTIVO DE OFERTA EN EL COMPARATIVO ─────────────────────
   Único trozo de este archivo que NO se ve en la pantalla de Marketing: sale en
   la tabla de comparación de precios, junto al proveedor que tiene un banner
   vigente de ese producto. Vive aquí, y no en `style.css`, porque esa hoja la
   comparten las doce vistas viejas y no se toca.

   POR QUÉ ES UN CHIP Y NO UNA FILA PINTADA
   La tabla YA tiñe una fila: la del más barato (`.ci-best-price`, tinte teal
   con borde teal-600). Una segunda fila teñida competiría por el ojo, y si el
   proveedor de la oferta NO fuera el más barato, la pantalla llevaría la mirada
   hacia quien PAGA en vez de hacia quien conviene. La app entera existe para lo
   contrario. Cuando la oferta SÍ es el mejor precio, la fila lleva los dos
   distintivos, que es más contundente que cualquier color.

   POR QUÉ ÁMBAR Y NO ROJO
   En esta app el rojo significa ERROR sin una sola excepción: `ci-alert-danger`,
   `ci-btn-danger`, `ci-empty--error`, `ci-sim-alerta-alta`. Una fila roja se
   leería como "cuidado con este proveedor", que es el significado al revés.
   Ámbar 700 sobre ámbar 50 da 6.35:1 — holgado sobre el 4.5 exigido. */
.ci-oferta-tag {
  display: inline-block;
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  background-color: var(--pf-amber-50);
  color: var(--pf-amber-700);
  border: 1px solid var(--pf-amber-200);
  padding: var(--pf-s-05) var(--pf-s-2);
  border-radius: var(--pf-r-pill);
  margin-left: var(--pf-s-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ─────────────────────────── La lista de tarjetas ─────────────────────────── */

.pf-tarjeta-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pf-s-3);
  flex-wrap: wrap;
}

/* El resumen "2 slides · 1 vigente, 1 en borrador". Existe para que un borrador
   olvidado no sea invisible: sin esto, un slide que nunca se publicó
   simplemente no sale en el panel y nadie sabe por qué. */
.pf-tarjeta-resumen {
  font-size: var(--pf-fs-sm);
  color: var(--ci-text-muted);
  font-weight: 500;
}
.pf-tarjeta-resumen strong { color: var(--pf-teal-700); font-weight: 700; }

.pf-tarjeta-acciones { display: flex; gap: var(--pf-s-2); flex-wrap: wrap; }

/* Apagada no es lo mismo que borrada, y la diferencia tiene que verse. */
.pf-tarjeta-inactiva { opacity: .62; }

/* ─────────────────────────────── Los slides ─────────────────────────────── */

.pf-slides { display: flex; flex-direction: column; gap: var(--pf-s-3); margin-top: var(--pf-s-4); }

.pf-slide {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: var(--pf-s-4);
  align-items: center;
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-card);
}

.pf-slide-miniatura {
  width: 132px;
  aspect-ratio: 960 / 460;
  object-fit: cover;
  border-radius: var(--pf-r-sm);
  border: 1px solid var(--pf-border);
  display: block;
  background: var(--pf-sup-200);
}

.pf-slide-datos { min-width: 0; }
.pf-slide-alt {
  font-weight: 600;
  color: var(--ci-text-main);
  /* El `alt` llega a 300 caracteres: se corta en una línea para que la fila no
     crezca y desordene la lista. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-slide-meta {
  font-size: var(--pf-fs-sm);
  color: var(--ci-text-muted);
  margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: var(--pf-s-1) var(--pf-s-3);
}

.pf-slide-botones { display: flex; align-items: center; gap: var(--pf-s-1); }

/* Las flechas de reordenar. Elegidas sobre arrastrar y soltar porque funcionan
   igual con ratón, con dedo y con teclado; el arrastre en tablet se confunde
   con el gesto de desplazar la página. */
.pf-flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: transparent;
  color: var(--pf-sup-500);
  cursor: pointer;
  transition: background var(--pf-t-fast), color var(--pf-t-fast), border-color var(--pf-t-fast);
}
.pf-flecha svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pf-flecha:hover:not(:disabled) {
  background: var(--pf-teal-50);
  color: var(--pf-teal-700);
  border-color: var(--pf-teal-600);
}
.pf-flecha:disabled { opacity: .35; cursor: default; }

/* ────────────────────────── Las etiquetas de estado ────────────────────────
   Cuatro y no dos: "publicado" no basta, porque un slide publicado puede estar
   todavía por empezar o ya caducado. Los tres se ven igual en el panel (no
   salen) por razones distintas, y quien administra necesita distinguirlas.
   Los pares de color son los del sistema, ya medidos: 6.60 · 7.35 · 6.37 · 6.35 */
.pf-etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--pf-r-pill);
  font-size: var(--pf-fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.pf-etiqueta--vigente    { background: var(--pf-teal-50);            color: var(--pf-teal-700); }
.pf-etiqueta--programado { background: var(--pf-sup-200);            color: var(--pf-sup-700); }
.pf-etiqueta--caducado   { background: var(--pf-destructive-subtle); color: var(--pf-destructive-on-subtle); }
.pf-etiqueta--borrador   { background: var(--pf-warning-subtle);     color: var(--pf-warning-on-subtle); }

/* ──────────────────────────── El editor del slide ──────────────────────────── */

/* Este modal es más ancho que el `ci-modal-lg` de 720px, y con motivo: lleva dos
   columnas y DOS campos de fecha y hora en la misma fila. Un `datetime-local`
   no baja de unos 230px por sí solo, así que en 720px la rejilla no cabía y se
   salía por la izquierda —con el rótulo de la vista previa fuera de la caja—.
   Se sube el tope aquí y no en `.ci-modal-lg`, que comparten otros modales. */
.pf-slide-modal { max-width: 920px; }

.pf-slide-editor {
  display: grid;
  /* `minmax(0, …)` en las DOS columnas: sin el 0, una rejilla no puede encoger
     por debajo del contenido mínimo de sus hijos y desborda en vez de ceder. */
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--pf-s-5);
  align-items: start;
}
.pf-slide-previa,
.pf-slide-campos { min-width: 0; }

.pf-campos-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pf-s-3); }
.pf-campos-fila > * { min-width: 0; }

/* Los campos ceden con la columna en vez de imponer su ancho natural. */
.pf-slide-campos .ci-input { width: 100%; min-width: 0; box-sizing: border-box; }

/* La vista previa reproduce la proporción real del banner (960×460): lo que se
   ve aquí es lo que saldrá, no una aproximación. */
.pf-previa-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 460;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  overflow: hidden;
  background: var(--pf-sup-50);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--pf-s-2);
}
.pf-previa-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-previa-vacia {
  font-size: var(--pf-fs-sm);
  color: var(--ci-text-muted);
  text-align: center;
  padding: var(--pf-s-4);
}

/* La placa del precio, sobreimpresa. Teal 800 con texto blanco = 11.59:1, el
   mismo par que ganó la medición de las variantes de Buscar Precios. Sobre una
   foto cualquiera hace falta ese margen: no se sabe qué hay debajo. */
.pf-previa-precio {
  position: absolute;
  left: 6%; bottom: 8%;
  background: var(--pf-teal-800);
  color: #FFFFFF;
  border-radius: var(--pf-r-sm);
  padding: 6px 12px;
  box-shadow: var(--pf-sh-md);
  line-height: 1.15;
}
.pf-previa-precio b {
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-lg);
  font-weight: 700;
  display: block;
}
.pf-previa-precio span { font-size: var(--pf-fs-micro); opacity: .88; }

/* El eco del SKU: al escribirlo, la app responde con el nombre del producto.
   Sin esto, un SKU mal tecleado lleva a una pantalla vacía y no se descubre
   hasta que alguien hace clic en el banner. */
.pf-sku-eco { margin-top: var(--pf-s-2); font-size: var(--pf-fs-sm); min-height: 1.25rem; }
.pf-sku-eco--ok    { color: var(--pf-teal-700); font-weight: 600; }
.pf-sku-eco--mal   { color: var(--pf-destructive); font-weight: 600; }
.pf-sku-eco--busca { color: var(--ci-text-muted); }

/* El eco de la vigencia, escrito en palabras. El campo de fecha del navegador
   muestra la hora local sin decir de qué huso habla; esta línea lo dice. */
.pf-vigencia-eco {
  font-size: var(--pf-fs-sm);
  color: var(--ci-text-muted);
  margin-top: var(--pf-s-2);
  min-height: 1.25rem;
}
.pf-vigencia-eco--mal { color: var(--pf-destructive); font-weight: 600; }

/* ──────────────────────────────── Pantalla angosta ────────────────────────── */

@media (max-width: 860px) {
  .pf-slide-editor { grid-template-columns: 1fr; }
  .pf-campos-fila  { grid-template-columns: 1fr; }
  /* En una columna la rejilla de tres se lee de arriba abajo: miniatura y datos
     arriba, botones debajo, sin apretar nada. */
  .pf-slide {
    grid-template-columns: 96px 1fr;
    grid-template-areas: "mini datos" "botones botones";
  }
  .pf-slide-miniatura { width: 96px; grid-area: mini; }
  .pf-slide-datos     { grid-area: datos; }
  .pf-slide-botones   { grid-area: botones; justify-content: flex-end; }
}