/* =========================================================
   UFY PHONE — REELS PERSONALES
   DÍA C — HORA 4
   ========================================================= */


/* =========================================================
   PANTALLA INTERIOR
   ========================================================= */

.ufy-phone-app-screen[
  data-ufy-active-app="reels"
]
.ufy-phone-app-screen-content {
  padding: 0;

  overflow: hidden;

  background: var(--ufy-tone-0,#000);
}

/* =========================================================
   CABECERA FLOTANTE DE REELS
   El video ocupa también la parte superior
   ========================================================= */

.ufy-phone-app-screen[
  data-ufy-active-app="reels"
]
.ufy-phone-app-screen-header {
  position: absolute;

  left: 0;
  top: 0;

  z-index: 30;

  width: 100%;
  min-height: 58px;

  border-bottom: 0;

  background:
    transparent;

  pointer-events: none;
}


.ufy-phone-app-screen[
  data-ufy-active-app="reels"
]
.ufy-phone-app-screen-back,
.ufy-phone-app-screen[
  data-ufy-active-app="reels"
]
.ufy-phone-app-screen-title {
  pointer-events: auto;

  text-shadow:
    0 2px 7px
    rgba(var(--ufy-rgb-0,0,0,0),0.78);
}



/* =========================================================
   ESTADOS
   ========================================================= */

.ufy-phone-reels-message {
  width: 100%;
  min-height: 100%;

  padding: 32px 20px;

  display: grid;
  place-items: center;

  box-sizing: border-box;

  background: var(--ufy-tone-0,#000);

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.72);

  font-size:calc(14px * var(--ufy-font-scale,1));
  font-weight: 500;

  text-align: center;
}


.ufy-phone-reels-message[
  data-state="error"
] {
  color:
    rgba(255, 155, 155, 0.92);
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.ufy-phone-reels {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  background: var(--ufy-tone-0,#000);
}


.ufy-phone-reels-feed {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  scroll-snap-type:
    y mandatory;

  overscroll-behavior-y:
    contain;

  scrollbar-width: none;

  touch-action: pan-y;

  -webkit-overflow-scrolling:
    touch;
}


.ufy-phone-reels-feed::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   REEL
   ========================================================= */

.ufy-phone-reel-card {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 100%;

  overflow: hidden;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  background: var(--ufy-tone-0,#000);

  isolation: isolate;
}


.ufy-phone-reel-media {
  position: absolute;

  inset: 0;

  overflow: hidden;

  background: var(--ufy-tone-0,#000);
}


.ufy-phone-reel-media::after {
  content: "";

  position: absolute;

  inset:
    42%
    0
    0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(var(--ufy-rgb-0,0,0,0),0.16) 28%,
      rgba(var(--ufy-rgb-0,0,0,0),0.78) 100%
    );
}


/* =========================================================
   VIDEO
   ========================================================= */

.ufy-phone-reel-video {
  position: absolute;

  inset: 0;

  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;
  outline: 0;

  object-fit: cover;

  background: var(--ufy-tone-0,#000);

  cursor: pointer;
}


/* =========================================================
   ETIQUETA REEL
   ========================================================= */

.ufy-phone-reel-type {
  position: absolute;

  left: 12px;
  top:
  calc(
    env(safe-area-inset-top) +
    39px
  );

  z-index: 3;

  padding:
    5px
    9px;

  border-radius: 7px;

  background: var(--ufy-tone-0,#000);
  color: var(--ufy-tone-255,#fff);

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 600;

  line-height: 1;
}


/* =========================================================
   INFORMACIÓN DEL AUTOR
   ========================================================= */

.ufy-phone-reel-information {
  position: absolute;

  left: 14px;
  right: 72px;
  bottom:
    max(
      18px,
      env(safe-area-inset-bottom)
    );

  z-index: 3;

  min-width: 0;

  color: var(--ufy-tone-255,#fff);
}


.ufy-phone-reel-identity {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}


.ufy-phone-reel-avatar {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  overflow: hidden;

  box-sizing: border-box;

  border:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.88);

  border-radius: 50%;

  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.14);

  color: var(--ufy-tone-255,#fff);

  font-size:calc(13px * var(--ufy-font-scale,1));
  font-weight: 700;
}


.ufy-phone-reel-avatar img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.ufy-phone-reel-identity-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  line-height: 1.12;
}


.ufy-phone-reel-name,
.ufy-phone-reel-username {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.ufy-phone-reel-name {
  color: var(--ufy-tone-255,#fff);

  font-size:calc(13px * var(--ufy-font-scale,1));
  font-weight: 650;
}


.ufy-phone-reel-username {
  margin-top: 3px;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.72);

  font-size:calc(11px * var(--ufy-font-scale,1));
  font-weight: 450;
}


.ufy-phone-reel-caption {
  max-width: 100%;
  max-height: 2.7em;

  margin:
    8px
    0
    0;

  overflow: hidden;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.92);

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 400;

  line-height: 1.35;
}



.ufy-phone-reel-relative-time {
  display: block;

  margin-top: 5px;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.58);

  font-size:calc(10px * var(--ufy-font-scale,1));
  font-weight: 450;

  line-height: 1;

  white-space: nowrap;
}

/* =========================================================
   ACCIONES
   ========================================================= */

.ufy-phone-reel-actions {
  position: absolute;

  right: 12px;
  bottom:
    max(
      18px,
      env(safe-area-inset-bottom)
    );

  z-index: 3;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 15px;
}


.ufy-phone-reel-action {
  appearance: none;

  width: 44px;
  min-height: 44px;

  padding: 0;

  border: 0;
  outline: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 3px;

  background: transparent;
  color: var(--ufy-tone-255,#fff);

  font: inherit;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.ufy-phone-reel-action:active {
  transform: scale(0.91);
}


.ufy-phone-reel-action-icon {
  position: relative;

  display: block;

  width: 25px;
  height: 25px;

  box-sizing: border-box;
}


.ufy-phone-reel-action-count {
  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.94);

  font-size:calc(10px * var(--ufy-font-scale,1));
  font-weight: 600;
}


/* =========================================================
   CORAZÓN UFY — SVG
   ========================================================= */

.ufy-phone-reel-action.is-like
.ufy-phone-reel-action-icon {
  position: relative;

  width: 40px;
  height: 40px;

  display: block;

  border: 0;

  background: transparent;
}


.ufy-phone-reel-like-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;
}


/* =========================================================
   COMENTARIO UFY — SVG
   ========================================================= */

.ufy-phone-reel-action.is-comment
.ufy-phone-reel-action-icon {
  position: relative;

  width: 40px;
  height: 40px;

  border: 0;

  background: transparent;
}


.ufy-phone-reel-comment-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;
}

/* =========================================================
   COMPARTIR — SVG
   ========================================================= */

.ufy-phone-reel-action.is-share
.ufy-phone-reel-action-icon {
  position: relative;

  width: 40px;
  height: 40px;

  display: block;

  border: 0;

  background: transparent;
}


.ufy-phone-reel-share-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;
}

/* =========================================================
   GUARDAR — SVG
   ========================================================= */

.ufy-phone-reel-action.is-save
.ufy-phone-reel-action-icon {
  position: relative;

  width: 40px;
  height: 40px;

  display: block;

  border: 0;

  background:
    transparent;
}


.ufy-phone-reel-save-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;
}


.ufy-phone-reel-action.is-save.is-active
.ufy-phone-reel-save-image {
  filter:
    drop-shadow(
      0 3px 8px
      rgba(157, 77, 255, 0.42)
    );
}

/* =========================================================
   SONIDO — SVG
   ========================================================= */

.ufy-phone-reel-mute {
  appearance: none;

  position: absolute;

  top: 12px;
  right: 12px;

  z-index: 3;

  width: 40px;
  height: 40px;

  box-sizing: border-box;

  display: block;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}


.ufy-phone-reel-sound-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;
}



/* =========================================================
   SUBIR REEL
   ========================================================= */

.ufy-phone-reels-upload {
  position: absolute;

  left: 50%;
  top:
  calc(
    env(safe-area-inset-top) +
    45px
  );

  z-index: 6;

  transform:
    translateX(-50%);

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 5px;
}


.ufy-phone-reels-upload-input {
  display: none;
}


.ufy-phone-reels-upload-button {
  appearance: none;

  min-height: 34px;

  padding:
    7px
    13px;

  border:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.18);

  border-radius: 999px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  background:
    rgba(var(--ufy-rgb-0,0,0,0),0.42);

  color: var(--ufy-tone-255,#fff);

  font: inherit;
  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 600;

  cursor: pointer;

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);

  -webkit-tap-highlight-color:
    transparent;
}


.ufy-phone-reels-upload-button:active {
  transform: scale(0.95);
}


.ufy-phone-reels-upload-button:disabled {
  opacity: 0.55;

  cursor: wait;
}


.ufy-phone-reels-upload-icon {
  position: relative;

  width: 14px;
  height: 14px;

  flex: 0 0 14px;
}


.ufy-phone-reels-upload-icon::before,
.ufy-phone-reels-upload-icon::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 12px;
  height: 1.5px;

  border-radius: 999px;

  background: var(--ufy-tone-255,#fff);

  transform:
    translate(-50%, -50%);
}


.ufy-phone-reels-upload-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


.ufy-phone-reels-upload-status {
  min-width: 190px;

  min-height: 14px;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.78);

  font-size:calc(11px * var(--ufy-font-scale,1));
  font-weight: 500;

  text-align: center;
}


.ufy-phone-reels-upload-status[
  data-state="error"
] {
  color:
    rgba(255, 155, 155, 0.96);
}


.ufy-phone-reels-upload-status[
  data-state="success"
] {
  color:
    rgba(153, 255, 190, 0.96);
}


/* =========================================================
   PANTALLAS BAJAS
   ========================================================= */

@media (max-height: 650px) {
  .ufy-phone-reel-information {
    bottom: 12px;
  }

  .ufy-phone-reel-actions {
    bottom: 12px;

    gap: 10px;
  }
}