/* =========================================================
   UFY PHONE — APLICACIONES
   DÍA B — HORA 2
   ========================================================= */

.ufy-phone-app {
  appearance: none;

  min-width: 0;

  padding: 0;

  border: 0;
  outline: 0;

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

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 7px;

  font: inherit;

  cursor: pointer;
}


/* CUADRO DE LA APLICACIÓN */

.ufy-phone-app-icon {
  position: relative;

  display: block;

  width: min(100%, 68px);
  aspect-ratio: 1;

  overflow: hidden;

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

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(var(--ufy-rgb-255,255,255,255),0.11),
      rgba(18, 14, 30, 0.18)
    );

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

  box-sizing: border-box;
}


/* RESPUESTA AL TOQUE */

.ufy-phone-app:active .ufy-phone-app-icon {
  transform: scale(0.94);
}


/* NOMBRE DEBAJO DEL CUADRO */

.ufy-phone-app-label {
  display: block;

  width: 100%;

  overflow: hidden;

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

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

  line-height: 1.15;

  text-align: center;

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

  text-shadow: none;
}




/* =========================================================
   APP — CÁMARA
   ========================================================= */

.ufy-phone-app-icon-camera {
  border-color:
    transparent;

  background:
    transparent
    url(
      "/assets/ufy-phone/camera-app.svg"
    )
    center /
    100% 100%
    no-repeat;
}

/* =========================================================
   APP — GALERÍA
   Cámara instantánea premium
   ========================================================= */

.ufy-phone-app-icon-gallery {
  border-color: rgba(var(--ufy-rgb-255,255,255,255),1);

  background:
    linear-gradient(
      145deg,
      var(--ufy-tone-255,#ffffff),
      #f2f3f6
    );
}


/* CUERPO DE LA CÁMARA */

.ufy-phone-app-icon-gallery::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 10px;

  z-index: 2;

  width: 48px;
  height: 32px;

  transform: translateX(-50%);

  box-sizing: border-box;

  border:
    1px solid
    rgba(67, 72, 82, 0.52);

  border-radius: 8px 8px 5px 5px;

  background:
    /* BRILLO DEL LENTE */
    radial-gradient(
      circle at 50% 41%,
      rgba(220, 248, 255, 1) 0 1.5px,
      rgba(75, 180, 240, 0.96) 1.8px 3px,
      transparent 3.3px
    ),

    /* CRISTAL INTERIOR */
    radial-gradient(
      circle at 50% 41%,
      rgba(20, 56, 88, 1) 0 5px,
      rgba(16, 22, 34, 1) 5.5px 7px,
      transparent 7.5px
    ),

    /* ANILLO METÁLICO DEL LENTE */
    radial-gradient(
      circle at 50% 41%,
      transparent 0 7px,
      rgba(137, 148, 164, 1) 7.5px 9px,
      rgba(38, 42, 51, 1) 9.5px 11px,
      transparent 11.5px
    ),

    /* BOTÓN ROJO */
    radial-gradient(
      circle at 15% 72%,
      #ff5a45 0 3px,
      #b82621 3.2px 4px,
      transparent 4.3px
    ),

    /* VISOR DERECHO */
    linear-gradient(
      145deg,
      #27313d,
      #080b10
    )
    38px 5px / 6px 7px no-repeat,

    /* FLASH IZQUIERDO */
    linear-gradient(
      145deg,
      var(--ufy-tone-255,#ffffff),
      #aebbc8
    )
    5px 5px / 9px 7px no-repeat,

    /* FRANJA DE COLORES */
    linear-gradient(
      to right,
      #f43f5e 0 20%,
      #ff9f2e 20% 40%,
      #f4d83f 40% 60%,
      #32b96c 60% 80%,
      #3488ed 80% 100%
    )
    21px 0 / 6px 100% no-repeat,

    /* CUERPO METÁLICO */
    linear-gradient(
      to bottom,
      var(--ufy-tone-255,#ffffff) 0%,
      #e4e7eb 55%,
      #6a6e77 56%,
      #24272e 78%,
      #111318 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(var(--ufy-rgb-255,255,255,255),1),
    inset 0 -3px 0 rgba(var(--ufy-rgb-0,0,0,0),0.28),
    0 3px 6px rgba(25, 29, 38, 0.25);
}


/* FOTOGRAFÍA SALIENDO */

.ufy-phone-app-icon-gallery::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 37px;

  z-index: 1;

  width: 31px;
  height: 27px;

  transform:
    translateX(-50%)
    rotate(-1deg);

  box-sizing: border-box;

  border:
    3px solid
    var(--ufy-tone-255,#ffffff);

  border-bottom-width: 7px;

  border-radius: 1px;

  background:
    /* SOL */
    radial-gradient(
      circle at 73% 25%,
      #ffe36a 0 3px,
      #ff9d39 3.2px 4px,
      transparent 4.3px
    ),

    /* MONTAÑA DELANTERA */
    linear-gradient(
      140deg,
      transparent 42%,
      #27885b 43% 66%,
      transparent 67%
    ),

    /* MONTAÑA TRASERA */
    linear-gradient(
      220deg,
      transparent 45%,
      #6554c9 46% 63%,
      transparent 64%
    ),

    /* CIELO Y TERRENO */
    linear-gradient(
      to bottom,
      #55c9f3 0 58%,
      #eca04d 59% 100%
    );

  box-shadow:
    0 3px 6px
    rgba(28, 32, 43, 0.28);
}

/* =========================================================
   APP — REELS GLOBALES
   ========================================================= */

.ufy-phone-app-icon-reels {
  border-color:
    rgba(var(--ufy-rgb-255,255,255,255),0.20);

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(226, 49, 149, 0.42),
      transparent 38%
    ),

    radial-gradient(
      circle at 20% 82%,
      rgba(45, 137, 255, 0.38),
      transparent 42%
    ),

    linear-gradient(
      145deg,
      #17141d,
      #050507
    );
}


/* CUERPO DEL REEL */

.ufy-phone-app-icon-reels::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 51%;

  width: 37px;
  height: 31px;

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

  box-sizing: border-box;

  border:
    2px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.98);

  border-radius: 7px;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(var(--ufy-rgb-255,255,255,255),0.98) 0 5px,
      transparent 5px 10px
    )
    left top / 100% 8px no-repeat;
}


/* SÍMBOLO PLAY */

.ufy-phone-app-icon-reels::after {
  content: "";

  position: absolute;

  left: 52%;
  top: 56%;

  width: 0;
  height: 0;

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

  border-top:
    7px solid
    transparent;

  border-bottom:
    7px solid
    transparent;

  border-left:
    11px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.98);
}

/* =========================================================
   APP — AMISTADES
   Imagen original elegida por el dueño; encuadre sin el margen exterior
   ========================================================= */

.ufy-phone-app-icon-connections {
  border-color: rgba(116, 143, 255, 0.72);
  background: #10215a url("/assets/ufy-phone/friends-app.png") center / 120% 120% no-repeat;
  box-shadow: 0 3px 9px rgba(6, 15, 47, 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* =========================================================
   APP — CAMISAS
   Icono oficial SVG
   ========================================================= */

.ufy-phone-app-icon-shirts {
  border-color:
    transparent;

  background:
    transparent
    url(
      "/assets/ufy-phone/shirts.svg"
    )
    center /
    127% 127%
    no-repeat;
}



/* =========================================================
   APP — MENSAJES
   Imagen original elegida por el dueño; encuadre sin el margen exterior
   ========================================================= */

.ufy-phone-app-icon-messages {
  border-color: rgba(95, 243, 172, 0.72);
  background: #032218 url("/assets/ufy-phone/messages-app.png") center / 120% 120% no-repeat;
  box-shadow: 0 3px 9px rgba(0, 42, 24, 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* =========================================================
   APP — NOTIFICACIONES
   Imagen original elegida por el dueño, sin márgenes exteriores.
   ========================================================= */

.ufy-phone-app-icon-notifications {
  border-color: rgba(255,255,255,.82);
  background: #f4f4f5 url("/assets/ufy-phone/notifications-app.png") center / 134% 134% no-repeat;
  box-shadow: 0 3px 9px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =========================================================
   APP — GUARDADOS
   Marcador blanco minimalista sobre cristal azul
   ========================================================= */

.ufy-phone-app-icon-saved {
  border-color:
    rgba(155, 215, 255, 0.78);

  background:
    radial-gradient(
      circle at 24% 16%,
      rgba(145, 220, 255, 0.88),
      transparent 31%
    ),

    linear-gradient(
      145deg,
      #1687f8 0%,
      #0753c7 55%,
      #021c67 100%
    );

  box-shadow:
    inset 0 1px 1px
    rgba(var(--ufy-rgb-255,255,255,255),0.72),

    inset 0 -5px 12px
    rgba(0, 16, 73, 0.42),

    0 4px 10px
    rgba(0, 33, 105, 0.32);
}


/* MARCADOR */

.ufy-phone-app-icon-saved::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 27px;
  height: 38px;

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

  border-radius:
    6px 6px 2px 2px;

  background:
    linear-gradient(
      145deg,
      var(--ufy-tone-255,#ffffff) 0%,
      #f5f9ff 58%,
      #dceaff 100%
    );

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%,
      50% 76%,
      0 100%
    );

 
}

/* =========================================================
   APP — AJUSTES
   Imagen original elegida por el dueño; encuadre sin el margen exterior
   ========================================================= */

.ufy-phone-app-icon-settings {
  border-color: rgba(255, 255, 255, 0.82);
  background: #eef1f5 url("/assets/ufy-phone/settings-app.png") center / 130% 130% no-repeat;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}