/* ==========================================================================
   Cucardas personalizadas — estilos de front (también usados en la vista
   previa del back office)
   ========================================================================== */

/* Capa superpuesta sobre la imagen */
.cucardas-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
}

.cucardas-slot {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--cucardas-offset, 8px);
  max-width: 100%;
  box-sizing: border-box;
}

.cucardas-slot--top-left      { top: 0; left: 0; align-items: flex-start; }
.cucardas-slot--top-center    { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
.cucardas-slot--top-right     { top: 0; right: 0; align-items: flex-end; }
.cucardas-slot--center-left   { top: 50%; left: 0; transform: translateY(-50%); align-items: flex-start; }
.cucardas-slot--center        { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; }
.cucardas-slot--center-right  { top: 50%; right: 0; transform: translateY(-50%); align-items: flex-end; }
.cucardas-slot--bottom-left   { bottom: 0; left: 0; align-items: flex-start; }
.cucardas-slot--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }
.cucardas-slot--bottom-right  { bottom: 0; right: 0; align-items: flex-end; }

/* Cucardas en línea (detalle: debajo del título / junto al precio) */
.cucardas-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

/* --------------------------------------------------------------------------
   Cucarda
   -------------------------------------------------------------------------- */
.cucarda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.cucarda--image img {
  display: block;
  max-width: 100%;
  height: auto;
}

.cucarda--html {
  padding: .4em .75em;
  background-color: #e53935;
  color: #fff;
  font-size: 13px;
  letter-spacing: .02em;
}

/* Formas */
.cucarda--shape-rect    { border-radius: 0; }
.cucarda--shape-rounded { border-radius: 6px; }
.cucarda--shape-pill    { border-radius: 999px; padding-left: 1em; padding-right: 1em; }

.cucarda--shape-circle {
  border-radius: 50%;
  padding: .3em;
  white-space: normal;
}

.cucarda--shape-star {
  padding: .8em;
  white-space: normal;
  -webkit-clip-path: polygon(50% 0%, 60.6% 10.4%, 75% 6.7%, 79% 21%, 93.3% 25%, 89.6% 39.4%, 100% 50%, 89.6% 60.6%, 93.3% 75%, 79% 79%, 75% 93.3%, 60.6% 89.6%, 50% 100%, 39.4% 89.6%, 25% 93.3%, 21% 79%, 6.7% 75%, 10.4% 60.6%, 0% 50%, 10.4% 39.4%, 6.7% 25%, 21% 21%, 25% 6.7%, 39.4% 10.4%);
          clip-path: polygon(50% 0%, 60.6% 10.4%, 75% 6.7%, 79% 21%, 93.3% 25%, 89.6% 39.4%, 100% 50%, 89.6% 60.6%, 93.3% 75%, 79% 79%, 75% 93.3%, 60.6% 89.6%, 50% 100%, 39.4% 89.6%, 25% 93.3%, 21% 79%, 6.7% 75%, 10.4% 60.6%, 0% 50%, 10.4% 39.4%, 6.7% 25%, 21% 21%, 25% 6.7%, 39.4% 10.4%);
}

.cucarda--shape-tag {
  padding-right: 1.4em;
  border-radius: 3px 0 0 3px;
  -webkit-clip-path: polygon(0 0, calc(100% - .8em) 0, 100% 50%, calc(100% - .8em) 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - .8em) 0, 100% 50%, calc(100% - .8em) 100%, 0 100%);
}

.cucarda--shape-ribbon {
  padding-right: 1.3em;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - .6em) 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, calc(100% - .6em) 50%, 100% 100%, 0 100%);
}

.cucarda__text { display: block; }