/* UFY Phone — Editor oscuro de fotos y videos: las herramientas.
 *
 * Qué hace: el aspecto de cada herramienta, como la imagen de referencia del
 * dueño:
 *   · Recortar (media-editor-crop.js): marco con 4 esquinas, rejilla y lo de
 *     fuera oscurecido; fila Libre · 1:1 · 9:16 · 16:9 · 4:5.
 *   · Formato (media-editor-format.js): fila Original · 1:1 · 9:16 · 4:5 · 16:9.
 *   · Ajustar (media-editor-adjust.js): número de grados, rueda con rayitas,
 *     girar a los lados y Rotar · Voltear · Restablecer.
 *   · Mover y Zoom (media-editor-pan.js): flechas en medio de la foto y barra
 *     de zoom con − y +.
 *   · Recortar video y Portada (media-editor-trim.js): tira de miniaturas con
 *     el marco blanco y sus agarraderas, o con un marcador.
 * Quién lo usa: esas pantallas, dentro de media-editor-screens.css.
 * Todas las zonas que se tocan miden al menos 44 px.
 */

/* ---------- Fila de formas (Recortar y Formato) ---------- */

.ufy-ratio-choices {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.ufy-ratio-choice {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 12px;
  line-height: 1.15;
}

.ufy-ratio-choice > .ufy-editor-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #1f1f23;
}

.ufy-ratio-choice small {
  margin-top: -3px;
  color: #b9b9c0;
  font-size: 11px;
}

/* Recortar: la forma elegida va en blanco. */
.ufy-crop-panel .ufy-ratio-choice[aria-pressed=true] > .ufy-editor-icon {
  background: #fff;
  color: #000;
}

/* Formato: la elegida, con borde blanco y el texto en negrita. */
.ufy-format-panel .ufy-ratio-choice[aria-pressed=true] > .ufy-editor-icon {
  box-shadow: inset 0 0 0 2px #fff;
}

.ufy-ratio-choice[aria-pressed=true] > span:not(.ufy-editor-icon),
.ufy-ratio-choice[aria-pressed=true] small {
  color: #fff;
  font-weight: 700;
}

/* ---------- Recortar: marco con esquinas ---------- */

/* Lo de fuera del trozo, oscurecido (la foto recorta la sombra). */
.ufy-crop-shade {
  position: absolute;
  z-index: 1;
  box-shadow: 0 0 0 100vmax #000000a6;
  pointer-events: none;
}

/* Capa del marco: encima de la foto y sin recortar, para que las esquinas
   no se corten en el borde. */
.ufy-crop-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.ufy-crop-window {
  position: absolute;
  border: 1px solid #ffffffd9;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.ufy-crop-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), #ffffff80 calc(33.333% - .5px), #ffffff80 calc(33.333% + .5px), transparent calc(33.333% + .5px),
      transparent calc(66.666% - .5px), #ffffff80 calc(66.666% - .5px), #ffffff80 calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(180deg, transparent calc(33.333% - .5px), #ffffff80 calc(33.333% - .5px), #ffffff80 calc(33.333% + .5px), transparent calc(33.333% + .5px),
      transparent calc(66.666% - .5px), #ffffff80 calc(66.666% - .5px), #ffffff80 calc(66.666% + .5px), transparent calc(66.666% + .5px));
  pointer-events: none;
}

/* Cada esquina: una L blanca y gruesa, con 44 px para el dedo. */
.ufy-crop-corner {
  position: absolute;
  width: 44px;
  height: 44px;
  touch-action: none;
}

.ufy-crop-corner::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 4px solid #fff;
}

.ufy-crop-corner.is-nw { top: -22px; left: -22px; cursor: nwse-resize; }
.ufy-crop-corner.is-ne { top: -22px; right: -22px; cursor: nesw-resize; }
.ufy-crop-corner.is-sw { bottom: -22px; left: -22px; cursor: nesw-resize; }
.ufy-crop-corner.is-se { bottom: -22px; right: -22px; cursor: nwse-resize; }

.ufy-crop-corner.is-nw::after { top: 19px; left: 19px; border-right: 0; border-bottom: 0; }
.ufy-crop-corner.is-ne::after { top: 19px; right: 19px; border-left: 0; border-bottom: 0; }
.ufy-crop-corner.is-sw::after { bottom: 19px; left: 19px; border-right: 0; border-top: 0; }
.ufy-crop-corner.is-se::after { bottom: 19px; right: 19px; border-left: 0; border-top: 0; }

/* ---------- Ajustar: rueda para enderezar ---------- */

.ufy-adjust-panel {
  display: grid;
  gap: 6px;
}

.ufy-adjust-value {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ufy-adjust-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ufy-adjust-turn {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
}

.ufy-adjust-wheel {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 44px;
  overflow: hidden;
  border-radius: 8px;
  touch-action: none;
  cursor: ew-resize;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* Rayitas: una cada grado (7 px) y una más larga cada 10 grados. Mide
   1120 px (8 × 140): así la raya del 0 cae justo en medio, en la aguja. */
.ufy-adjust-ticks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1120px;
  height: 22px;
  margin: -11px 0 0 -560px;
  background:
    repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 70px) left center / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, #ffffff8c 0 1px, transparent 1px 7px) left center / 100% 55% no-repeat;
  pointer-events: none;
}

.ufy-adjust-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 30px;
  margin: -15px 0 0 -1px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 6px #000;
  pointer-events: none;
}

/* Rotar · Voltear · Restablecer */
.ufy-editor-actions {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  margin-top: 10px;
}

.ufy-editor-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 12px;
}

.ufy-editor-action > .ufy-editor-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.ufy-editor-action[aria-pressed=true] > .ufy-editor-icon {
  background: #fff;
  color: #000;
}

/* ---------- Mover: flechas en medio de la foto ---------- */

.ufy-move-arrows {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid #ffffff73;
  border-radius: 50%;
  background: #00000059;
  backdrop-filter: blur(4px);
  color: #fff;
  transform: translate(-50%, -50%);
}

.ufy-move-arrows svg {
  width: 30px;
  height: 30px;
}

/* ---------- Zoom: − barra + ---------- */

.ufy-zoom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ufy-zoom-button {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
}

.ufy-zoom-range {
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.ufy-zoom-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff var(--fill, 0%), #ffffff40 var(--fill, 0%));
}

.ufy-zoom-range::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px #0009;
  -webkit-appearance: none;
  appearance: none;
}

.ufy-zoom-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #ffffff40;
}

.ufy-zoom-range::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #fff;
}

.ufy-zoom-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px #0009;
}

/* ---------- Recortar video y Portada: tira de miniaturas ---------- */

.ufy-trim-panel {
  padding: 4px 8px 0;
}

.ufy-trim-track {
  position: relative;
  height: 56px;
  touch-action: none;
  cursor: pointer;
}

.ufy-trim-thumbs {
  display: flex;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #1f1f23;
}

.ufy-trim-thumbs img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Lo que queda fuera del trozo elegido, oscurecido. */
.ufy-trim-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #000000a6;
  pointer-events: none;
}

.ufy-trim-thumbs + .ufy-trim-shade {
  border-radius: 8px 0 0 8px;
}

.ufy-trim-shade + .ufy-trim-shade {
  border-radius: 0 8px 8px 0;
}

/* Marco blanco del trozo elegido. */
.ufy-trim-selection {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border: 3px solid #fff;
  border-radius: 8px;
  pointer-events: none;
}

/* Agarraderas de inicio y final: barras blancas con 44 px para el dedo. */
.ufy-trim-handle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 14px;
  margin-left: -7px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 6px #0008;
  touch-action: none;
  cursor: ew-resize;
}

.ufy-trim-handle.is-start {
  margin-left: 0;
}

.ufy-trim-handle.is-end {
  margin-left: -14px;
}

/* Rayita oscura en medio, para que se vea que se puede arrastrar. */
.ufy-trim-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 16px;
  margin: -8px 0 0 -1px;
  border-radius: 1px;
  background: #4a4a50;
}

/* Zona de toque más ancha que la barra. */
.ufy-trim-handle::before {
  content: '';
  position: absolute;
  inset: 0 -15px;
}

/* Portada: un marcador que cubre un fotograma. */
.ufy-trim-handle.is-cover {
  top: -6px;
  bottom: -6px;
  width: 36px;
  margin-left: -18px;
  border: 3px solid #fff;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 0 0 1px #0006, 0 2px 8px #000a;
}

.ufy-trim-handle.is-cover::after {
  display: none;
}

.ufy-trim-handle.is-cover::before {
  inset: 0 -4px;
}

.ufy-trim-times {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: #d4d4d9;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ufy-trim-length {
  color: #fff;
  font-weight: 700;
}

/* ---------- Teléfonos pequeños (320 px) ---------- */

@media (max-width: 360px) {
  .ufy-ratio-choice > .ufy-editor-icon {
    width: 44px;
    height: 44px;
  }

  .ufy-ratio-choice {
    font-size: 11px;
  }

  .ufy-ratio-choice small {
    font-size: 10px;
  }

  .ufy-editor-action {
    min-width: 64px;
  }
}

/* ---------- Pantallas bajas ---------- */

@media (max-height: 560px) {
  .ufy-trim-track {
    height: 44px;
  }

  .ufy-editor-actions {
    margin-top: 4px;
  }
}