/* ===================================================================
   Personalizador de jerseys — simulador de la ficha de producto.

   Deliberadamente COMPACTO. La primera versión de este port heredaba el
   bloque de 380 px del módulo de Venados, y en la ficha se comía media
   columna: parecía otra foto del producto, no un campo del formulario. En
   Venados la vista previa de verdad —la que pinta el tema— es una miniatura
   de 150 px al lado de los campos, y así se ve aquí.

   Nombres propios con prefijo `perso-`: el bloque vive dentro de Journal 3,
   que reparte estilos por casi todas las clases genéricas. Nada de `.card`,
   `.preview` ni `.thumb` — se los quedaría el tema.
   =================================================================== */
.perso-vp {
  /* Red por si el bloque cae dentro de un contenedor flex del tema: un ítem
     flex mide lo que mide su contenido, no el hueco. */
  box-sizing: border-box;
  width: 100%;
  flex: 1 1 100%;
  margin: 14px 0;
}

.perso-vp-fila {
  display: flex;
  align-items: center;
  gap: 14px;
}

.perso-vp-caja {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  overflow: hidden;
  background: #fafafa;
  transition: width 180ms ease, height 180ms ease;
}

/* Ampliada: el mismo bloque, sin duplicar el SVG ni abrir una ventana encima.
   El tope en `vw` es para que en un teléfono no se salga de la pantalla. */
.perso-vp-caja.perso-grande {
  width: min(340px, 78vw);
  height: min(340px, 78vw);
}

.perso-vp-caja img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.perso-vp-caja svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.perso-vp-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  text-align: center;
  font-size: 12px;
  color: #aaa;
}

.perso-vp-zoom {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(20, 20, 20, .55);
  color: #fff;
  font-size: 13px;
  line-height: 26px;
  cursor: pointer;
  opacity: .85;
}
.perso-vp-zoom:hover { opacity: 1; }

.perso-vp-info { min-width: 0; }

.perso-vp-titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #333;
}
.perso-vp-titulo span {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #999;
}

.perso-vp-estado {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* Debajo de 380 px el texto ya no cabe al lado: la miniatura se queda arriba
   y el texto pasa debajo, en vez de estrujarse a dos palabras por línea. */
@media (max-width: 380px) {
  .perso-vp-fila { flex-direction: column; align-items: flex-start; gap: 8px; }
}