/**
 * PhotoSision Portal · Tarjeta de "Foto extra" con la foto propia del estudiante, en borde de copia impresa (SPRINT-257)
 *
 * Prefijo "s257-". Colores de marca y de superficie: solo tokens de css/tokens.css. Los dos colores fijos de este archivo
 * (papel #FBF8F1 del borde y fondo neutro de la foto) son ilustración de una copia impresa, no identidad de marca.
 * La marca de agua reutiliza .sim-marca (css/sim-sala.css), el mismo texto y trazo que la galería.
 */

/* Con foto propia, la zona de imagen del dibujo genérico se oculta (el dibujo vuelve si la foto falla o no hay foto) */
.s257-con-foto > .product-media {
  display: none;
}

.s257-mat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 0;
  background: color-mix(in srgb, var(--ln) 55%, var(--sf));
  border-bottom: 1px solid var(--ln);
}

.s257-copia {
  position: relative;
  width: 58%;
  max-width: 250px;
  aspect-ratio: 2 / 3;
  padding: 5.5%;
  background: #FBF8F1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 10px 22px -8px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.22);
}

.s257-copia .s257-foto {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #CFC6B8;
}

.s257-copia .s257-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s257-copia .sim-marca {
  background-size: 240px 130px;
}

.s257-toma {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.68);
  color: #FFFFFF;
  border-radius: 4px;
  padding: 3px 7px;
}

/* Pie sobre el contador existente: aviso de marca de agua o botón de descarga */
.s257-fx-pie {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s257-aviso-marca {
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.4;
}

.s257-fx-pie .s257-btn {
  width: 100%;
}

.s257-fx-pie .s257-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}