/* #/ajustes — ajustes de la aplicación (admin). La página es una pila vertical
   de cards de ajustes (js/views/ajustes.js); cada card: cuerpo con los campos +
   pie con la última modificación y las acciones Restablecer / Guardar. */

.ajustes-stack { max-width: 620px; }

/* La card reparte su padding entre cuerpo y pie (el pie va a sangre). */
.ajustes-card { padding: 0; overflow: hidden; }
.ajustes-card-body {
  display: flex; flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
}
.ajustes-card-title {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.ajustes-card-title svg { color: var(--text-soft); flex: none; }
.ajustes-intro {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-soft);
}

/* Campo numérico con sufijo "%" (input + etiqueta pegada, un solo borde). */
.ajustes-field { display: flex; flex-direction: column; }
.ajustes-field-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.ajustes-num {
  display: inline-flex; align-items: stretch;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.ajustes-num:focus-within {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.ajustes-num.is-invalid { border-color: var(--red); }
.ajustes-num.is-invalid:focus-within { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12); }
.ajustes-num input {
  width: 76px;
  border: 0; outline: none;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ajustes-num input:disabled { color: var(--text-muted); cursor: not-allowed; }
.ajustes-num-suffix {
  display: inline-flex; align-items: center;
  padding: 0 var(--sp-3);
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.ajustes-help { font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); }
.ajustes-error { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--red); }

/* Casilla con título + ayuda debajo, alineada con la primera línea. */
.ajustes-check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  cursor: pointer;
}
.ajustes-check input {
  flex: none;
  width: 16px; height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.ajustes-check:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.ajustes-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ajustes-check-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }

/* Efecto de la configuración actual del formulario (se actualiza al editar). */
.ajustes-summary {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-soft);
}

.ajustes-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.ajustes-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.ajustes-actions { display: flex; gap: var(--sp-2); margin-left: auto; }