/* =========================================================
   UFY PHONE — ESTRUCTURA PARA COMPUTADORA
   Se activa únicamente en pantallas anchas y altas.
   ========================================================= */

@media (
  min-width: 900px
) and (
  min-height: 500px
) {

  /* =======================================================
     MITAD IZQUIERDA — LOCK SCREEN PERMANENTE
     ======================================================= */

  .ufy-phone-lock {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;

    width: 50vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;

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

    box-shadow:
      20px
      0
      55px
      rgba(var(--ufy-rgb-0,0,0,0),0.32);
  }


  .ufy-phone-lock-content {
    max-width: 560px;

    margin:
      0
      auto;
  }


  /* =======================================================
     MITAD DERECHA — HOME Y APLICACIONES
     ======================================================= */

  .ufy-phone-home-screen {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;

    width: 50vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;

    pointer-events: none;

    filter:
      brightness(0.34)
      saturate(0.62);

    transition:
      filter
      480ms
      cubic-bezier(
        0.22,
        0.72,
        0.24,
        1
      );
  }


  /*
    Capa de desenfoque y luz apagada.
    Permite distinguir el wallpaper y las apps
    sin mostrar la pantalla derecha completamente.
  */

  .ufy-phone-home-screen::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 100;

    pointer-events: none;

    background:
      linear-gradient(
        145deg,
        rgba(
          2,
          2,
          8,
          0.42
        ),
        rgba(
          2,
          2,
          8,
          0.68
        )
      );

    backdrop-filter:
      blur(8px);

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

    opacity: 1;
    visibility: visible;

    transition:
      opacity
      480ms
      cubic-bezier(
        0.22,
        0.72,
        0.24,
        1
      ),
      visibility
      0s
      linear
      480ms;
  }


  .ufy-phone-home-wallpaper {
    transform:
      scale(1.035);

    transition:
      transform
      560ms
      cubic-bezier(
        0.22,
        0.72,
        0.24,
        1
      );
  }


  .ufy-phone-home-content {
    width: 100%;
    max-width: 720px;

    margin:
      0
      auto;
  }


  /* =======================================================
     DERECHA DESBLOQUEADA — SE ENCIENDE
     ======================================================= */

  .ufy-phone-home-screen.is-ufy-desktop-unlocked {
    pointer-events: auto;

    filter:
      brightness(1)
      saturate(1);
  }


  .ufy-phone-home-screen.is-ufy-desktop-unlocked::after {
    opacity: 0;
    visibility: hidden;

    transition:
      opacity
      480ms
      cubic-bezier(
        0.22,
        0.72,
        0.24,
        1
      ),
      visibility
      0s
      linear
      480ms;
  }


  .ufy-phone-home-screen.is-ufy-desktop-unlocked
  .ufy-phone-home-wallpaper {
    transform:
      scale(1.01);
  }


  /* =======================================================
     DESBLOQUEO COMPLETADO EN EL LOCK SCREEN
     El Lock Screen permanece; desaparece solo la barra.
     ======================================================= */

  .ufy-phone-lock.is-ufy-desktop-unlocked
  .ufy-phone-unlock {
    opacity: 0;
    visibility: hidden;

    transform:
      scale(0.96);

    pointer-events: none;

    transition:
      opacity
      220ms
      ease,
      transform
      220ms
      ease,
      visibility
      0s
      linear
      220ms;
  }


  /* =======================================================
     APLICACIÓN ABIERTA EN LA MITAD DERECHA
     ======================================================= */

  .ufy-phone-home-screen
  .ufy-phone-app-screen {
    width: 100%;
    height: 100%;
  }


  .ufy-phone-home-screen
  .ufy-phone-app-screen-content {
    min-width: 0;
  }


  /* =======================================================
     HOME DE COMPUTADORA — PREVIEW Y CUADRÍCULA
     ======================================================= */

  .ufy-el-chat-preview-card {
    height:
      clamp(
        190px,
        38dvh,
        320px
      );

    aspect-ratio:
      auto;
  }


  .ufy-el-chat-preview-label {
    margin-top: 5px;

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


  .ufy-el-chat-preview-host +
  .ufy-phone-app-pages {
    margin-top: 9px;
  }


  .ufy-phone-app-page {
    grid-template-columns:
      repeat(
        5,
        minmax(
          0,
          1fr
        )
      );

    column-gap: 12px;
    row-gap: 14px;
  }


  .ufy-phone-page-dots {
    flex-basis: 14px;

    min-height: 14px;
  }



  /* =======================================================
     MOVIMIENTO REDUCIDO
     ======================================================= */

  @media (
    prefers-reduced-motion:
    reduce
  ) {
    .ufy-phone-home-screen,
    .ufy-phone-home-screen::after,
    .ufy-phone-home-wallpaper,
    .ufy-phone-unlock {
      transition: none !important;
    }
  }

}