/* UFY Phone — Pantalla «Subir foto / Subir video»: la subida.
 *
 * Qué hace: da estilo a la tarjeta «Subiendo a UFY…» (porcentaje grande,
 * barra y nota), a la línea de avisos y al botón de abajo («Publicar…» /
 * «Subiendo…» con el círculo que gira), y a cómo queda la pantalla mientras
 * sube (como la imagen de referencia: vista previa, tarjeta, ajustes y botón).
 * Quién lo usa: media-upload-card.js. Va junto a media-upload-screen.css y
 * media-upload-settings.css.
 *
 * Todo va bajo .ufy-upload-review:not(.is-editing).
 */

/* ---------- Tarjeta «Subiendo a UFY…» ---------- */

.ufy-upload-review:not(.is-editing) .ufy-upload-progress {
  flex: none;
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--upload-line);
  border-radius: 20px;
}

.ufy-upload-review:not(.is-editing) .ufy-upload-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ufy-upload-review:not(.is-editing) .ufy-upload-phase {
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.ufy-upload-review:not(.is-editing) .ufy-upload-percent {
  flex: none;
  font-size: 26px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ufy-upload-review:not(.is-editing) .ufy-upload-progress progress {
  display: block;
  width: 100%;
  height: 9px;
  margin-top: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #ebebef;
  appearance: none;
  accent-color: var(--upload-dark);
}

.ufy-upload-review:not(.is-editing) .ufy-upload-progress progress::-webkit-progress-bar {
  border-radius: 9px;
  background: #ebebef;
}

.ufy-upload-review:not(.is-editing) .ufy-upload-progress progress::-webkit-progress-value {
  border-radius: 9px;
  background: var(--upload-dark);
}

.ufy-upload-review:not(.is-editing) .ufy-upload-progress progress::-moz-progress-bar {
  border-radius: 9px;
  background: var(--upload-dark);
}

/* Sin porcentaje (preparando, aplicando la edición…): una luz que pasa. */
.ufy-upload-review:not(.is-editing) .ufy-upload-progress progress:not([value]) {
  background: linear-gradient(90deg, #ebebef 0 25%, #3a3b40 45% 55%, #ebebef 75%);
  background-size: 200% 100%;
  animation: ufy-upload-wait 1.7s linear infinite;
}

.ufy-upload-review:not(.is-editing) .ufy-upload-progress progress:not([value])::-webkit-progress-bar {
  background: transparent;
}

.ufy-upload-review:not(.is-editing) .ufy-upload-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--upload-muted);
}

@keyframes ufy-upload-wait {
  to {
    background-position: -200% 0;
  }
}

/* ---------- Avisos y botón de abajo ---------- */

.ufy-upload-review:not(.is-editing) .ufy-editor-status {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--upload-muted);
}

.ufy-upload-review:not(.is-editing) .ufy-editor-status.is-error {
  color: #b3261e;
}

.ufy-upload-review:not(.is-editing) .ufy-editor-publish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  padding: 10px 18px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(120deg, #25262a, #323337);
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

/* ---------- Mientras sube ---------- */

/* Como en la referencia: vista previa, tarjeta de subida, ajustes y botón. */
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-upload-edit,
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-editor-playback,
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-editor-batch,
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-editor-caption,
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-editor-destinations,
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-editor-status:not(.is-error) {
  display: none;
}

/* Están desactivados mientras sube, pero se ven como en la referencia. */
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-upload-row:disabled,
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-upload-preview-play:disabled,
.ufy-upload-review.is-uploading:not(.is-editing) .ufy-editor-publish:disabled {
  opacity: 1;
}

.ufy-upload-review.is-uploading:not(.is-editing) .ufy-editor-publish::after {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  border: 2.5px solid #ffffff55;
  border-top-color: #fff;
  border-radius: 50%;
  animation: ufy-publish-spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ufy-upload-review:not(.is-editing) .ufy-upload-progress progress:not([value]),
  .ufy-upload-review.is-uploading:not(.is-editing) .ufy-editor-publish::after {
    animation: none;
  }
}