/* =========================================================
   UFY PHONE — REDES SOCIALES: CUADRÍCULA PÚBLICA Y ADMINISTRACIÓN
   Parte 2 de social-links.css (se carga justo después de la
   parte anterior, en el mismo orden). Cuadrícula pública de redes,
   botón más, lista de administración (filas, arrastre), interruptor
   público, botones de editar y mover, y acciones de administración.
   ========================================================= */

/* =========================================================
   CUADRÍCULA PÚBLICA
   ========================================================= */

.ufy-phone-social-public-grid {
  min-width: 0;

  margin-top: 19px;

  display: grid;

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

  gap:
    17px
    10px;
}


.ufy-phone-social-public-item {
  min-width: 0;

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

  gap: 7px;

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

  text-align: center;
  text-decoration: none;

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


.ufy-phone-social-public-item:active {
  opacity: 0.68;

  transform:
    scale(0.94);
}


.ufy-phone-social-logo.is-public {
  flex:
    0 0 auto;

  width: 56px;
  height: 56px;

  border-radius: 16px;

  box-shadow:
    0 8px 18px
    rgba(var(--ufy-rgb-0,0,0,0),0.28);
}


.ufy-phone-social-logo.is-public::before {
  inset: 10px;
}


.ufy-phone-social-public-item > span:last-child {
  width: 100%;

  overflow: hidden;

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

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

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   BOTÓN MÁS
   ========================================================= */

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

  width: 72px;
  height: 72px;

  margin:
    25px auto
    0;

  padding: 0;

  border:
    2px dashed
    rgba(179, 104, 255, 0.92);

  border-radius: 17px;

  display: grid;
  place-items: center;

  background:
    rgba(122, 54, 190, 0.08);

  box-shadow:
    0 8px 20px
    rgba(88, 30, 151, 0.12);

  color:
    rgba(190, 116, 255, 0.98);

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

  cursor: pointer;
}



.ufy-phone-social-plus:active {
  transform:
    scale(0.92);
}


/* =========================================================
   ADMINISTRACIÓN
   ========================================================= */

.ufy-phone-social-helper {
  margin:
    13px 0
    10px;

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

  font-size:calc(9px * var(--ufy-font-scale,1));
  font-weight: 520;
  line-height: 1.3;

  text-align: center;
}


.ufy-phone-social-management-list {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


.ufy-phone-social-management-row {
  position: relative;

  min-width: 0;

  box-sizing: border-box;

  padding:
    8px
    8px
    8px
    9px;

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

  border-radius: 15px;

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

  gap: 8px;

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

  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}


.ufy-phone-social-management-row.is-dragging {
  z-index: 5;

  border-color:
    rgba(190, 129, 255, 0.78);

  box-shadow:
    0 9px 22px
    rgba(99, 35, 172, 0.40);

  transform:
    scale(1.025);

  background:
    rgba(43, 24, 67, 0.94);
}


.ufy-phone-social-management-identity {
  min-width: 0;

  flex:
    1 1 auto;

  display: flex;
  align-items: center;

  gap: 8px;
}


.ufy-phone-social-logo.is-management {
  flex:
    0 0 auto;

  width: 34px;
  height: 34px;

  border-radius: 10px;
}


.ufy-phone-social-logo.is-management::before {
  inset: 6px;
}


.ufy-phone-social-management-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.ufy-phone-social-management-text strong {
  overflow: hidden;

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

  font-size:calc(11px * var(--ufy-font-scale,1));
  font-weight: 670;
  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.ufy-phone-social-management-text span {
  max-width: 125px;

  overflow: hidden;

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

  font-size:calc(8px * var(--ufy-font-scale,1));
  font-weight: 470;
  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.ufy-phone-social-management-controls {
  flex:
    0 0 auto;

  display: flex;
  align-items: center;

  gap: 6px;
}


/* =========================================================
   INTERRUPTOR PÚBLICO
   ========================================================= */

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

  padding: 0;

  border: 0;

  display: flex;
  align-items: center;

  gap: 4px;

  background:
    transparent;

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

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

  cursor: pointer;
}


.ufy-phone-social-visibility.is-public {
  color:
    rgba(220, 193, 255, 0.96);
}


.ufy-phone-social-visibility i {
  position: relative;

  display: block;

  width: 25px;
  height: 14px;

  border-radius: 999px;

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


.ufy-phone-social-visibility i::after {
  content: "";

  position: absolute;

  left: 2px;
  top: 2px;

  width: 10px;
  height: 10px;

  border-radius: 50%;

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

  transition:
    transform 160ms ease;
}


.ufy-phone-social-visibility.is-public i {
  background:
    rgba(157, 77, 255, 0.86);
}


.ufy-phone-social-visibility.is-public i::after {
  transform:
    translateX(11px);
}


/* =========================================================
   EDITAR Y MOVER
   ========================================================= */

.ufy-phone-social-edit,
.ufy-phone-social-handle {
  appearance: none;

  width: 25px;
  height: 27px;

  padding: 0;

  border: 0;

  display: grid;
  place-items: center;

  background:
    transparent;

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

  font: inherit;

  cursor: pointer;
}


.ufy-phone-social-edit {
  font-size:calc(17px * var(--ufy-font-scale,1));
  line-height: 1;
}


.ufy-phone-social-handle {
  touch-action: none;

  grid-template-rows:
    repeat(3, 2px);

  align-content: center;

  gap: 3px;
}


.ufy-phone-social-handle span {
  display: block;

  width: 17px;
  height: 2px;

  border-radius: 999px;

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


/* =========================================================
   ACCIONES DE ADMINISTRACIÓN
   ========================================================= */

.ufy-phone-social-management-actions {
  margin-top: 15px;

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

  gap: 8px;
}


.ufy-phone-social-save-order,
.ufy-phone-social-add-platform {
  appearance: none;

  min-height: 37px;

  padding:
    8px
    13px;

  border-radius: 13px;

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

  cursor: pointer;
}


.ufy-phone-social-save-order {
  border:
    1px solid
    rgba(198, 150, 255, 0.44);

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

  color:
    rgba(241, 226, 255, 0.98);
}


.ufy-phone-social-save-order[hidden] {
  display: none;
}


.ufy-phone-social-add-platform {
  border:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.12);

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

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