/* ==========================================================================
   Vidriera: el color de precio en la placa
   --------------------------------------------------------------------------
   Un pedazo de cinta de papel del color, pegado cruzando la esquina libre de
   la placa del precio (las otras dos tienen las escuadras, ver "La placa del
   precio" en vidriera.css), como la etiqueta pegada con cinta en una vidriera
   de verdad. Es el mismo lenguaje hecho a mano que el cartel de
   mantenimiento.

   Hubo antes un círculo de color en la esquina: parecía un emoji. Un punto
   chico y perfecto se lee como ícono; un pedazo de cinta con los extremos
   cortados con la mano se lee como objeto. Cada color tiene su propio corte
   y su propio ángulo (ver stickerDePrecio en grilla.js), así dos cintas en la
   misma grilla no son calcos.

   La sombra va en el contenedor y el corte en la cinta: un clip-path se come
   la sombra de su propio elemento.
   ========================================================================== */

.price-sticker {
  --cp: #999;
  --giro: 38deg;
  position: absolute;
  top: -3px;
  right: -14px;
  width: 38px;
  height: 13px;
  transform: rotate(var(--giro));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.price-sticker::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--cp);
  /* Fibra del papel de la cinta: líneas finas a lo largo y un grano encima.
     Mate: ningún brillo, que es lo que la hacía de plástico. */
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  /* Un filo apenas más claro arriba: el borde de la cinta agarra la luz, y
     es lo que deja ver una cinta negra sobre la placa oscura. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  clip-path: polygon(4% 0, 96% 0, 100% 22%, 95% 45%, 99% 70%, 96% 100%, 3% 100%, 0 76%, 5% 52%, 1% 26%);
}

/* Tres cortes distintos para los extremos: nadie corta la cinta igual dos veces. */
.price-sticker--b::before {
  clip-path: polygon(2% 0, 97% 0, 94% 30%, 100% 55%, 96% 80%, 98% 100%, 5% 100%, 1% 64%, 4% 38%, 0 14%);
}

.price-sticker--c::before {
  clip-path: polygon(5% 0, 95% 0, 99% 35%, 95% 62%, 100% 100%, 2% 100%, 5% 70%, 0 44%, 3% 18%);
}

/* En la ficha la placa es más grande, y la cinta crece con ella. */
.sheet-price .price-sticker {
  top: -2px;
  right: -18px;
  width: 50px;
  height: 17px;
}

/* En el chip del filtro va en línea y derecha, antes del nombre: ahí es una
   muestra del color, no algo pegado. */
.price-sticker.price-sticker--chip {
  position: relative;
  top: auto;
  right: auto;
  display: inline-block;
  flex: none;
  width: 18px;
  height: 8px;
  margin-right: 8px;
  transform: none;
}

/* Tan chica, la fibra de la cinta se lee como un código de barras. */
.price-sticker--chip::before {
  background-image: none;
}

.chip-sticker {
  display: inline-flex;
  align-items: center;
}