/* =========================================================
   UFY PHONE — CARPETA DE REDES SOCIALES
   DÍA B — HORA 2
   ========================================================= */


/* PORTADA DE LA CARPETA */

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

  background:
    linear-gradient(
      145deg,
      rgba(var(--ufy-rgb-255,255,255,255),0.26),
      rgba(20, 18, 28, 0.30)
    );
}


/* CUADRÍCULA DE VISTA PREVIA */

.ufy-phone-social-preview {
  position: absolute;

  inset: 7px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap: 4px;
}


/* LOGO PEQUEÑO COMÚN */

.ufy-phone-social-logo {
  --ufy-social-background:
    rgba(var(--ufy-rgb-255,255,255,255),0.10);

  --ufy-social-image: none;

  --ufy-social-filter: none;

  position: relative;

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

  overflow: hidden;

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

  border-radius: 8px;

  background:
    var(--ufy-social-background);
}


.ufy-phone-social-logo::before {
  content: "";

  position: absolute;

  inset: 5px;

  background-image:
    var(--ufy-social-image);

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  filter:
    var(--ufy-social-filter);
}


/* CARPETA SIN REDES */

.ufy-phone-social-preview.is-empty::before {
  content: "+";

  position: absolute;

  left: 50%;
  top: 50%;

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

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

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

  line-height: 1;
}


/* =========================================================
   PLATAFORMAS
   ========================================================= */

.ufy-phone-social-logo-facebook {
  --ufy-social-background: #1877f2;
  --ufy-social-image:
    url("/assets/social/facebook.svg");
}


.ufy-phone-social-logo-instagram {
  --ufy-social-background:
    linear-gradient(
      135deg,
      #f9ce34,
      #ee2a7b 46%,
      #6228d7
    );

  --ufy-social-image:
    url("/assets/social/instagram.svg");
}


.ufy-phone-social-logo-whatsapp {
  --ufy-social-background: #25d366;
  --ufy-social-image:
    url("/assets/social/whatsapp.svg");
}


.ufy-phone-social-logo-tiktok {
  --ufy-social-background: var(--ufy-tone-5,#050505);
  --ufy-social-image:
    url("/assets/social/tiktok.svg");
}


.ufy-phone-social-logo-youtube {
  --ufy-social-background: #ff0000;
  --ufy-social-image:
    url("/assets/social/youtube.svg");
}


.ufy-phone-social-logo-x {
  --ufy-social-background: var(--ufy-tone-5,#050505);
  --ufy-social-image:
    url("/assets/social/x.svg");
}


.ufy-phone-social-logo-threads {
  --ufy-social-background: var(--ufy-tone-5,#050505);
  --ufy-social-image:
    url("/assets/social/threads.svg");
}


.ufy-phone-social-logo-snapchat {
  --ufy-social-background: #fffc00;

  --ufy-social-image:
    url("/assets/social/snapchat.svg");

  --ufy-social-filter:
    brightness(0);
}


.ufy-phone-social-logo-telegram {
  --ufy-social-background: #26a5e4;
  --ufy-social-image:
    url("/assets/social/telegram.svg");
}


.ufy-phone-social-logo-linkedin {
  --ufy-social-background: #0a66c2;

  --ufy-social-image:
    url("/assets/social/linkedin.svg");

  --ufy-social-filter:
    brightness(0) invert(1);
}


.ufy-phone-social-logo-spotify {
  --ufy-social-background: #1db954;
  --ufy-social-image:
    url("/assets/social/spotify.svg");
}


.ufy-phone-social-logo-applemusic {
  --ufy-social-background:
    linear-gradient(
      145deg,
      #ff5b78,
      #fa243c
    );

  --ufy-social-image:
    url("/assets/social/applemusic.svg");
}


.ufy-phone-social-logo-pinterest {
  --ufy-social-background: #bd081c;
  --ufy-social-image:
    url("/assets/social/pinterest.svg");
}


.ufy-phone-social-logo-discord {
  --ufy-social-background: #5865f2;
  --ufy-social-image:
    url("/assets/social/discord.svg");
}


.ufy-phone-social-logo-twitch {
  --ufy-social-background: #9146ff;
  --ufy-social-image:
    url("/assets/social/twitch.svg");
}


.ufy-phone-social-logo-reddit {
  --ufy-social-background: #ff4500;
  --ufy-social-image:
    url("/assets/social/reddit.svg");
}


.ufy-phone-social-logo-github {
  --ufy-social-background: #181717;
  --ufy-social-image:
    url("/assets/social/github.svg");
}


.ufy-phone-social-logo-soundcloud {
  --ufy-social-background:
    linear-gradient(
      145deg,
      #ff8800,
      #ff3300
    );

  --ufy-social-image:
    url("/assets/social/soundcloud.svg");
}


.ufy-phone-social-logo-vimeo {
  --ufy-social-background: #1ab7ea;
  --ufy-social-image:
    url("/assets/social/vimeo.svg");
}


.ufy-phone-social-logo-behance {
  --ufy-social-background: #1769ff;
  --ufy-social-image:
    url("/assets/social/behance.svg");
}


.ufy-phone-social-logo-dribbble {
  --ufy-social-background: #ea4c89;
  --ufy-social-image:
    url("/assets/social/dribbble.svg");
}


.ufy-phone-social-logo-tumblr {
  --ufy-social-background: #36465d;
  --ufy-social-image:
    url("/assets/social/tumblr.svg");
}


.ufy-phone-social-logo-deezer {
  --ufy-social-background:
    linear-gradient(
      145deg,
      #a238ff,
      #ff3269
    );

  --ufy-social-image:
    url("/assets/social/deezer.svg");
}


.ufy-phone-social-logo-bandcamp {
  --ufy-social-background: #629aa9;
  --ufy-social-image:
    url("/assets/social/bandcamp.svg");
}


.ufy-phone-social-logo-kick {
  --ufy-social-background: #53fc18;

  --ufy-social-image:
    url("/assets/social/kick.svg");

  --ufy-social-filter:
    brightness(0);
}


/* ENLACE NO RECONOCIDO */

.ufy-phone-social-logo-link {
  --ufy-social-background:
    linear-gradient(
      145deg,
      #777b88,
      #3f424b
    );
}


.ufy-phone-social-logo-link::before {
  content: "↗";

  inset: 0;

  display: grid;
  place-items: center;

  background-image: none;

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

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


/* =========================================================
   APP REDES SOCIALES — PANEL TRANSPARENTE
   ========================================================= */

.ufy-phone-social-shell {
  position: relative;

  width: 100%;
  height: 100%;

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

  box-sizing: border-box;

  padding:
    16px
    12px
    22px;

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

  overflow-y: auto;

  scrollbar-width: none;
}


.ufy-phone-social-shell::-webkit-scrollbar {
  display: none;
}


.ufy-phone-social-panel {
  position: relative;

  width:
    calc(
      100% - 10px
    );

  min-height:
    min(
      72vh,
      540px
    );

  max-height: 100%;

  box-sizing: border-box;

  padding:
    28px
    18px
    24px;

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

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

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 10, 18, 0.38),
      rgba(3, 4, 9, 0.24)
    );

  box-shadow:
    0 18px 42px
    rgba(var(--ufy-rgb-0,0,0,0),0.22);

  backdrop-filter:
    blur(2px);

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

  scrollbar-width: none;
}



.ufy-phone-social-panel::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   ENCABEZADO INTERNO
   ========================================================= */

.ufy-phone-social-header {
  position: relative;

  min-height: 42px;

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


.ufy-phone-social-heading {
  min-width: 0;

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

  gap: 3px;

  text-align: center;
}


.ufy-phone-social-heading strong {
  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.98);

  font-size:calc(17px * var(--ufy-font-scale,1));
  font-weight: 720;
  line-height: 1.2;
}


.ufy-phone-social-heading span {
  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.56);

  font-size:calc(10px * var(--ufy-font-scale,1));
  font-weight: 520;
  line-height: 1.2;
}


.ufy-phone-social-back {
  appearance: none;

  position: absolute;

  left: 0;
  top: 50%;

  z-index: 2;

  width: 31px;
  height: 31px;

  padding: 0;

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

  border-radius: 50%;

  display: grid;
  place-items: center;

  transform:
    translateY(-50%);

  background:
    rgba(157, 77, 255, 0.78);

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

  font: inherit;
  font-size:calc(27px * var(--ufy-font-scale,1));
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}


.ufy-phone-social-back:active {
  transform:
    translateY(-50%)
    scale(0.92);
}