/* ═══════════════════════════════════════════════════════════
   AJUSTES — rediseño tipo iOS Settings
   ═══════════════════════════════════════════════════════════
   Reemplaza el bloque actual de .cfg-row / .cfg-k / .cfg-v /
   .ios-sw / .user-row / .user-av / .user-em / .user-sb /
   .btn-edit / .rec-chip por este. Usa las mismas variables
   (--surface, --accent, --border, --spring, etc.).
   ─────────────────────────────────────────────────────────── */

.ajustes-wrap{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:4px 0 24px;
}

/* ─── HERO identidad ─── */
.ajustes-hero{
  text-align:center;
  padding:20px 8px 8px;
  animation:fadeUp 0.6s var(--spring);
}
.ajustes-hero-av{
  position:relative;
  width:80px;
  height:80px;
  margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--surface), var(--surface2));
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:-0.5px;
  box-shadow:0 10px 36px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.5);
}
.ajustes-hero-av-glow{
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
  filter:blur(14px);
  z-index:-1;
  animation:ajustesPulse 3.4s ease-in-out infinite;
}
@keyframes ajustesPulse{
  0%, 100%{ opacity:0.5; transform:scale(1); }
  50%     { opacity:0.95; transform:scale(1.1); }
}
.ajustes-hero-nm{
  font-size:17px;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.3px;
  margin-bottom:6px;
  word-break:break-word;
  max-width:280px;
  margin-left:auto;
  margin-right:auto;
}
.ajustes-hero-est{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:var(--muted);
  font-weight:500;
  padding:4px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:9999px;
}
.ajustes-hero-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  display:inline-block;
  box-shadow:0 0 0 3px var(--success-dim);
}
.ajustes-hero-dot.off{
  background:var(--muted);
  box-shadow:none;
  opacity:0.5;
}

/* ─── Secciones (cada una un grupo) ─── */
.ajustes-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ajustes-section-ttl{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 20px;
  opacity:0.85;
}

/* ─── Lista (card que agrupa filas) ─── */
.ajustes-list{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}

/* ─── Fila base ─── */
.ajustes-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:transparent;
  border:none;
  width:100%;
  text-align:left;
  color:inherit;
  font-family:inherit;
  position:relative;
  min-height:64px;
}
.ajustes-row + .ajustes-row,
.ajustes-row-group + .ajustes-row,
.ajustes-row + .ajustes-row-group,
.ajustes-row-group + .ajustes-row-group{
  border-top:1px solid var(--border);
}

/* Fila tappable */
.ajustes-row-tap{
  cursor:pointer;
  transition:background 0.18s var(--ease);
}
.ajustes-row-tap:active{
  background:var(--surface2);
}

/* Icono cuadrado con fondo de acento */
.ajustes-row-ico{
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--accent-dim);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:600;
  flex-shrink:0;
  line-height:1;
}
.ajustes-row-ico.soft{
  background:var(--surface2);
  color:var(--muted);
}
.ajustes-row-ico.danger{
  background:var(--danger-dim);
  color:var(--danger);
}

/* Texto central */
.ajustes-row-mid{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ajustes-row-ttl{
  font-size:15.5px;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.2px;
  line-height:1.3;
}
.ajustes-row-ttl.danger{
  color:var(--danger);
}
.ajustes-row-sub{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.4;
  font-weight:400;
}

/* Indicadores a la derecha */
.ajustes-row-chev{
  font-size:20px;
  font-weight:400;
  color:var(--muted);
  width:22px;
  text-align:center;
  line-height:1;
  flex-shrink:0;
  opacity:0.7;
  transition:color 0.25s var(--ease), transform 0.22s var(--spring);
}
.ajustes-row-group.open .ajustes-row-chev{
  color:var(--accent);
  opacity:1;
}
.ajustes-row-val{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.2px;
  flex-shrink:0;
}

/* Fila danger en hover/active */
.ajustes-row-tap.danger:active{
  background:var(--danger-dim);
}

/* ─── Grupo expandible ─── */
.ajustes-row-group{
  transition:background 0.3s var(--ease);
}
.ajustes-row-group.open{
  background:var(--surface2);
}

/* ─── Cuerpo expandido ─── */
.ajustes-row-body{
  padding:4px 18px 18px;
  border-top:1px solid var(--border);
  animation:ajustesSlide 0.32s var(--ease);
}
@keyframes ajustesSlide{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ─── Editor inline (salario) ─── */
.ajustes-edit{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
}
.ajustes-edit-prefix{
  font-size:18px;
  font-weight:600;
  color:var(--muted);
  padding-left:4px;
}
.ajustes-edit-input{
  flex:1;
  padding:14px 16px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:14px;
  color:var(--text);
  font-size:17px;
  font-weight:600;
  font-family:inherit;
  outline:none;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.3px;
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -moz-appearance:textfield;
}
.ajustes-edit-input::-webkit-outer-spin-button,
.ajustes-edit-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.ajustes-edit-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-dim);
}
.ajustes-edit-save{
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--text);
  color:var(--surface);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  flex-shrink:0;
  cursor:pointer;
  font-family:inherit;
  transition:transform 0.18s var(--spring);
}
.ajustes-edit-save:active{
  transform:scale(0.92);
}
.ajustes-edit-hint{
  font-size:12px;
  color:var(--muted);
  margin:10px 4px 0;
  line-height:1.45;
  opacity:0.85;
}

/* ─── iOS Switch ─── */
.ajustes-switch{
  position:relative;
  width:51px;
  height:31px;
  flex-shrink:0;
  cursor:pointer;
}
.ajustes-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.ajustes-switch-track{
  position:absolute;
  inset:0;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:9999px;
  transition:background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ajustes-switch-track::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:25px;
  height:25px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  transition:transform 0.28s var(--spring);
}
.ajustes-switch input:checked + .ajustes-switch-track{
  background:var(--accent);
  border-color:var(--accent);
}
.ajustes-switch input:checked + .ajustes-switch-track::after{
  transform:translateX(20px);
}

/* ─── Tabla de recargos (dentro del acordeón) ─── */
.ajustes-recargos{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:12px;
}
.ajustes-recargo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 4px;
  border-bottom:1px solid var(--border);
}
.ajustes-recargo:last-child{
  border-bottom:none;
}
.ajustes-recargo-chip{
  width:30px;
  height:30px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  flex-shrink:0;
}
.ajustes-recargo-lbl{
  flex:1;
  font-size:14px;
  font-weight:500;
  color:var(--text);
  letter-spacing:-0.1px;
}
.ajustes-recargo-pct{
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.2px;
}
.ajustes-legal{
  font-size:11.5px;
  color:var(--muted);
  margin:12px 4px 0;
  line-height:1.55;
  opacity:0.85;
}

/* ─── Footer ─── */
.ajustes-footer{
  text-align:center;
  padding:24px 8px 8px;
  opacity:0.65;
}
.ajustes-footer-brand{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.2px;
  margin-bottom:2px;
}
.ajustes-footer-sub{
  font-size:11px;
  color:var(--muted);
  letter-spacing:0.05em;
}

/* ─── Dark mode (coherente) ─── */
[data-theme="dark"] .ajustes-hero-av{
  background:linear-gradient(135deg, var(--surface2), var(--surface));
  box-shadow:0 10px 36px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .ajustes-switch-track::after{
  background:#f4f4f5;
}
[data-theme="dark"] .ajustes-row-group.open{
  background:var(--surface2);
}