/* =========================================================
   UFY PHONE — AJUSTES
   Pantalla interna, una columna y cristal oscuro
   ========================================================= */

.ufy-phone-app-screen[
  data-ufy-active-app="settings"
] {
  background: var(--ufy-tone-0,#000);

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


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


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

  background: var(--ufy-tone-0,#000);

  scrollbar-width: none;
}


.ufy-phone-app-screen[
  data-ufy-active-app="settings"
]
.ufy-phone-app-screen-content::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   BASE
   ========================================================= */

.ufy-settings {
  --ufy-settings-bg: var(--ufy-tone-0,#000);
  --ufy-settings-text: rgba(var(--ufy-rgb-255,255,255,255),0.98);
  --ufy-settings-muted: rgba(var(--ufy-rgb-255,255,255,255),0.58);
  --ufy-settings-line: rgba(var(--ufy-rgb-255,255,255,255),0.22);
  --ufy-settings-line-soft: rgba(var(--ufy-rgb-255,255,255,255),0.12);
  --ufy-settings-panel: rgba(8, 8, 10, 0.68);
  --ufy-settings-danger: #ff625f;

  width: 100%;
  min-height: 100%;

  box-sizing: border-box;

  overflow-x: hidden;

  background: var(--ufy-settings-bg);
  color: var(--ufy-settings-text);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

  color-scheme: dark;
}


.ufy-settings *,
.ufy-settings *::before,
.ufy-settings *::after {
  box-sizing: border-box;
}


.ufy-settings button,
.ufy-settings input {
  font: inherit;
}


.ufy-settings button {
  -webkit-tap-highlight-color: transparent;
}


.ufy-settings [hidden] {
  display: none !important;
}


.ufy-settings svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   BARRA DE ESTADO
   ========================================================= */

.ufy-settings-statusbar {
  min-height: 36px;

  padding:
    max(11px, env(safe-area-inset-top))
    22px
    0;

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

  color: var(--ufy-settings-text);

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


.ufy-settings-statusbar time {
  min-width: 40px;
}


.ufy-settings-status-icons {
  display: inline-flex;
  align-items: center;

  gap: 7px;
}


.ufy-settings-status-icons > svg {
  width: 18px;
  height: 14px;

  stroke-width: 2.3;
}


.ufy-settings-signal {
  height: 13px;

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

  gap: 2px;
}


.ufy-settings-signal i {
  display: block;

  width: 3px;

  border-radius: 2px;

  background: currentColor;
}


.ufy-settings-signal i:nth-child(1) {
  height: 5px;
}


.ufy-settings-signal i:nth-child(2) {
  height: 8px;
}


.ufy-settings-signal i:nth-child(3) {
  height: 11px;
}


.ufy-settings-signal i:nth-child(4) {
  height: 13px;
}


.ufy-settings-battery {
  position: relative;

  width: 25px;
  height: 12px;

  padding: 2px;

  border:
    1.5px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.72);

  border-radius: 4px;
}


.ufy-settings-battery::after {
  content: "";

  position: absolute;

  right: -3px;
  top: 3px;

  width: 2px;
  height: 5px;

  border-radius:
    0
    2px
    2px
    0;

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


.ufy-settings-battery i {
  display: block;

  width: 78%;
  height: 100%;

  border-radius: 2px;

  background: var(--ufy-settings-text);
}


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

.ufy-settings-header {
  min-height: 52px;

  padding:
    11px
    18px
    5px;

  display: flex;
  align-items: center;

  gap: 10px;
}


.ufy-settings-back {
  appearance: none;

  width: 34px;
  height: 34px;

  margin: 0;
  padding: 7px;

  border: 0;
  border-radius: 50%;

  background: transparent;
  color: var(--ufy-settings-text);

  cursor: pointer;
}


.ufy-settings-back svg {
  transform: rotate(180deg);

  stroke-width: 2.1;
}


.ufy-settings-back:active {
  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.08);
}


.ufy-settings-brand {
  margin: 0;

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

  gap: 5px;

  font-size:calc(19px * var(--ufy-font-scale,1));
  line-height: 1;
  letter-spacing: -0.45px;
}


.ufy-settings-brand strong {
  font-size:calc(21px * var(--ufy-font-scale,1));
  font-weight: 760;
  letter-spacing: 0.4px;
}


.ufy-settings-brand span {
  color: rgba(var(--ufy-rgb-255,255,255,255),0.78);

  font-weight: 420;
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.ufy-settings-main {
  width: 100%;

  padding:
    4px
    16px
    max(28px, env(safe-area-inset-bottom));
}


.ufy-settings-main > h1 {
  margin:
    11px
    4px
    20px;

  color: var(--ufy-settings-text);

  font-size:
    clamp(
      38px,
      12.6vw,
      54px
    );

  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -2px;
}


.ufy-settings-profile-card,
.ufy-settings-completion,
.ufy-settings-group,
.ufy-settings-search {
  width: 100%;

  border:
    1px solid
    var(--ufy-settings-line);

  background:
    var(--ufy-settings-panel);

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

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


/* TARJETA DE CUENTA */

.ufy-settings-profile-card {
  appearance: none;

  min-height: 116px;

  margin: 0;
  padding: 17px;

  display: grid;
  grid-template-columns:
    68px
    minmax(0, 1fr)
    24px;

  align-items: center;

  gap: 14px;

  border-radius: 24px;

  color: var(--ufy-settings-text);
  text-align: left;

  cursor: pointer;
}


.ufy-settings-profile-avatar {
  width: 68px;
  height: 68px;

  overflow: hidden;

  display: grid;
  place-items: center;

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

  border-radius: 50%;

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


.ufy-settings-profile-photo {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.ufy-settings-profile-initials {
  color: var(--ufy-settings-text);

  font-size:calc(22px * var(--ufy-font-scale,1));
  font-weight: 760;
  letter-spacing: -0.5px;
}


.ufy-settings-profile-copy {
  min-width: 0;

  display: grid;

  gap: 3px;
}


.ufy-settings-profile-copy strong,
.ufy-settings-profile-copy span {
  display: block;

  overflow: hidden;

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


.ufy-settings-profile-copy strong {
  font-size:calc(19px * var(--ufy-font-scale,1));
  font-weight: 720;
  line-height: 1.15;
}


.ufy-settings-profile-copy span {
  color: var(--ufy-settings-muted);

  font-size:calc(14px * var(--ufy-font-scale,1));
  line-height: 1.25;
}


.ufy-settings-profile-copy
  .ufy-settings-profile-name {
  color: var(--ufy-settings-text);

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


.ufy-settings-profile-copy
  .ufy-settings-profile-username {
  font-size:calc(13px * var(--ufy-font-scale,1));
}


.ufy-settings-profile-copy
  .ufy-settings-profile-description {
  color: rgba(var(--ufy-rgb-255,255,255,255),0.58);

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


/* COMPLETAR PERFIL */

.ufy-settings-completion {
  appearance: none;

  min-height: 62px;

  margin: 12px 0 18px;
  padding: 10px 15px;

  display: grid;
  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto
    20px;

  align-items: center;

  gap: 11px;

  border-radius: 19px;

  color: var(--ufy-settings-text);
  text-align: left;

  cursor: pointer;
}


.ufy-settings-completion > span:nth-child(2) {
  min-width: 0;

  overflow: hidden;

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

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


.ufy-settings-completion-icon {
  width: 27px;
  height: 27px;

  color: var(--ufy-settings-text);
}


.ufy-settings-count {
  min-width: 31px;
  height: 31px;

  padding: 0 8px;

  display: inline-grid;
  place-items: center;

  border-radius: 999px;

  background: var(--ufy-settings-text);
  color: var(--ufy-tone-0,#000);

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


/* =========================================================
   GRUPOS Y FILAS
   ========================================================= */

.ufy-settings-group {
  margin: 0 0 12px;
  padding: 0 14px;

  overflow: hidden;

  border-radius: 22px;
}


.ufy-settings-row {
  appearance: none;

  position: relative;

  width: 100%;
  min-height: 65px;

  margin: 0;
  padding: 9px 0;

  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr)
    20px;

  align-items: center;

  gap: 12px;

  border: 0;

  background: transparent;
  color: var(--ufy-settings-text);

  text-align: left;

  cursor: pointer;
}


.ufy-settings-row +
.ufy-settings-row::before {
  content: "";

  position: absolute;

  left: 54px;
  right: 0;
  top: 0;

  height: 1px;

  background:
    var(--ufy-settings-line-soft);
}


.ufy-settings-row-icon {
  width: 42px;
  height: 42px;

  padding: 9px;

  display: grid;
  place-items: center;

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

  border-radius: 13px;

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

  color: var(--ufy-settings-text);
}


.ufy-settings-row-label {
  min-width: 0;

  overflow: hidden;

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

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


.ufy-settings-row-chevron {
  width: 18px;
  height: 18px;

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


.ufy-settings-profile-card:active,
.ufy-settings-completion:active,
.ufy-settings-row:active {
  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.055);
}


.ufy-settings-group-danger {
  border-color:
    rgba(255, 98, 95, 0.46);
}


.ufy-settings-row[
  data-settings-tone="danger"
],
.ufy-settings-row[
  data-settings-tone="danger"
]
.ufy-settings-row-icon,
.ufy-settings-row[
  data-settings-tone="danger"
]
.ufy-settings-row-chevron {
  color: var(--ufy-settings-danger);
}


.ufy-settings-row[
  data-settings-tone="danger"
]
.ufy-settings-row-icon {
  border-color:
    rgba(255, 98, 95, 0.25);

  background:
    rgba(255, 98, 95, 0.035);
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.ufy-settings-search {
  min-height: 62px;

  margin-top: 18px;
  padding: 0 19px;

  display: grid;
  grid-template-columns:
    27px
    minmax(0, 1fr);

  align-items: center;

  gap: 13px;

  border-radius: 999px;
}


.ufy-settings-search > span {
  width: 27px;
  height: 27px;

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


.ufy-settings-search input {
  appearance: none;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 15px 0;

  border: 0;
  outline: 0;

  background: transparent;
  color: var(--ufy-settings-text);

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


.ufy-settings-search input::placeholder {
  color: rgba(var(--ufy-rgb-255,255,255,255),0.38);
  opacity: 1;
}


.ufy-settings-search:focus-within {
  border-color:
    rgba(var(--ufy-rgb-255,255,255,255),0.52);
}


.ufy-settings-empty {
  margin: 22px 0 5px;

  color: var(--ufy-settings-muted);

  font-size:calc(14px * var(--ufy-font-scale,1));
  text-align: center;
}


/* =========================================================
   CARGA Y ERROR
   ========================================================= */

.ufy-settings-loading,
.ufy-settings-error {
  min-height: 100%;

  padding: 32px;

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

  gap: 14px;

  color: var(--ufy-settings-muted);

  text-align: center;
}


.ufy-settings-loading p,
.ufy-settings-error p {
  margin: 0;

  font-size:calc(14px * var(--ufy-font-scale,1));
  line-height: 1.45;
}


.ufy-settings-spinner {
  width: 28px;
  height: 28px;

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

  border-top-color:
    rgba(var(--ufy-rgb-255,255,255,255),0.9);

  border-radius: 50%;

  animation:
    ufy-settings-spin
    720ms
    linear
    infinite;
}


.ufy-settings-error button {
  appearance: none;

  min-height: 42px;

  padding: 0 18px;

  border:
    1px solid
    var(--ufy-settings-line);

  border-radius: 999px;

  background: transparent;
  color: var(--ufy-settings-text);

  cursor: pointer;
}


@keyframes ufy-settings-spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   PANTALLAS ESTRECHAS
   ========================================================= */

@media (max-width: 360px) {
  .ufy-settings-statusbar {
    padding-left: 18px;
    padding-right: 18px;
  }


  .ufy-settings-main {
    padding-left: 13px;
    padding-right: 13px;
  }


  .ufy-settings-main > h1 {
    font-size:calc(40px * var(--ufy-font-scale,1));
  }


  .ufy-settings-profile-card {
    grid-template-columns:
      60px
      minmax(0, 1fr)
      20px;

    gap: 11px;

    padding: 14px;
  }


  .ufy-settings-profile-avatar {
    width: 60px;
    height: 60px;
  }


  .ufy-settings-profile-copy strong {
    font-size:calc(17px * var(--ufy-font-scale,1));
  }


  .ufy-settings-row-label,
  .ufy-settings-search input {
    font-size:calc(15px * var(--ufy-font-scale,1));
  }
}


@media (prefers-reduced-motion: reduce) {
  .ufy-settings-spinner {
    animation-duration: 1.5s;
  }
}