/* =========================================================
   UFY PHONE — PANTALLA INTERIOR DE APLICACIONES
   DÍA B — HORA 3
   ========================================================= */

.ufy-phone-app-screen {
  position: absolute;

  inset: 0;

  z-index: 20;

  display: flex;
  flex-direction: column;

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

  box-sizing: border-box;

  background:
    linear-gradient(
      180deg,
      rgba(8, 10, 18, 0.78),
      rgba(7, 8, 15, 0.88)
    );

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}


.ufy-phone-app-screen[hidden] {
  display: none;
}


/* =========================================================
   CABECERA
   ========================================================= */

.ufy-phone-app-screen-header {
  position: relative;

  flex: 0 0 auto;

  min-height: 58px;

  padding:
    max(16px, env(safe-area-inset-top))
    16px
    10px;

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

  box-sizing: border-box;

  border-bottom:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.12);
}


/* BOTÓN REGRESAR */

.ufy-phone-app-screen-back {
  appearance: none;

  position: absolute;

  left: 16px;
  top: max(
    16px,
    env(safe-area-inset-top)
  );

  max-width: 42%;

  padding: 4px 0;

  border: 0;
  outline: 0;

  background: transparent;
  color: rgba(var(--ufy-rgb-255,255,255,255),0.98);

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

  gap: 5px;

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

  white-space: nowrap;

  cursor: pointer;
}


.ufy-phone-app-screen-back:active {
  opacity: 0.62;
}


/* TÍTULO DE LA APP */

.ufy-phone-app-screen-title {
  max-width: 45%;

  margin: 0;

  overflow: hidden;

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

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

  line-height: 1.2;

  text-align: center;

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


/* =========================================================
   CONTENIDO DE LA APP
   ========================================================= */

.ufy-phone-app-screen-content {
  flex: 1 1 auto;

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

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

  overscroll-behavior: contain;

  padding:
    16px
    16px
    max(
      18px,
      env(safe-area-inset-bottom)
    );

  box-sizing: border-box;

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

  -webkit-overflow-scrolling: touch;
}


/* Bloquea la publicación situada detrás de Comentarios. */
.ufy-phone-app-screen:has(
  > .ufy-phone-reel-comments
) > .ufy-phone-app-screen-content,
.ufy-phone-app-screen:has(
  > .ufy-phone-reel-comments
) .ufy-el-chat {
  overflow-y: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}


/* =========================================================
   APP CAMISAS — EXPERIENCIA SIN CABECERA TRADICIONAL
   ========================================================= */

.ufy-phone-app-screen[
  data-ufy-active-app="shirts"
] {
  background: transparent;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ufy-phone-app-screen[
  data-ufy-active-app="shirts"
]
.ufy-phone-app-screen-header {
  display: none;
}

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

  background: transparent;
}

.ufy-phone-home-screen:has(
  .ufy-phone-app-screen[
    data-ufy-active-app="shirts"
  ]
)
.ufy-phone-home-content {
  visibility: hidden;
}