/* Pixelio — piezas de marca. Solo clases; los valores vienen de tokens.json (tokens.css). */

/* Capa técnica: Departure Mono siempre en mayúsculas, tamaño de etiqueta y con un poco de espaciado */
.capa-tecnica,
.capa-tecnica-l { text-transform: uppercase; }

/* Mostrar u ocultar según el registro (data-theme en un ancestro) */
.px-solo-firma { display: none; }
[data-theme="firma"] .px-solo-firma { display: revert; }
[data-theme="firma"] .px-solo-produccion { display: none; }

/* Ficha: la cédula de cada imagen */
.px-ficha {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tecnica);
}
.px-ficha > span + span::before {
  content: "·";
  padding: 0 var(--espacio-2);
}
.px-ficha--grande { font-size: 13px; line-height: 18px; }
.px-ficha .px-dato { color: var(--acento); }
[data-theme="firma"] .px-ficha .px-dato { color: var(--tinta); }

/* Marcas de interfaz: cuadro de selección, guías de recorte y etiqueta sobre la foto */
.px-marcas {
  --px-marca: var(--linea);
  position: relative;
  display: block;
}
.px-marcas.sobre-oscuro { --px-marca: var(--plata-fria); }
.px-marcas.sobre-claro { --px-marca: var(--humo); }
.px-seleccion {
  position: absolute;
  border: var(--trazo-fino) solid var(--px-marca);
  border-radius: var(--radio-0);
  pointer-events: none;
}
.px-seleccion i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--px-marca);
}
.px-seleccion i:nth-child(1) { left: -3px; top: -3px; }
.px-seleccion i:nth-child(2) { right: -3px; top: -3px; }
.px-seleccion i:nth-child(3) { left: -3px; bottom: -3px; }
.px-seleccion i:nth-child(4) { right: -3px; bottom: -3px; }
.px-etiqueta {
  position: absolute;
  left: -1px;
  bottom: 100%;
  margin-bottom: var(--espacio-1);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--px-marca);
}
.px-recorte {
  position: absolute;
  inset: calc(var(--espacio-2) * -1);
  pointer-events: none;
}
.px-recorte i {
  position: absolute;
  width: var(--espacio-3);
  height: var(--espacio-3);
  border-color: var(--linea); /* las guías quedan fuera de la foto, sobre el fondo */
  border-style: solid;
  border-width: 0;
}
.px-recorte i:nth-child(1) { left: 0; top: 0; border-left-width: var(--trazo-fino); border-top-width: var(--trazo-fino); }
.px-recorte i:nth-child(2) { right: 0; top: 0; border-right-width: var(--trazo-fino); border-top-width: var(--trazo-fino); }
.px-recorte i:nth-child(3) { left: 0; bottom: 0; border-left-width: var(--trazo-fino); border-bottom-width: var(--trazo-fino); }
.px-recorte i:nth-child(4) { right: 0; bottom: 0; border-right-width: var(--trazo-fino); border-bottom-width: var(--trazo-fino); }

/* Línea de barrido: las barras con muescas del símbolo como filete, divisor o borde de página.
   Proporciones medidas del símbolo: muesca = 1/3 del alto; bajada 1.85× la muesca, subida 1.3×. */
.px-barrido {
  --alto: 12px;
  --x: 30%;
  --largo: 18%;
  --m: calc(var(--alto) / 3);
  display: block;
  width: 100%;
  height: var(--alto);
  background: var(--px-barrido-color, var(--tinta));
  border: 0;
  margin: 0;
}
.px-barrido--muesca {
  clip-path: polygon(0 0, var(--x) 0,
    calc(var(--x) + var(--m) * 1.85) var(--m),
    calc(var(--x) + var(--m) * 1.85 + var(--largo)) var(--m),
    calc(var(--x) + var(--m) * 3.15 + var(--largo)) 0,
    100% 0, 100% 100%, 0 100%);
}
.px-barrido--escalon {
  clip-path: polygon(0 0, var(--x) 0,
    calc(var(--x) + var(--m) * 1.85) var(--m),
    100% var(--m), 100% 100%, 0 100%);
}
.px-barrido--linea { --px-barrido-color: var(--linea); }
.px-barrido--acento { --px-barrido-color: var(--acento); }

/* Sello: una palabra o un número por pieza, solo en Firma */
.px-sello {
  display: inline-block;
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-1);
  border-radius: var(--radio-0);
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: var(--font-sello);
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
}
.px-sello--sin-bloque {
  padding: 0;
  background: none;
  color: var(--tinta);
}

/* Título mixto (solo Firma): letras de Fayte Pixel Hard dentro de un titular en serif, como en Ctrl+me */
.px-mixto {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 0.92;
  color: var(--tinta);
}
[data-theme="firma-clara"] .px-mixto { color: var(--acento); }
.px-mixto .px-pixel {
  font-family: var(--font-sello);
  font-style: normal;
  font-weight: 400;
  font-size: 1.04em;
}
.px-mixto em { font-style: italic; }

/* Descriptor: símbolo + descriptor fijo + línea de crédito */
.px-descriptor {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  color: var(--tinta);
}
.px-descriptor img { height: 48px; width: auto; }
.px-descriptor img:not(.px-solo-firma) { display: block; }
[data-theme="firma"] .px-descriptor img.px-solo-firma { display: block; }
[data-theme="firma"] .px-descriptor img.px-solo-produccion { display: none; }
.px-descriptor p { margin: 0; }
.px-descriptor .px-desc {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
}
.px-descriptor .px-credito {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tecnica);
}