/* KairSun Web — pantalla Ajustes + Perfil (mock 1:1 de la app Flutter).
 *
 * Fuente de verdad (KairSun-App, READ-ONLY):
 *   lib/features/settings/presentation/settings_screen.dart
 *   lib/features/settings/presentation/widgets/data_export_section.dart
 *   lib/features/settings/presentation/widgets/delete_account_section.dart
 *   lib/features/settings/application/data_export_service.dart:16-88
 *   lib/features/user_profile/presentation/screens/profile_screen.dart
 *   lib/features/user_profile/presentation/providers/profile_prefs_provider.dart
 *   lib/l10n/gen/app_l10n_es.dart (copy real)
 *   lib/shared/constants/color_themes.dart (15 paletas reales)
 *
 * Contrato de la base (`ks-screens-base.css`): --u = 1dp real (393dp base),
 * telefono .phone, toggle .ks-view, piezas .ks-*. Aca NO se redefinen esas
 * piezas: solo se visten Ajustes y Perfil.
 *
 * Sin JS, sin estilos inline, sin prioridades forzadas, sin fuentes externas.
 * La app usa Rubik en Ajustes (GoogleFonts); el sitio solo tiene DM Sans
 * local, asi que el mock usa la familia base (declarado en las notas y en
 * docs/screens/54_ajustes.md).
 *
 * La Personalizacion de la app NO se clona (pantalla sin cerrar): solo se la
 * menciona, con la lista real, en las notas del HTML y del doc.
 */

/* ── Scope del toggle: --u vive tambien fuera de .phone ────────────────── */
.ks-set-view,
.ks-set-view .phone {
  --u: calc(min(380px, calc(100vw - 40px)) / 393);
}
.ks-set-view .phone {
  width: min(380px, calc(100vw - 40px));
}
.ks-set-view .ks-view__tabs {
  margin-bottom: calc(18 * var(--u));
}

/* Grilla de tomas: mismo patron que Agua (auto-fit, 380px min). */
.ks-set-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 28px;
  align-items: start;
}

/* ── Tokens de Ajustes/Perfil (settings_screen.dart + kair_surfaces) ───── */
.ks-set {
  --set-account: #818cf8;
  --set-language: #fbbf24;
  --set-privacy: #93c5fd;
  --set-sync: #60a5fa;
  --set-perf: #00fff0;
  --set-danger: #ff5252;
  --set-accent: #22c55e;
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--ks-font);
  color: var(--ks-text);
  background: var(--ks-bg);
}
.ks-set__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(245, 196, 81, 0.05), transparent 62%),
    linear-gradient(180deg, #0a0c10 0%, #07070a 100%);
}

.ks-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ks-set button {
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ks-set button:focus-visible,
.ks-set a:focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
}

/* ── Barra de estado (decorativa) ──────────────────────────────────────── */
.ks-set__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(54 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(26 * var(--u)) 0 calc(30 * var(--u));
  color: #fff;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  z-index: 6;
}
.ks-set__status-icons {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
}
.ks-set__signal,
.ks-set__wifi,
.ks-set__battery {
  display: inline-block;
  background: rgba(255, 255, 255, 0.92);
}
.ks-set__signal {
  width: calc(15 * var(--u));
  height: calc(10 * var(--u));
  clip-path: polygon(0 100%, 18% 100%, 18% 66%, 0 66%, 0 100%, 28% 100%, 28% 44%, 46% 44%, 46% 100%, 56% 100%, 56% 22%, 74% 22%, 74% 100%, 84% 100%, 84% 0, 100% 0, 100% 100%);
}
.ks-set__wifi {
  width: calc(15 * var(--u));
  height: calc(11 * var(--u));
  clip-path: polygon(50% 100%, 0 38%, 12% 26%, 50% 62%, 88% 26%, 100% 38%);
}
.ks-set__battery {
  width: calc(22 * var(--u));
  height: calc(11 * var(--u));
  border-radius: calc(3 * var(--u));
  background: transparent;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.7);
  position: relative;
}
.ks-set__battery::before {
  content: "";
  position: absolute;
  inset: calc(1.6 * var(--u));
  width: 68%;
  border-radius: calc(1.6 * var(--u));
  background: #fff;
}
.ks-set__battery::after {
  content: "";
  position: absolute;
  right: calc(-3.4 * var(--u));
  top: 50%;
  translate: 0 -50%;
  width: calc(2 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  background: rgba(255, 255, 255, 0.7);
}

/* ── App bar (KairUniversalAppBar: titulo centrado a 18px w900) ────────── */
.ks-set__appbar {
  position: absolute;
  top: calc(54 * var(--u));
  left: 0;
  right: 0;
  height: calc(56 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(16 * var(--u));
  background: rgba(10, 12, 16, 0.74);
  -webkit-backdrop-filter: blur(calc(10 * var(--u)));
  backdrop-filter: blur(calc(10 * var(--u)));
  border-bottom: 1px solid var(--ks-line);
  z-index: 5;
}
.ks-set__back {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--ks-glass-border);
  color: var(--ks-text);
}
.ks-set__back .ks-ico {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}
.ks-set__appbar-title {
  flex: 1;
  text-align: center;
  font-size: calc(17 * var(--u));
  font-weight: 900;
  letter-spacing: calc(0.4 * var(--u));
}
.ks-set__appbar-gap {
  width: calc(34 * var(--u));
  flex: 0 0 auto;
}

/* ── Scroll estatico ───────────────────────────────────────────────────── */
.ks-set__scroll {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(126 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  overflow: hidden;
}
/* Toma "desplazada": el primer bloque sube por detras del chrome. El scrim
 * evita que el texto asome por la barra de estado (no hay blur en el mock). */
.ks-set--mid .ks-set__card--account {
  margin-top: calc(-108 * var(--u));
}
.ks-set--mid::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(110 * var(--u));
  z-index: 4;
  background: linear-gradient(
    180deg,
    #0a0c10 0%,
    rgba(10, 12, 16, 0.94) 72%,
    rgba(10, 12, 16, 0) 100%
  );
  pointer-events: none;
}

/* ── Tarjetas (mismos bg/borde que settings_screen.dart) ──────────────── */
.ks-set__card {
  --set-accent: var(--set-account);
  flex: 0 0 auto;
  padding: calc(18 * var(--u));
  border-radius: calc(20 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--ks-surface);
}
.ks-set__card--account {
  --set-accent: var(--set-account);
  background: #1e1b4b;
  border-color: rgba(129, 140, 248, 0.4);
}
.ks-set__card--language {
  --set-accent: var(--set-language);
  background: #1a1408;
}
.ks-set__card--privacy {
  --set-accent: var(--set-privacy);
  background: #111418;
}
.ks-set__card--sync {
  --set-accent: var(--set-sync);
  background: #0a1628;
}
.ks-set__card--perf {
  --set-accent: var(--set-perf);
  background: #111714;
}
.ks-set__card--drawer {
  --set-accent: var(--ks-gold);
  background: #14161c;
}

.ks-set__head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(18 * var(--u));
}
.ks-set__head-ico {
  display: grid;
  place-items: center;
  color: var(--set-accent);
}
.ks-set__head-ico .ks-ico {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.ks-set__head-title {
  margin: 0;
  flex: 1;
  font-size: calc(13 * var(--u));
  font-weight: 800;
  letter-spacing: calc(1 * var(--u));
  color: var(--set-accent);
}
.ks-set__head .ks-set__tag {
  flex: 0 0 auto;
}

.ks-set__body {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}
.ks-set__hint {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(11 * var(--u));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.48);
}
.ks-set__account-line {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}
.ks-set__account-mail {
  color: #fff;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.ks-set__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: 100%;
  min-height: calc(46 * var(--u));
  margin-top: calc(12 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  border: 1px solid transparent;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  text-align: center;
}
.ks-set__btn--google {
  background: #fff;
  color: #111827;
}
.ks-set__btn--session {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.ks-set__btn--apple {
  background: #000;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.ks-set__btn--restore {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.4);
}
.ks-set__btn--outline {
  width: auto;
  align-self: flex-start;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.24);
  padding: 0 calc(20 * var(--u));
}
.ks-set__btn--danger {
  width: auto;
  align-self: flex-start;
  background: transparent;
  color: var(--set-danger);
  border-color: var(--set-danger);
  padding: 0 calc(20 * var(--u));
}
.ks-set__btn--reset {
  background: rgba(255, 82, 82, 0.15);
  color: var(--set-danger);
  border-color: rgba(255, 82, 82, 0.5);
}
.ks-set__btn--ghost {
  width: auto;
  min-height: calc(40 * var(--u));
  align-self: flex-start;
  justify-content: flex-start;
  margin-top: calc(8 * var(--u));
  padding: 0;
  background: transparent;
  color: var(--set-privacy);
  font-size: calc(13 * var(--u));
}
.ks-set__btn--wide {
  width: 100%;
}
.ks-set__btn .ks-ico {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.ks-set__btn--google .ks-set__btn-ico {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex: 0 0 auto;
}

/* ── Etiquetas y bloques sueltos ───────────────────────────────────────── */
.ks-set__tag {
  display: inline-flex;
  align-items: center;
  min-height: calc(18 * var(--u));
  padding: 0 calc(7 * var(--u));
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: calc(9 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.6 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.ks-set__tag--soft {
  color: rgba(255, 255, 255, 0.55);
}
.ks-set__tag--gold {
  color: var(--ks-gold);
}
.ks-set__sep {
  height: 1px;
  margin: calc(16 * var(--u)) 0;
  background: rgba(255, 255, 255, 0.1);
}
.ks-set__label {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.2 * var(--u));
  color: rgba(255, 255, 255, 0.54);
}
.ks-set__label--danger {
  color: var(--set-danger);
}
.ks-set__block-title {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(16 * var(--u));
  font-weight: 500;
  color: #fff;
}
.ks-set__block-body {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.54);
  overflow-wrap: anywhere;
}
.ks-set__block-note {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}
.ks-set__block-note strong {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}
.ks-set__inset {
  padding: 0 calc(4 * var(--u));
}
.ks-set__version {
  display: block;
  margin: calc(10 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.52);
}
.ks-set__mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: #ffd0c8;
  overflow-wrap: anywhere;
}

/* ── Filas + switch (CSS puro) ─────────────────────────────────────────── */
.ks-set__rows {
  margin-top: calc(10 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ks-set__row {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(46 * var(--u));
  padding: calc(5 * var(--u)) 0;
}
.ks-set__row + .ks-set__row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ks-set__row-main {
  flex: 1;
  min-width: 0;
}
.ks-set__row-title {
  display: block;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: #fff;
}
.ks-set__row-title--soft {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.ks-set__row-sub {
  display: block;
  margin-top: calc(3 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.54);
}
.ks-set__row-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--set-accent);
}
.ks-set__row-ico .ks-ico {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.ks-set__row-chev {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.35);
}
.ks-set__row-chev .ks-ico {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}

.ks-set__switch {
  position: relative;
  flex: 0 0 auto;
  width: calc(44 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ks-set__switch::before {
  content: "";
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(2 * var(--u));
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s ease;
}
.ks-set__switch--on {
  background: rgba(147, 197, 253, 0.25);
  border-color: var(--set-privacy);
}
.ks-set__switch--on::before {
  left: calc(20 * var(--u));
}
.ks-set__card--sync .ks-set__switch--on {
  background: rgba(96, 165, 250, 0.25);
  border-color: var(--set-sync);
}
.ks-set__card--perf .ks-set__switch--on {
  background: rgba(0, 255, 240, 0.2);
  border-color: var(--set-perf);
}
.ks-set__card--drawer .ks-set__switch--on {
  background: rgba(245, 196, 81, 0.22);
  border-color: var(--ks-gold);
}

/* ── Chips de seleccion (idioma / rendimiento) ─────────────────────────── */
.ks-set__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
}
.ks-set__chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(40 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
.ks-set__card--language .ks-set__chip--on {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.6);
  color: var(--set-language);
}
.ks-set__card--perf .ks-set__chip--on {
  background: rgba(0, 255, 240, 0.15);
  border-color: rgba(0, 255, 240, 0.6);
  color: var(--set-perf);
}
.ks-set__detected {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  color: rgba(255, 255, 255, 0.54);
}

/* ── Perfil ────────────────────────────────────────────────────────────── */
.ks-set--profile {
  background: #09120d;
}
/* Aurora: header de 240dp (topPad + 240) derivado del acento verde default. */
.ks-set__hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(294 * var(--u));
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 18% -8%, rgba(34, 197, 94, 0.32), transparent 58%),
    radial-gradient(70% 60% at 88% 18%, rgba(34, 197, 94, 0.16), transparent 62%),
    linear-gradient(160deg, #05140b 0%, #072b15 34%, #04180b 68%, #09120d 100%);
}
/* La aurora de la app mueve el gradiente 4 s ida y vuelta (AnimationController
 * repeat(reverse: true)); aca se replica con background-position. */
.ks-set__hero::before {
  content: "";
  position: absolute;
  inset: calc(-20 * var(--u));
  background: radial-gradient(
    42% 48% at 30% 30%,
    rgba(34, 197, 94, 0.34),
    rgba(34, 197, 94, 0) 70%
  );
  animation: ks-set-aurora 4s ease-in-out infinite alternate;
}
@keyframes ks-set-aurora {
  from { transform: translateX(calc(-14 * var(--u))); }
  to { transform: translateX(calc(26 * var(--u))); }
}
.ks-set--profile-scrolled .ks-set__hero {
  display: none;
}
.ks-set__hero-back {
  position: absolute;
  top: calc(64 * var(--u));
  left: calc(16 * var(--u));
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(18 * var(--u));
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.ks-set__hero-back .ks-ico {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.ks-set__hero-title {
  position: absolute;
  top: calc(80 * var(--u));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: calc(17 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.3 * var(--u));
  color: #fff;
}
.ks-set__hero-avatar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(28 * var(--u));
  display: flex;
  justify-content: center;
}
.ks-set__avatar {
  position: relative;
  width: calc(130 * var(--u));
  height: calc(130 * var(--u));
  border-radius: calc(36 * var(--u));
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.65),
    rgba(34, 197, 94, 0.2)
  );
}
.ks-set__avatar-core {
  position: absolute;
  top: calc(3 * var(--u));
  left: calc(3 * var(--u));
  width: calc(124 * var(--u));
  height: calc(124 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(33 * var(--u));
  background: #1b261f;
}
.ks-set__avatar-initial {
  font-size: calc(44 * var(--u));
  font-weight: 900;
  color: var(--set-accent);
}
.ks-set__avatar-badge {
  position: absolute;
  right: calc(2 * var(--u));
  bottom: calc(2 * var(--u));
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(10 * var(--u));
  background: var(--set-accent);
  border: calc(2 * var(--u)) solid #080b0a;
  color: #080b0a;
}
.ks-set__avatar-badge .ks-ico {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}

.ks-set__scroll--profile {
  padding: calc(310 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
  gap: calc(16 * var(--u));
}
.ks-set--profile-scrolled .ks-set__scroll--profile {
  padding-top: calc(70 * var(--u));
}
.ks-set__glass {
  flex: 0 0 auto;
  padding: calc(20 * var(--u));
  border-radius: calc(20 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.ks-set__glass-title {
  margin: 0;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.5 * var(--u));
  color: rgba(255, 255, 255, 0.38);
}
.ks-set__name {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(12 * var(--u));
}
.ks-set__name-value {
  flex: 1;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  color: #fff;
  overflow-wrap: anywhere;
}
.ks-set__name-value--hint {
  font-size: calc(16 * var(--u));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
}
.ks-set__name .ks-ico {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: rgba(255, 255, 255, 0.24);
}

/* Ruedas PESO / EDAD (30-200 paso 0,5; 13-100) + sexo M/F/X. */
.ks-set__wheels {
  display: flex;
  gap: calc(12 * var(--u));
  margin-top: calc(12 * var(--u));
}
.ks-set__wheel {
  flex: 1;
  min-width: 0;
  padding: calc(12 * var(--u)) calc(6 * var(--u));
  border-radius: calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}
.ks-set__wheel-label {
  margin: 0;
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: calc(1.2 * var(--u));
  color: rgba(255, 255, 255, 0.54);
}
.ks-set__wheel-row {
  display: flex;
  align-items: center;
  margin-top: calc(8 * var(--u));
}
.ks-set__step {
  flex: 0 0 auto;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  display: grid;
  place-items: center;
  margin: 0 calc(4 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: var(--set-accent);
  font-size: calc(16 * var(--u));
  font-weight: 800;
  line-height: 1;
}
.ks-set__wheel-stack {
  position: relative;
  flex: 1;
  min-width: 0;
  height: calc(90 * var(--u));
}
.ks-set__wheel-band {
  position: absolute;
  left: calc(1 * var(--u));
  right: calc(1 * var(--u));
  top: 50%;
  translate: 0 -50%;
  height: calc(28 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(34, 197, 94, 0.1);
  border-top: 1px solid rgba(34, 197, 94, 0.45);
  border-bottom: 1px solid rgba(34, 197, 94, 0.45);
}
.ks-set__wheel-vals {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
}
.ks-set__wheel-v {
  font-size: calc(13 * var(--u));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}
.ks-set__wheel-v--on {
  font-size: calc(18 * var(--u));
  font-weight: 900;
  color: var(--set-accent);
}
.ks-set__wheel-suffix {
  margin: calc(5 * var(--u)) 0 0;
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.5 * var(--u));
  color: rgba(34, 197, 94, 0.85);
}
.ks-set__field-label {
  margin: calc(18 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.54);
}
.ks-set__sex {
  display: flex;
  gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
}
.ks-set__sex-opt {
  flex: 1;
  padding: calc(10 * var(--u)) 0;
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}
.ks-set__sex-opt--on {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--set-accent);
}
.ks-set__sex-ico {
  display: block;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
}
.ks-set__sex-lab {
  display: block;
  margin-top: calc(2 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 700;
}

/* Paletas reales de ColorThemes.all (indices 0-14). */
.ks-set__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  margin-top: calc(14 * var(--u));
}
.ks-set__swatch {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: calc(22 * var(--u));
}
.ks-set__swatch--on {
  border: calc(2.5 * var(--u)) solid #fff;
  box-shadow: 0 0 calc(14 * var(--u)) rgba(34, 197, 94, 0.55);
}
.ks-set__swatch--purple { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.ks-set__swatch--blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.ks-set__swatch--cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.ks-set__swatch--green { background: linear-gradient(135deg, #22c55e, #15803d); }
.ks-set__swatch--yellow { background: linear-gradient(135deg, #eab308, #a16207); }
.ks-set__swatch--orange { background: linear-gradient(135deg, #f97316, #c2410c); }
.ks-set__swatch--red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.ks-set__swatch--pink { background: linear-gradient(135deg, #ec4899, #be185d); }
.ks-set__swatch--indigo { background: linear-gradient(135deg, #6e7bff, #3f4ed8); }
.ks-set__swatch--amethyst { background: linear-gradient(135deg, #b57ce8, #8a4fcb); }
.ks-set__swatch--rose { background: linear-gradient(135deg, #f08aa0, #c75575); }
.ks-set__swatch--ember { background: linear-gradient(135deg, #f08a4f, #c25f22); }
.ks-set__swatch--forest { background: linear-gradient(135deg, #5dbe8e, #2f8e5e); }
.ks-set__swatch--ocean { background: linear-gradient(135deg, #4fb3da, #1f88b0); }
.ks-set__swatch--graphite { background: linear-gradient(135deg, #9ba3b0, #6a7280); }
.ks-set__swatch-check {
  display: none;
  color: #fff;
}
.ks-set__swatch--on .ks-set__swatch-emoji {
  display: none;
}
.ks-set__swatch--on .ks-set__swatch-check {
  display: block;
}
.ks-set__swatch-check .ks-ico {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.ks-set__swatch-emoji {
  line-height: 1;
}

.ks-set__save {
  flex: 0 0 auto;
  width: 100%;
  height: calc(56 * var(--u));
  margin-top: calc(16 * var(--u));
  border: none;
  border-radius: calc(18 * var(--u));
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.9), #167f45);
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(34, 197, 94, 0.35);
  color: #000;
  font-size: calc(16 * var(--u));
  font-weight: 900;
  letter-spacing: calc(0.3 * var(--u));
}

/* ── Hoja de confirmacion (borrado de cuenta, paso 2) ──────────────────── */
.ks-set__dim {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.62);
}
.ks-set__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  padding: calc(24 * var(--u));
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  background: #1e1e1e;
  box-shadow: 0 calc(-16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.5);
}
.ks-set__sheet-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--set-danger);
}
.ks-set__sheet-head .ks-ico {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.ks-set__sheet-title {
  margin: 0;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  color: var(--set-danger);
}
.ks-set__sheet-body {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(14 * var(--u));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}
.ks-set__sheet-list {
  margin: calc(14 * var(--u)) 0 0;
  padding-left: calc(18 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.ks-set__sheet-list li {
  margin: calc(4 * var(--u)) 0;
}
.ks-set__input {
  margin: calc(16 * var(--u)) 0 0;
  padding: calc(8 * var(--u)) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  font-size: calc(15 * var(--u));
  color: #fff;
}
.ks-set__input-hint {
  color: rgba(255, 255, 255, 0.62);
}
.ks-set__sheet-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(26 * var(--u));
}
.ks-set__sheet-btn {
  min-height: calc(42 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: none;
  border-radius: calc(10 * var(--u));
  background: transparent;
  color: rgba(255, 255, 255, 0.54);
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.ks-set__sheet-btn--danger {
  background: var(--set-danger);
  color: #fff;
}
.ks-set__sheet-btn--off {
  background: rgba(255, 82, 82, 0.3);
  color: rgba(255, 255, 255, 0.62);
  cursor: not-allowed;
}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.ks-set .ks-ico {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex: 0 0 auto;
}

/* ── Notas y responsive ────────────────────────────────────────────────── */
.ks-set-view .phone__caption {
  padding: 0 calc(8 * var(--u));
}
.screen-notes li {
  overflow-wrap: break-word;
}
.screen-notes code {
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .ks-set__btn--outline,
  .ks-set__btn--danger {
    width: 100%;
    align-self: stretch;
  }
}