/* ═══════════════════════════════════════════════════════════
   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);
  /* Convertido a botón tappable */
  cursor:pointer;
  padding:0;
  overflow:hidden;
  font-family:inherit;
  transition:transform 0.18s var(--spring);
}
.ajustes-hero-av:active{
  transform:scale(0.94);
}
.ajustes-hero-av-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.ajustes-hero-av-ini{
  position:relative;
  z-index:1;
}
.ajustes-hero-av-edit{
  position:absolute;
  bottom:-2px;
  right:-2px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  border:2px solid var(--surface);
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  z-index:2;
}
.ajustes-hero-av.has-photo .ajustes-hero-av-glow{
  opacity:0.3;
}
.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;
}
/* ─── Nombre editable inline ─── */
.ajustes-hero-nm-btn{
  background:none;
  border:none;
  padding:6px 14px;
  margin:0 auto 6px;
  font-family:inherit;
  font-size:17px;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.3px;
  word-break:break-word;
  max-width:280px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:10px;
  cursor:pointer;
  transition:background 0.18s var(--ease);
}
.ajustes-hero-nm-btn:active{
  background:var(--surface2);
}
.ajustes-hero-nm-pen{
  font-size:11px;
  color:var(--muted);
  opacity:0.6;
  transition:opacity 0.2s var(--ease);
}
.ajustes-hero-nm-btn:hover .ajustes-hero-nm-pen{
  opacity:1;
}
.ajustes-hero-name-edit{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:320px;
  margin:0 auto 10px;
  padding:0 16px;
  box-sizing:border-box;
}
.ajustes-hero-name-edit .ajustes-edit-input{
  flex:1;
  text-align:center;
  font-size:16px;
}
.ajustes-hero-name-edit .ajustes-edit-save{
  width:42px;
  height:42px;
  font-size:16px;
}
.ajustes-hero-email{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
  word-break:break-word;
  max-width:280px;
  margin-left:auto;
  margin-right:auto;
  opacity:0.85;
}

/* ─── Action sheet de foto (estilo iOS) ─── */
.ajustes-photo-sheet{
  padding-bottom:max(20px, var(--sab));
}
.ajustes-photo-sheet-ttl{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  margin-bottom:14px;
}
.ajustes-photo-sheet-grp{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:10px;
}
.ajustes-photo-sheet-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  background:transparent;
  border:none;
  border-top:1px solid var(--border);
  color:var(--text);
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:background 0.15s var(--ease);
}
.ajustes-photo-sheet-btn:first-child{
  border-top:none;
}
.ajustes-photo-sheet-btn:active{
  background:var(--surface);
}
.ajustes-photo-sheet-btn.danger{
  color:var(--danger);
}
.ajustes-photo-sheet-ico{
  font-size:18px;
  width:24px;
  text-align:center;
  flex-shrink:0;
}
.ajustes-photo-sheet-cancel{
  width:100%;
  padding:16px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--accent);
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background 0.15s var(--ease);
}
.ajustes-photo-sheet-cancel:active{
  background:var(--surface);
}

.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;
}

/* ─── Modo quincenal (inputs gemelos) ─── */
.ajustes-quincena-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.ajustes-quincena-fld{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ajustes-quincena-lbl{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding-left:2px;
}
.ajustes-quincena-fld .ajustes-edit-input{
  text-align:center;
  padding:12px 8px;
}
.ajustes-quincena-presets{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px;
}
.ajustes-quincena-presets-lbl{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-right:4px;
}
.ajustes-quincena-preset{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  padding:7px 11px;
  border-radius:10px;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:transform 0.15s var(--spring), background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.ajustes-quincena-preset:active{
  transform:scale(0.96);
}
.ajustes-quincena-preset.on{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* ─── 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);
}