/*
 * IFP MUG SUBLIMATION UX V2
 * Sólo se monta en la taza 11 oz.
 */

#ifp-mug-preview-panel {
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 10px;
  background: #fff;
}

.ifp-mug-preview-heading {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/*
 * Una única imagen grande.
 * Mucho más útil que tres miniaturas.
 */
.ifp-mug-preview-main {
  width: 100%;
  display: block;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
}

.ifp-mug-preview-main img {
  width: 100%;
  height: auto;
  min-height: 110px;
  max-height: 170px;
  display: block;
  object-fit: contain;
}


/*
 * Selector de ángulo.
 */
.ifp-mug-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}

.ifp-mug-view-tabs button {
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 6px;
  background: #fff;
  font-size: 8px;
  line-height: 1.15;
  cursor: pointer;
}

.ifp-mug-view-tabs button.active {
  border-color: #111827;
  background: #111827;
  color: #fff;
}


/*
 * Duplicado.
 */
.ifp-mug-action {
  width: 100%;
  margin-top: 8px;
  padding: 8px 7px;
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 7px;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ifp-mug-action:disabled {
  opacity: .42;
  cursor: not-allowed;
}


/*
 * Manual queda sólo como respaldo.
 * La operación normal es automática.
 */
.ifp-mug-refresh-link {
  width: 100%;
  margin-top: 5px;
  padding: 4px;
  border: 0;
  background: transparent;
  font-size: 9px;
  text-decoration: underline;
  cursor: pointer;
  opacity: .68;
}

.ifp-mug-preview-status {
  margin-top: 5px;
  min-height: 24px;
  font-size: 9px;
  line-height: 1.3;
  opacity: .72;
}

.ifp-mug-preview-status[data-state="busy"],
.ifp-mug-preview-status[data-state="queued"],
.ifp-mug-preview-status[data-state="stale"] {
  opacity: 1;
}

.ifp-mug-preview-status[data-state="ready"] {
  opacity: .75;
}

.ifp-mug-preview-status[data-state="error"] {
  opacity: 1;
  font-weight: 600;
}


/*
 * ==========================================================
 * PREVIEW ROOM REAL
 * ==========================================================
 */

#ifp-preview-room[data-ifp-mug-real="1"] {
  width: 100%;
  min-height: 650px;
  align-items: flex-start;
}

#ifp-preview-room[data-ifp-mug-real="1"]
#ifp-preview-large-img {
  display: block;
  width: auto;
  max-width: min(900px, 95%);
  max-height: 68vh;
  margin: 10px auto 24px;
  object-fit: contain;
}


/*
 * Las tres vistas pasan a ser selectores,
 * no previews diminutas.
 */
#ifp-preview-room[data-ifp-mug-real="1"]
.ifp-preview-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.ifp-mug-room-thumb {
  width: 135px;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.ifp-mug-room-thumb.active {
  border: 2px solid #111827;
}

.ifp-mug-room-thumb img {
  width: 100%;
  height: 105px;
  display: block;
  object-fit: contain;
}

.ifp-mug-room-thumb span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}


/*
 * Review final.
 */
.ifp-mug-review-label {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.ifp-review-side-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}


/* ==========================================================
   IFP MUG UX V3C
   ========================================================== */

.ifp-mug-background-control {
  margin-top: 9px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 7px;
  background: rgba(248, 250, 252, .72);
}

.ifp-mug-background-control > label {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.ifp-mug-background-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

#ifp-mug-bg-color {
  width: 44px;
  height: 32px;
  padding: 1px;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}

#ifp-mug-bg-clear {
  flex: 1;
  min-height: 30px;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 5px;
  background: #fff;
  font-size: 9px;
  cursor: pointer;
}

#ifp-mug-bg-clear:disabled {
  opacity: .4;
  cursor: default;
}

.ifp-mug-background-control small {
  display: block;
  margin-top: 6px;
  font-size: 8px;
  line-height: 1.3;
  opacity: .68;
}


/*
 * CAPAS / UBICACIONES:
 * tres vistas físicas grandes.
 */
#ifp-locations-grid.ifp-mug-real-locations-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(220px, 1fr)
    );
  gap: 18px;
  padding: 18px;
  box-sizing: border-box;
  align-items: start;
}

.ifp-mug-location-card {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 11px;
  background: #fff;
  cursor: zoom-in;
}

.ifp-mug-location-card:hover {
  border-color: rgba(15, 23, 42, .45);
}

.ifp-mug-location-card img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: contain;
}

.ifp-mug-location-card span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1100px) {

  #ifp-locations-grid.ifp-mug-real-locations-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(200px, 1fr)
      );
  }

  .ifp-mug-location-card img {
    height: 260px;
  }
}

@media (max-width: 720px) {

  #ifp-locations-grid.ifp-mug-real-locations-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .ifp-mug-location-card img {
    height: auto;
    max-height: 360px;
  }
}


/* ==========================================================
   IFP MUG UX V3D3
   ========================================================== */


/*
 * GUÍAS
 *
 * #ifp-guide-area es DOM.
 * El fondo azul/rojo/etc. es Fabric.
 * Las guías deben estar visualmente encima.
 */
html.ifp-mug-sublimation-product
#ifp-guide-area {
  z-index: 120 !important;
  pointer-events: none !important;
}


/*
 * UBICACIONES / CAPAS
 *
 * Usar el layout Printful-style real y garantizar
 * que ninguna de las tres fotografías se recorte.
 */
html.ifp-mug-sublimation-product
.ifp-body.ifp-layout-locations
.ifp-panel-right {
  min-width: 0 !important;
  overflow: visible !important;
}


html.ifp-mug-sublimation-product
.ifp-body.ifp-layout-locations
.ifp-panel-right-inner {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}


html.ifp-mug-sublimation-product
.ifp-body.ifp-layout-locations
#ifp-locations-panel {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}


html.ifp-mug-sublimation-product
.ifp-body.ifp-layout-locations
#ifp-locations-grid.ifp-mug-real-locations-grid {
  width: 100% !important;
  max-width: none !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 18px !important;

  padding: 18px !important;

  box-sizing: border-box !important;

  overflow: visible !important;
}


html.ifp-mug-sublimation-product
.ifp-mug-location-card {
  width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;

  overflow: visible !important;
}


html.ifp-mug-sublimation-product
.ifp-mug-location-card img {
  display: block !important;

  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: 430px !important;

  object-fit: contain !important;
}


@media (max-width: 1180px) {

  html.ifp-mug-sublimation-product
  .ifp-body.ifp-layout-locations
  #ifp-locations-grid.ifp-mug-real-locations-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }
}


@media (max-width: 760px) {

  html.ifp-mug-sublimation-product
  .ifp-body.ifp-layout-locations
  #ifp-locations-grid.ifp-mug-real-locations-grid {
    grid-template-columns:
      1fr !important;

    padding:
      10px !important;
  }
}


/* ==========================================================
   IFP MUG UX V3E
   STATUS UX + FULL GUIDE PARITY
   ========================================================== */


/* ----------------------------------------------------------
   STATUS GENERAL
   ---------------------------------------------------------- */

html.ifp-mug-sublimation-product
.ifp-mug-preview-status {
  min-height: 0;

  margin-top: 7px;

  padding: 7px 8px;

  border-radius: 6px;

  border: 1px solid
    rgba(15, 23, 42, .12);

  font-size: 9px;

  font-weight: 700;

  line-height: 1.25;

  text-align: center;

  opacity: 1;

  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}


/*
 * Espera / neutro.
 */
html.ifp-mug-sublimation-product
.ifp-mug-preview-status:not([data-state]),
html.ifp-mug-sublimation-product
.ifp-mug-preview-status[data-state=""] {
  background:
    #f3f4f6;

  color:
    #374151;

  border-color:
    #d1d5db;
}


/*
 * Hay una modificación pendiente, se está procesando
 * o estamos esperando el siguiente turno de Printful.
 *
 * Rojo-anaranjado deliberadamente visible.
 */
html.ifp-mug-sublimation-product
.ifp-mug-preview-status[data-state="stale"],
html.ifp-mug-sublimation-product
.ifp-mug-preview-status[data-state="busy"],
html.ifp-mug-sublimation-product
.ifp-mug-preview-status[data-state="queued"] {
  background:
    #c2410c;

  color:
    #ffffff;

  border-color:
    #9a3412;

  box-shadow:
    0 1px 3px
    rgba(154, 52, 18, .22);
}


/*
 * Vista física sincronizada.
 */
html.ifp-mug-sublimation-product
.ifp-mug-preview-status[data-state="ready"] {
  background:
    #15803d;

  color:
    #ffffff;

  border-color:
    #166534;

  box-shadow:
    0 1px 3px
    rgba(22, 101, 52, .20);

  opacity:
    1;
}


/*
 * Error real.
 */
html.ifp-mug-sublimation-product
.ifp-mug-preview-status[data-state="error"] {
  background:
    #991b1b;

  color:
    #ffffff;

  border-color:
    #7f1d1d;

  opacity:
    1;
}


/* ----------------------------------------------------------
   SIDE CENTER GUIDES
   ----------------------------------------------------------
   La plantilla técnica ya contiene estas líneas,
   pero un fondo Fabric opaco las tapa.

   Sólo aparecen como overlay DOM cuando existe
   un Fondo de taza imprimible.
   ---------------------------------------------------------- */

html.ifp-mug-sublimation-product
.ifp-mug-side-center-guide {
  display:
    none;

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  width:
    1px;

  height:
    100%;

  background:
    rgba(17, 24, 39, .68);

  transform:
    translateX(-0.5px);

  pointer-events:
    none;

  z-index:
    3;
}


/*
 * Con fondo imprimible:
 * recuperar las dos líneas que el fondo tapa.
 */
html.ifp-mug-sublimation-product.ifp-mug-has-print-background
#ifp-guide-area
.ifp-mug-side-center-guide {
  display:
    block;
}


/*
 * El propio guideArea sigue por encima de Fabric.
 */
html.ifp-mug-sublimation-product
#ifp-guide-area {
  z-index:
    120 !important;

  pointer-events:
    none !important;
}